refactor(Style): Add font abstraction and CSS-like styling constants

boards/esp32-s3-lcd-43/DisplayDriverGFX.cpp

@@ -58,6 +58,16 @@ int DisplayDriverGFX::width() { return _gfx ? _gfx->width() : DISP_W; }
 
 int DisplayDriverGFX::height() { return _gfx ? _gfx->height() : DISP_H; }
 
+// ── Fonts ──
+// LovyanGFX built-in fonts for 800x480 display
+void DisplayDriverGFX::setTitleFont() { _gfx->setFont(&fonts::FreeSansBold24pt7b); }
+
+void DisplayDriverGFX::setBodyFont() { _gfx->setFont(&fonts::FreeSans18pt7b); }
+
+void DisplayDriverGFX::setLabelFont() { _gfx->setFont(&fonts::FreeSans12pt7b); }
+
+void DisplayDriverGFX::setDefaultFont() { _gfx->setFont(&fonts::Font2); }
+
 // Transform touch coordinates to match display orientation
 // GT911 touch panel on this board is rotated 180° relative to display
 void DisplayDriverGFX::transformTouch(int* x, int* y) {
@@ -121,9 +131,12 @@ bool DisplayDriverGFX::parseTestTouch(int* outX, int* outY, bool* outPressed) {
 
     Serial.printf("[TEST] Injecting touch: (%d,%d) %s\n", x, y, pressed ? "press" : "release");
 
-    if(outX) *outX = x;
-    if(outY) *outY = y;
-    if(outPressed) *outPressed = pressed;
+    if(outX)
+        *outX = x;
+    if(outY)
+        *outY = y;
+    if(outPressed)
+        *outPressed = pressed;
 
     _testMode = true;
     return true;
@@ -323,18 +336,19 @@ void DisplayDriverGFX::render(const ScreenState& state) {
 void DisplayDriverGFX::drawBoot(const ScreenState& state) {
     BootStage stage = state.bootStage;
 
-    _gfx->fillScreen(0x000000);
-    _gfx->setTextColor(0xFFFF);
-    _gfx->setTextSize(2);
-    _gfx->setCursor(10, 10);
+    _gfx->fillScreen(TFT_BLACK);
+    _gfx->setTextColor(STYLE_COLOR_FG);
+    setTitleFont();
+    _gfx->setCursor(STYLE_SPACING_X, STYLE_SPACING_Y);
     _gfx->print("KLUBHAUS");
 
-    _gfx->setTextSize(1);
-    _gfx->setCursor(10, 50);
+    setBodyFont();
+    _gfx->setCursor(STYLE_SPACING_X, STYLE_SPACING_Y + STYLE_HEADER_HEIGHT);
     _gfx->print(BOARD_NAME);
 
     // Show boot stage status
-    _gfx->setCursor(10, 80);
+    setLabelFont();
+    _gfx->setCursor(STYLE_SPACING_X, STYLE_SPACING_Y + STYLE_HEADER_HEIGHT + 30);
     switch(stage) {
     case BootStage::SPLASH:
         _gfx->print("Initializing...");
@@ -363,30 +377,29 @@ void DisplayDriverGFX::drawAlert(const ScreenState& state) {
     uint16_t bg = _gfx->color565(pulse, 0, 0);
 
     _gfx->fillScreen(bg);
-    _gfx->setTextColor(0xFFFF, bg);
+    _gfx->setTextColor(STYLE_COLOR_FG, bg);
 
-    _gfx->setTextSize(3);
-    _gfx->setCursor(10, 20);
+    setTitleFont();
+    _gfx->setCursor(STYLE_SPACING_X, STYLE_HEADER_HEIGHT);
     _gfx->print(state.alertTitle.length() > 0 ? state.alertTitle.c_str() : "ALERT");
 
-    _gfx->setTextSize(2);
-    _gfx->setCursor(10, 80);
+    setBodyFont();
+    _gfx->setCursor(STYLE_SPACING_X, STYLE_HEADER_HEIGHT + 50);
     _gfx->print(state.alertBody);
 
-    _gfx->setTextSize(1);
-    _gfx->setCursor(10, DISP_H - 20);
+    setLabelFont();
+    _gfx->setCursor(STYLE_SPACING_X, DISP_H - STYLE_SPACING_Y);
     _gfx->print("Hold to silence...");
 }
 
 void DisplayDriverGFX::drawDashboard(const ScreenState& state) {
-    _gfx->fillScreen(0x001030); // Dark blue
+    _gfx->fillScreen(STYLE_COLOR_BG);
 
     // Header
-    _gfx->fillRect(0, 0, DISP_W, 40, 0x1A1A); // Dark gray
-    _gfx->setFont(&fonts::Font2);
-    _gfx->setTextColor(0xFFFF);
-    _gfx->setTextSize(1);
-    _gfx->setCursor(10, 12);
+    _gfx->fillRect(0, 0, DISP_W, STYLE_HEADER_HEIGHT, STYLE_COLOR_HEADER);
+    setBodyFont();
+    _gfx->setTextColor(STYLE_COLOR_FG);
+    _gfx->setCursor(STYLE_SPACING_X, 12);
     _gfx->printf("KLUBHAUS");
 
     // WiFi status
@@ -407,15 +420,15 @@ void DisplayDriverGFX::drawDashboard(const ScreenState& state) {
         int h = lay.h;
 
         // Tile background
-        _gfx->fillRoundRect(x, y, w, h, 8, 0x0220);
+        _gfx->fillRoundRect(x, y, w, h, STYLE_TILE_RADIUS, 0x0220);
 
         // Tile border
-        _gfx->drawRoundRect(x, y, w, h, 8, 0xFFFF);
+        _gfx->drawRoundRect(x, y, w, h, STYLE_TILE_RADIUS, STYLE_COLOR_FG);
 
         // Tile label
-        _gfx->setTextColor(0xFFFF);
-        _gfx->setTextSize(2);
-        _gfx->setCursor(x + w / 2 - 10, y + h / 2 - 10);
+        _gfx->setTextColor(STYLE_COLOR_FG);
+        setBodyFont();
+        _gfx->setCursor(x + w / 2 - 30, y + h / 2 - 10);
         _gfx->print(tileLabels[i]);
     }
 }

boards/esp32-s3-lcd-43/DisplayDriverGFX.h

@@ -18,6 +18,12 @@ public:
     int width() override;
     int height() override;
 
+    // Fonts
+    void setTitleFont() override;
+    void setBodyFont() override;
+    void setLabelFont() override;
+    void setDefaultFont() override;
+
     // Transform touch coordinates (handles rotated touch panels)
     void transformTouch(int* x, int* y) override;
 

boards/esp32-s3-lcd-43/board-config.sh

@@ -1,4 +1,4 @@
 FQBN="esp32:esp32:waveshare_esp32_s3_touch_lcd_43:PSRAM=enabled,FlashSize=16M,USBMode=hwcdc,PartitionScheme=app3M_fat9M_16MB"
 PORT="/dev/ttyACM0"
 LIBS="--libraries ~/Arduino/libraries/LovyanGFX"
-OPTS="-DDEBUG_MODE -DBOARD_HAS_PSRAM -DLGFX_USE_V1"
+OPTS="-DDEBUG_MODE -DBOARD_HAS_PSRAM -DLGFX_USE_V1 -DLOCAL_SECRETS"

boards/esp32-s3-lcd-43/board_config.h

@@ -38,3 +38,22 @@
 // ── GT911 Touch ──
 #define GT911_ADDR 0x5D
 // #define TOUCH_INT -1
+
+// ── Style Constants (CSS-like) ────────────────────────────────────────
+// Spacing
+#define STYLE_SPACING_X 10
+#define STYLE_SPACING_Y 10
+#define STYLE_HEADER_HEIGHT 40
+#define STYLE_TILE_GAP 8
+#define STYLE_TILE_PADDING 16
+#define STYLE_TILE_RADIUS 8
+
+// Colors
+#define STYLE_COLOR_BG 0x001030 // Dark blue
+#define STYLE_COLOR_HEADER 0x1A1A // Dark gray
+#define STYLE_COLOR_FG TFT_WHITE
+#define STYLE_COLOR_ALERT TFT_RED
+#define STYLE_COLOR_TILE_1 0x0280 // Green
+#define STYLE_COLOR_TILE_2 0x0400 // Dark green
+#define STYLE_COLOR_TILE_3 0x0440 // Teal
+#define STYLE_COLOR_TILE_4 0x0100 // Dark red