90 lines
2 KiB
HTML
90 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>SensorCube</title>
|
|
<script type="text/javascript" src="utils.js"></script>
|
|
<script type="text/javascript">
|
|
function updateSensorTable(sensordata)
|
|
{
|
|
scd30_elements = ['temperature', 'humidity', 'co2'];
|
|
|
|
scd30_elements.forEach(function(item, index) {
|
|
elem = document.getElementById('scd30_' + item);
|
|
val = sensordata['scd30'][item];
|
|
elem.textContent = val.toFixed(2);
|
|
});
|
|
|
|
bme680_elements = ['temperature', 'humidity', 'pressure', 'gas_resistance'];
|
|
|
|
bme680_elements.forEach(function(item, index) {
|
|
elem = document.getElementById('bme680_' + item);
|
|
val = sensordata['bme680'][item];
|
|
elem.textContent = val.toFixed(2);
|
|
});
|
|
}
|
|
|
|
function setup()
|
|
{
|
|
getSensorData(updateSensorTable);
|
|
setInterval(function() { getSensorData(updateSensorTable) }, 30000);
|
|
}
|
|
</script>
|
|
<style>
|
|
th, td {
|
|
border: 1px solid black;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
td.value {
|
|
text-align: right;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onLoad="setup()">
|
|
<h1>SensorCube</h1>
|
|
<table>
|
|
<tr>
|
|
<th>Sensor</th>
|
|
<th>SCD30</th>
|
|
<th>BME680</th>
|
|
<th>Einheit</th>
|
|
</tr>
|
|
<tr>
|
|
<td>CO₂</td>
|
|
<td class="value" id="scd30_co2">---,--</td>
|
|
<td class="value" id="bme680_co2">---,--</td>
|
|
<td>ppm</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Temperatur</td>
|
|
<td class="value" id="scd30_temperature">-,--</td>
|
|
<td class="value" id="bme680_temperature">-,--</td>
|
|
<td>°C</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Luftfeuchtigkeit</td>
|
|
<td class="value" id="scd30_humidity">--,--</td>
|
|
<td class="value" id="bme680_humidity">--,--</td>
|
|
<td>%rH</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Luftdruck</td>
|
|
<td class="value" id="scd30_pressure">---,--</td>
|
|
<td class="value" id="bme680_pressure">---,--</td>
|
|
<td>hPa</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Gaswiderstand</td>
|
|
<td class="value" id="scd30_gas_resistance">---,--</td>
|
|
<td class="value" id="bme680_gas_resistance">---,--</td>
|
|
<td>kΩ</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|