| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta charset="utf-8" /> |
| | <meta name="viewport" content="width=device-width" /> |
| | <title>My static Space</title> |
| | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
| |
|
| |
|
| | <style> |
| | input[type="number"]::-webkit-inner-spin-button, |
| | input[type="number"]::-webkit-outer-spin-button { |
| | -webkit-appearance: inner-spin-button; |
| | opacity: 1; |
| | } |
| | |
| | input[type="number"] { |
| | -moz-appearance: textfield; |
| | } |
| | |
| | </style> |
| |
|
| | |
| | </head> |
| | <body> |
| |
|
| | <div class="container mt-3"> |
| | <div class="container text-center"> |
| | <h1>Настройки системы</h1> |
| | </div> |
| | <br> |
| | <h4>Уровень pH</h4> |
| | <p>EEPROM : <span id="pH_eep"></span></p> |
| |
|
| | <form> |
| | <label for="pH_set">Новое : </label> |
| | <input type="number" id="pH_set" value="5.6" min="1" max="14" step="0.01"> |
| | </form> |
| | <br> |
| | <h4>pH доз. ON sec.</h4> |
| | <p>EEPROM : <span id="ph_on_eep"></span></p> |
| |
|
| | <form> |
| | <label for="ph_on_eep_set">Новое : </label> |
| | <input type="number" id="ph_on_eep_set" value="2.5" min="0.1" max="20" step="0.01"> |
| | </form> |
| | <br> |
| | <h4>Уровень EC</h4> |
| | <p>EEPROM : <span id="ec_eep"></span></p> |
| |
|
| | <form> |
| | <label for="ec_eep_set">Новое : </label> |
| | <input type="number" id="ec_eep_set" value="0.85" min="0.1" max="4" step="0.01"> |
| | </form> |
| | |
| |
|
| | </div> |
| |
|
| | |
| | <script> |
| | |
| | |
| | function updateValues(data) { |
| | document.getElementById("pH_eep").textContent = data.ph_eep; |
| | document.getElementById("ph_on_eep").textContent = data.ph_on_eep; |
| | document.getElementById("ec_eep").textContent = data.ec_eep; |
| | |
| | } |
| | |
| | function fetchValues() { |
| | var xhr = new XMLHttpRequest(); |
| | xhr.open("GET", "/settings_api", true); |
| | xhr.setRequestHeader("Content-Type", "application/json"); |
| | xhr.onreadystatechange = function () { |
| | if (xhr.readyState === 4 && xhr.status === 200) { |
| | var response = JSON.parse(xhr.responseText); |
| | updateValues(response); |
| | } |
| | }; |
| | xhr.send(); |
| | } |
| | |
| | fetchValues(); |
| | setInterval(fetchValues, 10000); |
| | </script> |
| | </body> |
| | </html> |
