Zuletzt geändert: 2018-10-03

Die Webseite zum Esp8266 Duo BME280.

duobme280.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="style.css">
      <title>Innen und Aussen Klimadaten</title>
      <script>
         function renew() {
           fetch('/bme280duo').then(function (response) {
             return response.json();
           }).then(function (array) {
             document.querySelector('#tempIn').innerHTML = array[0] != 'nan' ? array[0] + '°C' : '---------';
             document.querySelector('#humIn').innerHTML = array[0] != 'nan' ? array[1] + ' %' : 'Fehler';
             document.querySelector('#presIn').innerHTML = array[0] != 'nan' ? array[2] + ' hPa' : '---------';
             document.querySelector('#tempOut').innerHTML = array[0] != 'nan' ? array[3] + '°C' : '---------';
             document.querySelector('#humOut').innerHTML = array[0] != 'nan' ? array[4] + ' %' : 'Fehler';
             document.querySelector('#presOut').innerHTML = array[0] != 'nan' ? array[5] + ' hPa' : '---------';
           });
         }
         document.addEventListener('DOMContentLoaded', renew, setInterval(renew, 1000));
      </script>
      <style>
         body {
         padding: 10px;
         font-size: 3em;
         }
         section {
         align-items: center;
         background-color: black;
         margin-bottom: 0.5em;
         width: 290px;
         height: 180px;
         border: .15em solid #aeaeab;
         box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.7);
         border-radius: .2em;
         }
         span {
         color: #02fc07;
         position: relative;
         top: 0.2em;
         left: .1em;
         font-weight: bold
         }
      </style>
   </head>
   <body>
      Innenklima
      <section>
         <span id='tempIn'></span>
         <span id='humIn'></span>
         <span id='presIn'></span>
      </section>
      Aussenklima
      <section>
         <span id='tempOut'></span>
         <span id='humOut'></span>
         <span id='presOut'></span>
      </section>
   </body>
</html>

Zurück