Updated Elements

- Graph is now split into background, graph and labels

glob/script.js

@@ -77,47 +77,91 @@ function setTitle(title) {
  * Draws a graph in a canvas element
  * @param element
  * @param data
- * @param dimensions
+ * @param options
- * TODO: Draw background grid and x-values and control it via dimensions (rename it to options)
+ * TODO: Seperated Background canvas and graph canvas. Div with span elements for x and y values.
  */
-function drawGraph(element, data, dimensions) {
+function drawGraph(element, data, options) {
-    let ctx = element.getContext('2d');
+    element.innerHTML = "";
-    let canvWidth = element.width;
+    let cv1 = document.createElement('canvas');
-    let canvHeight = element.height;
+    let cv2 = document.createElement('canvas');
+    let spanDiv = document.createElement('div');
+    spanDiv.setAttribute('class', 'labels');
+    let ctx1 = cv1.getContext('2d');
+    let ctx2 = cv2.getContext('2d');
+    element.appendChild(cv1);
+    element.appendChild(cv2);
+    let canvWidth = cv1.width;
+    let canvHeight = cv2.height;
+    ctx1.clearRect(0, 0, canvWidth, canvHeight);
+    ctx2.clearRect(0, 0, canvWidth, canvHeight);
     let xData = [];
     let yData = [];
-    if (!dimensions) dimensions = {};
+    if (!options) options = {};
-
+    ctx1.beginPath();
-    ctx.strokeStyle = $(element).css('color');
+    ctx1.strokeStyle = $(element).css('color');
+    ctx1.font = "80% Arial";
 
     for (let dt of data) {
         xData.push(dt[0]);
         yData.push(dt[1]);
     }
-    let xMax = dimensions.xMax || Math.max.apply(Math, xData);
+    let xMax = options.xMax || Math.max.apply(Math, xData);
-    let xMin = dimensions.xMin || Math.min.apply(Math, xData);
+    let xMin = options.xMin || Math.min.apply(Math, xData);
-    let yMax = dimensions.yMax || Math.max.apply(Math, yData);
+    let yMax = options.yMax || Math.max.apply(Math, yData);
-    let yMin = dimensions.yMin || Math.min.apply(Math, yData);
+    let yMin = options.yMin || Math.min.apply(Math, yData);
+    let xUnit = options.xUnit || "";
+    let yUnit = options.yUnit || "";
 
     let xStep = canvWidth / (xMax - xMin);
     let yStep = canvHeight / (yMax - yMin);
 
-    console.log(`yMax: ${yMax}; yMin: ${yMin}; ${JSON.stringify(dimensions)}`);
+    let gridCount = canvHeight/yStep;
+    while (gridCount > 10) {
+        gridCount /= 10;
+    }
+    let gridH = (canvHeight/gridCount);
+    for (let i = gridH; i < (canvHeight - gridH/10); i+= gridH) {
+        let span = document.createElement('span');
+        span.style = `position: absolute; top: ${(i/canvHeight)*100}%; left: 0`;
+        span.innerText = Math.round((canvHeight - i)/yStep)+Number(yMin)+" "+yUnit;
+        spanDiv.appendChild(span);
+        ctx1.moveTo(0, i);
+        ctx1.lineTo(canvWidth, i);
+        ctx1.stroke();
+    }
 
+    gridCount = canvWidth/xStep;
+    while (gridCount > 10) {
+        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) {
         x = data[0][0];
         y = data[0][1];
     }
+    ctx2.beginPath();
+    ctx2.strokeStyle = $(element).css('outline-color');
+
     for (let dt of data) {
-        ctx.moveTo(x, y);
+        ctx2.moveTo(x, y);
         x = dt[0] * xStep;
         y = canvHeight - ((dt[1] - yMin) * yStep);
-        ctx.lineTo(x, y);
+        ctx2.lineTo(x, y);
-        ctx.stroke();
+        ctx2.stroke();
-        console.log(x, y);
     }
+    element.appendChild(spanDiv);
 }
 
 // -- Events --

glob/style/elements.sass

@@ -145,9 +145,24 @@
       left: 0
       overflow: auto
     .graph
-      color: $cOnPrimary
+      color: $cPrimaryVariant
+      box-shadow: inset 0 1px 5px $cOnSurfaceShadow
+      border-radius: $sPadding
+      outline-color: $cOnPrimary
+      background: darken($cPrimary, 4%)
       position: absolute
       left: $sPadding
       top: 20%
       height: calc(80% - 12.5px)
-      width: calc(100% - 25px)
+      width: calc(100% - 25px)
+      canvas, .labels
+        position: absolute
+        top: 0
+        left: 0
+        height: 100%
+        width: 100%
+        span
+          padding: 2px
+          font-weight: bold
+          color: $cOnPrimary
+          opacity: 0.75

lib/caching.js

@@ -72,12 +72,13 @@ exports.cache = function (filename, data) {
  * @return {Boolean}          Is it cached or not
  */
 exports.isCached = function (filename) {
+    return false
     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
         }
     }

res/data/cpu.json

@@ -17,13 +17,18 @@
   "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]
   ]
 }

res/html/data.htm

@@ -1,11 +1,10 @@
 <div class="panelContainer">
 	<div class="panel" style="width: 50%">
 		<span class="title">
-			Title
+			CPU Temperature
 		</span>
-		<canvas class="graph">
+		<div class="graph">
-
+		</div>
-		</canvas>
 	</div>
 </div>
 <script type="text/javascript">

res/scripts/data.js

@@ -1,4 +1,9 @@
-$.getJSON('cpu.json', data =>{
+function draw() {
-    let c = document.querySelector('.graph');
+    $.getJSON('cpu.json', data =>{
-    drawGraph(c, data['100temp'], {yMax: 50, yMin: "0"});
+        let c = document.querySelector('.graph');
-});
+        drawGraph(c, data['100temp'], {yMax: 50, yMin: "0", xUnit: "s", yUnit: "°C"});
+    });
+}
+
+draw();
+let refreshInterval = setInterval(draw, 1000);