Update: 2020-05-23

Esp8266 LED Dimmer als Arduino Tab.

Dimmer.ino

// ****************************************************************
// Sketch Esp8266 PwmLed Modular(Tab)
// created: Jens Fleischer, 2019-05-09
// last mod: Jens Fleischer, 2020-05-23
// For more information visit: https://fipsok.de
// ****************************************************************
// Hardware: Esp8266, LED mit Vorwiderstand oder Logic Level Mosfet mit LED
// für LED
// LED Kathode an GND
// Vorwiderstand an D5 = GPIO14
// LED Anode an Vorwiderstand
//
// für Mosfet IRF3708
// Source an GND
// Gate an D5 = GPIO14
// Drain an LED Kathode
// LED Anode an V+ ext. Spannungsversorgung
// Esp8266 GND an GND ext. Spannungsversorgung
//
// Software: Esp8266 Arduino Core 2.4.2 / 2.5.2 / 2.6.3 / 2.7.1
// Getestet auf: Nodemcu, Wemos D1 Mini Pro
/******************************************************************
  Copyright (c) 2019 Jens Fleischer. All rights reserved.

  This file is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
  License as published by the Free Software Foundation; either
  version 2.1 of the License, or (at your option) any later version.
  This file is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  Lesser General Public License for more details.
*******************************************************************/
// Diese Version von PwmLed sollte als Tab eingebunden werden.
// #include <ESP8266WebServer.h> muss im Haupttab aufgerufen werden
// Die Funktionalität des ESP8266 Webservers ist erforderlich.
// Die Funktion "pwmLed();" muss im Setup aufgerufen werden.
/**************************************************************************************/

const uint8_t LED = {D5};            // Pin für LED  einstellen

void pwmLed() {
  pinMode(LED, OUTPUT);
  server.on("/do", []() {
    static uint16_t brightness;
    if (server.hasArg("set")) {
      brightness = server.arg(0).toInt();
      //Serial.println(brightness);  // Zeitkritische Anwendung
      analogWrite(LED, brightness);
      server.send(204);
    }
    else {
      server.send(200, "text/plain", static_cast<String>(brightness));
    }
  });
}

Die Webseite zum Esp8266 Led Dimmer.

dimmer.html

<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<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>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" />     <!-- gelb #ff0 grün #0f0-->
        </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>