Projekt matrycy LED RGB ESP32-S3 1 – podstawowa kropka

Projekt matrycy LED RGB ESP32-S3 1 – podstawowa kropka

Projekt 1 – Animacja ruchomej kropki i serca na ESP32-S3 RGB LED Matrix

W tym projekcie zaczynamy od najprostszej możliwej animacji na ESP32-S3 RGB LED Matrix: pojedynczej kropki poruszającej się po 8×8 wyświetlaczu RGB. Dodatkowo dodajemy małą animację serca, abyś mógł zamienić płytkę w mały dekoracyjny wyświetlacz po jej włączeniu. To świetny pierwszy krok do oswojenia się ze sterowaniem pojedynczymi pikselami, kolorami i szybkością animacji na matrycy.

Wszystkie sześć projektów z tej serii jest zaprezentowanych i wyjaśnionych w jednym filmie. Ten sam film jest osadzony na tej stronie, więc możesz obejrzeć pełne wyjaśnienie krok po kroku oraz pokaz na żywo animacji ruchomej kropki i serca. Kompletny kod dla tego projektu jest automatycznie ładowany poniżej artykułu, a moduł ESP32-S3 RGB LED Matrix możesz kupić w sklepach partnerskich wymienionych pod sekcją z kodem.

Jeśli dopiero zaczynasz pracę z tą płytką, ten projekt to idealny sposób, aby:

• Sprawdzić, czy Twoja płytka ESP32-S3 i połączenie USB działają.
• Potwierdzić, że matryca 8×8 RGB jest podłączona do właściwego pinu.
• Eksperymentować z podstawowym czasem animacji, kolorem i jasnością.

Przegląd modułu ESP32-S3 RGB LED Matrix

Płytka użyta w tym projekcie jest oparta na mikrokontrolerze ESP32-S3, połączonym z matrycą LED RGB 8×8 (64 indywidualnie adresowalne diody LED RGB), czujnikiem ruchu QMI8658C z tyłu oraz portem USB do zasilania i programowania.

Kluczowe cechy tego modułu:

• ESP32-S3 – dwurdzeniowy mikrokontroler z obsługą Wi-Fi i Bluetooth.
• Matryca LED RGB 8×8 (64 diody LED RGB) z przodu płytki, idealna do ikon, tekstu i małych gier.
• Akcelerometr / czujnik ruchu QMI8658C z tyłu płytki, dzięki czemu możesz wykrywać przechylenie, ruch i orientację do projektów interaktywnych.
• Port USB zarówno do programowania, jak i zasilania.
• Dostępne piny na krawędziach, dzięki czemu płytka może być nadal używana jak zwykły ESP32 do innych projektów IO.
• Przyciski boot i reset do wchodzenia w tryb programowania i restartowania szkicu.

W tym pierwszym projekcie używamy tylko części matrycy LED płytki, ale ten sam sprzęt jest wystarczająco wydajny, aby obsługiwać wyświetlanie tekstu, komunikaty sterowane przez sieć, gry sterowane ruchem i wiele więcej — co jest omówione w pozostałych projektach tej serii.

Projekty omówione w filmie (znaczniki czasu)

Wszystkie sześć projektów korzysta z tego samego filmu na YouTube. Przybliżone znaczniki czasu to:

• 00:00 – Wprowadzenie
• 02:01 – Instalacja płytek ESP32
• 03:32 – Instalacja bibliotek
• 05:32 – Projekt 1: Ruchoma kropka (i podstawowe ustawienia koloru / prędkości)
• 11:11 – Projekt 2: Przewijanie tekstu
• 12:59 – Projekt 3: Tekst HTTP
• 16:41 – Projekt 4: Kropka przechylana
• 18:55 – Projekt 5: Strzałka w górę
• 20:02 – Projekt 6: Gra w cel

Dla najlepszego zrozumienia zdecydowanie zalecamy oglądanie filmu podczas czytania tego artykułu. Film pokazuje zachowanie kropki i serca na matrycy na żywo oraz wszystkie kroki w Arduino IDE.

Instalacja płytek ESP32 w Arduino IDE

Przed wgraniem jakiegokolwiek kodu na ESP32-S3 musisz zainstalować pakiet obsługi płytek ESP32 w Arduino IDE. W filmie jest to pokazane w sekcji „instalacja płytek”.

Ogólne kroki:

1. Otwórz Arduino IDE i przejdź do Plik > Preferencje.
2. W polu „Dodatkowe adresy URL menedżera płytek” dodaj oficjalny adres URL płytek ESP32.
3. Otwórz Narzędzia > Płytka > Menedżer płytek…, wyszukaj ESP32 i zainstaluj pakiet dla płytek ESP32.
4. Po instalacji przejdź do Narzędzia > Płytka i wybierz właściwy wpis płytki dla swojego modułu ESP32-S3 RGB Matrix.
5. Podłącz płytkę przez USB i wybierz jej port szeregowy w Narzędzia > Port.

Jeśli właściwa płytka i port nie zostaną wybrane, Twój szkic nie zostanie wgrany, nawet jeśli kod jest poprawny.

Instalacja NeoMatrix i wymaganych bibliotek

Matryca LED wykorzystuje wewnętrznie sterownik Adafruit NeoPixel, a dla łatwiejszego rysowania 2D używamy biblioteki Adafruit NeoMatrix. Instalacja NeoMatrix automatycznie pobierze zależności.

NeoMatrix i zależności

Zainstaluj następujące biblioteki z Menedżera bibliotek:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

W Menedżerze bibliotek:

1. Otwórz Szkic > Dołącz bibliotekę > Zarządzaj bibliotekami….
2. Wyszukaj Adafruit NeoMatrix i kliknij Zainstaluj.
3. Pozwól IDE zainstalować wszystkie sugerowane zależności (Adafruit GFX i Adafruit NeoPixel).

Biblioteka czujnika ruchu QMI8658C (do późniejszych projektów)

Projekt 1 nie używa bezpośrednio akcelerometru, ale warto zainstalować bibliotekę czujnika ruchu już teraz, ponieważ będzie potrzebna w projektach 4, 5 i 6.

Z Menedżera bibliotek:

1. Wyszukaj bibliotekę QMI8658 według nazwiska autora.
2. Zainstaluj bibliotekę, aby pojawiła się w Plik > Przykłady do szybkiego testowania.

Projekt 1 – Ustawienia kodu (Ruchoma kropka i serce)

Pełny szkic uruchamiający Projekt 1 jest automatycznie ładowany poniżej tego artykułu na stronie internetowej. Tutaj skupiamy się tylko na kluczowych ustawieniach, które prawdopodobnie będziesz chciał zmienić: pin, liczba pikseli, jasność, kolor i prędkość animacji. W przypadku animacji serca pokazujemy również, jak kontrolować kolor oraz czy serce jest wypełnione, czy tylko konturowe.

Pin LED i liczba pikseli

W tym module matryca RGB 8×8 jest podłączona do GPIO 14 układu ESP32-S3. Całkowita liczba pikseli wynosi 64 (8 × 8). W swoim kodzie powinieneś zobaczyć coś podobnego do:

 
// Pin podłączony do matrycy RGB 8×8 
const int MATRIX_PIN = 14;
 // musi być 14 w tym module 
// Całkowita liczba diod LED (matryca 8 × 8) 
const int NUMPIXELS = 64; // zmień tylko, jeśli używasz innego rozmiaru matrycy 

Jeśli przypadkowo pozostawisz NUMPIXELS na wartości 16 (z oryginalnego przykładu NeoPixel), użyta zostanie tylko ćwierć matrycy, a animacja nie wypełni całego ekranu 8×8.

Kolejność kolorów i typ diod LED

Różne taśmy i matryce LED mogą używać różnych kolejności kolorów (na przykład GRB zamiast RGB). Matryca na tej płytce oczekuje kolejności RGB. W konstruktorze NeoPixel lub NeoMatrix upewnij się, że typ koloru jest ustawiony poprawnie:

 // Przykład dla obiektu w stylu NeoPixel: 
Adafruit_NeoPixel pixels( NUMPIXELS, MATRIX_PIN, NEO_RGB + NEO_KHZ800 // upewnij się, że to odpowiada kolejności kolorów matrycy ); 

Jeśli zauważysz, że na wyświetlaczu czerwony i zielony są zamienione, sprawdź najpierw tę linię i popraw kolejność kolorów.

Prędkość animacji (opóźnienie między krokami)

Prędkość poruszającej się kropki jest zwykle kontrolowana przez prostą wartość opóźnienia w milisekundach. Mniejsze opóźnienie oznacza szybszy ruch; większe opóźnienie oznacza wolniejszy ruch. Poszukaj zmiennej podobnej do:

 
// Opóźnienie między ruchami kropki (w milisekundach)
 int dotDelayMs = 50; // 50 ms jest dość szybkie 

Typowe regulacje:

• Ustaw dotDelayMs = 20; dla bardzo szybko poruszającej się kropki.
• Ustaw dotDelayMs = 100; lub więcej dla wolnej, spokojnej animacji.

W funkcji loop() ta wartość jest zwykle przekazywana do delay(dotDelayMs); po każdej aktualizacji klatki.

Kolor i jasność kropki

Kolor RGB poruszającej się kropki jest kontrolowany przez trzy wartości w zakresie 0–255 (czerwony, zielony, niebieski). Na przykład:

 
// Kolor kropki (R, G, B) od 0–255 uint8_t dotRed = 255; // pełna czerwień 
uint8_t dotGreen = 0; // brak zieleni 
uint8_t dotBlue = 0; // brak niebieskiego 

To da jasnoczerwoną kropkę. Kilka przydatnych kombinacji:

• Czysta czerwień: (255, 0, 0)
• Czysta zieleń: (0, 255, 0)
• Czysty niebieski: (0, 0, 255)
• Żółty: (255, 255, 0)
• Biały: (255, 255, 255)

Ogólna jasność jest często kontrolowana przez osobną funkcję jasności:

 
// Ogólna jasność matrycy (0–255) 
uint8_t matrixBrightness = 40; // trzymaj nisko, aby uniknąć zbytniego odblasku // W setup(): matrix.setBrightness(matrixBrightness); 

Wartość w okolicach 30–60 jest zwykle wygodna do użytku w pomieszczeniach.

Ustawienia kształtu serca

Oprócz poruszającej się kropki możesz wyświetlić małe serce na matrycy, gdy płytka się uruchomi. Przykładowy kod z artykułu (załadowany poniżej) zawiera ustawienia podobne do:

 
// Kolor serca (wypełnione serce) 
uint8_t heartRed = 255; 
uint8_t heartGreen = 0; 
uint8_t heartBlue = 0; 
// Opcjonalnie: tryby tęczowy lub konturowy 
bool showOutlinedHeart = false; 
// true = tylko kontur 
bool useRainbowHeart = false; 
// true = cykliczna zmiana kolorów w czasie 

Typowe zastosowanie:

• Ustaw showOutlinedHeart = false; i useRainbowHeart = false; dla wypełnionego czerwonego serca.
• Ustaw showOutlinedHeart = true;, aby pokazać tylko kontur serca.
• Ustaw useRainbowHeart = true;, aby ciągle zmieniać kolor serca w efekcie tęczy.

Serce jest rysowane za pomocą funkcji współrzędnych NeoMatrix w kodzie poniżej artykułu. Wystarczy zmienić powyższe zmienne, aby dostosować jego wygląd.

Podsumowanie

Projekt 1 daje prosty, ale potężny punkt startowy z matrycą LED RGB ESP32-S3: uczysz się, jak adresować wszystkie 64 piksele, kontrolować kolor, regulować jasność i ustawiać prędkość animacji. Widzisz również, jak łatwo przełączyć się z poruszającej się kropki na statyczne lub animowane serce na tym samym sprzęcie.

Koniecznie obejrzyj pełne wideo osadzone na tej stronie, aby zobaczyć kompletną, krok po kroku demonstrację animacji poruszającej się kropki i serca, wraz z pozostałymi pięcioma projektami. Pełny kod źródłowy jest dostępny poniżej tego artykułu, a możesz wesprzeć przyszłe projekty, kupując moduł przez linki partnerskie wymienione pod sekcją z kodem.

Obrazy

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

/* 
  Project 1: the Dot – ESP32-S3 RGB LED Matrix (Waveshare)

  dialysis a dot on scree and moves it
  
  ▶️ Video Tutorial:
  https://youtu.be/JKLuYrRcLMI

  📚⬇️ Resources & Code Page:
  https://robojax.com/RJT829

  QMI8658_RGB_2
*/

#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
 #include <avr/power.h> // Required for 16 MHz Adafruit Trinket
#endif

// Which pin on the Arduino is connected to the NeoPixels?
#define PIN        14 // On Trinket or Gemma, suggest changing this to 1

// How many NeoPixels are attached to the Arduino?
#define NUMPIXELS 64 // Popular NeoPixel ring size

// When setting up the NeoPixel library, we tell it how many pixels,
// and which pin to use to send signals. Note that for older NeoPixel
// strips you might need to change the third parameter -- see the
// strandtest example for more information on possible values.
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_RGB + NEO_KHZ800);

#define DELAYVAL 50 // Time (in milliseconds) to pause between pixels

void setup() {
  // These lines are specifically to support the Adafruit Trinket 5V 16 MHz.
  // Any other board, you can remove this part (but no harm leaving it):
#if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
  clock_prescale_set(clock_div_1);
#endif
  // END of Trinket-specific code.

  pixels.begin(); // INITIALIZE NeoPixel strip object (REQUIRED)
}

void loop() {
  pixels.clear(); // Set all pixel colors to 'off'

  // The first NeoPixel in a strand is #0, second is 1, all the way up
  // to the count of pixels minus one.
  for(int i=0; i<NUMPIXELS; i++) { // For each pixel...

    // pixels.Color() takes RGB values, from 0,0,0 up to 255,255,255
    // Here we're using a moderately bright green color:
    pixels.setPixelColor(i, pixels.Color(255, 255, 0));

    pixels.show();   // Send the updated pixel colors to the hardware.

    delay(DELAYVAL); // Pause before next pass through loop
    pixels.clear();
  }



}