noam76

html.h

Jul 23rd, 2021
852
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  8.  <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  9. <title>Page Title</title>
  10. <style type="text/css">
  11. /**
  12.  * Layout
  13.  */
  14. body {
  15.   background-color: #ccc;
  16.   padding: 0% 3% 0% 3%;
  17.   font-size: 14px;
  18.   font-family: Lato, sans-serif;
  19. }
  20.  
  21. .main {
  22.   width: 80%;
  23.   display: flex;
  24.   flex-direction: column;
  25.   margin-top: 75px;
  26. }
  27.  
  28. .wrapper {
  29.   display: flex;
  30.   justify-content: space-between;
  31. }
  32.  
  33. .sidebar {
  34.   width: 15%;
  35.   height: 25vh;
  36.   min-height: 150px;
  37.   position: -webkit-sticky;
  38.   position: sticky;
  39.   top: 20%;
  40.   text-align: center;
  41.   border: 3px solid purple;
  42.   padding: 17px;
  43.   margin-left: 5px;
  44. }
  45.  
  46. ins {
  47.   text-decoration: none;
  48. }
  49.  
  50. h2 {
  51.   margin: 0;
  52.   padding: 0;
  53. }
  54.  
  55. table {
  56.   table-layout: fixed;
  57.   width: 103%;
  58.   border-collapse: collapse;
  59.   border: 3px solid purple;
  60. }
  61.  
  62. thead th, tfoot th {
  63.   font-family: 'Rock Salt', cursive;
  64. }
  65.  
  66. th {
  67.   letter-spacing: 2px;
  68. }
  69.  
  70. td {
  71.   letter-spacing: 1px;
  72. }
  73.  
  74. tbody td {
  75.   text-align: center;
  76. }
  77.  
  78. thead {
  79.   color: white;
  80.   text-shadow: 1px 1px 1px black;
  81. }
  82.  
  83. tfoot {
  84.   color: black;
  85.   text-align: center;
  86. }
  87.  
  88. thead th, tfoot th, tfoot td {
  89.   background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  90.   border: 3px solid purple;
  91. }
  92.  
  93. th, td {
  94.   padding: 10px;
  95. }
  96.  
  97. tbody tr:nth-child(odd) {
  98.   background-color: #ffffff;
  99. }
  100.  
  101. tbody tr:nth-child(even) {
  102.   background-color: #EB984E;
  103. }
  104.  
  105. /**
  106.  * Sticky navigation
  107.  */
  108. .sticky {
  109.   text-align: center;
  110.   background-color: #ccc;
  111.   position: -webkit-sticky;
  112.   position: fixed;
  113.   top: 0;
  114.   height: 63px;
  115.   width: 100%;
  116. }
  117.  
  118. /**
  119.  * Display lists on a single line.
  120.  * @bugfix Prevent webkit from removing list semantics
  121.  * 1. Add a non-breaking space
  122.  * 2. Make sure it doesn't mess up the DOM flow
  123.  */
  124. .list-inline {
  125.   list-style: none;
  126.   margin-left: -0.5em;
  127.   margin-right: -0.5em;
  128.   padding: 0;
  129. }
  130.  
  131. .list-inline > li {
  132.   display: inline-block;
  133.   margin-left: 0.5em;
  134.   margin-right: 0.5em;
  135. }
  136.  
  137. .list-inline > li:before {
  138.   content: "\200B"; /* 1 */
  139.   position: absolute; /* 2 */
  140. }
  141.  
  142. input[type=submit]{
  143.   background-color: #EB984E;
  144.   border-radius: 10px;
  145.   border: 0;
  146.   width: 80px;
  147.   height:30px;
  148.   text-decoration: none;
  149.   cursor: pointer;
  150. }
  151.  
  152. </style>
  153. </head>
  154. <body onload="obtenirVariables()">
  155.  <div class="sticky">
  156.    <h1>Irrigation System Viewer</h1>
  157.  </div>
  158.  <div class="wrapper">
  159.    <div class="sidebar">
  160.    <h3>Pump State</h3>
  161.    <div id="pumpstate"></div>
  162.    <br>
  163.    <div><i class="fa fa-refresh fa-2x fa-fw"></i></div>
  164.   </div> <!--  end sidebar -->
  165.  <div class="main">
  166.  <form action="/get">
  167.  <table>
  168.    <thead>
  169.      <tr>
  170.        <th scope="col">Plant</th>
  171.        <th scope="col"><i class="fa fa-thermometer-three-quarters fa-2x" aria-hidden="true"></i> Humidity %</th>
  172.        <th scope="col">Tap Status</th>
  173.        <th scope="col">Tap Icon</th>
  174.      <th scope="col" colspan="2">Select humidity rate</th>
  175.      </tr>
  176.    </thead>
  177.    <tbody>
  178.      <tr>
  179.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 0</th>
  180.        <td id="sensor0"></td>
  181.        <td id="solenoidState0"></td>
  182.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  183.      <td>Max: <ins id="max00"></ins> <input type="text" name="S00max" maxlength="4" size="4"></td>
  184.      <td>Min: <ins id="min00"></ins> <input type="text" name="S00min" maxlength="4" size="4"></td>
  185.      </tr>
  186.      <tr>
  187.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 1</th>
  188.        <td id="sensor1"></td>
  189.        <td id="solenoidState1"></td>
  190.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  191.      <td>Max: <ins id="max01"></ins> <input type="text" name="S01max" maxlength="4" size="4"></td>
  192.      <td>Min: <ins id="min01"></ins> <input type="text" name="S01min" maxlength="4" size="4"></td>
  193.      </tr>
  194.  
  195.      <tr>
  196.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 2</th>
  197.        <td id="sensor2"></td>
  198.        <td id="solenoidState2"></td>
  199.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  200.      <td>Max: <ins id="max02"></ins> <input type="text" name="S02max" maxlength="4" size="4"></td>
  201.      <td>Min: <ins id="min02"></ins> <input type="text" name="S02min" maxlength="4" size="4"></td>
  202.      </tr>
  203.  
  204.      <tr>
  205.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 3</th>
  206.        <td id="sensor3"></td>
  207.        <td id="solenoidState3"></td>
  208.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  209.      <td>Max: <ins id="max03"></ins> <input type="text" name="S03max" maxlength="4" size="4"></td>
  210.      <td>Min: <ins id="min03"></ins> <input type="text" name="S03min" maxlength="4" size="4"></td>
  211.      </tr>
  212.  
  213.   <tr>
  214.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 4</th>
  215.        <td id="sensor4"></td>
  216.        <td id="solenoidState4"></td>
  217.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  218.      <td>Max: <ins id="max04"></ins> <input type="text" name="S04max" maxlength="4" size="4"></td>
  219.      <td>Min: <ins id="min04"></ins> <input type="text" name="S04min" maxlength="4" size="4"></td>
  220.      </tr>
  221.  
  222.   <tr>
  223.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 5</th>
  224.        <td id="sensor5"></td>
  225.        <td id="solenoidState5"></td>
  226.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  227.      <td>Max: <ins id="max05"></ins> <input type="text" name="S05max" maxlength="4" size="4"></td>
  228.      <td>Min: <ins id="min05"></ins> <input type="text" name="S05min" maxlength="4" size="4"></td>
  229.      </tr>
  230.  
  231.   <tr>
  232.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 6</th>
  233.        <td id="sensor6"></td>
  234.        <td id="solenoidState6"></td>
  235.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  236.      <td>Max: <ins id="max06"></ins> <input type="text" name="S06max" maxlength="4" size="4"></td>
  237.      <td>Min: <ins id="min06"></ins> <input type="text" name="S06min" maxlength="4" size="4"></td>
  238.      </tr>
  239.  
  240.   <tr>
  241.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 7</th>
  242.        <td id="sensor7"></td>
  243.        <td id="solenoidState7"></td>
  244.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  245.      <td>Max: <ins id="max07"></ins> <input type="text" name="S07max" maxlength="4" size="4"></td>
  246.      <td>Min: <ins id="min07"></ins> <input type="text" name="S07min" maxlength="4" size="4"></td>
  247.      </tr>
  248.  
  249.   <tr>
  250.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 8</th>
  251.        <td id="sensor8"></td>
  252.        <td id="solenoidState8"></td>
  253.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  254.      <td>Max: <ins id="max08"></ins> <input type="text" name="S08max" maxlength="4" size="4"></td>
  255.      <td>Min: <ins id="min08"></ins> <input type="text" name="S08min" maxlength="4" size="4"></td>
  256.      </tr>
  257.  
  258.   <tr>
  259.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 9</th>
  260.        <td id="sensor9"></td>
  261.        <td id="solenoidState9"></td>
  262.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  263.      <td>Max: <ins id="max09"></ins> <input type="text" name="S09max" maxlength="4" size="4"></td>
  264.      <td>Min: <ins id="min09"></ins> <input type="text" name="S09min" maxlength="4" size="4"></td>
  265.      </tr>
  266.  
  267.   <tr>
  268.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 10</th>
  269.        <td id="sensor10"></td>
  270.        <td id="solenoidState10"></td>
  271.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  272.      <td>Max: <ins id="max10"></ins> <input type="text" name="S10max" maxlength="4" size="4"></td>
  273.      <td>Min: <ins id="min10"></ins> <input type="text" name="S10min" maxlength="4" size="4"></td>
  274.      </tr>
  275.  
  276.   <tr>
  277.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 11</th>
  278.        <td id="sensor11"></td>
  279.        <td id="solenoidState11"></td>
  280.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  281.      <td>Max: <ins id="max11"></ins> <input type="text" name="S11max" maxlength="4" size="4"></td>
  282.      <td>Min: <ins id="min11"></ins> <input type="text" name="S11min" maxlength="4" size="4"></td>
  283.      </tr>
  284.  
  285.   <tr>
  286.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 12</th>
  287.        <td id="sensor12"></td>
  288.        <td id="solenoidState12"></td>
  289.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  290.      <td>Max: <ins id="max12"></ins> <input type="text" name="S12max" maxlength="4" size="4"></td>
  291.      <td>Min: <ins id="min12"></ins> <input type="text" name="S12min" maxlength="4" size="4"></td>
  292.      </tr>
  293.  
  294.   <tr>
  295.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 13</th>
  296.        <td id="sensor13"></td>
  297.        <td id="solenoidState13"></td>
  298.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  299.      <td>Max: <ins id="max13"></ins> <input type="text" name="S13max" maxlength="4" size="4"></td>
  300.      <td>Min: <ins id="min13"></ins> <input type="text" name="S13min" maxlength="4" size="4"></td>
  301.      </tr>
  302.  
  303.   <tr>
  304.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 14</th>
  305.        <td id="sensor14"></td>
  306.        <td id="solenoidState14"></td>
  307.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  308.      <td>Max: <ins id="max14"></ins> <input type="text" name="S14max" maxlength="4" size="4"></td>
  309.      <td>Min: <ins id="min14"></ins> <input type="text" name="S14min" maxlength="4" size="4"></td>
  310.      </tr>
  311.  
  312.   <tr>
  313.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 15</th>
  314.        <td id="sensor15"></td>
  315.        <td id="solenoidState15"></td>
  316.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  317.      <td>Max: <ins id="max15"></ins> <input type="text" name="S15max" maxlength="4" size="4"></td>
  318.      <td>Min: <ins id="min15"></ins> <input type="text" name="S15min" maxlength="4" size="4"></td>
  319.      </tr>
  320.    </tbody>
  321.   </table>
  322.   <br>
  323.   <table>
  324.   <tr>
  325.   <th scope="row"><i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i> Send Data</th>
  326.   <td></td>
  327.   <td></td>
  328.   <td></td>
  329.   <td><input name='BT01' type='submit' value="Send"></td>
  330.   </tr>
  331.   </table>  
  332.   </form>
  333.   </div> <!-- end main -->
  334.  </div> <!-- end wrapper -->
  335. <script type="text/javascript">
  336.     function obtenirVariables(){
  337.     var uniqueURL = "/reqEtatVariables" + "?aleatoire=" + Math.trunc(Math.random() * 1000000);
  338.     var request = new XMLHttpRequest(); // http://www.toutjavascript.com/reference/ref-xmlhttprequest.php
  339.     // la fonction à appeler lors d'un changement d'avancement de la requête AJAX
  340.     request.onreadystatechange = function()
  341.     {
  342.      if (request.readyState == 4) {
  343.       // Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles
  344.       if (request.status == 200) {
  345.      document.getElementById("pumpstate").innerHTML = this.responseXML.getElementsByTagName('pumpstate')[0].childNodes[0].nodeValue;
  346.        if (document.getElementById("pumpstate").innerHTML === "ON"){
  347.         document.getElementById("pumpstate").style.color = "greenyellow";
  348.        }
  349.        else {
  350.         document.getElementById("pumpstate").style.color = "#ff0000";
  351.       }
  352.      
  353.      document.getElementById("sensor0").innerHTML = this.responseXML.getElementsByTagName('sensor0')[0].childNodes[0].nodeValue + "%";
  354.      document.getElementById("sensor1").innerHTML = this.responseXML.getElementsByTagName('sensor1')[0].childNodes[0].nodeValue + "%";
  355.      document.getElementById("sensor2").innerHTML = this.responseXML.getElementsByTagName('sensor2')[0].childNodes[0].nodeValue + "%";
  356.      document.getElementById("sensor3").innerHTML = this.responseXML.getElementsByTagName('sensor3')[0].childNodes[0].nodeValue + "%";
  357.      document.getElementById("sensor4").innerHTML = this.responseXML.getElementsByTagName('sensor4')[0].childNodes[0].nodeValue + "%";
  358.      document.getElementById("sensor5").innerHTML = this.responseXML.getElementsByTagName('sensor5')[0].childNodes[0].nodeValue + "%";
  359.      document.getElementById("sensor6").innerHTML = this.responseXML.getElementsByTagName('sensor6')[0].childNodes[0].nodeValue + "%";
  360.      document.getElementById("sensor7").innerHTML = this.responseXML.getElementsByTagName('sensor7')[0].childNodes[0].nodeValue + "%";
  361.      document.getElementById("sensor8").innerHTML = this.responseXML.getElementsByTagName('sensor8')[0].childNodes[0].nodeValue + "%";
  362.      document.getElementById("sensor9").innerHTML = this.responseXML.getElementsByTagName('sensor9')[0].childNodes[0].nodeValue + "%";
  363.      document.getElementById("sensor10").innerHTML = this.responseXML.getElementsByTagName('sensor10')[0].childNodes[0].nodeValue + "%";
  364.      document.getElementById("sensor11").innerHTML = this.responseXML.getElementsByTagName('sensor11')[0].childNodes[0].nodeValue + "%";
  365.      document.getElementById("sensor12").innerHTML = this.responseXML.getElementsByTagName('sensor12')[0].childNodes[0].nodeValue + "%";
  366.      document.getElementById("sensor13").innerHTML = this.responseXML.getElementsByTagName('sensor13')[0].childNodes[0].nodeValue + "%";
  367.      document.getElementById("sensor14").innerHTML = this.responseXML.getElementsByTagName('sensor14')[0].childNodes[0].nodeValue + "%";
  368.      document.getElementById("sensor15").innerHTML = this.responseXML.getElementsByTagName('sensor15')[0].childNodes[0].nodeValue + "%";
  369.      
  370.      document.getElementById("solenoidState0").innerHTML = this.responseXML.getElementsByTagName('solenoidState0')[0].childNodes[0].nodeValue;
  371.         if (document.getElementById("solenoidState0").innerHTML === "ON"){
  372.         document.getElementById("solenoidState0").style.color = "greenyellow";
  373.        }
  374.        else {
  375.         document.getElementById("solenoidState0").style.color = "#ff0000";
  376.       }
  377.      
  378.      document.getElementById("solenoidState1").innerHTML = this.responseXML.getElementsByTagName('solenoidState1')[0].childNodes[0].nodeValue;
  379.         if (document.getElementById("solenoidState1").innerHTML === "ON"){
  380.         document.getElementById("solenoidState1").style.color = "greenyellow";
  381.        }
  382.        else {
  383.         document.getElementById("solenoidState1").style.color = "#ff0000";
  384.       }
  385.      
  386.      document.getElementById("solenoidState2").innerHTML = this.responseXML.getElementsByTagName('solenoidState2')[0].childNodes[0].nodeValue;
  387.         if (document.getElementById("solenoidState2").innerHTML === "ON"){
  388.         document.getElementById("solenoidState2").style.color = "greenyellow";
  389.        }
  390.        else {
  391.         document.getElementById("solenoidState2").style.color = "#ff0000";
  392.       }
  393.      
  394.      document.getElementById("solenoidState3").innerHTML = this.responseXML.getElementsByTagName('solenoidState3')[0].childNodes[0].nodeValue;
  395.         if (document.getElementById("solenoidState3").innerHTML === "ON"){
  396.         document.getElementById("solenoidState3").style.color = "greenyellow";
  397.        }
  398.        else {
  399.         document.getElementById("solenoidState3").style.color = "#ff0000";
  400.       }
  401.      
  402.      document.getElementById("solenoidState4").innerHTML = this.responseXML.getElementsByTagName('solenoidState4')[0].childNodes[0].nodeValue;
  403.         if (document.getElementById("solenoidState4").innerHTML === "ON"){
  404.         document.getElementById("solenoidState4").style.color = "greenyellow";
  405.        }
  406.        else {
  407.         document.getElementById("solenoidState4").style.color = "#ff0000";
  408.       }
  409.      
  410.      document.getElementById("solenoidState5").innerHTML = this.responseXML.getElementsByTagName('solenoidState5')[0].childNodes[0].nodeValue;
  411.         if (document.getElementById("solenoidState5").innerHTML === "ON"){
  412.         document.getElementById("solenoidState5").style.color = "greenyellow";
  413.        }
  414.        else {
  415.         document.getElementById("solenoidState5").style.color = "#ff0000";
  416.       }
  417.      
  418.      document.getElementById("solenoidState6").innerHTML = this.responseXML.getElementsByTagName('solenoidState6')[0].childNodes[0].nodeValue;
  419.         if (document.getElementById("solenoidState6").innerHTML === "ON"){
  420.         document.getElementById("solenoidState6").style.color = "greenyellow";
  421.        }
  422.        else {
  423.         document.getElementById("solenoidState6").style.color = "#ff0000";
  424.       }
  425.      
  426.      document.getElementById("solenoidState7").innerHTML = this.responseXML.getElementsByTagName('solenoidState7')[0].childNodes[0].nodeValue;
  427.         if (document.getElementById("solenoidState7").innerHTML === "ON"){
  428.         document.getElementById("solenoidState7").style.color = "greenyellow";
  429.        }
  430.        else {
  431.         document.getElementById("solenoidState7").style.color = "#ff0000";
  432.       }
  433.      
  434.      document.getElementById("solenoidState8").innerHTML = this.responseXML.getElementsByTagName('solenoidState8')[0].childNodes[0].nodeValue;
  435.         if (document.getElementById("solenoidState8").innerHTML === "ON"){
  436.         document.getElementById("solenoidState8").style.color = "greenyellow";
  437.        }
  438.        else {
  439.         document.getElementById("solenoidState8").style.color = "#ff0000";
  440.       }
  441.      
  442.      document.getElementById("solenoidState9").innerHTML = this.responseXML.getElementsByTagName('solenoidState9')[0].childNodes[0].nodeValue;
  443.         if (document.getElementById("solenoidState9").innerHTML === "ON"){
  444.         document.getElementById("solenoidState9").style.color = "greenyellow";
  445.        }
  446.        else {
  447.         document.getElementById("solenoidState9").style.color = "#ff0000";
  448.       }
  449.      
  450.      document.getElementById("solenoidState10").innerHTML = this.responseXML.getElementsByTagName('solenoidState10')[0].childNodes[0].nodeValue;
  451.         if (document.getElementById("solenoidState10").innerHTML === "ON"){
  452.         document.getElementById("solenoidState10").style.color = "greenyellow";
  453.        }
  454.        else {
  455.         document.getElementById("solenoidState10").style.color = "#ff0000";
  456.       }
  457.      
  458.      document.getElementById("solenoidState11").innerHTML = this.responseXML.getElementsByTagName('solenoidState11')[0].childNodes[0].nodeValue;
  459.         if (document.getElementById("solenoidState11").innerHTML === "ON"){
  460.         document.getElementById("solenoidState11").style.color = "greenyellow";
  461.        }
  462.        else {
  463.         document.getElementById("solenoidState11").style.color = "#ff0000";
  464.       }
  465.      
  466.      document.getElementById("solenoidState12").innerHTML = this.responseXML.getElementsByTagName('solenoidState12')[0].childNodes[0].nodeValue;
  467.         if (document.getElementById("solenoidState12").innerHTML === "ON"){
  468.         document.getElementById("solenoidState12").style.color = "greenyellow";
  469.        }
  470.        else {
  471.         document.getElementById("solenoidState12").style.color = "#ff0000";
  472.       }
  473.      
  474.      document.getElementById("solenoidState13").innerHTML = this.responseXML.getElementsByTagName('solenoidState13')[0].childNodes[0].nodeValue;
  475.         if (document.getElementById("solenoidState13").innerHTML === "ON"){
  476.         document.getElementById("solenoidState13").style.color = "greenyellow";
  477.        }
  478.        else {
  479.         document.getElementById("solenoidState13").style.color = "#ff0000";
  480.       }
  481.      
  482.      document.getElementById("solenoidState14").innerHTML = this.responseXML.getElementsByTagName('solenoidState14')[0].childNodes[0].nodeValue;
  483.         if (document.getElementById("solenoidState14").innerHTML === "ON"){
  484.         document.getElementById("solenoidState14").style.color = "greenyellow";
  485.        }
  486.        else {
  487.         document.getElementById("solenoidState14").style.color = "#ff0000";
  488.       }
  489.      
  490.      document.getElementById("solenoidState15").innerHTML = this.responseXML.getElementsByTagName('solenoidState15')[0].childNodes[0].nodeValue;
  491.         if (document.getElementById("solenoidState15").innerHTML === "ON"){
  492.         document.getElementById("solenoidState15").style.color = "greenyellow";
  493.        }
  494.        else {
  495.         document.getElementById("solenoidState15").style.color = "#ff0000";
  496.       }
  497.  
  498.      document.getElementById("max00").innerHTML = this.responseXML.getElementsByTagName('max00')[0].childNodes[0].nodeValue;
  499.      document.getElementById("min00").innerHTML = this.responseXML.getElementsByTagName('min00')[0].childNodes[0].nodeValue;
  500.      document.getElementById("max01").innerHTML = this.responseXML.getElementsByTagName('max01')[0].childNodes[0].nodeValue;
  501.      document.getElementById("max02").innerHTML = this.responseXML.getElementsByTagName('max02')[0].childNodes[0].nodeValue;
  502.      document.getElementById("max03").innerHTML = this.responseXML.getElementsByTagName('max03')[0].childNodes[0].nodeValue;
  503.      document.getElementById("max04").innerHTML = this.responseXML.getElementsByTagName('max04')[0].childNodes[0].nodeValue;
  504.      document.getElementById("max05").innerHTML = this.responseXML.getElementsByTagName('max05')[0].childNodes[0].nodeValue;
  505.      document.getElementById("max06").innerHTML = this.responseXML.getElementsByTagName('max06')[0].childNodes[0].nodeValue;
  506.      document.getElementById("max07").innerHTML = this.responseXML.getElementsByTagName('max07')[0].childNodes[0].nodeValue;
  507.      document.getElementById("max08").innerHTML = this.responseXML.getElementsByTagName('max08')[0].childNodes[0].nodeValue;
  508.      document.getElementById("max09").innerHTML = this.responseXML.getElementsByTagName('max09')[0].childNodes[0].nodeValue;
  509.      document.getElementById("max10").innerHTML = this.responseXML.getElementsByTagName('max10')[0].childNodes[0].nodeValue;
  510.      document.getElementById("max11").innerHTML = this.responseXML.getElementsByTagName('max11')[0].childNodes[0].nodeValue;
  511.      document.getElementById("max12").innerHTML = this.responseXML.getElementsByTagName('max12')[0].childNodes[0].nodeValue;
  512.      document.getElementById("max13").innerHTML = this.responseXML.getElementsByTagName('max13')[0].childNodes[0].nodeValue;
  513.      document.getElementById("max14").innerHTML = this.responseXML.getElementsByTagName('max14')[0].childNodes[0].nodeValue;
  514.      document.getElementById("max15").innerHTML = this.responseXML.getElementsByTagName('max15')[0].childNodes[0].nodeValue;
  515.      document.getElementById("min01").innerHTML = this.responseXML.getElementsByTagName('min01')[0].childNodes[0].nodeValue;
  516.      document.getElementById("min02").innerHTML = this.responseXML.getElementsByTagName('min02')[0].childNodes[0].nodeValue;
  517.      document.getElementById("min03").innerHTML = this.responseXML.getElementsByTagName('min03')[0].childNodes[0].nodeValue;
  518.      document.getElementById("min04").innerHTML = this.responseXML.getElementsByTagName('min04')[0].childNodes[0].nodeValue;
  519.      document.getElementById("min05").innerHTML = this.responseXML.getElementsByTagName('min05')[0].childNodes[0].nodeValue;
  520.      document.getElementById("min06").innerHTML = this.responseXML.getElementsByTagName('min06')[0].childNodes[0].nodeValue;
  521.      document.getElementById("min07").innerHTML = this.responseXML.getElementsByTagName('min07')[0].childNodes[0].nodeValue;
  522.      document.getElementById("min08").innerHTML = this.responseXML.getElementsByTagName('min08')[0].childNodes[0].nodeValue;
  523.      document.getElementById("min09").innerHTML = this.responseXML.getElementsByTagName('min09')[0].childNodes[0].nodeValue;
  524.      document.getElementById("min10").innerHTML = this.responseXML.getElementsByTagName('min10')[0].childNodes[0].nodeValue;
  525.      document.getElementById("min11").innerHTML = this.responseXML.getElementsByTagName('min11')[0].childNodes[0].nodeValue;
  526.      document.getElementById("min12").innerHTML = this.responseXML.getElementsByTagName('min12')[0].childNodes[0].nodeValue;
  527.      document.getElementById("min13").innerHTML = this.responseXML.getElementsByTagName('min13')[0].childNodes[0].nodeValue;
  528.      document.getElementById("min14").innerHTML = this.responseXML.getElementsByTagName('min14')[0].childNodes[0].nodeValue;
  529.      document.getElementById("min15").innerHTML = this.responseXML.getElementsByTagName('min15')[0].childNodes[0].nodeValue;
  530.        }
  531.      }
  532.     }
  533.     request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables
  534.     request.send(null);
  535.     setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables()
  536.    }
  537.  </script>
  538. </body>
  539. </html>
  540. )rawliteral";
RAW Paste Data