2019-07-08

Die Webseite zum Esp32 TX23 Windsensor.

wind.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="style32.css">
   <title>Anemometer</title>
   <script>
      direction = ['m96.37 19 3.625-6.052 3.625 6.052-3.625 19.33z',
         'm127.6 23.78 5.665-4.204 1.033 6.978-10.75 16.47z',
         'm154.7 40.16 6.842-1.716-1.716 6.842-16.23 11.11z',
         'm173.4 65.65 6.978 1.033-4.204 5.665-19.25 4.049z',
         'm181 96.36 6.052 3.625-6.052 3.625-19.33-3.625z',
         'm176.2 127.6 4.204 5.665-6.978 1.033-16.47-10.75z',
         'm159.8 154.7 1.716 6.842-6.842-1.716-11.11-16.23z',
         'm134.3 173.4-1.033 6.978-5.665-4.204-4.049-19.25z',
         'm103.6 181-3.625 6.052-3.625-6.052 3.625-19.33z',
         'm72.34 176.2-5.665 4.204-1.033-6.978 10.75-16.47z',
         'm45.29 159.8-6.842 1.716 1.716-6.842 16.23-11.11z',
         'm26.56 134.3-6.978-1.033 4.204-5.665 19.25-4.049z',
         'm19.01 103.6-6.052-3.625 6.052-3.625 19.33 3.625z',
         'm23.79 72.33-4.204-5.665 6.978-1.033 16.47 10.75z',
         'm40.17 45.28-1.716-6.842 6.842 1.716 11.11 16.23z',
         'm65.66 26.55 1.033-6.978 5.665 4.204 4.049 19.25z'];
      function renew() {
         fetch('tx23').then(function (response) {
            return response.json();
         }).then(function (array) {
            var elem = document.querySelectorAll('span');
            if (array[0] != 'nan') {
               elem[0].innerHTML = array[0];
               document.getElementById('arrow').setAttribute("d", direction[array[1]]);
               elem[1].innerHTML = array[2];
            }
            else {
               elem[0].innerHTML = '----';
            }
         });
      }
      document.addEventListener('DOMContentLoaded', renew);
      setInterval(renew, 2000);
   </script>
   <style>
      svg {
         height: 22em;
      }
      main {
         display: flex;
         flex-direction: column;
         align-items: center;
         position: absolute;
         top: 6em;
         font-size: 2em;
         font-weight: bold;
      }
      span {
         font-size: 1.6em;
      }
   </style>
</head>
<body>
   <h1>Windsensor</h1>
   <svg viewBox="0 0 200 200">
      <g font-family="Arial Rounded MT Bold" font-size="9.5px">
         <path d="m175.4 73.296c2.5652 7.2385 4.0786 14.849 4.4791 22.518m-20.446-49.341c5.14 5.7058 9.4505 12.157 12.755 19.09m-37.771-37.76c6.9323 3.3045 13.384 7.6155 19.09 12.755m-49.346-20.431c7.6692 0.40007 15.279 1.9141 22.518 4.479m-53.409 8e-3c7.2385-2.5652 14.849-4.0787 22.518-4.4791m-49.34 20.446c5.7058-5.14 12.157-9.4505 19.09-12.755m-37.76 37.771c3.3045-6.9323 7.6155-13.384 12.755-19.09m-20.431 49.346c0.40007-7.6692 1.9141-15.279 4.479-22.518m0.0078 53.408c-2.5652-7.2385-4.0787-14.849-4.4791-22.518m20.446 49.34c-5.14-5.7058-9.4505-12.157-12.755-19.09m37.771 37.76c-6.9323-3.3045-13.384-7.6155-19.09-12.755m49.346 20.43c-7.6692-0.40007-15.279-1.9141-22.518-4.479m53.409-8e-3c-7.2385 2.5652-14.849 4.0786-22.518 4.479m68.011-45.462c-3.3045 6.9323-7.6155 13.384-12.755 19.09m-5.9154 5.9264c-5.7058 5.14-12.157 9.4505-19.09 12.755m45.436-68.027c-0.40002 7.6692-1.9144 15.28-4.479 22.518" stroke="#666" stroke-width="3" />
         <path id="arrow" d="" />
         <text x="96" y="11">N</text>
         <text x="162" y="38">NO</text>
         <text x="161" y="169">SO</text>
         <text x="97" y="196">S</text>
         <text x="23" y="169">SW</text>
         <text x="3" y="102">W</text>
         <text x="23" y="38">NW</text>
         <text x="188" y="103">O</text>
      </g>
   </svg>
   <main>
      <div><span></span> m/s</div>
      <div><span></span> max/h</div>
   </main>
</body>
</html>

Zurück