From 5e2bc1e6816e8f55891a696f27aefa6d370e59eb Mon Sep 17 00:00:00 2001 From: Julius Date: Tue, 23 Oct 2018 16:57:56 +0200 Subject: [PATCH] Updated Elements - Graph is now split into background, graph and labels --- glob/script.js | 80 +++++++++++++++++++++++++++++++--------- glob/style/elements.sass | 19 +++++++++- lib/caching.js | 3 +- res/data/cpu.json | 9 ++++- res/html/data.htm | 7 ++-- res/scripts/data.js | 13 +++++-- 6 files changed, 100 insertions(+), 31 deletions(-) diff --git a/glob/script.js b/glob/script.js index 9749153..40d42cc 100644 --- a/glob/script.js +++ b/glob/script.js @@ -77,47 +77,91 @@ function setTitle(title) { * Draws a graph in a canvas element * @param element * @param data - * @param dimensions - * TODO: Draw background grid and x-values and control it via dimensions (rename it to options) + * @param options + * TODO: Seperated Background canvas and graph canvas. Div with span elements for x and y values. */ -function drawGraph(element, data, dimensions) { - let ctx = element.getContext('2d'); - let canvWidth = element.width; - let canvHeight = element.height; +function drawGraph(element, data, options) { + element.innerHTML = ""; + let cv1 = document.createElement('canvas'); + 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 = {}; - - ctx.strokeStyle = $(element).css('color'); + if (!options) options = {}; + ctx1.beginPath(); + 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 xMin = dimensions.xMin || Math.min.apply(Math, xData); - let yMax = dimensions.yMax || Math.max.apply(Math, yData); - let yMin = dimensions.yMin || Math.min.apply(Math, yData); + let xMax = options.xMax || Math.max.apply(Math, xData); + let xMin = options.xMin || Math.min.apply(Math, xData); + let yMax = options.yMax || Math.max.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); - ctx.stroke(); - console.log(x, y); + ctx2.lineTo(x, y); + ctx2.stroke(); } + element.appendChild(spanDiv); } // -- Events -- diff --git a/glob/style/elements.sass b/glob/style/elements.sass index a1c2cb6..d87b17b 100644 --- a/glob/style/elements.sass +++ b/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) \ No newline at end of file + 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 \ No newline at end of file diff --git a/lib/caching.js b/lib/caching.js index b3ede22..4d378ae 100644 --- a/lib/caching.js +++ b/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 } } diff --git a/res/data/cpu.json b/res/data/cpu.json index 73e6ae6..191ee42 100644 --- a/res/data/cpu.json +++ b/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] ] } diff --git a/res/html/data.htm b/res/html/data.htm index 97a6ec7..6c28292 100644 --- a/res/html/data.htm +++ b/res/html/data.htm @@ -1,11 +1,10 @@
- Title + CPU Temperature - - - +
+