Skip to content

Commit c64119a

Browse files
author
Sitinut Waisara
committed
Change HTML of sensor viewer to Table
1 parent 9632105 commit c64119a

File tree

2 files changed

+73
-85
lines changed

2 files changed

+73
-85
lines changed

‎Node main module/src/customPages.h‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -181,9 +181,20 @@ const static char customPageJSON[] PROGMEM = R"raw(
181181

182182
// Live sensor viewing HTML and JS
183183
const char sensorViewerHTML[] PROGMEM = R"rawliteral(
184-
<div id=sensorElement>
184+
<div id=sensorStatus>
185185
<p>Getting sensor information...</p>
186186
</div>
187+
<div class="container">
188+
<table id="sensorDataTable" class="info" style="border:none; font-size: 20px;" >
189+
<tbody>
190+
<tr>
191+
192+
</tr>
193+
</tbody>
194+
</table>
195+
</div>
196+
197+
187198
<script>
188199
loadData(); //Load the data for first time
189200
setInterval(loadData, 1000); //Reload the data every X milliseconds.
@@ -192,18 +203,33 @@ const char sensorViewerHTML[] PROGMEM = R"rawliteral(
192203
var xhttp = new XMLHttpRequest();
193204
xhttp.onreadystatechange = function () {
194205
if (this.readyState == 4 && this.status == 200) {
195-
var sensorElement = document.getElementById("sensorElement");
196-
sensorElement.textContent = ""; //Clear all elements in sensorElement div
197-
var sensorsData = JSON.parse(this.response).data; //Parse the response to JSON object
198-
if (Object.keys(sensorsData).length == 0 ) { //object is empty
199-
sensorElement.innerHTML = "<p> No sensors connected. </p>"
206+
var sensorStatus = document.getElementById("sensorStatus");
207+
var sensorTable = document.getElementById("sensorDataTable");
208+
209+
var sensorsData = JSON.parse(this.response).data; //Parse the response to JSON object
210+
if (Object.keys(sensorsData).length == 0 ) { //object is empty
211+
sensorStatus.style.display = "block"; //Display the status text div
212+
sensorTable.style.display = "none" //Hide the table
213+
sensorStatus.textContent = ""; //Clear all elements in sensorElement div
214+
sensorStatus.innerHTML = "<p> No sensors connected. </p>"
200215
return;
216+
}else{
217+
sensorStatus.style.display = "none"; //Hide the status text div
218+
sensorTable.style.display = "block" //Show the table
219+
sensorTable.innerHTML = "" //Clear the table
220+
221+
for (sensorName of Object.keys(sensorsData)) { //iterate through each element and create table row for each sensor
222+
var row = sensorTable.insertRow(0);
223+
var cell1 = row.insertCell(0);
224+
var cell2 = row.insertCell(1);
225+
cell1.style.fontWeight = "bold"
226+
cell2.style.paddingLeft = "40px";
227+
cell1.innerHTML = sensorName;
228+
cell2.innerHTML = sensorsData[sensorName];
229+
}
230+
201231
}
202-
for (sensorName of Object.keys(sensorsData)) { //iterate through each element and create paragraph for each sensor
203-
sensorElement.innerHTML += "<p><span class=\"sensor-label\">" +
204-
sensorName + "</span> <span id=\"sensor-value\">" +
205-
sensorsData[sensorName] + " </span> <sup class=\"units\">" + ' ' + " </sup> </p>";
206-
}
232+
207233
}
208234
};
209235
xhttp.open("GET", "/getJSON", true); //request JSON data from URI/getJSON

‎Node main module/src/html/sensorviewer.html‎

Lines changed: 36 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,55 @@
1-
<!DOCTYPE HTML>
2-
<html>
1+
<div id=sensorStatus>
2+
<p>Getting sensor information...</p>
3+
</div>
4+
<div class="container">
5+
<table id="sensorDataTable" class="info" style="border:none; font-size: 20px;" >
6+
<tbody>
7+
<tr>
38

4-
<head>
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
7-
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
8-
<style>
9-
html {
10-
font-family: Arial;
11-
display: inline-block;
12-
margin: 0px auto;
13-
text-align: center;
14-
}
15-
16-
h2 {
17-
font-size: 3.0rem;
18-
}
19-
20-
p {
21-
font-size: 3.0rem;
22-
}
23-
24-
.units {
25-
font-size: 1.2rem;
26-
}
27-
28-
.sensor-label {
29-
font-size: 1.5rem;
30-
vertical-align: middle;
31-
padding-bottom: 15px;
32-
}
33-
</style>
34-
</head>
35-
36-
<body>
37-
<h2>Live connected sensor viewer</h2>
38-
<div id=sensorElement>
39-
<p>Getting sensor information...</p>
40-
</div>
41-
</body>
42-
43-
<footer>
44-
<p style="padding-top:15px;text-align:center">
45-
<a href="/_ac"><img
46-
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAApklEQVRYR2NkGGDAOMD2M4w6YDQEkEMgEJggZwCxGI0T5mug+alAvBFkD7IDXtLBcpjfXgEZ4ugOeAETpHEIgIwHeVYC3QH+0CgAS9AQgCwHRcFmdAfQ0E7cRo9mw0EVAqPlAKhwEKVTVsBZDsyiQ2k4Wg6gxPKgyoZ0Sn+o1iCHQBBQaiYQi9DYJTjbAyAJWluOtz0wWg7QOOqxGz+aDUdDYMBDAACA0x4hs/MPrwAAAABJRU5ErkJggg==" border="0" title="AutoConnect menu" alt="AutoConnect menu" />
47-
</a>
48-
</p>
49-
50-
</footer>
9+
</tr>
10+
</tbody>
11+
</table>
12+
</div>
5113

5214

5315
<script>
54-
5516
loadData(); //Load the data for first time
5617
setInterval(loadData, 1000); //Reload the data every X milliseconds.
57-
5818
//Load the JSON data from API, and then replace the HTML element
5919
function loadData(){
6020
var xhttp = new XMLHttpRequest();
6121
xhttp.onreadystatechange = function () {
6222
if (this.readyState == 4 && this.status == 200) {
63-
64-
var sensorElement = document.getElementById("sensorElement");
65-
66-
sensorElement.textContent = ""; //Clear all elements in sensorElement div
67-
68-
69-
var sensorsData = JSON.parse(this.response).data; //Parse the response to JSON object
70-
71-
72-
if (Object.keys(sensorsData).length == 0 ) { //object is empty
73-
sensorElement.innerHTML = "<p> No sensors connected. </p>"
23+
var sensorStatus = document.getElementById("sensorStatus");
24+
var sensorTable = document.getElementById("sensorDataTable");
25+
26+
var sensorsData = JSON.parse(this.response).data; //Parse the response to JSON object
27+
if (Object.keys(sensorsData).length == 0 ) { //object is empty
28+
sensorStatus.style.display = "block"; //Display the status text div
29+
sensorTable.style.display = "none" //Hide the table
30+
sensorStatus.textContent = ""; //Clear all elements in sensorElement div
31+
sensorStatus.innerHTML = "<p> No sensors connected. </p>"
7432
return;
75-
}
76-
77-
for (sensorName of Object.keys(sensorsData)) { //iterate through each element and create paragraph for each sensor
78-
sensorElement.innerHTML += "<p><span class=\"sensor-label\">" +
79-
sensorName + "</span> <span id=\"sensor-value\">" +
80-
sensorsData[sensorName] + " </span> <sup class=\"units\">" + ' ' + " </sup> </p>";
33+
}else{
34+
sensorStatus.style.display = "none"; //Hide the status text div
35+
sensorTable.style.display = "block" //Show the table
36+
sensorTable.innerHTML = "" //Clear the table
37+
38+
for (sensorName of Object.keys(sensorsData)) { //iterate through each element and create table row for each sensor
39+
var row = sensorTable.insertRow(0);
40+
var cell1 = row.insertCell(0);
41+
var cell2 = row.insertCell(1);
42+
cell1.style.fontWeight = "bold"
43+
cell2.style.paddingLeft = "40px";
44+
cell1.innerHTML = sensorName;
45+
cell2.innerHTML = sensorsData[sensorName];
46+
}
8147

8248
}
83-
49+
8450
}
8551
};
86-
87-
8852
xhttp.open("GET", "/getJSON", true); //request JSON data from URI/getJSON
8953
xhttp.send();
9054
}
91-
92-
</script>
93-
</html>
55+
</script>

0 commit comments

Comments
 (0)