Merge pull request #19 from Trivernis/develop

Develop

config/server.json

@@ -36,6 +36,10 @@
       "path": "./res/img/",
       "mime": "image/png"
     },
+    ".svg": {
+      "path": "./res/img/",
+      "mime": "image/svg+xml"
+    },
     ".ttf": {
       "path": "./res/fonts/",
       "mime": "font/opentype"

glob/script.js

@@ -1,3 +1,5 @@
+// -- Variables --
+let intervals = {};
 // -- Functions --
 
 /**
@@ -40,6 +42,194 @@ function getDataByPath(array, path) {
   return data;
 }
 
+/**
+ * Shows/Hides the sidebar action-menu
+ */
+function toggleActionMenu() {
+  let state = $('.mainview').attr("state"); // get the current state of the mainview element(s)
+  if (state === "retracted") { // set the sate to fullsize or retracted depending on the previous value
+    $('.mainview').attr("state", "fullsize");
+  } else {
+    $('.mainview').attr("state", "retracted");
+  }
+}
+
+/**
+ * Navigates inside the app
+ * @param view the targeted view
+ * @param title the title of the targtet that is displayed
+ */
+function navigate(view, title) {
+    destroyIntervals(window.location.hash);
+    if (view !== 'index.htm') window.location.hash = view; // set the hash if the url is not the index.htm
+    else window.location.hash = ""; // reset the hash if the hash url is the index.htm
+    $('.content').load(view); // load the view into the content class elements
+    let sideTitle = title || view.replace(/\.htm/, ''); // get the side title as the given title or the filename without extension
+    setTitle(sideTitle); // set the sides title
+}
+
+/**
+ * Sets the title that is displayed for the view
+ * @param title
+ */
+function setTitle(title) {
+    $('.navigationBar .title').html("<span>" + title + "</span>");
+}
+
+/**
+ * Draws a graph in a canvas element
+ * @param element
+ * @param data
+ * @param options
+ * TODO: Seperated Background canvas and graph canvas. Div with span elements for x and y values.
+ */
+function drawGraph(element, data, options) {
+    element.innerHTML = ""; // reset the element
+    let cv1 = document.createElement('canvas'); // create a canvas for the background
+    let cv2 = document.createElement('canvas'); // create a canvas for the graph
+    let spanDiv = document.createElement('div'); // create a div for labels
+    spanDiv.setAttribute('class', 'labels'); // set the class for the div
+    let ctx1 = cv1.getContext('2d'); // get the 2d-context for canvas 1
+    let ctx2 = cv2.getContext('2d'); // get the 2d-context for canvas 2
+    element.appendChild(cv1); // append canvas 1 to the element
+    element.appendChild(spanDiv); // append the labels div to the element
+    element.appendChild(cv2); // append canvas 2 to the element
+    let canvWidth = cv2.width = cv1.width = cv1.clientWidth; // set the width of the canvas elements to the clients width
+    let canvHeight = cv2.height = cv1.height = cv1.clientHeight; // set the height of the canvas elements to the clients height
+    let xData = []; // set xData to an empty array
+    let yData = []; // set yData to an empty array
+    if (!options) options = {};
+    ctx1.beginPath();
+    ctx1.strokeStyle = $(element).css('color'); // set the stroke style to the parent elements color
+
+    for (let dt of data) { // seperate x values and y values to two arrays
+        xData.push(dt[0]);
+        yData.push(dt[1]);
+    }
+    let xMax = options.xMax || Math.max.apply(Math, xData); // set the max x value
+    let xMin = options.xMin || Math.min.apply(Math, xData); // set the min x value
+    let yMax = options.yMax || Math.max.apply(Math, yData); // set the max y value
+    let yMin = options.yMin || Math.min.apply(Math, yData); // set the min y value
+    let xUnit = options.xUnit || ""; // set the unit of the x values
+    let yUnit = options.yUnit || ""; // set the unit of the y values
+    let xStep = canvWidth / (xMax - xMin); // set the equivalent pixel step size for an x step
+    let yStep = canvHeight / (yMax - yMin); // set the equivalent pixel step size for an y step
+    let gridCount = canvHeight/yStep; // define the count of grids on the y axis
+
+    while (gridCount > 7) {
+        gridCount /= 1.5;
+    }
+    let gridH = (canvHeight/gridCount); // define the height of the grid
+    for (let i = gridH; i < (canvHeight - gridH/10); i+= gridH) { // create a vertical grid
+        let span = document.createElement('span'); // create a span element
+        span.style = `position: absolute; top: calc(${((i)/canvHeight)*100}% - 1.2em); left: 0`; // set the style of the span element
+        span.innerText = Math.round((canvHeight - i)/yStep)+Number(yMin)+" "+yUnit; // set the text of the span element
+        spanDiv.appendChild(span); // append the span  element to the div
+        ctx1.moveTo(0, i);
+        ctx1.lineTo(canvWidth, i); // draw a grid line
+        ctx1.stroke();
+    }
+
+    gridCount = canvWidth/xStep;
+    while (gridCount > 10) { // do the same as above for the x-axis
+        gridCount /= 2;
+    }
+    let gridW = (canvWidth/gridCount);
+    for (let i = gridW; i < (canvWidth-gridW/10); i+= gridW) {
+        let span = document.createElement('span');
+        span.style = `position: absolute; left: ${(i/canvWidth)*100}%; bottom: 0`;
+        span.innerText = Math.round(i/xStep)+Number(xMin)+" "+xUnit;
+        spanDiv.appendChild(span);
+        ctx1.moveTo(i, 0);
+        ctx1.lineTo(i, canvHeight);
+        ctx1.stroke();
+    }
+    let x = 0;
+    let y = canvHeight;
+
+    if (data.length > 0) { // get the first coordinate as point a
+        x = data[0][0] * xStep;
+        y= canvHeight - ((data[0][1] - yMin) * yStep)
+    }
+    ctx2.beginPath();
+    ctx2.strokeStyle = $(element).css('outline-color'); // set the stroke style to the css value 'outline-color' of the parent
+
+    for (let dt of data) {
+        ctx2.moveTo(x, y); // move to point a (point b of last turn)
+        x = dt[0] * xStep; // get the x value of point b
+        y = canvHeight - ((dt[1] - yMin) * yStep); // get the y value of point b
+        ctx2.lineTo(x, y); // draw a line from point a to point b
+        ctx2.stroke();
+    }
+
+    cv2.addEventListener('mousemove', evt => { // add a mousedown listener that displays a tooltip with the x and y values
+        let mousePos = getMousePos(cv2, evt);
+        showTooltip(`x: ${Math.round(mousePos.x/xStep*10)/10+' '+xUnit},y: ${Math.round((cv1.clientHeight-mousePos.y)/yStep*10)/10+' '+yUnit}`, {x: evt.clientX, y: evt.clientY}, true);
+    });
+}
+
+/**
+ * returns the position of the mouse over a canvas
+ * @param canvas
+ * @param evt
+ * @returns {{x: number, y: number}}
+ */
+function getMousePos(canvas, evt) {
+    let rect = canvas.getBoundingClientRect();
+    return {
+        x: evt.clientX - rect.left,
+        y: evt.clientY - rect.top
+    };
+}
+
+/**
+ * shows a tooltip with the id #tooltip
+ * @param text
+ * @param position
+ * @param keep if false or not set the tooltip will be deleted after 2 seconds
+ */
+function showTooltip(text, position, keep) {
+    let el = document.querySelector('#tooltip') || document.createElement('span'); // set the span to the element with the id or create one if it doesn't exist
+    el.innerText = text; // set the text of the span to the text
+    el.setAttribute('id', 'tooltip'); // set the id to 'tooltip'
+    el.style = `position: absolute; top: ${position.y+10}; left: ${position.x+10}; background: white; color: black;`; // set the style that way that the
+    // absolute x and y of the mouse represent the spans coordinates
+    document.body.appendChild(el); // append the span to the documents body
+    if (!keep) setTimeout(() => el.remove(), 2000); // if keep is false or undefined set a timeout of 2 seconds for deletion of the span
+}
+
+/**
+ * deletes the tooltip with the id #tooltip
+ */
+function hideTooltip() {
+    let tooltip = document.querySelector('#tooltip'); // select the element with the id tooltip
+    if (tooltip) tooltip.remove(); // delete the element if it does exist
+}
+
+/**
+ * Creates an interval and assigns it to an owner for keeping track
+ * @param func
+ * @param sec
+ * @param owner
+ * @returns {Object} the interval
+ */
+function registerInterval(func, sec, owner) {
+    if (!owner) owner = window.location.hash; // set the owner to the hash if it is not defined
+    if (!intervals[owner]) intervals[owner] = []; // if the entry doesn't exist init it as empty list
+    let interval = setInterval(func, sec); // set the interval
+    intervals[owner].push(interval); // assign the interval to the list
+    return interval; // return the interval
+}
+
+/**
+ * Destroys all intervals of an owner
+ * @param owner
+ */
+function destroyIntervals(owner) {
+    if (!intervals[owner]) return;
+    intervals[owner].forEach((intv) => clearInterval(intv));
+}
+
 // -- Events --
 // Define what happens onLoad
 $(document).ready(function(){

glob/style.sass

@@ -1,4 +1,6 @@
 @import "./style/colors.sass"
+@import "./style/layout.sass"
+@import "./style/elements.sass"
 
 @font-face
   font-family: ubuntuL
@@ -12,54 +14,7 @@
   font-family: ubuntuMono
   src: url(/UbuntuMono-R.ttf)
 
-// tagnames
-body
-  font-family: ubuntuL
-  background: $main-color
-  color: $highlight-color
-  text-align: center
-  font-size: 13pt
-
-a
-  color: $link-color
-
-a:hover
-  color: lighten($link-color, 10%)
-
-a:visited
-  color: darken($link-color, 10%)
-
-h1, h2, h3, h4, h5
-  line-height: 1.5em
-// tag-like classes
 
-.title
-  font-size: 30pt
 
-.content
-  padding: 0px 10%
-  margin: auto
-  line-height: 1.5em
-
-.footer
-  position: absolute
-  width: 100%
-  bottom: 0px
-  left: 0px
-  background: $bar-color
-
-.header
-  padding: 1px 1px
-  position: static
-  width: 100%
-  top: 0px
-  left: 0px
-  background: $bar-color
-
-.spacer
-  height: 50px
-
-// attribute-like classes
-
-.justify
-  text-align: justify
+body
+  font-family: ubuntuL

glob/style/colors.sass

@@ -1,4 +1,20 @@
-$main-color: #9289f5
-$highlight-color: #FFF
-$link-color: #FAA
-$bar-color: #2310f7
+$cPrimary: #9289f5
+$cPrimaryVariant: #4c10a5
+$cSecondary: #c889f5
+$cSecondaryVariant: #740bce
+$cBackground: #fff
+$cBackgroundVariant: #000
+$cSurface: #fff
+$cSurfaceVariant: #000
+$cError: #f59289
+$cErrorVariant: #b20a00
+$cOnPrimary: #fff
+$cOnSecondary: #000
+$cOnSurface: #000
+$cOnSurfaceShadow: lighten($cOnSurface, 30%)
+$cOnSurfaceVariant: #fff
+$cOnBackground: #000
+$cOnBackgroundShadow: lighten($cOnBackground, 30%)
+$cOnBackgroundVariant: #fff
+$cOnError: #000
+$cOnErrorVariant: #fff

glob/style/elements.sass

@@ -0,0 +1,175 @@
+@import layout
+@import colors
+
+.app
+  background: $cBackground
+  color: $cOnBackground
+  user-select: none
+  ::-webkit-scrollbar
+    width: 12px
+    height: 12px
+  ::-webkit-scrollbar-thumb
+    background: $cSecondary
+  ::-webkit-scrollbar-track
+    background: lighten($cPrimary, 10%)
+
+.mainview
+  transition-duration: 1s
+  box-shadow: 0 5px 5px $cOnSurfaceShadow
+  background: $cBackground
+
+.mainview[state=retracted]
+  width: 80%
+
+.accentBar
+  @extend .bar
+  background: $cSecondary
+  height: 10px
+
+.navigationBar
+  @extend .bar
+  background: $cPrimary
+  color: $cOnPrimary
+  min-height: 35px
+  box-shadow: 0 5px 5px $cOnSurfaceShadow
+  position: relative
+  z-index: 999
+  text-align: center
+  .menu
+    height: 2em
+    width: 2em
+    padding: calc(0.5em + 5px) $sPadding 0.5em
+    background: url("/icons/menu.svg") no-repeat center, $cPrimary
+    transition-duration: 0.3s
+    cursor: pointer
+    border-radius: 0
+  .menu:hover
+    background: url("/icons/menu.svg") no-repeat center, darken($cPrimary, 4%)
+  .menu:active
+    background: url("/icons/menu.svg") no-repeat center, lighten($cPrimary, 4%)
+    border-radius: 2em
+  .button
+    background: $cPrimary
+    padding: 1em $sPadding 0
+    height: 2em
+    float: left
+    text-align: center
+    transition-duration: 0.3s
+    cursor: pointer
+    border-bottom: 5px solid $cPrimary
+    span
+      vertical-align: middle
+      display: inline-block
+  .button:hover
+    background: darken($cPrimary, 4%)
+    border-bottom: 5px solid darken($cPrimary, 4%)
+  .button:active
+    background: lighten($cPrimary, 4%)
+    border-bottom: 5px solid lighten($cPrimary, 4%)
+  .current
+    border-bottom: 5px solid $cSurface !important
+  .title
+    padding: 0.5em $sPadding 0.5em
+    font-size: 18pt
+    font-weight: bold
+    text-align: center
+    width: 100%
+
+.actionList
+  background: $cPrimary
+  color: $cOnPrimary
+  width: 20%
+  height: 100%
+  ul
+    list-style: none
+    padding-left: 0
+    li
+      padding: $sPadding
+      width: 100%
+      cursor: pointer
+      transition-duration: 0.3s
+    li:hover
+      background: darken($cPrimary, 4%)
+    li:active
+      background: lighten($cPrimary, 4%)
+
+.panelContainer
+  background: $cSurface
+  color: $cOnSurface
+  .panel
+    transition-duration: 0.3s
+    background: $cPrimary
+    color: $cOnPrimary
+    display: inline-block
+    position: relative
+    min-height: 225px
+    min-width: 225px
+    padding: $sPadding
+    max-width: 100vw
+    max-height: 100vw
+    margin: 25px
+    border-radius: $sPadding
+    box-shadow: 0 5px 5px $cOnSurfaceShadow
+    cursor: pointer
+    text-align: justify
+  .panel.max-width
+    width: calc(100% - 75px)
+  .panel.half-width
+    width: calc(50% - 77.5px)
+  .panel:hover
+    background: darken($cPrimary, 4%)
+  .panel:active
+    background: lighten($cPrimary, 4%)
+    box-shadow: 0 7px 5px $cOnSurfaceShadow
+  .panel
+    .title
+      position: absolute
+      padding: $sPadding
+      text-align: center
+      width: calc(100% - 25px)
+      top: 0
+      left: 0
+      font-size: 16pt
+      font-weight: bold
+    .icon
+      position: absolute
+      padding: $sPadding
+      left: 0
+      top: calc(1em + 12.5px)
+      height: calc(50% - 50px)
+      width: calc(100% - 25px)
+      img
+        height: 100%
+        width: auto
+        margin: 0 calc(50% - 25px)
+    .description
+      position: absolute
+      padding: $sPadding
+      top: 50%
+      height: calc(50% - 37.5px)
+      left: 0
+      overflow: auto
+    .graph
+      position: absolute
+      left: $sPadding
+      top: 20%
+      height: calc(80% - 12.5px)
+      width: calc(100% - 25px)
+
+.graph
+  color: $cPrimaryVariant
+  box-shadow: inset 0 1px 5px $cOnSurfaceShadow
+  border-radius: $sPadding
+  outline-color: $cOnPrimary
+  background: darken($cPrimary, 4%)
+  canvas, .labels
+    position: absolute
+    top: 0
+    left: 0
+    height: 100%
+    width: 100%
+    span
+      padding: 2px
+      font-weight: bold
+      color: $cOnPrimary
+      opacity: 0.75

glob/style/layout.sass

@@ -0,0 +1,29 @@
+$sPadding: 12.5px
+
+.app
+  width: 100%
+  height: 100%
+  position: absolute
+  top: 0
+  left: 0
+  display: flex
+
+.mainview
+  width: 100%
+  min-height: 100%
+  position: absolute
+  right: 0
+
+.content
+  flex: 100%
+  overflow: auto
+  height: calc(100vh - 2em - 75px)
+  padding: 25px
+
+.row
+  display: flex
+
+.bar
+  display: flex
+  width: 100%
+  min-height: 10px

lib/caching.js

@@ -1,6 +1,7 @@
 const fs = require("fs"),
     path = require("path"),
-    cache_dir = "./.cache";
+    cache_dir = "./.cache",
+    args = require('args-parser')(process.argv);
 let cache = {};
 let logger = require("winston");
 
@@ -72,12 +73,13 @@ exports.cache = function (filename, data) {
  * @return {Boolean}          Is it cached or not
  */
 exports.isCached = function (filename) {
+    if (args.nocache) return false; // return false if the flag nocache is set
     let cached_entry = cache[filename];
     if (cached_entry) { // check if the cache entry exists
         logger.debug("Found cache entry for %s", filename);
         if (cached_entry.changed) return false; // if a change was detected recache the file
         if (cached_entry.path) { // check if the path variable is set
-            logger.debug("Found path entry for %s", filename)
+            logger.debug("Found path entry for %s", filename);
             return fs.existsSync(cached_entry.path); // return if the file exists
         }
     }

lib/utils.js

@@ -1,8 +1,12 @@
 /**
  * A Series of utility functions
  */
+const fs = require('fs'),
+    si = require('systeminformation');
 
 function noOp() {}
+let sysdataPath = './res/data/sys.json';
+let sysData = {};
 
 /**
  * returns the extension of a file for the given filename.
@@ -19,7 +23,23 @@ exports.getExtension = function (filename) {
         console.error(error);
         return null;
     }
-}
+};
+
+exports.genSystemData = function () {
+    si.currentLoad(data => {
+        if (!sysData["100perc"]) sysData["100perc"] = [];
+        sysData["100perc"].push([sysData["100perc"].length, data.currentload]);
+        if (sysData["100perc"].length > 100) {
+            sysData["100perc"].shift();
+            for (let i = 0; i < sysData["100perc"].length; i++) {
+                sysData["100perc"][i][0] -=1;
+            }
+        }
+    });
+    fs.writeFile(sysdataPath, JSON.stringify(sysData), err => {
+        if (err) console.error(err);
+    });
+};
 
 /**
  * lets you define a cleanup for your program exit

package.json

@@ -1,12 +1,13 @@
 {
   "license": "GPL-v3",
   "dependencies": {
-    "args-parser": "1.1.0",
-    "jquery": "3.3.1",
-    "jsdom": "13.1.0",
-    "node-sass": "4.11.0",
-    "perfy": "1.1.5",
-    "winston": "3.1.0",
-    "winston-daily-rotate-file": "3.5.1"
+    "args-parser": "^1.1.0",
+    "jquery": "^3.3.1",
+    "jsdom": "13.2.0",
+    "node-sass": "^4.9.3",
+    "perfy": "^1.1.5",
+    "systeminformation": "^3.45.9",
+    "winston": "^3.1.0",
+    "winston-daily-rotate-file": "3.6.0"
   }
 }

res/data/cpu.json

@@ -17,13 +17,19 @@
   "100temp": [
     [1,30],
     [2,33],
-    [3,32],
+    [3,34],
     [4,31],
     [5,30],
     [6,29],
     [7,32],
     [8,31],
     [9,34],
-    [10,33]
+    [10,33],
+    [11,29],
+    [12,31],
+    [13,34],
+    [14,33],
+    [15,32],
+    [16,34]
   ]
 }

res/data/sys.json

@@ -0,0 +1 @@
+{"100perc":[[0,11.679560768654854],[1,13.460578842315368],[2,15.246188452886777],[3,12.640379336161716],[4,13.812429941462199],[5,16.54219566840926],[6,12.078861991514849],[7,11.912186603467632],[8,7.1883189816548105],[9,8.998875140607424],[10,11.888460102078923],[11,12.426845971859047],[12,22.391033623910335],[13,14.020207059997505],[14,19.357660584853786],[15,11.685917915949865],[16,12.731134432783609],[17,12.10302575643911],[18,11.10277569392348],[19,12.86105577689243],[20,12.230663843567068],[21,15.060617422822148],[22,14.219782961207434],[23,7.586723234339905],[24,11.123581493951864],[25,7.223955084217093],[26,9.706686552324136],[27,10.684931506849315],[28,10.15],[29,11.129132875857767],[30,10.925],[31,14.40667413771635],[32,8.388548568571071],[33,22.928828716929576],[34,15.932036444225561],[35,21.684789401324835],[36,20.67631644621912],[37,19.880269393863806],[38,11.3125],[39,22.19178082191781],[40,20.004970178926442],[41,22.27914532050481],[42,24.20907840440165],[43,26.30396805590217],[44,27.641568139390166],[45,10.927731932983246],[46,25.33998752339364],[47,24.579124579124578],[48,17.480687764764514],[49,11.745595401724353],[50,14.023705552089833],[51,27.266028002947678],[52,4.311961004874391],[53,4.8533998752339365],[54,1.762720340042505],[55,5.22835038682306],[56,3.3191914150237083],[57,3.7041656273384884],[58,3.7655860349127184],[59,4.0564153769345985],[60,2.9125],[61,6.238303181534623],[62,8.366533864541832],[63,13.248502994011977],[64,7.412028949338658],[65,7.225],[66,2.5618595351162208],[67,4.2880360045005625],[68,6.660834791302174],[69,5.651902682470368],[70,3.0534351145038165],[71,2.5125],[72,2.5618595351162208],[73,3.925],[74,4.451669376016007],[75,9.367593863041037],[76,20.694826293426644],[77,7.634730538922156],[78,8.5875],[79,10.519091589717993],[80,8.549675486769845],[81,7.646176911544228],[82,2.5250000000000004],[83,5.289421157684631],[84,3.488372093023256],[85,3.312914114264283],[86,0.775],[87,4.93503248375812],[88,4.6563745019920315],[89,5.276319079769943],[90,4.2875000000000005],[91,7.62595324415552],[92,6.424650698602795],[93,10.389291415940072],[94,1.9520851818988465],[95,9.974204643164231],[96,8.184653774173425],[97,8.570359281437126],[98,20.433320881583864],[99,9.357454772301933]]}

res/html/about.htm

@@ -0,0 +1,53 @@
+<script type="text/javascript">
+    setTitle('About');
+</script>
+<div class="panelContainer">
+	<div class="panel">
+		<p>
+			The Raspberry pi Communication-Network is a network of Raspberry-Pi's.
+			It's currently still in development. <br> The purpose of this server is to
+			display the status of all raspberry-pi's in the network and the data
+			of several sensors that are connected to these raspberry pi's. The data
+			is stored in a database running on the main backend-server. The
+			frontend-server is running either on a differend device or also on the
+			backend-server-device. If this is the case, then the data is directly
+			fetched from several json files instead of using webservices. The json-
+			files are generated by a script running in the background that get's
+			data from the database and stores it in these json-files every few
+			seconds (depending on the type of data).
+		</p>
+	</div>
+	<div class="panel half-width">
+		<span class="title">
+			CPU Temperature
+		</span>
+		<div class="graph" onmouseout="hideTooltip()">
+
+		</div>
+	</div>
+	<div class="panel half-width">
+		<span class="title">
+			CPU Temperature
+		</span>
+		<div class="graph" onmouseout="hideTooltip()">
+
+		</div>
+	</div>
+	<div class="panel half-width">
+		<span class="title">
+			CPU Temperature
+		</span>
+		<div class="graph" onmouseout="hideTooltip()">
+
+		</div>
+	</div>
+	<div class="panel half-width">
+		<span class="title">
+			CPU Temperature
+		</span>
+		<div class="graph" onmouseout="hideTooltip()">
+
+		</div>
+	</div>
+</div>
+<script type="text/javascript" src="about.js"></script>

res/html/data.htm

@@ -0,0 +1,14 @@
+<div class="panelContainer">
+	<div class="panel" style="width: 50%">
+		<span class="title">
+			CPU Temperature
+		</span>
+		<div class="graph" onmouseout="hideTooltip()">
+		</div>
+	</div>
+</div>
+<script type="text/javascript">
+	setTitle('Data')
+</script>
+<script src="/data.js" type="text/javascript">
+</script>

res/html/data.html

@@ -1,20 +0,0 @@
-<html>
-  <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
-    <script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
-  </head>
-  <body>
-    <h1> Data </h1>
-    <div id="app">
-      <div style="height: 100px; width: 100%">
-        <svg viewBox="0 0 100 100" style="height: 100%; width: 100%">
-          <polygon
-            v-bind:points="temperatureData">
-          </polygon>
-        </svg>
-      </div>
-    </div>
-    <script src="/data.js" type="text/javascript">
-    </script>
-  </body>
-</html>

res/html/index.htm

@@ -0,0 +1,24 @@
+<div class="panelContainer">
+	<div class="panel">
+		<div class="title">
+			<span>Hey, I am a title</span>
+		</div>
+		<div class="icon">
+			<img src="RCN-Logo.png">
+		</div>
+		<div class="description">
+					<span>This very long app description goes from bottom to top.
+					Let us force this description into ULTIMATE-OVERFLOW-MODE!
+					That requires a bit more text so I will just write it here. Looks like it doesn't work</span>
+		</div>
+	</div>
+	<div class="panel">
+	</div>
+	<div class="panel">
+	</div>
+	<div class="panel">
+	</div>
+</div>
+<script type="text/javascript">
+    setTitle('Home')
+</script>

res/html/index.html

@@ -1,43 +1,36 @@
 <html>
-  <head>
-    <title> Landing 1 </title>
-  </head>
-  <body>
-    <div class="header">
-      <h1> RCN Landing </h1>
-    </div>
-    <div class="content">
-      <img src="RCN-Logo.png" style="width: auto; height: 200px"/>
-      <h1 class="title">
-        Welcome to the Raspberry Communication Network.
-      </h1>
-      <p class="justify">
-        The Raspberry pi Communication-Network is a network of Raspberry-Pi's.
-        It's currently still in development. <br> The purpose of this server is to
-        display the status of all raspberry-pi's in the network and the data
-        of several sensors that are connected to these raspberry pi's. The data
-        is stored in a database running on the main backend-server. The
-        frontend-server is running either on a differend device or also on the
-        backend-server-device. If this is the case, then the data is directly
-        fetched from several json files instead of using webservices. The json-
-        files are generated by a script running in the background that get's
-        data from the database and stores it in these json-files every few
-        seconds (depending on the type of data).
-      </p>
-      <div class="spacer">
-      </div>
-      <p class="justify">
-
-      </p>
-    </div>
-    <div class="footer">
-      <p>
-        This webpage and server can also be found on github:
-        <a href="https://github.com/trivernis/rcn-frontserver">
-          RCN-Frontserver
-        </a>
-        | <i> GNU GPL v3.0 </i>
-      </p>
-    </div>
-  </body>
+	<head>
+		<title> Landing 1 </title>
+	</head>
+	<body>
+	<div class="app">
+		<div class="actionList">
+			<ul>
+				<li onclick="navigate('index.htm', 'Home')">
+					Home
+				</li>
+				<li onclick="navigate('data.htm', 'Data')">
+					Data
+				</li>
+				<li onclick="navigate('about.htm', 'About')">
+					About
+				</li>
+			</ul>
+		</div>
+		<div class="mainview" state="retracted">
+			<div class="navigationBar row">
+				<div class="menu" onclick="toggleActionMenu()">
+				</div>
+				<div class="title">
+					<span> Title </span>
+				</div>
+			</div>
+			<div class="content">
+				<script type="text/javascript">
+					navigate(window.location.hash.replace('#', '') || 'index.htm', window.location.hash || 'Home');
+				</script>
+			</div>
+		</div>
+		</div>
+	</body>
 </html>

res/img/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"/></svg>

res/scripts/about.js

@@ -0,0 +1,9 @@
+function draw() {
+    $.getJSON('sys.json', data =>{
+        let graphs = document.querySelectorAll('.graph');
+        graphs.forEach(c => drawGraph(c, data['100perc'], {yMax: 100, yMin: "0", xUnit: "s", yUnit: "%"}));
+    });
+}
+
+draw();
+registerInterval(draw, 1000);

res/scripts/data.js

@@ -1,28 +1,9 @@
-function getFormattedData(dataArray) {
-  let arrData = ["0,100"];
-  for (let d of dataArray) {
-    arrData.push(d[0]+","+(100-d[1]));
-  }
-  arrData.push("100,100");
-  return arrData.join(" ");
+function draw() {
+    $.getJSON('cpu.json', data =>{
+        let c = document.querySelector('.graph');
+        drawGraph(c, data['100temp'], {yMax: 50, yMin: "0", xUnit: "s", yUnit: "°C"});
+    });
 }
 
-new Vue({
-  el: '#app',
-  data: {
-    temperatureData: [1,2,3,4],
-    percentData: [2,3,4,5],
-    labels: ["1", "2", "3", "4", "5"],
-    chartOptions: {
-      responsive: true,
-      maintainAspectRatio: false
-    }
-  },
-  mounted() {
-    let self = this;
-    $.getJSON('cpu.json', d => {
-      self.temperatureData = getFormattedData(d['100temp']),
-      self.percentData = getFormattedData(d['100perc'])
-    })
-  }
-})
+draw();
+registerInterval(draw, 1000);

server.js

@@ -83,6 +83,7 @@ var options = {};
 function main() {
     try {
         prepro.setLogger(logger);
+        setInterval(utils.genSystemData, 1000);
         protocoll.createServer(options, function (req, res) {
             logger.verbose({'msg': 'Received request', 'method': req.method, 'url': req.url});