Update display configuration for Cat Medication Tracker: change model to ILI9488 and adjust dimensions and button placements

This commit is contained in:
Joshua King
2026-03-06 08:49:02 -05:00
parent 01e02033f6
commit 6dd6e39c04

View File

@@ -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