🛠 Graphismes avancés avec M5GFX : formes, couleurs et luminosité

Objectifs

• Maîtriser l'API graphique M5GFX (dérivé de LovyanGFX) : fillRect, drawLine, drawCircle, fillRoundRect, couleur 16 bits.
• Travailler en coordonnées 320×240 (paysage natif du pilote ILI9342C).
• Piloter la luminosité du rétroéclairage et écrire un petit menu navigable aux boutons A/B/C.
• Comprendre le dessin « double buffer » par zones (ne redessiner que ce qui change).

Matériel

• 1 M5Stack Core (Basic/Gray/GO/FIRE).
• Bibliothèques M5Unified + M5GFX (gestionnaire de bibliothèques Arduino).
• Pas de matériel externe : boutons et écran intégrés.

Code complet

#include <M5Unified.h>

uint8_t page = 0;
uint8_t luminosité = 128;

void pageFormes {
  M5.Display.fillScreen(TFT_BLACK);
  M5.Display.fillRect(10, 10, 90, 50, TFT_RED);
  M5.Display.fillRoundRect(120, 10, 90, 50, 12, TFT_GREEN);
  M5.Display.fillCircle(60, 120, 35, TFT_BLUE);
  M5.Display.drawCircle(170, 120, 35, TFT_YELLOW);
  M5.Display.drawLine(220, 10, 310, 60, TFT_CYAN);
  for (int x = 10; x < 310; x += 20)
    M5.Display.drawLine(x, 180, x + 10, 220, TFT_ORANGE);
}

void pageJauge {
  M5.Display.fillScreen(TFT_NAVY);
  for (uint8_t i = 0; i < 16; i++)
    M5.Display.fillRect(10 + i * 19, 40, 17, 60,
      M5.Display.color565(i * 16, 255 - i * 16, 128));
  M5.Display.fillRect(10, 140, 300 * luminosité / 255, 24, TFT_YELLOW);
  M5.Display.setCursor(10, 175);
  M5.Display.printf("Luminosite : %u", luminosité);
}

void setup {
  auto cfg = M5.config;
  M5.begin(cfg);
  M5.Display.setTextSize(2);
  pageFormes;
}

void loop {
  M5.update;
  if (M5.BtnA.wasPressed) { page = (page + 1) % 2; }
  if (M5.BtnB.wasPressed) { luminosité = (luminosité + 32) % 256; }
  if (M5.BtnC.wasPressed) { luminosité = (luminosité + 224) % 256; }
  if (page == 0) pageFormes; else pageJauge;
  M5.Display.setBrightness(luminosité);
  vTaskDelay(30 / portTICK_PERIOD_MS);
}

Vérification attendue

• Page 0 : rectangle rouge, rectangle arrondi vert, disques bleu/jaune, diagonale cyan et peigne orange.
• Page 1 : dégradé de 16 couleurs et jauge de luminosité ; B augmente, C diminue, l'écran s'assombrit visiblement.
• Navigation A entre les deux pages sans scintillement important.

Erreurs fréquentes

• Dessiner hors écran : les coordonnées max sont x=319, y=239 en mode paysage.
• fillScreen à chaque frame : coûteux et provoque du flicker ; ne redessiner que les zones modifiées avec fillRect.
• setBrightness à 0 : l'écran paraît « mort » alors que le programme tourne — remonter la luminosité avant de suspecter une panne.
• color565 avec des composantes hors 0-255 : valeurs écrasées, couleurs fausses.
• Confondre M5.Display (M5GFX) avec M5.Lcd (ancienne bibliothèque dépréciée).