2019-05-11

Die Webseite zum Esp8266 Led Dimmer.

slider.html

<!-- For more information visit: https://fipsok.de -->
<!DOCTYPE HTML>
<html lang="de">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <title>Esp8266 Slider</title>
  <style>
    .container {
      width: 300px;
      display: flex;
      flex-flow: column;
      align-items: center;
      padding-top: 60px;
    }
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 25px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      transition: opacity .2s;
    }
    .slider:hover {
      opacity: 1;
    }
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 50px;
      background: #888;
      cursor: pointer;
    }
    .slider::-moz-range-thumb {
      width: 25px;
      height: 50px;
      background: #888;
      cursor: pointer;
    }
    svg {
      height: 7em;
    }
  </style>
  <script>
    // Werte für optisch lineares Faden einer LED https://www.mikrocontroller.net/articles/LED-Fading
    pwmtable = [0, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 4, 4, 5, 5, 6, 6, 7, 8, 9,
      10, 11, 12, 13, 15, 17, 19, 21, 23, 26, 29, 32, 36, 40, 44, 49, 55,
      61, 68, 76, 85, 94, 105, 117, 131, 146, 162, 181, 202, 225, 250,
      279, 311, 346, 386, 430, 479, 534, 595, 663, 739, 824, 918, 1023
    ];
    var x;
    window.addEventListener('DOMContentLoaded', () => {
      let slider = document.querySelector('input');
      let r = document.getElementById('radial');
      let o = document.getElementById('licht');
      slider.max = pwmtable.length - 1;
      slider.addEventListener('input', () => {
        pwmtable.forEach((v, i) => {
          if (slider.value == i) {
            fetch('/do?set=' + v);
            r.setAttribute("r", i * 3.2 + 1);
            o.setAttribute("opacity", 0.3 + i / 85);
          }
        });
      });
      fetch('/do').then(function (response) {
        return response.text();
      }).then(function (txt) {
        pwmtable.forEach((v, i) => {
          if (txt == v) {
            slider.value = i;
            r.setAttribute("r", i * 3.2 + 1);
            o.setAttribute("opacity", 0.3 + i / 85);
          }
        });
      });
    });
  </script>
</head>
<body>
  <h1>ESP8266 PWM</h1>
  <h2>LED Dimmer</h2>
  <svg viewBox="0 0 53 53">
    <defs>
      <linearGradient id="linear" x1="179" x2="213" y1="244" y2="259" gradientUnits="userSpaceOnUse">
        <stop stop-color="#fff" offset="0" />
        <stop stop-color="#fff" stop-opacity="0" offset="1" />
      </linearGradient>
      <radialGradient id="radial" cx="32.4" cy="273" r="0"
        gradientTransform="matrix(-.00585 -.39 .532 -.00799 -119 285)" gradientUnits="userSpaceOnUse">
        <stop stop-color="#ff0" offset="0" />                      <!-- gelb #ff0 grün #0f0-->
        <stop stop-color="#ff0" stop-opacity="0" offset="1" />
      </radialGradient>
    </defs>
    <g transform="translate(0 -244)">
      <circle cx="26.6" cy="271" r="25" fill="#b0b0b0" stroke-width=".265" />
      <ellipse id="elip" transform="matrix(.933 .36 -.69 .724 0 0)" cx="206" cy="255" rx="5.84" ry="11.3"
        fill="url(#linear)" stroke-width=".478" />
      <circle id="licht" cx="26.7" cy="271" r="24" fill="url(#radial)" opacity="0" stroke-width=".249" />
    </g>
  </svg>
  <div class="container">
    <input type="range" class="slider">
  </div>
</body>
</html>

Zurück