Code de recherche

Projet de matrice LED RGB ESP32-S3 3 - Texte provenant du téléphone mobile

Video thumbnail for ESP32-S3 RGB LED Matrix Projects (Tilt Game, Text, Arrow, WiFi Demo)
Regarder sur YouTube

Projet de matrice LED RGB ESP32-S3 3 - Texte provenant du téléphone mobile

Projet 3 - Contrôle de texte de votre téléphone (texte HTTP)

Dans ce projet, la matrice LED RGB ESP32-S3 héberge une petite page web pour que vous puissiez changer le texte défilant, la couleur, la direction et la vitesse directement depuis votre téléphone ou votre ordinateur. Vous n'avez pas besoin d'une application séparée - juste d'un navigateur web. Cela fait de ce module un petit affichage de texte Wi-Fi que vous pouvez mettre à jour en temps réel.

Tous les six projets de cette série sont expliqués et démontrés dans une vidéo YouTube. La même vidéo est intégrée sur cette page, vous pouvez donc voir exactement à quoi ressemble l'interface web et comment le texte se met à jour instantanément sur la matrice. Le code source complet de ce projet est automatiquement chargé en dessous de l'article, et vous pouvez acheter le module matriciel LED RGB ESP32-S3 dans des magasins affiliés listés sous la section code.

Dans cet article, nous nous concentrons sur le fonctionnement de la logique réseau (Wi-Fi domestique vs point d'accès) et sur les paramètres que vous pouvez modifier dans le code pour personnaliser le comportement.

Aperçu du module de matrice LED RGB ESP32-S3

Le matériel est le même que pour tous les autres projets de cette série : une carte microcontrôleur ESP32-S3 avec une matrice LED RGB 8×8 intégrée et un capteur de mouvement QMI8658C à l'arrière. Le port USB-C est utilisé pour l'alimentation et la programmation, et les broches autour des bords sont toujours disponibles pour d'autres E/S.:contentReference[oaicite:0]{index=0}

  • ESP32-S3- Microcontrôleur compatible Wi-Fi et Bluetooth.
  • matrice RGB 8×8- 64 LED RGB adressables pour le texte et les graphiques.
  • Accéléromètre QMI8658C- utilisé dans les projets de tilt et de jeu.
  • port USBalimente la carte et téléverse des croquis depuis l'Arduino IDE.
  • Broches exposées- permettre des capteurs ou des actionneurs supplémentaires si nécessaire.
  • Boutons de démarrage/réinitialisation- pour le téléchargement du firmware et le redémarrage.

Pour le Projet 3, la caractéristique la plus importante est le Wi-Fi de l'ESP32, qui permet à la carte d'agir comme un petit serveur web pour la page de contrôle du texte.:contentReference[oaicite:1]{index=1}

Projets couverts dans la vidéo (horodatages)

La vidéo unique de cette série couvre les six projets. Pour référence rapide :

  • 00:00- Introduction
  • 02:01- Installation des cartes ESP32
  • 03:32- Installation des bibliothèques
  • 05:32- Projet 1 : Point mobile
  • 11:11- Projet 2 : Défilement de texte
  • 12:59-Projet 3 : Texte HTTP (ce projet)
  • 16:41- Projet 4 : Tilt Dot
  • 18:55- Projet 5 : Flèche haut
  • 20:02- Projet 6 : Jeu de cible

Vous êtes encouragé à regarder la section HTTP Texte dans la vidéo tout en travaillant avec cet article. La vidéo montre comment la page web est générée par l'ESP32 et comment le changement de texte, de couleur et de vitesse est immédiatement reflété sur la matrice LED.:contentReference[oaicite:2]{index=2}

Installation des cartes ESP32 dans l'IDE Arduino

Si vous avez déjà terminé les Projets 1 ou 2, la configuration de la carte est faite et vous pouvez sauter cette section. Sinon, suivez ces étapes dans l'IDE Arduino :

  1. OuvrirFile > Preferenceset ajoutez l'URL des cartes ESP32 dans "URLs de gestionnaire de cartes supplémentaires".
  2. Aller àTools > Board > Boards Manager…, recherchez pourESP32, et installez le package officiel ESP32.
  3. Sélectionnez la bonne carte matricielle RGB ESP32-S3 parmiTools > Board.
  4. Connectez le module via USB et choisissez le bon port série sousTools > Port.

Sans le bon support de carte ESP32 et le bon port, le croquis du serveur web ne se téléchargera pas.

Installation de NeoMatrix et des bibliothèques requises

Ce projet utilise les mêmes bibliothèques que le projet de défilement de texte précédent :

  • Adafruit NeoMatrix
  • Adafruit NeoPixel
  • Adafruit GFX Library

Installer via le Gestionnaire de bibliothèques :

  1. OuvertSketch > Include Library > Manage Libraries….
  2. Rechercher pourAdafruit NeoMatrixet cliquezInstaller.
  3. Acceptez l'installation des dépendances (Adafruit GFXetAdafruit NeoPixel).

Une fois installé, vous devriez voir les exemples de croquis NeoMatrix et NeoPixel sousFile > Examples.

Deux modes Wi-Fi dans le projet 3

Le concept le plus important dans ce projet est que l'ESP32 peut fonctionner dansdeux modes différents:

  1. Mode station (STA)- l'ESP32 se connecte à votre réseau Wi-Fi domestique existant.
  2. Mode point d'accès (AP)l'ESP32 crée son propre réseau Wi-Fi si le Wi-Fi domestique n'est pas disponible.

Les deux modes utilisent la même interface web : une page HTML servie par l'ESP32 lui-même, où vous pouvez changer le texte, la couleur, la direction de défilement et la vitesse.:contentReference[oaicite:3]{index=3}

Mode 1 - Se connecter au Wi-Fi domestique (Mode Station)

En mode Station, l'ESP32 rejoint votre réseau Wi-Fi domestique ou de bureau. C'est le mode préféré chaque fois que votre routeur est disponible parce que :

  • Votre téléphone et votre ordinateur sont déjà connectés au même réseau Wi-Fi.
  • Vous pouvez indiquer l'adresse IP de l'ESP32 dans votre navigateur et contrôler le texte depuis n'importe quel appareil sur ce réseau.

Dans la section des paramètres du croquis, vous fournissez votre SSID Wi-Fi et votre mot de passe :


// Home Wi-Fi credentials (Station mode)
const char* WIFI_SSID = "YourHomeWiFi";
const char* WIFI_PASS = "YourHomePassword";

Après le démarrage de la carte, elle essaie de se connecter àWIFI_SSIDSi le processus réussit, le code affiche l'adresse IP assignée sur le Moniteur Série, par exemple :


Connected to WiFi
IP address: 192.168.1.16

Pour contrôler le texte :

  1. Assurez-vous que votre téléphone ou votre PC est connecté au même réseau Wi-Fi (par exemple,YourHomeWiFi).
  2. Ouvrez un navigateur et saisissez l'adresse IP imprimée, telle quehttp://192.168.1.16/. :contentReference[oaicite:4]{index=4}
  3. La page de contrôle apparaîtra, vous permettant de taper du texte, de choisir une couleur, de sélectionner une direction et d'ajuster la vitesse de défilement.

Mode 2 - Point d'accès autonome (mode AP)

Si l'ESP32 ne peut pas se connecter à votre Wi-Fi domestique (mauvais mot de passe, réseau non disponible ou si vous utilisez le module à l'extérieur), le programme passe automatiquement en mode Point d'Accès. En mode AP, l'ESP32 devient lui-même un point d'accès Wi-Fi avec son propre nom de réseau et mot de passe.

Dans ce projet, les paramètres AP sont fixés comme suit :


// Access Point (AP) credentials (fallback mode)
const char* AP_SSID = "ESP32";
const char* AP_PASS = "password";

Lorsque le mode Station échoue, le module passe en mode AP et commence à diffuser un réseau Wi-Fi appeléESP32. Pour contrôler la matrice :

  1. Sur votre téléphone ou votre ordinateur, ouvrez les paramètres Wi-Fi et connectez-vous au réseau.ESP32.
  2. Entrez le mot de passemot de passe(tel que défini dans le code).
  3. Une fois connecté, ouvrez un navigateur et allez àhttp://192.168.4.1/(l'adresse IP par défaut pour le mode AP de l'ESP32).
  4. La même page de contrôle apparaît, vous permettant de changer le texte, la couleur, la vitesse et la direction.

Ce comportement de secours rend le projet utile partout : à la maison, dans le laboratoire ou dans un environnement de démonstration où aucun routeur n'est disponible.

Projet 3 - Paramètres principaux dans le code

Le sketch complet de texte HTTP est chargé en dessous de cet article par le site web. Ici, nous ne documentons que les options de configuration les plus importantes que vous êtes susceptible de modifier.

Paramètres Wi-Fi et Point d'accès

En haut du croquis, vous trouverez la section de configuration du Wi-Fi. Ne changez que les identifiants de la Station (Wi-Fi à domicile) ; les paramètres AP sont généralement conservés par défaut :


// ---------- Wi-Fi SETTINGS ----------

// Home Wi-Fi (Station mode)
const char* WIFI_SSID = "YourHomeWiFi";      // put your router SSID here
const char* WIFI_PASS = "YourHomePassword";  // put your router password here

// Fallback Access Point (AP mode)
const char* AP_SSID = "ESP32";               // fixed AP name
const char* AP_PASS = "password";            // fixed AP password

Comportement :

  • SiWIFI_SSIDetWIFI_PASSsont correctes et le réseau est disponible → l'ESP32 se connecte en tant qu'appareil Wi-Fi normal (mode Station).
  • Si la connexion échoue après un délai d'attente → l'ESP32 démarre son propre AP en utilisantAP_SSIDetAP_PASS.

Matrice, épingle, taille et luminosité

Ces paramètres sont les mêmes que ceux des projets précédents :


// Matrix configuration
const int MATRIX_PIN    = 14;   // RGB matrix data pin
const int MATRIX_WIDTH  = 8;
const int MATRIX_HEIGHT = 8;

// Overall display brightness (0–255)
uint8_t matrixBrightness = 40;  // adjust for your environment

GarderMATRIX_PINà14pour ce tableau. Vous pouvez augmentermatrixBrightnesssi vous avez besoin de plus de lumière, mais des valeurs plus faibles sont plus confortables pour la vision de près.

Texte par défaut et paramètres de défilement

Lorsque le tableau démarre, il affiche un message initial jusqu'à ce que vous ouvriez la page web et que vous en tapiez un nouveau. Vous pouvez changer le texte par défaut dans la configuration :


// Default message shown at startup
String currentText = "Robojax";   // overwrite from web UI later

Le reste du comportement de défilement est contrôlé par un ensemble de variables qui sont mises à jour par l'interface web :


// Scroll delay in milliseconds (lower = faster)
int scrollDelayMs = 50;

// Scroll direction: 0=left, 1=right, 2=up, 3=down
int scrollDirection = 0;   // default: scroll left

La page web envoie de nouvelles valeurs en fonction des sélections du curseur et des boutons. Du côté d'Arduino, vous devez simplement savoir que :

  • DiminutionscrollDelayMsfait avancer le texte plus rapidement.
  • AugmenterscrollDelayMsle fait de le faire bouger plus lentement.
  • ChangerscrollDirectionbascule entre les modes de défilement gauche, droit, haut ou bas.

Couleur du texte (Contrôlée depuis la page Web)

La couleur du texte est contrôlée par trois valeurs de 0 à 255 (rouge, vert, bleu). Elles sont mises à jour chaque fois que vous choisissez une nouvelle couleur sur la page web :


// Current text color (R, G, B)
uint8_t textRed   = 255;
uint8_t textGreen = 255;
uint8_t textBlue  = 255;

Lorsque vous choisissez une couleur dans le navigateur et cliquez sur Appliquer, l'ESP32 analyse les valeurs RGB et met à jour ces trois variables ; le texte change immédiatement de couleur sur la matrice. Dans la vidéo, ce comportement est démontré avec plusieurs changements de couleur, y compris des exemples en rouge, vert et bleu.:contentReference[oaicite:5]{index=5}

Résumé

Le projet 3 transforme votre matrice de LED RGB ESP32-S3 en un écran de texte entièrement sans fil que vous pouvez contrôler avec n'importe quel appareil disposant d'un navigateur web. Le croquis est conçu pour être robuste :

  • Il essaie d'abord de se connecter à votre Wi-Fi domestique en utilisant le SSID et le mot de passe que vous avez configurés.
  • Si cela échoue, cela devient automatiquement un point d'accès avec le nomESP32et mot de passepassword.
  • Dans les deux modes, l'ouverture de la bonne adresse IP dans un navigateur affiche la même page de contrôle pour le texte, la couleur, la direction et la vitesse.

Le code HTTP Text complet est disponible ci-dessous cet article (chargé automatiquement sur le site web). Pour une démonstration complète étape par étape et en direct de la mise à jour du texte en temps réel, assurez-vous de regarder la section Projet 3 de la vidéo. Si vous souhaitez construire le projet vous-même, vous pouvez également acheter le module de matrice LED RGB ESP32-S3 en utilisant les liens d'affiliation listés sous le code.

Images

ESP32 S3 Matrix
ESP32 S3 Matrix
ESP32 S3 Matrix pin out
ESP32 S3 Matrix pin out
ESP32-S3_RGB_8x8_matrix-3
ESP32-S3_RGB_8x8_matrix-3
ESP32 S3 Matrix displaying rainbow heart
ESP32 S3 Matrix displaying rainbow heart
ESP32-S3_RGB_8x8_matrix1
ESP32-S3_RGB_8x8_matrix1
ESP32-S3_RGB_8x8_matrix-2
ESP32-S3_RGB_8x8_matrix-2
ESP32-S3 RGB Matrix- Mobile Phone Text
ESP32-S3 RGB Matrix- Mobile Phone Text

Ce tutoriel fait partie de: Matrice LED RGB ESP32-S3

Veuillez consulter cette page en anglais si le code n'est pas visible. Nous sommes désolés pour le désagrément.
801-ESP32-S3 RGB LED Matrix Project 3 - Text from mobile phone
Langue: C++
/*
 * Projet 4 : Défilement de texte HTTP - Matrice LED RGB ESP32-S3 (Waveshare)
 * 
 * - Se connecte à votre WiFi domestique (mode station, avec secours AP).
 * - Sert une page web où vous pouvez définir :
 * Texte
 * Couleur
 * Affichage ON/OFF
 * Direction de défilement (Gauche / Droite / Haut / Bas)
 * Délai de défilement (vitesse)
 * - Prend en charge une matrice LED RGB 8×8 utilisant Adafruit_NeoMatrix.
 * 
 * ▶️ Tutoriel vidéo :
 * https://youtu.be/JKLuYrRcLMI
 * 
 * 📄 Ressources et page de code :
 * https://robojax.com/your-resources-page-here
 * 
 * HTTP_Text_Scroll
 */
#include <Arduino.h>
#include <WiFi.h>
#include <WebServer.h>

#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>

 // ======================= PARAMÈTRES WIFI =========================
 // WiFi domestique (changez ces informations par les identifiants de votre routeur)
const char* WIFI_SSID = "Biseem";
const char* WIFI_PASS = "wan9&Jang~";

 // Point d'accès de secours
const char* AP_SSID = "ESP32";
const char* AP_PASS = "password";

 // ======================= PARAMÈTRES DE MATRICE =======================

#define MATRIX_PIN    14
#define MATRIX_WIDTH  8
#define MATRIX_HEIGHT 8

 // 0, 1, 2 ou 3 - ajustez si l'orientation du texte est incorrecte avec l'USB vers le haut
#define MATRIX_ROTATION 0
#define BRIGHTNESS 15

Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(
  MATRIX_WIDTH, MATRIX_HEIGHT, MATRIX_PIN,
  NEO_MATRIX_TOP + NEO_MATRIX_LEFT +
  NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE,
  NEO_RGB + NEO_KHZ800
);

 // ======================= ÉTAT DU DÉFILEMENT ==========================

enum ScrollDir {
  DIR_LEFT = 0,
  DIR_RIGHT,
  DIR_UP,
  DIR_DOWN
};

String   scrollText  = "Robojax";
uint16_t textColor   = 0xFFFF; // blanc par défaut
bool     displayOn   = true;
ScrollDir currentDir = DIR_LEFT;

 // 1 étape toutes les ce nombre de ms (plus bas = plus rapide)
unsigned long scrollInterval = 80;
unsigned long lastScrollTime = 0;

 // Position de défilement horizontal
int scrollX = MATRIX_WIDTH;
int scrollY = 0; // rang supérieur

 // État pour le défilement vertical lettre par lettre
int vertCharIndex = 0; // quel caractère de la chaîne
int vertY         = MATRIX_HEIGHT; // position verticale de ce caractère

 // ======================= SERVEUR WEB ============================

WebServer server(80);

 // ======================= PAGE HTML ============================

const char MAIN_page[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ESP32 Text Scroll</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #111;
    color: #eee;
    text-align: center;
    margin: 0;
    padding: 10px;
  }
  .container {
    max-width: 360px;
    width: 100%%;
    margin: 0 auto;
    background: #222;
    padding: 12px;
    border-radius: 10px;
    box-sizing: border-box;
  }
  input[type="text"] {
    width: 100%%;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #444;
    background: #111;
    color: #eee;
    margin-bottom: 10px;
  }
  .row {
    margin: 10px 0;
  }
  .label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
  }
  .toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .arrow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, 50px);
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
  }
  .arrow-btn {
    background: #333;
    border: 1px solid #555;
    color: #eee;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%%;
    height: 100%%;
  }
  .arrow-btn.active {
    background: #0a84ff;
  }
  .arrow-btn:disabled {
    opacity: 0.5;
    cursor: default;
  }
  button#applyBtn {
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: #0a84ff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }
  button#applyBtn:active {
    transform: scale(0.97);
  }
</style>
</head>
<body>
  <div class="container">
    <h2>Robojax ESP32-S3 Matrix Text Scroll</h2>

    <div class="row">
      <span class="label">Text to scroll:</span>
      <input type="text" id="text" value="Hello" />
    </div>

    <div class="row">
      <span class="label">Color:</span>
      <input type="color" id="color" value="#ffffff" />
    </div>

    <div class="row">
      <span class="label">Scroll Delay (fast → slow):</span>
      <input
        type="range"
        id="speed"
        min="20"
        max="300"
        value="80"
        oninput="document.getElementById('speedVal').innerText = this.value + ' ms';"
      />
      <div id="speedVal" style="text-align:right;font-size:12px;margin-top:4px;">
        80 ms
      </div>
    </div>

    <div class="row">
      <label class="toggle">
        <input type="checkbox" id="power" checked />
        <span>Display ON</span>
      </label>
    </div>

    <div class="row">
      <span class="label">Scroll Direction:</span>
      <div class="arrow-grid">
        <div></div>
        <button class="arrow-btn" id="btnUp" onclick="setDir('up')">&#9650;</button>
        <div></div>

        <button class="arrow-btn" id="btnLeft" onclick="setDir('left')">&#9664;</button>
        <div></div>
        <button class="arrow-btn" id="btnRight" onclick="setDir('right')">&#9654;</button>

        <div></div>
        <button class="arrow-btn" id="btnDown" onclick="setDir('down')">&#9660;</button>
        <div></div>
      </div>
    </div>

    <button id="applyBtn" onclick="sendUpdate()">Apply</button>
    <p id="status"></p>
  </div>

<script>
  let currentDir = 'left';

  function setDir(dir) {
    currentDir = dir;
    document.querySelectorAll('.arrow-btn').forEach(b => b.classList.remove('active'));
    if (dir === 'up')    document.getElementById('btnUp').classList.add('active');
    if (dir === 'down')  document.getElementById('btnDown').classList.add('active');
    if (dir === 'left')  document.getElementById('btnLeft').classList.add('active');
    if (dir === 'right') document.getElementById('btnRight').classList.add('active');
    sendUpdate();
  }

  function sendUpdate() {
    const text  = document.getElementById('text').value;
    const color = document.getElementById('color').value;
    const power = document.getElementById('power').checked ? '1' : '0';
    const speed = document.getElementById('speed').value;

    const url = `/update?text=${encodeURIComponent(text)}&color=${encodeURIComponent(color)}&power=${power}&dir=${currentDir}&speed=${speed}`;

    fetch(url)
      .then(r => r.text())
      .then(t => {
        document.getElementById('status').innerText = t;
      })
      .catch(err => {
        document.getElementById('status').innerText = 'Error sending update';
      });
  }

 // Définir par défaut actif
  setDir('left');
</script>
</body>
</html>
)rawliteral";

 // ======================= AIDES ===============================

bool isHexChar(char c) {
  return (c >= '0' && c <= '9') ||
         (c >= 'a' && c <= 'f') ||
         (c >= 'A' && c <= 'F');
}

String urlDecode(const String &src) {
  String result;
  result.reserve(src.length());
  for (size_t i = 0; i < src.length(); i++) {
    char c = src[i];
    if (c == '+') {
      result += ' ';
    } else if (c == '%' && i + 2 < src.length()) {
      char h1 = src[i + 1];
      char h2 = src[i + 2];
      if (isHexChar(h1) && isHexChar(h2)) {
        char hex[3] = {h1, h2, 0};
        int val = (int)strtol(hex, nullptr, 16);
        result += (char)val;
        i += 2;
      } else {
        result += c;
      }
    } else {
      result += c;
    }
  }
  return result;
}

uint16_t colorFromHex(const String &hex) {
 // Attendez-vous à "#RRGGBB" ou "RRGGBB"
  String c = hex;
  if (c.startsWith("#")) c.remove(0, 1);
  if (c.length() != 6) {
 // blanc par défaut
    return matrix.Color(255, 255, 255);
  }
  long value = strtol(c.c_str(), NULL, 16);
  uint8_t r = (value >> 16) & 0xFF;
  uint8_t g = (value >> 8) & 0xFF;
  uint8_t b = (value) & 0xFF;
  return matrix.Color(r, g, b);
}

void resetScrollPosition() {
  int textWidth  = scrollText.length() * 6; // police par défaut ~6 px par caractère
  int textHeight = 8; // La police 5x7 tient dans 8.

  switch (currentDir) {
    case DIR_LEFT:
 // Commencer juste à l'extérieur du bord droit
      scrollX = MATRIX_WIDTH;
      scrollY = 0;
      break;

    case DIR_RIGHT:
 // Commencez juste à l'extérieur du bord gauche.
      scrollX = -textWidth;
      scrollY = 0;
      break;

    case DIR_UP:
 // Défilement vertical par lettre, en commençant par le premier caractère sous la matrice
      vertCharIndex = 0;
      vertY = MATRIX_HEIGHT; // 8 → entre par le bas
      break;

    case DIR_DOWN:
 // Défilement vertical par lettre, en commençant par le premier caractère au-dessus de la matrice.
      vertCharIndex = 0;
      vertY = -textHeight; // -8 → entre par le haut
      break;
  }
}

 // ======================= GESTIONNAIRES HTTP =========================

void handleRoot() {
  server.send_P(200, "text/html", MAIN_page);
}

void handleUpdate() {
  if (server.hasArg("text")) {
    String txt = urlDecode(server.arg("text"));
    if (txt.length() == 0) {
      scrollText = " ";
    } else {
      scrollText = txt;
    }
  }

  if (server.hasArg("color")) {
    String hex = server.arg("color");
    textColor = colorFromHex(hex);
  }

  if (server.hasArg("power")) {
    String p = server.arg("power");
    displayOn = (p == "1");
  }

  if (server.hasArg("dir")) {
    String d = server.arg("dir");
    if (d == "left")      currentDir = DIR_LEFT;
    else if (d == "right") currentDir = DIR_RIGHT;
    else if (d == "up")    currentDir = DIR_UP;
    else if (d == "down")  currentDir = DIR_DOWN;
  }

  if (server.hasArg("speed")) {
    String s = server.arg("speed");
    int val = s.toInt();

 // collier de sécurité simple
    if (val < 10)   val = 10; // très rapide
    if (val > 1000) val = 1000; // 1 seconde max

    scrollInterval = (unsigned long)val;
 // Serial.print("Intervalle de défilement réglé sur ");
 // ``` 
Serial.print(scrollInterval);
```
 // Serial.println(" ms");
  }

  resetScrollPosition();
  server.send(200, "text/plain", "Updated");
}

 // ======================= LOGIQUE DE DÉFILEMENT ==========================

void drawScroll() {
  if (!displayOn) {
    matrix.fillScreen(0);
    matrix.show();
    return;
  }

  int textWidth  = scrollText.length() * 6;
  int textHeight = 8;

  matrix.fillScreen(0);
  matrix.setTextSize(1);
  matrix.setTextWrap(false);
  matrix.setTextColor(textColor);

 // -------- DÉFILEMENT HORIZONTAL (GAUCHE / DROITE) --------
  if (currentDir == DIR_LEFT || currentDir == DIR_RIGHT) {
    matrix.setCursor(scrollX, 0);
    matrix.print(scrollText);
    matrix.show();

    if (currentDir == DIR_LEFT) {
      scrollX--;
      if (scrollX < -textWidth) {
        scrollX = MATRIX_WIDTH;
      }
    } else { // DIR_DROITE
      scrollX++;
      if (scrollX > MATRIX_WIDTH) {
        scrollX = -textWidth;
      }
    }
    return;
  }

 // -------- DÉFILEMENT VERTICAL (HAUT / BAS) - PAR LETTRE --------

  if (scrollText.length() == 0) {
    matrix.show();
    return;
  }

 // Personnage actuel
  char c = scrollText[vertCharIndex];

  int charWidth  = 6;
  int baseX = (MATRIX_WIDTH - charWidth) / 2; // centrer horizontalement

  matrix.setCursor(baseX, vertY);
  matrix.print(c);
  matrix.show();

  if (currentDir == DIR_UP) {
 // Déplacez le personnage vers le haut
    vertY--;
    if (vertY < -textHeight) {
 // Ce personnage est complètement validé, passe au suivant.
      vertY = MATRIX_HEIGHT;
      vertCharIndex++;
      if (vertCharIndex >= scrollText.length()) {
        vertCharIndex = 0; // revenir au premier caractère
      }
    }
  } else if (currentDir == DIR_DOWN) {
 // Déplacer le personnage vers le bas
    vertY++;
    if (vertY > MATRIX_HEIGHT) {
 // Ce personnage est complètement validé, passe au suivant.
      vertY = -textHeight;
      vertCharIndex++;
      if (vertCharIndex >= scrollText.length()) {
        vertCharIndex = 0; // rétroaction
      }
    }
  }
}

 // ======================= INITIALISATION WIFI =============================

void startAPFallback() {
  Serial.println("Starting AP fallback...");
  WiFi.mode(WIFI_AP);
  bool apOk = WiFi.softAP(AP_SSID, AP_PASS);
  if (apOk) {
    Serial.print("AP started. SSID: ");
    Serial.print(AP_SSID);
    Serial.print("  IP: ");
    Serial.println(WiFi.softAPIP());
  } else {
    Serial.println("Failed to start AP.");
  }
}

void connectWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(WIFI_SSID, WIFI_PASS);

  Serial.print("Connecting to WiFi ");
  Serial.print(WIFI_SSID);

  unsigned long startAttempt = millis();
  const unsigned long timeout = 10000; // 10s

  while (WiFi.status() != WL_CONNECTED && (millis() - startAttempt) < timeout) {
    Serial.print(".");
    delay(500);
  }
  Serial.println();

  if (WiFi.status() == WL_CONNECTED) {
    Serial.print("Connected. IP address: ");
    Serial.println(WiFi.localIP());
  } else {
    Serial.println("WiFi connect failed, starting AP fallback.");
    startAPFallback();
  }
}

 // ======================= CONFIGURATION & BOUCLE ==========================

void setup() {
  Serial.begin(115200);
  delay(500);

 // Initialisation de la matrice
  matrix.begin();
  matrix.setRotation(MATRIX_ROTATION);
  matrix.setBrightness(BRIGHTNESS);
  matrix.fillScreen(0);
  matrix.show();

 // WiFi
  connectWiFi();

 // Routes de serveur web
  server.on("/", handleRoot);
  server.on("/update", handleUpdate);
  server.onNotFound([]() {
    server.send(404, "text/plain", "Not found");
  });
  server.begin();
  Serial.println("HTTP server started.");

  resetScrollPosition();
}

void loop() {
  server.handleClient();

  unsigned long now = millis();
  if (now - lastScrollTime >= scrollInterval) {
    lastScrollTime = now;
    drawScroll();
  }
}

Ce dont vous pourriez avoir besoin

Ressources et références

Fichiers📁

Fichier Fritzing

Produits Amazon associés

Annonces eBay associées

Produits AliExpress associés

Balises

ESP32-S3 MatrixESP32-S3 RGB LED Matrix
Code de recherche

Derniers tutoriels

Vignette YouTube
Vignette YouTube
Vignette YouTube
Vignette YouTube
Vignette YouTube
Vignette YouTube
Vignette YouTube
Vignette YouTube
Vignette YouTube
Vignette YouTube
Voir plus