Смотрите на YouTube

Проект матрицы RGB LED ESP32-S3 1 - Основной штрих

Проект 1 - Анимация движущейся точки и сердца на RGB LED матрице ESP32-S3

В этом проекте мы начинаем с самой простой анимации на RGB-матрице LED ESP32-S3: одна точка, движущаяся по 8×8 RGB-дисплею. Кроме того, мы добавим небольшую анимацию сердца, чтобы вы могли превратить плату в крошечный декоративный дисплей, когда она включена. Это отличный первый шаг к тому, чтобы научиться управлять отдельными пикселями, цветами и скоростью анимации на матрице.

Все шесть проектов этой серии демонстрируются и объясняются в одном видео. То же самое видео встроено на этой странице, так что вы можете посмотреть полное пошаговое объяснение и живую демонстрацию анимаций движущейся точки и сердца. Полный код для этого проекта автоматически загружается под статьей, и вы можете приобрести модуль RGB LED Matrix ESP32-S3 в партнерских магазинах, указанных в разделе кода.

Если вы только начинаете с этой доски, этот проект - отличный способ:

• Проверьте, что ваша плата ESP32-S3 и USB-соединение работают.
• Подтвердите, что RGB-матрица 8×8 подключена к правильному контакту.
• Экспериментируйте с базовым временем анимации, цветом и яркостью.

Обзор модуля RGB LED матрицы ESP32-S3

Плата, использованная в этом проекте, основана на микроконтроллере ESP32-S3, в сочетании с матрицей RGB LED 8×8 (64 индивидуально адресуемых RGB светодиода), сенсором движения QMI8658C на задней стороне и USB-портом для питания и программирования.:contentReference[oaicite:0]{index=0}

Ключевые особенности этого модуля:

• ESP32-S3двухъядерный микроконтроллер с поддержкой Wi-Fi и Bluetooth.
• 8×8 RGB светодиодная матрица(64 RGB-светодиода) на передней панели платы, идеально подходит для значков, текста и небольших игр.
• QMI8658C акселерометр / датчик движенияна задней стороне, так что вы можете определять наклон, движение и ориентацию для интерактивных проектов.
• USB-портдля программирования и мощности.
• Доступные шпилькипо краям, так что плата все равно может использоваться как обычный ESP32 для других проектов с интерфейсом ввода-вывода.
• Кнопки загрузки и сбросадля входа в режим программирования и перезапуска вашего скетча.

В этом первом проекте мы используем только часть матрицы LED на плате, но то же аппаратное обеспечение достаточно мощное, чтобы запускать текстовые дисплеи, сообщения с веб-контролем, игры с управлением движением и многое другое - что рассматривается в других проектах этой серии.

Проекты, охваченные в видео (временные метки)

Все шесть проектов используют одно и то же видео на YouTube. Приблизительные временные метки:

• 00:00- Введение
• 02:01- Установка плат ESP32
• 03:32- Установка библиотек
• 05:32- Проект 1: Движущаяся точка (и основные настройки цвета / скорости)
• 11:11- Проект 2: Прокрутка текста
• 12:59- Проект 3: HTTP Текст
• 16:41- Проект 4: Tilt Dot
• 18:55- Проект 5: Стрелка вверх
• 20:02- Проект 6: Игра с мишенью

Для лучшего понимания настоятельно рекомендуется смотреть видео, следуя за этой статьей. В видео показано поведение точки и сердца на матрице в реальном времени, а также все шаги в среде Arduino IDE.

Установка плат ESP32 в Arduino IDE

Перед загрузкой любого кода на ESP32-S3 необходимо установить пакет поддержки плат ESP32 в Arduino IDE. В видео это продемонстрировано в разделе "установка плат".

Общие шаги:

1. Откройте Arduino IDE и перейдите кFile > Preferences.
2. В поле "Дополнительные URL-адреса менеджера плат" добавьте официальный URL-адрес плат ESP32.
3. ОткрытьTools > Board > Boards Manager…, ищитеESP32и установите пакет для плат ESP32.
4. После установки перейдите кTools > Boardи выберите правильный пункт платы для вашего модуля RGB Matrix ESP32-S3.
5. Подключите плату через USB и выберите ее последовательный порт подTools > Port.

Если не выбраны правильная плата и порт, ваш скетч не загрузится, даже если ваш код правильный.

Установка NeoMatrix и необходимых библиотек

Светодиодная матрица использует драйвер Adafruit NeoPixel и для упрощенного 2D-рисования мы используем библиотеку Adafruit NeoMatrix. Установка NeoMatrix автоматически подтянет зависимости.

НеоМатрикс и зависимости

Установите следующее через Диспетчер библиотек:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

В Менеджере библиотек:

1. ОткрытьSketch > Include Library > Manage Libraries….
2. Поиск дляAdafruit NeoMatrixи нажмитеУстановить.
3. Разрешите IDE установить все предлагаемые зависимости (Adafruit GFX и Adafruit NeoPixel).

Библиотека датчика движения QMI8658C (для последующих проектов)

Проект 1 не использует акселерометр напрямую, но сейчас будет хорошей идеей установить библиотеку датчиков движения, так как она понадобится для проектов 4, 5 и 6.

От менеджера библиотеки:

1. Ищите библиотеку QMI8658 по имени автора.
2. Установите библиотеку, чтобы она появилась подFile > Examplesдля быстрого тестирования.

Проект 1 - Настройки кода (Движущаяся точка и сердце)

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

Светодиодный контакт и количество пикселей

На этом модуле RGB-матрица 8×8 подключена к GPIO 14 ESP32-S3. Общее количество пикселей составляет 64 (8 × 8). В вашем коде вы должны увидеть что-то подобное:

 
// Pin connected to the 8×8 RGB matrix 
const int MATRIX_PIN = 14;
 // must be 14 on this module 
// Total number of LEDs (8 × 8 matrix) 
const int NUMPIXELS = 64; // change only if you use a different matrix size 

Если вы случайно уйдётеNUMPIXELSпри 16 (из оригинального примера NeoPixel) будет использоваться только четверть матрицы, и анимация не заполнит весь экран 8×8.

Цветовой порядок и тип светодиода

Разные светодиодные ленты и матрицы могут использовать разные порядки цветов (например, GRB вместо RGB). Матрица на этой плате ожидает порядок RGB. В конструкторе NeoPixel или NeoMatrix убедитесь, что тип цвета установлен правильно:

 // Example for a NeoPixel-style object: 
Adafruit_NeoPixel pixels( NUMPIXELS, MATRIX_PIN, NEO_RGB + NEO_KHZ800 // make sure this matches the matrix color order ); 

Если вы заметили, что красный и зеленый цвета перепутаны на дисплее, сначала проверьте эту строку и исправьте порядок цветов.

Скорость анимации (Задержка между шагами)

Скорость движущейся точки обычно контролируется простым значением задержки в миллисекундах. Меньшая задержка означает более быстрое движение; большая задержка означает более медленное движение. Ищите переменную, похожую на:

 
// Delay between dot moves (in milliseconds)
 int dotDelayMs = 50; // 50 ms is fairly fast 

Типичные корректировки:

• УстановитьdotDelayMs = 20;для очень быстро движущейся точки.
• УстановитьdotDelayMs = 100;или выше для медленной, спокойной анимации.

В loop()функция, это значение обычно передается вdelay(dotDelayMs);после обновления каждого кадра.

Цвет и яркость точки

Цвет RGB движущейся точки контролируется тремя значениями в диапазоне 0-255 (красный, зеленый, синий). Например:

 
// Dot color (R, G, B) from 0–255 uint8_t dotRed = 255; // full red 
uint8_t dotGreen = 0; // no green 
uint8_t dotBlue = 0; // no blue 

Это создаст ярко-красную точку. Некоторые полезные комбинации:

• Чистый красный:(255, 0, 0)
• Чистый зеленый:(0, 255, 0)
• Чистый синий:(0, 0, 255)
• Желтый:(255, 255, 0)
• Белый:(255, 255, 255)

Общая яркость часто регулируется отдельной функцией яркости:

 
// Overall matrix brightness (0–255) 
uint8_t matrixBrightness = 40; // keep it low to avoid too much glare // In setup(): matrix.setBrightness(matrixBrightness); 

Значение около30–60обычно удобно для использования в помещении.

Настройки в форме сердца

В дополнение к движущейся точке, вы можете отобразить маленькое сердце на матрице, когда плата впервые включается. Пример кода статьи (представленный ниже) включает настройки, похожие на:

 
// Heart color (solid heart) 
uint8_t heartRed = 255; 
uint8_t heartGreen = 0; 
uint8_t heartBlue = 0; 
// Optional: rainbow or outline modes 
bool showOutlinedHeart = false; 
// true = outline only 
bool useRainbowHeart = false; 
// true = cycle colors over time 

Типичное использование:

• НаборshowOutlinedHeart = false;иuseRainbowHeart = false;для сплошного красного сердца.
• УстановитьshowOutlinedHeart = true;показать только контур сердца.
• НаборuseRainbowHeart = true;непрерывно сменять цвет сердца через радугу эффект.

Сердце изображено с помощью функций координат NeoMatrix в коде ниже статьи. Вам нужно только изменить переменные выше, чтобы настроить его внешний вид.

Резюме

Проект 1 предоставляет простой, но мощный старт с матрицей RGB LED ESP32-S3: вы научитесь управлять всеми 64 пикселями, контролировать цвет, регулировать яркость и устанавливать скорость анимации. Вы также увидите, как легко переключаться от движущейся точки к статичному или анимированному сердцу на одном и том же оборудовании.

Обязательно посмотрите полное видео, встроенное на этой странице, для полного пошагового демонстрации анимаций движущейся точки и сердца, а также остальных пяти проектов. Полный исходный код доступен ниже этой статьи, и вы можете поддержать будущие проекты, купив модуль через партнерские ссылки, указанные в разделе кода.

Изображения

ESP32 S3 Matrix pin out

ESP32 S3 Matrix displaying green heart

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3 RGB Matrix- Mobile Phone Text

ESP32-S3-Mtrix - Alway Up

ESP32 S3 Matrix pin out

ESP32 S3 Matrix displaying green heart

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3 RGB Matrix- Mobile Phone Text

ESP32-S3-Mtrix - Alway Up

/*
 * Проект 1: точка - RGB LED матрица ESP32-S3 (Waveshare)
 * 
 * диализирует точку на экране и перемещает её
 * 
 * ▶️ Видеоурок:
 * https://youtu.be/JKLuYrRcLMI
 * 
 * 📚⬇️ Ресурсы и страница с кодом:
 * https://robojax.com/RJT829
 * 
 * QMI8658_RGB_2
 */
#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
 #include <avr/power.h> // Необходимый для 16 МГц Adafruit Trinket
#endif

 // Какой пин на Arduino подключен к NeoPixels?
#define PIN        14 // На Trinket или Gemma предложите изменить это на 1.

 // Сколько NeoPixels подключено к Arduino?
#define NUMPIXELS 64 // Популярный размер кольца NeoPixel

 // При настройке библиотеки NeoPixel мы указываем, сколько пикселей,
 // и какой пин использовать для отправки сигналов. Обратите внимание, что для более старых NeoPixel
 // полоски, возможно, вам нужно изменить третий параметр -- смотрите
 // пример strandtest для получения дополнительной информации о возможных значениях.
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_RGB + NEO_KHZ800);

#define DELAYVAL 50 // Время (в миллисекундах) для паузы между пикселями

void setup() {
 // Эти линии специально предназначены для поддержки Adafruit Trinket 5V 16 МГц.
 // Любую другую плату вы можете удалить эту часть (но нет вреда, если оставить её):
#if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
  clock_prescale_set(clock_div_1);
#endif
 // КОНЕЦ кода, специфичного для Trinket.

  pixels.begin(); // ИНИЦИАЛИЗИРОВАТЬ объект ленты NeoPixel (ОБЯЗАТЕЛЬНО)
}

void loop() {
  pixels.clear(); // Установите все цвета пикселей на 'выключено'

 // Первый NeoPixel в цепочке - это #0, второй - 1, и так далее.
 // к количеству пикселей минус один.
  for(int i=0; i<NUMPIXELS; i++) { // Для каждого пикселя...

 // pixels.Color() принимает значения RGB, от 0,0,0 до 255,255,255
 // Здесь мы используем умеренно яркий зеленый цвет:
    pixels.setPixelColor(i, pixels.Color(255, 255, 0));

    pixels.show(); // Отправьте обновленные цвета пикселей на оборудование.

    delay(DELAYVAL); // Перед следующим проходом через цикл сделайте паузу.
    pixels.clear();
  }



}