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

Objetivos

• Dominar la API gráfica M5GFX (derivada de LovyanGFX): fillRect, drawLine, drawCircle, fillRoundRect, color de 16 bits.
• Trabajar en coordenadas 320×240 (modo horizontal nativo del controlador ILI9342C).
• Controlar el brillo de la retroiluminación y escribir un pequeño menú navegable con los botones A/B/C.
• Comprender el dibujo con «doble búfer» por zonas (redibujar solo lo que cambia).

Material

• 1 M5Stack Core (Basic/Gray/GO/FIRE).
• Librerías M5Unified + M5GFX (gestor de librerías de Arduino).
• Sin hardware externo: botones y pantalla integrados.

Código completo

#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);
}

Verificación esperada

• Página 0: rectángulo rojo, rectángulo redondeado verde, discos azul/amarillo, diagonal cian y peine naranja.
• Página 1: degradado de 16 colores y medidor de brillo; B aumenta, C disminuye, la pantalla se oscurece visiblemente.
• Navegación con A entre las dos páginas sin parpadeo significativo.

Errores frecuentes

• Dibujar fuera de la pantalla: las coordenadas máximas son x=319, y=239 en modo horizontal.
• fillScreen en cada fotograma: costoso y provoca parpadeo; redibujar solo las zonas modificadas con fillRect.
• setBrightness a 0: la pantalla parece «muerta» aunque el programa se esté ejecutando — subir el brillo antes de sospechar una avería.
• color565 con componentes fuera de 0-255: valores truncados, colores incorrectos.
• Confundir M5.Display (M5GFX) con M5.Lcd (antigua librería obsoleta).