Edit esp-bedside-panel.yaml

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:
+# V1.36 2026-07-19 Added Alarm Clock navigation button and initial empty page
 # V1.35 2026-07-19 Added an adjustable Blackout range below 2 lx
 # V1.34 2026-07-19 Added three ambient-light ranges and periodic backlight rechecking
 # V1.33 2026-07-19 Raised the default night lux threshold after TEMT6000 testing
@@ -126,6 +127,8 @@
 # - A second configurable delay changes to the large Clock page.
 # - Clock/idle brightness is rechecked periodically as ambient light changes.
 # - Calibration, thresholds, brightness and delay values persist across reboot.
+# - The Bedroom header has separate Bedtime and Alarm Clock controls.
+# - The initial Alarm Clock page contains only Back and live-time navigation.
 #:########################################################################################:#
 # OFFLINE NOTES:
 # - LVGL, the clock, touch and backlight operate locally.
@@ -144,12 +147,12 @@ substitutions:
   # Device Naming
   device_name: "esp-bedside-panel"
   friendly_name: "ESP Bedside Panel"
-  description_comment: "Guition JC1060P470C_I_W_Y ESP32-P4 bedside control panel. Four-range adaptive brightness including an adjustable blackout level below 2 lx. (Layout V1.1)"
+  description_comment: "Guition JC1060P470C_I_W_Y ESP32-P4 bedside control panel. Added split Bedtime/Alarm controls and the initial Alarm Clock page. (Layout V1.1)"
   device_area: "Bedroom"
 
   # Project Naming
   project_name: "Guition.JC1060P470C_I_W_Y"
-  project_version: "v1.35"
+  project_version: "v1.36"
 
   # Passwords & Secrets
   api_key: !secret esp-api_key
@@ -678,6 +681,7 @@ font:
       - "\U000F050F" # mdi-thermometer
       - "\U000F068A" # mdi-shield-home
       - "\U000F04B2" # mdi-sleep
+      - "\U000F009E" # mdi-bell-ring
 
   # Live 24-hour time shown in bottom-right clock buttons.
   - file:
@@ -1767,6 +1771,14 @@ script:
                   now.strftime(buffer, sizeof(buffer), "%H:%M");
                   return std::string(buffer);
 
+            - lvgl.label.update:
+                id: alarm_clock_time_button_label
+                text: !lambda |-
+                  auto now = id(ha_time).now();
+                  char buffer[8];
+                  now.strftime(buffer, sizeof(buffer), "%H:%M");
+                  return std::string(buffer);
+
   #:######################################################################################:#
   # JOBS PAGE STATE REFRESH
   #:######################################################################################:#
@@ -4540,12 +4552,12 @@ lvgl:
             shadow_width: 0
             clickable: false
 
-        # Compact Bedtime control beside the API connection indicator.
+        # Compact Bedtime and Alarm Clock controls beside the API indicator.
         - button:
             id: bedtime_button
             x: 50
             y: 8
-            width: 210
+            width: 100
             height: 68
             bg_color: 0x3B3048
             bg_opa: COVER
@@ -4570,7 +4582,36 @@ lvgl:
                     data:
                       entity_id: "${bedtime_button_entity}"
 
-        # Divider between Bedtime and the compact status strip.
+        - button:
+            id: alarm_clock_open_button
+            x: 160
+            y: 8
+            width: 100
+            height: 68
+            bg_color: 0x673238
+            bg_opa: COVER
+            border_width: 2
+            border_color: 0xA45A63
+            radius: 13
+            pressed:
+              bg_color: 0x82414A
+            widgets:
+              - label:
+                  align: CENTER
+                  text: "\U000F009E"
+                  text_font: font_mdi_navigation
+                  text_align: CENTER
+                  text_color: 0xFFE8E8
+
+            on_click:
+              - lvgl.page.show:
+                  id: alarm_clock_page
+                  animation: MOVE_LEFT
+                  time: 220ms
+
+              - script.execute: apply_active_backlight
+
+        # Divider between Bedtime/Alarm and the compact status strip.
         - obj:
             x: 268
             y: 11
@@ -7546,6 +7587,78 @@ lvgl:
               - delay: 50ms
               - online_image.release: security_camera_image
 
+    #:####################################################################################:#
+    # ALARM CLOCK PAGE
+    #:####################################################################################:#
+    #
+    # Initial shell page. Alarm configuration and display features will be
+    # added in later revisions.
+    - id: alarm_clock_page
+      skip: true
+      bg_color: 0x10151D
+      bg_opa: COVER
+
+      widgets:
+        #:################################################################################:#
+        # BOTTOM NAVIGATION
+        #:################################################################################:#
+        - button:
+            id: alarm_clock_back_button
+            x: 612
+            y: 475
+            width: 190
+            height: 92
+            bg_color: 0x315843
+            bg_opa: COVER
+            border_width: 2
+            border_color: 0x548C6C
+            radius: 16
+            pressed:
+              bg_color: 0x416F55
+            widgets:
+              - label:
+                  align: CENTER
+                  text: "\U000F004D"
+                  text_font: font_mdi_navigation
+                  text_color: 0xFFFFFF
+
+            on_click:
+              - lvgl.page.show:
+                  id: bedroom_page
+                  animation: MOVE_RIGHT
+                  time: 220ms
+
+              - script.execute: apply_active_backlight
+
+        - button:
+            id: alarm_clock_time_button
+            x: 810
+            y: 475
+            width: 190
+            height: 92
+            bg_color: 0x214F72
+            bg_opa: COVER
+            border_width: 2
+            border_color: 0x3E7FA7
+            radius: 16
+            pressed:
+              bg_color: 0x2E6A96
+            widgets:
+              - label:
+                  id: alarm_clock_time_button_label
+                  align: CENTER
+                  text: "--:--"
+                  text_font: font_navigation_time
+                  text_color: 0xFFFFFF
+
+            on_click:
+              - lvgl.page.show:
+                  id: clock_page
+                  animation: FADE_IN
+                  time: 250ms
+
+              - script.execute: apply_dim_backlight
+
     #:####################################################################################:#
     # CLOCK PAGE
     #:####################################################################################:#