2019-09-14

Die Webseite zum Esp8266 Bme280 Innen und Aussensensor

klima.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">
      <link rel="stylesheet" href="style.css">
      <title>Innen und Aussen Klimadaten</title>
      <script>
		 function renew() {
			fetch('/bme280').then(function (response) {
				return response.json();
			}).then(function (array) {
				const elem = document.querySelectorAll('span');
				elem[0].innerHTML = array[0] != 'nan' ? array[0] + '°C' : '---------';
                elem[1].innerHTML = array[0] != 'nan' ? array[1] + ' %' : 'Fehler';
				elem[2].innerHTML = array[0] != 'nan' ? array[2] + ' hPa' : '---------';
				array[3] != '0' ? elem[3].classList.add('warn') : elem[3].classList.remove('warn');
				elem[4].innerHTML = array[4] != 'nan' ? array[4] + '°C' : '---------';
                elem[5].innerHTML = array[4] != 'nan' ? array[5] + ' %' : 'Fehler';
				elem[6].innerHTML = array[4] != 'nan' ? array[6] + ' 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;
		}
		section span {
		  color: #02fc07;
		  position: relative;
		  top: 0.2em;
		  left: .1em;
		  font-weight: bold;
		}
		.warn {
		  animation-name: blinker;
          animation-duration: 1s;
          animation-iteration-count: infinite;
        }
		@keyframes blinker {  
          50% { color: red;}
        }
      </style>
   </head>
   <body>
      Innenklima
      <section>
         <span></span>
         <span></span>
         <span></span> 	 
      </section>
      <span>Aussenklima</span>
      <section>
         <span></span>
         <span></span>
         <span></span>
      </section>
   </body>
</html>

Zurück