-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Change HTML of sensor viewer to Table
- Loading branch information
Sitinut Waisara
committed
Mar 26, 2020
1 parent
9632105
commit c64119a
Showing
2 changed files
with
73 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,55 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <div id=sensorStatus> | ||
| <p>Getting sensor information...</p> | ||
| </div> | ||
| <div class="container"> | ||
| <table id="sensorDataTable" class="info" style="border:none; font-size: 20px;" > | ||
| <tbody> | ||
| <tr> | ||
|
|
||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" | ||
| integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> | ||
| <style> | ||
| html { | ||
| font-family: Arial; | ||
| display: inline-block; | ||
| margin: 0px auto; | ||
| text-align: center; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 3.0rem; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 3.0rem; | ||
| } | ||
|
|
||
| .units { | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| .sensor-label { | ||
| font-size: 1.5rem; | ||
| vertical-align: middle; | ||
| padding-bottom: 15px; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h2>Live connected sensor viewer</h2> | ||
| <div id=sensorElement> | ||
| <p>Getting sensor information...</p> | ||
| </div> | ||
| </body> | ||
|
|
||
| <footer> | ||
| <p style="padding-top:15px;text-align:center"> | ||
| <a href="/_ac"><img | ||
| src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAApklEQVRYR2NkGGDAOMD2M4w6YDQEkEMgEJggZwCxGI0T5mug+alAvBFkD7IDXtLBcpjfXgEZ4ugOeAETpHEIgIwHeVYC3QH+0CgAS9AQgCwHRcFmdAfQ0E7cRo9mw0EVAqPlAKhwEKVTVsBZDsyiQ2k4Wg6gxPKgyoZ0Sn+o1iCHQBBQaiYQi9DYJTjbAyAJWluOtz0wWg7QOOqxGz+aDUdDYMBDAACA0x4hs/MPrwAAAABJRU5ErkJggg==" border="0" title="AutoConnect menu" alt="AutoConnect menu" /> | ||
| </a> | ||
| </p> | ||
|
|
||
| </footer> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
|
|
||
| <script> | ||
|
|
||
| loadData(); //Load the data for first time | ||
| setInterval(loadData, 1000); //Reload the data every X milliseconds. | ||
|
|
||
| //Load the JSON data from API, and then replace the HTML element | ||
| function loadData(){ | ||
| var xhttp = new XMLHttpRequest(); | ||
| xhttp.onreadystatechange = function () { | ||
| if (this.readyState == 4 && this.status == 200) { | ||
|
|
||
| var sensorElement = document.getElementById("sensorElement"); | ||
|
|
||
| sensorElement.textContent = ""; //Clear all elements in sensorElement div | ||
|
|
||
|
|
||
| var sensorsData = JSON.parse(this.response).data; //Parse the response to JSON object | ||
|
|
||
|
|
||
| if (Object.keys(sensorsData).length == 0 ) { //object is empty | ||
| sensorElement.innerHTML = "<p> No sensors connected. </p>" | ||
| var sensorStatus = document.getElementById("sensorStatus"); | ||
| var sensorTable = document.getElementById("sensorDataTable"); | ||
|
|
||
| var sensorsData = JSON.parse(this.response).data; //Parse the response to JSON object | ||
| if (Object.keys(sensorsData).length == 0 ) { //object is empty | ||
| sensorStatus.style.display = "block"; //Display the status text div | ||
| sensorTable.style.display = "none" //Hide the table | ||
| sensorStatus.textContent = ""; //Clear all elements in sensorElement div | ||
| sensorStatus.innerHTML = "<p> No sensors connected. </p>" | ||
| return; | ||
| } | ||
|
|
||
| for (sensorName of Object.keys(sensorsData)) { //iterate through each element and create paragraph for each sensor | ||
| sensorElement.innerHTML += "<p><span class=\"sensor-label\">" + | ||
| sensorName + "</span> <span id=\"sensor-value\">" + | ||
| sensorsData[sensorName] + " </span> <sup class=\"units\">" + ' ' + " </sup> </p>"; | ||
| }else{ | ||
| sensorStatus.style.display = "none"; //Hide the status text div | ||
| sensorTable.style.display = "block" //Show the table | ||
| sensorTable.innerHTML = "" //Clear the table | ||
|
|
||
| for (sensorName of Object.keys(sensorsData)) { //iterate through each element and create table row for each sensor | ||
| var row = sensorTable.insertRow(0); | ||
| var cell1 = row.insertCell(0); | ||
| var cell2 = row.insertCell(1); | ||
| cell1.style.fontWeight = "bold" | ||
| cell2.style.paddingLeft = "40px"; | ||
| cell1.innerHTML = sensorName; | ||
| cell2.innerHTML = sensorsData[sensorName]; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
| }; | ||
|
|
||
|
|
||
| xhttp.open("GET", "/getJSON", true); //request JSON data from URI/getJSON | ||
| xhttp.send(); | ||
| } | ||
|
|
||
| </script> | ||
| </html> | ||
| </script> |