static const char PROGMEM INDEX_HTML[] = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Irrigation Viewer</title>
<style type="text/css">
td, th {
border: 1px solid white;
}
table {
margin: 15px 0;
border: 1px solid black;
table-layout: fixed;
width: 100%; /* must have this set */
border-spacing: 18px;
}
html {
background: black;
}
body {
font-family: sans-serif;
color: #FFFFFF;
max-width: 600px;
margin: 0 auto;
background: black;
padding: 10px;
}
h1{
text-align: center;
}
.wider td {
width: 218px;
}
</style>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body onload="obtenirVariables()">
<h1>Irrigation System Viewer</h1>
<table class="wider">
<tr>
<td colspan="2" id="pumpstate"></td>
</tr>
<tr>
<td id="sensor0"></td>
<td id="solenoidState0"></td>
</tr>
<tr>
<td id="sensor1"></td>
<td id="solenoidState1"></td>
</tr>
<tr>
<td id="sensor2"></td>
<td id="solenoidState2"></td>
</tr>
<tr>
<td id="sensor3"></td>
<td id="solenoidState3"></td>
</tr>
<tr>
<td id="sensor4"></td>
<td id="solenoidState4"></td>
</tr>
<tr>
<td id="sensor5"></td>
<td id="solenoidState5"></td>
</tr>
<tr>
<td id="sensor6"></td>
<td id="solenoidState6"></td>
</tr>
<tr>
<td id="sensor7"></td>
<td id="solenoidState7"></td>
</tr>
<tr>
<td id="sensor8"></td>
<td id="solenoidState8"></td>
</tr>
<tr>
<td id="sensor9"></td>
<td id="solenoidState9"></td>
</tr>
<tr>
<td id="sensor10"></td>
<td id="solenoidState10"></td>
</tr>
<tr>
<td id="sensor11"></td>
<td id="solenoidState11"></td>
</tr>
<tr>
<td id="sensor12"></td>
<td id="solenoidState12"></td>
</tr>
<tr>
<td id="sensor13"></td>
<td id="solenoidState13"></td>
</tr>
<tr>
<td id="sensor14"></td>
<td id="solenoidState14"></td>
</tr>
<tr>
<td id="sensor15"></td>
<td id="solenoidState15"></td>
</tr>
<tr>
<td><i class="fa fa-refresh fa-spin"></i></td>
<td>ssss</td>
</tr>
</table>
<script type="text/javascript">
function obtenirVariables(){
var uniqueURL = "/reqEtatVariables" + "?aleatoire=" + Math.trunc(Math.random() * 1000000);
var request = new XMLHttpRequest(); // http://www.toutjavascript.com/reference/ref-xmlhttprequest.php
// la fonction à appeler lors d'un changement d'avancement de la requête AJAX
request.onreadystatechange = function()
{
if (request.readyState == 4) {
// Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles
if (request.status == 200) {
document.getElementById("pumpstate").innerHTML = "Pump: " + this.responseXML.getElementsByTagName('pumpstate')[0].childNodes[0].nodeValue;
document.getElementById("sensor0").innerHTML = "SoilHumidity Sensor 0: " + this.responseXML.getElementsByTagName('sensor0')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor1").innerHTML = "SoilHumidity Sensor 1: " + this.responseXML.getElementsByTagName('sensor1')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor2").innerHTML = "SoilHumidity Sensor 2: " + this.responseXML.getElementsByTagName('sensor2')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor3").innerHTML = "SoilHumidity Sensor 3: " + this.responseXML.getElementsByTagName('sensor3')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor4").innerHTML = "SoilHumidity Sensor 4: " + this.responseXML.getElementsByTagName('sensor4')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor5").innerHTML = "SoilHumidity Sensor 5: " + this.responseXML.getElementsByTagName('sensor5')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor6").innerHTML = "SoilHumidity Sensor 6: " + this.responseXML.getElementsByTagName('sensor6')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor7").innerHTML = "SoilHumidity Sensor 7: " + this.responseXML.getElementsByTagName('sensor7')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor8").innerHTML = "SoilHumidity Sensor 8: " + this.responseXML.getElementsByTagName('sensor8')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor9").innerHTML = "SoilHumidity Sensor 9: " + this.responseXML.getElementsByTagName('sensor9')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor10").innerHTML = "SoilHumidity Sensor 10: " + this.responseXML.getElementsByTagName('sensor10')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor11").innerHTML = "SoilHumidity Sensor 11: " + this.responseXML.getElementsByTagName('sensor11')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor12").innerHTML = "SoilHumidity Sensor 12: " + this.responseXML.getElementsByTagName('sensor12')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor13").innerHTML = "SoilHumidity Sensor 13: " + this.responseXML.getElementsByTagName('sensor13')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor14").innerHTML = "SoilHumidity Sensor 14: " + this.responseXML.getElementsByTagName('sensor14')[0].childNodes[0].nodeValue + "%";
document.getElementById("sensor15").innerHTML = "SoilHumidity Sensor 15: " + this.responseXML.getElementsByTagName('sensor15')[0].childNodes[0].nodeValue + "%";
document.getElementById("solenoidState0").innerHTML = "Solenoid0 State 0: " + this.responseXML.getElementsByTagName('solenoidState0')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState1").innerHTML = "Solenoid0 State 1: " + this.responseXML.getElementsByTagName('solenoidState1')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState2").innerHTML = "Solenoid0 State 2: " + this.responseXML.getElementsByTagName('solenoidState2')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState3").innerHTML = "Solenoid0 State 3: " + this.responseXML.getElementsByTagName('solenoidState3')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState4").innerHTML = "Solenoid0 State 4: " + this.responseXML.getElementsByTagName('solenoidState4')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState5").innerHTML = "Solenoid0 State 5: " + this.responseXML.getElementsByTagName('solenoidState5')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState6").innerHTML = "Solenoid0 State 6: " + this.responseXML.getElementsByTagName('solenoidState6')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState7").innerHTML = "Solenoid0 State 7: " + this.responseXML.getElementsByTagName('solenoidState7')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState8").innerHTML = "Solenoid0 State 8: " + this.responseXML.getElementsByTagName('solenoidState8')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState9").innerHTML = "Solenoid0 State 9: " + this.responseXML.getElementsByTagName('solenoidState9')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState10").innerHTML = "Solenoid0 State 10: " + this.responseXML.getElementsByTagName('solenoidState10')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState11").innerHTML = "Solenoid0 State 11: " + this.responseXML.getElementsByTagName('solenoidState11')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState12").innerHTML = "Solenoid0 State 12: " + this.responseXML.getElementsByTagName('solenoidState12')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState13").innerHTML = "Solenoid0 State 13: " + this.responseXML.getElementsByTagName('solenoidState13')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState14").innerHTML = "Solenoid0 State 14: " + this.responseXML.getElementsByTagName('solenoidState14')[0].childNodes[0].nodeValue;
document.getElementById("solenoidState15").innerHTML = "Solenoid0 State 15: " + this.responseXML.getElementsByTagName('solenoidState15')[0].childNodes[0].nodeValue;
}
}
}
request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables
request.send(null);
setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables()
}
</script>
</body>
</html>
)rawliteral";
Comments