2018-10-31

Die Webseite zum Esp8266 2-Kanal Relais Modul.

dualrelais.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>Esp8266 Dual Relais</title>
      <script>
         window.addEventListener('DOMContentLoaded', () => {
		   rel = document.getElementsByTagName('button'), led = document.getElementsByClassName('aus');
           rel[0].addEventListener('click', dual.bind(this, '1'));
           rel[1].addEventListener('click', dual.bind(this, '2')); 
         }, dual());
         function dual(arg) {
           fetch('duorel?rel=' + arg).then(response => {
             return response.json();
           }).then(array => {
		     for (i = 0; i < 2; i++) {
               array[i] != '0' ? (led[i].classList.remove('an'), rel[i].innerHTML = 'Ein') : (led[i].classList.add('an'), rel[i].innerHTML = 'Aus');
             }
           });
         }       
      </script>
      <style>
         main {
         display: flex;
         }
         div {
         display: flex;
         flex-flow: column;
         align-items: center;
         margin: 0.5em;
         }
         .aus {
         background-image: radial-gradient(#4ec005, #3c9801, #245a02);
         width: 3em;
         height: 3em;
         margin: 0.7em;
         border-radius: 50%;
         border: 1em solid #bababa;
         box-shadow: 0.3em 0.3em 0.3em #494949;
         }
         .an {
         background-image: radial-gradient(#bafd6e, #3fe403);
         border: 1em solid #c1c3c1;
         }
      </style>
   </head>
   <body>
      <h2>Dual Relais schalten</h2>
      <h2>Esp8266 Nodemcu Wemos</h2>
      <main>
         <div>
            <span class="aus"></span>Relais 1
            <button id="0"></button>
         </div>
         <div>
            <span class="aus"></span>Relais 2
            <button id="1"></button>
         </div>
      </main>
   </body>
</html>

Zurück