API tools faq
paste
Advertisement
noam76

htlm.h

noam76
Apr 29th, 2023 (edited)
1,095
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Arduino 14.77 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. <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  8. <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
  9.  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/fontawesome.min.css" integrity="sha512-SgaqKKxJDQ/tAUAAXzvxZz33rmn7leYDYfBP+YoMRSENhf3zJyx3SBASt/OfeQwBHA1nxMis7mM3EV/oYT6Fdw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  10.  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> -->
  11. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  12.  
  13. <style type="text/css">
  14. /**
  15.  * Layout
  16.  */
  17. body {
  18.   background-color: #ccc;
  19.   padding: 0% 3% 0% 3%;
  20.   font-size: 14px;
  21.   font-family: Lato, sans-serif;
  22. }
  23.  
  24. .main {
  25.   width: 80%;
  26.   display: flex;
  27.   flex-direction: column;
  28.   margin-top: 75px;
  29. }
  30.  
  31. .wrapper {
  32.   display: flex;
  33.   justify-content: space-between;
  34. }
  35.  
  36. .sidebar {
  37.   width: 15%;
  38.   height: 25vh;
  39.   min-height: 150px;
  40.   position: -webkit-sticky;
  41.   position: sticky;
  42.   top: 20%;
  43.   text-align: center;
  44.   border: 3px solid purple;
  45.   padding: 17px;
  46.   margin-left: 5px;
  47. }
  48.  
  49. ins {
  50.   text-decoration: none;
  51. }
  52.  
  53. h2 {
  54.   margin: 0;
  55.   padding: 0;
  56. }
  57.  
  58. table {
  59.   table-layout: fixed;
  60.   width: 103%;
  61.   border-collapse: collapse;
  62.   border: 3px solid purple;
  63. }
  64.  
  65. thead th, tfoot th {
  66.   font-family: 'Rock Salt', cursive;
  67. }
  68.  
  69. th {
  70.   letter-spacing: 2px;
  71. }
  72.  
  73. td {
  74.   letter-spacing: 1px;
  75. }
  76.  
  77. tbody td {
  78.   text-align: center;
  79. }
  80.  
  81. thead {
  82.   color: white;
  83.   text-shadow: 1px 1px 1px black;
  84. }
  85.  
  86. tfoot {
  87.   color: black;
  88.   text-align: center;
  89. }
  90.  
  91. thead th, tfoot th, tfoot td {
  92.   background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  93.   border: 3px solid purple;
  94. }
  95.  
  96. th, td {
  97.   padding: 10px;
  98. }
  99.  
  100. tbody tr:nth-child(odd) {
  101.   background-color: #ffffff;
  102. }
  103.  
  104. tbody tr:nth-child(even) {
  105.   background-color: #EB984E;
  106. }
  107.  
  108. /**
  109.  * Sticky navigation
  110.  */
  111. .sticky {
  112.   text-align: center;
  113.   background-color: #ccc;
  114.   position: -webkit-sticky;
  115.   position: fixed;
  116.   top: 0;
  117.   height: 63px;
  118.   width: 100%;
  119. }
  120.  
  121. /**
  122.  * Display lists on a single line.
  123.  * @bugfix Prevent webkit from removing list semantics
  124.  * 1. Add a non-breaking space
  125.  * 2. Make sure it doesn't mess up the DOM flow
  126.  */
  127. .list-inline {
  128.   list-style: none;
  129.   margin-left: -0.5em;
  130.   margin-right: -0.5em;
  131.   padding: 0;
  132. }
  133.  
  134. .list-inline > li {
  135.   display: inline-block;
  136.   margin-left: 0.5em;
  137.   margin-right: 0.5em;
  138. }
  139.  
  140. .list-inline > li:before {
  141.   content: "\200B"; /* 1 */
  142.   position: absolute; /* 2 */
  143. }
  144.  
  145. input[type=submit]{
  146.   background-color: #EB984E;
  147.   border-radius: 10px;
  148.   border: 0;
  149.   width: 80px;
  150.   height:30px;
  151.   text-decoration: none;
  152.   cursor: pointer;
  153. }
  154.  
  155. .sidebar-send-btn {
  156.   background-color: #EB984E;
  157.   border-radius: 10px;
  158.   border: 0;
  159.   width: 80px;
  160.   height: 30px;
  161.   text-decoration: none;
  162.   cursor: pointer;
  163. }
  164. </style>
  165. </head>
  166.  <body>
  167.  <div class="sticky">
  168.    <h1>Irrigation System Viewer</h1>
  169.  </div>
  170.  <div class="wrapper">
  171.    <div class="sidebar">
  172.    <h3>Pump State</h3>
  173.    <div id="pump_status"></div>
  174.    <br>
  175.    <div><i class="fa fa-refresh fa-2x fa-fw"></i></div>
  176.   <br><br><br><br><br><br><br><br><br>
  177.   <table>
  178.     <tr>
  179.       <th scope="row"><i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i> Send Data</th>
  180.       <td><button class="sidebar-send-btn" onclick="document.getElementById('myForm').submit()">Send</button></td>
  181.     </tr>
  182.   </table>
  183.   </div> <!--  end sidebar -->
  184.  <div class="main">
  185.  <form id="myForm" action="/get" method="POST">
  186.  <table>
  187.    <thead>
  188.      <tr>
  189.        <th scope="col">Plant</th>
  190.        <th scope="col"><i class="fa fa-thermometer-three-quarters fa-2x" aria-hidden="true"></i> Humidity %</th>
  191.        <th scope="col">Tap Status</th>
  192.        <th scope="col">Tap Icon</th>
  193.      <th scope="col" colspan="2">Select humidity rate</th>
  194.      </tr>
  195.    </thead>
  196.    <tbody>
  197.      <tr>
  198.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 0</th>
  199.        <td id="sensor0"></td>
  200.        <td id="solenoid-status0"></td>
  201.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  202.      <td>Max: <ins id="max00"></ins> <input type="text" name="userMax[0]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  203.      <td>Min: <ins id="min00"></ins> <input type="text" name="userMin[0]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  204.      </tr>
  205.      <tr>
  206.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 1</th>
  207.        <td id="sensor1"></td>
  208.        <td id="solenoid-status1"></td>
  209.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  210.      <td>Max: <ins id="max01"></ins> <input type="text" name="userMax[1]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  211.      <td>Min: <ins id="min01"></ins> <input type="text" name="userMin[1]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  212.      </tr>
  213.  
  214.      <tr>
  215.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 2</th>
  216.        <td id="sensor2"></td>
  217.        <td id="solenoid-status2"></td>
  218.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  219.      <td>Max: <ins id="max02"></ins> <input type="text" name="userMax[2]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  220.      <td>Min: <ins id="min02"></ins> <input type="text" name="userMin[2]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  221.      </tr>
  222.  
  223.      <tr>
  224.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 3</th>
  225.        <td id="sensor3"></td>
  226.        <td id="solenoid-status3"></td>
  227.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  228.      <td>Max: <ins id="max03"></ins> <input type="text" name="userMax[3]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  229.      <td>Min: <ins id="min03"></ins> <input type="text" name="userMin[3]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  230.      </tr>
  231.  
  232.   <tr>
  233.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 4</th>
  234.        <td id="sensor4"></td>
  235.        <td id="solenoid-status4"></td>
  236.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  237.      <td>Max: <ins id="max04"></ins> <input type="text" name="userMax[4]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  238.      <td>Min: <ins id="min04"></ins> <input type="text" name="userMin[4]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  239.      </tr>
  240.  
  241.   <tr>
  242.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 5</th>
  243.        <td id="sensor5"></td>
  244.        <td id="solenoid-status5"></td>
  245.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  246.      <td>Max: <ins id="max05"></ins> <input type="text" name="userMax[5]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  247.      <td>Min: <ins id="min05"></ins> <input type="text" name="userMin[5]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  248.      </tr>
  249.  
  250.   <tr>
  251.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 6</th>
  252.        <td id="sensor6"></td>
  253.        <td id="solenoid-status6"></td>
  254.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  255.      <td>Max: <ins id="max06"></ins> <input type="text" name="userMax[6]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  256.      <td>Min: <ins id="min06"></ins> <input type="text" name="userMin[6]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  257.      </tr>
  258.  
  259.   <tr>
  260.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 7</th>
  261.        <td id="sensor7"></td>
  262.        <td id="solenoid-status7"></td>
  263.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  264.      <td>Max: <ins id="max07"></ins> <input type="text" name="userMax[7]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  265.      <td>Min: <ins id="min07"></ins> <input type="text" name="userMin[7]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  266.      </tr>
  267.  
  268.   <tr>
  269.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 8</th>
  270.        <td id="sensor8"></td>
  271.        <td id="solenoid-status8"></td>
  272.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  273.      <td>Max: <ins id="max08"></ins> <input type="text" name="userMax[8]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  274.      <td>Min: <ins id="min08"></ins> <input type="text" name="userMin[8]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  275.      </tr>
  276.  
  277.   <tr>
  278.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 9</th>
  279.        <td id="sensor9"></td>
  280.        <td id="solenoid-status9"></td>v
  281.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  282.      <td>Max: <ins id="max09"></ins> <input type="text" name="userMax[9]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  283.      <td>Min: <ins id="min09"></ins> <input type="text" name="userMin[9]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  284.      </tr>
  285.  
  286.   <tr>
  287.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 10</th>
  288.        <td id="sensor10"></td>
  289.        <td id="solenoid-status10"></td>
  290.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  291.      <td>Max: <ins id="max10"></ins> <input type="text" name="userMax[10]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  292.      <td>Min: <ins id="min10"></ins> <input type="text" name="userMin[10]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  293.      </tr>
  294.  
  295.   <tr>
  296.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 11</th>
  297.        <td id="sensor11"></td>
  298.        <td id="solenoid-status11"></td>
  299.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  300.      <td>Max: <ins id="max11"></ins> <input type="text" name="userMax[11]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  301.      <td>Min: <ins id="min11"></ins> <input type="text" name="userMin[11]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  302.      </tr>
  303.  
  304.   <tr>
  305.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 12</th>
  306.        <td id="sensor12"></td>
  307.        <td id="solenoid-status12"></td>
  308.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  309.      <td>Max: <ins id="max12"></ins> <input type="text" name="userMax[12]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  310.      <td>Min: <ins id="min12"></ins> <input type="text" name="userMin[12]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  311.      </tr>
  312.  
  313.   <tr>
  314.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 13</th>
  315.        <td id="sensor13"></td>
  316.        <td id="solenoid-status13"></td>
  317.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  318.      <td>Max: <ins id="max13"></ins> <input type="text" name="userMax[13]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  319.      <td>Min: <ins id="min13"></ins> <input type="text" name="userMin[13]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  320.      </tr>
  321.  
  322.   <tr>
  323.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 14</th>
  324.        <td id="sensor14"></td>
  325.        <td id="solenoid-status14"></td>
  326.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  327.      <td>Max: <ins id="max14"></ins> <input type="text" name="userMax[14]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  328.      <td>Min: <ins id="min14"></ins> <input type="text" name="userMin[14]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  329.      </tr>
  330.  
  331.   <tr>
  332.        <th scope="row"><i class="fa fa-tree fa-2x" aria-hidden="true"></i> Sensor 15</th>
  333.        <td id="sensor15"></td>
  334.        <td id="solenoid-status15"></td>
  335.        <td><i class="fa fa-refresh fa-2x fa-fw"></i></td>
  336.      <td>Max: <ins id="max15"></ins> <input type="text" name="userMax[15]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  337.      <td>Min: <ins id="min15"></ins> <input type="text" name="userMin[15]" maxlength="4" size="4" oninput="checkInput(this);"></td>
  338.      </tr>
  339.    </tbody>
  340.   </table>
  341.   </form>
  342.   <br>
  343.   </div> <!-- end main -->
  344.  </div> <!-- end wrapper -->
  345. <script type="text/javascript">
  346.  function checkInput(input) {
  347.   if (input.value !== '' && !/^\d{1,3}$/.test(input.value)) {
  348.     alert("La valeur doit être un nombre de 1 à 3 chiffres.");
  349.     input.value = "";
  350.   }
  351.  }
  352.  
  353.  function sendForm() {
  354.   document.getElementById("myForm").submit();
  355.  }
  356.  
  357.  document.getElementById("myForm").addEventListener("submit", function(event) {
  358.   event.preventDefault(); // prevent the form from submitting
  359.   // displayFormValues(); // call the function to display the form values
  360.  });
  361.  
  362. $(document).ready(function() {
  363.   setInterval(function() {
  364.     $.ajax({
  365.       url: "/sendata",
  366.       dataType: "xml",
  367.       success: function(xml) {
  368.         // Display sensor values
  369.         for (var i = 0; i < 15; i++) {
  370.           var sensor_value = $(xml).find("mux sensor[id='" + i + "']").text();
  371.           sensor_value += " %"; // Ajouter le symbole %
  372.           //console.log("Sensor " + i + " value: " + sensor_value);
  373.           $("#sensor" + i).text(sensor_value);
  374.         }
  375.        
  376.         // Display solenoid status
  377.         for (var i = 0; i < 15; i++) {
  378.           var solenoid_status = $(xml).find("mux solenoid[id='" + i + "']").text();
  379.           var status_color = (solenoid_status === "0") ? "#ff0000" : "greenyellow";
  380.           var status_text = (solenoid_status === "0") ? "OFF" : "ON";
  381.           $("#solenoid-status" + i).text(status_text).css({color: status_color, fontWeight: "bold"});
  382.         }
  383.  
  384.         // Display pump status
  385.         var pump_status = $(xml).find("pump").text();
  386.         //console.log("Pump status: " + pump_status);
  387.         if (pump_status === "1") {
  388.           $("#pump_status").text("On").css({color: "green", fontWeight: "bold"});
  389.         } else {
  390.           $("#pump_status").text("Off").css({color: "red", fontWeight: "bold"});
  391.         }
  392.    
  393.         // Remove existing rows for sensors
  394.         $("tr.sensor-row").remove();
  395.    
  396.         // Add rows for each sensor in sensorValuesTotal
  397.         for (var i = 0; i < 15; i++) {
  398.           // var sensor_value = sensorValuesTotal[i];
  399.           var sensor_value = $(this).attr("id");
  400.           var row = "<tr class='sensor-row'><td>Sensor " + i + "</td><td id='sensor" + i + "'>" + sensor_value + "</td><td id='solenoid-status" + i + "'></td><td><i class='fa fa-refresh fa-2x fa-fw'></i></td></tr>";
  401.           $("#sensor-table" + i).append(row);
  402.         }
  403.       },
  404.       error: function(xhr, status, error) {
  405.         console.log("Error: " + error.message);
  406.       }
  407.     });
  408.   }, 1000);
  409. });
  410.  
  411.  </script>
  412. </body>
  413. </html>
  414. )rawliteral";
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!