Общие сведения:

В этом уроке мы научимся управлять яркостью светодиодной ленты со смартфона при помощи Piranha ESP32

После загрузки скетча в Piranha ESP32 достаточно будет зайти по ссылке http://rgb.local с браузера смартфона или любого другого устройства в локальной сети. Страница управления лентой будет выглядеть следующим образом:



Для компиляции скетча используются два файла: index.h и rgbWebsocket.ino. Текст файла index.h - это веб страница, на которой запускается протокол WebSocket при подключении нового клиента. При помощи этого протокола браузер клиента и скетч Piranha ESP32 обмениваются данными. Обмен происходит в обе стороны, при подключении клиента Piranha ESP32 отправляет текущие данные и следит за их обновлением.

В данном примере будет использоваться библиотека ESPAsyncWebServer. Её необходимо скачать и установить. О том как это сделать можно прочитать в этой статье

Видео:

Нам понадобится:

• Piranha ESP32
• Модуль силовых ключей: N-канал если светодиодная лента с общим плюсом, или P-канал - если с общим минусом.
• Светодиодная RGB лента
• Источник питания 12V (сила тока в зависимости от мощности ленты)
• Понижающий преобразователь
• Коннектор power jack Мама с клемником
• Провода

Подключение:

Скетч проекта:

Перед компиляцией создайте файл index.h в папке скетча и скопируйте в него содержимое из раздела "Файл index.h" или скачайте все файлы проекта

// Подключаем библиотеки
#include 
#include 
#include 
#include 
#include "index.h"

// Создаём объект силовых ключей Flash-I2C с установленным адресом
iarduino_I2C_Relay fets(0x09);

// Создаём глобальные переменные яркости цветов светодиодной ленты
uint8_t currR = 0;
uint8_t currG = 0;
uint8_t currB = 0;

// Настройки WiFi - необходимо ввести данные Вашего WiFi
const char* ssid = "название точки доступа";
const char* password = "пароль точки доступа";

// Локальный адрес сервера
const char* host = "rgb";

// Создаём объекты сервера и WebSocket
AsyncWebServer server(80);
AsyncWebSocket ws("/");

// Callback-функция при получении события WebSocket
void onWsEvent(
        AsyncWebSocket * server,
        AsyncWebSocketClient * client,
        AwsEventType type,
        void * arg,
        uint8_t *data,
        size_t len
        )
{

    // Если событие - подключение клиента
    if(type == WS_EVT_CONNECT){

        Serial.println("Подключился новый клиент");

        // Формируем строку для отправки
        String resp = (String)"{\"R\":" + currR + ","
                + "\"G\":" + currG + ","
                + "\"B\":" + currB + "}";

        delay(500);

        // Отправляем строку
        client->text(resp);


    }
    // Если событие - отключение клиента
    else if(type == WS_EVT_DISCONNECT){
        Serial.println("Клиент отключился");
        Serial.println("-----------------------");

    }
    // Если событие - данные
    else if(type == WS_EVT_DATA){

        // Преобразуем байты в объект строки
        String received = String((char*) data);

        // Если строка начинается с интересующих нас символов
        if (received.startsWith("R:")) {
            // записываем инндекс следующей запятой
            int next_index = received.indexOf(',');
            // записываем часть строки, отвечающий за красный цвет в строку R
            String R = received.substring(received.indexOf('R')+2, next_index);
            // Преобразуем и записываем данные
            currR = (uint8_t)R.toInt();

            // Записываем индекс следующей запятой
            next_index = received.indexOf(',', received.indexOf('G'));

            // записываем часть строки, отвечающий за зелёный цвет в строку G
            String G = received.substring(received.indexOf('G')+2, next_index);
            // Преобразуем и записываем данные
            currG = (uint8_t)G.toInt();

            // Записываем индекс точки с запятой
            next_index = received.indexOf(';');

            // записываем часть строки, отвечающий за синий цвет в строку B
            String B = received.substring(received.indexOf('B')+2, next_index);
            // Преобразуем и записываем данные
            currB = (uint8_t)B.toInt();
        }
    }
}

void setup()
{
    // Инициируем работу с силовыми ключами
    fets.begin();
    // Выключаем все каналы
    fets.digitalWrite(ALL_CHANNEL, LOW);

    // Инициируем UART
    Serial.begin(115200);

    // Инициируем WiFi
    WiFi.begin(ssid, password);

    Serial.print("Подключаемся к WiFi..");
    while (WiFi.status() != WL_CONNECTED) {
        delay(100);
        Serial.print('.');
    }
    Serial.println();

    // Выводим текущий IP адрес
    Serial.println(WiFi.localIP());

    // Инициируем Multicast DNS
    MDNS.begin(host);

    // Указываем callback функцию при получении события WebSocket
    ws.onEvent(onWsEvent);
    server.addHandler(&ws);

    // Указываем серверу действие при подключении к корневому каталогу
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
            request->send(200, "text/html", String(main_page));
            });

    // Инициируем сервер
    server.begin();
}

void loop()
{
    // Приводим значения глобальных переменных
    uint16_t red = map(currR, 0, 100, 0, 4095);
    uint16_t green = map(currG, 0, 100, 0, 4095);
    uint16_t blue = map(currB, 0, 100, 0, 4095);
    // Выводим ШИМ на каналы модуля
    fets.analogWrite(1, blue);
    fets.analogWrite(2, red);
    fets.analogWrite(3, green);

    // Даём процессору переключится на другие задачи
    delay(2);
}

Файл index.h:

const char main_page[] PROGMEM = R"=====(


    
        
        
        
        

        

        
    

    
        

            

                
RGB CONTROL
                


                    

                        

                            
RED
                            

                            

                                
                            
                        
                    

                    

                        

                            
GREEN
                            

                            

                                
                            
                        
                    

                    

                        

                            
BLUE
                            

                            

                                
                            
                        
                    

                
            
        

    
   

)=====";

Ссылки

• Piranha ESP32
• Wiki - Установка ESP32 в Arduino IDE (руководство для ОС Windows)