diff --git a/esphome/esp-bedside-panel.yaml b/esphome/esp-bedside-panel.yaml index d0e7b91..4e9c5d3 100644 --- a/esphome/esp-bedside-panel.yaml +++ b/esphome/esp-bedside-panel.yaml @@ -6,6 +6,7 @@ # https://home.fox.co.nz/gitea/zorruno/zorruno-homeassistant/src/branch/master/esphome/esp-bedside-panel.yaml #:########################################################################################:# # VERSIONS: +# V0.8k 2026-07-16 Revised Bedroom header and added five-button navigation row # V0.8j 2026-07-16 Added delayed Home Assistant state synchronisation for button highlighting at startup # V0.8i 2026-07-16 Moved Clock date upward, added missing value glyphs and increased Clock to 190px # V0.8h 2026-07-16 Updated local environment entities and added Moon / Outdoor readings @@ -54,6 +55,7 @@ # - The 24-hour clock font is increased cautiously from 170px to 190px. # - The display remains in its native 1024x600 landscape orientation. # - The default page contains nine Bedroom / nearby controls. +# - The bottom navigation row contains Bedtime, Climate, Future1, Future2 and Clock. # - After the configured idle period: # - The large clock page is displayed. # - Backlight brightness is reduced. @@ -77,12 +79,12 @@ substitutions: # Device Naming device_name: "esp-bedside-panel" friendly_name: "ESP Bedside Panel" - description_comment: "Guition JC1060P470C_I_W_Y ESP32-P4 bedside clock and Home Assistant control panel. Startup state synchronisation for LVGL button highlighting. (Layout V1.1)" + description_comment: "Guition JC1060P470C_I_W_Y ESP32-P4 bedside clock and Home Assistant control panel. Compact Bedroom status header and five-button navigation row. (Layout V1.1)" device_area: "Bedroom" # Project Naming project_name: "Guition.JC1060P470C_I_W_Y" - project_version: "v0.8j" + project_version: "v0.8k" # Passwords & Secrets api_key: !secret esp-api_key @@ -261,10 +263,9 @@ api: level: INFO format: "API connected: ESP Bedside Panel is online" - - lvgl.label.update: - id: bedroom_connection_label - text: "HA connected" - text_color: 0x65D483 + - lvgl.widget.update: + id: bedroom_connection_indicator + bg_color: 0x65D483 # HA may deliver imported entity states before all LVGL widgets are ready. # Run a delayed two-pass refresh so startup colours always match HA. @@ -276,10 +277,21 @@ api: level: WARN format: "API disconnected: ESP Bedside Panel is offline from Home Assistant" - - lvgl.label.update: - id: bedroom_connection_label - text: "HA offline" - text_color: 0xF06A6A + # Allow another API client to remain connected before showing offline. + - delay: 500ms + + - if: + condition: + api.connected: + then: + - lvgl.widget.update: + id: bedroom_connection_indicator + bg_color: 0x65D483 + + else: + - lvgl.widget.update: + id: bedroom_connection_indicator + bg_color: 0xF06A6A #:########################################################################################:# # OTA: @@ -663,6 +675,19 @@ script: - id: refresh_button_states mode: restart then: + - if: + condition: + api.connected: + then: + - lvgl.widget.update: + id: bedroom_connection_indicator + bg_color: 0x65D483 + + else: + - lvgl.widget.update: + id: bedroom_connection_indicator + bg_color: 0xF06A6A + - lvgl.widget.update: id: north_lights_button bg_color: !lambda |- @@ -869,20 +894,20 @@ lvgl: bg_opa: COVER widgets: - - label: - x: 35 - y: 14 - text: "Bedroom" - text_font: font_title - text_color: 0xFFFFFF - - - label: - id: bedroom_connection_label - x: 38 - y: 57 - text: "Waiting for HA" - text_font: font_small - text_color: 0xF0A45D + # Home Assistant API status: + # Green = connected, red = disconnected. + - obj: + id: bedroom_connection_indicator + x: 30 + y: 25 + width: 18 + height: 18 + radius: 9 + bg_color: 0xF06A6A + bg_opa: COVER + border_width: 0 + shadow_width: 0 + clickable: false # Four status readings across the top - label: @@ -1195,71 +1220,20 @@ lvgl: data: entity_id: "${bathroom_fan_entity}" - - button: - id: clock_now_button - x: 35 - y: 475 - width: 280 - height: 92 - widgets: - - label: - id: clock_now_button_label - align: CENTER - text: "Show Clock" - text_font: font_button - text_color: 0xFFFFFF - bg_color: 0x214F72 - bg_opa: COVER - border_width: 2 - border_color: 0x3E7FA7 - radius: 16 - on_click: - - lvgl.page.show: - id: clock_page - animation: FADE_IN - time: 250ms - - - light.turn_on: - id: display_backlight - brightness: "${clock_brightness}" - transition_length: 1500ms - - - button: - id: spare_navigation_button - x: 340 - y: 475 - width: 280 - height: 92 - widgets: - - label: - id: spare_navigation_button_label - align: CENTER - text: "Climate" - text_font: font_button - text_color: 0xFFFFFF - bg_color: 0x315843 - bg_opa: COVER - border_width: 2 - border_color: 0x548C6C - radius: 16 - - on_click: - - lvgl.page.show: - id: climate_page - animation: MOVE_LEFT - time: 220ms - + #:################################################################################:# + # BEDROOM PAGE BOTTOM NAVIGATION + #:################################################################################:# - button: id: bedtime_button - x: 645 + x: 18 y: 475 - width: 344 + width: 190 height: 92 widgets: - label: id: bedtime_button_label align: CENTER - text: "Hold for Bedtime" + text: "Bedtime (Hold)" text_font: font_button text_color: 0xFFFFFF bg_color: 0x3B3048 @@ -1267,6 +1241,8 @@ lvgl: border_width: 2 border_color: 0x735E88 radius: 16 + pressed: + bg_color: 0x584668 on_long_press: then: @@ -1277,13 +1253,114 @@ lvgl: - lvgl.label.update: id: bedtime_button_label - text: "Bedtime Activated" + text: "Activated" - delay: 2s - lvgl.label.update: id: bedtime_button_label - text: "Hold for Bedtime" + text: "Bedtime (Hold)" + + - button: + id: climate_navigation_button + x: 216 + y: 475 + width: 190 + height: 92 + widgets: + - label: + id: climate_navigation_button_label + align: CENTER + text: "Climate" + text_font: font_button + text_color: 0xFFFFFF + bg_color: 0x315843 + bg_opa: COVER + border_width: 2 + border_color: 0x548C6C + radius: 16 + pressed: + bg_color: 0x416F55 + + on_click: + - lvgl.page.show: + id: climate_page + animation: MOVE_LEFT + time: 220ms + + - button: + id: future_1_navigation_button + x: 414 + y: 475 + width: 190 + height: 92 + widgets: + - label: + id: future_1_navigation_button_label + align: CENTER + text: "Future1" + text_font: font_button + text_color: 0xAEB8C4 + bg_color: 0x28313D + bg_opa: COVER + border_width: 2 + border_color: 0x445365 + radius: 16 + pressed: + bg_color: 0x34404F + + - button: + id: future_2_navigation_button + x: 612 + y: 475 + width: 190 + height: 92 + widgets: + - label: + id: future_2_navigation_button_label + align: CENTER + text: "Future2" + text_font: font_button + text_color: 0xAEB8C4 + bg_color: 0x28313D + bg_opa: COVER + border_width: 2 + border_color: 0x445365 + radius: 16 + pressed: + bg_color: 0x34404F + + - button: + id: clock_now_button + x: 810 + y: 475 + width: 190 + height: 92 + widgets: + - label: + id: clock_now_button_label + align: CENTER + text: "Clock" + text_font: font_button + text_color: 0xFFFFFF + bg_color: 0x214F72 + bg_opa: COVER + border_width: 2 + border_color: 0x3E7FA7 + radius: 16 + pressed: + bg_color: 0x2E6A96 + + on_click: + - lvgl.page.show: + id: clock_page + animation: FADE_IN + time: 250ms + + - light.turn_on: + id: display_backlight + brightness: "${clock_brightness}" + transition_length: 1500ms #:####################################################################################:# # CLIMATE PAGE