You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.3 KiB
HTML
44 lines
1.3 KiB
HTML
4 weeks ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Simple Sensor Dashboard</title>
|
||
|
|
<style>
|
||
|
|
body { font-family: Arial, sans-serif; text-align: center; }
|
||
|
|
.sensor { margin: 10px; padding: 10px; border: 1px solid #ccc; }
|
||
|
|
.sensor-title { font-weight: bold; }
|
||
|
|
.sensor-value { font-size: 2em; color: #333; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>Sensor Data</h1>
|
||
|
|
<div id="temperature" class="sensor">
|
||
|
|
<div class="sensor-title">Temperature</div>
|
||
|
|
<div class="sensor-value" id="temp-value">--</div>
|
||
|
|
</div>
|
||
|
|
<div id="humidity" class="sensor">
|
||
|
|
<div class="sensor-title">Humidity</div>
|
||
|
|
<div class="sensor-value" id="humidity-value">--</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
async function fetchData() {
|
||
|
|
try {
|
||
|
|
const tempResponse = await fetch('./data/HTU21D.json');
|
||
|
|
const tempData = await tempResponse.json();
|
||
|
|
document.getElementById('temp-value').textContent = tempData.temperature.toFixed(1) + ' ℃';
|
||
|
|
document.getElementById('humidity-value').textContent = tempData.humidity.toFixed(1) + ' %';
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching data:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update data every 60 seconds
|
||
|
|
setInterval(fetchData, 60000);
|
||
|
|
fetchData(); // Initial fetch
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|