From 1a7cda36f2c46e48f87e9577642e32bcdb35aa01 Mon Sep 17 00:00:00 2001 From: Trivernis Date: Sun, 21 Oct 2018 21:12:52 +0200 Subject: [PATCH 1/7] HTML redesign - changed to the webapp approach - rebuild it from scratch --- config/server.json | 4 + glob/script.js | 18 ++++ glob/style.sass | 31 ++++--- glob/style/colors.sass | 24 +++++- glob/style/elements.sass | 144 +++++++++++++++++++++++++++++++ glob/style/layout.sass | 27 ++++++ res/html/about.htm | 21 +++++ res/html/{data.html => data.htm} | 11 +-- res/html/index.htm | 21 +++++ res/html/index.html | 76 ++++++++-------- res/img/icons/menu.svg | 1 + 11 files changed, 308 insertions(+), 70 deletions(-) create mode 100644 glob/style/elements.sass create mode 100644 glob/style/layout.sass create mode 100644 res/html/about.htm rename res/html/{data.html => data.htm} (56%) create mode 100644 res/html/index.htm create mode 100644 res/img/icons/menu.svg 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..b8e7470 100644 --- a/glob/script.js +++ b/glob/script.js @@ -40,6 +40,24 @@ function getDataByPath(array, path) { return data; } +/** + * Shows/Hides the sidebar action-menu + */ +function toggleActionMenu() { + let state = $('.mainview').attr("state"); + if (state === "retracted") { + $('.mainview').attr("state", "fullsize"); + } else { + $('.mainview').attr("state", "retracted"); + } +} + +function navigate(view, title) { + $('.content').load(view); + let sideTitle = title || view.replace(/\.htm/, ''); + $('.navigationBar .title').html("" + sideTitle + ""); +} + // -- Events -- // Define what happens onLoad $(document).ready(function(){ diff --git a/glob/style.sass b/glob/style.sass index 920a5c1..2ccbac0 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,43 +14,40 @@ 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 +//a color: $link-color -a:hover +//a:hover color: lighten($link-color, 10%) -a:visited +//a:visited color: darken($link-color, 10%) -h1, h2, h3, h4, h5 +//h1, h2, h3, h4, h5 line-height: 1.5em // tag-like classes -.title +//.title font-size: 30pt -.content +//.content padding: 0px 10% margin: auto line-height: 1.5em -.footer +//.footer position: absolute width: 100% bottom: 0px left: 0px background: $bar-color -.header +//.header padding: 1px 1px position: static width: 100% @@ -56,10 +55,10 @@ h1, h2, h3, h4, h5 left: 0px background: $bar-color -.spacer +//.spacer height: 50px // attribute-like classes -.justify - text-align: justify +//.justify + text-align: justify \ 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..8315a3e --- /dev/null +++ b/glob/style/elements.sass @@ -0,0 +1,144 @@ +@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 + .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%) + .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% + 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: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 \ No newline at end of file diff --git a/glob/style/layout.sass b/glob/style/layout.sass new file mode 100644 index 0000000..237a8d7 --- /dev/null +++ b/glob/style/layout.sass @@ -0,0 +1,27 @@ +$sPadding: 12.5px + +.app + width: 100% + min-height: 100% + position: absolute + top: 0 + left: 0 + display: flex + +.mainview + width: 100% + min-height: 100% + position: absolute + right: 0 + +.content + flex: 100% + padding: 25px + +.row + display: flex + +.bar + display: flex + width: 100% + min-height: 10px \ No newline at end of file diff --git a/res/html/about.htm b/res/html/about.htm new file mode 100644 index 0000000..e69521a --- /dev/null +++ b/res/html/about.htm @@ -0,0 +1,21 @@ +
+ +
+

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

+
+
+

+ +

\ No newline at end of file diff --git a/res/html/data.html b/res/html/data.htm similarity index 56% rename from res/html/data.html rename to res/html/data.htm index dc5c3f1..4b367d5 100644 --- a/res/html/data.html +++ b/res/html/data.htm @@ -1,11 +1,6 @@ - - - - - - +

Data

-
+
- - diff --git a/res/html/index.htm b/res/html/index.htm new file mode 100644 index 0000000..4bc0ad8 --- /dev/null +++ b/res/html/index.htm @@ -0,0 +1,21 @@ +
+
+
+ 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..d28af8e 100644 --- a/res/html/index.html +++ b/res/html/index.html @@ -1,43 +1,37 @@ - - 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 + + +
+
+
+
    +
  • + Home +
    • +
  • + Data +
    • +
  • + About +
    • +
+
+
+
+
+
+
+ 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 From d68baeae618e50499d23aa474e9978cfb35cbb83 Mon Sep 17 00:00:00 2001 From: Trivernis Date: Mon, 22 Oct 2018 20:39:44 +0200 Subject: [PATCH 2/7] Added Navigation --- glob/script.js | 17 ++++++++++++++- glob/style.sass | 46 +--------------------------------------- glob/style/elements.sass | 2 ++ res/html/about.htm | 6 +++--- res/html/data.htm | 28 ++++++++++++------------ res/html/index.htm | 5 ++++- res/html/index.html | 3 +-- 7 files changed, 42 insertions(+), 65 deletions(-) diff --git a/glob/script.js b/glob/script.js index b8e7470..31154a3 100644 --- a/glob/script.js +++ b/glob/script.js @@ -52,10 +52,25 @@ function toggleActionMenu() { } } +/** + * Navigates inside the app + * @param view the targeted view + * @param title the title of the targtet that is displayed + */ function navigate(view, title) { + if (view !== 'index.htm') window.location.hash = view; + else window.location.hash = ""; $('.content').load(view); let sideTitle = title || view.replace(/\.htm/, ''); - $('.navigationBar .title').html("" + sideTitle + ""); + setTitle(sideTitle); +} + +/** + * Sets the title that is displayed for the view + * @param title + */ +function setTitle(title) { + $('.navigationBar .title').html("" + title + ""); } // -- Events -- diff --git a/glob/style.sass b/glob/style.sass index 2ccbac0..6f38134 100644 --- a/glob/style.sass +++ b/glob/style.sass @@ -17,48 +17,4 @@ body - font-family: ubuntuL - -//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 \ No newline at end of file + font-family: ubuntuL \ No newline at end of file diff --git a/glob/style/elements.sass b/glob/style/elements.sass index 8315a3e..a211776 100644 --- a/glob/style/elements.sass +++ b/glob/style/elements.sass @@ -42,10 +42,12 @@ 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 diff --git a/res/html/about.htm b/res/html/about.htm index e69521a..5b3b105 100644 --- a/res/html/about.htm +++ b/res/html/about.htm @@ -16,6 +16,6 @@

-

- -

\ No newline at end of file + \ No newline at end of file diff --git a/res/html/data.htm b/res/html/data.htm index 4b367d5..3c26706 100644 --- a/res/html/data.htm +++ b/res/html/data.htm @@ -1,13 +1,15 @@ - -

Data

-
-
- - - - -
-
- +

Data

+
+
+ + + + +
+
+ + \ No newline at end of file diff --git a/res/html/index.htm b/res/html/index.htm index 4bc0ad8..9e038c9 100644 --- a/res/html/index.htm +++ b/res/html/index.htm @@ -18,4 +18,7 @@
-
\ No newline at end of file +
+ \ No newline at end of file diff --git a/res/html/index.html b/res/html/index.html index d28af8e..c1d2b14 100644 --- a/res/html/index.html +++ b/res/html/index.html @@ -3,7 +3,6 @@ Landing 1 -
    @@ -28,7 +27,7 @@
From 88dd8b7936f534717b14be2b4a84dc0fca3eaafd Mon Sep 17 00:00:00 2001 From: Trivernis Date: Mon, 22 Oct 2018 22:06:12 +0200 Subject: [PATCH 3/7] Added Elements - Added primitive graph element - Changed data --- glob/script.js | 47 ++++++++++++++++++++++++++++++++++++++++ glob/style/elements.sass | 9 +++++++- res/html/data.htm | 20 ++++++++--------- res/scripts/data.js | 32 ++++----------------------- 4 files changed, 69 insertions(+), 39 deletions(-) diff --git a/glob/script.js b/glob/script.js index 31154a3..9749153 100644 --- a/glob/script.js +++ b/glob/script.js @@ -73,6 +73,53 @@ function setTitle(title) { $('.navigationBar .title').html("" + 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) + */ +function drawGraph(element, data, dimensions) { + let ctx = element.getContext('2d'); + let canvWidth = element.width; + let canvHeight = element.height; + let xData = []; + let yData = []; + if (!dimensions) dimensions = {}; + + ctx.strokeStyle = $(element).css('color'); + + 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 xStep = canvWidth / (xMax - xMin); + let yStep = canvHeight / (yMax - yMin); + + console.log(`yMax: ${yMax}; yMin: ${yMin}; ${JSON.stringify(dimensions)}`); + + let x = 0; + let y = canvHeight; + if (data.length > 0) { + x = data[0][0]; + y = data[0][1]; + } + for (let dt of data) { + ctx.moveTo(x, y); + x = dt[0] * xStep; + y = canvHeight - ((dt[1] - yMin) * yStep); + ctx.lineTo(x, y); + ctx.stroke(); + console.log(x, y); + } +} + // -- Events -- // Define what happens onLoad $(document).ready(function(){ diff --git a/glob/style/elements.sass b/glob/style/elements.sass index a211776..a1c2cb6 100644 --- a/glob/style/elements.sass +++ b/glob/style/elements.sass @@ -143,4 +143,11 @@ top: 50% height: calc(50% - 37.5px) left: 0 - overflow: auto \ No newline at end of file + overflow: auto + .graph + color: $cOnPrimary + position: absolute + left: $sPadding + top: 20% + height: calc(80% - 12.5px) + width: calc(100% - 25px) \ No newline at end of file diff --git a/res/html/data.htm b/res/html/data.htm index 3c26706..97a6ec7 100644 --- a/res/html/data.htm +++ b/res/html/data.htm @@ -1,15 +1,15 @@ -

Data

-
-
- - - - +
+
+ + Title + + + +
- + \ No newline at end of file diff --git a/res/scripts/data.js b/res/scripts/data.js index 1dc423d..c620c79 100644 --- a/res/scripts/data.js +++ b/res/scripts/data.js @@ -1,28 +1,4 @@ -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(" "); -} - -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']) - }) - } -}) +$.getJSON('cpu.json', data =>{ + let c = document.querySelector('.graph'); + drawGraph(c, data['100temp'], {yMax: 50, yMin: "0"}); +}); \ No newline at end of file From 5e2bc1e6816e8f55891a696f27aefa6d370e59eb Mon Sep 17 00:00:00 2001 From: Julius Date: Tue, 23 Oct 2018 16:57:56 +0200 Subject: [PATCH 4/7] 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 - - - +
+
\ No newline at end of file + setTitle('About'); + +
+
+

+ 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 + +
+ +
+
+
+ \ No newline at end of file diff --git a/res/html/data.htm b/res/html/data.htm index 6c28292..aaed395 100644 --- a/res/html/data.htm +++ b/res/html/data.htm @@ -3,7 +3,7 @@ CPU Temperature -
+
diff --git a/res/scripts/about.js b/res/scripts/about.js new file mode 100644 index 0000000..73f06a6 --- /dev/null +++ b/res/scripts/about.js @@ -0,0 +1,9 @@ +function draw() { + $.getJSON('sys.json', data =>{ + let c = document.querySelector('.graph'); + drawGraph(c, data['100perc'], {yMax: 100, yMin: "0", xUnit: "s", yUnit: "%"}); + }); +} + +draw(); +let refreshInterval = setInterval(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}); From ad7efc94195cd22a9cff3df140dc6067506c16c3 Mon Sep 17 00:00:00 2001 From: Trivernis Date: Wed, 24 Oct 2018 00:05:47 +0200 Subject: [PATCH 7/7] Wrapper for setInterval - registerInterval sets the interval and stores it for the current locationhash. on navigate() the intervals for the current hash will be cleared. --- glob/script.js | 27 +++++++++++++++++++++++++++ glob/style/elements.sass | 3 +++ glob/style/layout.sass | 4 +++- res/data/sys.json | 2 +- res/html/about.htm | 26 +++++++++++++++++++++++++- res/scripts/about.js | 6 +++--- res/scripts/data.js | 2 +- 7 files changed, 63 insertions(+), 7 deletions(-) diff --git a/glob/script.js b/glob/script.js index f383eb4..31406aa 100644 --- a/glob/script.js +++ b/glob/script.js @@ -1,3 +1,5 @@ +// -- Variables -- +let intervals = {}; // -- Functions -- /** @@ -58,6 +60,7 @@ function toggleActionMenu() { * @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 @@ -203,6 +206,30 @@ function hideTooltip() { 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/elements.sass b/glob/style/elements.sass index 1acfd1a..e220319 100644 --- a/glob/style/elements.sass +++ b/glob/style/elements.sass @@ -79,6 +79,7 @@ background: $cPrimary color: $cOnPrimary width: 20% + height: 100% ul list-style: none padding-left: 0 @@ -113,6 +114,8 @@ 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 diff --git a/glob/style/layout.sass b/glob/style/layout.sass index 237a8d7..f551eb2 100644 --- a/glob/style/layout.sass +++ b/glob/style/layout.sass @@ -2,7 +2,7 @@ $sPadding: 12.5px .app width: 100% - min-height: 100% + height: 100% position: absolute top: 0 left: 0 @@ -16,6 +16,8 @@ $sPadding: 12.5px .content flex: 100% + overflow: auto + height: calc(100vh - 2em - 75px) padding: 25px .row diff --git a/res/data/sys.json b/res/data/sys.json index 269b4c6..f737591 100644 --- a/res/data/sys.json +++ b/res/data/sys.json @@ -1 +1 @@ -{"100perc":[[0,7.592260658628322],[1,10.5375],[2,10.708504544888557],[3,6.638329791223903],[4,7.6230942264433885],[5,7.015130674002751],[6,8.763849122370223],[7,8.952807869505666],[8,13.56121814791796],[9,10.153423974055134],[10,10.926780591243606],[11,6.225826575171553],[12,11.89020586400499],[13,11.692038931869229],[14,8.594237245852563],[15,10.90455396132252],[16,27.02868350085805],[17,12.44228129289904],[18,13.291770573566083],[19,9.575],[20,11.679560768654854],[21,11.670195541163283],[22,19.142821441959263],[23,15.54559043348281],[24,12.289457267623206],[25,12.060613588374116]]} \ No newline at end of file +{"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 index 0b045ad..78e9fdd 100644 --- a/res/html/about.htm +++ b/res/html/about.htm @@ -17,7 +17,31 @@ seconds (depending on the type of data).

-
+
+ + CPU Temperature + +
+ +
+
+
+ + CPU Temperature + +
+ +
+
+
+ + CPU Temperature + +
+ +
+
+
CPU Temperature diff --git a/res/scripts/about.js b/res/scripts/about.js index 73f06a6..7a8a31d 100644 --- a/res/scripts/about.js +++ b/res/scripts/about.js @@ -1,9 +1,9 @@ function draw() { $.getJSON('sys.json', data =>{ - let c = document.querySelector('.graph'); - drawGraph(c, data['100perc'], {yMax: 100, yMin: "0", xUnit: "s", yUnit: "%"}); + let graphs = document.querySelectorAll('.graph'); + graphs.forEach(c => drawGraph(c, data['100perc'], {yMax: 100, yMin: "0", xUnit: "s", yUnit: "%"})); }); } draw(); -let refreshInterval = setInterval(draw, 1000); \ No newline at end of file +registerInterval(draw, 1000); \ No newline at end of file diff --git a/res/scripts/data.js b/res/scripts/data.js index 678a2f8..5b4bdb7 100644 --- a/res/scripts/data.js +++ b/res/scripts/data.js @@ -6,4 +6,4 @@ function draw() { } draw(); -let refreshInterval = setInterval(draw, 1000); \ No newline at end of file +registerInterval(draw, 1000); \ No newline at end of file