2018-10-07

Die Webseite für Zwei Esp8266 BME280

bme280InOut.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('/bme280').then(response => {
      	return response.json();
      }).then(array => {
      	var elem = document.querySelector('#tempIn');
      	array[0] != 'nan' ? elem.innerHTML = array[0].replace(".", ",") + '°C' : elem.innerHTML = '---------';
      	elem = document.querySelector('#humIn');
      	array[0] != 'nan' ? elem.innerHTML = array[1].replace(".", ",") + ' %' : elem.innerHTML = 'Fehler';
      	elem = document.querySelector('#presIn');
      	array[0] != 'nan' ? elem.innerHTML = array[2].replace(".", ",") + ' hPa' : elem.innerHTML = '---------';
      });
      fetch('http://192.168.178.33/bme280').then(response => {		<!-- Trage hier die IP deines zweiten Esp8266 BME280 ein -->
      	return response.json();
      }).then(array => {
      	elem = document.querySelector('#tempOut');
      	array[0] != 'nan' ? elem.innerHTML = array[0].replace(".", ",") + '°C' : elem.innerHTML = '---------';
      	elem = document.querySelector('#humOut');
      	array[0] != 'nan' ? elem.innerHTML = array[1].replace(".", ",") + ' %' : elem.innerHTML = 'Fehler';
      	elem = document.querySelector('#presOut');
      	array[0] != 'nan' ? elem.innerHTML = array[2].replace(".", ",") + ' hPa' : elem.innerHTML = '---------';
      });
      }
      document.addEventListener('DOMContentLoaded', renew, setInterval(renew, 1000));   <!-- Interval einstellen  in ms -->
    </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>

Achtung!
Ab Arduino Core Version 2.4.0 oder höher, ist der HTTP-Header für Cors nicht mehr in der ESP8266WebServer Library enthalten,
deshalb ist es notwendig beim Zweiten Esp8266, vor "server.send(200, "application/json", handleBme());" den HTTP-Header zu senden.

Füge folgende Zeile vor "server.send();" ein.

" server.sendHeader("Access-Control-Allow-Origin", "*"); "

Zurück