ESP8266 NodeMCU: управление яркостью светодиода веб-слайдером

ESP8266 как веб-сервер — простой способ управлять устройствами с телефона или ПК. В проекте создаём страницу со слайдером для регулировки яркости светодиода по ШИМ (PWM). Ползунок передаёт значения 0–1023, отклик мгновенный. Проект — основа для диммера лампы, управления серво, RGB-подсветки или моторами в умном доме. Сборка за минуты, работает в любой Wi-Fi сети без приложений.

ESP8266 управление яркостью светодиода слайдером

Возможности проекта

Плавная регулировка яркости светодиода. Адаптивная веб-страница с слайдером. Отображение текущего значения. Доступ с любого браузера. Легко заменить светодиод на мощную нагрузку через MOSFET. Расширяемо до нескольких слайдеров или кнопок.

Необходимые компоненты

  • Плата ESP8266 NodeMCU
  • Светодиод + резистор 220–330 Ом
  • Провода

Подключение

  • Катод светодиода → GND
  • Анод через резистор → D4 (GPIO2, PWM)

Встроенный LED на NodeMCU — D4 (инверсный: LOW = горит).

Библиотеки

  • ESPAsyncWebServer
  • AsyncTCP (скачать с GitHub)

Полный скетч ESP8266

#include < ESP8266WiFi.h>
#include < ESPAsyncWebServer.h>

AsyncWebServer server(80);
const int ledPin = D4;
int ledValue = 512; // текущее значение яркости

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta charset="utf-8">
  <title>Диммер</title>
  <style>
    body {font-family: Arial; text-align: center; margin: 50px; background: #333; color: white;}
    h1 {font-size: 32px;}
    input[type=range] {width: 80%; height: 50px;}
    #value {font-size: 50px; color: lime;}
  </style>
</head>
<body>
  <h1>Яркость светодиода</h1>
  <input type="range" min="0" max="1023" value="512" oninput="fetch('/slider?value='+this.value)">
  <p id="value">512</p>
  <script>
    setInterval(()=>fetch("/value").then(r=>r.text()).then(v=>document.getElementById("value").innerHTML=v),500);
  </script>
</body>
</html>)rawliteral";

void setup() {
  pinMode(ledPin, OUTPUT);
  analogWrite(ledPin, ledValue);

  WiFi.begin("SSID", "PASS");
  while (WiFi.status() != WL_CONNECTED) delay(500);

  server.on("/", [](AsyncWebServerRequest *r){ 
    r->send_P(200, "text/html", index_html); 
  });

  server.on("/slider", HTTP_GET, [](AsyncWebServerRequest *r){
    if (r->hasParam("value")) {
      ledValue = r->arg("value").toInt();
      analogWrite(ledPin, ledValue);
    }
    r->send(200, "text/plain", "OK");
  });

  server.on("/value", HTTP_GET, [](AsyncWebServerRequest *r){
    r->send(200, "text/plain", String(ledValue));
  });

  server.begin();
}

void loop() {}
Управляет яркостью светодиода на D4 через PWM.
/slider принимает значение с ползунка и устанавливает яркость.
/value возвращает текущее значение яркости для веб-страницы.
Веб-страница отображает ползунок и обновляет текущее значение каждые 500 мс.

Как работает

Слайдер отправляет GET-запрос /slider?value=XXX. Сервер получает значение и analogWrite на пин. JavaScript обновляет число на странице.

Заключение

Простой веб-диммер на ESP8266. Основa для умного освещения, управления моторами или серво. Доступно с телефона, легко расширяемо.

FAQ — ESP8266 управление светодиодом

Почему светодиод не горит?

На NodeMCU встроенный LED инверсный (LOW = горит). Используйте обычный LED или инвертируйте логику.

Можно управлять мощной нагрузкой?

Да, подключите MOSFET (IRFZ44N) или реле к PWM-пину.

Как изменить диапазон 0–100%?

В слайдере min=»0″ max=»100″, в скетче map(value, 0, 100, 0, 1023).

Страница не обновляет значение?

Добавьте JavaScript setInterval для периодического запроса текущего значения.

Можно несколько слайдеров?

Да, разные URL (/slider1?value=…) и пины.

Без AsyncWebServer?

Можно WiFiServer, но Async быстрее и стабильнее.

Доступ извне сети?

Настройте порт-форвардинг или используйте ngrok.