Move to CMake
This commit is contained in:
113
arduino/WeatherStationWeb/index.html
Normal file
113
arduino/WeatherStationWeb/index.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
#home ul#links li {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0.8em;
|
||||
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>
|
Reference in New Issue
Block a user