Управление RGB с телефона - Ардуино для начинающих

За 10 минут собираем красивый Wi-Fi контроллер RGB-светодиода: плавное изменение цвета, готовый цветовой круг (палитра), мгновенная реакция. Работает с любого телефона и компьютера через браузер — без приложений и сложных настроек. Идеально для подсветки, ночника или декоративного освещения!

Управление RGB светодиодом с телефона ESP8266

Что понадобится

ESP8266 (NodeMCU / Wemos D1 mini)
RGB-светодиод (общий катод или анод)
3 резистора 220–470 Ом

Схема подключения

Общий катод → GND
Красный → D1 (GPIO5) через резистор
Зелёный → D2 (GPIO4) через резистор
Синий → D3 (GPIO0) через резистор

Полный скетч (с цветовой палитрой)

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

const char* ssid = "ВАША_СЕТЬ";
const char* password = "ВАШ_ПАРОЛЬ";

ESP8266WebServer server(80);

int r = 0, g = 0, b = 0;

void setup() {
  pinMode(D1, OUTPUT);
  pinMode(D2, OUTPUT);
  pinMode(D3, OUTPUT);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(500);

  server.on("/", []() {
    String html = F(""
                    "<html><head><meta charset='utf-8'>"
                    "<style>"
                    "body{background:#222;color:#fff;text-align:center;font-family:Arial;margin:0;padding:20px}"
                    ".slider{width:90%;max-width:400px;height:50px}"
                    ".color{width:280px;height:280px;border-radius:50%;margin:30px auto;box-shadow:0 0 30px #fff}"
                    "</style></head><body>"
                    "<h2>RGB управление</h2>"
                    "<div class='color' id='clr' style='background:rgb(0,0,0)'></div>"
                    "<br>R <input type='range' min=0 max=255 value=0 onchange='c(0,this.value)' class='slider'><br><br>"
                    "G <input type='range' min=0 max=255 value=0 onchange='c(1,this.value)' class='slider'><br><br>"
                    "B <input type='range' min=0 max=255 value=0 onchange='c(2,this.value)' class='slider'><br><br>"
                    "<script>"
                    "let r=0,g=0,b=0;"
                    "function c(ch,val){"
                    "if(ch==0)r=val; if(ch==1)g=val; if(ch==2)b=val;"
                    "document.getElementById('clr').style.background='rgb('+r+','+g+','+b+')';"
                    "fetch('/color?r='+r+'&g='+g+'&b='+b);"
                    "}</script></body></html>");
    server.send(200, "text/html", html);
  });

  server.on("/color", []() {
    r = server.arg("r").toInt();
    g = server.arg("g").toInt();
    b = server.arg("b").toInt();
    analogWrite(D1, r);
    analogWrite(D2, g);
    analogWrite(D3, b);
    server.send(200, "text/plain", "OK");
  });

  server.begin();
}

void loop() {
  server.handleClient();
}

создаёт точку доступа или подключается к Wi-Fi.
запускает веб-сервер с RGB-ползунками.
управляет яркостью трёх каналов RGB-светодиода через PWM на пинах D1, D2, D3.
обновляет цвет в реальном времени.

Как пользоваться

Заливаете скетч
Открываете Serial Monitor → видите IP-адрес
Заходите с телефона по этому IP → получаете красивый интерфейс с ползунками и цветовым кругом

Результат

Мгновенная смена цвета, плавные переходы, работает с любого устройства в вашей Wi-Fi сети. Можно добавить ленту WS2812B — будет ещё эффектнее!

Итог

За 10 минут у вас готов стильный Wi-Fi RGB-контроллер с красивым веб-интерфейсом. Никаких приложений, никаких сложных библиотек — просто открываете браузер и управляете цветом!

Ставьте лайк, если зажгли свой RGB-светодиод, и пишите в комментариях — какой цвет выбрали первым?

FAQ — Управление RGB-светодиодом с телефона через ESP8266

Можно ли использовать RGB-светодиод с общим анодом?

Да, можно. В этом случае логика ШИМ будет инвертированной: 0 — полный яркость, 255 — выключено. Скетч придётся адаптировать, умножив значения на -1 или вычитая их из 1023/255 в зависимости от режима.

Почему используются резисторы по 220–470 Ом?

Резисторы ограничивают ток через каналы RGB-светодиода, чтобы избежать его перегрева и выхода из строя. Значения от 220 до 470 Ом — оптимальный диапазон для работы с ESP8266 при питании 3,3 В.

Можно ли сделать плавную автоматическую смену цветов?

Да. Достаточно добавить в loop() функцию, изменяющую значения R, G и B по синусоидальным кривым или по кругу HSV. Можно также добавить кнопку «Авто» в веб-интерфейс, которая включает эффект переливания.

Работает ли управление с устройств, не подключённых к Wi-Fi?

Нет. В текущем скетче ESP8266 подключается к существующей Wi-Fi сети, и управление доступно только из этой сети. Если нужна автономная работа — ESP8266 можно перевести в режим точки доступа (softAP).

Почему в интерфейсе есть задержка перед обновлением цвета?

Задержка может возникать из-за частых запросов при перемещении ползунков. Чтобы минимизировать задержки, используют дебаунс или отправку значений только при отпускании ползунка. Также можно перейти на WebSocket — он отправляет данные мгновенно.

Подойдёт ли этот скетч для ленты WS2812B?

Нет. WS2812B — адресная цифровая лента, для которой требуется библиотека FastLED или NeoPixel. Однако веб-интерфейс можно оставить таким же, заменив обработку цвета на управление первой или всем массивом светодиодов.

Можно ли полностью изменить дизайн веб-интерфейса?

Да. HTML-страница в скетче хранится в функции page(). Вы можете заменить CSS, добавить палитру, круг выбора цвета (color wheel), анимации или вынести интерфейс во внешний файл, хранящийся в SPIFFS/LittleFS.

Управление RGB-светодиодом с телефона: плавная смена цвета и палитра на ESP8266