Add datetime to web interface

This commit is contained in:
huskee 2023-12-13 20:30:06 +02:00
parent f35f52156d
commit cfd5f4e11f
3 changed files with 30 additions and 22 deletions

View file

@ -6,6 +6,7 @@
<body> <body>
<p class="reading">A: <span id="tempA"></span></p> <p class="reading">A: <span id="tempA"></span></p>
<p class="reading">B: <span id="tempB"></span></p> <p class="reading">B: <span id="tempB"></span></p>
<p>time: <span id="time"></span></p>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

View file

@ -1,44 +1,50 @@
var gateway = `ws://${window.location.hostname}/ws`; var gateway = `ws://${window.location.hostname}/ws`;
var websocket; var websocket;
// Init web socket when the page loads // Init web socket when the page loads
window.addEventListener('load', onload); window.addEventListener("load", onload);
function onload(event) { function onload(event) {
initWebSocket(); initWebSocket();
} }
function getReadings(){ function getReadings() {
websocket.send("getReadings"); websocket.send("getReadings");
} }
function initWebSocket() { function initWebSocket() {
console.log('Trying to open a WebSocket connection...'); console.log("Trying to open a WebSocket connection...");
websocket = new WebSocket(gateway); websocket = new WebSocket(gateway);
websocket.onopen = onOpen; websocket.onopen = onOpen;
websocket.onclose = onClose; websocket.onclose = onClose;
websocket.onmessage = onMessage; websocket.onmessage = onMessage;
} }
// When websocket is established, call the getReadings() function // When websocket is established, call the getReadings() function
function onOpen(event) { function onOpen(event) {
console.log('Connection opened'); console.log("Connection opened");
getReadings(); getReadings();
} }
function onClose(event) { function onClose(event) {
console.log('Connection closed'); console.log("Connection closed");
setTimeout(initWebSocket, 2000); setTimeout(initWebSocket, 2000);
} }
// Function that receives the message from the ESP32 with the readings // Function that receives the message from the ESP32 with the readings
function onMessage(event) { function onMessage(event) {
console.log(event.data); console.log(event.data);
var myObj = JSON.parse(event.data); var myObj = JSON.parse(event.data);
var keys = Object.keys(myObj); var keys = Object.keys(myObj);
for (var i = 0; i < keys.length; i++){ for (var i = 0; i < keys.length - 1; i++) {
var key = keys[i]; var key = keys[i];
document.getElementById(key).innerHTML = myObj[key]; document.getElementById(key).innerHTML = myObj[key];
} }
} var today = new Date();
var date =
today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
var time =
today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + " " + time;
document.getElementById("time").innerHTML = dateTime;
}

View file

@ -52,6 +52,7 @@ String getSensorReadings() {
double tempB = thermocoupleB.readCelsius(); double tempB = thermocoupleB.readCelsius();
readings["tempA"] = String(tempA) + "°C"; readings["tempA"] = String(tempA) + "°C";
readings["tempB"] = String(tempB) + "°C"; readings["tempB"] = String(tempB) + "°C";
readings["time"] = String(lastTime);
} }
String jsonString = JSON.stringify(readings); String jsonString = JSON.stringify(readings);
return jsonString; return jsonString;