Спасаем ARGB: Как я заменил сгоревший китайский хаб на ESP32 с веб-интерфейсом / Habr

Предыстория

Год назад я собрал бюджетную сборку, украсив её пятью ARGB-вентиляторами Aigo AR12. В комплекте шёл проприетарный хаб AR12-2012 это типичное китайское решение: 6-пиновые разъемы (чтобы вы не могли воткнуть вентиляторы напрямую в мать), питание от SATA и синхронизация подсветки.

Всё светилось, крутилось и радовало глаз. Ровно год.
Однажды утром вентиляторы запустились, а подсветка увы нет. Хаб умер. Вскрытие показало мертвый MCU, который унес с собой тайну протокола управления.

Покупать такой же хаб за $15–20? Нет, спасибо. Я знал, что внутри вентиляторов стоят обычные адресные светодиоды. А если есть адресные светодиоды, значит, есть ESP32.

Демонстрация функционала.

Цель проекта: Собрать контроллер за $5, который будет лучше заводского: с управлением по Wi-Fi, REST API, сохранением настроек.

Реверс-инжиниринг 6-pin разъёма

Производители бюджетных вертушек любят использовать нестандартные разъемы, объединяя питание мотора и подсветки в один кабель. Чтобы подключиться, пришлось прозвонить плату мертвого хаба и сам вентилятор.

Распиновка Aigo AR12 (вид на разъем):

Pin (фото ниже)	Функция	Напряжение	Комментар��й
1	Motor +12V	12V	Питание мотора (нам не нужно)
2	Motor GND	GND	Общий минус мотора
3	LED GND	GND	Общий минус подсветки (Нужен!)
4	Data IN	5V Logic	Вход сигнала WS2812B
5	LED +5V	5V	Питание светодиодов
6	Data OUT	5V Logic	Выход на следующий вентилятор

Важное замечание: В этих вентиляторах нет PWM-управления оборотами и тахометра. Они всегда молотят на 100% (1200 оборотов) от 12В (или регулируются напряжением DC, если колхозить). Но нас интересует только свет.

Железо

Нам нужно разделить высоковольтную часть (12В для мотора) и логическую (5В для ESP32 и LED).

Наш стартер-пак:

ESP32 DevKit V1 - $3 (мозг).
OLED дисплей SSD1306 (0.96" I2C) - $2 (для вывода IP и статуса, опционально).
Резистор 330–470 Ом - $0.01 (защита пина данных, опционально).
Конденсатор 1000uF 6.3V - (желательно, для сглаживания питания LED, опционально).
Провода Dupont / Паяльник.

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

Вентиляторы подключаются последовательно (гирляндой). Data OUT первого идет в Data IN второго и так далее. ESP32 управляет только первым.

ESP32 GPIO5 → 330Ω → Pin4 (Data IN) 1-го вентилятора
ESP32 GND    → Pin3 (GND RGB) вентилятора
+5V от БП    → Pin5 (+5V RGB) вентилятора
Вентиляторы 2-5: Pin6(DOUT) → Pin4(DIN) следующего

⚠️ Warning: Никогда не подавайте 12V на ESP32 или линию питания подсветки (Pin 5). Светодиоды и контроллер сгорят мгновенно.

Программная архитектура

Заводской хаб умел делать только "радугу" и пару миганий. Мы пойдем дальше.

Стек: C++ (Arduino framework), WebServer для API, Adafruit_NeoPixel для эффектов.

Киллер-фичи прошивки:

Асинхронность: Веб-сервер не блокирует анимацию. Используем millis() вместо delay().
EEPROM (Non-volatile memory): При выключении ПК контроллер запоминает последний режим, цвет, яркость и тему.
REST API: Полное управление через HTTP-запросы (идеально для Home Assistant).
Встроенный Web-UI: HTML/CSS/JS хранятся прямо в памяти контроллера. Никакого интернета для работы не нужно.

Ключевые фрагменты кода

1. Инициализация и структура данных:
Мы храним настройки не просто в переменных, а пишем их в энергонезависимую память при каждом изменении.

#define NUM_LEDS 8    // Светодиодов в одном вентиляторе
#define NUM_FANS 5    // Количество вентиляторов
#define RGB_PIN 5     // Пин управления

Adafruit_NeoPixel strip(NUM_LEDS * NUM_FANS, RGB_PIN, NEO_GRB + NEO_KHZ800);

// Массив готовых цветовых тем
ColorScheme themes[10] = {
  {"Cyberpunk", 255, 0, 255},
  {"Toxic", 50, 205, 50},
  {"Ocean", 0, 100, 255},
  // ...
};

2. Логика Web-сервера и API:
Сервер слушает POST-запросы. Это позволяет управлять подсветкой хоть из браузера, хоть скриптом на Python, хоть curl-ом из терминала.

server.on("/api/mode", HTTP_POST, []() {
    if (server.hasArg("value")) {
      currentMode = server.arg("value").toInt() % 20;
      saveSettings(); // Сразу сохраняем в EEPROM
      server.send(200, "text/plain", "OK");
    }
});

3. Генерация эффектов:
Никаких delay(). Используем таймер на millis(), чтобы процессор успевал отвечать на Wi-Fi запросы между кадрами анимации.

void updateRGBEffect() {
  static unsigned long lastUpdate = 0;
  // Скорость анимации зависит от настройки speed
  int delayTime = map(101 - speed, 10, 100, 10, 100); 
  
  if (millis() - lastUpdate < delayTime) return;
  lastUpdate = millis();
  
  switch(currentMode) {
    case 0: colorStatic(r, g, b); break;
    case 1: colorBreathing(); break;
    case 2: colorRainbow(); break;
    // ... еще 17 режимов
    case 19: colorCandlelight(); break; // Эффект свечи
  }
}

(Полный исходный код доступен на GitHub, ссылка в конце)

Веб-интерфейс (Front-end на борту)

Вместо того чтобы писать отдельное приложение под Android/iOS, я зашил полноценную SPA-страницу прямо в код ESP32.

Что умеет интерфейс:

Dashboard: Плитки для быстрого переключения 20 режимов.
Темы: 10 пресетов цветов (Красный, Матрица, Киберпанк и т.д.).
Слайдеры: Яркость и Скорость анимации в реальном времени.
Color Picker: Выбор любого цвета из 16 млн оттенков.
Обратная связь: Интерфейс показывает текущий статус и IP адрес.

Собственно сам веб интерфейс. Выше обрезаны пресеты.

Вся статика (HTML/CSS) сжата и помещена в переменную String html внутри скетча.

Закончили знакомство давайте быстро

Логика общения браузер - ESP32:

Пользователь открывает IP-адрес в браузере.
ESP32 отправляет HTML+JS страницу.
JavaScript строит интерфейс с кнопками и слайдерами.
При клике/изменении JS отправляет fetch() запрос.
ESP32 получает запрос, обновляет переменные, сохраняет в EEPROM.
updateRGBEffect() перерисовывает ленту согласно текущему режиму.

Сохранение состояния:

При отключении питания все настройки остаются в памяти благодаря EEPROM. При включении ESP32 загружает последние установки и система стартует в том же режиме, цвете и яркости.

Интеграция с 6-pin хабом AR12-2012

Если у вас есть штатный хаб, подключение просто:

Питание RGB (Pin 5 хаба, +5V) остаётся от БП.
Data вход (Pin 4 хаба) подключается от ESP32 GPIO 5 через резистор.
GND объединяется (Pin 3 хаба = GND хаба = GND ESP32).

Хаб передаст сигнал по цепочке всем пяти вентиляторам.

Если хаба нет - подключаем напрямую к первому вентилятору, остальные получат сигнал через Pin 6 (DO) → Pin 4 (DI) цепочку.

Запуск проекта: Пошаговый гайд (от новичка до профи)

🎯 Шаг 0. Подготовка (5 минут)

Скачайте и установите Arduino IDE 2.x:

https://www.arduino.cc/en/software

Выберите версию для Windows/Linux/Mac. Установите как обычную программу.

Добавьте поддержку ESP32 (один раз навсегда):

Откройте Arduino IDE
File → Preferences
В поле "Additional Board Manager URLs" вставьте:

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package\_esp32\_index.json

Tools → Board → Boards Manager
Найдите "esp32" → Install (версия 2.0.14+)

✅ Готово! ESP32 теперь поддерживается официально.

📦 Шаг 1. Установка библиотек (3 минуты)

Встроенные (не нужно ставить):

- WebServer (уже в ESP32 core)
- WiFi (уже в ESP32 core) 
- EEPROM (уже в ESP32 core)

Устанавливаем вручную:

Sketch → Include Library → Manage Libraries
Найти и установить ПО ПОРЯДКУ (важно!):

Библиотека	Автор	Версия	Зачем
Adafruit NeoPixel	Adafruit	1.11.0	Управление WS2812
Adafruit GFX Library	Adafruit	1.11.9	Графика для OLED
Adafruit SSD1306	Adafruit	2.5.10	OLED дисплей

⚠️ Порядок важен: Сначала NeoPixel → потом GFX → потом SSD1306.

Проверка: После установки в Sketch → Include Library должны появиться все 3 библиотеки.

💻 Шаг 2. Настройка и загрузка кода (5 минут)

Скопируйте полный код из GitHub в Arduino IDE
Tools → Board → ESP32 Arduino → ESP32 Dev Module
Tools → Port → COMX (ESP32) (где X — ваш порт)
Настройте параметры платы:

Upload Speed:      921600
CPU Frequency:     240MHz (WiFi/BT)
Flash Frequency:   80MHz
Flash Mode:        QIO
Flash Size:        4MB (32Mb)
Partition Scheme:  Default 4MB with spiffs
Core Debug Level:  None
PSRAM:             Disabled

🔧 ОБЯЗАТЕЛЬНО замените WiFi:

const char* ssid = "ВАШ_WIFI";           // ← Имя вашей сети
const char* password = "ВАШ_ПАРОЛЬ";     // ← Пароль

Upload (кнопка → или Ctrl+U)

⏳ Процесс загрузки (первый раз ~2 минуты):

Connecting...._____....._____....._____
Writing at 0x00010000... (100 %)

🧪 Шаг 3. Первая проверка (Serial Monitor)

Tools → Serial Monitor (или Ctrl+Shift+M)
Baud rate: 115200
Должно появиться:

=== ESP32 RGB Controller with THEMES ===
Settings loaded from EEPROM
Initializing OLED... OK
Initializing RGB LEDs...
Connecting to WiFi... ........ OK!
WiFi connected!
IP: 192.168.1.105          ← ← ← ВАШ IP!
Web Server started!

🌐 Шаг 4. Тестирование веб-интерфейса

Откройте браузер → введите IP (с Serial Monitor)
```
http://192.168.1.105
```
✅ Что должно произойти:
- Красивый тёмный интерфейс с градиентом
- Сетка из 20 кнопок режимов
- 10 кнопок тем (Красный, Синий...)
- Слайдеры яркости/скорости
- Color picker + числовые поля RGB

Быстрый тест:

Клик "Rainbow" → Должна появиться радуга!
Слайдер яркость 50% → Станет тусклее
Тема "Голубой" → Изменится цвет

🚨 Типичные проблемы и решения

❌ Проблема	✅ Решение
"Failed to connect to ESP32"	1. Держите кнопку BOOT при загрузке2. USB кабель только для данных
WiFi не подключается	Проверьте SSID/пароль (2.4GHz сеть!)
IP не показывает	ESP32 в той же WiFi сети?
Вентиляторы не светятся	1. Проверьте +5V на Pin52. Резистор 330Ω на Data
"OLED not found"	SDA=21, SCL=22, VCC=3.3V
Веб не открывается	`http://` + IP (не https!)

🎉 Шаг 5. Финальная настройка

Сохраните IP на OLED (не потеряется при перезагрузке).

Тест EEPROM (память настроек):

Поставьте Rainbow + яркость 50%
Выключите ESP32
Включите → должно запуститься с теми же настройками!

API тест (для продвинутых):

curl -X POST "http://192.168.1.105/api/mode" -d "value=2"
curl -X POST "http://192.168.1.105/api/brightness" -d "value=128"

Результат

За ~$5 и вечер пайки я получил устройство, которое превосходит заводской контроллер за $20 по всем параметрам.

Сравнение:

Функция	Родной Хаб AR12	Мой ESP32 Controller
Управление	Кнопки на пульте (который вечно теряется)	Wi-Fi (Смартфон, ПК)
Режимы	~5-6 шт.	20 + кастомные
Настройка	Нет	Цвет, Скорость, Яркость
Интеграция	Нет	REST API (Home Assistant)
Надежность	Сгорел за год	ESP32 (Вечный, если не перегреть)

Возможные улучшения:

Добавить микрофон (MAX9814) для цветомузыки :)
Написать скрипт на Python для ПК, который будет слать температуру CPU на ESP32, чтобы подсветка меняла цвет от нагрева (Зеленый -> Красный).

Ссылки

CyberScoper/ESP32-ARGB-Fan-Controller: 🔥 ESP32 RGB контроллер для 6-pin ARGB вентиляторов (Aigo AR12). 20 эффектов, веб-интерфейс, OLED, EEPROM. Замена сгоревшему хабу AR12-2012 за $5!

P.S. Не выбрасывайте старое железо. Иногда его смерть — это начало интересного DIY-проекта.