2018-08-26

Die Webseite zum Esp8266 DS18B20 List.

ds18b20list.html

<!-- For more information visit: https://fipsok.de -->
<!DOCTYPE HTML>
<html lang="de">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Esp8266 Ds18B20</title>
      <link rel="stylesheet" href="style.css">
      <style>
         main {
         background-color: #03deff;
         border: 0.5em solid #03deff;
         box-shadow: 0.3em 0.3em 0.2em #616362;
         font-size: 2em;
         }
      </style>
      <script>
         function list() {
           fetch('lots').then(function (response) {
             return response.json();
           }).then(function (json) {
             for (var i = 0; i < json.length; i++) {
               var listItem = document.createElement('span');
               listItem.innerHTML = '<strong>' + json[i].name + '</strong>';
               document.getElementById('links').appendChild(listItem);
             }
             for (var i = 0; i < json.length; i++) {
               var listItem = document.createElement('span');
               listItem.setAttribute('id', 'wert' + i);
               document.getElementById('rechts').appendChild(listItem);
             }
           });
         }
         document.addEventListener('DOMContentLoaded', list);
         function update() {
           fetch('lots').then(function (response) {
             return response.json();
           }).then(function (array) {
             for (var i = 0; i < array.length; i++) {
               if (array[0].wert != '') document.querySelector('#wert' + i).innerHTML = (array[i].wert / 128).toFixed(2) + '°C';
             }
           });
         }
         document.addEventListener('DOMContentLoaded', update);
         setInterval(update, 2000); // Interval einstellen  in ms -->
      </script>
   </head>
   <body>
      <h1>Ds18B20 Liste</h1>
      <main>
         <section id="links">     
         </section>
         <section id="rechts">
         </section>
      </main>
   </body>
</html>


Zurück