From 50906649c25fa73a57bb6c17d3678ffba0df30a7 Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Wed, 3 Apr 2024 10:12:25 +0200 Subject: [PATCH 1/9] Website changes --- web/newWebsite/index.html | 9 ++++++ web/newWebsite/styles/dashboard-styles.css | 15 ++++++++-- web/newWebsite/text.html | 2 -- web/newWebsite/text.js | 33 +++++++++++++--------- 4 files changed, 40 insertions(+), 19 deletions(-) diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index 6346d81..8a5c2f7 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -29,6 +29,15 @@ +
+

Status updating

+ + + + +
+ + diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 35fa91c..e406f83 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -12,6 +12,14 @@ justify-content: left; } */ +.nav-button { + background-color: #333; + color: #fff; + border: none; + cursor: pointer; + font-size: 17px; +} + #editNode{ display: flex; justify-content: center; @@ -21,13 +29,14 @@ /* border: 20px solid orange; */ } - /* #editNode { + #editNode { + margin-top: 1%; width: 98vw; height: 20vh; display: flex; justify-content: center; /* flex-direction: column; Keep as column - /* justify-content: ; + /* justify-content: ; */ align-items: center; background-color: #333; @@ -39,7 +48,7 @@ margin-bottom: 10px; position: relative; float: top; -} */ +} body { display: flex; diff --git a/web/newWebsite/text.html b/web/newWebsite/text.html index e3d1ae5..1783df8 100644 --- a/web/newWebsite/text.html +++ b/web/newWebsite/text.html @@ -8,8 +8,6 @@ - -
diff --git a/web/newWebsite/text.js b/web/newWebsite/text.js index 63e3853..45856bd 100644 --- a/web/newWebsite/text.js +++ b/web/newWebsite/text.js @@ -17,26 +17,30 @@ function settings() { updateNode.style.display = "block"; locationInput.value = ""; nameInput.value = ""; - - fetch(apiGetAllNode) - .then(response => { - if (!response.ok) { - document.getElementById('text').innerHTML = "Error: Network response was not ok"; - throw new Error('Network response was not ok'); - } - document.getElementById('text').innerHTML = "Fetching data"; - return response.json(); - }) - .then(data => { - document.getElementById('text').innerHTML = "Data fetched"; - handleData(data); - }) + getNodeInfo(); } else { updateNode.style.display = "none"; } } + +function getNodeInfo() { + fetch(apiGetAllNode) + .then(response => { + if (!response.ok) { + document.getElementById('text').innerHTML = "Error: Network response was not ok"; + throw new Error('Network response was not ok'); + } + document.getElementById('text').innerHTML = "Fetching data"; + return response.json(); + }) + .then(data => { + document.getElementById('text').innerHTML = "Data fetched"; + handleData(data); + }) +} + function handleData(JSONdata) { var i, L = select.options.length - 1; for (i = L; i >= 0; i--) { @@ -71,6 +75,7 @@ function changeText() { var text = document.getElementById('text'); text.innerHTML = "Changes made" + getNodeInfo(); } function updateNodeInfo(node, newNodeName, newNodeLocation) { From e67764ee427df56d72a8217e8f72c3cc5db63805 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 3 Apr 2024 10:42:40 +0200 Subject: [PATCH 2/9] Fix variable name capitalization in main.js and clean up CSS styles in dashboard-styles.css --- web/newWebsite/main.js | 2 +- web/newWebsite/styles/dashboard-styles.css | 323 +++++++-------------- 2 files changed, 104 insertions(+), 221 deletions(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index c5e1486..020df7b 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -54,7 +54,7 @@ async function handleIncomingData(data) { await nodeAdressHandler(data.node, Object.keys(data).filter(key => key !== 'node')); - let nodeName = nodeDict[data.node].name; + let nodeName = nodeDict[data.node].Name; let temperature = data.Temp; let humidity = data.Humi; let CO2 = data.eCO2; diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 571fc94..709025e 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -1,201 +1,18 @@ * { box-sizing: border-box; font-family: "Roboto", sans-serif; - - -} - -/* -.editNodeInformation{ - margin-bottom: 60%; - display: flex; - justify-content: left; -} */ - -.nav-button { - background-color: #333; - color: #fff; - border: none; - cursor: pointer; - font-size: 17px; -} - -#editNode{ - display: flex; - justify-content: center; - /* align-items: center; */ - /* flex-direction: column; */ - /* border-radius: 5%; */ - /* border: 20px solid orange; */ } - - #editNode { - margin-top: 1%; - width: 98vw; - height: 20vh; + + body { + padding-top: 5vw; display: flex; - justify-content: center; - /* flex-direction: column; Keep as column - /* justify-content: ; */ - align-items: center; - - background-color: #333; - color: #fff; - padding: 10px; - border-radius: 50px; - border: 2px solid #333; - clear: both; - margin-bottom: 10px; - position: relative; - float: top; -} - -body { - display: flex; - justify-content: center; + flex-direction: column; + background-color: #afafaf; margin: 0; - margin-top: 8vh; - flex-direction: column; - background-color: #bfbfbf; - align-items: center; - -} - -.gaugeGroup { - width: 98vw; - height: auto; - display: flex; - flex-direction: column; /* Keep as column */ - justify-content: flex-start; - background-color: #9f9f9f; - color: #fff; - padding: 10px; - border-radius: 50px; - border: 2px solid #CC2936; - clear: both; - margin-bottom: 10px; - position: relative; -} - -.groupTitle { - width: 100%; - text-align: center; - font-size: 24px; -} - -.Node { - display: flex; - justify-content: space-around; - align-items: center; - width: 100%; - height: 100%; -} - -.Sensorvalues { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - flex-wrap: wrap; - width: 15%; - height: 110%; - background-color: #ddd; - color: #333; - padding: 10px; - margin: 10px; - border-radius: 10px; - text-align: center; - position: relative; - padding-top: 3vh; /* Increase bottom padding */ -} - -.gaugeContainer { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 80%; /* Increase the height from 70% to 80% */ - position: relative; - overflow: visible; - height: 5vh; - margin-bottom: 1vh; - -} - -.gaugeImage { - width: 100%; - height: auto; - max-height: 140%; - object-fit: contain; - position: absolute; /* Make the image position absolute */ - top: 0; - left: 0; - z-index: 1; /* Make the image display below the needle */ - bottom: 0; -} - -.gaugeValue, .gaugeText { - width: 100%; - text-align: center; - font-size: 24px; - z-index: 2; -} - -.gaugeText { - width: 100%; - text-align: center; - font-size: 1.4vw; - z-index: 2; - position: absolute; - top: -1.4vw; /* Adjust this value to move the text further down */ - -} - -.arrowimg { - width: 3vh; - height: auto; - max-height: 100%; - object-fit: contain; - position: absolute; - top: 0.5vw; - right: 1.2vw; - z-index: 2; -} - -.valueContainer { - display: flex; - justify-content: center; - margin-top: 10px; -} - -#valueText { - font-size: 20px; -} - -.needle { - position: absolute; - bottom: -10%; /* Lower the needle to the bottom */ - left: 50%; - width: 2px; - height: 100%; - background-color: black; - transform-origin: bottom; - z-index: 3; /* Make the needle display above the image */ - transition: transform 0.1s ease-out; - -} - -.contentContainer { - display: flex; - flex-direction: row; /* Layout children side by side */ - width: 100%; - height: 100%; -} - -.navbar { - background-color: #bfbfbf; - border-bottom: 2px solid #CC2936; + } + + .navbar { + background-color: #333; height: 60px; display: flex; align-items: center; @@ -204,43 +21,109 @@ body { top: 0; /* Position it at the very top */ width: 100%; /* Make it span the full width of the page */ z-index: 1000; /* Make sure it's above all other elements */ -} - -.navbar-nav { + } + + .navbar-nav { list-style: none; display: flex; align-items: center; justify-content: center; /* Center the links horizontally */ height: 100%; width: 100%; /* Make it span the full width of the navbar */ -} - -.nav-item { + } + + .nav-item { margin-right: 20px; -} - -.nav-link { + } + + .nav-link { color: #fff; text-decoration: none; font-size: 18px; -} - -.plotly-container { - width: 100%; - float: bottom; - padding: 1vw; - align-items: center; - justify-content: center; + } + + .container { display: flex; -} - -.js-plotly-plot { - width: 90%; + flex-direction: row; + align-items: center; + align-self: center; + border: 3px solid #ccc; + border-radius: 10px; + margin: 20px; + padding: 20px; + width: 95%; + box-sizing: border-box; + } + + .data-types { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + margin-right: 60px; + margin-bottom: 10px; + font-size: 0.8em; + padding: 8px; + border-radius: 5px; + background-color: #f0f0f0; + } + + .filters { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + margin-bottom: 10px; + } + + .date-filter { + flex: 1; + text-align: center; + margin-right: 60px; + font-size: 1.2em; /* Increase font size for a bigger appearance */ + padding: 8px; + border-radius: 5px; /* Add border radius for a rounded look */ + background-color: #f0f0f0; /* Light background color for contrast */ + } + + .node-filter { + flex: 1; + margin: auto; + text-align: center; + margin-right: 60px; + align-content: center; + font-size: 1.2em; /* Increase font size for a bigger appearance */ + padding: 8px; + border-radius: 5px; /* Add border radius for a rounded look */ + background-color: #f0f0f0; /* Light background color for contrast */ + } + + .filter-button { + width: 10%; + background-color: #007bff; + color: white; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + } + + .js-plotly-plot { + width: 100%; height: 100%; -} - -.disabled { - opacity: 0; - height: 0; - -} \ No newline at end of file + align-self: center center; + } + /* Additional styling as needed */ + + .graphBody { + display: flex; + padding: 10px; + border: 3px solid #ccc; + border-radius: 10px; + justify-content: center; + width: 95%; + height: 100%; + align-content: center; + align-self: center; + } + \ No newline at end of file From a2e77e6f3d019f68b77d9f14bb436647cee41ab4 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 3 Apr 2024 10:43:32 +0200 Subject: [PATCH 3/9] Fix variable name in main.js --- web/newWebsite/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index 020df7b..c5e1486 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -54,7 +54,7 @@ async function handleIncomingData(data) { await nodeAdressHandler(data.node, Object.keys(data).filter(key => key !== 'node')); - let nodeName = nodeDict[data.node].Name; + let nodeName = nodeDict[data.node].name; let temperature = data.Temp; let humidity = data.Humi; let CO2 = data.eCO2; From 24ec686fa069fec8af776c953f931196950cb45d Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Wed, 3 Apr 2024 10:59:57 +0200 Subject: [PATCH 4/9] Update navigation and dashboard styles --- web/newWebsite/index.html | 3 +++ web/newWebsite/styles/dashboard-styles.css | 11 ++++++----- web/newWebsite/text.js | 8 ++++---- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index aad6b66..f2b5b42 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -28,6 +28,9 @@
  • Questions
    • +
  • + +
    • diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 571fc94..cec98f5 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -55,8 +55,9 @@ body { justify-content: center; margin: 0; margin-top: 8vh; + background-color: #f0f0f0; flex-direction: column; - background-color: #bfbfbf; + background-color: #afafaf; align-items: center; } @@ -67,13 +68,13 @@ body { display: flex; flex-direction: column; /* Keep as column */ justify-content: flex-start; - background-color: #9f9f9f; + background-color: #333; color: #fff; padding: 10px; border-radius: 50px; - border: 2px solid #CC2936; + border: 2px solid #333; clear: both; - margin-bottom: 10px; + margin-top: 20px; position: relative; } @@ -194,7 +195,7 @@ body { } .navbar { - background-color: #bfbfbf; + background-color: #333; border-bottom: 2px solid #CC2936; height: 60px; display: flex; diff --git a/web/newWebsite/text.js b/web/newWebsite/text.js index 45856bd..24a1f81 100644 --- a/web/newWebsite/text.js +++ b/web/newWebsite/text.js @@ -1,4 +1,4 @@ -apiGetAllNode = "http://145.92.8.114/getNodeInfo?macAdress=*" +apiGetAllNode = "http://145.92.8.114/getInfoNode?macAdress=*" nodeDataArray = {}; @@ -17,7 +17,7 @@ function settings() { updateNode.style.display = "block"; locationInput.value = ""; nameInput.value = ""; - getNodeInfo(); + getInfoNode(); } else { updateNode.style.display = "none"; @@ -25,7 +25,7 @@ function settings() { } -function getNodeInfo() { +function getInfoNode() { fetch(apiGetAllNode) .then(response => { if (!response.ok) { @@ -75,7 +75,7 @@ function changeText() { var text = document.getElementById('text'); text.innerHTML = "Changes made" - getNodeInfo(); + getInfoNode(); } function updateNodeInfo(node, newNodeName, newNodeLocation) { From 50dff897619338777568100507e18b7b5526d083 Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Wed, 3 Apr 2024 11:04:17 +0200 Subject: [PATCH 5/9] Revert "Merge branch 'main' of..." This reverts commit 045fbb50d9295492b42041702cc81cb87ec7923b --- web/newWebsite/styles/dashboard-styles.css | 120 +++++---------------- 1 file changed, 27 insertions(+), 93 deletions(-) diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index ad12db7..cec98f5 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -205,109 +205,43 @@ body { top: 0; /* Position it at the very top */ width: 100%; /* Make it span the full width of the page */ z-index: 1000; /* Make sure it's above all other elements */ - } - - .navbar-nav { +} + +.navbar-nav { list-style: none; display: flex; align-items: center; justify-content: center; /* Center the links horizontally */ height: 100%; width: 100%; /* Make it span the full width of the navbar */ - } - - .nav-item { +} + +.nav-item { margin-right: 20px; - } - - .nav-link { +} + +.nav-link { color: #fff; text-decoration: none; font-size: 18px; - } - - .container { - display: flex; - flex-direction: row; - align-items: center; - align-self: center; - border: 3px solid #ccc; - border-radius: 10px; - margin: 20px; - padding: 20px; - width: 95%; - box-sizing: border-box; - } - - .data-types { - flex: 1; - display: flex; - flex-direction: column; - align-items: flex-start; - margin-right: 60px; - margin-bottom: 10px; - font-size: 0.8em; - padding: 8px; - border-radius: 5px; - background-color: #f0f0f0; - } - - .filters { - display: flex; - justify-content: space-between; - align-items: center; +} + +.plotly-container { width: 100%; - margin-bottom: 10px; - } - - .date-filter { - flex: 1; - text-align: center; - margin-right: 60px; - font-size: 1.2em; /* Increase font size for a bigger appearance */ - padding: 8px; - border-radius: 5px; /* Add border radius for a rounded look */ - background-color: #f0f0f0; /* Light background color for contrast */ - } - - .node-filter { - flex: 1; - margin: auto; - text-align: center; - margin-right: 60px; - align-content: center; - font-size: 1.2em; /* Increase font size for a bigger appearance */ - padding: 8px; - border-radius: 5px; /* Add border radius for a rounded look */ - background-color: #f0f0f0; /* Light background color for contrast */ - } - - .filter-button { - width: 10%; - background-color: #007bff; - color: white; - padding: 10px; - border: none; - border-radius: 5px; - cursor: pointer; - } - - .js-plotly-plot { - width: 100%; - height: 100%; - align-self: center center; - } - /* Additional styling as needed */ - - .graphBody { - display: flex; - padding: 10px; - border: 3px solid #ccc; - border-radius: 10px; + float: bottom; + padding: 1vw; + align-items: center; justify-content: center; - width: 95%; + display: flex; +} + +.js-plotly-plot { + width: 90%; height: 100%; - align-content: center; - align-self: center; - } - \ No newline at end of file +} + +.disabled { + opacity: 0; + height: 0; + +} \ No newline at end of file From c44c9c82b37abcf45e55c7e38eb9e571ba954909 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 3 Apr 2024 11:09:21 +0200 Subject: [PATCH 6/9] Update dashboard styles and API endpoint --- web/newWebsite/styles/dashboard-styles.css | 73 ---------------------- web/newWebsite/text.js | 2 +- 2 files changed, 1 insertion(+), 74 deletions(-) diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index ad12db7..954bdf6 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -196,7 +196,6 @@ body { .navbar { background-color: #333; - border-bottom: 2px solid #CC2936; height: 60px; display: flex; align-items: center; @@ -238,76 +237,4 @@ body { width: 95%; box-sizing: border-box; } - - .data-types { - flex: 1; - display: flex; - flex-direction: column; - align-items: flex-start; - margin-right: 60px; - margin-bottom: 10px; - font-size: 0.8em; - padding: 8px; - border-radius: 5px; - background-color: #f0f0f0; - } - - .filters { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - margin-bottom: 10px; - } - - .date-filter { - flex: 1; - text-align: center; - margin-right: 60px; - font-size: 1.2em; /* Increase font size for a bigger appearance */ - padding: 8px; - border-radius: 5px; /* Add border radius for a rounded look */ - background-color: #f0f0f0; /* Light background color for contrast */ - } - - .node-filter { - flex: 1; - margin: auto; - text-align: center; - margin-right: 60px; - align-content: center; - font-size: 1.2em; /* Increase font size for a bigger appearance */ - padding: 8px; - border-radius: 5px; /* Add border radius for a rounded look */ - background-color: #f0f0f0; /* Light background color for contrast */ - } - - .filter-button { - width: 10%; - background-color: #007bff; - color: white; - padding: 10px; - border: none; - border-radius: 5px; - cursor: pointer; - } - - .js-plotly-plot { - width: 100%; - height: 100%; - align-self: center center; - } - /* Additional styling as needed */ - - .graphBody { - display: flex; - padding: 10px; - border: 3px solid #ccc; - border-radius: 10px; - justify-content: center; - width: 95%; - height: 100%; - align-content: center; - align-self: center; - } \ No newline at end of file diff --git a/web/newWebsite/text.js b/web/newWebsite/text.js index 24a1f81..214feac 100644 --- a/web/newWebsite/text.js +++ b/web/newWebsite/text.js @@ -1,4 +1,4 @@ -apiGetAllNode = "http://145.92.8.114/getInfoNode?macAdress=*" +apiGetAllNode = "http://145.92.8.114/getNodeInfo?macAdress=*" nodeDataArray = {}; From 6f5f9d4b47ded8cda8be825ecda86bb9ba7e95ee Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 3 Apr 2024 11:19:01 +0200 Subject: [PATCH 7/9] WORKING --- web/newWebsite/main.js | 2 +- web/newWebsite/styles/dashboard-styles.css | 30 +++++++++++++--------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index c5e1486..72d3a01 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -141,4 +141,4 @@ function toggleGraph(nodeId) { } else { console.error('No element found with id: liveGraph' + nodeId); } -} \ No newline at end of file +} diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 34efb9b..eeab2b1 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -57,7 +57,7 @@ body { margin-top: 8vh; background-color: #f0f0f0; flex-direction: column; - background-color: #afafaf; + background-color: #afafaf; align-items: center; } @@ -74,7 +74,7 @@ body { border-radius: 50px; border: 2px solid #333; clear: both; - margin-top: 20px; + margin-bottom: 10px; position: relative; } @@ -108,6 +108,7 @@ body { text-align: center; position: relative; padding-top: 3vh; /* Increase bottom padding */ + } .gaugeContainer { @@ -127,7 +128,7 @@ body { .gaugeImage { width: 100%; height: auto; - max-height: 140%; + max-height: 120%; object-fit: contain; position: absolute; /* Make the image position absolute */ top: 0; @@ -230,12 +231,17 @@ body { float: bottom; padding: 1vw; align-items: center; - align-self: center; - border: 3px solid #ccc; - border-radius: 10px; - margin: 20px; - padding: 20px; - width: 95%; - box-sizing: border-box; - } - \ No newline at end of file + justify-content: center; + display: flex; +} + +.js-plotly-plot { + width: 90%; + height: 100%; +} + +.disabled { + opacity: 0; + height: 0; + +} From 8c9ccda61ae8b0e4c9b7563b8beb46c4167a741d Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 3 Apr 2024 11:28:37 +0200 Subject: [PATCH 8/9] Refactor navigation links in HTML files --- web/newWebsite/graph-main.js | 4 +- web/newWebsite/graphs.html | 6 +- web/newWebsite/index.html | 3 - web/newWebsite/questions-dashboard.html | 3 - web/newWebsite/settings.html | 35 --- web/newWebsite/styles/dashboard-styles.css | 322 ++++++++++----------- 6 files changed, 158 insertions(+), 215 deletions(-) delete mode 100644 web/newWebsite/settings.html diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 6caadde..5ed8f02 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -25,10 +25,10 @@ function createCheckBox(id, label) { return response.json(); }) .then(data => { - handleData(data); + nodeInputs(data); }) -function handleData(JSONdata) { +function nodeInputs(JSONdata) { select = document.getElementById('node-input'); console.log(JSONdata); diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index d4b62cc..6396326 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -2,6 +2,7 @@ + @@ -20,16 +21,15 @@
  • Graphs
    • -
  • - Settings -
  • Questions +
    • + \ No newline at end of file diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index f2b5b42..88846a2 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -22,9 +22,6 @@
  • Graphs
    • -
  • - Settings -
  • Questions
    • diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 5ce5f66..418f4e3 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -20,9 +20,6 @@
  • Graphs
    • -
  • - Settings -
  • Questions diff --git a/web/newWebsite/settings.html b/web/newWebsite/settings.html deleted file mode 100644 index 383842a..0000000 --- a/web/newWebsite/settings.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - Gauges - - - - - - - - - - - - - \ No newline at end of file diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index eeab2b1..85f5292 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -1,8 +1,6 @@ * { - box-sizing: border-box; - font-family: "Roboto", sans-serif; - - + box-sizing: border-box; + font-family: "Roboto", sans-serif; } /* @@ -13,235 +11,221 @@ } */ .nav-button { - background-color: #333; - color: #fff; - border: none; - cursor: pointer; - font-size: 17px; + background-color: #333; + color: #fff; + border: none; + cursor: pointer; + font-size: 17px; } -#editNode{ - display: flex; - justify-content: center; - /* align-items: center; */ - /* flex-direction: column; */ - /* border-radius: 5%; */ - /* border: 20px solid orange; */ - } - - #editNode { - margin-top: 1%; - width: 98vw; - height: 20vh; - display: flex; - justify-content: center; - /* flex-direction: column; Keep as column +#editNode { + margin-top: 1%; + width: 98vw; + height: 20vh; + display: flex; + justify-content: center; + /* flex-direction: column; Keep as column /* justify-content: ; */ - align-items: center; + align-items: center; - background-color: #333; - color: #fff; - padding: 10px; - border-radius: 50px; - border: 2px solid #333; - clear: both; - margin-bottom: 10px; - position: relative; - float: top; + background-color: #333; + color: #fff; + padding: 10px; + border-radius: 50px; + border: 2px solid #333; + clear: both; + margin-bottom: 10px; + position: relative; + float: top; } body { - display: flex; - justify-content: center; - margin: 0; - margin-top: 8vh; - background-color: #f0f0f0; - flex-direction: column; - background-color: #afafaf; - align-items: center; - + display: flex; + justify-content: center; + margin: 0; + margin-top: 8vh; + background-color: #f0f0f0; + flex-direction: column; + background-color: #afafaf; + align-items: center; } .gaugeGroup { - width: 98vw; - height: auto; - display: flex; - flex-direction: column; /* Keep as column */ - justify-content: flex-start; - background-color: #333; - color: #fff; - padding: 10px; - border-radius: 50px; - border: 2px solid #333; - clear: both; - margin-bottom: 10px; - position: relative; + width: 98vw; + height: auto; + display: flex; + flex-direction: column; /* Keep as column */ + justify-content: flex-start; + background-color: #333; + color: #fff; + padding: 10px; + border-radius: 50px; + border: 2px solid #333; + clear: both; + margin-bottom: 10px; + position: relative; } .groupTitle { - width: 100%; - text-align: center; - font-size: 24px; + width: 100%; + text-align: center; + font-size: 24px; } .Node { - display: flex; - justify-content: space-around; - align-items: center; - width: 100%; - height: 100%; + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + height: 100%; } .Sensorvalues { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - flex-wrap: wrap; - width: 15%; - height: 110%; - background-color: #ddd; - color: #333; - padding: 10px; - margin: 10px; - border-radius: 10px; - text-align: center; - position: relative; - padding-top: 3vh; /* Increase bottom padding */ - + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 15%; + height: 110%; + background-color: #ddd; + color: #333; + padding: 10px; + margin: 10px; + border-radius: 10px; + text-align: center; + position: relative; + padding-top: 3vh; /* Increase bottom padding */ } .gaugeContainer { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 80%; /* Increase the height from 70% to 80% */ - position: relative; - overflow: visible; - height: 5vh; - margin-bottom: 1vh; - + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 80%; /* Increase the height from 70% to 80% */ + position: relative; + overflow: visible; + height: 5vh; + margin-bottom: 1vh; } .gaugeImage { - width: 100%; - height: auto; - max-height: 120%; - object-fit: contain; - position: absolute; /* Make the image position absolute */ - top: 0; - left: 0; - z-index: 1; /* Make the image display below the needle */ - bottom: 0; + width: 100%; + height: auto; + max-height: 120%; + object-fit: contain; + position: absolute; /* Make the image position absolute */ + top: 0; + left: 0; + z-index: 1; /* Make the image display below the needle */ + bottom: 0; } -.gaugeValue, .gaugeText { - width: 100%; - text-align: center; - font-size: 24px; - z-index: 2; +.gaugeValue, +.gaugeText { + width: 100%; + text-align: center; + font-size: 24px; + z-index: 2; } .gaugeText { - width: 100%; - text-align: center; - font-size: 1.4vw; - z-index: 2; - position: absolute; - top: -1.4vw; /* Adjust this value to move the text further down */ - + width: 100%; + text-align: center; + font-size: 1.4vw; + z-index: 2; + position: absolute; + top: -1.4vw; /* Adjust this value to move the text further down */ } .arrowimg { - width: 3vh; - height: auto; - max-height: 100%; - object-fit: contain; - position: absolute; - top: 0.5vw; - right: 1.2vw; - z-index: 2; + width: 3vh; + height: auto; + max-height: 100%; + object-fit: contain; + position: absolute; + top: 0.5vw; + right: 1.2vw; + z-index: 2; } .valueContainer { - display: flex; - justify-content: center; - margin-top: 10px; + display: flex; + justify-content: center; + margin-top: 10px; } #valueText { - font-size: 20px; + font-size: 20px; } .needle { - position: absolute; - bottom: -10%; /* Lower the needle to the bottom */ - left: 50%; - width: 2px; - height: 100%; - background-color: black; - transform-origin: bottom; - z-index: 3; /* Make the needle display above the image */ - transition: transform 0.1s ease-out; - + position: absolute; + bottom: -10%; /* Lower the needle to the bottom */ + left: 50%; + width: 2px; + height: 100%; + background-color: black; + transform-origin: bottom; + z-index: 3; /* Make the needle display above the image */ + transition: transform 0.1s ease-out; } .contentContainer { - display: flex; - flex-direction: row; /* Layout children side by side */ - width: 100%; - height: 100%; + display: flex; + flex-direction: row; /* Layout children side by side */ + width: 100%; + height: 100%; } .navbar { - background-color: #333; - height: 60px; - display: flex; - align-items: center; - padding: 0 20px; - position: fixed; /* Fix the navbar at the top of the page */ - top: 0; /* Position it at the very top */ - width: 100%; /* Make it span the full width of the page */ - z-index: 1000; /* Make sure it's above all other elements */ + background-color: #333; + height: 60px; + display: flex; + align-items: center; + padding: 0 20px; + position: fixed; /* Fix the navbar at the top of the page */ + top: 0; /* Position it at the very top */ + width: 100%; /* Make it span the full width of the page */ + z-index: 1000; /* Make sure it's above all other elements */ } .navbar-nav { - list-style: none; - display: flex; - align-items: center; - justify-content: center; /* Center the links horizontally */ - height: 100%; - width: 100%; /* Make it span the full width of the navbar */ + list-style: none; + display: flex; + align-items: center; + justify-content: center; /* Center the links horizontally */ + height: 100%; + width: 100%; /* Make it span the full width of the navbar */ } .nav-item { - margin-right: 20px; + margin-right: 20px; } .nav-link { - color: #fff; - text-decoration: none; - font-size: 18px; + color: #fff; + text-decoration: none; + font-size: 18px; } .plotly-container { - width: 100%; - float: bottom; - padding: 1vw; - align-items: center; - justify-content: center; - display: flex; + width: 100%; + float: bottom; + padding: 1vw; + align-items: center; + justify-content: center; + display: flex; } .js-plotly-plot { - width: 90%; - height: 100%; + width: 90%; + height: 100%; } .disabled { - opacity: 0; - height: 0; - + opacity: 0; + height: 0; } From c7059086c2f4771989acfd499a2b2d186f807b3c Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 3 Apr 2024 11:34:17 +0200 Subject: [PATCH 9/9] Add margin-top to gaugeGroup --- web/newWebsite/styles/dashboard-styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 85f5292..6c1a36c 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -51,6 +51,7 @@ body { } .gaugeGroup { + margin-top: 2vh; width: 98vw; height: auto; display: flex;