Live updates on the webinterface

This commit is contained in:
Thomas Kolb 2024-08-29 23:16:01 +02:00
parent 830a066fe4
commit 782692eaa3
4 changed files with 38 additions and 28 deletions

View file

@ -2,28 +2,25 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>BME680-Wetterstation</title> <title>SensorCube</title>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript"> <script type="text/javascript">
function updateWeatherTable(bme680data) function updateSensorTable(sensordata)
{ {
elements = ['temperature', 'humidity', 'pressure', 'gas_resistance']; elements = ['temperature', 'humidity', 'co2'];
elements.forEach(function(item, index) { elements.forEach(function(item, index) {
elem = document.getElementById(item); elem = document.getElementById('scd30_' + item);
val = bme680data[item].value; val = sensordata['scd30'][item];
if(item == "gas_resistance") {
val /= 1000.0;
}
elem.textContent = val.toFixed(2); elem.textContent = val.toFixed(2);
}); });
} }
function setup() function setup()
{ {
getBME680Data(updateWeatherTable); getSensorData(updateSensorTable);
setInterval(function() { getBME680Data(updateWeatherTable) }, 60000); setInterval(function() { getSensorData(updateSensorTable) }, 60000);
} }
</script> </script>
<style> <style>
@ -42,33 +39,28 @@
</style> </style>
</head> </head>
<body onLoad="setup()"> <body onLoad="setup()">
<h1>BME680-Wetterstation</h1> <h1>SensorCube</h1>
<table> <table>
<tr> <tr>
<th>Beschreibung</th> <th>Sensor</th>
<th>Messwert</th> <th>Messwert</th>
<th>Einheit</th> <th>Einheit</th>
</tr> </tr>
<tr> <tr>
<td>Temperatur</td> <td>SCD30 CO₂</td>
<td class="value" id="temperature">-,--</td> <td class="value" id="scd30_co2">----,--</td>
<td>ppm</td>
</tr>
<tr>
<td>SCD30 Temperatur</td>
<td class="value" id="scd30_temperature">-,--</td>
<td>°C</td> <td>°C</td>
</tr> </tr>
<tr> <tr>
<td>Luftfeuchtigkeit</td> <td>SCD30 Luftfeuchtigkeit</td>
<td class="value" id="humidity">-,--</td> <td class="value" id="scd30_humidity">-,--</td>
<td>%rH</td> <td>%rH</td>
</tr> </tr>
<tr>
<td>Luftdruck</td>
<td class="value" id="pressure">----,--</td>
<td>hPa</td>
</tr>
<tr>
<td>Gaswiderstand</td>
<td class="value" id="gas_resistance">-,--</td>
<td></td>
</tr>
</table> </table>
</body> </body>
</html> </html>

View file

@ -19,7 +19,7 @@ function getjson(url, handler_func)
xmlhttp.send(); xmlhttp.send();
} }
function getBME680Data(handler_func) function getSensorData(handler_func)
{ {
return getjson("/bme680.json", handler_func); return getjson("/api/readout", handler_func);
} }

View file

@ -34,5 +34,6 @@ class WebServer
// handlers // handlers
static void handleRoot(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res); static void handleRoot(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res);
static void handleCalibrate(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res); static void handleCalibrate(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res);
static void handleReadout(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res);
static void handleStatic(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res); static void handleStatic(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res);
}; };

View file

@ -60,6 +60,20 @@ static void error400(httpsserver::HTTPResponse *res, const std::string &reason)
res->setStatusCode(400); res->setStatusCode(400);
} }
void WebServer::handleReadout(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res)
{
res->setHeader("Content-Type", "application/json");
res->setStatusCode(200);
res->print("{\"scd30\": {\"co2\": ");
res->print(instance().m_scd30->CO2);
res->print(", \"humidity\": ");
res->print(instance().m_scd30->relative_humidity);
res->print(", \"temperature\": ");
res->print(instance().m_scd30->temperature);
res->println("}}");
}
void WebServer::handleCalibrate(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res) void WebServer::handleCalibrate(httpsserver::HTTPRequest *req, httpsserver::HTTPResponse *res)
{ {
res->setHeader("Content-Type", "text/plain"); res->setHeader("Content-Type", "text/plain");
@ -111,6 +125,8 @@ void WebServer::serverTask(void *arg)
new httpsserver::ResourceNode("/", "GET", WebServer::handleRoot); new httpsserver::ResourceNode("/", "GET", WebServer::handleRoot);
httpsserver::ResourceNode *nodeAPICalibrate = httpsserver::ResourceNode *nodeAPICalibrate =
new httpsserver::ResourceNode("/api/calibrate", "GET", WebServer::handleCalibrate); new httpsserver::ResourceNode("/api/calibrate", "GET", WebServer::handleCalibrate);
httpsserver::ResourceNode *nodeAPIReadout =
new httpsserver::ResourceNode("/api/readout", "GET", WebServer::handleReadout);
// handle all remaining requests by trying to serve static files. If no file is found, 404 is generated. // handle all remaining requests by trying to serve static files. If no file is found, 404 is generated.
httpsserver::ResourceNode *nodeStatic = httpsserver::ResourceNode *nodeStatic =
@ -119,6 +135,7 @@ void WebServer::serverTask(void *arg)
WebServer &server = WebServer::instance(); WebServer &server = WebServer::instance();
server.m_server->registerNode(nodeRoot); server.m_server->registerNode(nodeRoot);
server.m_server->registerNode(nodeAPIReadout);
server.m_server->registerNode(nodeAPICalibrate); server.m_server->registerNode(nodeAPICalibrate);
server.m_server->setDefaultNode(nodeStatic); server.m_server->setDefaultNode(nodeStatic);