117 lines
2.6 KiB
HTML
117 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<title>Station Météo</title>
|
|
<style>
|
|
html, body {
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
body {
|
|
font-family: 'DejaVu Sans', Verdana, Arial, sans-serif;
|
|
font-size: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#home {
|
|
background: #000;
|
|
color: #fff;
|
|
margin: 1em;
|
|
padding: 0;
|
|
}
|
|
|
|
#home h1 {
|
|
color: #f7c000;
|
|
font-size: 2em;
|
|
margin: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
#home p {
|
|
background: #111;
|
|
border: 1px solid #444;
|
|
font-size: 1.5em;
|
|
list-style-type: none;
|
|
padding: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
#home table {
|
|
background: #111;
|
|
border: 1px solid #444;
|
|
font-size: 1.5em;
|
|
list-style-type: none;
|
|
padding: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
#footer {
|
|
background: #000;
|
|
color: #888;
|
|
font-size: 0.8em;
|
|
margin: 1em;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id='home'>
|
|
<h1>Station Météo</h1>
|
|
<table>
|
|
<tr>
|
|
<th>Temps</th><th>T [°C]</th><th>P [Pa]</th><th>Alt
|
|
[m]</th><th>Hr [%]</th><th>Lx [lux]</th>
|
|
</tr>
|
|
<tr>
|
|
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
|
|
</tr>
|
|
</table>
|
|
<p>
|
|
<label>Intervale de mise à jour (en secondes) : </label>
|
|
<input id='interval' type='number' value='2' />
|
|
</p>
|
|
</div>
|
|
<div id='footer'>
|
|
par Nathanaël Restori
|
|
</div>
|
|
|
|
<script>
|
|
function updateInfo() {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', '/sensors.json');
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
var response = JSON.parse(xhr.responseText);
|
|
|
|
var rows = document.getElementsByTagName('tr');
|
|
var cell = rows[1].firstChild;
|
|
var index = 0;
|
|
while (cell) {
|
|
cell.firstChild.nodeValue = response.sensors[index].data;
|
|
cell = cell.nextSibling;
|
|
index++;
|
|
}
|
|
}
|
|
};
|
|
xhr.send(null);
|
|
}
|
|
|
|
updateInfo();
|
|
|
|
var updateID = setInterval(updateInfo, 2000);
|
|
|
|
var interval = document.getElementById('interval');
|
|
interval.addEventListener('change', function(e) {
|
|
clearInterval(updateID);
|
|
updateID = setInterval(updateInfo, e.target.value*1000);
|
|
}, true);
|
|
</script>
|
|
</body>
|
|
</html>
|