From 6dd6e39c04d1d77389634baee61be656d074fb2b Mon Sep 17 00:00:00 2001
From: Joshua King <joshuaking.mba@gmail.com>
Date: Fri, 6 Mar 2026 08:49:02 -0500
Subject: [PATCH] Update display configuration for Cat Medication Tracker:
 change model to ILI9488 and adjust dimensions and button placements

---
 esphome/cat-medication-tracker.yaml | 82 ++++++++++++++---------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/esphome/cat-medication-tracker.yaml b/esphome/cat-medication-tracker.yaml
index aa5739f..3352be5 100644
--- a/esphome/cat-medication-tracker.yaml
+++ b/esphome/cat-medication-tracker.yaml
@@ -62,10 +62,10 @@ spi:
     mosi_pin: GPIO13
     miso_pin: GPIO12
 
-# ILI9341 Display (2.4" 240x320)
+# ILI9488 Display (3.5" 320x480, portrait)
 display:
   - platform: ili9xxx
-    model: ILI9341
+    model: ILI9488
     spi_id: tft_spi
     cs_pin: GPIO15
     dc_pin: GPIO2
@@ -75,8 +75,8 @@ display:
     color_order: bgr
     data_rate: 40MHz
     dimensions:
-      width: 240
-      height: 320
+      width: 320
+      height: 480
     id: my_display
     auto_clear_enabled: false
     update_interval: 2s
@@ -89,53 +89,53 @@ display:
       auto white = Color(255, 255, 255);
       auto black = Color(0, 0, 0);
       auto dark_grey = Color(80, 80, 80);
-      
+
       // Fill background with light grey
       it.fill(light_grey);
-      
+
       // Border color: green if all cats medicated, red otherwise
       bool all_done = id(penelope_medicated).state && id(tess_medicated).state;
       auto border_color = all_done ? green : red;
-      
-      // Draw border (8 pixels thick)
-      int border = 8;
-      it.filled_rectangle(0, 0, 240, border, border_color);           // Top
-      it.filled_rectangle(0, 320 - border, 240, border, border_color); // Bottom
-      it.filled_rectangle(0, 0, border, 320, border_color);            // Left
-      it.filled_rectangle(240 - border, 0, border, 320, border_color); // Right
-      
+
+      // Draw border (10 pixels thick)
+      int border = 10;
+      it.filled_rectangle(0, 0, 320, border, border_color);           // Top
+      it.filled_rectangle(0, 480 - border, 320, border, border_color); // Bottom
+      it.filled_rectangle(0, 0, border, 480, border_color);            // Left
+      it.filled_rectangle(320 - border, 0, border, 480, border_color); // Right
+
       // Title
-      it.printf(120, 25, id(title_font), black, TextAlign::TOP_CENTER, "Cat Meds");
-      
+      it.printf(160, 30, id(title_font), black, TextAlign::TOP_CENTER, "Cat Meds");
+
       // Penelope button (top button)
-      int btn_x = 30;
-      int btn_y = 60;
-      int btn_w = 180;
-      int btn_h = 80;
-      
+      int btn_x = 40;
+      int btn_y = 90;
+      int btn_w = 240;
+      int btn_h = 120;
+
       auto penelope_color = id(penelope_medicated).state ? green : red;
       it.filled_rectangle(btn_x, btn_y, btn_w, btn_h, penelope_color);
       it.rectangle(btn_x, btn_y, btn_w, btn_h, dark_grey);
       it.printf(btn_x + btn_w/2, btn_y + btn_h/2, id(button_font), white, TextAlign::CENTER, "Penelope");
       if (id(penelope_medicated).state) {
-        it.printf(btn_x + btn_w/2, btn_y + btn_h - 15, id(status_font), white, TextAlign::CENTER, "DONE");
+        it.printf(btn_x + btn_w/2, btn_y + btn_h - 20, id(status_font), white, TextAlign::CENTER, "DONE");
       }
-      
+
       // Tess button (middle button)
-      btn_y = 155;
+      btn_y = 230;
       auto tess_color = id(tess_medicated).state ? green : red;
       it.filled_rectangle(btn_x, btn_y, btn_w, btn_h, tess_color);
       it.rectangle(btn_x, btn_y, btn_w, btn_h, dark_grey);
       it.printf(btn_x + btn_w/2, btn_y + btn_h/2, id(button_font), white, TextAlign::CENTER, "Tess");
       if (id(tess_medicated).state) {
-        it.printf(btn_x + btn_w/2, btn_y + btn_h - 15, id(status_font), white, TextAlign::CENTER, "DONE");
+        it.printf(btn_x + btn_w/2, btn_y + btn_h - 20, id(status_font), white, TextAlign::CENTER, "DONE");
       }
-      
+
       // Reset button (bottom, smaller)
-      int reset_x = 70;
-      int reset_y = 260;
+      int reset_x = 110;
+      int reset_y = 395;
       int reset_w = 100;
-      int reset_h = 40;
+      int reset_h = 55;
       it.filled_rectangle(reset_x, reset_y, reset_w, reset_h, dark_grey);
       it.rectangle(reset_x, reset_y, reset_w, reset_h, black);
       it.printf(reset_x + reset_w/2, reset_y + reset_h/2, id(status_font), white, TextAlign::CENTER, "RESET");
@@ -160,10 +160,10 @@ binary_sensor:
     touchscreen_id: my_touchscreen
     name: "Penelope Button"
     id: penelope_button
-    x_min: 30
-    x_max: 210
-    y_min: 60
-    y_max: 140
+    x_min: 40
+    x_max: 280
+    y_min: 90
+    y_max: 210
     on_press:
       then:
         - switch.toggle: penelope_medicated
@@ -172,10 +172,10 @@ binary_sensor:
     touchscreen_id: my_touchscreen
     name: "Tess Button"
     id: tess_button
-    x_min: 30
-    x_max: 210
-    y_min: 155
-    y_max: 235
+    x_min: 40
+    x_max: 280
+    y_min: 230
+    y_max: 350
     on_press:
       then:
         - switch.toggle: tess_medicated
@@ -184,10 +184,10 @@ binary_sensor:
     touchscreen_id: my_touchscreen
     name: "Reset Button"
     id: reset_button
-    x_min: 70
-    x_max: 170
-    y_min: 260
-    y_max: 300
+    x_min: 110
+    x_max: 210
+    y_min: 395
+    y_max: 450
     on_press:
       then:
         - switch.turn_off: penelope_medicated