diff --git a/config/server.json b/config/server.json index 669267f..e985c65 100644 --- a/config/server.json +++ b/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" diff --git a/glob/script.js b/glob/script.js index 75e933d..31406aa 100644 --- a/glob/script.js +++ b/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("" + title + ""); +} + +/** + * 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(){ diff --git a/glob/style.sass b/glob/style.sass index 920a5c1..6f38134 100644 --- a/glob/style.sass +++ b/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 \ No newline at end of file diff --git a/glob/style/colors.sass b/glob/style/colors.sass index c09f4e9..b4a4be4 100644 --- a/glob/style/colors.sass +++ b/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 \ No newline at end of file diff --git a/glob/style/elements.sass b/glob/style/elements.sass new file mode 100644 index 0000000..e220319 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/glob/style/layout.sass b/glob/style/layout.sass new file mode 100644 index 0000000..f551eb2 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/lib/caching.js b/lib/caching.js index b3ede22..f77fbc5 100644 --- a/lib/caching.js +++ b/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 } } diff --git a/lib/utils.js b/lib/utils.js index e603f14..b128dae 100644 --- a/lib/utils.js +++ b/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 diff --git a/package.json b/package.json index b3279aa..ab49dce 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,13 @@ { "license": "GPL-v3", "dependencies": { - "args-parser": "1.1.0", - "jquery": "3.3.1", + "args-parser": "^1.1.0", + "jquery": "^3.3.1", "jsdom": "13.2.0", - "node-sass": "4.11.0", - "perfy": "1.1.5", - "winston": "3.1.0", - "winston-daily-rotate-file": "3.5.1" + "node-sass": "^4.9.3", + "perfy": "^1.1.5", + "systeminformation": "^3.45.9", + "winston": "^3.1.0", + "winston-daily-rotate-file": "^3.3.3" } } diff --git a/res/data/cpu.json b/res/data/cpu.json index 73e6ae6..f117b57 100644 --- a/res/data/cpu.json +++ b/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] ] } diff --git a/res/data/sys.json b/res/data/sys.json new file mode 100644 index 0000000..f737591 --- /dev/null +++ b/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]]} \ No newline at end of file diff --git a/res/html/about.htm b/res/html/about.htm new file mode 100644 index 0000000..78e9fdd --- /dev/null +++ b/res/html/about.htm @@ -0,0 +1,53 @@ + +
+
+

+ The Raspberry pi Communication-Network is a network of Raspberry-Pi's. + It's currently still in development.
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). +

+
+
+ + CPU Temperature + +
+ +
+
+
+ + CPU Temperature + +
+ +
+
+
+ + CPU Temperature + +
+ +
+
+
+ + CPU Temperature + +
+ +
+
+
+ \ No newline at end of file diff --git a/res/html/data.htm b/res/html/data.htm new file mode 100644 index 0000000..aaed395 --- /dev/null +++ b/res/html/data.htm @@ -0,0 +1,14 @@ +
+
+ + CPU Temperature + +
+
+
+
+ + \ No newline at end of file diff --git a/res/html/data.html b/res/html/data.html deleted file mode 100644 index dc5c3f1..0000000 --- a/res/html/data.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - -

Data

-
-
- - - - -
-
- - - diff --git a/res/html/index.htm b/res/html/index.htm new file mode 100644 index 0000000..9e038c9 --- /dev/null +++ b/res/html/index.htm @@ -0,0 +1,24 @@ +
+
+
+ Hey, I am a title +
+
+ +
+
+ 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 +
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/res/html/index.html b/res/html/index.html index baf285a..c1d2b14 100644 --- a/res/html/index.html +++ b/res/html/index.html @@ -1,43 +1,36 @@ - - Landing 1 - - -
-

RCN Landing

-
-
- -

- Welcome to the Raspberry Communication Network. -

-

- The Raspberry pi Communication-Network is a network of Raspberry-Pi's. - It's currently still in development.
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). -

-
-
-

- -

-
-
-

- This webpage and server can also be found on github: - - RCN-Frontserver - - | GNU GPL v3.0 -

-
- + + Landing 1 + + +
+
+ +
+
+
+
+
+
+ Title +
+
+
+ +
+
+
+ diff --git a/res/img/icons/menu.svg b/res/img/icons/menu.svg new file mode 100644 index 0000000..b72a742 --- /dev/null +++ b/res/img/icons/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/res/scripts/about.js b/res/scripts/about.js new file mode 100644 index 0000000..7a8a31d --- /dev/null +++ b/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); \ No newline at end of file diff --git a/res/scripts/data.js b/res/scripts/data.js index 1dc423d..5b4bdb7 100644 --- a/res/scripts/data.js +++ b/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); \ No newline at end of file diff --git a/server.js b/server.js index a66c3ff..821a706 100644 --- a/server.js +++ b/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});