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

Objectives

• Master the M5GFX graphics API (derived from LovyanGFX): fillRect, drawLine, drawCircle, fillRoundRect, 16-bit color.
• Work in 320×240 coordinates (native landscape mode of the ILI9342C driver).
• Control backlight brightness and write a small menu navigable with buttons A/B/C.
• Understand "double buffer" drawing by zones (redraw only what changes).

Hardware

• 1 M5Stack Core (Basic/Gray/GO/FIRE).
• M5Unified + M5GFX libraries (Arduino library manager).
• No external hardware: buttons and screen are integrated.

Complete Code

#include <M5Unified.h>

uint8_t page = 0;
uint8_t luminosite = 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 * luminosite / 255, 24, TFT_YELLOW);
  M5.Display.setCursor(10, 175);
  M5.Display.printf("Luminosite : %u", luminosite);
}

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) { luminosite = (luminosite + 32) % 256; }
  if (M5.BtnC.wasPressed) { luminosite = (luminosite + 224) % 256; }
  if (page == 0) pageFormes; else pageJauge;
  M5.Display.setBrightness(luminosite);
  vTaskDelay(30 / portTICK_PERIOD_MS);
}

Expected Verification

• Page 0: red rectangle, green rounded rectangle, blue/yellow disks, cyan diagonal and orange comb.
• Page 1: gradient of 16 colors and brightness gauge; B increases, C decreases, the screen visibly dims.
• Navigation with A between the two pages without significant flickering.

Common Errors

• Drawing off-screen: maximum coordinates are x=319, y=239 in landscape mode.
• fillScreen every frame: expensive and causes flicker; redraw only modified zones with fillRect.
• setBrightness to 0: the screen appears "dead" while the program is running — increase brightness before suspecting a failure.
• color565 with components outside 0-255: values are clamped, resulting in incorrect colors.
• Confusing M5.Display (M5GFX) with M5.Lcd (deprecated old library).