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 mosi_pin: GPIO13
miso_pin: GPIO12 miso_pin: GPIO12
# ILI9341 Display (2.4" 240x320) # ILI9488 Display (3.5" 320x480, portrait)
display: display:
- platform: ili9xxx - platform: ili9xxx
model: ILI9341 model: ILI9488
spi_id: tft_spi spi_id: tft_spi
cs_pin: GPIO15 cs_pin: GPIO15
dc_pin: GPIO2 dc_pin: GPIO2
@@ -75,8 +75,8 @@ display:
color_order: bgr color_order: bgr
data_rate: 40MHz data_rate: 40MHz
dimensions: dimensions:
width: 240 width: 320
height: 320 height: 480
id: my_display id: my_display
auto_clear_enabled: false auto_clear_enabled: false
update_interval: 2s update_interval: 2s
@@ -97,45 +97,45 @@ display:
bool all_done = id(penelope_medicated).state && id(tess_medicated).state; bool all_done = id(penelope_medicated).state && id(tess_medicated).state;
auto border_color = all_done ? green : red; auto border_color = all_done ? green : red;
// Draw border (8 pixels thick) // Draw border (10 pixels thick)
int border = 8; int border = 10;
it.filled_rectangle(0, 0, 240, border, border_color); // Top it.filled_rectangle(0, 0, 320, border, border_color); // Top
it.filled_rectangle(0, 320 - border, 240, border, border_color); // Bottom it.filled_rectangle(0, 480 - border, 320, border, border_color); // Bottom
it.filled_rectangle(0, 0, border, 320, border_color); // Left it.filled_rectangle(0, 0, border, 480, border_color); // Left
it.filled_rectangle(240 - border, 0, border, 320, border_color); // Right it.filled_rectangle(320 - border, 0, border, 480, border_color); // Right
// Title // 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) // Penelope button (top button)
int btn_x = 30; int btn_x = 40;
int btn_y = 60; int btn_y = 90;
int btn_w = 180; int btn_w = 240;
int btn_h = 80; int btn_h = 120;
auto penelope_color = id(penelope_medicated).state ? green : red; auto penelope_color = id(penelope_medicated).state ? green : red;
it.filled_rectangle(btn_x, btn_y, btn_w, btn_h, penelope_color); 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.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"); it.printf(btn_x + btn_w/2, btn_y + btn_h/2, id(button_font), white, TextAlign::CENTER, "Penelope");
if (id(penelope_medicated).state) { 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) // Tess button (middle button)
btn_y = 155; btn_y = 230;
auto tess_color = id(tess_medicated).state ? green : red; auto tess_color = id(tess_medicated).state ? green : red;
it.filled_rectangle(btn_x, btn_y, btn_w, btn_h, tess_color); 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.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"); it.printf(btn_x + btn_w/2, btn_y + btn_h/2, id(button_font), white, TextAlign::CENTER, "Tess");
if (id(tess_medicated).state) { 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) // Reset button (bottom, smaller)
int reset_x = 70; int reset_x = 110;
int reset_y = 260; int reset_y = 395;
int reset_w = 100; 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.filled_rectangle(reset_x, reset_y, reset_w, reset_h, dark_grey);
it.rectangle(reset_x, reset_y, reset_w, reset_h, black); 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"); 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 touchscreen_id: my_touchscreen
name: "Penelope Button" name: "Penelope Button"
id: penelope_button id: penelope_button
x_min: 30 x_min: 40
x_max: 210 x_max: 280
y_min: 60 y_min: 90
y_max: 140 y_max: 210
on_press: on_press:
then: then:
- switch.toggle: penelope_medicated - switch.toggle: penelope_medicated
@@ -172,10 +172,10 @@ binary_sensor:
touchscreen_id: my_touchscreen touchscreen_id: my_touchscreen
name: "Tess Button" name: "Tess Button"
id: tess_button id: tess_button
x_min: 30 x_min: 40
x_max: 210 x_max: 280
y_min: 155 y_min: 230
y_max: 235 y_max: 350
on_press: on_press:
then: then:
- switch.toggle: tess_medicated - switch.toggle: tess_medicated
@@ -184,10 +184,10 @@ binary_sensor:
touchscreen_id: my_touchscreen touchscreen_id: my_touchscreen
name: "Reset Button" name: "Reset Button"
id: reset_button id: reset_button
x_min: 70 x_min: 110
x_max: 170 x_max: 210
y_min: 260 y_min: 395
y_max: 300 y_max: 450
on_press: on_press:
then: then:
- switch.turn_off: penelope_medicated - switch.turn_off: penelope_medicated