diff --git a/esphome/esp-bedside-panel.yaml b/esphome/esp-bedside-panel.yaml index 0db7131..23669e2 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: +# V1.38 2026-07-19 Added per-alarm Snooze controls and a reusable 24-hour time editor # V1.37 2026-07-19 Added four persistent Alarm Clock configuration rows # 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 @@ -130,8 +131,9 @@ # - Calibration, thresholds, brightness and delay values persist across reboot. # - The Bedroom header has separate Bedtime and Alarm Clock controls. # - The Alarm Clock page contains four persistent configuration rows. -# - Enable, days, vibration profile, sound profile and lamp choices are active. -# - Alarm times are displayed in 24-hour format; the time editor comes next. +# - Enable, days, Snooze, vibration, sound and lamp choices are active. +# - Tapping a time opens a shared circular 24-hour hour/minute roller editor. +# - The Snooze duration is a persistent Home Assistant configuration entity. #:########################################################################################:# # OFFLINE NOTES: # - LVGL, the clock, touch and backlight operate locally. @@ -150,12 +152,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-row Alarm Clock configuration interface with persistent enable, day, output and lamp selections. (Layout V1.1)" + description_comment: "Guition JC1060P470C_I_W_Y ESP32-P4 bedside control panel. Four-row Alarm Clock interface with Snooze controls and a reusable 24-hour roller time editor. (Layout V1.1)" device_area: "Bedroom" # Project Naming project_name: "Guition.JC1060P470C_I_W_Y" - project_version: "v1.37" + project_version: "v1.38" # Passwords & Secrets api_key: !secret esp-api_key @@ -215,6 +217,9 @@ substitutions: # re-evaluated against the latest lux value. adaptive_backlight_recheck_interval: "10s" + # Alarm Clock Defaults + alarm_snooze_minutes_default: "10" + # Security Camera Settings # Change this only if homeassistant.local is not reachable from the panel. home_assistant_internal_url: "http://homeassistant.local:8123" @@ -936,6 +941,20 @@ number: step: 5 mode: box + - platform: template + id: alarm_snooze_minutes + name: "${friendly_name} Alarm Snooze Duration" + icon: mdi:alarm-snooze + entity_category: config + optimistic: true + restore_value: true + initial_value: "${alarm_snooze_minutes_default}" + unit_of_measurement: "min" + min_value: 1 + max_value: 30 + step: 1 + mode: box + #:########################################################################################:# # HOME ASSISTANT NUMERIC SENSORS: # https://esphome.io/components/sensor/homeassistant.html @@ -1576,8 +1595,8 @@ globals: # ALARM CLOCK SETTINGS #:######################################################################################:# # - # Four alarm rows are stored locally. Alarm execution and the time editor are - # added later; this revision provides the persistent row controls. + # Four alarm rows are stored locally. Alarm execution is added later; this + # revision includes the complete row editor and reusable 24-hour time editor. # # Day mask bits: # 0 Monday, 1 Tuesday, 2 Wednesday, 3 Thursday, @@ -1602,6 +1621,11 @@ globals: restore_value: true initial_value: '{31, 31, 31, 31}' + - id: alarm_snooze_enabled + type: bool[4] + restore_value: true + initial_value: '{false, false, false, false}' + - id: alarm_vibrate_option type: uint8_t[4] restore_value: true @@ -1617,6 +1641,22 @@ globals: restore_value: true initial_value: '{false, false, false, false}' + # Temporary values used by the shared time-editor page. + - id: alarm_edit_row + type: int + restore_value: false + initial_value: "-1" + + - id: alarm_edit_hour + type: uint8_t + restore_value: false + initial_value: "7" + + - id: alarm_edit_minute + type: uint8_t + restore_value: false + initial_value: "0" + #:########################################################################################:# # SCRIPTS: # Refresh all state-dependent LVGL button colours @@ -1660,6 +1700,12 @@ script: ); return std::string(buffer); + - lvgl.widget.update: + id: alarm_1_snooze_button + state: + checked: !lambda |- + return id(alarm_snooze_enabled)[0]; + - lvgl.label.update: id: alarm_1_vibrate_label text: !lambda |- @@ -1788,6 +1834,12 @@ script: ); return std::string(buffer); + - lvgl.widget.update: + id: alarm_2_snooze_button + state: + checked: !lambda |- + return id(alarm_snooze_enabled)[1]; + - lvgl.label.update: id: alarm_2_vibrate_label text: !lambda |- @@ -1916,6 +1968,12 @@ script: ); return std::string(buffer); + - lvgl.widget.update: + id: alarm_3_snooze_button + state: + checked: !lambda |- + return id(alarm_snooze_enabled)[2]; + - lvgl.label.update: id: alarm_3_vibrate_label text: !lambda |- @@ -2044,6 +2102,12 @@ script: ); return std::string(buffer); + - lvgl.widget.update: + id: alarm_4_snooze_button + state: + checked: !lambda |- + return id(alarm_snooze_enabled)[3]; + - lvgl.label.update: id: alarm_4_vibrate_label text: !lambda |- @@ -2146,6 +2210,102 @@ script: (1U << 7) ) != 0; + + #:######################################################################################:# + # ALARM CLOCK TIME EDITOR + #:######################################################################################:# + - id: refresh_alarm_time_preview + mode: restart + then: + - lvgl.label.update: + id: alarm_time_preview_label + text: !lambda |- + char buffer[8]; + snprintf( + buffer, + sizeof(buffer), + "%02u:%02u", + id(alarm_edit_hour), + id(alarm_edit_minute) + ); + return std::string(buffer); + + - id: open_alarm_time_editor + mode: restart + then: + - if: + condition: + lambda: |- + return ( + id(alarm_edit_row) >= 0 && + id(alarm_edit_row) < 4 + ); + + then: + - lambda: |- + const int row = id(alarm_edit_row); + id(alarm_edit_hour) = id(alarm_hour)[row]; + id(alarm_edit_minute) = id(alarm_minute)[row]; + + - lvgl.label.update: + id: alarm_time_editor_title + text: !lambda |- + char buffer[20]; + snprintf( + buffer, + sizeof(buffer), + "Set Alarm %d", + id(alarm_edit_row) + 1 + ); + return std::string(buffer); + + - lvgl.roller.update: + id: alarm_hour_roller + selected_index: !lambda |- + return id(alarm_edit_hour); + animated: false + + - lvgl.roller.update: + id: alarm_minute_roller + selected_index: !lambda |- + return id(alarm_edit_minute); + animated: false + + - script.execute: refresh_alarm_time_preview + + - lvgl.page.show: + id: alarm_time_editor_page + animation: MOVE_LEFT + time: 220ms + + - script.execute: apply_active_backlight + + - id: save_alarm_time_editor + mode: restart + then: + - if: + condition: + lambda: |- + return ( + id(alarm_edit_row) >= 0 && + id(alarm_edit_row) < 4 + ); + + then: + - lambda: |- + const int row = id(alarm_edit_row); + id(alarm_hour)[row] = id(alarm_edit_hour); + id(alarm_minute)[row] = id(alarm_edit_minute); + + - script.execute: refresh_alarm_clock_page + + - lvgl.page.show: + id: alarm_clock_page + animation: MOVE_RIGHT + time: 220ms + + - script.execute: apply_active_backlight + #:######################################################################################:# # ADAPTIVE DISPLAY BACKLIGHT #:######################################################################################:# @@ -8168,8 +8328,7 @@ lvgl: # ALARM CLOCK PAGE #:####################################################################################:# # - # Four local alarm configuration rows. Alarm execution and time editing are - # deliberately deferred until their interaction design is finalised. + # Four local alarm configuration rows. Alarm execution is added later. - id: alarm_clock_page skip: true bg_color: 0x10151D @@ -8199,7 +8358,7 @@ lvgl: id: alarm_1_enable_button x: 8 y: 13 - width: 54 + width: 48 height: 70 checkable: true state: @@ -8238,12 +8397,11 @@ lvgl: ? std::string("\U000F0132") : std::string("\U000F0131"); - # Time display. A dedicated 24-hour editor is added next. - button: id: alarm_1_time_button - x: 68 + x: 62 y: 13 - width: 122 + width: 110 height: 70 bg_color: 0x214F72 bg_opa: COVER @@ -8260,11 +8418,17 @@ lvgl: text_font: font_vehicle_bold text_color: 0xFFFFFF + on_click: + - lambda: |- + id(alarm_edit_row) = 0; + + - script.execute: open_alarm_time_editor + - button: id: alarm_1_day_m - x: 196 + x: 178 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8277,7 +8441,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8303,9 +8467,9 @@ lvgl: - button: id: alarm_1_day_tu - x: 240 + x: 215 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8318,7 +8482,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8344,9 +8508,9 @@ lvgl: - button: id: alarm_1_day_w - x: 284 + x: 252 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8359,7 +8523,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8385,9 +8549,9 @@ lvgl: - button: id: alarm_1_day_th - x: 328 + x: 289 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8400,7 +8564,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8426,9 +8590,9 @@ lvgl: - button: id: alarm_1_day_f - x: 372 + x: 326 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8441,7 +8605,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8467,9 +8631,9 @@ lvgl: - button: id: alarm_1_day_sa - x: 416 + x: 363 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8482,7 +8646,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8508,9 +8672,9 @@ lvgl: - button: id: alarm_1_day_su - x: 460 + x: 400 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8523,7 +8687,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8549,9 +8713,9 @@ lvgl: - button: id: alarm_1_day_h - x: 504 + x: 437 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8564,7 +8728,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8589,10 +8753,42 @@ lvgl: } - button: - id: alarm_1_vibrate_button - x: 556 + id: alarm_1_snooze_button + x: 478 y: 13 - width: 132 + width: 100 + height: 70 + checkable: true + state: + checked: !lambda |- + return id(alarm_snooze_enabled)[0]; + bg_color: 0x28313D + bg_opa: COVER + border_width: 2 + border_color: 0x548C6C + radius: 11 + checked: + bg_color: 0x315843 + border_color: 0x72AE88 + pressed: + bg_color: 0x416F55 + widgets: + - label: + align: CENTER + text: "Snooze" + text_font: font_small + text_color: 0xFFFFFF + + on_value: + then: + - lambda: |- + id(alarm_snooze_enabled)[0] = x; + + - button: + id: alarm_1_vibrate_button + x: 585 + y: 13 + width: 118 height: 70 bg_color: 0x4B3A63 bg_opa: COVER @@ -8629,9 +8825,9 @@ lvgl: - button: id: alarm_1_sound_button - x: 696 + x: 710 y: 13 - width: 126 + width: 112 height: 70 bg_color: 0x384E66 bg_opa: COVER @@ -8668,9 +8864,9 @@ lvgl: - button: id: alarm_1_lamp_button - x: 830 + x: 829 y: 13 - width: 164 + width: 165 height: 70 checkable: true state: @@ -8718,7 +8914,7 @@ lvgl: id: alarm_2_enable_button x: 8 y: 13 - width: 54 + width: 48 height: 70 checkable: true state: @@ -8757,12 +8953,11 @@ lvgl: ? std::string("\U000F0132") : std::string("\U000F0131"); - # Time display. A dedicated 24-hour editor is added next. - button: id: alarm_2_time_button - x: 68 + x: 62 y: 13 - width: 122 + width: 110 height: 70 bg_color: 0x214F72 bg_opa: COVER @@ -8779,11 +8974,17 @@ lvgl: text_font: font_vehicle_bold text_color: 0xFFFFFF + on_click: + - lambda: |- + id(alarm_edit_row) = 1; + + - script.execute: open_alarm_time_editor + - button: id: alarm_2_day_m - x: 196 + x: 178 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8796,7 +8997,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8822,9 +9023,9 @@ lvgl: - button: id: alarm_2_day_tu - x: 240 + x: 215 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8837,7 +9038,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8863,9 +9064,9 @@ lvgl: - button: id: alarm_2_day_w - x: 284 + x: 252 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8878,7 +9079,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8904,9 +9105,9 @@ lvgl: - button: id: alarm_2_day_th - x: 328 + x: 289 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8919,7 +9120,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8945,9 +9146,9 @@ lvgl: - button: id: alarm_2_day_f - x: 372 + x: 326 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -8960,7 +9161,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -8986,9 +9187,9 @@ lvgl: - button: id: alarm_2_day_sa - x: 416 + x: 363 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9001,7 +9202,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9027,9 +9228,9 @@ lvgl: - button: id: alarm_2_day_su - x: 460 + x: 400 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9042,7 +9243,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9068,9 +9269,9 @@ lvgl: - button: id: alarm_2_day_h - x: 504 + x: 437 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9083,7 +9284,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9108,10 +9309,42 @@ lvgl: } - button: - id: alarm_2_vibrate_button - x: 556 + id: alarm_2_snooze_button + x: 478 y: 13 - width: 132 + width: 100 + height: 70 + checkable: true + state: + checked: !lambda |- + return id(alarm_snooze_enabled)[1]; + bg_color: 0x28313D + bg_opa: COVER + border_width: 2 + border_color: 0x548C6C + radius: 11 + checked: + bg_color: 0x315843 + border_color: 0x72AE88 + pressed: + bg_color: 0x416F55 + widgets: + - label: + align: CENTER + text: "Snooze" + text_font: font_small + text_color: 0xFFFFFF + + on_value: + then: + - lambda: |- + id(alarm_snooze_enabled)[1] = x; + + - button: + id: alarm_2_vibrate_button + x: 585 + y: 13 + width: 118 height: 70 bg_color: 0x4B3A63 bg_opa: COVER @@ -9148,9 +9381,9 @@ lvgl: - button: id: alarm_2_sound_button - x: 696 + x: 710 y: 13 - width: 126 + width: 112 height: 70 bg_color: 0x384E66 bg_opa: COVER @@ -9187,9 +9420,9 @@ lvgl: - button: id: alarm_2_lamp_button - x: 830 + x: 829 y: 13 - width: 164 + width: 165 height: 70 checkable: true state: @@ -9237,7 +9470,7 @@ lvgl: id: alarm_3_enable_button x: 8 y: 13 - width: 54 + width: 48 height: 70 checkable: true state: @@ -9276,12 +9509,11 @@ lvgl: ? std::string("\U000F0132") : std::string("\U000F0131"); - # Time display. A dedicated 24-hour editor is added next. - button: id: alarm_3_time_button - x: 68 + x: 62 y: 13 - width: 122 + width: 110 height: 70 bg_color: 0x214F72 bg_opa: COVER @@ -9298,11 +9530,17 @@ lvgl: text_font: font_vehicle_bold text_color: 0xFFFFFF + on_click: + - lambda: |- + id(alarm_edit_row) = 2; + + - script.execute: open_alarm_time_editor + - button: id: alarm_3_day_m - x: 196 + x: 178 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9315,7 +9553,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9341,9 +9579,9 @@ lvgl: - button: id: alarm_3_day_tu - x: 240 + x: 215 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9356,7 +9594,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9382,9 +9620,9 @@ lvgl: - button: id: alarm_3_day_w - x: 284 + x: 252 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9397,7 +9635,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9423,9 +9661,9 @@ lvgl: - button: id: alarm_3_day_th - x: 328 + x: 289 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9438,7 +9676,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9464,9 +9702,9 @@ lvgl: - button: id: alarm_3_day_f - x: 372 + x: 326 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9479,7 +9717,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9505,9 +9743,9 @@ lvgl: - button: id: alarm_3_day_sa - x: 416 + x: 363 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9520,7 +9758,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9546,9 +9784,9 @@ lvgl: - button: id: alarm_3_day_su - x: 460 + x: 400 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9561,7 +9799,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9587,9 +9825,9 @@ lvgl: - button: id: alarm_3_day_h - x: 504 + x: 437 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9602,7 +9840,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9627,10 +9865,42 @@ lvgl: } - button: - id: alarm_3_vibrate_button - x: 556 + id: alarm_3_snooze_button + x: 478 y: 13 - width: 132 + width: 100 + height: 70 + checkable: true + state: + checked: !lambda |- + return id(alarm_snooze_enabled)[2]; + bg_color: 0x28313D + bg_opa: COVER + border_width: 2 + border_color: 0x548C6C + radius: 11 + checked: + bg_color: 0x315843 + border_color: 0x72AE88 + pressed: + bg_color: 0x416F55 + widgets: + - label: + align: CENTER + text: "Snooze" + text_font: font_small + text_color: 0xFFFFFF + + on_value: + then: + - lambda: |- + id(alarm_snooze_enabled)[2] = x; + + - button: + id: alarm_3_vibrate_button + x: 585 + y: 13 + width: 118 height: 70 bg_color: 0x4B3A63 bg_opa: COVER @@ -9667,9 +9937,9 @@ lvgl: - button: id: alarm_3_sound_button - x: 696 + x: 710 y: 13 - width: 126 + width: 112 height: 70 bg_color: 0x384E66 bg_opa: COVER @@ -9706,9 +9976,9 @@ lvgl: - button: id: alarm_3_lamp_button - x: 830 + x: 829 y: 13 - width: 164 + width: 165 height: 70 checkable: true state: @@ -9756,7 +10026,7 @@ lvgl: id: alarm_4_enable_button x: 8 y: 13 - width: 54 + width: 48 height: 70 checkable: true state: @@ -9795,12 +10065,11 @@ lvgl: ? std::string("\U000F0132") : std::string("\U000F0131"); - # Time display. A dedicated 24-hour editor is added next. - button: id: alarm_4_time_button - x: 68 + x: 62 y: 13 - width: 122 + width: 110 height: 70 bg_color: 0x214F72 bg_opa: COVER @@ -9817,11 +10086,17 @@ lvgl: text_font: font_vehicle_bold text_color: 0xFFFFFF + on_click: + - lambda: |- + id(alarm_edit_row) = 3; + + - script.execute: open_alarm_time_editor + - button: id: alarm_4_day_m - x: 196 + x: 178 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9834,7 +10109,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9860,9 +10135,9 @@ lvgl: - button: id: alarm_4_day_tu - x: 240 + x: 215 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9875,7 +10150,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9901,9 +10176,9 @@ lvgl: - button: id: alarm_4_day_w - x: 284 + x: 252 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9916,7 +10191,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9942,9 +10217,9 @@ lvgl: - button: id: alarm_4_day_th - x: 328 + x: 289 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9957,7 +10232,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -9983,9 +10258,9 @@ lvgl: - button: id: alarm_4_day_f - x: 372 + x: 326 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -9998,7 +10273,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -10024,9 +10299,9 @@ lvgl: - button: id: alarm_4_day_sa - x: 416 + x: 363 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -10039,7 +10314,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -10065,9 +10340,9 @@ lvgl: - button: id: alarm_4_day_su - x: 460 + x: 400 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -10080,7 +10355,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -10106,9 +10381,9 @@ lvgl: - button: id: alarm_4_day_h - x: 504 + x: 437 y: 13 - width: 40 + width: 34 height: 70 checkable: true state: @@ -10121,7 +10396,7 @@ lvgl: bg_opa: COVER border_width: 1 border_color: 0x445365 - radius: 10 + radius: 9 checked: bg_color: 0x315843 border_color: 0x72AE88 @@ -10146,10 +10421,42 @@ lvgl: } - button: - id: alarm_4_vibrate_button - x: 556 + id: alarm_4_snooze_button + x: 478 y: 13 - width: 132 + width: 100 + height: 70 + checkable: true + state: + checked: !lambda |- + return id(alarm_snooze_enabled)[3]; + bg_color: 0x28313D + bg_opa: COVER + border_width: 2 + border_color: 0x548C6C + radius: 11 + checked: + bg_color: 0x315843 + border_color: 0x72AE88 + pressed: + bg_color: 0x416F55 + widgets: + - label: + align: CENTER + text: "Snooze" + text_font: font_small + text_color: 0xFFFFFF + + on_value: + then: + - lambda: |- + id(alarm_snooze_enabled)[3] = x; + + - button: + id: alarm_4_vibrate_button + x: 585 + y: 13 + width: 118 height: 70 bg_color: 0x4B3A63 bg_opa: COVER @@ -10186,9 +10493,9 @@ lvgl: - button: id: alarm_4_sound_button - x: 696 + x: 710 y: 13 - width: 126 + width: 112 height: 70 bg_color: 0x384E66 bg_opa: COVER @@ -10225,9 +10532,9 @@ lvgl: - button: id: alarm_4_lamp_button - x: 830 + x: 829 y: 13 - width: 164 + width: 165 height: 70 checkable: true state: @@ -10315,6 +10622,269 @@ lvgl: - script.execute: apply_dim_backlight + #:####################################################################################:# + # ALARM TIME EDITOR PAGE + #:####################################################################################:# + # + # One shared 24-hour editor is used by all four alarm rows. + - id: alarm_time_editor_page + skip: true + bg_color: 0x10151D + bg_opa: COVER + + widgets: + - label: + id: alarm_time_editor_title + x: 0 + y: 18 + width: 1024 + text: "Set Alarm" + text_font: font_title + text_align: CENTER + text_color: 0xFFFFFF + + - label: + id: alarm_time_preview_label + x: 0 + y: 65 + width: 1024 + text: "07:00" + text_font: font_navigation_time + text_align: CENTER + text_color: 0x8CC7EA + + - label: + x: 180 + y: 112 + width: 250 + text: "Hour" + text_font: font_small + text_align: CENTER + text_color: 0xAEB8C4 + + - label: + x: 594 + y: 112 + width: 250 + text: "Minute" + text_font: font_small + text_align: CENTER + text_color: 0xAEB8C4 + + - roller: + id: alarm_hour_roller + x: 180 + y: 140 + width: 250 + height: 245 + mode: INFINITE + visible_row_count: 5 + anim_time: 180ms + selected_index: 7 + options: + - "00" + - "01" + - "02" + - "03" + - "04" + - "05" + - "06" + - "07" + - "08" + - "09" + - "10" + - "11" + - "12" + - "13" + - "14" + - "15" + - "16" + - "17" + - "18" + - "19" + - "20" + - "21" + - "22" + - "23" + bg_color: 0x171F29 + bg_opa: COVER + border_width: 2 + border_color: 0x3E7FA7 + radius: 16 + text_font: font_title + text_align: CENTER + text_color: 0x8D98A6 + text_line_space: 10 + selected: + bg_color: 0x214F72 + bg_opa: COVER + text_font: font_navigation_time + text_color: 0xFFFFFF + + on_value: + then: + - lambda: |- + id(alarm_edit_hour) = + static_cast(x); + + - script.execute: refresh_alarm_time_preview + + - label: + x: 462 + y: 220 + width: 100 + text: ":" + text_font: font_navigation_time + text_align: CENTER + text_color: 0xFFFFFF + + - roller: + id: alarm_minute_roller + x: 594 + y: 140 + width: 250 + height: 245 + mode: INFINITE + visible_row_count: 5 + anim_time: 180ms + selected_index: 0 + options: + - "00" + - "01" + - "02" + - "03" + - "04" + - "05" + - "06" + - "07" + - "08" + - "09" + - "10" + - "11" + - "12" + - "13" + - "14" + - "15" + - "16" + - "17" + - "18" + - "19" + - "20" + - "21" + - "22" + - "23" + - "24" + - "25" + - "26" + - "27" + - "28" + - "29" + - "30" + - "31" + - "32" + - "33" + - "34" + - "35" + - "36" + - "37" + - "38" + - "39" + - "40" + - "41" + - "42" + - "43" + - "44" + - "45" + - "46" + - "47" + - "48" + - "49" + - "50" + - "51" + - "52" + - "53" + - "54" + - "55" + - "56" + - "57" + - "58" + - "59" + bg_color: 0x171F29 + bg_opa: COVER + border_width: 2 + border_color: 0x3E7FA7 + radius: 16 + text_font: font_title + text_align: CENTER + text_color: 0x8D98A6 + text_line_space: 10 + selected: + bg_color: 0x214F72 + bg_opa: COVER + text_font: font_navigation_time + text_color: 0xFFFFFF + + on_value: + then: + - lambda: |- + id(alarm_edit_minute) = + static_cast(x); + + - script.execute: refresh_alarm_time_preview + + - button: + id: alarm_time_cancel_button + x: 260 + y: 407 + width: 220 + height: 70 + bg_color: 0x673238 + bg_opa: COVER + border_width: 2 + border_color: 0xA45A63 + radius: 14 + pressed: + bg_color: 0x82414A + widgets: + - label: + align: CENTER + text: "Cancel" + text_font: font_button + text_color: 0xFFFFFF + + on_click: + - script.execute: refresh_alarm_clock_page + + - lvgl.page.show: + id: alarm_clock_page + animation: MOVE_RIGHT + time: 220ms + + - script.execute: apply_active_backlight + + - button: + id: alarm_time_save_button + x: 544 + y: 407 + width: 220 + height: 70 + bg_color: 0x315843 + bg_opa: COVER + border_width: 2 + border_color: 0x72AE88 + radius: 14 + pressed: + bg_color: 0x416F55 + widgets: + - label: + align: CENTER + text: "Save" + text_font: font_button + text_color: 0xFFFFFF + + on_click: + - script.execute: save_alarm_time_editor + #:####################################################################################:# # CLOCK PAGE #:####################################################################################:#