ESP8266 NodeMCU: управление яркостью светодиода веб-слайдером
ESP8266 как веб-сервер — простой способ управлять устройствами с телефона или ПК. В проекте создаём страницу со слайдером для регулировки яркости светодиода по ШИМ (PWM). Ползунок передаёт значения 0–1023, отклик мгновенный. Проект — основа для диммера лампы, управления серво, RGB-подсветки или моторами в умном доме. Сборка за минуты, работает в любой Wi-Fi сети без приложений.
Возможности проекта
Плавная регулировка яркости светодиода. Адаптивная веб-страница с слайдером. Отображение текущего значения. Доступ с любого браузера. Легко заменить светодиод на мощную нагрузку через 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() {}
/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.