RGB Color Picker для ESP32: Управление цветом через WebSockets

Вернуться в блог

В этой статье мы создадим красивый веб-интерфейс для управления RGB-светодиодом через ESP32, используя библиотеку iro.js и WebSockets для мгновенного отклика.

Содержание

Благодаря встроенному модулю WiFi, ESP32 предоставляет отличную возможность создать веб-контроллер для RGB-светодиода. Вместо того чтобы вводить значения RGB вручную, мы создадим интерактивный интерфейс с использованием виджета iro.js. Для обеспечения мгновенной связи между браузером и микроконтроллером мы будем использовать протокол WebSockets.

Разработка

Создание макета сайта

Для начала создадим структуру каталогов для нашего проекта:

ESPWebSocket (Корневая папка проекта Arduino)
- data (Папка для файлов веб-сервера)

1. HTML структура

Создайте файл index.html в папке data:

<!DOCTYPE html>
<html>
<head>
    <title>ESP32 WebSocket Color Picker</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <div class="content">
            <div id="color" class="picker">Загрузка Color Picker...</div>
        </div>
    </div>
</body>
</html>

2. Стили CSS

Создайте файл data/css/main.css:

:root { --picker-width: 300px; }
body, html { height: 100%; width: 100%; margin: 0; background: #000; color: #fff; }
.container { min-height: calc(100% - 40px); margin: 20px; background: #0f111f; border-radius: 16px; text-align: center; }
.content { padding: 35px 50px; }
.picker { max-width: var(--picker-width); margin: auto; }

Виджет

Настройка iro.js

Скачайте iro.min.js и поместите его в data/js/. Создайте data/js/iro_picker.js для инициализации виджета:

const colorPicker = new iro.ColorPicker('#color', {
    width: 300,
    color: "rgb(255, 0, 0)",
    borderWidth: 2,
    borderColor: "#fff"
});

Чтобы избежать перегрузки сети при каждом движении пальца по палитре, мы добавим задержку (debounce):

let debounce = null;
colorPicker.on('input:change', function(value) {
    if (!debounce) {
        sendColor(value.rgb);
    }
    debounce = setTimeout(() => { debounce = undefined; }, 100);
});

Hardware

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

Подключите RGB-светодиод к ESP32, используя резисторы 220 Ом для защиты диодов.

Распиновка подключения

Цвет LED	GPIO ESP32	Резистор
Красный (R)	GPIO 18	220 Ом
Зеленый (G)	GPIO 5	220 Ом
Синий (B)	GPIO 4	220 Ом

Software

Прошивка ESP32

Для работы сервера вам понадобятся библиотеки:

ESPAsyncWebServer
AsyncTCP
ArduinoJSON

Пример кода для инициализации WiFi в WiFi.h:

void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin("SSID", "PASSWORD");
  while (WiFi.status() != WL_CONNECTED) { delay(500); }
  Serial.println(WiFi.localIP());
}

Итог

Заключение

Проект готов!

Мы создали полноценную систему управления светом. Этот проект можно легко расширить для управления мощными светодиодными лентами или интегрировать в систему умного дома.