75 lines
1.4 KiB
HTML
75 lines
1.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>BME680-Wetterstation</title>
|
||
|
|
<script type="text/javascript" src="utils.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function updateWeatherTable(bme680data)
|
||
|
|
{
|
||
|
|
elements = ['temperature', 'humidity', 'pressure', 'gas_resistance'];
|
||
|
|
|
||
|
|
|
||
|
|
elements.forEach(function(item, index) {
|
||
|
|
elem = document.getElementById(item);
|
||
|
|
val = bme680data[item].value;
|
||
|
|
if(item == "gas_resistance") {
|
||
|
|
val /= 1000.0;
|
||
|
|
}
|
||
|
|
elem.textContent = val.toFixed(2);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function setup()
|
||
|
|
{
|
||
|
|
getBME680Data(updateWeatherTable);
|
||
|
|
setInterval(function() { getBME680Data(updateWeatherTable) }, 60000);
|
||
|
|
}
|
||
|
|
</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>BME680-Wetterstation</h1>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>Beschreibung</th>
|
||
|
|
<th>Messwert</th>
|
||
|
|
<th>Einheit</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Temperatur</td>
|
||
|
|
<td class="value" id="temperature">-,--</td>
|
||
|
|
<td>°C</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Luftfeuchtigkeit</td>
|
||
|
|
<td class="value" id="humidity">-,--</td>
|
||
|
|
<td>%rH</td>
|
||
|
|
</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>kΩ</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</body>
|
||
|
|
</html>
|