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
-
+
+