API tools faq
paste
noam76

HTML Code

noam76
Feb 23rd, 2021 (edited)
1,034
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Arduino 8.46 KB | None | 0 0
raw download clone embed print report
  1. static const char PROGMEM INDEX_HTML[] = R"rawliteral(
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>Irrigation Viewer</title>
  7. <style type="text/css">
  8. td, th {
  9.  border: 1px solid white;
  10. }
  11. table {
  12.  margin: 15px 0;
  13.  border: 1px solid black;
  14.  table-layout: fixed;
  15.  width: 100%; /* must have this set */
  16.  border-spacing: 18px;
  17. }
  18. html {
  19.  background: black;
  20. }
  21. body {
  22.  font-family: sans-serif;
  23.  color: #FFFFFF;
  24.  max-width: 600px;
  25.  margin: 0 auto;
  26.  background: black;
  27.  padding: 10px;
  28. }
  29.  
  30. h1{
  31.  text-align: center;
  32. }
  33.  
  34. .wider td {
  35.  width: 218px;
  36. }
  37. </style>
  38. </head>
  39. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  40. <body onload="obtenirVariables()">
  41. <h1>Irrigation System Viewer</h1>
  42.  
  43. <table class="wider">
  44.   <tr>
  45.     <td colspan="2" id="pumpstate"></td>
  46.   </tr>
  47.   <tr>
  48.     <td id="sensor0"></td>
  49.     <td id="solenoidState0"></td>
  50.   </tr>
  51.    <tr>
  52.     <td id="sensor1"></td>
  53.     <td id="solenoidState1"></td>
  54.   </tr>
  55.   <tr>
  56.     <td id="sensor2"></td>
  57.     <td id="solenoidState2"></td>
  58.   </tr>
  59.    <tr>
  60.     <td  id="sensor3"></td>
  61.     <td id="solenoidState3"></td>
  62.   </tr>
  63.   <tr>
  64.     <td  id="sensor4"></td>
  65.     <td id="solenoidState4"></td>
  66.   </tr>
  67.   <tr>
  68.     <td  id="sensor5"></td>
  69.     <td id="solenoidState5"></td>
  70.   </tr>
  71.   <tr>
  72.     <td  id="sensor6"></td>
  73.     <td id="solenoidState6"></td>
  74.   </tr>
  75.   <tr>
  76.     <td  id="sensor7"></td>
  77.     <td id="solenoidState7"></td>
  78.   </tr>
  79.   <tr>
  80.     <td  id="sensor8"></td>
  81.     <td id="solenoidState8"></td>
  82.   </tr>
  83.   <tr>
  84.     <td  id="sensor9"></td>
  85.     <td id="solenoidState9"></td>
  86.   </tr>
  87.   <tr>
  88.     <td  id="sensor10"></td>
  89.     <td id="solenoidState10"></td>
  90.   </tr>
  91.   <tr>
  92.     <td  id="sensor11"></td>
  93.     <td id="solenoidState11"></td>
  94.   </tr>
  95.   <tr>
  96.     <td  id="sensor12"></td>
  97.     <td id="solenoidState12"></td>
  98.   </tr>
  99.   <tr>
  100.     <td  id="sensor13"></td>
  101.     <td id="solenoidState13"></td>
  102.   </tr>
  103.   <tr>
  104.     <td  id="sensor14"></td>
  105.     <td id="solenoidState14"></td>
  106.   </tr>
  107.   <tr>
  108.     <td  id="sensor15"></td>
  109.     <td id="solenoidState15"></td>
  110.   </tr>
  111.   <tr>
  112.     <td><i class="fa fa-refresh fa-spin"></i></td>
  113.     <td>ssss</td>
  114.   </tr>
  115. </table>
  116.   <script type="text/javascript">
  117.     function obtenirVariables(){
  118.     var uniqueURL = "/reqEtatVariables" + "?aleatoire=" + Math.trunc(Math.random() * 1000000);
  119.     var request = new XMLHttpRequest(); // http://www.toutjavascript.com/reference/ref-xmlhttprequest.php
  120.     // la fonction à appeler lors d'un changement d'avancement de la requête AJAX
  121.     request.onreadystatechange = function()
  122.     {
  123.      if (request.readyState == 4) {
  124.       // Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles
  125.       if (request.status == 200) {
  126.      document.getElementById("pumpstate").innerHTML =  "Pump: " + this.responseXML.getElementsByTagName('pumpstate')[0].childNodes[0].nodeValue;
  127.      document.getElementById("sensor0").innerHTML = "SoilHumidity Sensor 0: " + this.responseXML.getElementsByTagName('sensor0')[0].childNodes[0].nodeValue + "%";
  128.      document.getElementById("sensor1").innerHTML = "SoilHumidity Sensor 1: " + this.responseXML.getElementsByTagName('sensor1')[0].childNodes[0].nodeValue + "%";
  129.      document.getElementById("sensor2").innerHTML = "SoilHumidity Sensor 2: " + this.responseXML.getElementsByTagName('sensor2')[0].childNodes[0].nodeValue + "%";
  130.      document.getElementById("sensor3").innerHTML = "SoilHumidity Sensor 3: " + this.responseXML.getElementsByTagName('sensor3')[0].childNodes[0].nodeValue + "%";
  131.      document.getElementById("sensor4").innerHTML = "SoilHumidity Sensor 4: " + this.responseXML.getElementsByTagName('sensor4')[0].childNodes[0].nodeValue + "%";
  132.      document.getElementById("sensor5").innerHTML = "SoilHumidity Sensor 5: " + this.responseXML.getElementsByTagName('sensor5')[0].childNodes[0].nodeValue + "%";
  133.      document.getElementById("sensor6").innerHTML = "SoilHumidity Sensor 6: " + this.responseXML.getElementsByTagName('sensor6')[0].childNodes[0].nodeValue + "%";
  134.      document.getElementById("sensor7").innerHTML = "SoilHumidity Sensor 7: " + this.responseXML.getElementsByTagName('sensor7')[0].childNodes[0].nodeValue + "%";
  135.      document.getElementById("sensor8").innerHTML = "SoilHumidity Sensor 8: " + this.responseXML.getElementsByTagName('sensor8')[0].childNodes[0].nodeValue + "%";
  136.      document.getElementById("sensor9").innerHTML = "SoilHumidity Sensor 9: " + this.responseXML.getElementsByTagName('sensor9')[0].childNodes[0].nodeValue + "%";
  137.      document.getElementById("sensor10").innerHTML = "SoilHumidity Sensor 10: " + this.responseXML.getElementsByTagName('sensor10')[0].childNodes[0].nodeValue + "%";
  138.      document.getElementById("sensor11").innerHTML = "SoilHumidity Sensor 11: " + this.responseXML.getElementsByTagName('sensor11')[0].childNodes[0].nodeValue + "%";
  139.      document.getElementById("sensor12").innerHTML = "SoilHumidity Sensor 12: " + this.responseXML.getElementsByTagName('sensor12')[0].childNodes[0].nodeValue + "%";
  140.      document.getElementById("sensor13").innerHTML = "SoilHumidity Sensor 13: " + this.responseXML.getElementsByTagName('sensor13')[0].childNodes[0].nodeValue + "%";
  141.      document.getElementById("sensor14").innerHTML = "SoilHumidity Sensor 14: " + this.responseXML.getElementsByTagName('sensor14')[0].childNodes[0].nodeValue + "%";
  142.      document.getElementById("sensor15").innerHTML = "SoilHumidity Sensor 15: " + this.responseXML.getElementsByTagName('sensor15')[0].childNodes[0].nodeValue + "%";
  143.      document.getElementById("solenoidState0").innerHTML = "Solenoid0 State 0: " + this.responseXML.getElementsByTagName('solenoidState0')[0].childNodes[0].nodeValue;
  144.      document.getElementById("solenoidState1").innerHTML = "Solenoid0 State 1: " + this.responseXML.getElementsByTagName('solenoidState1')[0].childNodes[0].nodeValue;
  145.      document.getElementById("solenoidState2").innerHTML = "Solenoid0 State 2: " + this.responseXML.getElementsByTagName('solenoidState2')[0].childNodes[0].nodeValue;
  146.      document.getElementById("solenoidState3").innerHTML = "Solenoid0 State 3: " + this.responseXML.getElementsByTagName('solenoidState3')[0].childNodes[0].nodeValue;
  147.      document.getElementById("solenoidState4").innerHTML = "Solenoid0 State 4: " + this.responseXML.getElementsByTagName('solenoidState4')[0].childNodes[0].nodeValue;
  148.      document.getElementById("solenoidState5").innerHTML = "Solenoid0 State 5: " + this.responseXML.getElementsByTagName('solenoidState5')[0].childNodes[0].nodeValue;
  149.      document.getElementById("solenoidState6").innerHTML = "Solenoid0 State 6: " + this.responseXML.getElementsByTagName('solenoidState6')[0].childNodes[0].nodeValue;
  150.      document.getElementById("solenoidState7").innerHTML = "Solenoid0 State 7: " + this.responseXML.getElementsByTagName('solenoidState7')[0].childNodes[0].nodeValue;
  151.      document.getElementById("solenoidState8").innerHTML = "Solenoid0 State 8: " + this.responseXML.getElementsByTagName('solenoidState8')[0].childNodes[0].nodeValue;
  152.      document.getElementById("solenoidState9").innerHTML = "Solenoid0 State 9: " + this.responseXML.getElementsByTagName('solenoidState9')[0].childNodes[0].nodeValue;
  153.      document.getElementById("solenoidState10").innerHTML = "Solenoid0 State 10: " + this.responseXML.getElementsByTagName('solenoidState10')[0].childNodes[0].nodeValue;
  154.      document.getElementById("solenoidState11").innerHTML = "Solenoid0 State 11: " + this.responseXML.getElementsByTagName('solenoidState11')[0].childNodes[0].nodeValue;
  155.      document.getElementById("solenoidState12").innerHTML = "Solenoid0 State 12: " + this.responseXML.getElementsByTagName('solenoidState12')[0].childNodes[0].nodeValue;
  156.      document.getElementById("solenoidState13").innerHTML = "Solenoid0 State 13: " + this.responseXML.getElementsByTagName('solenoidState13')[0].childNodes[0].nodeValue;
  157.      document.getElementById("solenoidState14").innerHTML = "Solenoid0 State 14: " + this.responseXML.getElementsByTagName('solenoidState14')[0].childNodes[0].nodeValue;
  158.      document.getElementById("solenoidState15").innerHTML = "Solenoid0 State 15: " + this.responseXML.getElementsByTagName('solenoidState15')[0].childNodes[0].nodeValue;
  159.        }
  160.      }
  161.     }
  162.     request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables
  163.     request.send(null);
  164.     setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables()
  165.    }
  166.  </script>
  167. </body>
  168. </html>
  169. )rawliteral";
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!