2018-08-12

Die Webseite zum Esp32 DHT22

dht22.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">
      <link rel="stylesheet" href="style32.css">
      <title>Klimadaten</title>
      <script>
         function renew() {
         fetch('/dht22').then(function (response) {
         return response.json();
         }).then(function (array) {
         var elem = document.querySelector('#temp');
         array[0] == 'OK' ? elem.innerHTML = array[1] + '°C' : elem.innerHTML = '---------';
         elem = document.querySelector('#hum');
         array[0] == 'OK' ? elem.innerHTML = array[2] + ' %' : elem.innerHTML = array[0];
         elem = document.querySelector('#tau');
         array[0] == 'OK' ? elem.innerHTML = array[3] + '°C' : elem.innerHTML = array[0];
         elem = document.querySelector('#hi');
         array[0] == 'OK' ? elem.innerHTML = array[4] + '°C' : elem.innerHTML = '---------';
         });
         }
         document.addEventListener('DOMContentLoaded', renew);
         setInterval(renew, 2000)
      </script>
      <style>
         body {
         padding: 10px;
         font-size: 3em;
         }
         section {
         align-items: center;
         background-color: black;
         width: 290px;
         height: 290px;
         border: .15em solid #909294;
         box-shadow: 5px 10px 5px #5a5a5b;
         border-radius: .2em;
         }
         span {
         color: #00ff05;
         top: 0.05em;
         position: relative;
         left: .1em;
         font-weight: bold
         }
         .klein {
         color: #a4aba4;
         font-size: 0.5em;
         top: 0.2em;
         }
      </style>
   </head>
   <body>
      <section>
         <span id='temp'></span>
         <span id='hum'></span>
         <span class='klein'>Taupunkt</span>
         <span id='tau'></span>
         <span class='klein'>Hitzeindex</span>
         <span id='hi'></span>
      </section>
   </body>
</html>

Zurück