From bc2a75470639127f0f2ce1899cf048e25632b606 Mon Sep 17 00:00:00 2001 From: Max Gramser Date: Thu, 17 Sep 2026 12:07:03 +0200 Subject: [PATCH] Add Dark mode for a screen beside the bed, with every colour in one table (0.2.63) Dark mode is a new switch under Brightness on the screen's settings page, in the Screen settings of ESP Screens and as switch._dark_mode in Home Assistant, so an automation can turn it on at bedtime. The screen changes look at once, open cards and an alert included, and keeps it after a restart. The design stays the same: a black page, graphite cards with a hairline, soft white text, Home Assistant's state colours where they tell something, and pastel card colours as deeper versions of themselves. Every colour the firmware chooses now lives in components/smart_display/ theme.h: roles with a light and a dark value, the named card colours and Home Assistant's state colours. The board profiles give widgets colourless shared styles that theme.h fills, so a change of look refills those styles and draws again what code painted by state. The light look is unchanged apart from merges below one panel step. Dark mode costs 440 bytes of static RAM on the CYD, and the LVGL tree of the host build is 416 bytes smaller; tests keep colours out of every other file. Comparing a screen that switched looks with one that booted in it also found two older bugs, now fixed: a settings switch that was on showed its knob at the left whenever its page was drawn, and the sun card's sunlit area turned orange after a palette change. Firmware 0.2.54. Co-Authored-By: Claude Opus 5 --- AGENTS.md | 4 + README.md | 6 + README_EXTENDED.md | 9 +- components/smart_display/alert_overlay.h | 2 +- components/smart_display/climate_card.h | 15 +- components/smart_display/cyd_calibration.h | 7 +- components/smart_display/light_controls.h | 49 ++- components/smart_display/runtime_tiles.h | 361 +++++++++-------- components/smart_display/settings_screen.h | 90 +++-- components/smart_display/theme.h | 349 ++++++++++++++++ components/smart_display/tile_controls.h | 16 +- components/smart_display/tile_palette.h | 17 +- docs/EASY_SETUP.md | 1 + docs/RELEASING.md | 47 +++ docs/SETTINGS.md | 7 +- docs/THEME.md | 84 ++++ docs/images/guition-dark-controls.png | Bin 0 -> 29514 bytes docs/images/guition-dark-home.png | Bin 0 -> 36611 bytes docs/images/guition-dark-page-4.png | Bin 0 -> 42528 bytes guition-4848s040.yaml | 435 ++++++++------------ home-like-2432s028.yaml | 440 ++++++++------------- packages/cyd.yaml | 440 ++++++++------------- packages/guition.yaml | 435 ++++++++------------ screen_manager/CHANGELOG.md | 12 + screen_manager/app/claude_skill.py | 31 +- screen_manager/app/core.py | 10 +- screen_manager/app/server.py | 2 + screen_manager/app/static/app.js | 1 + screen_manager/config.yaml | 2 +- tests/test_alert_overlay.cpp | 7 +- tests/test_alerts_reference.py | 6 +- tests/test_claude_skill.py | 15 +- tests/test_off_look.py | 5 +- tests/test_screen_owned_settings.py | 31 +- tests/test_settings_screen.cpp | 23 +- tests/test_theme.cpp | 118 ++++++ tests/test_theme.py | 162 ++++++++ tests/test_tile_controls.cpp | 1 + tests/test_tile_palette.cpp | 3 +- tests/test_tile_palette.py | 5 +- 40 files changed, 1885 insertions(+), 1363 deletions(-) create mode 100644 components/smart_display/theme.h create mode 100644 docs/THEME.md create mode 100644 docs/images/guition-dark-controls.png create mode 100644 docs/images/guition-dark-home.png create mode 100644 docs/images/guition-dark-page-4.png create mode 100644 tests/test_theme.cpp create mode 100644 tests/test_theme.py diff --git a/AGENTS.md b/AGENTS.md index daec794..a056796 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -49,6 +49,10 @@ physically tap; an agent cannot replace that with software coordinates. - Keep base hardware and UI in `home-like-2432s028.yaml`; personal data belongs in the gitignored local profiles. +- Colours live in one table: `components/smart_display/theme.h` (firmware 0.2.54+). Every role has a + light and a dark value, board profiles name paints (`styles: paint_card`) instead of writing a colour, + and firmware code asks for a role (`theme::color(theme::INK)`). Never write a hex colour in a profile or + another header; docs/THEME.md is the recipe, tests/test_theme.py and tests/test_theme.cpp guard it. - Screen settings live in one table: `components/smart_display/settings_screen.h` draws the page on the screen, `SETTING_RULES` in the add-on validates the same keys. Firmware 0.2.49+ owns them: every writer (the page, the entities in both profiles) goes through diff --git a/README.md b/README.md index 0b28e2a..f6a28ce 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,12 @@ no reflash, no YAML to write, no blueprint, MQTT or token. The history card on the CYD: power over 24 hours with its highest and lowest moment, an axis in watts and clock times

The same cards on the 2.8-inch CYD, 320 × 240.

+

+ Dark mode on the Guition: the same home page with a black page, graphite cards and soft white text, the clock, the temperature graph, the weather, a lamp and presence + Dark mode with direct control: the heating setpoint, the dimmer's slider and the Sonos volume keep their colours + Dark mode with pastel backgrounds: the coffee machine and the good-night script keep their colour, deeper +

+

Dark mode, for a screen beside the bed: the same pages, darker. It is a switch on the screen, in ESP Screens and in Home Assistant, so an automation can turn it on at bedtime.

## Managed from Home Assistant diff --git a/README_EXTENDED.md b/README_EXTENDED.md index 2101ee7..35f4fed 100644 --- a/README_EXTENDED.md +++ b/README_EXTENDED.md @@ -74,11 +74,12 @@ on the screen itself, and how updates work. (open/closed), the alarm, who's home, or when something or someone last changed ("5 min ago", "Yesterday"). See [Top bar](#top-bar). - **Screen settings:** standby time, normal and dimmed brightness, - night hours, 24- or 12-hour clock, return to the home page, and optional swiping - between pages. Change them in ESP Screens, where they apply at once, or on the screen + night hours, **Dark mode** (firmware 0.2.54+), 24- or 12-hour clock, return to the home page, + and optional swiping between pages. Change them in ESP Screens, where they apply at once, or on the screen itself. With firmware 0.2.49+ the screen keeps them, and every one of them is also an entity in Home Assistant, so an automation can switch **Night mode** or **Auto standby** - (firmware 0.2.41+), for example to keep a screen on while someone is home, and + (firmware 0.2.41+), for example to keep a screen on while someone is home, turn **Dark mode** + on at bedtime (firmware 0.2.54+), and wake a screen or put it to sleep with its **Wake** and **Sleep** buttons (firmware 0.2.45+). See [Wake and sleep](#wake-and-sleep-from-an-automation). - **Settings on the screen itself** (firmware 0.2.44+): hold the top bar for about a @@ -313,7 +314,7 @@ Home Assistant, `esphome._open_settings` opens it too (`page` 0 menu, 1 | Group | What is on it | |---|---| -| Brightness | Brightness, Auto standby, Standby after, Standby brightness | +| Brightness | Brightness, Dark mode, Auto standby, Standby after, Standby brightness | | Night | Night mode, Starts, Ends, Night brightness | | Screen | 12/24-hour clock, back to page 1 by itself and after how long, also on standby, swiping between pages, rotation (boards that turn) | | This screen | Name, IP address, firmware version, Home Assistant connected, Restart | diff --git a/components/smart_display/alert_overlay.h b/components/smart_display/alert_overlay.h index d9c07ed..09b2639 100644 --- a/components/smart_display/alert_overlay.h +++ b/components/smart_display/alert_overlay.h @@ -13,7 +13,7 @@ namespace screen_alert { constexpr const char *FALLBACK_ICON = "alert-outline"; constexpr const char *FALLBACK_TITLE = "Notification"; constexpr const char *FALLBACK_BUTTON = "OK"; -constexpr uint32_t DEFAULT_CARD_COLOR = 0xFFFFFF; +constexpr uint32_t DEFAULT_CARD_COLOR = 0; // the normal card: theme::surface(0) constexpr int MAX_TIMEOUT_SECONDS = 86400; struct Alert { diff --git a/components/smart_display/climate_card.h b/components/smart_display/climate_card.h index 59ff250..392057d 100644 --- a/components/smart_display/climate_card.h +++ b/components/smart_display/climate_card.h @@ -7,6 +7,7 @@ #include "esphome/core/hal.h" #include "esphome/core/log.h" #include "lvgl.h" +#include "theme.h" #include #include #include @@ -47,13 +48,13 @@ inline int text_width(const std::string &text, const lv_font_t *font) { lv_text_get_size(&size, text.c_str(), font, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE); return size.x; } -inline lv_obj_t *shape(lv_obj_t *parent, int x, int y, int w, int h, uint32_t color, int radius) { +inline lv_obj_t *shape(lv_obj_t *parent, int x, int y, int w, int h, theme::Role color, int radius) { auto *o = lv_obj_create(parent); lv_obj_remove_style_all(o); lv_obj_set_pos(o, x, y); lv_obj_set_size(o, w, h); lv_obj_set_style_radius(o, radius, 0); - lv_obj_set_style_bg_color(o, lv_color_hex(color), 0); + lv_obj_set_style_bg_color(o, theme::color(color), 0); lv_obj_set_style_bg_opa(o, LV_OPA_COVER, 0); lv_obj_remove_flag(o, LV_OBJ_FLAG_CLICKABLE); lv_obj_remove_flag(o, LV_OBJ_FLAG_SCROLLABLE); @@ -87,9 +88,9 @@ inline void build() { auto *icon = lv_label_create(card); lv_label_set_text(icon, row.icon); lv_obj_set_style_text_font(icon, look.icon_font, 0); - lv_obj_set_style_text_color(icon, lv_color_hex(0x6B6B6B), 0); + lv_obj_set_style_text_color(icon, theme::color(theme::SUBTLE), 0); lv_obj_set_pos(icon, look.edge, y + (look.row_h - icon_h) / 2); - shape(card, track_x, y, track_w, look.row_h, 0xF1F1F1, look.row_h / 2); + shape(card, track_x, y, track_w, look.row_h, theme::TRACK, look.row_h / 2); const unsigned n = choices(row.modes); std::string labels[MAX_CHOICES]; int widths[MAX_CHOICES], words = 0; @@ -104,16 +105,16 @@ inline void build() { const int sw = i + 1 == n ? track_x + track_w - inset - sx : (words <= room ? widths[i] + share : room / static_cast(n)); const bool selected = cyd::list_item(row.modes, i) == row.current; const int sh = look.row_h - 2 * inset; - auto *segment = shape(card, sx, y + inset, sw, sh, 0x009FE3, sh / 2); + auto *segment = shape(card, sx, y + inset, sw, sh, theme::ACCENT, sh / 2); lv_obj_add_flag(segment, LV_OBJ_FLAG_CLICKABLE); lv_obj_set_style_bg_opa(segment, selected ? LV_OPA_COVER : LV_OPA_TRANSP, 0); lv_obj_set_style_bg_opa(segment, LV_OPA_COVER, LV_STATE_PRESSED); - lv_obj_set_style_bg_color(segment, lv_color_hex(selected ? 0x0075B0 : 0xD5EEFC), LV_STATE_PRESSED); + lv_obj_set_style_bg_color(segment, theme::color(selected ? theme::ACCENT_PRESSED : theme::ACCENT_TINT), LV_STATE_PRESSED); auto *label = lv_label_create(segment); lv_label_set_text(label, labels[i].c_str()); lv_label_set_long_mode(label, LV_LABEL_LONG_DOT); lv_obj_set_style_text_font(label, look.font, 0); - lv_obj_set_style_text_color(label, lv_color_hex(selected ? 0xFFFFFF : 0x1B1B1B), 0); + lv_obj_set_style_text_color(label, theme::color(selected ? theme::ON_ACCENT : theme::INK), 0); lv_obj_set_width(label, std::min(sw - 6, widths[i] + 2)); lv_obj_remove_flag(label, LV_OBJ_FLAG_CLICKABLE); lv_obj_center(label); diff --git a/components/smart_display/cyd_calibration.h b/components/smart_display/cyd_calibration.h index ecd1fcb..ca78082 100644 --- a/components/smart_display/cyd_calibration.h +++ b/components/smart_display/cyd_calibration.h @@ -3,6 +3,7 @@ #include "esphome/core/preferences.h" #include "esphome/core/hal.h" #include "lvgl.h" +#include "theme.h" #include namespace screen_calibration { inline bool active = false, pressed = false; @@ -36,8 +37,8 @@ inline void setup(lv_obj_t *home_screen, const lv_font_t *font, const lv_font_t for (int i = 0; i < 4; ++i) valid &= stored.bounds[i] == calibration.bounds[i]; for (float coefficient : stored.c) valid &= std::isfinite(coefficient); screen = lv_obj_create(nullptr); - lv_obj_set_style_bg_color(screen, lv_color_hex(0x101820), 0); - lv_obj_set_style_text_color(screen, lv_color_hex(0xFFFFFF), 0); + lv_obj_set_style_bg_color(screen, theme::color(theme::CALIBRATION_PAGE), 0); + lv_obj_set_style_text_color(screen, theme::color(theme::CALIBRATION_INK), 0); lv_obj_set_style_text_font(screen, font, 0); instructions = lv_label_create(screen); lv_obj_set_style_text_align(instructions, LV_TEXT_ALIGN_CENTER, 0); @@ -46,7 +47,7 @@ inline void setup(lv_obj_t *home_screen, const lv_font_t *font, const lv_font_t cross = lv_label_create(screen); lv_label_set_text(cross, "+"); lv_obj_set_size(cross, 24, 24); lv_obj_set_style_text_font(cross, large, 0); lv_obj_set_style_text_align(cross, LV_TEXT_ALIGN_CENTER, 0); - lv_obj_set_style_text_color(cross, lv_color_hex(0xFFD34D), 0); + lv_obj_set_style_text_color(cross, theme::color(theme::CALIBRATION_MARK), 0); if (valid) { calibration = stored; if (apply) apply(calibration); } else begin(); } diff --git a/components/smart_display/light_controls.h b/components/smart_display/light_controls.h index 36f01f4..470469a 100644 --- a/components/smart_display/light_controls.h +++ b/components/smart_display/light_controls.h @@ -37,12 +37,13 @@ struct State { #include "esphome/core/log.h" #include "lvgl.h" #include "cyd_ui.h" +#include "theme.h" #include namespace light_controls { inline State states[8]; inline State fallback; inline State *active = &fallback; -struct Row { lv_obj_t *box{}, *slider{}, *value{}; bool dirty = false; unsigned index{}; bool off = false; int held = 0; }; +struct Row { lv_obj_t *box{}, *slider{}, *value{}, *icon{}; bool dirty = false; unsigned index{}; bool off = false; int held = 0; }; inline Row rows[3]; inline std::function commits[3]; inline bool ready = false; @@ -69,10 +70,13 @@ inline void subscribe(const char *const *entities, size_t count) { (void) count; #endif } +// The picker's own spectrum: the colours a light can take, not a look, so they stay the same in dark. +constexpr uint32_t WARM = 0xFF9C32, COOL = 0xC6E6FF; +inline constexpr uint32_t RAINBOW[] = {0xFF0000, 0xFFFF00, 0x00FF00, 0x00FFFF, 0x0000FF, 0xFF00FF, 0xFF0000}; // Temperature knob colour: the same warm-to-cool blend as the track under it. inline lv_color_t kelvin_color(int value, int low, int high) { int mix = high > low ? clamp((value - low) * 255 / (high - low), 0, 255) : 128; - return lv_color_mix(lv_color_hex(0xC6E6FF), lv_color_hex(0xFF9C32), mix); + return lv_color_hex(theme::mix(COOL, WARM, static_cast(mix))); } inline void preview(Row &row) { int value = lv_slider_get_value(row.slider); @@ -88,7 +92,7 @@ inline void preview(Row &row) { // An off light shows only the track, as in Home Assistant, until the slider moves. lv_obj_set_style_bg_opa(row.slider, row.off ? LV_OPA_TRANSP : LV_OPA_COVER, LV_PART_INDICATOR); lv_obj_set_style_bg_opa(row.slider, row.off ? LV_OPA_TRANSP : LV_OPA_COVER, LV_PART_KNOB); - lv_obj_set_style_bg_color(row.slider, lv_color_hex(row.off ? 0xECECEC : 0xFDEFC3), LV_PART_MAIN); + lv_obj_set_style_bg_color(row.slider, theme::color(row.off ? theme::TRACK : theme::AMBER_TRACK), LV_PART_MAIN); if (row.off) lv_label_set_text(row.value, "Off"); else lv_label_set_text_fmt(row.value, "%d %%", value); } @@ -138,6 +142,20 @@ inline lv_obj_t *round_end(lv_obj_t *parent, int x, int y, int size, uint32_t co lv_obj_set_style_bg_color(end, lv_color_hex(color), 0); return end; } +// The colours of the three cards, for setup() and for a change of look. +inline void paint(Row &row) { + lv_obj_set_style_bg_color(row.box, theme::color(theme::CARD), 0); + lv_obj_set_style_border_color(row.box, theme::color(theme::LINE), 0); + lv_obj_set_style_text_color(row.box, theme::color(theme::INK), 0); + lv_obj_set_style_text_color(row.value, theme::color(theme::MUTED), 0); + if (row.icon) lv_obj_set_style_text_color(row.icon, theme::color(theme::MUTED), 0); + if (row.index < 2) lv_obj_set_style_border_color(row.slider, theme::color(theme::KNOB), LV_PART_KNOB); + else lv_obj_set_style_bg_color(row.slider, theme::color(theme::KNOB), LV_PART_KNOB); +} +inline void restyle() { + if (!ready) return; + for (auto &row : rows) { paint(row); preview(row); } +} // Three white cards like the tiles: an icon, the name and the value, then a pill-shaped track. // Colour and temperature are gradient pills with a round knob in the chosen colour; brightness // is filled like the tile sliders, with the white handle inside the fill. @@ -151,22 +169,17 @@ inline void setup(lv_obj_t *parent, const lv_font_t *font, int width, int height int track_x = inset, track_w = w - 2 * inset, track_y = card_h - inset + (large ? 2 : 3) - track_h, radius = track_h / 2; const char *names[] = {"Color", "Color temperature", "Brightness"}; const char *icons[] = {"\U000F03D8", "\U000F050F", "\U000F0335"}; - const uint32_t rainbow[] = {0xFF0000, 0xFFFF00, 0x00FF00, 0x00FFFF, 0x0000FF, 0xFF00FF, 0xFF0000}; for (unsigned i = 0; i < 3; ++i) { auto &row = rows[i]; row.index = i; row.box = plain(parent, margin, top + i * spacing, w, card_h); lv_obj_set_style_bg_opa(row.box, LV_OPA_COVER, 0); - lv_obj_set_style_bg_color(row.box, lv_color_hex(0xFFFFFF), 0); lv_obj_set_style_radius(row.box, large ? 18 : 10, 0); lv_obj_set_style_border_width(row.box, 1, 0); - lv_obj_set_style_border_color(row.box, lv_color_hex(0xDDDDDD), 0); lv_obj_set_style_text_font(row.box, font, 0); - lv_obj_set_style_text_color(row.box, lv_color_hex(0x1B1B1B), 0); int text_x = inset; if (icon_font) { - auto *icon = lv_label_create(row.box); lv_label_set_text(icon, icons[i]); + auto *icon = row.icon = lv_label_create(row.box); lv_label_set_text(icon, icons[i]); lv_obj_set_style_text_font(icon, icon_font, 0); - lv_obj_set_style_text_color(icon, lv_color_hex(0x616161), 0); int icon_h = lv_font_get_line_height(icon_font), text_h = lv_font_get_line_height(font); lv_obj_set_pos(icon, inset - (large ? 2 : 1), text_y + (text_h - icon_h) / 2); text_x += icon_h + (large ? 6 : 4); @@ -174,23 +187,22 @@ inline void setup(lv_obj_t *parent, const lv_font_t *font, int width, int height auto *label = lv_label_create(row.box); lv_label_set_text(label, names[i]); lv_obj_set_pos(label, text_x, text_y); row.value = lv_label_create(row.box); lv_obj_align(row.value, LV_ALIGN_TOP_RIGHT, -inset, text_y); - lv_obj_set_style_text_color(row.value, lv_color_hex(0x616161), 0); row.slider = lv_slider_create(row.box); lv_obj_remove_style_all(row.slider); lv_obj_remove_flag(row.slider, LV_OBJ_FLAG_SCROLLABLE); lv_obj_set_ext_click_area(row.slider, large ? 12 : 8); if (i < 2) { // The knob travels between the centres of the two round ends. - round_end(row.box, track_x, track_y, track_h, i == 0 ? rainbow[0] : 0xFF9C32); - round_end(row.box, track_x + track_w - track_h, track_y, track_h, i == 0 ? rainbow[6] : 0xC6E6FF); + round_end(row.box, track_x, track_y, track_h, i == 0 ? RAINBOW[0] : WARM); + round_end(row.box, track_x + track_w - track_h, track_y, track_h, i == 0 ? RAINBOW[6] : COOL); unsigned segments = i == 0 ? 6 : 1; int span = track_w - track_h; for (unsigned n = 0; n < segments; ++n) { int start = n * span / segments, end = (n + 1) * span / segments; auto *stripe = plain(row.box, track_x + radius + start, track_y, end - start, track_h); lv_obj_set_style_bg_opa(stripe, LV_OPA_COVER, 0); - lv_obj_set_style_bg_color(stripe, lv_color_hex(i == 0 ? rainbow[n] : 0xFF9C32), 0); - lv_obj_set_style_bg_grad_color(stripe, lv_color_hex(i == 0 ? rainbow[n + 1] : 0xC6E6FF), 0); + lv_obj_set_style_bg_color(stripe, lv_color_hex(i == 0 ? RAINBOW[n] : WARM), 0); + lv_obj_set_style_bg_grad_color(stripe, lv_color_hex(i == 0 ? RAINBOW[n + 1] : COOL), 0); lv_obj_set_style_bg_grad_dir(stripe, LV_GRAD_DIR_HOR, 0); } lv_obj_move_foreground(row.slider); @@ -201,9 +213,9 @@ inline void setup(lv_obj_t *parent, const lv_font_t *font, int width, int height lv_obj_set_style_radius(row.slider, LV_RADIUS_CIRCLE, LV_PART_KNOB); lv_obj_set_style_pad_all(row.slider, large ? 4 : 3, LV_PART_KNOB); lv_obj_set_style_border_width(row.slider, large ? 4 : 3, LV_PART_KNOB); - lv_obj_set_style_border_color(row.slider, lv_color_hex(0xFFFFFF), LV_PART_KNOB); lv_obj_set_style_outline_width(row.slider, 1, LV_PART_KNOB); - lv_obj_set_style_outline_color(row.slider, lv_color_hex(0x000000), LV_PART_KNOB); + // A faint dark edge that lifts the white ring off a pale end of the track. + lv_obj_set_style_outline_color(row.slider, lv_color_black(), LV_PART_KNOB); lv_obj_set_style_outline_opa(row.slider, LV_OPA_20, LV_PART_KNOB); lv_slider_set_range(row.slider, i == 0 ? 0 : 2000, i == 0 ? 360 : 6500); } else { @@ -216,12 +228,10 @@ inline void setup(lv_obj_t *parent, const lv_font_t *font, int width, int height lv_obj_set_style_radius(row.slider, corner, LV_PART_INDICATOR); lv_obj_set_style_bg_opa(row.slider, LV_OPA_COVER, LV_PART_MAIN); lv_obj_set_style_bg_opa(row.slider, LV_OPA_COVER, LV_PART_INDICATOR); - lv_obj_set_style_bg_color(row.slider, lv_color_hex(0xFDEFC3), LV_PART_MAIN); - lv_obj_set_style_bg_color(row.slider, lv_color_hex(0xFFC107), LV_PART_INDICATOR); + lv_obj_set_style_bg_color(row.slider, lv_color_hex(theme::ha::AMBER), LV_PART_INDICATOR); // White handle inside the end of the fill, as on the tiles (runtime_tiles::slider_handle). int handle = large ? 4 : 3, back = std::max(1, track_h / 8) + handle / 2, half = track_h >> 1; lv_obj_set_style_bg_opa(row.slider, LV_OPA_COVER, LV_PART_KNOB); - lv_obj_set_style_bg_color(row.slider, lv_color_hex(0xFFFFFF), LV_PART_KNOB); lv_obj_set_style_radius(row.slider, 2, LV_PART_KNOB); lv_obj_set_style_pad_left(row.slider, back + handle / 2 - half, LV_PART_KNOB); lv_obj_set_style_pad_right(row.slider, handle / 2 - back - (track_h - half), LV_PART_KNOB); @@ -232,6 +242,7 @@ inline void setup(lv_obj_t *parent, const lv_font_t *font, int width, int height lv_slider_set_range(row.slider, 1 - below, 100); } lv_obj_add_event_cb(row.slider, event, LV_EVENT_ALL, &row); + paint(row); preview(row); } } diff --git a/components/smart_display/runtime_tiles.h b/components/smart_display/runtime_tiles.h index 9dad9c9..c14658f 100644 --- a/components/smart_display/runtime_tiles.h +++ b/components/smart_display/runtime_tiles.h @@ -2,6 +2,7 @@ #include "runtime_model.h" #include "header_bar.h" #include "tile_palette.h" +#include "theme.h" #include "tile_icon.h" #include "screen_settings.h" #include "settings_screen.h" @@ -32,6 +33,7 @@ using settings_screen::auto_home_seconds; inline esphome::ESPPreferenceObject rotation_preference; inline esphome::ESPPreferenceObject swipe_preference; inline esphome::ESPPreferenceObject home_preference; +inline esphome::ESPPreferenceObject dark_preference; inline Model model; inline std::string inbox; inline const lv_font_t *watch_font = nullptr; @@ -114,8 +116,11 @@ inline void load_settings() { settings_preference = esphome::global_preferences->make_preference(0x53435231); swipe_preference = esphome::global_preferences->make_preference(0x53575031); home_preference = esphome::global_preferences->make_preference(0x484F4D31); + dark_preference = esphome::global_preferences->make_preference(0x44524B31); uint32_t swipe_saved=0; if(swipe_preference.load(&swipe_saved))swipe_pages=swipe_saved==1; + uint32_t dark_saved=0; + if(dark_preference.load(&dark_saved))settings_screen::dark_mode=dark_saved==1; HomeTimeout home; if(home_preference.load(&home) && home.seconds>=30 && home.seconds<=3600){ auto_home=home.enabled?1:0;auto_home_seconds=(int32_t)home.seconds; @@ -136,6 +141,8 @@ inline void persist_settings() { swipe_preference.save(&swipe); HomeTimeout home{(uint32_t) (auto_home ? 1 : 0), (uint32_t) std::clamp(auto_home_seconds, 30, 3600)}; home_preference.save(&home); + uint32_t dark = settings_screen::dark_mode ? 1 : 0; + dark_preference.save(&dark); if (rotation_supported) { uint32_t turned = (uint32_t) rotation; rotation_preference.save(&turned); } } inline bool parse_settings(JsonObject obj, screen_settings::Settings &s) { @@ -624,7 +631,7 @@ inline lv_obj_t *detail_badge_status=nullptr; inline lv_obj_t *detail_switch=nullptr; inline lv_obj_t *detail_label(lv_obj_t *parent,const std::string &text,int x,int y,int width) { auto *label=lv_label_create(parent);lv_label_set_text(label,text.c_str());lv_obj_set_pos(label,x,y);lv_obj_set_width(label,width); - lv_obj_set_style_text_font(label,detail_font,0);lv_obj_set_style_text_color(label,lv_color_hex(0x202020),0); + lv_obj_set_style_text_font(label,detail_font,0);lv_obj_set_style_text_color(label,theme::color(theme::INK),0); lv_label_set_long_mode(label,LV_LABEL_LONG_DOT);lv_obj_set_height(label,lv_font_get_line_height(detail_font));return label; } inline std::string detail_state(const Tile &t){ @@ -708,8 +715,8 @@ inline void choose(Tile &t,Choice &row,const std::string &value){ } inline lv_obj_t *detail_button(const char *text,int x,int y,int width,int height,int command){ auto *button=lv_obj_create(detail_root);lv_obj_remove_style_all(button);lv_obj_set_pos(button,x,y);lv_obj_set_size(button,width,height); - lv_obj_set_style_bg_color(button,lv_color_hex(command==0?0x009FE3:0xD9E6F0),0);lv_obj_set_style_bg_opa(button,LV_OPA_COVER,0);lv_obj_set_style_radius(button,12,0);lv_obj_add_flag(button,LV_OBJ_FLAG_CLICKABLE); - auto *label=detail_label(button,text,6,0,width-12);lv_obj_center(label);lv_obj_set_style_text_align(label,LV_TEXT_ALIGN_CENTER,0);if(command==0)lv_obj_set_style_text_color(label,lv_color_hex(0xFFFFFF),0);lv_obj_remove_flag(label,LV_OBJ_FLAG_CLICKABLE); + lv_obj_set_style_bg_color(button,theme::color(command==0?theme::ACCENT:theme::BUTTON),0);lv_obj_set_style_bg_opa(button,LV_OPA_COVER,0);lv_obj_set_style_radius(button,12,0);lv_obj_add_flag(button,LV_OBJ_FLAG_CLICKABLE); + auto *label=detail_label(button,text,6,0,width-12);lv_obj_center(label);lv_obj_set_style_text_align(label,LV_TEXT_ALIGN_CENTER,0);if(command==0)lv_obj_set_style_text_color(label,theme::color(theme::ON_ACCENT),0);lv_obj_remove_flag(label,LV_OBJ_FLAG_CLICKABLE); lv_obj_add_event_cb(button,[](lv_event_t *e){ int cmd=(intptr_t)lv_event_get_user_data(e);if(cmd==-1){hide_detail();return;} // History ranges (firmware 0.2.51+): redraw after this event, which belongs to a key the redraw deletes. @@ -737,7 +744,7 @@ inline lv_obj_t *detail_button(const char *text,int x,int y,int width,int height if(cmd==40)action(t.state=="active"?"timer.pause":"timer.start",t.entity); if(cmd==41)action("timer.cancel",t.entity); },LV_EVENT_SHORT_CLICKED,(void*)(intptr_t)command); - lv_obj_set_style_bg_color(button,lv_color_hex(0x0075B0),LV_STATE_PRESSED); + lv_obj_set_style_bg_color(button,theme::color(theme::ACCENT_PRESSED),LV_STATE_PRESSED); lv_obj_set_style_transform_width(button,-2,LV_STATE_PRESSED);lv_obj_set_style_transform_height(button,-2,LV_STATE_PRESSED); lv_obj_set_style_opa(button,LV_OPA_50,LV_STATE_DISABLED); if(command>=0 && detail_action_count<32)detail_actions[detail_action_count++]=button; @@ -745,19 +752,24 @@ inline lv_obj_t *detail_button(const char *text,int x,int y,int width,int height } // ---- Weather card: now, the next hours and the coming days, with rain ---- +// The colour of a condition's icon, as this look draws it on a card. inline uint32_t weather_accent(const std::string &c) { - if(c=="sunny")return 0xFFB300; - if(c=="clear-night")return 0x6E41AB; - if(c=="rainy"||c=="pouring"||c=="lightning-rainy"||c=="snowy-rainy")return 0x1E88E5; - if(c=="snowy"||c=="hail")return 0x4FC3F7; - if(c=="lightning")return 0xFFA000; - if(c=="partlycloudy")return 0x7E9BB5; - return 0x78909C; + using namespace theme::ha; + if(c=="sunny")return theme::foreground(SUNNY); + if(c=="clear-night")return theme::foreground(DEEP_PURPLE); + if(c=="rainy"||c=="pouring"||c=="lightning-rainy"||c=="snowy-rainy")return theme::foreground(RAIN); + if(c=="snowy"||c=="hail")return theme::foreground(SNOW); + if(c=="lightning")return theme::foreground(LIGHTNING); + if(c=="partlycloudy")return theme::foreground(PARTLY_CLOUDY); + return theme::foreground(CLOUDY); } inline lv_obj_t *detail_text(lv_obj_t *parent,const std::string &text,int x,int y,int width,const lv_font_t *font,lv_text_align_t align,uint32_t color){ auto *l=detail_label(parent,text,x,y,std::max(1,width));lv_obj_set_style_text_font(l,font,0);lv_obj_set_height(l,lv_font_get_line_height(font)); lv_obj_set_style_text_align(l,align,0);lv_obj_set_style_text_color(l,lv_color_hex(color),0);return l; } +inline lv_obj_t *detail_text(lv_obj_t *parent,const std::string &text,int x,int y,int width,const lv_font_t *font,lv_text_align_t align,theme::Role role){ + return detail_text(parent,text,x,y,width,font,align,theme::hex(role)); +} // "30%", "30% · 1.7 mm" or "1.7 mm": whatever the provider reports; empty when dry. inline std::string rain_text(float chance,float mm,bool with_mm){ char b[32]; @@ -772,9 +784,9 @@ inline std::string degrees(float value){ if(!std::isfinite(value))return "--"; c inline lv_obj_t *detail_card(int x,int y,int w,int h){ auto *card=lv_obj_create(detail_root);lv_obj_remove_style_all(card);lv_obj_remove_flag(card,LV_OBJ_FLAG_SCROLLABLE);lv_obj_remove_flag(card,LV_OBJ_FLAG_CLICKABLE); lv_obj_set_pos(card,x,y);lv_obj_set_size(card,w,h); - lv_obj_set_style_bg_color(card,lv_color_hex(0xFFFFFF),0);lv_obj_set_style_bg_opa(card,LV_OPA_COVER,0); + lv_obj_set_style_bg_color(card,theme::color(theme::CARD),0);lv_obj_set_style_bg_opa(card,LV_OPA_COVER,0); lv_obj_set_style_radius(card,lv_obj_get_style_radius(widgets[0].tile,LV_PART_MAIN),0); - lv_obj_set_style_border_width(card,1,0);lv_obj_set_style_border_color(card,lv_color_hex(0xDDDDDD),0); + lv_obj_set_style_border_width(card,1,0);lv_obj_set_style_border_color(card,theme::color(theme::LINE),0); return card; } // Two cards: "now" with the next hours, and the coming days. Bold highs, muted lows, @@ -787,7 +799,7 @@ inline void render_weather_detail(const Tile &t,bool large,int width,int height, const lv_font_t *mini=mini_icon_font?mini_icon_font:icon_font; const lv_font_t *tiny=watch_icon_font?watch_icon_font:mini; const lv_font_t *small=widgets[0].value?lv_obj_get_style_text_font(widgets[0].value,LV_PART_MAIN):detail_font; - uint32_t ink=0x202020,muted=0x6B6B6B,rain=0x1E88E5; + const uint32_t ink=theme::hex(theme::INK),muted=theme::hex(theme::SUBTLE),rain=theme::foreground(theme::ha::RAIN); int text_h=lv_font_get_line_height(detail_font),small_h=lv_font_get_line_height(small),mini_h=lv_font_get_line_height(mini),tiny_h=lv_font_get_line_height(tiny); int icon_h=lv_font_get_line_height(icon_font),big_h=lv_font_get_line_height(big),hero=std::max(icon_h,big_h); int card_pad=large?14:7,inner=width-2*pad-2*card_pad; @@ -856,6 +868,9 @@ inline lv_obj_t *detail_shape(lv_obj_t *parent,int x,int y,int w,int h,uint32_t lv_obj_set_style_radius(o,radius,0);lv_obj_set_style_bg_color(o,lv_color_hex(color),0);lv_obj_set_style_bg_opa(o,LV_OPA_COVER,0); lv_obj_remove_flag(o,LV_OBJ_FLAG_CLICKABLE);lv_obj_remove_flag(o,LV_OBJ_FLAG_SCROLLABLE);return o; } +inline lv_obj_t *detail_shape(lv_obj_t *parent,int x,int y,int w,int h,theme::Role role,int radius){ + return detail_shape(parent,x,y,w,h,theme::hex(role),radius); +} inline int text_width(const std::string &text,const lv_font_t *font){ lv_point_t size;lv_text_get_size(&size,text.c_str(),font,0,0,LV_COORD_MAX,LV_TEXT_FLAG_NONE);return size.x; } @@ -863,31 +878,30 @@ inline int text_width(const std::string &text,const lv_font_t *font){ // when paused, red on an error; a docked or idle robot keeps the card's own blue. `tint` is the halo. struct VacuumLook { uint32_t accent, tint; }; inline VacuumLook vacuum_look(const std::string &state){ - if(state=="cleaning")return {0x009688,0xDCF0EE}; - if(state=="returning")return {0x2196F3,0xE1EFFD}; - if(state=="paused")return {0xFF9800,0xFFF0DA}; - if(state=="error")return {0xF44336,0xFDE4E2}; - return {0x00A6ED,0xEAF5FC}; + using namespace theme::ha; + const uint32_t accent=state=="cleaning"?TEAL:state=="returning"?BLUE:state=="paused"?ORANGE:state=="error"?RED:SKY; + // A robot at rest has the quietest halo. + return {accent,theme::tint(accent,accent==SKY?22:36)}; } // A robot seen from above on a halo: a white body with a rim, the laser turret, a light bar in the state colour. inline void vacuum_robot(lv_obj_t *parent,int x,int y,int size,const VacuumLook &look){ auto *halo=detail_shape(parent,x,y,size,size,look.tint,size/2); int r=size*72/100,rim=std::max(1,size/44); - auto *body=detail_shape(halo,(size-r)/2,(size-r)/2,r,r,0xFFFFFF,r/2); - lv_obj_set_style_border_width(body,rim,0);lv_obj_set_style_border_color(body,lv_color_hex(0xCEDDE6),0); + auto *body=detail_shape(halo,(size-r)/2,(size-r)/2,r,r,theme::ROBOT_BODY,r/2); + lv_obj_set_style_border_width(body,rim,0);lv_obj_set_style_border_color(body,theme::color(theme::ROBOT_RIM),0); int c=r-2*rim;auto s=[&](int v){return std::max(1,v*c/100);}; - detail_shape(body,s(32),s(10),s(36),s(36),0xE3EBEF,s(18)); - detail_shape(body,s(41),s(19),s(18),s(18),0xA8BCC8,s(9)); + detail_shape(body,s(32),s(10),s(36),s(36),theme::ROBOT_TOP,s(18)); + detail_shape(body,s(41),s(19),s(18),s(18),theme::ROBOT_LENS,s(9)); detail_shape(body,s(31),s(70),s(38),std::max(3,s(7)),look.accent,s(4)); } // A battery like a phone's: outline, level fill (red below 20 %) and a small cap. inline void vacuum_battery(lv_obj_t *parent,int x,int y,int w,int h,float level){ int line=std::max(1,h/7),fill_w=w-4*line,fill=std::clamp((int)std::lround(fill_w*level/100.0f),0,fill_w); - auto *shell=detail_shape(parent,x,y,w,h,0xFFFFFF,std::max(2,h/4)); + auto *shell=detail_shape(parent,x,y,w,h,theme::CARD,std::max(2,h/4)); lv_obj_set_style_bg_opa(shell,LV_OPA_TRANSP,0); - lv_obj_set_style_border_width(shell,line,0);lv_obj_set_style_border_color(shell,lv_color_hex(0x7D858D),0); - if(fill)detail_shape(shell,line,line,fill,h-4*line,level<20?0xE53935:0x46525E,std::max(1,h/9)); - detail_shape(parent,x+w,y+h*3/10,std::max(2,line+1),h-2*(h*3/10),0x7D858D,1); + lv_obj_set_style_border_width(shell,line,0);lv_obj_set_style_border_color(shell,theme::color(theme::BATTERY),0); + if(fill)detail_shape(shell,line,line,fill,h-4*line,level<20?theme::foreground(theme::ha::ALARM):theme::hex(theme::SLATE),std::max(1,h/9)); + detail_shape(parent,x+w,y+h*3/10,std::max(2,line+1),h-2*(h*3/10),theme::BATTERY,1); } // Battery meter, level and a green bolt while charging, in one row from `x`; returns the row's width. // Without a parent it only measures. @@ -900,8 +914,8 @@ inline int vacuum_power(lv_obj_t *parent,const Tile &t,int x,int y,const lv_font if(!parent)return width; vacuum_battery(parent,x,y+(h-meter_h)/2,meter_w,meter_h,t.battery); int px=x+meter_w+3+gap; - detail_text(parent,percent,px,y,words+2,font,LV_TEXT_ALIGN_LEFT,0x5F6368); - if(bolt_w)detail_text(parent,"\U000F0241",px+words+gap/2,y+(h-lv_font_get_line_height(bolt_font))/2,bolt_w+2,bolt_font,LV_TEXT_ALIGN_LEFT,0x43A047); + detail_text(parent,percent,px,y,words+2,font,LV_TEXT_ALIGN_LEFT,theme::MUTED); + if(bolt_w)detail_text(parent,"\U000F0241",px+words+gap/2,y+(h-lv_font_get_line_height(bolt_font))/2,bolt_w+2,bolt_font,LV_TEXT_ALIGN_LEFT,theme::foreground(theme::ha::CHARGING)); return width; } // Put a detail_button's words in `font`, sized to the words and centred (or at `x` when given). @@ -916,12 +930,12 @@ inline lv_obj_t *button_words(lv_obj_t *button,const lv_font_t *font,uint32_t co inline lv_obj_t *vacuum_command(const char *icon,const char *text,int x,int y,int w,int h,int command,bool primary, const lv_font_t *font,const lv_font_t *icon_font,int radius){ auto *button=detail_button(text,x,y,w,h,command); - uint32_t ink=primary?0xFFFFFF:0x1B1B1B; + const uint32_t ink=theme::hex(primary?theme::ON_ACCENT:theme::INK); lv_obj_set_style_radius(button,radius,0); - lv_obj_set_style_bg_color(button,lv_color_hex(primary?0x009FE3:0xFFFFFF),0); + lv_obj_set_style_bg_color(button,theme::color(primary?theme::ACCENT:theme::CARD),0); if(!primary){ - lv_obj_set_style_border_width(button,1,0);lv_obj_set_style_border_color(button,lv_color_hex(0xDDDDDD),0); - lv_obj_set_style_bg_color(button,lv_color_hex(0xEEEEEE),LV_STATE_PRESSED); + lv_obj_set_style_border_width(button,1,0);lv_obj_set_style_border_color(button,theme::color(theme::LINE),0); + lv_obj_set_style_bg_color(button,theme::color(theme::KEY),LV_STATE_PRESSED); } int gap=std::max(6,h/7),icon_w=text_width(icon,icon_font),words=text_width(text,font); int group=icon_w+gap+words,left=std::max(4,(w-group)/2); @@ -936,7 +950,7 @@ inline lv_obj_t *vacuum_command(const char *icon,const char *text,int x,int y,in inline void vacuum_segments(const Tile &t,const Choice &row,int first,int x,int y,int w,int h,uint32_t track,bool border,const lv_font_t *font){ int n=std::min((int)row.values.size(),6);if(!n)return; auto *bar=detail_shape(detail_root,x,y,w,h,track,h/2); - if(border){lv_obj_set_style_border_width(bar,1,0);lv_obj_set_style_border_color(bar,lv_color_hex(0xDDDDDD),0);} + if(border){lv_obj_set_style_border_width(bar,1,0);lv_obj_set_style_border_color(bar,theme::color(theme::LINE),0);} int inset=std::max(3,h/12),room=w-2*inset,words=0;int widths[6]; for(int i=0;i24) - detail_text(detail_root," · "+t.extra().room,pad+dot+10+state_w,y,words-state_w,text,LV_TEXT_ALIGN_LEFT,0x5F6368); + detail_text(detail_root," · "+t.extra().room,pad+dot+10+state_w,y,words-state_w,text,LV_TEXT_ALIGN_LEFT,theme::MUTED); if(battery)vacuum_power(detail_root,t,pad+inner-power_w,y,text,false); y+=line+(gap+4); } @@ -1011,20 +1025,20 @@ inline void render_vacuum_detail(Tile &t,bool large,int width,int height,int pad vacuum_command("\U000F05F8","Dock",pad+start_w+gap,y,inner-start_w-gap,action_h,2,false,text,icons,large?radius:action_h/2); y+=action_h+gap; if(!mode && !suction && !water){ - auto *note=detail_text(detail_root,"Automatic suction power",pad,y+gap,inner,text,LV_TEXT_ALIGN_CENTER,0x6B6B6B);(void)note; + auto *note=detail_text(detail_root,"Automatic suction power",pad,y+gap,inner,text,LV_TEXT_ALIGN_CENTER,theme::SUBTLE);(void)note; return; } // How it cleans. The Guition groups the rows on one white card; the small screen has no room for a card. int mode_h=large?48:34,row_h=large?44:32,step=large?10:6,edge=large?14:0,icon_w=large?40:26; int note_h=lv_font_get_line_height(text); int block=(mode?mode_h:0)+(suction?(mode?step:0)+row_h:0)+(water?((mode||suction)?step:0)+row_h:0)+(automatic?step+note_h+step:0); - uint32_t track=large?0xF1F1F1:0xFFFFFF; + const uint32_t track=theme::hex(large?theme::TRACK:theme::CARD); if(large)detail_card(pad,y,inner,block+2*edge); int x=pad+edge,w=inner-2*edge; y+=edge; if(mode){vacuum_segments(t,*mode,50,x,y,w,mode_h,track,!large,text);y+=mode_h+step;} auto level=[&](const Choice &row,int first,const char *icon){ - detail_text(detail_root,icon,x,y+(row_h-lv_font_get_line_height(icons))/2,icon_w,icons,LV_TEXT_ALIGN_LEFT,0x6B6B6B); + detail_text(detail_root,icon,x,y+(row_h-lv_font_get_line_height(icons))/2,icon_w,icons,LV_TEXT_ALIGN_LEFT,theme::SUBTLE); vacuum_segments(t,row,first,x+icon_w,y,w-icon_w,row_h,track,!large,text); y+=row_h+step; }; @@ -1032,7 +1046,7 @@ inline void render_vacuum_detail(Tile &t,bool large,int width,int height,int pad if(water)level(*water,60,"\U000F058C"); if(automatic){ bool smart=tile_controls::shown_value(t,*mode,now).find("smart")!=std::string::npos; - detail_text(detail_root,smart?"The robot chooses suction and water":"Suction and water as set per room",x,y,w,text,LV_TEXT_ALIGN_CENTER,0x6B6B6B); + detail_text(detail_root,smart?"The robot chooses suction and water":"Suction and water as set per room",x,y,w,text,LV_TEXT_ALIGN_CENTER,theme::SUBTLE); } } // ---- Cover card (firmware 0.2.50+): Home Assistant's cover dialog in the style of the vacuum and climate cards ---- @@ -1040,7 +1054,10 @@ inline void render_vacuum_detail(Tile &t,bool large,int width,int height,int pad // and the tilt as a handle over slats, each with its value below, like Home Assistant's own sliders. Open, stop // and close as a row of pill keys under them; the key of the direction the cover moves is filled. A slider // sends its value when the finger lifts, and shows it while it moves. -inline constexpr uint32_t COVER_ACCENT = 0x926BC7, COVER_TRACK = 0xEFE8F7, COVER_SLATS = 0xDDD0EF; +// Home Assistant's purple for covers; the track and the slats are its tints. +inline constexpr uint32_t COVER_ACCENT = theme::ha::PURPLE; +inline uint32_t cover_track(){return theme::tint(COVER_ACCENT,37);} +inline uint32_t cover_slats(){return theme::tint(COVER_ACCENT,80);} inline lv_obj_t *cover_values[2]{}; inline std::string cover_status_line(const Tile &t){return t.available()?tile_controls::cover_card_status(t):"Unavailable";} inline void cover_slider_event(lv_event_t *e){ @@ -1066,19 +1083,19 @@ inline void cover_slider_event(lv_event_t *e){ inline lv_obj_t *cover_slider(lv_obj_t *parent,int x,int y,int w,int h,float value,bool tilt){ int radius=std::max(8,w/7),handle_h=std::max(4,w/18),handle_w=tilt?w*3/5:w*2/5,inset=std::max(6,w/9); if(tilt){ - auto *slats=detail_shape(parent,x,y,w,h,COVER_TRACK,radius); + auto *slats=detail_shape(parent,x,y,w,h,cover_track(),radius); const int count=10,pitch=(h-2*radius/2)/count; for(int i=0;i &keys,unsigned const auto &key=keys[i]; auto *button=detail_button("",x+(int)i*(key_w+gap),y,key_w,h,70+key.command); lv_obj_set_style_radius(button,h/2,0); - lv_obj_set_style_bg_color(button,lv_color_hex(key.checked?COVER_ACCENT:0xFFFFFF),0); - lv_obj_set_style_bg_color(button,lv_color_hex(key.checked?0x7552A8:0xEEEEEE),LV_STATE_PRESSED); - lv_obj_set_style_border_width(button,key.checked?0:1,0);lv_obj_set_style_border_color(button,lv_color_hex(0xDDDDDD),0); + lv_obj_set_style_bg_color(button,key.checked?lv_color_hex(COVER_ACCENT):theme::color(theme::CARD),0); + lv_obj_set_style_bg_color(button,key.checked?lv_color_hex(theme::ha::PURPLE_PRESSED):theme::color(theme::KEY),LV_STATE_PRESSED); + lv_obj_set_style_border_width(button,key.checked?0:1,0);lv_obj_set_style_border_color(button,theme::color(theme::LINE),0); auto *glyph=lv_obj_get_child(button,0); lv_obj_set_style_text_font(glyph,icons,0);lv_label_set_text(glyph,key.icon); - lv_obj_set_style_text_color(glyph,lv_color_hex(key.checked?0xFFFFFF:0x1B1B1B),0); + lv_obj_set_style_text_color(glyph,theme::color(key.checked?theme::ON_ACCENT:theme::INK),0); lv_obj_set_size(glyph,LV_SIZE_CONTENT,LV_SIZE_CONTENT);lv_obj_center(glyph); if(key.disabled){lv_obj_add_state(button,LV_STATE_DISABLED);if(detail_action_count && detail_actions[detail_action_count-1]==button)--detail_action_count;} } @@ -1131,7 +1148,7 @@ inline void cover_battery(const Tile &t,bool large,int width){ int level=(int)std::lround(std::clamp(t.battery,0.0f,100.0f)); int line=lv_font_get_line_height(font),block=meter_h+gap+line,cx=width-bar_x-bar/2,y=bar_y+(bar-block)/2; vacuum_battery(detail_root,cx-meter_w/2-1,y,meter_w,meter_h,t.battery); - detail_text(detail_root,std::to_string(level)+"%",cx-bar/2-8,y+meter_h+gap,bar+16,font,LV_TEXT_ALIGN_CENTER,0x5F6368); + detail_text(detail_root,std::to_string(level)+"%",cx-bar/2-8,y+meter_h+gap,bar+16,font,LV_TEXT_ALIGN_CENTER,theme::MUTED); } inline void render_cover_detail(Tile &t,bool large,int width,int height,int pad){ auto card=tile_controls::cover_card(t); @@ -1162,8 +1179,8 @@ inline void render_cover_detail(Tile &t,bool large,int width,int height,int pad) for(int i=0;i=static_cast(h.states.size())?0xF1F1F1:h.states[state].color); + dsc.bg_color=lv_color_hex(state<0||state>=static_cast(h.states.size())?theme::hex(theme::TRACK):theme::state(h.states[state].color)); lv_area_t piece{x1,area.y1,std::max(x1,x2),area.y2};lv_draw_rect(layer,&dsc,&piece); } } inline void history_restore(){ auto &c=history_chart; - if(c.value){label(c.value,c.value_text);lv_obj_set_style_text_color(c.value,lv_color_hex(0x1B1B1B),0);} + if(c.value){label(c.value,c.value_text);lv_obj_set_style_text_color(c.value,theme::color(theme::INK),0);} if(c.first)label(c.first,c.first_text); if(c.second)label(c.second,c.second_text); } @@ -1292,7 +1309,7 @@ inline void history_scrub(lv_event_t *e){ const uint64_t span=h.end-h.start; const uint32_t begin=h.start+static_cast(span*i/history_view::PARTS),finish=h.start+static_cast(span*(i+1)/history_view::PARTS); label(c.value,h.has[i]?history_view::number(h.values[i],h.decimals,h.unit):"No data"); - lv_obj_set_style_text_color(c.value,lv_color_hex(h.has[i]?c.accent:0x6B6B6B),0); + lv_obj_set_style_text_color(c.value,lv_color_hex(h.has[i]?theme::foreground(c.accent):theme::hex(theme::SUBTLE)),0); if(c.first)label(c.first,history_clock(begin,week)+" \u2013 "+history_clock(finish,false)); if(c.second)label(c.second,!h.has[i]?"":h.hours==1?"average":"average of "+history_view::duration(finish-begin)); }else{ @@ -1317,7 +1334,7 @@ inline void history_times(int x,int w,int y,const lv_font_t *font,bool large){ const auto &h=history; const lv_font_t *bold=detail_font?detail_font:font; const int now_w=text_width("Now",bold),gap=large?10:6; - detail_text(detail_root,"Now",x+w-now_w,y,now_w+2,bold,LV_TEXT_ALIGN_LEFT,0x1B1B1B); + detail_text(detail_root,"Now",x+w-now_w,y,now_w+2,bold,LV_TEXT_ALIGN_LEFT,theme::INK); int last=x-1000; for(uint32_t at:h.times){ if(at<=h.start||at>=h.end)continue; @@ -1326,8 +1343,8 @@ inline void history_times(int x,int w,int y,const lv_font_t *font,bool large){ const int tw=text_width(words,font),cx=x+static_cast(std::lround(float(at-h.start)/float(h.end-h.start)*w)); const int left=std::max(x-(large?8:4),cx-tw/2); if(left<=last+gap||left+tw>x+w-now_w-gap)continue; - detail_shape(detail_root,cx,y-(large?7:4),1,large?5:3,0xCCCCCC,0); - detail_text(detail_root,words,left,y,tw+2,font,LV_TEXT_ALIGN_LEFT,0x6B6B6B); + detail_shape(detail_root,cx,y-(large?7:4),1,large?5:3,theme::TICK,0); + detail_text(detail_root,words,left,y,tw+2,font,LV_TEXT_ALIGN_LEFT,theme::SUBTLE); last=left+tw; } } @@ -1346,8 +1363,8 @@ inline void render_history_line(bool large,int card_x,int card_y,int card_w,int if(c.w<40||c.h<24)return; for(const auto &tick:h.ticks){ const int ty=static_cast(std::lround(history_y(tick.first))); - detail_shape(detail_root,c.x,ty,c.w,1,0xEEEEEE,0); - detail_text(detail_root,tick.second,card_x+edge,ty-label_h/2,label_w+2,small,LV_TEXT_ALIGN_RIGHT,0x6B6B6B); + detail_shape(detail_root,c.x,ty,c.w,1,theme::GRID,0); + detail_text(detail_root,tick.second,card_x+edge,ty-label_h/2,label_w+2,small,LV_TEXT_ALIGN_RIGHT,theme::SUBTLE); } // Through the middle of each part, from the left edge when the range begins with a value, to "Now" at the right // (the value now); a curve that never overshoots them, so the axis and the highest and lowest moment stay true. @@ -1388,7 +1405,7 @@ inline void render_history_line(bool large,int card_x,int card_y,int card_w,int auto marker=[&](float value,float at_x,bool high){ const int mx=c.x+static_cast(std::lround(at_x)); const int my=static_cast(std::lround(history_y(value))); - auto *o=detail_shape(detail_root,mx-ring/2,my-ring/2,ring,ring,0xFFFFFF,ring/2); + auto *o=detail_shape(detail_root,mx-ring/2,my-ring/2,ring,ring,theme::CARD,ring/2); lv_obj_set_style_border_width(o,large?3:2,0);lv_obj_set_style_border_color(o,lv_color_hex(c.accent),0); if(!large)return; const std::string words=history_view::number(value,h.decimals,""); @@ -1397,14 +1414,14 @@ inline void render_history_line(bool large,int card_x,int card_y,int card_w,int if(lyc.y+c.h+6)ly=my-ring/2-lh-2; const int lx=std::max(c.x,std::min(mx-tw/2,c.x+c.w-tw)); - detail_text(detail_root,words,lx,ly,tw,detail_font,LV_TEXT_ALIGN_CENTER,0x1B1B1B); + detail_text(detail_root,words,lx,ly,tw,detail_font,LV_TEXT_ALIGN_CENTER,theme::INK); }; if(std::isfinite(c.high))marker(c.high,high_x,true); if(std::isfinite(c.low)&&c.low!=c.high)marker(c.low,low_x,false); if(std::isfinite(current)){ const int size=large?12:8; auto *o=detail_shape(detail_root,c.x+c.w-1-size/2,static_cast(std::lround(history_y(current)))-size/2,size,size,c.accent,size/2); - lv_obj_set_style_border_width(o,2,0);lv_obj_set_style_border_color(o,lv_color_hex(0xFFFFFF),0); + lv_obj_set_style_border_width(o,2,0);lv_obj_set_style_border_color(o,theme::color(theme::CARD),0); } history_times(c.x,c.w,c.y+c.h+(large?8:4),small,large); history_touch(c.x-(large?14:8),card_y,c.w+(large?28:16),card_h); @@ -1428,11 +1445,11 @@ inline void render_history_timeline(bool large,int card_x,int card_y,int card_w, const size_t shown=std::min(h.states.size(),static_cast(rows)*2); for(size_t i=0;i(i%2)*col_w,ly=top+static_cast(i/2)*row_h; - detail_shape(detail_root,lx,ly+(label_h-square)/2,square,square,h.states[i].color,large?4:2); + detail_shape(detail_root,lx,ly+(label_h-square)/2,square,square,theme::state(h.states[i].color),large?4:2); const std::string time=history_view::duration(h.states[i].seconds); const int tw=text_width(time,small)+2,words_x=lx+square+(large?10:5),time_x=lx+col_w-(large?14:8)-tw; - detail_text(detail_root,h.states[i].label,words_x,ly,std::max(8,time_x-words_x-6),small,LV_TEXT_ALIGN_LEFT,0x1B1B1B); - detail_text(detail_root,time,time_x,ly,tw,small,LV_TEXT_ALIGN_LEFT,0x6B6B6B); + detail_text(detail_root,h.states[i].label,words_x,ly,std::max(8,time_x-words_x-6),small,LV_TEXT_ALIGN_LEFT,theme::INK); + detail_text(detail_root,time,time_x,ly,tw,small,LV_TEXT_ALIGN_LEFT,theme::SUBTLE); } history_touch(c.x-(large?14:8),card_y,c.w+(large?28:16),c.y+c.h+(large?24:12)-card_y); } @@ -1442,19 +1459,19 @@ inline void history_ranges(int x,int y,int w,int h){ static const uint32_t hours[]={1,24,168}; static const char *const words[]={"1 hour","24 hours","1 week"}; const lv_font_t *font=control_font?control_font:detail_font; - auto *track=detail_shape(detail_root,x,y,w,h,0xFFFFFF,h/2); - lv_obj_set_style_border_width(track,1,0);lv_obj_set_style_border_color(track,lv_color_hex(0xDDDDDD),0); + auto *track=detail_shape(detail_root,x,y,w,h,theme::CARD,h/2); + lv_obj_set_style_border_width(track,1,0);lv_obj_set_style_border_color(track,theme::color(theme::LINE),0); const int inset=std::max(3,h/10),sw=(w-2*inset)/3; for(int i=0;i<3;++i){ const bool selected=history_hours==hours[i]; const int segment_w=i==2?w-2*inset-2*sw:sw; auto *segment=detail_button(words[i],x+inset+i*sw,y+inset,segment_w,h-2*inset,160+i); lv_obj_set_style_radius(segment,(h-2*inset)/2,0); - lv_obj_set_style_bg_color(segment,lv_color_hex(0x009FE3),0); + lv_obj_set_style_bg_color(segment,theme::color(theme::ACCENT),0); lv_obj_set_style_bg_opa(segment,selected?LV_OPA_COVER:LV_OPA_TRANSP,0); lv_obj_set_style_bg_opa(segment,LV_OPA_COVER,LV_STATE_PRESSED); - if(!selected)lv_obj_set_style_bg_color(segment,lv_color_hex(0xD5EEFC),LV_STATE_PRESSED); - button_words(segment,font,selected?0xFFFFFF:0x1B1B1B,segment_w-6); + if(!selected)lv_obj_set_style_bg_color(segment,theme::color(theme::ACCENT_TINT),LV_STATE_PRESSED); + button_words(segment,font,theme::hex(selected?theme::ON_ACCENT:theme::INK),segment_w-6); if(detail_action_count&&detail_actions[detail_action_count-1]==segment)--detail_action_count; } } @@ -1501,9 +1518,9 @@ inline void render_history_detail(const Tile &t,bool large,int width,int height, const int sw=large?84:52,sh=large?46:28; detail_switch=lv_switch_create(detail_root); lv_obj_set_size(detail_switch,sw,sh);lv_obj_set_pos(detail_switch,right-sw,row+(row_h-sh)/2); - lv_obj_set_style_bg_color(detail_switch,lv_color_hex(0xB0B0B0),LV_PART_MAIN); - lv_obj_set_style_bg_color(detail_switch,lv_color_hex(0xFFB900),static_cast(LV_PART_INDICATOR)|LV_STATE_CHECKED); - lv_obj_set_style_bg_color(detail_switch,lv_color_hex(0xFFFFFF),LV_PART_KNOB); + lv_obj_set_style_bg_color(detail_switch,theme::color(theme::SWITCH_OFF),LV_PART_MAIN); + lv_obj_set_style_bg_color(detail_switch,lv_color_hex(theme::ha::SWITCH_ON),static_cast(LV_PART_INDICATOR)|LV_STATE_CHECKED); + lv_obj_set_style_bg_color(detail_switch,theme::color(theme::KNOB),LV_PART_KNOB); lv_obj_set_style_opa(detail_switch,LV_OPA_50,LV_STATE_DISABLED); if(t.state=="on")lv_obj_add_state(detail_switch,LV_STATE_CHECKED); lv_obj_add_event_cb(detail_switch,[](lv_event_t *e){ @@ -1525,16 +1542,16 @@ inline void render_history_detail(const Tile &t,bool large,int width,int height, if(c.ready&&line){for(int i=0;i=480;int pad=large?20:10, top=large?100:62, gap=large?12:6,bh=large?58:34,cw=(width-pad*2-gap)/2; // The same top bar as the board's own cards: a round back arrow at the left, the name centred. int bar=large?60:40,bar_x=large?16:10,bar_y=large?16:8; - auto *back=detail_button("",bar_x,bar_y,bar,bar,-1);lv_obj_set_style_radius(back,LV_RADIUS_CIRCLE,0);lv_obj_set_style_bg_color(back,lv_color_hex(0xEEEEEE),0); + auto *back=detail_button("",bar_x,bar_y,bar,bar,-1);lv_obj_set_style_radius(back,LV_RADIUS_CIRCLE,0);lv_obj_set_style_bg_color(back,theme::color(theme::KEY),0); auto *arrow=lv_obj_get_child(back,0);if(mini_icon_font)lv_obj_set_style_text_font(arrow,mini_icon_font,0);lv_label_set_text(arrow,"\U000F004D");lv_obj_set_size(arrow,LV_SIZE_CONTENT,LV_SIZE_CONTENT);lv_obj_center(arrow); const lv_font_t *title_font=watch_font?watch_font:detail_font; auto *heading=detail_label(detail_root,t.name,bar_x+bar+8,bar_y+(bar-lv_font_get_line_height(title_font))/2,width-2*(bar_x+bar+8)); @@ -1574,7 +1591,7 @@ inline void show_detail(unsigned index){ std::string state=d=="cover"?cover_status_line(t):detail_state(t); // The vacuum and history cards draw their own state. const bool with_history=history_card(t); - if(d!="vacuum"&&!with_history){detail_status=detail_label(detail_root,state+(t.unit.empty()?"":" "+t.unit),pad,large?80:50,width-2*pad);lv_obj_set_style_text_align(detail_status,LV_TEXT_ALIGN_CENTER,0);lv_obj_set_style_text_color(detail_status,lv_color_hex(0x616161),0);} + if(d!="vacuum"&&!with_history){detail_status=detail_label(detail_root,state+(t.unit.empty()?"":" "+t.unit),pad,large?80:50,width-2*pad);lv_obj_set_style_text_align(detail_status,LV_TEXT_ALIGN_CENTER,0);lv_obj_set_style_text_color(detail_status,theme::color(theme::MUTED),0);} if(with_history){ render_history_detail(t,large,width,height,pad); }else if(d=="vacuum"){ @@ -1590,7 +1607,7 @@ inline void show_detail(unsigned index){ int w=(width-pad*2-2*gap)/3; detail_button("Previous",pad,top,w,bh,21);detail_button("Play/pause",pad+w+gap,top,w,bh,20);detail_button("Next",pad+2*(w+gap),top,w,bh,22);top+=bh+gap; detail_label(detail_root,"Volume",pad,top,width-2*pad); - auto *slider=lv_slider_create(detail_root);lv_obj_set_pos(slider,pad+12,top+(large?52:34));lv_obj_set_size(slider,width-2*pad-24,large?24:16);lv_slider_set_range(slider,0,1000);lv_slider_set_value(slider,slider_value(t),LV_ANIM_OFF);lv_obj_set_style_bg_color(slider,lv_color_hex(0x111111),LV_PART_KNOB); + auto *slider=lv_slider_create(detail_root);lv_obj_set_pos(slider,pad+12,top+(large?52:34));lv_obj_set_size(slider,width-2*pad-24,large?24:16);lv_slider_set_range(slider,0,1000);lv_slider_set_value(slider,slider_value(t),LV_ANIM_OFF);lv_obj_set_style_bg_color(slider,theme::color(theme::SLIDER_KNOB),LV_PART_KNOB); lv_obj_add_event_cb(slider,slider_event,LV_EVENT_ALL,(void*)(uintptr_t)index); }else if(d=="weather"){ render_weather_detail(t,large,width,height,pad); @@ -1826,10 +1843,11 @@ inline void bind(size_t index, lv_obj_t *tile, lv_obj_t *title, lv_obj_t *value, w.slider=lv_slider_create(tile);lv_obj_set_size(w.slider,lv_obj_get_width(tile)-24,lv_obj_get_height(tile)>80?28:10);lv_obj_align(w.slider,LV_ALIGN_BOTTOM_MID,0,0);lv_slider_set_range(w.slider,0,1000); // A short white bar inside the fill as handle, like the control sliders (invisible before 0.2.20). int strip=lv_obj_get_height(tile)>80?28:10; - lv_obj_set_style_bg_color(w.slider,lv_color_hex(0xFFFFFF),LV_PART_KNOB);lv_obj_set_style_bg_opa(w.slider,LV_OPA_COVER,LV_PART_KNOB); + lv_obj_add_style(w.slider,theme::style(theme::Paint::knob),LV_PART_KNOB);lv_obj_set_style_bg_opa(w.slider,LV_OPA_COVER,LV_PART_KNOB); slider_handle(w.slider,lv_obj_get_width(tile)-24,strip); lv_obj_set_style_border_width(w.slider,0,LV_PART_KNOB);lv_obj_set_style_shadow_width(w.slider,0,LV_PART_KNOB); - lv_obj_set_style_radius(w.slider,2,LV_PART_KNOB);lv_obj_set_style_bg_color(w.slider,lv_color_hex(0xFCE5B4),LV_PART_MAIN);lv_obj_set_style_bg_color(w.slider,lv_color_hex(0xFFB900),LV_PART_INDICATOR); + // Track and fill follow the card's palette (render_slot), which is drawn before the slider shows. + lv_obj_set_style_radius(w.slider,2,LV_PART_KNOB); lv_obj_add_flag(w.slider,LV_OBJ_FLAG_HIDDEN); lv_obj_remove_flag(w.slider,LV_OBJ_FLAG_GESTURE_BUBBLE); lv_obj_add_event_cb(w.slider,slider_event,LV_EVENT_ALL,(void*)(uintptr_t)index); @@ -1851,29 +1869,30 @@ inline void set_line_width(lv_obj_t *obj, int value) { if (lv_obj_get_style_line // HA's default domain/state palette. Pastel circles also identify inactive domains. // Custom Lovelace card/theme CSS is not an entity attribute and is not imported. inline uint32_t domain_accent(const Tile &t) { + using namespace theme::ha; auto d=t.domain(); - if(d=="light" || d=="switch" || d=="input_boolean" || d=="binary_sensor")return 0xFFC107; + if(d=="light" || d=="switch" || d=="input_boolean" || d=="binary_sensor")return AMBER; // A climate card that is off or in an unknown mode keeps HA's orange climate circle. - if(d=="climate"){uint32_t c=tile_controls::mode_color(t.state);return c==0x9E9E9E?0xFF9800:c;} - if(d=="vacuum")return t.state=="error"?0xF44336:0x009688; - if(d=="fan")return 0x00BCD4; - if(d=="cover")return 0x926BC7; - if(d=="media_player")return 0x03A9F4; - if(d=="scene" || d=="script")return 0x926BC7; - if(d=="select" || d=="input_select")return 0x3F51B5; - if(d=="number" || d=="input_number")return 0x009688; - if(d=="weather")return t.state=="sunny"?0xFFC107:t.state=="clear-night"?0x6E41AB:0x03A9F4; - if(d=="sun")return t.state=="above_horizon"?0xFF9800:0x6E41AB; - if(d=="timer")return t.state=="active"?0x009688:t.state=="paused"?0xFF9800:0x9E9E9E; - if(d=="person")return t.state=="home"?0x4CAF50:0x9E9E9E; - if(d=="screen")return 0x2196F3; + if(d=="climate"){uint32_t c=tile_controls::mode_color(t.state);return c==GREY?ORANGE:c;} + if(d=="vacuum")return t.state=="error"?RED:TEAL; + if(d=="fan")return CYAN; + if(d=="cover")return PURPLE; + if(d=="media_player")return LIGHT_BLUE; + if(d=="scene" || d=="script")return PURPLE; + if(d=="select" || d=="input_select")return INDIGO; + if(d=="number" || d=="input_number")return TEAL; + if(d=="weather")return t.state=="sunny"?AMBER:t.state=="clear-night"?DEEP_PURPLE:LIGHT_BLUE; + if(d=="sun")return t.state=="above_horizon"?ORANGE:DEEP_PURPLE; + if(d=="timer")return t.state=="active"?TEAL:t.state=="paused"?ORANGE:GREY; + if(d=="person")return t.state=="home"?GREEN:GREY; + if(d=="screen")return BLUE; if(d=="sensor"){ - if(t.unit=="lx")return 0xFFC107; - if(t.unit=="°C" || t.unit=="°F")return 0xFF6F22; - if(t.unit=="kWh" || t.unit=="Wh")return 0x926BC7; - if(t.unit=="%")return 0x009688; + if(t.unit=="lx")return AMBER; + if(t.unit=="°C" || t.unit=="°F")return DEEP_ORANGE; + if(t.unit=="kWh" || t.unit=="Wh")return PURPLE; + if(t.unit=="%")return TEAL; } - return 0x2196F3; + return BLUE; } // Custom cards draw into a transparent `extra` container; parts are rebuilt only // when a slot changes mode, so paging keeps RAM use flat on the CYD. @@ -2072,7 +2091,7 @@ inline void render_graph(Widgets &w,const Tile &t,bool large,int x,int y,int wid if(n==1){raw[1]=raw[0];raw[1].x=(lv_value_precise_t)(width-1);n=2;} unsigned count=smooth(raw,n,w.points,POINT_BUFFER,width,height); part_line(w,0,w.points,count,stroke,x,y); - w.fill_points=w.points;w.fill_count=count;w.fill_x=x;w.fill_y=y;w.fill_base=height;w.fill_opa=LV_OPA_20; + w.fill_points=w.points;w.fill_count=count;w.fill_x=x;w.fill_y=y;w.fill_base=height;w.fill_opa=theme::fill_opacity(); } // Sun path: horizon, an arc from sunrise to sunset and the sun at the current // position (or below the horizon at night). Wide cards only. @@ -2106,14 +2125,14 @@ inline void render_sunpath(Widgets &w,const Tile &t,bool large,int width,int hei lv_point_precise_t sun={(lv_value_precise_t)(x0+(x1-x0)*fraction),(lv_value_precise_t)(day?horizon-sinf(sa)*amplitude:horizon+sinf(sa)*amplitude)}; travelled[filled+1]=sun; line[0]={(lv_value_precise_t)0,(lv_value_precise_t)horizon};line[1]={(lv_value_precise_t)(width-1),(lv_value_precise_t)horizon}; - uint32_t path=0xCFD8DC, accent=day?0xFF9800:0x5C6BC0, disc=day?0xFFB300:0xB0BEC5; + const uint32_t path=theme::hex(theme::SUN_PATH), accent=day?theme::ha::ORANGE:theme::foreground(theme::ha::NIGHT_SKY), disc=day?theme::ha::SUNNY:theme::hex(theme::MOON); lv_obj_set_style_line_color(part_line(w,3,line,2,2),lv_color_hex(path),0); lv_obj_set_style_line_color(part_line(w,4,arc,segments+1,large?2:1),lv_color_hex(path),0); lv_obj_set_style_line_color(part_line(w,5,travelled,filled+2,large?4:3),lv_color_hex(accent),0); int size=large?18:10,glow=size+(large?12:6); auto *halo=part_dot(w,6,int(sun.x)-glow/2,int(sun.y)-glow/2,glow);lv_obj_set_style_bg_color(halo,lv_color_hex(disc),0);lv_obj_set_style_bg_opa(halo,LV_OPA_30,0); lv_obj_set_style_bg_color(part_dot(w,7,int(sun.x)-size/2,int(sun.y)-size/2,size),lv_color_hex(disc),0); - if(day){w.fill_points=travelled;w.fill_count=filled+2;w.fill_x=0;w.fill_y=0;w.fill_base=horizon;w.fill_color=lv_color_hex(0xFFB300);w.fill_opa=LV_OPA_20;} + if(day){w.fill_points=travelled;w.fill_count=filled+2;w.fill_x=0;w.fill_y=0;w.fill_base=horizon;w.fill_color=lv_color_hex(theme::ha::SUNNY);w.fill_opa=theme::fill_opacity();} } // ---- Direct controls on wide cards (Home Assistant entity-row style) ---- @@ -2196,7 +2215,7 @@ inline int layout_panel(Widgets &w,const Tile &t,bool large,int content_w,int co lv_obj_set_style_pad_all(slider,0,LV_PART_MAIN); lv_obj_set_style_bg_opa(slider,LV_OPA_COVER,LV_PART_MAIN);lv_obj_set_style_bg_opa(slider,LV_OPA_COVER,LV_PART_INDICATOR); // The handle is a short white bar inside the fill, like Home Assistant's slider. - lv_obj_set_style_radius(slider,2,LV_PART_KNOB);lv_obj_set_style_bg_color(slider,lv_color_hex(0xFFFFFF),LV_PART_KNOB);lv_obj_set_style_bg_opa(slider,LV_OPA_COVER,LV_PART_KNOB); + lv_obj_set_style_radius(slider,2,LV_PART_KNOB);lv_obj_add_style(slider,theme::style(theme::Paint::knob),LV_PART_KNOB);lv_obj_set_style_bg_opa(slider,LV_OPA_COVER,LV_PART_KNOB); slider_handle(slider,mode=="volume"?m.slider_w:m.pill_w,h); lv_obj_set_style_border_width(slider,0,LV_PART_KNOB);lv_obj_set_style_shadow_width(slider,0,LV_PART_KNOB); lv_obj_set_ext_click_area(slider,m.ext+2); @@ -2205,7 +2224,7 @@ inline int layout_panel(Widgets &w,const Tile &t,bool large,int content_w,int co }else if(mode=="toggle"){ panel_key(w,0,w.panel,m,m.toggle_w,m.toggle_h,false);lv_obj_set_style_radius(w.keys[0],LV_RADIUS_CIRCLE,0); w.knob=panel_obj(w.keys[0],false);lv_obj_set_size(w.knob,m.toggle_h-8,m.toggle_h-8);lv_obj_set_y(w.knob,4); - lv_obj_set_style_radius(w.knob,LV_RADIUS_CIRCLE,0);lv_obj_set_style_bg_opa(w.knob,LV_OPA_COVER,0);lv_obj_set_style_bg_color(w.knob,lv_color_hex(0xFFFFFF),0); + lv_obj_set_style_radius(w.knob,LV_RADIUS_CIRCLE,0);lv_obj_set_style_bg_opa(w.knob,LV_OPA_COVER,0);lv_obj_add_style(w.knob,theme::style(theme::Paint::knob),0); w.key_commands[0]=tile_controls::TOGGLE; }else if(mode=="run"){ const char *text=tile_controls::run_label(d); @@ -2220,7 +2239,7 @@ inline int layout_panel(Widgets &w,const Tile &t,bool large,int content_w,int co auto set_checked=[&](unsigned n,bool checked){ if(w.key_checked[n]==(int)checked)return;w.key_checked[n]=checked; if(checked)lv_obj_add_state(w.keys[n],LV_STATE_CHECKED);else lv_obj_remove_state(w.keys[n],LV_STATE_CHECKED); - if(w.key_icons[n])lv_obj_set_style_text_color(w.key_icons[n],checked?lv_color_hex(0xFFFFFF):w.panel_text,0); + if(w.key_icons[n])lv_obj_set_style_text_color(w.key_icons[n],checked?theme::color(theme::ON_ACCENT):w.panel_text,0); }; auto set_disabled=[&](unsigned n,bool disabled){if(disabled)lv_obj_add_state(w.keys[n],LV_STATE_DISABLED);else lv_obj_remove_state(w.keys[n],LV_STATE_DISABLED);}; if(tile_controls::is_key_row(mode)){ @@ -2230,7 +2249,7 @@ inline int layout_panel(Widgets &w,const Tile &t,bool large,int content_w,int co lv_obj_remove_flag(w.keys[n],LV_OBJ_FLAG_HIDDEN);lv_obj_set_pos(w.keys[n],n*(m.key_w+m.gap),0); label(w.key_icons[n],keys[n].icon);w.key_commands[n]=keys[n].command;w.key_args[n]=keys[n].arg; // The active mode key carries the accent; "off" stays neutral grey. - if(keys[n].checked && w.key_checked[n]!=1)lv_obj_set_style_bg_color(w.keys[n],keys[n].arg=="off"?lv_color_hex(0x9E9E9E):w.panel_accent,LV_STATE_CHECKED); + if(keys[n].checked && w.key_checked[n]!=1)lv_obj_set_style_bg_color(w.keys[n],keys[n].arg=="off"?theme::color(theme::OFF):w.panel_accent,LV_STATE_CHECKED); set_checked(n,keys[n].checked);set_disabled(n,keys[n].disabled); } panel_w=count?count*m.key_w+(count-1)*m.gap:0; @@ -2277,28 +2296,29 @@ inline int layout_panel(Widgets &w,const Tile &t,bool large,int content_w,int co // Colours follow the card palette; called with the rest of the palette when it changes. inline void style_panel(Widgets &w,const Tile &t,lv_color_t accent,lv_color_t text) { if(!w.panel || w.panel_mode.empty())return; - lv_color_t card=lv_color_hex(t.background?t.background:0xFFFFFF); - lv_color_t key_bg=lv_color_mix(card,lv_color_hex(0x000000),236); - lv_color_t key_pressed=lv_color_mix(card,lv_color_hex(0x000000),212); + const uint32_t surface=theme::surface(t.background); + lv_color_t card=lv_color_hex(surface); + lv_color_t key_bg=lv_color_hex(theme::key_on(surface,236)); + lv_color_t key_pressed=lv_color_hex(theme::key_on(surface,212)); w.panel_accent=accent;w.panel_text=text; for(unsigned n=0;n<3;++n){ auto *key=w.keys[n];if(!key)continue; bool in_pill=w.pill && lv_obj_get_parent(key)==w.pill; set_color(key,LV_STYLE_BG_COLOR,in_pill?key_pressed:key_bg); - set_color(key,LV_STYLE_BG_COLOR,in_pill?lv_color_mix(card,lv_color_hex(0x000000),190):key_pressed,LV_STATE_PRESSED); - set_color(key,LV_STYLE_BG_COLOR,w.key_args[n]=="off" && w.panel_mode=="mode"?lv_color_hex(0x9E9E9E):accent,LV_STATE_CHECKED); - if(w.key_icons[n])set_color(w.key_icons[n],LV_STYLE_TEXT_COLOR,w.key_checked[n]==1?lv_color_hex(0xFFFFFF):text); + set_color(key,LV_STYLE_BG_COLOR,in_pill?lv_color_hex(theme::key_on(surface,190)):key_pressed,LV_STATE_PRESSED); + set_color(key,LV_STYLE_BG_COLOR,w.key_args[n]=="off" && w.panel_mode=="mode"?theme::color(theme::OFF):accent,LV_STATE_CHECKED); + if(w.key_icons[n])set_color(w.key_icons[n],LV_STYLE_TEXT_COLOR,w.key_checked[n]==1?theme::color(theme::ON_ACCENT):text); } if(w.pill){set_color(w.pill,LV_STYLE_BG_COLOR,key_bg);set_color(w.pill_value,LV_STYLE_TEXT_COLOR,text);} if(w.control_slider){ bool on=fresh() && t.slider_active(); - lv_color_t fill=on?accent:lv_color_hex(0x9E9E9E); + lv_color_t fill=on?accent:theme::color(theme::OFF); // The track is the fill colour at 20 % over the card, as in Home Assistant. set_color(w.control_slider,LV_STYLE_BG_COLOR,lv_color_mix(fill,card,51),LV_PART_MAIN); set_color(w.control_slider,LV_STYLE_BG_COLOR,fill,LV_PART_INDICATOR); slider_bar(w.control_slider,slider_bar_shown(t,on)); } - if(w.knob){set_color(w.keys[0],LV_STYLE_BG_COLOR,lv_color_hex(0xD7DADF));set_color(w.keys[0],LV_STYLE_BG_COLOR,lv_color_hex(0xC5C9CF),LV_STATE_PRESSED);} + if(w.knob){set_color(w.keys[0],LV_STYLE_BG_COLOR,theme::color(theme::PANEL_TOGGLE_OFF));set_color(w.keys[0],LV_STYLE_BG_COLOR,theme::color(theme::PANEL_TOGGLE_OFF_PRESSED),LV_STATE_PRESSED);} } inline void control_event(lv_event_t *e) { unsigned code=(uintptr_t)lv_event_get_user_data(e);unsigned slot=code/16,n=code%16; @@ -2334,13 +2354,13 @@ inline void set_busy(Widgets &w,bool busy,bool large){ if(!busy){if(w.busy)lv_obj_add_flag(w.busy,LV_OBJ_FLAG_HIDDEN);return;} if(!w.busy){ w.busy=lv_obj_create(w.tile);lv_obj_remove_style_all(w.busy);lv_obj_remove_flag(w.busy,LV_OBJ_FLAG_SCROLLABLE);lv_obj_add_flag(w.busy,LV_OBJ_FLAG_CLICKABLE); - lv_obj_set_style_bg_color(w.busy,lv_color_hex(0xFFFFFF),0);lv_obj_set_style_bg_opa(w.busy,LV_OPA_60,0); + lv_obj_add_style(w.busy,theme::style(theme::Paint::veil),0);lv_obj_set_style_bg_opa(w.busy,LV_OPA_60,0); lv_obj_set_style_radius(w.busy,lv_obj_get_style_radius(w.tile,LV_PART_MAIN),0); #if LV_USE_SPINNER w.spinner=lv_spinner_create(w.busy);lv_spinner_set_anim_params(w.spinner,900,200); int size=large?30:20;lv_obj_set_size(w.spinner,size,size);lv_obj_center(w.spinner);lv_obj_remove_flag(w.spinner,LV_OBJ_FLAG_CLICKABLE); lv_obj_set_style_arc_width(w.spinner,large?4:3,LV_PART_MAIN);lv_obj_set_style_arc_width(w.spinner,large?4:3,LV_PART_INDICATOR); - lv_obj_set_style_arc_color(w.spinner,lv_color_hex(0xD9DDE2),LV_PART_MAIN);lv_obj_set_style_arc_color(w.spinner,lv_color_hex(0x1E88E5),LV_PART_INDICATOR); + lv_obj_add_style(w.spinner,theme::style(theme::Paint::spinner),LV_PART_MAIN);lv_obj_set_style_arc_color(w.spinner,lv_color_hex(theme::ha::RAIN),LV_PART_INDICATOR); lv_obj_set_style_bg_opa(w.spinner,LV_OPA_TRANSP,LV_PART_KNOB);lv_obj_set_style_pad_all(w.spinner,0,LV_PART_KNOB); #endif } @@ -2475,41 +2495,44 @@ inline void render_slot(size_t slot) { w.cached_active = palette_state;w.panel_dirty=false; uint32_t accent = domain_accent(t); // Off is grey, as in Home Assistant, so a light or a door sensor shows its state at a glance. - auto color=lv_color_hex((t.is_switch()||d=="light"||d=="binary_sensor"||d=="person"||d=="timer") && !on ? 0x9E9E9E : accent); + uint32_t state_color=(t.is_switch()||d=="light"||d=="binary_sensor"||d=="person"||d=="timer") && !on ? theme::STATE_OFF : accent; if(d=="light" && on && t.has_hs_color) - color=lv_color_hsv_to_rgb(t.hue%360,t.saturation,100); - auto circle_color=available?lv_color_mix(color,lv_color_hex(0xFFFFFF),38):lv_color_hex(0xF0F0F0); - // Darken the foreground slightly: very pale bulbs still need a visible icon. - auto icon_color=available?lv_color_mix(color,lv_color_hex(0x333333),205):lv_color_hex(0x9E9E9E); + state_color=lv_color_to_u32(lv_color_hsv_to_rgb(t.hue%360,t.saturation,100))&0xFFFFFF; + auto color=lv_color_hex(theme::state(state_color)); + auto circle_color=lv_color_hex(available?theme::tint(state_color,38):theme::hex(theme::TRACK)); + // Very pale bulbs still need a visible icon: a touch darker on a light card, a touch lighter on a dark one. + auto icon_color=lv_color_hex(available?theme::icon(state_color):theme::hex(theme::OFF)); // Off: a grey track without fill or handle, as in Home Assistant. - auto fill_color=slider_on?color:lv_color_hex(0x9E9E9E); + const uint32_t fill=slider_on?state_color:theme::STATE_OFF; + auto fill_color=lv_color_hex(theme::state(fill)); set_color(w.slider,LV_STYLE_BG_COLOR,fill_color,LV_PART_INDICATOR); - set_color(w.slider,LV_STYLE_BG_COLOR,lv_color_mix(fill_color,lv_color_hex(0xFFFFFF),51),LV_PART_MAIN); + set_color(w.slider,LV_STYLE_BG_COLOR,lv_color_hex(theme::tint(fill,51)),LV_PART_MAIN); slider_bar(w.slider,slider_bar_shown(t,slider_on)); - set_color(w.tile,LV_STYLE_BG_COLOR,lv_color_hex(t.background ? t.background : 0xFFFFFF)); + set_color(w.tile,LV_STYLE_BG_COLOR,lv_color_hex(theme::surface(t.background))); set_number(w.tile,LV_STYLE_BORDER_WIDTH,1); // "Background: none" hides only the card; geometry and padding stay identical, // and the pressed flash still shows because it lives on the PRESSED state. set_number(w.tile,LV_STYLE_BG_OPA,t.transparent ? LV_OPA_TRANSP : LV_OPA_COVER); set_number(w.tile,LV_STYLE_BORDER_OPA,t.transparent ? LV_OPA_TRANSP : LV_OPA_COVER); - set_color(w.tile,LV_STYLE_BORDER_COLOR,t.background ? lv_color_mix(lv_color_hex(t.background),lv_color_hex(0x000000),220) : lv_color_hex(0xDDDDDD)); + set_color(w.tile,LV_STYLE_BORDER_COLOR,lv_color_hex(theme::outline(t.background))); set_color(w.circle,LV_STYLE_BG_COLOR,circle_color); set_color(w.icon,LV_STYLE_TEXT_COLOR,icon_color); - auto title_color=lv_color_hex(0x1B1B1B); - auto value_color=lv_color_hex(t.background ? 0x46525E : 0x616161); - set_color(w.unit,LV_STYLE_TEXT_COLOR,lv_color_hex(0x46525E)); + auto title_color=theme::color(theme::INK); + auto value_color=theme::color(t.background ? theme::SLATE : theme::MUTED); + set_color(w.unit,LV_STYLE_TEXT_COLOR,theme::color(theme::SLATE)); set_color(w.title,LV_STYLE_TEXT_COLOR,title_color); set_color(w.value,LV_STYLE_TEXT_COLOR,value_color); style_panel(w,t,color,title_color); // Custom parts follow the card palette: text like the title, lines/dots in the accent. - // The sun path sets its own colours on every render. - w.fill_color=color; + // The sun path sets its own colours on every render, the sunlit area under its arc too: taking the + // accent here made that area orange after a palette change and yellow again after the next minute. + if(w.extra_mode!="sunpath")w.fill_color=color; for(unsigned i=0;i=2 && i%3==2 : w.extra_mode=="sunpath" ? i>=1 : w.extra_mode=="calendar" ? i==15||i==17 : i==16; if(lv_obj_check_type(p,&lv_label_class))set_color(p,LV_STYLE_TEXT_COLOR,muted?value_color:title_color); else if(w.extra_mode=="sunpath")continue; - else if(lv_obj_check_type(p,&lv_line_class))set_color(p,LV_STYLE_LINE_COLOR,w.extra_mode=="graph"?color:i==18?lv_color_hex(0xE53935):i<12?value_color:i==13?icon_color:title_color); + else if(lv_obj_check_type(p,&lv_line_class))set_color(p,LV_STYLE_LINE_COLOR,w.extra_mode=="graph"?color:i==18?lv_color_hex(theme::foreground(theme::ha::ALARM)):i<12?value_color:i==13?icon_color:title_color); else set_color(p,LV_STYLE_BG_COLOR,i==14?icon_color:value_color); } lap(swipe_profile::PALETTE); @@ -2553,13 +2576,14 @@ inline void render(lv_obj_t *room) { // Drawn in the board's pixels by the editor's rules (app.js barLayout): every value, the time too, // in one font on the name's baseline; icons and the dial centred on the height of the digits; the // gaps measured between glyph ink, so every icon sits equally close to its value. -struct HeaderSlot { lv_obj_t *icon{}, *text{}; uint32_t icon_color = 0; }; +// An icon either shows the slate paint or a colour of its own (the item's state colour); `own` and `icon_color` +// remember which, so an unchanged icon is not styled again. +struct HeaderSlot { lv_obj_t *icon{}, *text{}; uint32_t icon_color = 0; bool own = false; }; inline lv_obj_t *header_root = nullptr, *header_ring = nullptr; inline std::array header_hands{}; inline std::array header_slots{}; inline lv_point_precise_t header_points[4]{}; inline int header_dial_key = -1; -constexpr uint32_t HEADER_INK = 0x46525E; inline void set_visible(lv_obj_t *obj, bool visible) { if (lv_obj_has_flag(obj, LV_OBJ_FLAG_HIDDEN) != visible) return; if (visible) lv_obj_remove_flag(obj, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(obj, LV_OBJ_FLAG_HIDDEN); @@ -2585,7 +2609,7 @@ inline lv_obj_t *header_part(lv_obj_t *parent) { auto *part = lv_label_create(parent); lv_obj_remove_flag(part, LV_OBJ_FLAG_CLICKABLE); lv_obj_add_flag(part, LV_OBJ_FLAG_HIDDEN); - lv_obj_set_style_text_color(part, lv_color_hex(HEADER_INK), 0); + lv_obj_add_style(part, theme::style(theme::Paint::slate), 0); return part; } // `live`: Home Assistant's values may show; without its link or the manager's feed only clocks stay. @@ -2605,21 +2629,20 @@ inline void draw_header(bool live) { slot.text = header_part(header_root); lv_obj_set_style_text_font(slot.icon, header_icon_font, 0); lv_obj_set_style_text_font(slot.text, header_text_font, 0); - slot.icon_color = HEADER_INK; } header_ring = lv_obj_create(header_root); lv_obj_remove_style_all(header_ring); lv_obj_remove_flag(header_ring, LV_OBJ_FLAG_CLICKABLE); lv_obj_remove_flag(header_ring, LV_OBJ_FLAG_SCROLLABLE); lv_obj_set_style_radius(header_ring, LV_RADIUS_CIRCLE, 0); - lv_obj_set_style_border_color(header_ring, lv_color_hex(HEADER_INK), 0); + lv_obj_add_style(header_ring, theme::style(theme::Paint::slate), 0); lv_obj_set_style_border_opa(header_ring, LV_OPA_COVER, 0); lv_obj_add_flag(header_ring, LV_OBJ_FLAG_HIDDEN); for (auto *&hand : header_hands) { hand = lv_line_create(header_root); lv_obj_remove_flag(hand, LV_OBJ_FLAG_CLICKABLE); lv_obj_set_style_line_rounded(hand, true, 0); - lv_obj_set_style_line_color(hand, lv_color_hex(HEADER_INK), 0); + lv_obj_add_style(hand, theme::style(theme::Paint::slate), 0); lv_obj_add_flag(hand, LV_OBJ_FLAG_HIDDEN); } // A long name ends in dots instead of running under the items. @@ -2714,8 +2737,14 @@ inline void draw_header(bool live) { int ink_top = (middle2 - g.box_h) / 2; lv_obj_set_pos(slot.icon, x - g.ofs_x, ink_top - ((header_icon_font->line_height - header_icon_font->base_line) - g.box_h - g.ofs_y)); const auto &item = bar.items[p.item]; - uint32_t color = item.has_color ? item.color : HEADER_INK; - if (slot.icon_color != color) { lv_obj_set_style_text_color(slot.icon, lv_color_hex(color), 0); slot.icon_color = color; } + // The words, icons and dial of the top bar take the slate paint; an item's own colour sits on top of it. + const uint32_t color = item.has_color ? theme::foreground(item.color) : 0; + if (slot.own != item.has_color || slot.icon_color != color) { + if (item.has_color) lv_obj_set_style_text_color(slot.icon, lv_color_hex(color), 0); + else lv_obj_remove_local_style_prop(slot.icon, LV_STYLE_TEXT_COLOR, 0); + slot.own = item.has_color; + slot.icon_color = color; + } icon_on[k] = true; x += p.icon_w + (p.text_w ? gaps.icon : 0); } @@ -2807,8 +2836,8 @@ inline bool check_tile_geometry() { } if(!fits)ESP_LOGE("ui_test","Tile geometry FAIL slot=%u mode=%s wide=%d title_y=%d..%d value_y=%d..%d content_y=%d..%d",(unsigned)w.index,w.extra_mode.c_str(),w.wide,title.y1,title.y2,value.y1,value.y2,content.y1,content.y2); if(w.index=LV_OPA_MAX)return lv_obj_get_style_bg_color(o,LV_PART_MAIN); - return lv_color_hex(0xE7E7E7); + return theme::color(theme::PAGE); } inline void skeleton(Widgets &w) { for(auto *o:{w.title,w.value,w.circle,w.unit,w.slider,w.extra,w.panel,w.busy})if(o)lv_obj_add_flag(o,LV_OBJ_FLAG_HIDDEN); @@ -2874,7 +2903,7 @@ inline void skeleton(Widgets &w) { lv_obj_set_style_bg_opa(w.veil,LV_OPA_COVER,0); } const Tile *t=w.indextransparent?page_color(w):lv_color_hex(t && t->background?t->background:0xFFFFFF)); + set_color(w.veil,LV_STYLE_BG_COLOR,t && t->transparent?page_color(w):lv_color_hex(theme::surface(t?t->background:0))); lv_obj_set_pos(w.veil,0,0); lv_obj_set_size(w.veil,content_width(w),content_height(w)); lv_obj_remove_flag(w.veil,LV_OBJ_FLAG_HIDDEN); @@ -3040,6 +3069,14 @@ inline void tick() { } if(redraw && refresh)refresh(); } +// A change of look (Dark mode). The paints follow by themselves (theme::set_dark); what the tiles, the top bar and an +// open card painted in code is drawn again here, in the same pass, so no frame shows half of each look. +inline void restyle() { + for (auto &w : widgets) { w.cached_active = -1; w.panel_dirty = true; } + for (auto &slot : header_slots) { slot.own = true; slot.icon_color = UINT32_MAX; } + if (room_label) { dirty_all = true; render(room_label); } + if (detail_root && !lv_obj_has_flag(detail_root, LV_OBJ_FLAG_HIDDEN) && detail_index < model.count) show_detail(detail_index); +} inline std::string vacuum_option(unsigned index) { if (active_index < 0 || static_cast(active_index) >= model.count) return {}; auto &tile = model.tiles[active_index]; diff --git a/components/smart_display/settings_screen.h b/components/smart_display/settings_screen.h index 3e7af0e..edb2b20 100644 --- a/components/smart_display/settings_screen.h +++ b/components/smart_display/settings_screen.h @@ -20,8 +20,9 @@ namespace settings_screen { // Values that are not part of the persisted `screen_settings::Settings` block, because that format is // frozen at version 1: each of these keeps its own preference, so a new option never rewrites the -// old ones. The manager sends them as their own keys in the layout message. -inline int32_t swipe_pages = 0, rotation = 0, auto_home = 1, auto_home_seconds = 120; +// old ones. The manager sends the older ones as their own keys in the layout message; dark_mode (firmware +// 0.2.54+) only exists as the screen's own setting and entity. +inline int32_t swipe_pages = 0, rotation = 0, auto_home = 1, auto_home_seconds = 120, dark_mode = 0; inline bool rotation_supported = false; // ------------------------------------------------------------------ the table @@ -102,7 +103,7 @@ inline SetResult set(const std::string &key, int32_t value) { auto &s = screen_settings::current; const auto before = s; const int32_t before_swipe = swipe_pages, before_rotation = rotation, before_home = auto_home, - before_home_seconds = auto_home_seconds; + before_home_seconds = auto_home_seconds, before_dark = dark_mode; int32_t reported = 0; auto flag = [](int32_t v) -> int32_t { return v ? 1 : 0; }; if (key == "standby_enabled") reported = s.standby_enabled = flag(value); @@ -122,9 +123,10 @@ inline SetResult set(const std::string &key, int32_t value) { else if (key == "rotation" && rotation_supported) reported = rotation = std::clamp(value, 0, 270) / 90 * 90; else if (key == "auto_home") reported = auto_home = flag(value); else if (key == "auto_home_seconds") reported = auto_home_seconds = std::clamp(value, 30, 3600); + else if (key == "dark_mode") reported = dark_mode = flag(value); else return SetResult::unknown; if (s == before && swipe_pages == before_swipe && rotation == before_rotation && auto_home == before_home && - auto_home_seconds == before_home_seconds) + auto_home_seconds == before_home_seconds && dark_mode == before_dark) return SetResult::same; changed(key.c_str(), reported); return SetResult::changed; @@ -158,6 +160,11 @@ inline bool at_end(const Row &row, int32_t value, int direction) { if (row.kind == Kind::moment) return false; return stepped(row, value, direction) == value; } +// Where the knob of a w by h switch sits: at the left when off, at the right when on, inset all round. +inline int knob_x(int w, int h, bool on) { + int inset = std::max(2, h / 10), size = h - 2 * inset; + return on ? w - inset - size : inset; +} inline std::string duration_text(int32_t seconds) { char buffer[24]; @@ -217,13 +224,15 @@ inline uint8_t fitting_rows(int span, int row_height, int gap, int pager, uint8_ inline constexpr const char *clock_options[] = {"12 hour", "24 hour"}; inline constexpr const char *rotation_options[] = {"0°", "90°", "180°", "270°"}; -// Brightness, and when the screen dims by itself. +// Brightness, the dark look for a screen beside a bed, and when the screen dims by itself. // Every reader says `-> int32_t` out loud: on the ESP32 that is `long`, and a lambda that returns a // plain `int` (a ternary, say) then does not convert to Read at all. The Mac's host build accepts it, // the board does not. inline constexpr Row light_rows[] = { number("Brightness", []() -> int32_t { return screen_settings::current.brightness; }, [](int32_t value) { set("brightness", value); }, 5, 100, 5, "%"), + toggle("Dark mode", []() -> int32_t { return dark_mode; }, + [](int32_t value) { set("dark_mode", value); }), toggle("Auto standby", []() -> int32_t { return screen_settings::current.standby_enabled; }, [](int32_t value) { set("standby_enabled", value); }), duration("Standby after", []() -> int32_t { return screen_settings::current.standby_seconds; }, @@ -301,6 +310,7 @@ constexpr uint8_t PAGE_COUNT = (uint8_t) std::size(pages); #ifndef SETTINGS_SCREEN_TEST #include "lvgl.h" +#include "theme.h" #include namespace settings_screen { @@ -358,14 +368,14 @@ inline lv_obj_t *plain(lv_obj_t *parent, int x, int y, int w, int h) { lv_obj_set_size(obj, w, h); return obj; } -inline lv_obj_t *text(lv_obj_t *parent, const std::string &value, const lv_font_t *font, uint32_t color, +inline lv_obj_t *text(lv_obj_t *parent, const std::string &value, const lv_font_t *font, theme::Role color, lv_text_align_t align = LV_TEXT_ALIGN_LEFT) { auto *label = lv_label_create(parent); lv_label_set_text(label, value.c_str()); lv_label_set_long_mode(label, LV_LABEL_LONG_DOT); lv_obj_remove_flag(label, LV_OBJ_FLAG_CLICKABLE); lv_obj_set_style_text_font(label, font, 0); - lv_obj_set_style_text_color(label, lv_color_hex(color), 0); + lv_obj_set_style_text_color(label, theme::color(color), 0); lv_obj_set_style_text_align(label, align, 0); lv_obj_set_height(label, lv_font_get_line_height(font)); return label; @@ -379,11 +389,11 @@ inline lv_obj_t *key(lv_obj_t *parent, const char *glyph, int x, int y, int w, i auto *button = plain(parent, x, y, w, h); lv_obj_add_flag(button, LV_OBJ_FLAG_CLICKABLE); lv_obj_set_style_bg_opa(button, LV_OPA_COVER, 0); - lv_obj_set_style_bg_color(button, lv_color_hex(0xE9EFF4), 0); - lv_obj_set_style_bg_color(button, lv_color_hex(0xC3D5E3), LV_STATE_PRESSED); + lv_obj_set_style_bg_color(button, theme::color(theme::SETTING_KEY), 0); + lv_obj_set_style_bg_color(button, theme::color(theme::SETTING_KEY_PRESSED), LV_STATE_PRESSED); lv_obj_set_style_radius(button, LV_RADIUS_CIRCLE, 0); lv_obj_set_style_opa(button, LV_OPA_40, LV_STATE_DISABLED); - auto *label = text(button, glyph, icon_font ? icon_font : row_font, 0x1B1B1B); + auto *label = text(button, glyph, icon_font ? icon_font : row_font, theme::INK); lv_obj_set_width(label, LV_SIZE_CONTENT); lv_obj_center(label); lv_obj_add_event_cb(button, handler, LV_EVENT_SHORT_CLICKED, data); @@ -395,12 +405,12 @@ inline lv_obj_t *key(lv_obj_t *parent, const char *glyph, int x, int y, int w, i inline lv_obj_t *pill(lv_obj_t *parent, int x, int y, int w, int h, bool on) { auto *track = plain(parent, x, y, w, h); lv_obj_set_style_bg_opa(track, LV_OPA_COVER, 0); - lv_obj_set_style_bg_color(track, lv_color_hex(on ? 0x009FE3 : 0xC4C4C4), 0); + lv_obj_set_style_bg_color(track, theme::color(on ? theme::ACCENT : theme::TOGGLE_OFF), 0); lv_obj_set_style_radius(track, LV_RADIUS_CIRCLE, 0); int inset = std::max(2, h / 10), size = h - 2 * inset; - auto *knob = plain(track, on ? w - inset - size : inset, inset, size, size); + auto *knob = plain(track, knob_x(w, h, on), inset, size, size); lv_obj_set_style_bg_opa(knob, LV_OPA_COVER, 0); - lv_obj_set_style_bg_color(knob, lv_color_hex(0xFFFFFF), 0); + lv_obj_set_style_bg_color(knob, theme::color(theme::KNOB), 0); lv_obj_set_style_radius(knob, LV_RADIUS_CIRCLE, 0); return knob; } @@ -408,11 +418,12 @@ inline void move_knob(Drawn &d, const Row &row) { if (!d.knob) return; auto *track = lv_obj_get_parent(d.knob); bool on = row.read && row.read(); - int w = lv_obj_get_width(track), size = lv_obj_get_width(d.knob), inset = (lv_obj_get_height(track) - size) / 2; // Setting a style always repaints, so only a real change sets it; lv_obj_set_x checks by itself. - const lv_color_t color = lv_color_hex(on ? 0x009FE3 : 0xC4C4C4); + const lv_color_t color = theme::color(on ? theme::ACCENT : theme::TOGGLE_OFF); if (!lv_color_eq(lv_obj_get_style_bg_color(track, LV_PART_MAIN), color)) lv_obj_set_style_bg_color(track, color, 0); - lv_obj_set_x(d.knob, on ? w - inset - size : inset); + // The size pill() gave the track, not its coordinates: draw() ends in refresh() before LVGL has laid the + // new page out, when every width still reads 0 and a switch that is on would show its knob at the left. + lv_obj_set_x(d.knob, knob_x(lv_obj_get_style_width(track, LV_PART_MAIN), lv_obj_get_style_height(track, LV_PART_MAIN), on)); } // After any change: every row on this page tells its own value again. Cheap (eight labels at most) and @@ -540,15 +551,15 @@ inline void draw() { auto *back = plain(root, m.pad, m.bar_y, m.bar, m.bar); lv_obj_add_flag(back, LV_OBJ_FLAG_CLICKABLE); lv_obj_set_style_bg_opa(back, LV_OPA_COVER, 0); - lv_obj_set_style_bg_color(back, lv_color_hex(0xEEEEEE), 0); - lv_obj_set_style_bg_color(back, lv_color_hex(0xDADADA), LV_STATE_PRESSED); + lv_obj_set_style_bg_color(back, theme::color(theme::KEY), 0); + lv_obj_set_style_bg_color(back, theme::color(theme::KEY_PRESSED), LV_STATE_PRESSED); lv_obj_set_style_radius(back, LV_RADIUS_CIRCLE, 0); - auto *arrow = text(back, "\U000F004D", icon_font ? icon_font : row_font, 0x1B1B1B); + auto *arrow = text(back, "\U000F004D", icon_font ? icon_font : row_font, theme::INK); lv_obj_set_width(arrow, LV_SIZE_CONTENT); lv_obj_center(arrow); lv_obj_add_event_cb(back, back_event, LV_EVENT_SHORT_CLICKED, nullptr); const lv_font_t *heading = title_font ? title_font : row_font; - auto *title = text(root, page.title, heading, 0x1B1B1B, LV_TEXT_ALIGN_CENTER); + auto *title = text(root, page.title, heading, theme::INK, LV_TEXT_ALIGN_CENTER); lv_obj_set_width(title, m.width - 2 * (m.pad + m.bar + 8)); lv_obj_set_pos(title, m.pad + m.bar + 8, m.bar_y + (m.bar - lv_font_get_line_height(heading)) / 2); @@ -571,30 +582,30 @@ inline void draw() { d.card = plain(root, m.pad, m.rows_y + slot * (m.row_h + m.gap), m.width - 2 * m.pad, m.row_h); lv_obj_set_style_bg_opa(d.card, LV_OPA_COVER, 0); - lv_obj_set_style_bg_color(d.card, lv_color_hex(asking ? 0x009FE3 : 0xFFFFFF), 0); + lv_obj_set_style_bg_color(d.card, theme::color(asking ? theme::ACCENT : theme::CARD), 0); lv_obj_set_style_radius(d.card, m.radius, 0); lv_obj_set_style_border_width(d.card, 1, 0); - lv_obj_set_style_border_color(d.card, lv_color_hex(asking ? 0x009FE3 : 0xDDDDDD), 0); + lv_obj_set_style_border_color(d.card, theme::color(asking ? theme::ACCENT : theme::LINE), 0); if (tappable) { lv_obj_add_flag(d.card, LV_OBJ_FLAG_CLICKABLE); - lv_obj_set_style_bg_color(d.card, lv_color_hex(asking ? 0x0083BC : 0xF1F1F1), LV_STATE_PRESSED); + lv_obj_set_style_bg_color(d.card, theme::color(asking ? theme::ACCENT_PRESSED : theme::CARD_PRESSED), LV_STATE_PRESSED); lv_obj_add_event_cb(d.card, row_event, LV_EVENT_SHORT_CLICKED, (void *) (intptr_t) index); } int left = m.inset; if (row.icon && *row.icon) { - auto *glyph = text(d.card, row.icon, icon_font ? icon_font : row_font, asking ? 0xFFFFFF : 0x4A4A4A); + auto *glyph = text(d.card, row.icon, icon_font ? icon_font : row_font, asking ? theme::ON_ACCENT : theme::ROW_ICON); int icon_h = lv_font_get_line_height(icon_font ? icon_font : row_font); lv_obj_set_width(glyph, LV_SIZE_CONTENT); lv_obj_set_pos(glyph, left, (m.row_h - icon_h) / 2); left += icon_h + (m.large ? 12 : 8); } - d.label = text(d.card, asking ? "Tap again to restart" : row.label, row_font, asking ? 0xFFFFFF : 0x1B1B1B); + d.label = text(d.card, asking ? "Tap again to restart" : row.label, row_font, asking ? theme::ON_ACCENT : theme::INK); lv_obj_set_pos(d.label, left, (m.row_h - label_h) / 2); int right = m.width - 2 * m.pad - m.inset; // free space from the right edge of the card if (row.kind == Kind::page) { - auto *chevron = text(d.card, "\U000F0142", icon_font ? icon_font : row_font, 0xB0B0B0); + auto *chevron = text(d.card, "\U000F0142", icon_font ? icon_font : row_font, theme::CHEVRON); int icon_h = lv_font_get_line_height(icon_font ? icon_font : row_font); lv_obj_set_width(chevron, LV_SIZE_CONTENT); lv_obj_set_pos(chevron, right - icon_h, (m.row_h - icon_h) / 2); @@ -608,7 +619,7 @@ inline void draw() { (void *) (intptr_t) (index * 2 + 1)); d.minus = key(d.card, "\U000F0374", right - m.pill_w - value_w - m.pill_w, y, m.pill_w, m.pill_h, step_event, (void *) (intptr_t) (index * 2)); - d.value = text(d.card, value_text(row), row_font, 0x1B1B1B, LV_TEXT_ALIGN_CENTER); + d.value = text(d.card, value_text(row), row_font, theme::INK, LV_TEXT_ALIGN_CENTER); lv_obj_set_width(d.value, value_w); lv_obj_set_pos(d.value, right - m.pill_w - value_w, (m.row_h - label_h) / 2); lv_obj_set_width(d.label, right - 2 * m.pill_w - value_w - left - 6); @@ -616,14 +627,14 @@ inline void draw() { int value_w = m.large ? 150 : 96, chip_h = m.pill_h; auto *chip = plain(d.card, right - value_w, (m.row_h - chip_h) / 2, value_w, chip_h); lv_obj_set_style_bg_opa(chip, LV_OPA_COVER, 0); - lv_obj_set_style_bg_color(chip, lv_color_hex(0xE9EFF4), 0); + lv_obj_set_style_bg_color(chip, theme::color(theme::SETTING_KEY), 0); lv_obj_set_style_radius(chip, LV_RADIUS_CIRCLE, 0); - d.value = text(chip, value_text(row), row_font, 0x1B1B1B, LV_TEXT_ALIGN_CENTER); + d.value = text(chip, value_text(row), row_font, theme::INK, LV_TEXT_ALIGN_CENTER); lv_obj_set_width(d.value, value_w - 8); lv_obj_set_pos(d.value, 4, (chip_h - label_h) / 2); lv_obj_set_width(d.label, right - value_w - left - 6); } else if (row.kind == Kind::info) { - d.value = text(d.card, value_text(row), row_font, 0x616161, LV_TEXT_ALIGN_RIGHT); + d.value = text(d.card, value_text(row), row_font, theme::MUTED, LV_TEXT_ALIGN_RIGHT); int value_w = (m.width - 2 * m.pad) / 2; lv_obj_set_width(d.value, value_w); lv_obj_set_pos(d.value, right - value_w, (m.row_h - label_h) / 2); @@ -647,16 +658,16 @@ inline void draw() { lv_obj_add_flag(bar, LV_OBJ_FLAG_CLICKABLE); lv_obj_set_style_bg_opa(bar, LV_OPA_TRANSP, 0); lv_obj_set_style_bg_opa(bar, LV_OPA_COVER, LV_STATE_PRESSED); - lv_obj_set_style_bg_color(bar, lv_color_hex(0xDCDCDC), LV_STATE_PRESSED); + lv_obj_set_style_bg_color(bar, theme::color(theme::KEY_PRESSED), LV_STATE_PRESSED); lv_obj_set_style_radius(bar, m.radius, 0); - auto *label = text(bar, side ? "Next >" : "< Previous", row_font, 0x1B1B1B, + auto *label = text(bar, side ? "Next >" : "< Previous", row_font, theme::INK, side ? LV_TEXT_ALIGN_RIGHT : LV_TEXT_ALIGN_LEFT); lv_obj_set_width(label, half - 12); lv_obj_set_pos(label, 6, (m.pager - label_h) / 2); lv_obj_add_event_cb(bar, pager_event, LV_EVENT_SHORT_CLICKED, (void *) (intptr_t) (side ? per_page : -per_page)); } - auto *counter = text(root, std::to_string(page_number) + " / " + std::to_string(page_total), row_font, 0x616161, + auto *counter = text(root, std::to_string(page_number) + " / " + std::to_string(page_total), row_font, theme::MUTED, LV_TEXT_ALIGN_CENTER); lv_obj_set_width(counter, m.width); lv_obj_set_pos(counter, 0, y + (m.pager - label_h) / 2); @@ -680,7 +691,7 @@ inline void open(uint8_t page = 0) { lv_obj_set_size(root, lv_pct(100), lv_pct(100)); lv_obj_remove_flag(root, LV_OBJ_FLAG_SCROLLABLE); lv_obj_add_flag(root, LV_OBJ_FLAG_CLICKABLE); // nothing leaks through to the tiles below - lv_obj_set_style_bg_color(root, lv_color_hex(0xE7E7E7), 0); + lv_obj_set_style_bg_color(root, theme::color(theme::PAGE), 0); lv_obj_set_style_bg_opa(root, LV_OPA_COVER, 0); } lv_obj_move_foreground(root); @@ -693,6 +704,13 @@ inline void close() { if (root) { lv_obj_delete(root); root = nullptr; } } +// A change of look while the page is open (Dark mode is one of its rows): the page is drawn again in place. +inline void restyle() { + if (!root) return; + lv_obj_set_style_bg_color(root, theme::color(theme::PAGE), 0); + draw(); +} + // ---- holding the top bar opens the page ---- // Not a tile, not a button in view: a press of `hold_ms` on the strip with the screen name. A line // grows along the top edge while you hold, so the gesture explains itself the first time it happens. @@ -711,6 +729,9 @@ inline void hold_event(lv_event_t *event) { if (!hold_bar) return; if (code == LV_EVENT_PRESSED) { if (visible() || (may_open && !may_open())) return; + // The line takes the look's blue when it starts; it is hidden the rest of the time. + const lv_color_t blue = theme::color(theme::ACCENT); + if (!lv_color_eq(lv_obj_get_style_bg_color(hold_bar, LV_PART_MAIN), blue)) lv_obj_set_style_bg_color(hold_bar, blue, 0); lv_obj_set_width(hold_bar, 1); lv_anim_t anim; lv_anim_init(&anim); @@ -745,7 +766,6 @@ inline void attach_hold(lv_obj_t *page, int x, int y, int width, int height, lv_ lv_obj_add_event_cb(hold_area, hold_event, LV_EVENT_PRESS_LOST, nullptr); hold_bar = plain(page, 0, 0, 1, large ? 5 : 3); lv_obj_set_style_bg_opa(hold_bar, LV_OPA_COVER, 0); - lv_obj_set_style_bg_color(hold_bar, lv_color_hex(0x009FE3), 0); lv_obj_add_flag(hold_bar, LV_OBJ_FLAG_HIDDEN); lv_obj_move_foreground(hold_bar); if (below && lv_obj_get_parent(below) == page) { diff --git a/components/smart_display/theme.h b/components/smart_display/theme.h new file mode 100644 index 0000000..ff49afe --- /dev/null +++ b/components/smart_display/theme.h @@ -0,0 +1,349 @@ +#pragma once +// Every colour the screens choose themselves, in one table (firmware 0.2.54+). +// +// A role is what a colour is for: the page, a card, the text on it, a key under a finger. Each role has its light value, +// the look the screens have always had, and its dark value, for a screen beside a bed: a black page, graphite cards, +// soft white text, and the colours of Home Assistant's states where they matter. Nothing else in the firmware or in the +// board profiles writes a colour of its own; the profiles name a paint (a shared LVGL style filled from this table) and +// the firmware asks for a role. docs/THEME.md is the recipe for a new colour. +// +// Home Assistant's state colours (the amber of a light that is on, the orange of heating) are not roles: they are data +// and pass through state() on their way to the glass. The values below are free of LVGL, so tests/test_theme.cpp checks +// the table and the contrast of both looks on a PC; the LVGL half is behind THEME_TEST. +#include +#include +#include + +namespace theme { + +enum Role : uint8_t { + // ---- surfaces + PAGE, // the page behind the tiles, every card and the settings + PAGE_SOFT, // the page of the light's colour controls, a shade lighter + PAGE_PRESSED, // the Previous and Next bars under a finger + CARD, // tiles, cards, rows, the alert + CARD_PRESSED, // a settings row under a finger + LINE, // the hairline around a card + RAISED, // a card above everything else: the alert + RAISED_LINE, + KEY, // round keys (back, close), a white key under a finger + KEY_PRESSED, // a round key under a finger + TRACK, // segment tracks and grey keys inside a card, an unavailable tile's circle, empty history + GRID, // the lines across a history graph + TICK, // the small marks under a history graph + BUTTON, // the plain keys of a simple card (select options, media, timer) + SETTING_KEY, // -/+ keys and choice chips on the settings page + SETTING_KEY_PRESSED, + TOGGLE_OFF, // a switch on the settings page while off + SWITCH_OFF, // the switch on a history card while off + PANEL_TOGGLE_OFF, // the toggle on a wide tile while off + PANEL_TOGGLE_OFF_PRESSED, + KNOB, // handles and knobs + SLIDER_KNOB, // the round knob of a card's number or volume slider + SCRIM, // behind an alert + VEIL, // the sheet over a busy tile, the haze over the value card + SPINNER_TRACK, // the ring of the busy spinner + // ---- text + INK, // names, values, words on keys + INK_SOFT, // the alert's second line + MUTED, // secondary words: states, times beside a value + SUBTLE, // quiet words: axis labels, notes, "Target" + SLATE, // the top bar, units, a value on a coloured card, mode key icons + ROW_ICON, // icons at the start of a settings row + CHEVRON, // the arrow at the end of a settings row + OFF, // something that is off: its icon, its circle and the fill of its slider + ON_ACCENT, // words and icons on a blue key and on the alert's key + // ---- keys that stand out + ACCENT, // the screen's own blue: a chosen segment, the main key, a switch that is on + ACCENT_PRESSED, + ACCENT_BRIGHT, // the value card's fill and a chosen climate chip + ACCENT_TINT, // pale blue: a choice under a finger, the value card's track, climate power on + ACCENT_ICON, // the climate power icon while on + ICON_OFF, // the climate power icon while off + BUTTON_DARK, // the alert's key + BUTTON_DARK_PRESSED, + // ---- drawings + ROBOT_BODY, // the vacuum seen from above + ROBOT_RIM, + ROBOT_TOP, + ROBOT_LENS, + BATTERY, // a battery's outline and cap + SUN_PATH, // the arc the sun travels + MOON, // the sun below the horizon + AMBER_TRACK, // the track of a light's brightness slider + HISTORY_OFF, // an off or away stretch on a timeline (the add-on's CFCFCF) + HISTORY_EMPTY, // a stretch without data on a timeline (the add-on's E6E6E6) + // ---- the CYD's touch calibration: dark in both looks, a yellow crosshair + CALIBRATION_PAGE, + CALIBRATION_INK, + CALIBRATION_MARK, + ROLE_COUNT +}; + +struct Pair { uint32_t light, dark; }; + +// light: the design as it always was. dark: RGB565-friendly values (a grey whose red, green and blue land on the same +// step of the panel), so dark greys stay neutral on both boards instead of turning green. +inline constexpr Pair ROLES[ROLE_COUNT] = { + /* PAGE */ {0xE7E7E7, 0x000000}, + /* PAGE_SOFT */ {0xF8F8F8, 0x101010}, + /* PAGE_PRESSED */ {0xE3E3E3, 0x1A1A1A}, + /* CARD */ {0xFFFFFF, 0x1A1A1A}, + /* CARD_PRESSED */ {0xF1F1F1, 0x2A2A2A}, + /* LINE */ {0xDDDDDD, 0x292929}, + /* RAISED */ {0xFFFFFF, 0x282828}, + /* RAISED_LINE */ {0xDDDDDD, 0x393939}, + /* KEY */ {0xEEEEEE, 0x2A2A2A}, + /* KEY_PRESSED */ {0xDDDDDD, 0x3A3A3A}, + /* TRACK */ {0xF1F1F1, 0x2A2A2A}, + /* GRID */ {0xEEEEEE, 0x292929}, + /* TICK */ {0xCCCCCC, 0x4A4A4A}, + /* BUTTON */ {0xD9E6F0, 0x222B32}, + /* SETTING_KEY */ {0xE9EFF4, 0x2A2F34}, + /* SETTING_KEY_PRESSED */ {0xC3D5E3, 0x3A4652}, + /* TOGGLE_OFF */ {0xC4C4C4, 0x484848}, + /* SWITCH_OFF */ {0xB0B0B0, 0x484848}, + /* PANEL_TOGGLE_OFF */ {0xD7DADF, 0x393C41}, + /* PANEL_TOGGLE_OFF_PRESSED */ {0xC5C9CF, 0x494D52}, + /* KNOB */ {0xFFFFFF, 0xE8E8E8}, + /* SLIDER_KNOB */ {0x111111, 0xE8E8E8}, + /* SCRIM */ {0x101820, 0x000000}, + /* VEIL */ {0xFFFFFF, 0x1A1A1A}, + /* SPINNER_TRACK */ {0xD9DDE2, 0x393D42}, + /* INK */ {0x1B1B1B, 0xDADADA}, + /* INK_SOFT */ {0x3A3A3C, 0xBABABA}, + /* MUTED */ {0x616161, 0x999999}, + /* SUBTLE */ {0x6B6B6B, 0x8A8A8A}, + /* SLATE */ {0x46525E, 0x9AA6B2}, + /* ROW_ICON */ {0x4A4A4A, 0xB8B8B8}, + /* CHEVRON */ {0xB0B0B0, 0x5A5A5A}, + /* OFF */ {0x9E9E9E, 0x787878}, + /* ON_ACCENT */ {0xFFFFFF, 0xFFFFFF}, + /* ACCENT */ {0x009FE3, 0x0A93D2}, + /* ACCENT_PRESSED */ {0x0075B0, 0x0A6FA3}, + /* ACCENT_BRIGHT */ {0x00A6ED, 0x0A9ADB}, + /* ACCENT_TINT */ {0xD5EEFC, 0x12384A}, + /* ACCENT_ICON */ {0x0B6E99, 0x6CCBF5}, + /* ICON_OFF */ {0x8A8A8A, 0x7A7A7A}, + /* BUTTON_DARK */ {0x1B1B1B, 0x484848}, + /* BUTTON_DARK_PRESSED */ {0x3A3A3C, 0x585858}, + /* ROBOT_BODY */ {0xFFFFFF, 0x383D42}, + /* ROBOT_RIM */ {0xCEDDE6, 0x5A6972}, + /* ROBOT_TOP */ {0xE3EBEF, 0x4A5358}, + /* ROBOT_LENS */ {0xA8BCC8, 0x7E93A1}, + /* BATTERY */ {0x7D858D, 0x8C959D}, + /* SUN_PATH */ {0xCFD8DC, 0x3E494E}, + /* MOON */ {0xB0BEC5, 0x90A4AE}, + /* AMBER_TRACK */ {0xFDEFC3, 0x483B16}, + /* HISTORY_OFF */ {0xCFCFCF, 0x4A4A4A}, + /* HISTORY_EMPTY */ {0xE6E6E6, 0x2A2A2A}, + /* CALIBRATION_PAGE */ {0x101820, 0x101820}, + /* CALIBRATION_INK */ {0xFFFFFF, 0xFFFFFF}, + /* CALIBRATION_MARK */ {0xFFD34D, 0xFFD34D}, +}; + +// The look on screen. The board sets it through set_dark() (below) from the Dark mode setting; the table and the +// helpers only read it. +inline bool dark = false; +inline uint32_t hex(Role role) { return dark ? ROLES[role].dark : ROLES[role].light; } + +// ---- mixing, exactly as LVGL 9 mixes two colours (lv_color_mix), so a value here is the value on the glass +inline uint32_t mix(uint32_t first, uint32_t second, uint8_t amount) { + uint32_t out = 0; + for (int shift = 16; shift >= 0; shift -= 8) { + const uint32_t a = first >> shift & 0xFF, b = second >> shift & 0xFF; + out |= (((a * amount + b * (255 - amount)) * 0x8081U) >> 23) << shift; + } + return out; +} + +// ---- named card colours: what a tile's background or an alert's colour can be +// The add-on sends a name; a tile keeps the light value as the colour's identity (tile_palette.h), and surface() turns it +// into what this look draws. Light: the pastels chosen for dark text. Dark: the same hue deep enough for light text. +struct Swatch { const char *name; uint32_t light, dark; }; +inline constexpr Swatch SWATCHES[] = { + {"red", 0xFADADD, 0x4A2422}, + {"orange", 0xFFE1C6, 0x472F17}, + {"yellow", 0xFFF0C2, 0x3E3516}, + {"green", 0xD9EEDC, 0x243A26}, + {"mint", 0xD5F0EA, 0x163631}, + {"blue", 0xD9EAFB, 0x1C3448}, + {"purple", 0xE9DDF5, 0x342C40}, + {"pink", 0xF7DDEC, 0x46202E}, + {"gray", 0xE5E7EB, 0x2A2D32}, +}; +inline constexpr size_t SWATCH_COUNT = sizeof(SWATCHES) / sizeof(SWATCHES[0]); +inline uint32_t swatch(const std::string &name) { + for (const auto &s : SWATCHES) if (name == s.name) return s.light; + return 0; +} +// A card's own colour (a swatch's light value, or 0 for none) as this look draws it. +inline uint32_t surface(uint32_t own) { + if (!own) return hex(CARD); + if (!dark) return own; + for (const auto &s : SWATCHES) if (s.light == own) return s.dark; + return hex(CARD); +} +// The hairline around a card: the card's own colour a little darker in light, a little lighter in dark. +inline uint32_t outline(uint32_t own) { + if (!own) return hex(LINE); + return dark ? mix(surface(own), 0xFFFFFF, 232) : mix(own, 0x000000, 220); +} + +// ---- Home Assistant's state colours +// What a state looks like in Home Assistant's frontend (its --state-*-color and --*-color variables), the same in both +// looks: an amber light is amber at night too. They are data, drawn through state(), foreground(), tint() and icon(). +namespace ha { +constexpr uint32_t AMBER = 0xFFC107; // a light, switch or binary sensor that is on; lux +constexpr uint32_t ORANGE = 0xFF9800; // the sun above the horizon, a paused timer or robot, drying +constexpr uint32_t DEEP_ORANGE = 0xFF6F22; // temperature, heating +constexpr uint32_t RED = 0xF44336; // a robot in trouble +constexpr uint32_t PURPLE = 0x926BC7; // covers, scenes and scripts, energy +constexpr uint32_t DEEP_PURPLE = 0x6E41AB; // a clear night, the sun below the horizon +constexpr uint32_t INDIGO = 0x3F51B5; // selects +constexpr uint32_t BLUE = 0x2196F3; // cooling, a robot on its way back, the settings card, everything else +constexpr uint32_t LIGHT_BLUE = 0x03A9F4; // media players, the weather +constexpr uint32_t CYAN = 0x00BCD4; // fans +constexpr uint32_t TEAL = 0x009688; // numbers, percentages, a running timer, a robot at work +constexpr uint32_t GREEN = 0x4CAF50; // someone at home, auto mode +constexpr uint32_t GREY = 0x9E9E9E; // anything off or away +constexpr uint32_t SKY = 0x00A6ED; // a robot that is docked or idle +constexpr uint32_t SWITCH_ON = 0xFFB900; // the switch on a history card while on +constexpr uint32_t PURPLE_PRESSED = 0x7552A8; // a chosen cover key under a finger +// The weather card's conditions and the sun card. +constexpr uint32_t SUNNY = 0xFFB300, RAIN = 0x1E88E5, SNOW = 0x4FC3F7, LIGHTNING = 0xFFA000; +constexpr uint32_t PARTLY_CLOUDY = 0x7E9BB5, CLOUDY = 0x78909C, NIGHT_SKY = 0x5C6BC0; +// Warnings and good news drawn on a card: a low battery, the analog clock's second hand; charging. +constexpr uint32_t ALARM = 0xE53935, CHARGING = 0x43A047; +} // namespace ha + +// ---- Home Assistant's colours on their way to the glass +// Grey is what Home Assistant draws for something off; the add-on's timelines add a lighter grey for off and one for no +// data. In dark those greys come from the table; every other state colour stays itself. +constexpr uint32_t STATE_OFF = ha::GREY; +inline uint32_t state(uint32_t color) { + if (!dark) return color; + if (color == STATE_OFF) return ROLES[OFF].dark; + if (color == ROLES[HISTORY_OFF].light) return ROLES[HISTORY_OFF].dark; + if (color == ROLES[HISTORY_EMPTY].light) return ROLES[HISTORY_EMPTY].dark; + return color; +} +// Relative lightness 0-255 (Rec. 601 weights): enough to tell a colour that sinks into a dark card. +inline uint32_t lightness(uint32_t color) { + return ((color >> 16 & 0xFF) * 299 + (color >> 8 & 0xFF) * 587 + (color & 0xFF) * 114) / 1000; +} +// A state colour drawn as a glyph, a line or words on the page or a card. Dark lifts the deep ones (indigo, purple) +// until they read on graphite. +inline uint32_t foreground(uint32_t color) { + color = state(color); + if (!dark) return color; + const uint32_t l = lightness(color); + return l >= 110 ? color : mix(color, 0xFFFFFF, static_cast(255 - (110 - l) * 3 / 2)); +} +// The pale circle behind a tile's icon, a halo, a slider's track: the colour at `amount` over white in light, and +// over the card in dark, where the same share would vanish, a little more. +inline uint32_t tint(uint32_t color, uint8_t amount) { + color = state(color); + if (!dark) return mix(color, 0xFFFFFF, amount); + const unsigned stronger = amount + amount / 3 + 8; + return mix(color, hex(CARD), static_cast(stronger > 255 ? 255 : stronger)); +} +// A tile's icon in its state colour: a touch darker in light, so a pale bulb still shows; a touch lighter in dark. +inline uint32_t icon(uint32_t color) { + color = state(color); + return dark ? mix(foreground(color), 0xFFFFFF, 230) : mix(color, 0x333333, 205); +} +// The soft area under a graph line: a fifth of the line's colour in light; less over graphite, where the same share +// turns a large brown or purple block. +inline uint8_t fill_opacity() { return dark ? 38 : 51; } +// Keys drawn inside a card of any colour (a wide tile's direct controls): a shade away from the card, towards the +// middle, so they read on white, on a pastel and on graphite alike. +inline uint32_t key_on(uint32_t card, uint8_t depth) { + return dark ? mix(card, 0xFFFFFF, static_cast(255 - (255 - depth) * 3 / 2)) : mix(card, 0x000000, depth); +} + +} // namespace theme + +#ifndef THEME_TEST +#include "lvgl.h" +#include + +namespace theme { + +inline lv_color_t color(Role role) { return lv_color_hex(hex(role)); } +inline lv_color_t rgb(uint32_t value) { return lv_color_hex(value); } + +// ---- paints: shared styles filled from the table +// A board profile gives a widget a paint instead of a colour (`styles: paint_card`). Its style definitions carry no +// colour: the profile's `theme::paints` fills each one with fill(), at boot and after every change of look. The list +// is code, not a table in RAM, and a shared style costs a widget one style reference, about what the local colour it +// replaces cost. The firmware's own long-lived widgets take the same paints through style(). +constexpr uint8_t NONE = 0xFF; +enum class Paint : uint8_t { + page, page_soft, page_pressed, card, raised, key, key_pressed, track, ink, ink_soft, muted, subtle, slate, + scrim, veil, accent_tint, accent_bright, button_dark, button_dark_pressed, knob, spinner, calibration, COUNT +}; +struct PaintRoles { uint8_t bg, border, text, line, arc; }; +inline constexpr PaintRoles PAINTS[static_cast(Paint::COUNT)] = { + /* page */ {PAGE, NONE, INK, NONE, NONE}, + /* page_soft */ {PAGE_SOFT, NONE, INK, NONE, NONE}, + /* page_pressed */ {PAGE_PRESSED, NONE, NONE, NONE, NONE}, + /* card */ {CARD, LINE, INK, NONE, NONE}, + /* raised */ {RAISED, RAISED_LINE, INK, NONE, NONE}, + /* key */ {KEY, NONE, INK, NONE, NONE}, + /* key_pressed */ {KEY_PRESSED, NONE, NONE, NONE, NONE}, + /* track */ {TRACK, NONE, INK, NONE, NONE}, + /* ink */ {NONE, NONE, INK, NONE, NONE}, + /* ink_soft */ {NONE, NONE, INK_SOFT, NONE, NONE}, + /* muted */ {NONE, NONE, MUTED, NONE, NONE}, + /* subtle */ {NONE, NONE, SUBTLE, NONE, NONE}, + /* slate */ {NONE, SLATE, SLATE, SLATE, NONE}, + /* scrim */ {SCRIM, NONE, NONE, NONE, NONE}, + /* veil */ {VEIL, NONE, NONE, NONE, NONE}, + /* accent_tint */ {ACCENT_TINT, NONE, NONE, NONE, NONE}, + /* accent_bright */ {ACCENT_BRIGHT, NONE, NONE, NONE, NONE}, + /* button_dark */ {BUTTON_DARK, NONE, ON_ACCENT, NONE, NONE}, + /* button_dark_pressed */ {BUTTON_DARK_PRESSED, NONE, NONE, NONE, NONE}, + /* knob */ {KNOB, NONE, NONE, NONE, NONE}, + /* spinner */ {NONE, NONE, NONE, NONE, SPINNER_TRACK}, + /* calibration */ {CALIBRATION_PAGE, NONE, CALIBRATION_INK, NONE, NONE}, +}; +// Fill a style with a paint in the current look. Setting a property the style already has allocates nothing. +inline void fill(lv_style_t *style, Paint paint) { + if (!style) return; + const PaintRoles &p = PAINTS[static_cast(paint)]; + if (p.bg != NONE) lv_style_set_bg_color(style, color(static_cast(p.bg))); + if (p.border != NONE) lv_style_set_border_color(style, color(static_cast(p.border))); + if (p.text != NONE) lv_style_set_text_color(style, color(static_cast(p.text))); + if (p.line != NONE) lv_style_set_line_color(style, color(static_cast(p.line))); + if (p.arc != NONE) lv_style_set_arc_color(style, color(static_cast(p.arc))); +} +// The board profile's styles and the paint of each, as fill() calls. Set and run once in on_boot. +inline void (*paints)() = nullptr; +// The firmware's own shared style for a paint, made on first use. +inline std::array(Paint::COUNT)> own{}; +inline lv_style_t *style(Paint paint) { + auto *&s = own[static_cast(paint)]; + if (!s) { + s = new lv_style_t; + lv_style_init(s); + fill(s, paint); + } + return s; +} +// What the board draws again after a change of look: the tiles, an open card, the settings page. Set by the profile. +inline void (*redraw)() = nullptr; +// The one way the look changes. Every paint is filled again and LVGL is told once; what code painted itself follows +// through redraw(). A look the screen already has costs nothing, so the setting may be applied on every change. +inline void set_dark(bool on) { + if (on == dark) return; + dark = on; + if (paints) paints(); + for (size_t i = 0; i < own.size(); ++i) if (own[i]) fill(own[i], static_cast(i)); + // One walk over every widget instead of one per paint. + lv_obj_report_style_change(nullptr); + if (redraw) redraw(); +} + +} // namespace theme +#endif diff --git a/components/smart_display/tile_controls.h b/components/smart_display/tile_controls.h index dd0d97e..596d4ac 100644 --- a/components/smart_display/tile_controls.h +++ b/components/smart_display/tile_controls.h @@ -4,6 +4,7 @@ // a -/+ step lands on the entity's grid, and the status line beside them. The // LVGL drawing lives in runtime_tiles.h; tests/test_tile_controls.cpp covers this. #include "runtime_model.h" +#include "theme.h" #include #include #include @@ -49,13 +50,14 @@ inline std::string panel_kind(const Tile &t) { inline bool has_mode(const std::string &hvac_modes, const char *mode) { return hvac_modes.find("\"" + std::string(mode) + "\"") != std::string::npos; } // Home Assistant's colour for a climate mode (the card and its mode keys use it). inline uint32_t mode_color(const std::string &mode) { - if (mode == "heat") return 0xFF6F22; - if (mode == "cool") return 0x2196F3; - if (mode == "heat_cool") return 0xFFC107; - if (mode == "auto") return 0x4CAF50; - if (mode == "fan_only") return 0x00BCD4; - if (mode == "dry") return 0xFF9800; - return 0x9E9E9E; + using namespace theme::ha; + if (mode == "heat") return DEEP_ORANGE; + if (mode == "cool") return BLUE; + if (mode == "heat_cool") return AMBER; + if (mode == "auto") return GREEN; + if (mode == "fan_only") return CYAN; + if (mode == "dry") return ORANGE; + return GREY; } inline const char *mode_icon(const std::string &mode) { if (mode == "off") return glyph::POWER; diff --git a/components/smart_display/tile_palette.h b/components/smart_display/tile_palette.h index 4fc7a87..86ff7d7 100644 --- a/components/smart_display/tile_palette.h +++ b/components/smart_display/tile_palette.h @@ -1,21 +1,12 @@ #pragma once #include #include +#include "theme.h" namespace tile_palette { -// Match the editor palette; all backgrounds are chosen for dark text. -inline uint32_t color(const std::string &name) { - if(name=="red")return 0xFADADD; - if(name=="orange")return 0xFFE1C6; - if(name=="yellow")return 0xFFF0C2; - if(name=="green")return 0xD9EEDC; - if(name=="mint")return 0xD5F0EA; - if(name=="blue")return 0xD9EAFB; - if(name=="purple")return 0xE9DDF5; - if(name=="pink")return 0xF7DDEC; - if(name=="gray")return 0xE5E7EB; - return 0; // Automatic/default, including unknown future palette names. -} +// The named card colours ESP Screens offers (theme::SWATCHES). A tile and an alert keep the light value as the colour's +// identity; theme::surface() draws it in the current look. Unknown future names and "auto" are 0: the normal card. +inline uint32_t color(const std::string &name) { return theme::swatch(name); } // "None": no card behind the tile contents. Older firmware treats it as automatic. inline bool transparent(const std::string &name) { return name=="none"; } } diff --git a/docs/EASY_SETUP.md b/docs/EASY_SETUP.md index 86cf4b0..db97340 100644 --- a/docs/EASY_SETUP.md +++ b/docs/EASY_SETUP.md @@ -256,6 +256,7 @@ After this, changes to these settings don't need a new firmware flash. | Auto standby | On/off | On | | Standby after | 1–1440 minutes after the last touch | 10 minutes | | Normal brightness | 5–100% | 100% | +| Dark mode | On/off: black page, graphite cards, firmware 0.2.54+ | Off | | Standby brightness | 0–100%, capped at normal brightness | 20% | | Night mode | On/off; applies during standby | On | | Night start/end | Hour and minute, can span midnight | 22:00–07:00 | diff --git a/docs/RELEASING.md b/docs/RELEASING.md index c32e7aa..8bec60e 100644 --- a/docs/RELEASING.md +++ b/docs/RELEASING.md @@ -176,6 +176,53 @@ icons sit off-center in the browser); run `generate_packages.py` afterward. The `MDI_GLYPH_*` substitutions are retired: `TILEn_ICON` in manual profiles must come from the set. No changed preferences or keys. +### Compatibility 0.2.63 / firmware 0.2.54 + +Firmware (`components/smart_display`, new `theme.h`), both board profiles and the app's settings. The tile protocol +and the layout message are unchanged; nothing new on the wire. + +- **Colours in one table.** `theme.h` holds every colour the firmware chooses: roles with a light and a dark value, + the named card colours (`SWATCHES`, moved out of `tile_palette.h`, which now looks them up) and Home Assistant's + state colours (`theme::ha`). Headers ask for roles; the profiles give widgets paints (`styles: paint_card`), shared + styles without a colour that the profile's `theme::paints` list fills (`theme::fill()`, code in flash rather than a + table in RAM). `tests/test_theme.py` fails on a hex colour anywhere else (the light's colour picker and the value + card's colour wheel keep their hues) and on a paint that is not defined, filled once and used in every profile and + package; `tests/test_theme.cpp` checks the values. +- **The light look is the old one.** Host renders of every page, card, alert and settings page against firmware + 0.2.53 are pixel-identical, apart from merges below one panel step: the text of the simple cards (`#202020` to + `#1B1B1B`) and of some secondary words (`#5F6368` to `#616161`), the colour card's page (`#F7F7F7` to `#F8F8F8`, + what the eye saw through the old sheet), an unavailable tile's circle and the off brightness track (to `#F1F1F1`), + a pressed round key (`#DADADA` and `#D9D9D9` to `#DDDDDD`) and the tints of the vacuum's halo and the cover sliders, + now computed from their state colour (within two steps of the old hand-picked values), and the two fixes below. +- **Two redraws that drew differently**, found by comparing a screen that switched looks with one that booted in it, + and both older than 0.2.54. `settings_screen::draw()` ends in `refresh()`, whose `move_knob()` read the new track's + coordinates before LVGL had laid the page out (still 0 wide), so every switch that was on showed its knob at the + left until the next refresh; the knob is now placed from the size `pill()` gave the track (`knob_x()`), and a + change of look, which draws the page again, no longer throws the Dark mode switch's own knob to the left. And + `render_slot`'s palette gave the sun path's fill the tile's accent (orange) whenever the palette changed, while + `render_sunpath` sets the sun's yellow on every render, so the sunlit area changed colour by itself a minute later; + the sun path keeps its own fill now. +- **Dark mode** is `settings_screen::dark_mode` beside the other settings outside the frozen block, with a uint32 + preference of its own (`0x44524B31`, "DRK1"); `screen_settings::Settings` stays version 1. It is a row under + Brightness (five rows: no pager on either board), the template switch `Dark mode` (config, `restore_mode: DISABLED`) + and the app's key `dark_mode` (`SETTING_RULES`, `SETTINGS_BESIDE_BLOCK`, `SETTING_ENTITIES`). A screen that gets its + settings with the layout never has it: `settings_view` leaves it out, the layout message never carries it. + `DARK_MODE_MIN_FIRMWARE` is 0.2.54. +- **A change of look** runs through `set()` -> `apply_screen_settings` -> `theme::set_dark()`: the profile's and the + firmware's own paints are refilled, LVGL is told once (`lv_obj_report_style_change(nullptr)`), and `theme::redraw` + (set in `on_boot`) draws again what code painted by state: the tiles' palettes and the top bar + (`runtime_tiles::restyle`), an open card in place, the colour card (`light_controls::restyle`), the settings page, + an alert that is up (`alert_card_color`) and the climate card and its mode picker. The same pass, so no frame + mixes the looks; at boot `set_dark()` runs before the first frame. +- **Profiles:** the substitutions `BG_TOP_COLOR`, `BG_BOTTOM_COLOR` and `ACCENT_*` are gone (an override that set them + has no effect any more), `style_bg_grad` is `style_page` (one fill, no gradient between two equal stops), the four + unused `*_disabled` styles and the colour card's `color_detail_bg` and `color_detail_scrim` are removed, and + `open_value_overlay` lost its three colour parameters (the value card's slider takes paints). +- App 0.2.63 with firmware 0.2.53 or older: no Dark mode row, everything else as before. Firmware 0.2.54 with an + older app: Dark mode works on the screen and in Home Assistant; the older editor does not show the row. +- A layout of a screen that gets its settings with the layout is stored with `dark_mode` among its settings. An app + from before 0.2.63 refuses that key: restore the data backup when rolling back, as for every settings key before. + ### Compatibility 0.2.62 / firmware 0.2.53 Firmware (`components/smart_display`), the icon fonts and the top bar's icon. Storage, tile protocol, preferences and diff --git a/docs/SETTINGS.md b/docs/SETTINGS.md index f512161..1127ab9 100644 --- a/docs/SETTINGS.md +++ b/docs/SETTINGS.md @@ -16,6 +16,7 @@ changes them with the entity's own action, and leaves them out of the layout mes | Row on the screen | Entity | Key in ESP Screens | |---|---|---| | Brightness | `number._normal_brightness` | `brightness` | +| Dark mode (0.2.54+) | `switch._dark_mode` | `dark_mode` | | Auto standby | `switch._auto_standby` | `standby_enabled` | | Standby after | `number._standby_after` | `standby_seconds` | | Standby brightness | `number._standby_brightness` | `standby_brightness` | @@ -29,7 +30,9 @@ changes them with the entity's own action, and leaves them out of the layout mes | Rotation (Guition) | `select._rotation` | `rotation` | The first four entities and Auto standby existed before 0.2.49; ESP Screens recognizes a screen that owns -its settings by one of the others (`OWNED_SETTINGS_MARKERS` in `core.py`). +its settings by one of the others (`OWNED_SETTINGS_MARKERS` in `core.py`). Dark mode came with firmware 0.2.54: +a screen without its switch shows no Dark mode row in ESP Screens, and firmware that gets its settings with the +layout never gets it at all. What Dark mode changes on the glass is in [docs/THEME.md](THEME.md). **Older firmware: ESP Screens.** The values travel in the layout message: `settings`, the frozen block of eleven keys, with `swipe_pages`, `auto_home`, `auto_home_seconds` and `rotation` as keys of their own. A @@ -47,7 +50,7 @@ The page is a menu of groups, each of which opens a page of its own: | Group | Rows | |---|---| -| Brightness | Brightness, Auto standby, Standby after, Standby brightness | +| Brightness | Brightness, Dark mode, Auto standby, Standby after, Standby brightness | | Night | Night mode, Starts, Ends, Night brightness | | Screen | Clock, Back to page 1, After, Also on standby, Swipe between pages, Rotation (boards that turn) | | This screen | Screen, Address, Firmware, Home Assistant, Restart | diff --git a/docs/THEME.md b/docs/THEME.md new file mode 100644 index 0000000..8fb79d3 --- /dev/null +++ b/docs/THEME.md @@ -0,0 +1,84 @@ +# Colours and Dark mode + +Every colour the screens choose themselves lives in one file, `components/smart_display/theme.h` +(firmware 0.2.54+). Dark mode is a second value for each of them, not a second design: the +layout, the fonts and the sizes stay exactly as they are. This page says how the colours reach +the glass and what a new colour takes. + +## The model + +| Part | What it is | Where | +|---|---|---| +| Role | What a colour is for (`PAGE`, `CARD`, `INK`, `MUTED`, `KEY_PRESSED`, ...), with a light and a dark value | `theme::ROLES`, the table at the top of `theme.h` | +| Swatch | A named card colour a tile or an alert can pick (`red` ... `gray`), light and dark | `theme::SWATCHES` | +| State colour | Home Assistant's colour for a state (the amber of a light that is on), the same in both looks | `theme::ha` | +| Paint | A shared LVGL style filled from roles: `card` is a card's background, hairline and text | `theme::Paint`, `theme::PAINTS` | +| Look | `theme::dark`, set by `theme::set_dark()` from the Dark mode setting | `settings_screen::dark_mode` | + +The light values are the design as it has always been; `tests/test_theme.cpp` pins the main ones. +The dark values follow a few rules: a black page, graphite cards (`#1A1A1A`) with a hairline, +soft white text (`#DADADA`) and greys for secondary words, Home Assistant's state colours +unchanged, their tints a little stronger over graphite, and a grey whose red, green and blue land +on the same step of the RGB565 panel, so it stays grey on both boards. + +## How a colour reaches the glass + +- **Board profiles** write no colour. A widget names a paint, `styles: paint_card`, or a style that + carries one (`style_page`, `style_tile`, `style_room`, ...). The style definitions have no colour; + `on_boot` sets `theme::paints` to the list of `theme::fill(id(style), Paint::...)` calls and runs it. The list is + code in flash, not a table in RAM, and `theme::set_dark()` runs it again. + Scripts that colour a widget by state ask for a role: `theme::color(selected ? theme::ACCENT_BRIGHT : theme::CARD)`. +- **Firmware** asks for roles: `theme::color(theme::INK)`, `theme::hex(theme::MUTED)`, the + `detail_text(..., theme::SUBTLE)` and `detail_shape(..., theme::TRACK, ...)` overloads. A widget + that lives as long as the screen and never changes colour by state takes a paint too: + `lv_obj_add_style(obj, theme::style(theme::Paint::knob), LV_PART_KNOB)`. +- **State colours** pass through a helper on their way to the glass: + `state()` (Home Assistant's greys become the dark greys), `foreground()` (a glyph, a line or words: + deep colours are lifted in dark), `tint()` (the pale circle, a halo, a slider track), `icon()` + (a tile's icon), `surface()` and `outline()` (a card's own colour and hairline), `key_on()` (keys + inside a card of any colour) and `fill_opacity()` (the area under a graph). + +## A change of look + +`settings_screen::set("dark_mode", ...)` stores the setting in its own preference (`DRK1`), runs +`apply_screen_settings`, and that calls `theme::set_dark()`. A look the screen already has costs +nothing. A real change runs `theme::paints`, refills the firmware's own paints, tells LVGL once, and calls +`theme::redraw`, set in `on_boot`, which draws again what code painted by state: + +- `runtime_tiles::restyle()`: every tile's palette, the top bar's icons, and an open card, in place; +- `light_controls::restyle()`, `settings_screen::restyle()`; +- an alert that is up (`theme::surface(id(alert_card_color))`), and the climate card and its mode + picker when they are open. + +Everything happens in the same pass, so no frame shows half of each look. At boot `set_dark()` +runs before the first frame. + +A redraw has to give exactly what a first draw gives, whatever came before it. Two things that did +not were found by comparing a screen that switched with one that booted in that look: a position +worked out from coordinates LVGL had not laid out yet (they read 0 until its next pass: use the size +you set), and a palette pass that overwrote a colour the sun path had chosen itself. + +## Adding a colour + +1. **A role**: one line in `enum Role` and one row in `ROLES`, in the same order (the tests read + both). The light value is the design; choose the dark value on a render, not in the table. +2. **In firmware code**: `theme::color(theme::YOUR_ROLE)`. Never `lv_color_hex(0x...)`. +3. **In a board profile**: the widget takes a paint. For a new combination add it to `enum class + Paint` and `PAINTS`, a colourless `- id: paint_` in the `style_definitions` of both profiles, + and `theme::fill(id(paint_), Paint::);` in their `theme::paints` list. Then + `python3 tools/generate_packages.py`. +4. **Something drawn once and kept that changes colour by state**: set it where the state is drawn, + and make sure the redraw above reaches that code. +5. A local colour always wins over a paint: an object that takes a paint must not also get a local + colour for the same property and part. + +## Checks + +- `tests/test_theme.cpp`: the light design, contrast of the text roles on every surface and swatch in + both looks, neutral dark greys, and the helpers. +- `tests/test_theme.py`: no colour outside `theme.h` (the light's colour picker and the value card's + colour wheel keep their hues), every paint defined, filled once and used, and the look applied at + boot, after a change and in the redraw. +- Renders of the host build in both looks (see `docs/RELEASING.md`, Compatibility 0.2.63): the light + look pixel for pixel against the previous firmware, a screen that boots dark against one that + switched, and every card opened in light and switched while open against the same card opened in dark. diff --git a/docs/images/guition-dark-controls.png b/docs/images/guition-dark-controls.png new file mode 100644 index 0000000000000000000000000000000000000000..565ac12dd25ff966831e7c4c50bb33a761a0cbbd GIT binary patch literal 29514 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 literal 0 HcmV?d00001 diff --git a/docs/images/guition-dark-page-4.png b/docs/images/guition-dark-page-4.png new file mode 100644 index 0000000000000000000000000000000000000000..0cce1c4384ee04a2967a9fc0884b69ac4ec914c3 GIT binary patch literal 42528 zcmce;c{E$=+czGn?QvS|Ikegu&uN3IsZ~UcohwuoRf?cml$eK@ht5Y8r!kcvt+8r| zDS{wqam@1=K}|8m6huVg-D%bNKF?b3vwqL}$L|ko**kmR<8@!d=lWbb^zNNoJiiM3 z3Ic(6pjy`rK%jlq?7v?Q0C%?fenWvk>162jEBAbc7MQ*vj$VP}9ZkKZK$p?Lr-zHj5Io9bILccSddLasW`QnApH(N=g0er_B9*=Y0WZIs#5|84l1Ka+7KJ1N7 z%6llN^^cUZzg;P~laSt1cM?^N2i&uYLjH$E?tC(z|aFt6D5tVIvK$~h(r?AgbO z1VfQ&Snz{GQXAIB?2DcPc=y*Z3n=h^muczAI~B_@z+G_e%R}G39T1B>iGAzi}_`rF)B89hZtrB z5BWZnoL&K|-G{Sf_A7D3vimFG=i9q^Vee)i@7_(ty_@&(mvz{E7CXp=Ft>`>Z-@47 zD?Z_~Vh@EkXum1@SFqfV-c~tH*q3Q}NUMF)-yaaK{{Fi!$M;L*iT}mrZe#zg?f=!~ z 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 literal 0 HcmV?d00001 diff --git a/guition-4848s040.yaml b/guition-4848s040.yaml index 5fa91f0..9ff9522 100644 --- a/guition-4848s040.yaml +++ b/guition-4848s040.yaml @@ -2,7 +2,7 @@ # Source profile for packages/guition.yaml (tools/generate_packages.py); see docs/GUITION.md. # A screen gets its tiles from the ESP Screen Manager add-on while it runs. The CYD is its own profile. substitutions: - SCREEN_FIRMWARE_VERSION: "0.2.53" + SCREEN_FIRMWARE_VERSION: "0.2.54" # 0: no drift limit; LVGL decides, releasing inside the tile is a tap, leaving it is not # (like iOS). The CYD keeps a limit because its resistive panel jumps. TOUCH_MOVE_LIMIT_PX: "0" @@ -28,26 +28,6 @@ substitutions: NIGHT_END_HOUR: "7" # 0-23 NIGHT_DIM_BRIGHTNESS: "10" # backlight brightness in percent at night - # ============================================================ - # ACCENT COLOURS — determined automatically from the Home Assistant domain - # - # The domain is the part before the dot in the entity_id: - # script.good_morning -> "script" -> ACCENT_ACTION - # light.living_room_2 -> "light" -> ACCENT_LIGHT - # vacuum.s8 -> "vacuum" -> ACCENT_DEVICE - # - # That's Home Assistant's own grouping, so a tile automatically gets the - # right colour as soon as you put an entity in it — you no longer have - # to pick colours per tile. The distinction that matters: a script/scene - # fires, a device you turn on or off. Those two shouldn't look the same. - # - # A tile keeps this colour unless you pick one in ESP Screens; ${ACCENT_AUTO} - # is the sentinel that means "decide from the domain". - # ============================================================ - ACCENT_AUTO: "0x1000000" # sentinel: deliberately outside the 24-bit colour range - ACCENT_ACTION: "0x8B5CF6" # script / scene / button / input_button / automation - ACCENT_LIGHT: "0xFEC600" # light - ACCENT_DEVICE: "0x00C5EC" # switch, fan, cover, climate, vacuum, media_player, rest DISPLAY_W: "480" DISPLAY_H: "480" LVGL_ROTATION: "0" @@ -91,8 +71,6 @@ substitutions: OVERLAY_SLIDER_W: "144" OVERLAY_SLIDER_H: "300" OVERLAY_ICON_Y: "148" - BG_TOP_COLOR: "0xE7E7E7" - BG_BOTTOM_COLOR: "0xE7E7E7" TILE_ICON_X: "0" TILE_ICON_Y: "12" TILE_TITLE_X: "64" @@ -191,6 +169,35 @@ esphome: runtime_tiles::enabled = true; runtime_tiles::rotation_supported = true; runtime_tiles::load_settings(); + // Colours (firmware 0.2.54+): the styles of this profile take their colours from theme.h. The list runs now, + // in the look the screen saved, before anything is drawn, and again after every change of look. + theme::paints = []() { + using theme::Paint; + for (auto *style : {id(style_room), id(style_time), id(style_title), id(style_value_big), id(paint_ink)}) theme::fill(style, Paint::ink); + theme::fill(id(style_page), Paint::page); + theme::fill(id(style_tile), Paint::card); + theme::fill(id(style_icon_circle), Paint::accent_tint); + theme::fill(id(style_value), Paint::muted); + theme::fill(id(paint_page_soft), Paint::page_soft); + theme::fill(id(paint_page_pressed), Paint::page_pressed); + theme::fill(id(paint_card), Paint::card); + theme::fill(id(paint_raised), Paint::raised); + theme::fill(id(paint_key), Paint::key); + theme::fill(id(paint_key_pressed), Paint::key_pressed); + theme::fill(id(paint_track), Paint::track); + theme::fill(id(paint_ink_soft), Paint::ink_soft); + theme::fill(id(paint_muted), Paint::muted); + theme::fill(id(paint_subtle), Paint::subtle); + theme::fill(id(paint_slate), Paint::slate); + theme::fill(id(paint_scrim), Paint::scrim); + theme::fill(id(paint_veil), Paint::veil); + theme::fill(id(paint_accent_tint), Paint::accent_tint); + theme::fill(id(paint_accent_bright), Paint::accent_bright); + theme::fill(id(paint_button_dark), Paint::button_dark); + theme::fill(id(paint_button_dark_pressed), Paint::button_dark_pressed); + }; + theme::paints(); + theme::set_dark(settings_screen::dark_mode != 0); runtime_tiles::settings_changed = []() { id(apply_screen_settings).execute(); }; runtime_tiles::dismiss = []() { runtime_tiles::hide_detail(); @@ -223,7 +230,7 @@ esphome: id(active_climate_action) = t.extra().hvac_action; id(open_value_overlay).execute(t.name, t.entity, t.domain(), "auto", t.active(), 0, t.brightness, t.percentage, t.position, runtime_tiles::icon_for(t), - 0xD5EEFC, 0x00A6ED, 0x1B1B1B, "Off", "On", t.modes, + "Off", "On", t.modes, t.current, t.target, t.humidity, t.state, t.extra().hvac_modes, std::to_string(t.minimum), std::to_string(t.maximum), std::to_string(t.step)); }; @@ -282,6 +289,16 @@ esphome: settings_screen::before_open = []() { id(close_cards).execute(); }; settings_screen::hold_limit = ${SETTINGS_HOLD_DRIFT_PX}; settings_screen::tap_limit = ${TOUCH_MOVE_LIMIT_PX}; + // What a change of look draws again, now that everything is bound: the tiles, the top bar and an open card, + // the colour card, the settings page, an alert and the climate cards. + theme::redraw = []() { + runtime_tiles::restyle(); + light_controls::restyle(); + settings_screen::restyle(); + if (id(alert_active)) lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(theme::surface(id(alert_card_color))), LV_PART_MAIN); + if (!lv_obj_has_flag(id(climate_detail_overlay), LV_OBJ_FLAG_HIDDEN)) id(climate_card_refresh).execute(); + if (!lv_obj_has_flag(id(climate_mode_overlay), LV_OBJ_FLAG_HIDDEN)) id(open_climate_mode_picker).execute(); + }; // Under the cards: brightness_overlay is the first of them on the page, so the back button and // the action at the top right of a card keep their taps. settings_screen::attach_hold(id(home_page)->obj, ${SETTINGS_HOLD_X}, 0, ${SETTINGS_HOLD_W}, ${SCROLL_Y}, id(brightness_overlay)); @@ -548,6 +565,10 @@ globals: initial_value: 'false' - id: alert_title_text type: std::string + # The alert's colour as the automation named it (a swatch's light value, 0 for the normal card). + - id: alert_card_color + type: uint32_t + initial_value: '0' - id: alert_timeout_seconds type: int initial_value: '0' @@ -1109,6 +1130,18 @@ switch: - lambda: 'settings_screen::set("night_enabled", 1);' turn_off_action: - lambda: 'settings_screen::set("night_enabled", 0);' + # The dark look for a screen beside a bed (firmware 0.2.54+): black page, graphite cards, soft white text. + - platform: template + id: setting_dark_mode + name: "Dark mode" + icon: "mdi:theme-light-dark" + entity_category: config + restore_mode: DISABLED + lambda: return settings_screen::dark_mode != 0; + turn_on_action: + - lambda: 'settings_screen::set("dark_mode", 1);' + turn_off_action: + - lambda: 'settings_screen::set("dark_mode", 0);' - platform: template id: setting_clock_24h name: "24-hour clock" @@ -1374,23 +1407,17 @@ lvgl: rotation: ${LVGL_ROTATION} style_definitions: - # Background: two-stop vertical gradient instead of the 320x240 - # RGB565 wallpaper. Saves ~150 KB flash and an image blit per redraw, - # which you can see directly in how smoothly it scrolls. - - id: style_bg_grad - bg_color: ${BG_TOP_COLOR} - bg_grad_color: ${BG_BOTTOM_COLOR} - bg_grad_dir: VER + # The page behind the tiles and the cards: one colour from the theme (theme.h PAGE), no wallpaper and no + # gradient, so a redraw is a plain fill. + - id: style_page bg_opa: COVER border_width: 0 radius: 0 - id: style_tile - bg_color: 0xFFFFFF bg_opa: COVER radius: 22 border_width: 1 - border_color: 0xDDDDDD border_opa: COVER pad_left: 12 pad_right: 12 @@ -1399,66 +1426,51 @@ lvgl: shadow_width: 0 shadow_opa: 40% - - id: style_tile_disabled - bg_color: 0xFFFFFF - bg_opa: COVER - radius: 22 - border_width: 1 - border_color: 0xDDDDDD - border_opa: COVER - pad_left: 12 - pad_right: 12 - pad_top: 12 - pad_bottom: 12 - shadow_width: 0 - shadow_opa: 25% - - id: style_icon_circle - bg_color: 0xD5EEFC - bg_opa: COVER - radius: 999 - border_width: 0 - - - id: style_icon_circle_disabled - bg_color: 0xEEEEEE bg_opa: COVER radius: 999 border_width: 0 - id: style_room text_font: headline - text_color: 0x1B1B1B text_opa: 100% - id: style_time text_font: time_label - text_color: 0x1B1B1B text_opa: 100% - id: style_title text_font: label - text_color: 0x000000 text_opa: 100% - id: style_value text_font: sublabel - text_color: 0x7A7A7C text_opa: 100% - id: style_value_big text_font: sublabel_big - text_color: 0x1B1B1B text_opa: 80% - - id: style_title_disabled - text_font: label - text_color: 0x1B1B1B - text_opa: 100% - - - id: style_value_disabled - text_font: sublabel - text_color: 0x1B1B1B - text_opa: 100% + # Paints: shared styles without a colour of their own. theme.h fills them (the list in on_boot, theme::paints) + # and fills them again when Dark mode changes, so a widget names a paint where it used to write a colour. + - id: paint_page_soft + - id: paint_page_pressed + - id: paint_card + - id: paint_raised + - id: paint_key + - id: paint_key_pressed + - id: paint_track + - id: paint_ink + - id: paint_ink_soft + - id: paint_muted + - id: paint_subtle + - id: paint_slate + - id: paint_scrim + - id: paint_veil + - id: paint_accent_tint + - id: paint_accent_bright + - id: paint_button_dark + - id: paint_button_dark_pressed # ---------- ALERT OVERLAY (HA action show_alert) ---------- # LVGL's top layer sits above every page, card and the dim overlay; the card @@ -1472,7 +1484,7 @@ lvgl: width: ${DISPLAY_W} height: ${DISPLAY_H} hidden: true - bg_color: 0x101820 + styles: paint_scrim bg_opa: 60% radius: 0 border_width: 0 @@ -1489,11 +1501,10 @@ lvgl: align: CENTER width: ${ALERT_CARD_W} height: ${ALERT_CARD_H} - bg_color: 0xFFFFFF + styles: paint_raised bg_opa: COVER radius: 18 border_width: 1 - border_color: 0xDDDDDD border_opa: COVER shadow_width: 0 pad_all: 0 @@ -1507,7 +1518,6 @@ lvgl: y: ${ALERT_ICON_Y} text: "\U000F002A" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - label: id: alert_title @@ -1517,7 +1527,6 @@ lvgl: long_mode: DOT text: "Notification" text_font: headline - text_color: 0x1B1B1B clickable: false - label: id: alert_subtitle @@ -1528,7 +1537,7 @@ lvgl: long_mode: WRAP text: "" text_font: sublabel_big - text_color: 0x3A3A3C + styles: paint_ink_soft clickable: false - obj: id: alert_ok @@ -1538,7 +1547,7 @@ lvgl: width: ${ALERT_BUTTON_W} height: ${ALERT_BUTTON_H} radius: 999 - bg_color: 0x1B1B1B + styles: paint_button_dark bg_opa: COVER border_width: 0 shadow_width: 0 @@ -1546,7 +1555,7 @@ lvgl: clickable: true scrollable: false pressed: - bg_color: 0x3A3A3C + styles: paint_button_dark_pressed bg_opa: COVER on_click: - if: @@ -1562,12 +1571,11 @@ lvgl: align: CENTER text: "OK" text_font: headline - text_color: 0xFFFFFF clickable: false pages: - id: home_page - styles: style_bg_grad + styles: style_page pad_all: 0 scrollable: false scrollbar_mode: 'OFF' @@ -1653,7 +1661,6 @@ lvgl: id: tile1_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F001B" clickable: false - label: @@ -1707,7 +1714,6 @@ lvgl: id: tile2_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F0387" clickable: false - label: @@ -1761,7 +1767,6 @@ lvgl: id: tile3_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F02E3" clickable: false - label: @@ -1815,7 +1820,6 @@ lvgl: id: tile4_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F059C" clickable: false - label: @@ -1869,7 +1873,6 @@ lvgl: id: tile5_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F0425" clickable: false - label: @@ -1923,7 +1926,6 @@ lvgl: id: tile6_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F070D" clickable: false - label: @@ -1980,7 +1982,6 @@ lvgl: id: tile7_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F06B5" clickable: false - label: @@ -2038,7 +2039,6 @@ lvgl: id: tile8_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F06EE" clickable: false - label: @@ -2091,7 +2091,6 @@ lvgl: id: tile9_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F04B9" clickable: false - label: @@ -2144,7 +2143,6 @@ lvgl: id: tile10_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F002A" clickable: false - label: @@ -2183,7 +2181,7 @@ lvgl: border_width: 0 scrollable: false pressed: - bg_color: 0xE3E3E3 + styles: paint_page_pressed bg_opa: COVER on_short_click: - if: @@ -2198,7 +2196,7 @@ lvgl: x: 24 text: "< Previous" text_font: label - text_color: 0x1B1B1B + styles: paint_ink clickable: false - label: id: page_number @@ -2211,7 +2209,6 @@ lvgl: text: "1 / 2" text_align: CENTER text_font: sublabel - text_color: 0x1B1B1B - obj: id: page_next align: BOTTOM_RIGHT @@ -2225,7 +2222,7 @@ lvgl: border_width: 0 scrollable: false pressed: - bg_color: 0xE3E3E3 + styles: paint_page_pressed bg_opa: COVER on_short_click: - if: @@ -2240,7 +2237,7 @@ lvgl: x: -24 text: "Next >" text_font: label - text_color: 0x1B1B1B + styles: paint_ink clickable: false - obj: @@ -2265,7 +2262,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - styles: style_bg_grad + styles: style_page scrollable: false clickable: true on_click: @@ -2277,7 +2274,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xFFFFFF + styles: paint_veil bg_opa: 18% border_width: 0 clickable: false @@ -2291,7 +2288,7 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2303,7 +2300,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2331,7 +2327,7 @@ lvgl: value: 100 adv_hittest: false - bg_color: 0xFFFFFF + styles: paint_accent_tint bg_opa: 100% radius: 42 # The only widget with BOTH a radius AND a child (overlay_icon). @@ -2344,7 +2340,7 @@ lvgl: border_width: 0 indicator: - bg_color: 0xD5EEFC + styles: paint_accent_bright bg_opa: 100% radius: 42 @@ -2376,7 +2372,7 @@ lvgl: align: CENTER y: ${OVERLAY_ICON_Y} text_font: materialdesign_icons - text_color: 0x1B1B1B + styles: paint_ink text: "\U000F001B" clickable: false @@ -2585,7 +2581,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xF7F7F7 + styles: paint_page_soft bg_opa: COVER hidden: true scrollable: false @@ -2596,27 +2592,6 @@ lvgl: pad_bottom: 0 border_width: 0 widgets: - - obj: - id: color_detail_bg - x: 0 - y: 0 - width: ${DISPLAY_W} - height: ${DISPLAY_H} - styles: style_bg_grad - scrollable: false - clickable: false - - obj: - id: color_detail_scrim - x: 0 - y: 0 - width: ${DISPLAY_W} - height: ${DISPLAY_H} - bg_color: 0xFFFFFF - bg_opa: 72% - border_width: 0 - clickable: false - scrollable: false - - obj: id: color_close_button align: TOP_LEFT @@ -2625,7 +2600,7 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2637,7 +2612,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2662,7 +2636,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xE7E7E7 + styles: style_page bg_opa: COVER hidden: true scrollable: false @@ -2681,7 +2655,7 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2693,7 +2667,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - obj: @@ -2704,7 +2677,6 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE bg_opa: COVER border_width: 0 clickable: true @@ -2717,7 +2689,6 @@ lvgl: align: CENTER text: "\U000F0425" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2740,7 +2711,7 @@ lvgl: text_align: CENTER text: "--" text_font: sublabel_big - text_color: 0x616161 + styles: paint_muted clickable: false - obj: @@ -2750,10 +2721,9 @@ lvgl: width: 94% height: 200 radius: 24 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: false scrollable: false @@ -2766,14 +2736,14 @@ lvgl: width: 116 height: 116 radius: 58 - bg_color: 0xF1F1F1 + styles: paint_track bg_opa: COVER border_width: 0 pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xD9D9D9 + styles: paint_key_pressed disabled: opa: 40% on_short_click: @@ -2790,7 +2760,6 @@ lvgl: align: CENTER text: "\U000F0374" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - obj: id: climate_plus_button @@ -2799,14 +2768,14 @@ lvgl: width: 116 height: 116 radius: 58 - bg_color: 0xF1F1F1 + styles: paint_track bg_opa: COVER border_width: 0 pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xD9D9D9 + styles: paint_key_pressed disabled: opa: 40% on_short_click: @@ -2823,7 +2792,6 @@ lvgl: align: CENTER text: "\U000F0415" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - label: id: climate_target_label @@ -2831,7 +2799,6 @@ lvgl: y: -14 text: "--" text_font: setpoint_digits - text_color: 0x1B1B1B clickable: false - label: id: climate_set_label @@ -2839,7 +2806,7 @@ lvgl: y: 46 text: "Target" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle clickable: false # One key per mode the device supports (off is the power key); the one in use is @@ -2867,15 +2834,14 @@ lvgl: flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "auto" } widgets: @@ -2883,22 +2849,20 @@ lvgl: align: CENTER text: "\U000F1B17" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_heat_cool flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "heat_cool" } widgets: @@ -2906,22 +2870,20 @@ lvgl: align: CENTER text: "\U000F1A79" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_heat flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "heat" } widgets: @@ -2929,22 +2891,20 @@ lvgl: align: CENTER text: "\U000F0238" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_cool flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "cool" } widgets: @@ -2952,22 +2912,20 @@ lvgl: align: CENTER text: "\U000F0717" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_dry flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "dry" } widgets: @@ -2975,22 +2933,20 @@ lvgl: align: CENTER text: "\U000F058E" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_fan_only flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "fan_only" } widgets: @@ -2998,22 +2954,20 @@ lvgl: align: CENTER text: "\U000F0210" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_more flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: open_climate_mode_picker widgets: @@ -3021,7 +2975,7 @@ lvgl: align: CENTER text: "\U000F01D8" text_font: materialdesign_icons - text_color: 0x46525E + styles: paint_slate clickable: false # Fan and swing, each a row of choices behind its icon (climate_card.h fills the card). - obj: @@ -3031,10 +2985,9 @@ lvgl: width: 94% height: 116 radius: 24 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 hidden: true clickable: false @@ -3051,7 +3004,7 @@ lvgl: width: ${DISPLAY_W} height: ${DISPLAY_H} hidden: true - bg_color: 0xE7E7E7 + styles: style_page bg_opa: COVER border_width: 0 clickable: true @@ -3063,7 +3016,6 @@ lvgl: y: 35 text: "Mode" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false # Flex ensures unsupported modes don't leave a gap: @@ -3093,10 +3045,9 @@ lvgl: width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3107,17 +3058,15 @@ lvgl: align: CENTER text: "Off" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_heat width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3128,17 +3077,15 @@ lvgl: align: CENTER text: "Heat" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_cool width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3149,17 +3096,15 @@ lvgl: align: CENTER text: "Cool" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_heat_cool width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3170,17 +3115,15 @@ lvgl: align: CENTER text: "Heat/Cool" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_auto width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3191,17 +3134,15 @@ lvgl: align: CENTER text: "Auto" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_dry width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3212,17 +3153,15 @@ lvgl: align: CENTER text: "Dry" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_fan_only width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3233,7 +3172,6 @@ lvgl: align: CENTER text: "Fan only" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - label: @@ -3242,7 +3180,7 @@ lvgl: height: 24 text: "Fan" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle text_align: CENTER clickable: false - obj: @@ -3250,10 +3188,9 @@ lvgl: width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3265,17 +3202,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cfan_1 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3287,17 +3222,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cfan_2 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3309,17 +3242,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cfan_3 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3331,7 +3262,6 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - label: id: cswing_title @@ -3339,7 +3269,7 @@ lvgl: height: 24 text: "Swing" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle text_align: CENTER clickable: false - obj: @@ -3347,10 +3277,9 @@ lvgl: width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3362,17 +3291,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cswing_1 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3384,17 +3311,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cswing_2 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3406,17 +3331,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cswing_3 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3428,7 +3351,6 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: climate_mode_overlay_x @@ -3438,7 +3360,7 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -3450,7 +3372,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false @@ -3479,7 +3400,7 @@ lvgl: - script.execute: wake_display - id: touch_cal_page - bg_color: 0xF7F7F7 + styles: paint_page_soft bg_opa: COVER pad_all: 0 border_width: 0 @@ -3490,7 +3411,6 @@ lvgl: y: 110 text: "GT911 touch check" text_font: headline - text_color: 0x1B1B1B - obj: x: 12 y: 12 @@ -3505,7 +3425,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink - obj: x: 443 y: 12 @@ -3520,7 +3440,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink - obj: x: 443 y: 443 @@ -3535,7 +3455,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink - obj: x: 12 y: 443 @@ -3550,7 +3470,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink - obj: x: 228 y: 228 @@ -3565,7 +3485,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink script: - id: capture_ui_snapshot @@ -3681,6 +3601,8 @@ script: then: - lambda: |- const auto &settings = screen_settings::current; + // Dark mode (firmware 0.2.54+): a look the screen already has costs nothing. + theme::set_dark(settings_screen::dark_mode != 0); if(runtime_tiles::enabled && static_cast(id(screen_lvgl).get_rotation())!=runtime_tiles::rotation){ cyd::touch_guard.consume(); if(lv_indev_get_act())lv_indev_wait_release(lv_indev_get_act()); @@ -3759,7 +3681,8 @@ script: lv_label_set_text(id(alert_title), alert.title.c_str()); lv_label_set_text(id(alert_subtitle), alert.subtitle.c_str()); lv_label_set_text(id(alert_ok_label), alert.button.c_str()); - lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(alert.color), LV_PART_MAIN); + id(alert_card_color) = alert.color; + lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(theme::surface(alert.color)), LV_PART_MAIN); ESP_LOGI("alert", "show \"%s\" timeout=%d flash=%d", alert.title.c_str(), alert.timeout_seconds, (int) alert.flash); - script.execute: wake_display - lvgl.widget.show: alert_overlay @@ -3937,7 +3860,7 @@ script: std::string value = id(active_climate_target_known) ? tile_controls::format_value(target / 10.0f, id(active_climate_step_x10) / 10.0f, "°") : std::string("--"); lv_label_set_text(id(climate_target_label), value.c_str()); - lv_obj_set_style_text_color(id(climate_target_label), lv_color_hex(off ? 0x9E9E9E : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_text_color(id(climate_target_label), theme::color(off ? theme::OFF : theme::INK), LV_PART_MAIN); auto enable = [](lv_obj_t *key, bool on) { if (on) lv_obj_remove_state(key, LV_STATE_DISABLED); else lv_obj_add_state(key, LV_STATE_DISABLED); }; @@ -3969,9 +3892,9 @@ script: if (show) lv_obj_remove_flag(k.obj, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(k.obj, LV_OBJ_FLAG_HIDDEN); bool selected = show && !off && mode == k.mode; uint32_t color = tile_controls::mode_color(k.mode); - lv_obj_set_style_bg_color(k.obj, lv_color_hex(selected ? color : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_border_color(k.obj, lv_color_hex(selected ? color : 0xDDDDDD), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(k.obj, 0), lv_color_hex(selected ? 0xFFFFFF : 0x46525E), LV_PART_MAIN); + lv_obj_set_style_bg_color(k.obj, selected ? lv_color_hex(color) : theme::color(theme::CARD), LV_PART_MAIN); + lv_obj_set_style_border_color(k.obj, selected ? lv_color_hex(color) : theme::color(theme::LINE), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(k.obj, 0), theme::color(selected ? theme::ON_ACCENT : theme::SLATE), LV_PART_MAIN); } if (more) lv_obj_remove_flag(id(cmkey_more), LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(id(cmkey_more), LV_OBJ_FLAG_HIDDEN); // One mode is no choice: the power key already turns it on and off. @@ -4057,8 +3980,8 @@ script: if (has(m)) lv_obj_clear_flag(btn, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(btn, LV_OBJ_FLAG_HIDDEN); bool selected = (current == std::string(m)); - lv_obj_set_style_bg_color(btn, lv_color_hex(selected ? 0x00A6ED : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(btn, 0), lv_color_hex(selected ? 0xFFFFFF : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_bg_color(btn, theme::color(selected ? theme::ACCENT_BRIGHT : theme::CARD), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(btn, 0), theme::color(selected ? theme::ON_ACCENT : theme::INK), LV_PART_MAIN); }; apply(id(cmode_off), "off"); apply(id(cmode_heat), "heat"); @@ -4076,8 +3999,8 @@ script: if (raw.empty()) { lv_obj_add_flag(chips[i], LV_OBJ_FLAG_HIDDEN); continue; } lv_obj_clear_flag(chips[i], LV_OBJ_FLAG_HIDDEN); ++shown; lv_label_set_text(lv_obj_get_child(chips[i], 0), pretty(raw).c_str()); - lv_obj_set_style_bg_color(chips[i], lv_color_hex(raw == current_mode ? 0x00A6ED : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(chips[i], 0), lv_color_hex(raw == current_mode ? 0xFFFFFF : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_bg_color(chips[i], theme::color(raw == current_mode ? theme::ACCENT_BRIGHT : theme::CARD), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(chips[i], 0), theme::color(raw == current_mode ? theme::ON_ACCENT : theme::INK), LV_PART_MAIN); } if (shown) lv_obj_clear_flag(title, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(title, LV_OBJ_FLAG_HIDDEN); }; @@ -4169,8 +4092,8 @@ script: for (char &c : mode) if (c >= 'A' && c <= 'Z') c = (char)(c - 'A' + 'a'); bool on = !(mode == "off" || mode.empty() || mode == "unknown" || mode == "unavailable"); if (id(climate_edit_pending)) on = id(active_climate_power_on); - lv_obj_set_style_bg_color(id(climate_power_button), lv_color_hex(on ? 0xD5EEFC : 0xEEEEEE), LV_PART_MAIN); - lv_obj_set_style_text_color(id(climate_power_icon), lv_color_hex(on ? 0x0B6E99 : 0x8A8A8A), LV_PART_MAIN); + lv_obj_set_style_bg_color(id(climate_power_button), theme::color(on ? theme::ACCENT_TINT : theme::KEY), LV_PART_MAIN); + lv_obj_set_style_text_color(id(climate_power_icon), theme::color(on ? theme::ACCENT_ICON : theme::ICON_OFF), LV_PART_MAIN); - id: set_climate_mode mode: restart @@ -4415,9 +4338,6 @@ script: percentage_value: float position_value: float icon_text: string - slider_bg_color: uint32_t - slider_fill_color: uint32_t - slider_icon_color: uint32_t label_off: string label_on: string supported_color_modes: string @@ -4431,23 +4351,6 @@ script: climate_step: string then: - lambda: |- - // Accent colour from the Home Assistant domain: the part before the dot - // in the entity_id. script/scene/button fire (ACCENT_ACTION), a - // light is a light (ACCENT_LIGHT), the rest is a device. - // NOTE: this helper appears twice in this file — here and in - // open_value_overlay. Update them together. - auto accent_for = [](const std::string& entity_id) -> uint32_t { - std::string d = entity_id.substr(0, entity_id.find('.')); - if (d == "script" || d == "scene" || d == "button" || - d == "input_button" || d == "automation") return ${ACCENT_ACTION}; - if (d == "light") return ${ACCENT_LIGHT}; - return ${ACCENT_DEVICE}; - }; - - // The slider colour comes from the tile, so it can also be ${ACCENT_AUTO}. - uint32_t fill_color = (slider_fill_color == ${ACCENT_AUTO}) - ? accent_for(entity) : slider_fill_color; - std::string mode = longpress_mode; auto contains_mode = [](const std::string& modes, const std::string& needle) { return modes.find(needle) != std::string::npos; @@ -4554,16 +4457,8 @@ script: } } - if (tile_type == "cover") { - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(fill_color), LV_PART_MAIN); - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(slider_bg_color), LV_PART_INDICATOR); - lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); - } - else{ - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(slider_bg_color), LV_PART_MAIN); - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(fill_color), LV_PART_INDICATOR); - lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); - } + // Track and fill are the pale blue and blue paints of overlay_slider. + lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); lv_obj_set_style_radius(id(overlay_slider), 28, LV_PART_MAIN); lv_obj_set_style_radius(id(overlay_slider), 0, LV_PART_INDICATOR); @@ -4597,8 +4492,6 @@ script: lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_INDICATOR); - lv_obj_set_style_text_color(id(overlay_icon), lv_color_hex(slider_icon_color), 0); - - if: condition: lambda: 'return id(active_control_kind) != "climate_temperature";' diff --git a/home-like-2432s028.yaml b/home-like-2432s028.yaml index 0768916..27aa4c1 100644 --- a/home-like-2432s028.yaml +++ b/home-like-2432s028.yaml @@ -17,7 +17,7 @@ ############################################################ substitutions: - SCREEN_FIRMWARE_VERSION: "0.2.53" + SCREEN_FIRMWARE_VERSION: "0.2.54" # A tap survives a finger that drifts up to this far (320 px over 58 mm: 1 cm); further is a swipe. TOUCH_MOVE_LIMIT_PX: "56" # Shortest contact that counts as a tap; a resistive panel bounces, a capacitive one does not. @@ -44,26 +44,6 @@ substitutions: NIGHT_END_HOUR: "7" # 0-23 NIGHT_DIM_BRIGHTNESS: "10" # backlight brightness in percent at night - # ============================================================ - # ACCENT COLOURS — determined automatically from the Home Assistant domain - # - # The domain is the part before the dot in the entity_id: - # script.good_morning -> "script" -> ACCENT_ACTION - # light.living_room_2 -> "light" -> ACCENT_LIGHT - # vacuum.s8 -> "vacuum" -> ACCENT_DEVICE - # - # That's Home Assistant's own grouping, so a tile automatically gets the - # right colour as soon as you put an entity in it — you no longer have - # to pick colours per tile. The distinction that matters: a script/scene - # fires, a device you turn on or off. Those two shouldn't look the same. - # - # A tile keeps this colour unless you pick one in ESP Screens; ${ACCENT_AUTO} - # is the sentinel that means "decide from the domain". - # ============================================================ - ACCENT_AUTO: "0x1000000" # sentinel: deliberately outside the 24-bit colour range - ACCENT_ACTION: "0x8B5CF6" # script / scene / button / input_button / automation - ACCENT_LIGHT: "0xFEC600" # light - ACCENT_DEVICE: "0x00C5EC" # switch, fan, cover, climate, vacuum, media_player, rest # ORIENTATION # The panel is always driven at its native 240x320 (see display:); LVGL turns @@ -122,8 +102,6 @@ substitutions: ALERT_TITLE_MAX: "48" # bytes; the label ends one line with an ellipsis ALERT_BUTTON_MAX: "12" # bytes on the OK button ALERT_SUBTITLE_MAX: "160" # bytes; wraps over the rows the card has - BG_TOP_COLOR: "0xE7E7E7" # light background, matching the Guition - BG_BOTTOM_COLOR: "0xE7E7E7" TILE_ICON_X: "0" TILE_ICON_Y: "0" TILE_TITLE_X: "48" @@ -158,8 +136,6 @@ substitutions: # OVERLAY_SLIDER_W: "96" # OVERLAY_SLIDER_H: "200" # OVERLAY_ICON_Y: "94" - # BG_TOP_COLOR: "0xAEC4D9" # background top (soft blue) - # BG_BOTTOM_COLOR: "0xD6BB9E" # background bottom (warm sand) # TILE_ICON_X: "0" # TILE_ICON_Y: "0" # TILE_TITLE_X: "4" @@ -194,8 +170,6 @@ substitutions: # OVERLAY_SLIDER_W: "96" # OVERLAY_SLIDER_H: "160" # OVERLAY_ICON_Y: "74" - # BG_TOP_COLOR: "0xAEC4D9" # background top (soft blue) - # BG_BOTTOM_COLOR: "0xD6BB9E" # background bottom (warm sand) # TILE_ICON_X: "0" # TILE_ICON_Y: "0" # TILE_TITLE_X: "48" @@ -230,8 +204,6 @@ substitutions: # OVERLAY_SLIDER_W: "96" # OVERLAY_SLIDER_H: "200" # OVERLAY_ICON_Y: "94" - # BG_TOP_COLOR: "0xAEC4D9" # background top (soft blue) - # BG_BOTTOM_COLOR: "0xD6BB9E" # background bottom (warm sand) # TILE_ICON_X: "0" # TILE_ICON_Y: "0" # TILE_TITLE_X: "4" @@ -302,6 +274,36 @@ esphome: runtime_tiles::time_label = id(lbl_time); runtime_tiles::enabled = true; runtime_tiles::load_settings(); + // Colours (firmware 0.2.54+): the styles of this profile take their colours from theme.h. The list runs now, + // in the look the screen saved, before anything is drawn, and again after every change of look. + theme::paints = []() { + using theme::Paint; + for (auto *style : {id(style_room), id(style_time), id(style_title), id(style_value_big), id(paint_ink)}) theme::fill(style, Paint::ink); + theme::fill(id(style_page), Paint::page); + theme::fill(id(style_tile), Paint::card); + theme::fill(id(style_icon_circle), Paint::accent_tint); + theme::fill(id(style_value), Paint::muted); + theme::fill(id(paint_page_soft), Paint::page_soft); + theme::fill(id(paint_page_pressed), Paint::page_pressed); + theme::fill(id(paint_card), Paint::card); + theme::fill(id(paint_raised), Paint::raised); + theme::fill(id(paint_key), Paint::key); + theme::fill(id(paint_key_pressed), Paint::key_pressed); + theme::fill(id(paint_track), Paint::track); + theme::fill(id(paint_ink_soft), Paint::ink_soft); + theme::fill(id(paint_muted), Paint::muted); + theme::fill(id(paint_subtle), Paint::subtle); + theme::fill(id(paint_slate), Paint::slate); + theme::fill(id(paint_scrim), Paint::scrim); + theme::fill(id(paint_veil), Paint::veil); + theme::fill(id(paint_accent_tint), Paint::accent_tint); + theme::fill(id(paint_accent_bright), Paint::accent_bright); + theme::fill(id(paint_button_dark), Paint::button_dark); + theme::fill(id(paint_button_dark_pressed), Paint::button_dark_pressed); + theme::fill(id(paint_calibration), Paint::calibration); + }; + theme::paints(); + theme::set_dark(settings_screen::dark_mode != 0); runtime_tiles::settings_changed = []() { id(apply_screen_settings).execute(); }; runtime_tiles::dismiss = []() { runtime_tiles::hide_detail(); @@ -345,7 +347,7 @@ esphome: id(active_climate_action) = t.extra().hvac_action; id(open_value_overlay).execute(t.name, t.entity, t.domain(), "auto", t.active(), 0, t.brightness, t.percentage, t.position, runtime_tiles::icon_for(t), - 0xD5EEFC, 0x00A6ED, 0x1B1B1B, "Off", "On", t.modes, + "Off", "On", t.modes, t.current, t.target, t.humidity, t.state, t.extra().hvac_modes, std::to_string(t.minimum), std::to_string(t.maximum), std::to_string(t.step)); }; @@ -405,6 +407,16 @@ esphome: settings_screen::before_open = []() { id(close_cards).execute(); }; settings_screen::hold_limit = ${SETTINGS_HOLD_DRIFT_PX}; settings_screen::tap_limit = ${TOUCH_MOVE_LIMIT_PX}; + // What a change of look draws again, now that everything is bound: the tiles, the top bar and an open card, + // the colour card, the settings page, an alert and the climate cards. + theme::redraw = []() { + runtime_tiles::restyle(); + light_controls::restyle(); + settings_screen::restyle(); + if (id(alert_active)) lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(theme::surface(id(alert_card_color))), LV_PART_MAIN); + if (!lv_obj_has_flag(id(climate_detail_overlay), LV_OBJ_FLAG_HIDDEN)) id(climate_card_refresh).execute(); + if (!lv_obj_has_flag(id(climate_mode_overlay), LV_OBJ_FLAG_HIDDEN)) id(open_climate_mode_picker).execute(); + }; // Under the cards: brightness_overlay is the first of them on the page, so the back button and // the action at the top right of a card keep their taps. settings_screen::attach_hold(id(home_page)->obj, ${SETTINGS_HOLD_X}, 0, ${SETTINGS_HOLD_W}, ${SCROLL_Y}, id(brightness_overlay)); @@ -665,6 +677,10 @@ globals: initial_value: 'false' - id: alert_title_text type: std::string + # The alert's colour as the automation named it (a swatch's light value, 0 for the normal card). + - id: alert_card_color + type: uint32_t + initial_value: '0' - id: alert_timeout_seconds type: int initial_value: '0' @@ -1222,6 +1238,18 @@ switch: - lambda: 'settings_screen::set("night_enabled", 1);' turn_off_action: - lambda: 'settings_screen::set("night_enabled", 0);' + # The dark look for a screen beside a bed (firmware 0.2.54+): black page, graphite cards, soft white text. + - platform: template + id: setting_dark_mode + name: "Dark mode" + icon: "mdi:theme-light-dark" + entity_category: config + restore_mode: DISABLED + lambda: return settings_screen::dark_mode != 0; + turn_on_action: + - lambda: 'settings_screen::set("dark_mode", 1);' + turn_off_action: + - lambda: 'settings_screen::set("dark_mode", 0);' - platform: template id: setting_clock_24h name: "24-hour clock" @@ -1475,23 +1503,17 @@ lvgl: rotation: ${LVGL_ROTATION} style_definitions: - # Background: two-stop vertical gradient instead of the 320x240 - # RGB565 wallpaper. Saves ~150 KB flash and an image blit per redraw, - # which you can see directly in how smoothly it scrolls. - - id: style_bg_grad - bg_color: ${BG_TOP_COLOR} - bg_grad_color: ${BG_BOTTOM_COLOR} - bg_grad_dir: VER + # The page behind the tiles and the cards: one colour from the theme (theme.h PAGE), no wallpaper and no + # gradient, so a redraw is a plain fill. + - id: style_page bg_opa: COVER border_width: 0 radius: 0 - id: style_tile - bg_color: 0xFFFFFF bg_opa: COVER radius: 18 border_width: 1 - border_color: 0xDDDDDD border_opa: COVER pad_left: 8 pad_right: 8 @@ -1500,66 +1522,52 @@ lvgl: shadow_width: 0 shadow_opa: 40% - - id: style_tile_disabled - bg_color: 0xFFFFFF - bg_opa: COVER - radius: 18 - border_width: 1 - border_color: 0xDDDDDD - border_opa: COVER - pad_left: 8 - pad_right: 8 - pad_top: 8 - pad_bottom: 8 - shadow_width: 0 - shadow_opa: 25% - - id: style_icon_circle - bg_color: 0xD5EEFC - bg_opa: COVER - radius: 999 - border_width: 0 - - - id: style_icon_circle_disabled - bg_color: 0xEEEEEE bg_opa: COVER radius: 999 border_width: 0 - id: style_room text_font: headline - text_color: 0x1B1B1B text_opa: 100% - id: style_time text_font: time_label - text_color: 0x1B1B1B text_opa: 100% - id: style_title text_font: label - text_color: 0x000000 text_opa: 100% - id: style_value text_font: sublabel - text_color: 0x7A7A7C text_opa: 100% - id: style_value_big text_font: sublabel_big - text_color: 0x1B1B1B text_opa: 80% - - id: style_title_disabled - text_font: label - text_color: 0x1B1B1B - text_opa: 100% - - - id: style_value_disabled - text_font: sublabel - text_color: 0x1B1B1B - text_opa: 100% + # Paints: shared styles without a colour of their own. theme.h fills them (the list in on_boot, theme::paints) + # and fills them again when Dark mode changes, so a widget names a paint where it used to write a colour. + - id: paint_page_soft + - id: paint_page_pressed + - id: paint_card + - id: paint_raised + - id: paint_key + - id: paint_key_pressed + - id: paint_track + - id: paint_ink + - id: paint_ink_soft + - id: paint_muted + - id: paint_subtle + - id: paint_slate + - id: paint_scrim + - id: paint_veil + - id: paint_accent_tint + - id: paint_accent_bright + - id: paint_button_dark + - id: paint_button_dark_pressed + - id: paint_calibration # ---------- ALERT OVERLAY (HA action show_alert) ---------- # LVGL's top layer sits above every page, card and the dim overlay; the card @@ -1573,7 +1581,7 @@ lvgl: width: ${DISPLAY_W} height: ${DISPLAY_H} hidden: true - bg_color: 0x101820 + styles: paint_scrim bg_opa: 60% radius: 0 border_width: 0 @@ -1590,11 +1598,10 @@ lvgl: align: CENTER width: ${ALERT_CARD_W} height: ${ALERT_CARD_H} - bg_color: 0xFFFFFF + styles: paint_raised bg_opa: COVER radius: 18 border_width: 1 - border_color: 0xDDDDDD border_opa: COVER shadow_width: 0 pad_all: 0 @@ -1608,7 +1615,6 @@ lvgl: y: ${ALERT_ICON_Y} text: "\U000F002A" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - label: id: alert_title @@ -1618,7 +1624,6 @@ lvgl: long_mode: DOT text: "Notification" text_font: headline - text_color: 0x1B1B1B clickable: false - label: id: alert_subtitle @@ -1629,7 +1634,7 @@ lvgl: long_mode: WRAP text: "" text_font: sublabel_big - text_color: 0x3A3A3C + styles: paint_ink_soft clickable: false - obj: id: alert_ok @@ -1639,7 +1644,7 @@ lvgl: width: ${ALERT_BUTTON_W} height: ${ALERT_BUTTON_H} radius: 999 - bg_color: 0x1B1B1B + styles: paint_button_dark bg_opa: COVER border_width: 0 shadow_width: 0 @@ -1647,7 +1652,7 @@ lvgl: clickable: true scrollable: false pressed: - bg_color: 0x3A3A3C + styles: paint_button_dark_pressed bg_opa: COVER on_click: - if: @@ -1663,12 +1668,11 @@ lvgl: align: CENTER text: "OK" text_font: headline - text_color: 0xFFFFFF clickable: false pages: - id: home_page - styles: style_bg_grad + styles: style_page pad_all: 0 scrollable: false scrollbar_mode: 'OFF' @@ -1754,7 +1758,6 @@ lvgl: id: tile1_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F001B" clickable: false - label: @@ -1802,7 +1805,6 @@ lvgl: id: tile2_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F0387" clickable: false - label: @@ -1850,7 +1852,6 @@ lvgl: id: tile3_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F02E3" clickable: false - label: @@ -1898,7 +1899,6 @@ lvgl: id: tile4_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F059C" clickable: false - label: @@ -1946,7 +1946,6 @@ lvgl: id: tile5_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F0425" clickable: false - label: @@ -1994,7 +1993,6 @@ lvgl: id: tile6_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F070D" clickable: false - label: @@ -2045,7 +2043,6 @@ lvgl: id: tile7_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F06B5" clickable: false - label: @@ -2097,7 +2094,6 @@ lvgl: id: tile8_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F06EE" clickable: false - label: @@ -2144,7 +2140,6 @@ lvgl: id: tile9_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F04B9" clickable: false - label: @@ -2191,7 +2186,6 @@ lvgl: id: tile10_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F002A" clickable: false - label: @@ -2224,7 +2218,7 @@ lvgl: border_width: 0 scrollable: false pressed: - bg_color: 0xE3E3E3 + styles: paint_page_pressed bg_opa: COVER on_short_click: - if: @@ -2239,7 +2233,7 @@ lvgl: x: 12 text: "< Previous" text_font: label - text_color: 0x1B1B1B + styles: paint_ink clickable: false - label: id: page_number @@ -2252,7 +2246,6 @@ lvgl: text: "1 / 2" text_align: CENTER text_font: sublabel - text_color: 0x1B1B1B - obj: id: page_next align: BOTTOM_RIGHT @@ -2266,7 +2259,7 @@ lvgl: border_width: 0 scrollable: false pressed: - bg_color: 0xE3E3E3 + styles: paint_page_pressed bg_opa: COVER on_short_click: - if: @@ -2281,7 +2274,7 @@ lvgl: x: -12 text: "Next >" text_font: label - text_color: 0x1B1B1B + styles: paint_ink clickable: false - obj: @@ -2306,7 +2299,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - styles: style_bg_grad + styles: style_page scrollable: false clickable: true on_click: @@ -2318,7 +2311,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xFFFFFF + styles: paint_veil bg_opa: 18% border_width: 0 clickable: false @@ -2332,7 +2325,7 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2344,7 +2337,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2372,7 +2364,7 @@ lvgl: value: 100 adv_hittest: false - bg_color: 0xFFFFFF + styles: paint_accent_tint bg_opa: 100% radius: 28 # The only widget with BOTH a radius AND a child (overlay_icon). @@ -2385,7 +2377,7 @@ lvgl: border_width: 0 indicator: - bg_color: 0xD5EEFC + styles: paint_accent_bright bg_opa: 100% radius: 28 @@ -2417,7 +2409,7 @@ lvgl: align: CENTER y: ${OVERLAY_ICON_Y} text_font: materialdesign_icons - text_color: 0x1B1B1B + styles: paint_ink text: "\U000F001B" clickable: false @@ -2626,7 +2618,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xF7F7F7 + styles: paint_page_soft bg_opa: COVER hidden: true scrollable: false @@ -2637,27 +2629,6 @@ lvgl: pad_bottom: 0 border_width: 0 widgets: - - obj: - id: color_detail_bg - x: 0 - y: 0 - width: ${DISPLAY_W} - height: ${DISPLAY_H} - styles: style_bg_grad - scrollable: false - clickable: false - - obj: - id: color_detail_scrim - x: 0 - y: 0 - width: ${DISPLAY_W} - height: ${DISPLAY_H} - bg_color: 0xFFFFFF - bg_opa: 72% - border_width: 0 - clickable: false - scrollable: false - - obj: id: color_close_button align: TOP_LEFT @@ -2666,7 +2637,7 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2678,7 +2649,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2703,7 +2673,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xE7E7E7 + styles: style_page bg_opa: COVER hidden: true scrollable: false @@ -2722,7 +2692,7 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2734,7 +2704,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - obj: @@ -2745,7 +2714,6 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE bg_opa: COVER border_width: 0 clickable: true @@ -2758,7 +2726,6 @@ lvgl: align: CENTER text: "\U000F0425" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2781,7 +2748,7 @@ lvgl: text_align: CENTER text: "--" text_font: sublabel_big - text_color: 0x616161 + styles: paint_muted clickable: false - obj: @@ -2791,10 +2758,9 @@ lvgl: width: 94% height: 92 radius: 16 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: false scrollable: false @@ -2807,14 +2773,14 @@ lvgl: width: 72 height: 72 radius: 36 - bg_color: 0xF1F1F1 + styles: paint_track bg_opa: COVER border_width: 0 pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xD9D9D9 + styles: paint_key_pressed disabled: opa: 40% on_short_click: @@ -2831,7 +2797,6 @@ lvgl: align: CENTER text: "\U000F0374" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - obj: id: climate_plus_button @@ -2840,14 +2805,14 @@ lvgl: width: 72 height: 72 radius: 36 - bg_color: 0xF1F1F1 + styles: paint_track bg_opa: COVER border_width: 0 pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xD9D9D9 + styles: paint_key_pressed disabled: opa: 40% on_short_click: @@ -2864,7 +2829,6 @@ lvgl: align: CENTER text: "\U000F0415" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - label: id: climate_target_label @@ -2872,7 +2836,6 @@ lvgl: y: -8 text: "--" text_font: setpoint_digits - text_color: 0x1B1B1B clickable: false - label: id: climate_set_label @@ -2880,7 +2843,7 @@ lvgl: y: 26 text: "Target" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle clickable: false # One key per mode the device supports (off is the power key); the one in use is @@ -2908,15 +2871,14 @@ lvgl: flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "auto" } widgets: @@ -2924,22 +2886,20 @@ lvgl: align: CENTER text: "\U000F1B17" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_heat_cool flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "heat_cool" } widgets: @@ -2947,22 +2907,20 @@ lvgl: align: CENTER text: "\U000F1A79" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_heat flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "heat" } widgets: @@ -2970,22 +2928,20 @@ lvgl: align: CENTER text: "\U000F0238" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_cool flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "cool" } widgets: @@ -2993,22 +2949,20 @@ lvgl: align: CENTER text: "\U000F0717" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_dry flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "dry" } widgets: @@ -3016,22 +2970,20 @@ lvgl: align: CENTER text: "\U000F058E" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_fan_only flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "fan_only" } widgets: @@ -3039,22 +2991,20 @@ lvgl: align: CENTER text: "\U000F0210" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_more flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: open_climate_mode_picker widgets: @@ -3062,7 +3012,7 @@ lvgl: align: CENTER text: "\U000F01D8" text_font: materialdesign_icons - text_color: 0x46525E + styles: paint_slate clickable: false # ---------- CLIMATE MODE PICKER ---------- # Replaces cycling through modes. Cycling sends a set_hvac_mode on every @@ -3076,7 +3026,7 @@ lvgl: width: ${DISPLAY_W} height: ${DISPLAY_H} hidden: true - bg_color: 0xE7E7E7 + styles: style_page bg_opa: COVER border_width: 0 clickable: true @@ -3088,7 +3038,6 @@ lvgl: y: 21 text: "Mode" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false # Flex ensures unsupported modes don't leave a gap: @@ -3118,10 +3067,9 @@ lvgl: width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3132,17 +3080,15 @@ lvgl: align: CENTER text: "Off" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_heat width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3153,17 +3099,15 @@ lvgl: align: CENTER text: "Heat" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_cool width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3174,17 +3118,15 @@ lvgl: align: CENTER text: "Cool" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_heat_cool width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3195,17 +3137,15 @@ lvgl: align: CENTER text: "Heat/Cool" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_auto width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3216,17 +3156,15 @@ lvgl: align: CENTER text: "Auto" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_dry width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3237,17 +3175,15 @@ lvgl: align: CENTER text: "Dry" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_fan_only width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3258,7 +3194,6 @@ lvgl: align: CENTER text: "Fan only" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - label: @@ -3267,7 +3202,7 @@ lvgl: height: 11 text: "Fan" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle text_align: CENTER clickable: false - obj: @@ -3275,10 +3210,9 @@ lvgl: width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3290,17 +3224,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cfan_1 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3312,17 +3244,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cfan_2 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3334,17 +3264,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cfan_3 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3356,7 +3284,6 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - label: id: cswing_title @@ -3364,7 +3291,7 @@ lvgl: height: 11 text: "Swing" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle text_align: CENTER clickable: false - obj: @@ -3372,10 +3299,9 @@ lvgl: width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3387,17 +3313,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cswing_1 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3409,17 +3333,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cswing_2 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3431,17 +3353,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cswing_3 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3453,7 +3373,6 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: climate_mode_overlay_x @@ -3463,7 +3382,7 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -3475,7 +3394,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false @@ -3504,7 +3422,7 @@ lvgl: - script.execute: wake_display - id: touch_cal_page - bg_color: 0x101820 + styles: paint_calibration bg_opa: COVER pad_all: 0 border_width: 0 @@ -3515,7 +3433,6 @@ lvgl: y: 65 text: "Follow the calibration wizard" text_font: sublabel - text_color: 0xFFFFFF - obj: x: 10 y: 10 @@ -3530,7 +3447,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration - obj: x: 289 y: 10 @@ -3545,7 +3462,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration - obj: x: 289 y: 209 @@ -3560,7 +3477,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration - obj: x: 10 y: 209 @@ -3575,7 +3492,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration - obj: x: 150 y: 110 @@ -3590,7 +3507,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration script: # Render every overlay and both pages repeatedly without controlling devices. @@ -3693,6 +3610,8 @@ script: then: - lambda: |- const auto &settings = screen_settings::current; + // Dark mode (firmware 0.2.54+): a look the screen already has costs nothing. + theme::set_dark(settings_screen::dark_mode != 0); // Auto standby off wakes the screen, but not out of a Sleep pressed in Home Assistant. if (id(display_dimmed) && !settings.standby_enabled && !id(sleep_requested)) { id(display_dimmed) = false; @@ -3763,7 +3682,8 @@ script: lv_label_set_text(id(alert_title), alert.title.c_str()); lv_label_set_text(id(alert_subtitle), alert.subtitle.c_str()); lv_label_set_text(id(alert_ok_label), alert.button.c_str()); - lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(alert.color), LV_PART_MAIN); + id(alert_card_color) = alert.color; + lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(theme::surface(alert.color)), LV_PART_MAIN); ESP_LOGI("alert", "show \"%s\" timeout=%d flash=%d", alert.title.c_str(), alert.timeout_seconds, (int) alert.flash); - script.execute: wake_display - lvgl.widget.show: alert_overlay @@ -3937,7 +3857,7 @@ script: std::string value = id(active_climate_target_known) ? tile_controls::format_value(target / 10.0f, id(active_climate_step_x10) / 10.0f, "°") : std::string("--"); lv_label_set_text(id(climate_target_label), value.c_str()); - lv_obj_set_style_text_color(id(climate_target_label), lv_color_hex(off ? 0x9E9E9E : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_text_color(id(climate_target_label), theme::color(off ? theme::OFF : theme::INK), LV_PART_MAIN); auto enable = [](lv_obj_t *key, bool on) { if (on) lv_obj_remove_state(key, LV_STATE_DISABLED); else lv_obj_add_state(key, LV_STATE_DISABLED); }; @@ -3968,9 +3888,9 @@ script: if (show) lv_obj_remove_flag(k.obj, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(k.obj, LV_OBJ_FLAG_HIDDEN); bool selected = show && !off && mode == k.mode; uint32_t color = tile_controls::mode_color(k.mode); - lv_obj_set_style_bg_color(k.obj, lv_color_hex(selected ? color : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_border_color(k.obj, lv_color_hex(selected ? color : 0xDDDDDD), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(k.obj, 0), lv_color_hex(selected ? 0xFFFFFF : 0x46525E), LV_PART_MAIN); + lv_obj_set_style_bg_color(k.obj, selected ? lv_color_hex(color) : theme::color(theme::CARD), LV_PART_MAIN); + lv_obj_set_style_border_color(k.obj, selected ? lv_color_hex(color) : theme::color(theme::LINE), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(k.obj, 0), theme::color(selected ? theme::ON_ACCENT : theme::SLATE), LV_PART_MAIN); } if (more) lv_obj_remove_flag(id(cmkey_more), LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(id(cmkey_more), LV_OBJ_FLAG_HIDDEN); // One mode is no choice: the power key already turns it on and off. Without keys the @@ -4011,8 +3931,8 @@ script: if (has(m)) lv_obj_clear_flag(btn, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(btn, LV_OBJ_FLAG_HIDDEN); bool selected = (current == std::string(m)); - lv_obj_set_style_bg_color(btn, lv_color_hex(selected ? 0x00A6ED : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(btn, 0), lv_color_hex(selected ? 0xFFFFFF : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_bg_color(btn, theme::color(selected ? theme::ACCENT_BRIGHT : theme::CARD), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(btn, 0), theme::color(selected ? theme::ON_ACCENT : theme::INK), LV_PART_MAIN); }; apply(id(cmode_off), "off"); apply(id(cmode_heat), "heat"); @@ -4030,8 +3950,8 @@ script: if (raw.empty()) { lv_obj_add_flag(chips[i], LV_OBJ_FLAG_HIDDEN); continue; } lv_obj_clear_flag(chips[i], LV_OBJ_FLAG_HIDDEN); ++shown; lv_label_set_text(lv_obj_get_child(chips[i], 0), pretty(raw).c_str()); - lv_obj_set_style_bg_color(chips[i], lv_color_hex(raw == current_mode ? 0x00A6ED : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(chips[i], 0), lv_color_hex(raw == current_mode ? 0xFFFFFF : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_bg_color(chips[i], theme::color(raw == current_mode ? theme::ACCENT_BRIGHT : theme::CARD), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(chips[i], 0), theme::color(raw == current_mode ? theme::ON_ACCENT : theme::INK), LV_PART_MAIN); } if (shown) lv_obj_clear_flag(title, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(title, LV_OBJ_FLAG_HIDDEN); }; @@ -4121,8 +4041,8 @@ script: for (char &c : mode) if (c >= 'A' && c <= 'Z') c = (char)(c - 'A' + 'a'); bool on = !(mode == "off" || mode.empty() || mode == "unknown" || mode == "unavailable"); if (id(climate_edit_pending)) on = id(active_climate_power_on); - lv_obj_set_style_bg_color(id(climate_power_button), lv_color_hex(on ? 0xD5EEFC : 0xEEEEEE), LV_PART_MAIN); - lv_obj_set_style_text_color(id(climate_power_icon), lv_color_hex(on ? 0x0B6E99 : 0x8A8A8A), LV_PART_MAIN); + lv_obj_set_style_bg_color(id(climate_power_button), theme::color(on ? theme::ACCENT_TINT : theme::KEY), LV_PART_MAIN); + lv_obj_set_style_text_color(id(climate_power_icon), theme::color(on ? theme::ACCENT_ICON : theme::ICON_OFF), LV_PART_MAIN); - id: set_climate_mode mode: restart @@ -4367,9 +4287,6 @@ script: percentage_value: float position_value: float icon_text: string - slider_bg_color: uint32_t - slider_fill_color: uint32_t - slider_icon_color: uint32_t label_off: string label_on: string supported_color_modes: string @@ -4383,23 +4300,6 @@ script: climate_step: string then: - lambda: |- - // Accent colour from the Home Assistant domain: the part before the dot - // in the entity_id. script/scene/button fire (ACCENT_ACTION), a - // light is a light (ACCENT_LIGHT), the rest is a device. - // NOTE: this helper appears twice in this file — here and in - // open_value_overlay. Update them together. - auto accent_for = [](const std::string& entity_id) -> uint32_t { - std::string d = entity_id.substr(0, entity_id.find('.')); - if (d == "script" || d == "scene" || d == "button" || - d == "input_button" || d == "automation") return ${ACCENT_ACTION}; - if (d == "light") return ${ACCENT_LIGHT}; - return ${ACCENT_DEVICE}; - }; - - // The slider colour comes from the tile, so it can also be ${ACCENT_AUTO}. - uint32_t fill_color = (slider_fill_color == ${ACCENT_AUTO}) - ? accent_for(entity) : slider_fill_color; - std::string mode = longpress_mode; auto contains_mode = [](const std::string& modes, const std::string& needle) { return modes.find(needle) != std::string::npos; @@ -4518,16 +4418,8 @@ script: } } - if (tile_type == "cover") { - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(fill_color), LV_PART_MAIN); - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(slider_bg_color), LV_PART_INDICATOR); - lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); - } - else{ - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(slider_bg_color), LV_PART_MAIN); - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(fill_color), LV_PART_INDICATOR); - lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); - } + // Track and fill are the pale blue and blue paints of overlay_slider. + lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); lv_obj_set_style_radius(id(overlay_slider), 28, LV_PART_MAIN); lv_obj_set_style_radius(id(overlay_slider), 0, LV_PART_INDICATOR); @@ -4561,8 +4453,6 @@ script: lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_INDICATOR); - lv_obj_set_style_text_color(id(overlay_icon), lv_color_hex(slider_icon_color), 0); - - if: condition: lambda: 'return id(active_control_kind) != "climate_temperature";' diff --git a/packages/cyd.yaml b/packages/cyd.yaml index ec6eabc..2be84fe 100644 --- a/packages/cyd.yaml +++ b/packages/cyd.yaml @@ -18,7 +18,7 @@ ############################################################ substitutions: - SCREEN_FIRMWARE_VERSION: "0.2.53" + SCREEN_FIRMWARE_VERSION: "0.2.54" # A tap survives a finger that drifts up to this far (320 px over 58 mm: 1 cm); further is a swipe. TOUCH_MOVE_LIMIT_PX: "56" # Shortest contact that counts as a tap; a resistive panel bounces, a capacitive one does not. @@ -45,26 +45,6 @@ substitutions: NIGHT_END_HOUR: "7" # 0-23 NIGHT_DIM_BRIGHTNESS: "10" # backlight brightness in percent at night - # ============================================================ - # ACCENT COLOURS — determined automatically from the Home Assistant domain - # - # The domain is the part before the dot in the entity_id: - # script.good_morning -> "script" -> ACCENT_ACTION - # light.living_room_2 -> "light" -> ACCENT_LIGHT - # vacuum.s8 -> "vacuum" -> ACCENT_DEVICE - # - # That's Home Assistant's own grouping, so a tile automatically gets the - # right colour as soon as you put an entity in it — you no longer have - # to pick colours per tile. The distinction that matters: a script/scene - # fires, a device you turn on or off. Those two shouldn't look the same. - # - # A tile keeps this colour unless you pick one in ESP Screens; ${ACCENT_AUTO} - # is the sentinel that means "decide from the domain". - # ============================================================ - ACCENT_AUTO: "0x1000000" # sentinel: deliberately outside the 24-bit colour range - ACCENT_ACTION: "0x8B5CF6" # script / scene / button / input_button / automation - ACCENT_LIGHT: "0xFEC600" # light - ACCENT_DEVICE: "0x00C5EC" # switch, fan, cover, climate, vacuum, media_player, rest # ORIENTATION # The panel is always driven at its native 240x320 (see display:); LVGL turns @@ -123,8 +103,6 @@ substitutions: ALERT_TITLE_MAX: "48" # bytes; the label ends one line with an ellipsis ALERT_BUTTON_MAX: "12" # bytes on the OK button ALERT_SUBTITLE_MAX: "160" # bytes; wraps over the rows the card has - BG_TOP_COLOR: "0xE7E7E7" # light background, matching the Guition - BG_BOTTOM_COLOR: "0xE7E7E7" TILE_ICON_X: "0" TILE_ICON_Y: "0" TILE_TITLE_X: "48" @@ -159,8 +137,6 @@ substitutions: # OVERLAY_SLIDER_W: "96" # OVERLAY_SLIDER_H: "200" # OVERLAY_ICON_Y: "94" - # BG_TOP_COLOR: "0xAEC4D9" # background top (soft blue) - # BG_BOTTOM_COLOR: "0xD6BB9E" # background bottom (warm sand) # TILE_ICON_X: "0" # TILE_ICON_Y: "0" # TILE_TITLE_X: "4" @@ -195,8 +171,6 @@ substitutions: # OVERLAY_SLIDER_W: "96" # OVERLAY_SLIDER_H: "160" # OVERLAY_ICON_Y: "74" - # BG_TOP_COLOR: "0xAEC4D9" # background top (soft blue) - # BG_BOTTOM_COLOR: "0xD6BB9E" # background bottom (warm sand) # TILE_ICON_X: "0" # TILE_ICON_Y: "0" # TILE_TITLE_X: "48" @@ -231,8 +205,6 @@ substitutions: # OVERLAY_SLIDER_W: "96" # OVERLAY_SLIDER_H: "200" # OVERLAY_ICON_Y: "94" - # BG_TOP_COLOR: "0xAEC4D9" # background top (soft blue) - # BG_BOTTOM_COLOR: "0xD6BB9E" # background bottom (warm sand) # TILE_ICON_X: "0" # TILE_ICON_Y: "0" # TILE_TITLE_X: "4" @@ -306,6 +278,36 @@ esphome: runtime_tiles::time_label = id(lbl_time); runtime_tiles::enabled = true; runtime_tiles::load_settings(); + // Colours (firmware 0.2.54+): the styles of this profile take their colours from theme.h. The list runs now, + // in the look the screen saved, before anything is drawn, and again after every change of look. + theme::paints = []() { + using theme::Paint; + for (auto *style : {id(style_room), id(style_time), id(style_title), id(style_value_big), id(paint_ink)}) theme::fill(style, Paint::ink); + theme::fill(id(style_page), Paint::page); + theme::fill(id(style_tile), Paint::card); + theme::fill(id(style_icon_circle), Paint::accent_tint); + theme::fill(id(style_value), Paint::muted); + theme::fill(id(paint_page_soft), Paint::page_soft); + theme::fill(id(paint_page_pressed), Paint::page_pressed); + theme::fill(id(paint_card), Paint::card); + theme::fill(id(paint_raised), Paint::raised); + theme::fill(id(paint_key), Paint::key); + theme::fill(id(paint_key_pressed), Paint::key_pressed); + theme::fill(id(paint_track), Paint::track); + theme::fill(id(paint_ink_soft), Paint::ink_soft); + theme::fill(id(paint_muted), Paint::muted); + theme::fill(id(paint_subtle), Paint::subtle); + theme::fill(id(paint_slate), Paint::slate); + theme::fill(id(paint_scrim), Paint::scrim); + theme::fill(id(paint_veil), Paint::veil); + theme::fill(id(paint_accent_tint), Paint::accent_tint); + theme::fill(id(paint_accent_bright), Paint::accent_bright); + theme::fill(id(paint_button_dark), Paint::button_dark); + theme::fill(id(paint_button_dark_pressed), Paint::button_dark_pressed); + theme::fill(id(paint_calibration), Paint::calibration); + }; + theme::paints(); + theme::set_dark(settings_screen::dark_mode != 0); runtime_tiles::settings_changed = []() { id(apply_screen_settings).execute(); }; runtime_tiles::dismiss = []() { runtime_tiles::hide_detail(); @@ -349,7 +351,7 @@ esphome: id(active_climate_action) = t.extra().hvac_action; id(open_value_overlay).execute(t.name, t.entity, t.domain(), "auto", t.active(), 0, t.brightness, t.percentage, t.position, runtime_tiles::icon_for(t), - 0xD5EEFC, 0x00A6ED, 0x1B1B1B, "Off", "On", t.modes, + "Off", "On", t.modes, t.current, t.target, t.humidity, t.state, t.extra().hvac_modes, std::to_string(t.minimum), std::to_string(t.maximum), std::to_string(t.step)); }; @@ -409,6 +411,16 @@ esphome: settings_screen::before_open = []() { id(close_cards).execute(); }; settings_screen::hold_limit = ${SETTINGS_HOLD_DRIFT_PX}; settings_screen::tap_limit = ${TOUCH_MOVE_LIMIT_PX}; + // What a change of look draws again, now that everything is bound: the tiles, the top bar and an open card, + // the colour card, the settings page, an alert and the climate cards. + theme::redraw = []() { + runtime_tiles::restyle(); + light_controls::restyle(); + settings_screen::restyle(); + if (id(alert_active)) lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(theme::surface(id(alert_card_color))), LV_PART_MAIN); + if (!lv_obj_has_flag(id(climate_detail_overlay), LV_OBJ_FLAG_HIDDEN)) id(climate_card_refresh).execute(); + if (!lv_obj_has_flag(id(climate_mode_overlay), LV_OBJ_FLAG_HIDDEN)) id(open_climate_mode_picker).execute(); + }; // Under the cards: brightness_overlay is the first of them on the page, so the back button and // the action at the top right of a card keep their taps. settings_screen::attach_hold(id(home_page)->obj, ${SETTINGS_HOLD_X}, 0, ${SETTINGS_HOLD_W}, ${SCROLL_Y}, id(brightness_overlay)); @@ -654,6 +666,10 @@ globals: initial_value: 'false' - id: alert_title_text type: std::string + # The alert's colour as the automation named it (a swatch's light value, 0 for the normal card). + - id: alert_card_color + type: uint32_t + initial_value: '0' - id: alert_timeout_seconds type: int initial_value: '0' @@ -1211,6 +1227,18 @@ switch: - lambda: 'settings_screen::set("night_enabled", 1);' turn_off_action: - lambda: 'settings_screen::set("night_enabled", 0);' + # The dark look for a screen beside a bed (firmware 0.2.54+): black page, graphite cards, soft white text. + - platform: template + id: setting_dark_mode + name: "Dark mode" + icon: "mdi:theme-light-dark" + entity_category: config + restore_mode: DISABLED + lambda: return settings_screen::dark_mode != 0; + turn_on_action: + - lambda: 'settings_screen::set("dark_mode", 1);' + turn_off_action: + - lambda: 'settings_screen::set("dark_mode", 0);' - platform: template id: setting_clock_24h name: "24-hour clock" @@ -1464,23 +1492,17 @@ lvgl: rotation: ${LVGL_ROTATION} style_definitions: - # Background: two-stop vertical gradient instead of the 320x240 - # RGB565 wallpaper. Saves ~150 KB flash and an image blit per redraw, - # which you can see directly in how smoothly it scrolls. - - id: style_bg_grad - bg_color: ${BG_TOP_COLOR} - bg_grad_color: ${BG_BOTTOM_COLOR} - bg_grad_dir: VER + # The page behind the tiles and the cards: one colour from the theme (theme.h PAGE), no wallpaper and no + # gradient, so a redraw is a plain fill. + - id: style_page bg_opa: COVER border_width: 0 radius: 0 - id: style_tile - bg_color: 0xFFFFFF bg_opa: COVER radius: 18 border_width: 1 - border_color: 0xDDDDDD border_opa: COVER pad_left: 8 pad_right: 8 @@ -1489,66 +1511,52 @@ lvgl: shadow_width: 0 shadow_opa: 40% - - id: style_tile_disabled - bg_color: 0xFFFFFF - bg_opa: COVER - radius: 18 - border_width: 1 - border_color: 0xDDDDDD - border_opa: COVER - pad_left: 8 - pad_right: 8 - pad_top: 8 - pad_bottom: 8 - shadow_width: 0 - shadow_opa: 25% - - id: style_icon_circle - bg_color: 0xD5EEFC - bg_opa: COVER - radius: 999 - border_width: 0 - - - id: style_icon_circle_disabled - bg_color: 0xEEEEEE bg_opa: COVER radius: 999 border_width: 0 - id: style_room text_font: headline - text_color: 0x1B1B1B text_opa: 100% - id: style_time text_font: time_label - text_color: 0x1B1B1B text_opa: 100% - id: style_title text_font: label - text_color: 0x000000 text_opa: 100% - id: style_value text_font: sublabel - text_color: 0x7A7A7C text_opa: 100% - id: style_value_big text_font: sublabel_big - text_color: 0x1B1B1B text_opa: 80% - - id: style_title_disabled - text_font: label - text_color: 0x1B1B1B - text_opa: 100% - - - id: style_value_disabled - text_font: sublabel - text_color: 0x1B1B1B - text_opa: 100% + # Paints: shared styles without a colour of their own. theme.h fills them (the list in on_boot, theme::paints) + # and fills them again when Dark mode changes, so a widget names a paint where it used to write a colour. + - id: paint_page_soft + - id: paint_page_pressed + - id: paint_card + - id: paint_raised + - id: paint_key + - id: paint_key_pressed + - id: paint_track + - id: paint_ink + - id: paint_ink_soft + - id: paint_muted + - id: paint_subtle + - id: paint_slate + - id: paint_scrim + - id: paint_veil + - id: paint_accent_tint + - id: paint_accent_bright + - id: paint_button_dark + - id: paint_button_dark_pressed + - id: paint_calibration # ---------- ALERT OVERLAY (HA action show_alert) ---------- # LVGL's top layer sits above every page, card and the dim overlay; the card @@ -1562,7 +1570,7 @@ lvgl: width: ${DISPLAY_W} height: ${DISPLAY_H} hidden: true - bg_color: 0x101820 + styles: paint_scrim bg_opa: 60% radius: 0 border_width: 0 @@ -1579,11 +1587,10 @@ lvgl: align: CENTER width: ${ALERT_CARD_W} height: ${ALERT_CARD_H} - bg_color: 0xFFFFFF + styles: paint_raised bg_opa: COVER radius: 18 border_width: 1 - border_color: 0xDDDDDD border_opa: COVER shadow_width: 0 pad_all: 0 @@ -1597,7 +1604,6 @@ lvgl: y: ${ALERT_ICON_Y} text: "\U000F002A" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - label: id: alert_title @@ -1607,7 +1613,6 @@ lvgl: long_mode: DOT text: "Notification" text_font: headline - text_color: 0x1B1B1B clickable: false - label: id: alert_subtitle @@ -1618,7 +1623,7 @@ lvgl: long_mode: WRAP text: "" text_font: sublabel_big - text_color: 0x3A3A3C + styles: paint_ink_soft clickable: false - obj: id: alert_ok @@ -1628,7 +1633,7 @@ lvgl: width: ${ALERT_BUTTON_W} height: ${ALERT_BUTTON_H} radius: 999 - bg_color: 0x1B1B1B + styles: paint_button_dark bg_opa: COVER border_width: 0 shadow_width: 0 @@ -1636,7 +1641,7 @@ lvgl: clickable: true scrollable: false pressed: - bg_color: 0x3A3A3C + styles: paint_button_dark_pressed bg_opa: COVER on_click: - if: @@ -1652,12 +1657,11 @@ lvgl: align: CENTER text: "OK" text_font: headline - text_color: 0xFFFFFF clickable: false pages: - id: home_page - styles: style_bg_grad + styles: style_page pad_all: 0 scrollable: false scrollbar_mode: 'OFF' @@ -1743,7 +1747,6 @@ lvgl: id: tile1_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F001B" clickable: false - label: @@ -1791,7 +1794,6 @@ lvgl: id: tile2_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F0387" clickable: false - label: @@ -1839,7 +1841,6 @@ lvgl: id: tile3_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F02E3" clickable: false - label: @@ -1887,7 +1888,6 @@ lvgl: id: tile4_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F059C" clickable: false - label: @@ -1935,7 +1935,6 @@ lvgl: id: tile5_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F0425" clickable: false - label: @@ -1983,7 +1982,6 @@ lvgl: id: tile6_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F070D" clickable: false - label: @@ -2034,7 +2032,6 @@ lvgl: id: tile7_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F06B5" clickable: false - label: @@ -2086,7 +2083,6 @@ lvgl: id: tile8_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F06EE" clickable: false - label: @@ -2133,7 +2129,6 @@ lvgl: id: tile9_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F04B9" clickable: false - label: @@ -2180,7 +2175,6 @@ lvgl: id: tile10_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0xFFFFFF text: "\U000F002A" clickable: false - label: @@ -2213,7 +2207,7 @@ lvgl: border_width: 0 scrollable: false pressed: - bg_color: 0xE3E3E3 + styles: paint_page_pressed bg_opa: COVER on_short_click: - if: @@ -2228,7 +2222,7 @@ lvgl: x: 12 text: "< Previous" text_font: label - text_color: 0x1B1B1B + styles: paint_ink clickable: false - label: id: page_number @@ -2241,7 +2235,6 @@ lvgl: text: "1 / 2" text_align: CENTER text_font: sublabel - text_color: 0x1B1B1B - obj: id: page_next align: BOTTOM_RIGHT @@ -2255,7 +2248,7 @@ lvgl: border_width: 0 scrollable: false pressed: - bg_color: 0xE3E3E3 + styles: paint_page_pressed bg_opa: COVER on_short_click: - if: @@ -2270,7 +2263,7 @@ lvgl: x: -12 text: "Next >" text_font: label - text_color: 0x1B1B1B + styles: paint_ink clickable: false - obj: @@ -2295,7 +2288,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - styles: style_bg_grad + styles: style_page scrollable: false clickable: true on_click: @@ -2307,7 +2300,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xFFFFFF + styles: paint_veil bg_opa: 18% border_width: 0 clickable: false @@ -2321,7 +2314,7 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2333,7 +2326,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2361,7 +2353,7 @@ lvgl: value: 100 adv_hittest: false - bg_color: 0xFFFFFF + styles: paint_accent_tint bg_opa: 100% radius: 28 # The only widget with BOTH a radius AND a child (overlay_icon). @@ -2374,7 +2366,7 @@ lvgl: border_width: 0 indicator: - bg_color: 0xD5EEFC + styles: paint_accent_bright bg_opa: 100% radius: 28 @@ -2406,7 +2398,7 @@ lvgl: align: CENTER y: ${OVERLAY_ICON_Y} text_font: materialdesign_icons - text_color: 0x1B1B1B + styles: paint_ink text: "\U000F001B" clickable: false @@ -2615,7 +2607,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xF7F7F7 + styles: paint_page_soft bg_opa: COVER hidden: true scrollable: false @@ -2626,27 +2618,6 @@ lvgl: pad_bottom: 0 border_width: 0 widgets: - - obj: - id: color_detail_bg - x: 0 - y: 0 - width: ${DISPLAY_W} - height: ${DISPLAY_H} - styles: style_bg_grad - scrollable: false - clickable: false - - obj: - id: color_detail_scrim - x: 0 - y: 0 - width: ${DISPLAY_W} - height: ${DISPLAY_H} - bg_color: 0xFFFFFF - bg_opa: 72% - border_width: 0 - clickable: false - scrollable: false - - obj: id: color_close_button align: TOP_LEFT @@ -2655,7 +2626,7 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2667,7 +2638,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2692,7 +2662,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xE7E7E7 + styles: style_page bg_opa: COVER hidden: true scrollable: false @@ -2711,7 +2681,7 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2723,7 +2693,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - obj: @@ -2734,7 +2703,6 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE bg_opa: COVER border_width: 0 clickable: true @@ -2747,7 +2715,6 @@ lvgl: align: CENTER text: "\U000F0425" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2770,7 +2737,7 @@ lvgl: text_align: CENTER text: "--" text_font: sublabel_big - text_color: 0x616161 + styles: paint_muted clickable: false - obj: @@ -2780,10 +2747,9 @@ lvgl: width: 94% height: 92 radius: 16 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: false scrollable: false @@ -2796,14 +2762,14 @@ lvgl: width: 72 height: 72 radius: 36 - bg_color: 0xF1F1F1 + styles: paint_track bg_opa: COVER border_width: 0 pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xD9D9D9 + styles: paint_key_pressed disabled: opa: 40% on_short_click: @@ -2820,7 +2786,6 @@ lvgl: align: CENTER text: "\U000F0374" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - obj: id: climate_plus_button @@ -2829,14 +2794,14 @@ lvgl: width: 72 height: 72 radius: 36 - bg_color: 0xF1F1F1 + styles: paint_track bg_opa: COVER border_width: 0 pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xD9D9D9 + styles: paint_key_pressed disabled: opa: 40% on_short_click: @@ -2853,7 +2818,6 @@ lvgl: align: CENTER text: "\U000F0415" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - label: id: climate_target_label @@ -2861,7 +2825,6 @@ lvgl: y: -8 text: "--" text_font: setpoint_digits - text_color: 0x1B1B1B clickable: false - label: id: climate_set_label @@ -2869,7 +2832,7 @@ lvgl: y: 26 text: "Target" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle clickable: false # One key per mode the device supports (off is the power key); the one in use is @@ -2897,15 +2860,14 @@ lvgl: flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "auto" } widgets: @@ -2913,22 +2875,20 @@ lvgl: align: CENTER text: "\U000F1B17" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_heat_cool flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "heat_cool" } widgets: @@ -2936,22 +2896,20 @@ lvgl: align: CENTER text: "\U000F1A79" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_heat flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "heat" } widgets: @@ -2959,22 +2917,20 @@ lvgl: align: CENTER text: "\U000F0238" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_cool flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "cool" } widgets: @@ -2982,22 +2938,20 @@ lvgl: align: CENTER text: "\U000F0717" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_dry flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "dry" } widgets: @@ -3005,22 +2959,20 @@ lvgl: align: CENTER text: "\U000F058E" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_fan_only flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "fan_only" } widgets: @@ -3028,22 +2980,20 @@ lvgl: align: CENTER text: "\U000F0210" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_more flex_grow: 1 height: 46 radius: 23 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: open_climate_mode_picker widgets: @@ -3051,7 +3001,7 @@ lvgl: align: CENTER text: "\U000F01D8" text_font: materialdesign_icons - text_color: 0x46525E + styles: paint_slate clickable: false # ---------- CLIMATE MODE PICKER ---------- # Replaces cycling through modes. Cycling sends a set_hvac_mode on every @@ -3065,7 +3015,7 @@ lvgl: width: ${DISPLAY_W} height: ${DISPLAY_H} hidden: true - bg_color: 0xE7E7E7 + styles: style_page bg_opa: COVER border_width: 0 clickable: true @@ -3077,7 +3027,6 @@ lvgl: y: 21 text: "Mode" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false # Flex ensures unsupported modes don't leave a gap: @@ -3107,10 +3056,9 @@ lvgl: width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3121,17 +3069,15 @@ lvgl: align: CENTER text: "Off" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_heat width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3142,17 +3088,15 @@ lvgl: align: CENTER text: "Heat" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_cool width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3163,17 +3107,15 @@ lvgl: align: CENTER text: "Cool" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_heat_cool width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3184,17 +3126,15 @@ lvgl: align: CENTER text: "Heat/Cool" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_auto width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3205,17 +3145,15 @@ lvgl: align: CENTER text: "Auto" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_dry width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3226,17 +3164,15 @@ lvgl: align: CENTER text: "Dry" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_fan_only width: 88 height: 26 radius: 13 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3247,7 +3183,6 @@ lvgl: align: CENTER text: "Fan only" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - label: @@ -3256,7 +3191,7 @@ lvgl: height: 11 text: "Fan" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle text_align: CENTER clickable: false - obj: @@ -3264,10 +3199,9 @@ lvgl: width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3279,17 +3213,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cfan_1 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3301,17 +3233,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cfan_2 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3323,17 +3253,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cfan_3 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3345,7 +3273,6 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - label: id: cswing_title @@ -3353,7 +3280,7 @@ lvgl: height: 11 text: "Swing" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle text_align: CENTER clickable: false - obj: @@ -3361,10 +3288,9 @@ lvgl: width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3376,17 +3302,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cswing_1 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3398,17 +3322,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cswing_2 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3420,17 +3342,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: cswing_3 width: 62 height: 22 radius: 11 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3442,7 +3362,6 @@ lvgl: align: CENTER text: "-" text_font: sublabel - text_color: 0x1B1B1B clickable: false - obj: id: climate_mode_overlay_x @@ -3452,7 +3371,7 @@ lvgl: width: 40 height: 40 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -3464,7 +3383,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false @@ -3493,7 +3411,7 @@ lvgl: - script.execute: wake_display - id: touch_cal_page - bg_color: 0x101820 + styles: paint_calibration bg_opa: COVER pad_all: 0 border_width: 0 @@ -3504,7 +3422,6 @@ lvgl: y: 65 text: "Follow the calibration wizard" text_font: sublabel - text_color: 0xFFFFFF - obj: x: 10 y: 10 @@ -3519,7 +3436,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration - obj: x: 289 y: 10 @@ -3534,7 +3451,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration - obj: x: 289 y: 209 @@ -3549,7 +3466,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration - obj: x: 10 y: 209 @@ -3564,7 +3481,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration - obj: x: 150 y: 110 @@ -3579,7 +3496,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0xFFFFFF + styles: paint_calibration script: # Render every overlay and both pages repeatedly without controlling devices. @@ -3682,6 +3599,8 @@ script: then: - lambda: |- const auto &settings = screen_settings::current; + // Dark mode (firmware 0.2.54+): a look the screen already has costs nothing. + theme::set_dark(settings_screen::dark_mode != 0); // Auto standby off wakes the screen, but not out of a Sleep pressed in Home Assistant. if (id(display_dimmed) && !settings.standby_enabled && !id(sleep_requested)) { id(display_dimmed) = false; @@ -3752,7 +3671,8 @@ script: lv_label_set_text(id(alert_title), alert.title.c_str()); lv_label_set_text(id(alert_subtitle), alert.subtitle.c_str()); lv_label_set_text(id(alert_ok_label), alert.button.c_str()); - lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(alert.color), LV_PART_MAIN); + id(alert_card_color) = alert.color; + lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(theme::surface(alert.color)), LV_PART_MAIN); ESP_LOGI("alert", "show \"%s\" timeout=%d flash=%d", alert.title.c_str(), alert.timeout_seconds, (int) alert.flash); - script.execute: wake_display - lvgl.widget.show: alert_overlay @@ -3926,7 +3846,7 @@ script: std::string value = id(active_climate_target_known) ? tile_controls::format_value(target / 10.0f, id(active_climate_step_x10) / 10.0f, "°") : std::string("--"); lv_label_set_text(id(climate_target_label), value.c_str()); - lv_obj_set_style_text_color(id(climate_target_label), lv_color_hex(off ? 0x9E9E9E : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_text_color(id(climate_target_label), theme::color(off ? theme::OFF : theme::INK), LV_PART_MAIN); auto enable = [](lv_obj_t *key, bool on) { if (on) lv_obj_remove_state(key, LV_STATE_DISABLED); else lv_obj_add_state(key, LV_STATE_DISABLED); }; @@ -3957,9 +3877,9 @@ script: if (show) lv_obj_remove_flag(k.obj, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(k.obj, LV_OBJ_FLAG_HIDDEN); bool selected = show && !off && mode == k.mode; uint32_t color = tile_controls::mode_color(k.mode); - lv_obj_set_style_bg_color(k.obj, lv_color_hex(selected ? color : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_border_color(k.obj, lv_color_hex(selected ? color : 0xDDDDDD), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(k.obj, 0), lv_color_hex(selected ? 0xFFFFFF : 0x46525E), LV_PART_MAIN); + lv_obj_set_style_bg_color(k.obj, selected ? lv_color_hex(color) : theme::color(theme::CARD), LV_PART_MAIN); + lv_obj_set_style_border_color(k.obj, selected ? lv_color_hex(color) : theme::color(theme::LINE), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(k.obj, 0), theme::color(selected ? theme::ON_ACCENT : theme::SLATE), LV_PART_MAIN); } if (more) lv_obj_remove_flag(id(cmkey_more), LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(id(cmkey_more), LV_OBJ_FLAG_HIDDEN); // One mode is no choice: the power key already turns it on and off. Without keys the @@ -4000,8 +3920,8 @@ script: if (has(m)) lv_obj_clear_flag(btn, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(btn, LV_OBJ_FLAG_HIDDEN); bool selected = (current == std::string(m)); - lv_obj_set_style_bg_color(btn, lv_color_hex(selected ? 0x00A6ED : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(btn, 0), lv_color_hex(selected ? 0xFFFFFF : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_bg_color(btn, theme::color(selected ? theme::ACCENT_BRIGHT : theme::CARD), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(btn, 0), theme::color(selected ? theme::ON_ACCENT : theme::INK), LV_PART_MAIN); }; apply(id(cmode_off), "off"); apply(id(cmode_heat), "heat"); @@ -4019,8 +3939,8 @@ script: if (raw.empty()) { lv_obj_add_flag(chips[i], LV_OBJ_FLAG_HIDDEN); continue; } lv_obj_clear_flag(chips[i], LV_OBJ_FLAG_HIDDEN); ++shown; lv_label_set_text(lv_obj_get_child(chips[i], 0), pretty(raw).c_str()); - lv_obj_set_style_bg_color(chips[i], lv_color_hex(raw == current_mode ? 0x00A6ED : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(chips[i], 0), lv_color_hex(raw == current_mode ? 0xFFFFFF : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_bg_color(chips[i], theme::color(raw == current_mode ? theme::ACCENT_BRIGHT : theme::CARD), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(chips[i], 0), theme::color(raw == current_mode ? theme::ON_ACCENT : theme::INK), LV_PART_MAIN); } if (shown) lv_obj_clear_flag(title, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(title, LV_OBJ_FLAG_HIDDEN); }; @@ -4110,8 +4030,8 @@ script: for (char &c : mode) if (c >= 'A' && c <= 'Z') c = (char)(c - 'A' + 'a'); bool on = !(mode == "off" || mode.empty() || mode == "unknown" || mode == "unavailable"); if (id(climate_edit_pending)) on = id(active_climate_power_on); - lv_obj_set_style_bg_color(id(climate_power_button), lv_color_hex(on ? 0xD5EEFC : 0xEEEEEE), LV_PART_MAIN); - lv_obj_set_style_text_color(id(climate_power_icon), lv_color_hex(on ? 0x0B6E99 : 0x8A8A8A), LV_PART_MAIN); + lv_obj_set_style_bg_color(id(climate_power_button), theme::color(on ? theme::ACCENT_TINT : theme::KEY), LV_PART_MAIN); + lv_obj_set_style_text_color(id(climate_power_icon), theme::color(on ? theme::ACCENT_ICON : theme::ICON_OFF), LV_PART_MAIN); - id: set_climate_mode mode: restart @@ -4356,9 +4276,6 @@ script: percentage_value: float position_value: float icon_text: string - slider_bg_color: uint32_t - slider_fill_color: uint32_t - slider_icon_color: uint32_t label_off: string label_on: string supported_color_modes: string @@ -4372,23 +4289,6 @@ script: climate_step: string then: - lambda: |- - // Accent colour from the Home Assistant domain: the part before the dot - // in the entity_id. script/scene/button fire (ACCENT_ACTION), a - // light is a light (ACCENT_LIGHT), the rest is a device. - // NOTE: this helper appears twice in this file — here and in - // open_value_overlay. Update them together. - auto accent_for = [](const std::string& entity_id) -> uint32_t { - std::string d = entity_id.substr(0, entity_id.find('.')); - if (d == "script" || d == "scene" || d == "button" || - d == "input_button" || d == "automation") return ${ACCENT_ACTION}; - if (d == "light") return ${ACCENT_LIGHT}; - return ${ACCENT_DEVICE}; - }; - - // The slider colour comes from the tile, so it can also be ${ACCENT_AUTO}. - uint32_t fill_color = (slider_fill_color == ${ACCENT_AUTO}) - ? accent_for(entity) : slider_fill_color; - std::string mode = longpress_mode; auto contains_mode = [](const std::string& modes, const std::string& needle) { return modes.find(needle) != std::string::npos; @@ -4507,16 +4407,8 @@ script: } } - if (tile_type == "cover") { - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(fill_color), LV_PART_MAIN); - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(slider_bg_color), LV_PART_INDICATOR); - lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); - } - else{ - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(slider_bg_color), LV_PART_MAIN); - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(fill_color), LV_PART_INDICATOR); - lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); - } + // Track and fill are the pale blue and blue paints of overlay_slider. + lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); lv_obj_set_style_radius(id(overlay_slider), 28, LV_PART_MAIN); lv_obj_set_style_radius(id(overlay_slider), 0, LV_PART_INDICATOR); @@ -4550,8 +4442,6 @@ script: lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_INDICATOR); - lv_obj_set_style_text_color(id(overlay_icon), lv_color_hex(slider_icon_color), 0); - - if: condition: lambda: 'return id(active_control_kind) != "climate_temperature";' diff --git a/packages/guition.yaml b/packages/guition.yaml index c636a58..d118f24 100644 --- a/packages/guition.yaml +++ b/packages/guition.yaml @@ -3,7 +3,7 @@ # Source profile for packages/guition.yaml (tools/generate_packages.py); see docs/GUITION.md. # A screen gets its tiles from the ESP Screen Manager add-on while it runs. The CYD is its own profile. substitutions: - SCREEN_FIRMWARE_VERSION: "0.2.53" + SCREEN_FIRMWARE_VERSION: "0.2.54" # 0: no drift limit; LVGL decides, releasing inside the tile is a tap, leaving it is not # (like iOS). The CYD keeps a limit because its resistive panel jumps. TOUCH_MOVE_LIMIT_PX: "0" @@ -29,26 +29,6 @@ substitutions: NIGHT_END_HOUR: "7" # 0-23 NIGHT_DIM_BRIGHTNESS: "10" # backlight brightness in percent at night - # ============================================================ - # ACCENT COLOURS — determined automatically from the Home Assistant domain - # - # The domain is the part before the dot in the entity_id: - # script.good_morning -> "script" -> ACCENT_ACTION - # light.living_room_2 -> "light" -> ACCENT_LIGHT - # vacuum.s8 -> "vacuum" -> ACCENT_DEVICE - # - # That's Home Assistant's own grouping, so a tile automatically gets the - # right colour as soon as you put an entity in it — you no longer have - # to pick colours per tile. The distinction that matters: a script/scene - # fires, a device you turn on or off. Those two shouldn't look the same. - # - # A tile keeps this colour unless you pick one in ESP Screens; ${ACCENT_AUTO} - # is the sentinel that means "decide from the domain". - # ============================================================ - ACCENT_AUTO: "0x1000000" # sentinel: deliberately outside the 24-bit colour range - ACCENT_ACTION: "0x8B5CF6" # script / scene / button / input_button / automation - ACCENT_LIGHT: "0xFEC600" # light - ACCENT_DEVICE: "0x00C5EC" # switch, fan, cover, climate, vacuum, media_player, rest DISPLAY_W: "480" DISPLAY_H: "480" LVGL_ROTATION: "0" @@ -92,8 +72,6 @@ substitutions: OVERLAY_SLIDER_W: "144" OVERLAY_SLIDER_H: "300" OVERLAY_ICON_Y: "148" - BG_TOP_COLOR: "0xE7E7E7" - BG_BOTTOM_COLOR: "0xE7E7E7" TILE_ICON_X: "0" TILE_ICON_Y: "12" TILE_TITLE_X: "64" @@ -195,6 +173,35 @@ esphome: runtime_tiles::enabled = true; runtime_tiles::rotation_supported = true; runtime_tiles::load_settings(); + // Colours (firmware 0.2.54+): the styles of this profile take their colours from theme.h. The list runs now, + // in the look the screen saved, before anything is drawn, and again after every change of look. + theme::paints = []() { + using theme::Paint; + for (auto *style : {id(style_room), id(style_time), id(style_title), id(style_value_big), id(paint_ink)}) theme::fill(style, Paint::ink); + theme::fill(id(style_page), Paint::page); + theme::fill(id(style_tile), Paint::card); + theme::fill(id(style_icon_circle), Paint::accent_tint); + theme::fill(id(style_value), Paint::muted); + theme::fill(id(paint_page_soft), Paint::page_soft); + theme::fill(id(paint_page_pressed), Paint::page_pressed); + theme::fill(id(paint_card), Paint::card); + theme::fill(id(paint_raised), Paint::raised); + theme::fill(id(paint_key), Paint::key); + theme::fill(id(paint_key_pressed), Paint::key_pressed); + theme::fill(id(paint_track), Paint::track); + theme::fill(id(paint_ink_soft), Paint::ink_soft); + theme::fill(id(paint_muted), Paint::muted); + theme::fill(id(paint_subtle), Paint::subtle); + theme::fill(id(paint_slate), Paint::slate); + theme::fill(id(paint_scrim), Paint::scrim); + theme::fill(id(paint_veil), Paint::veil); + theme::fill(id(paint_accent_tint), Paint::accent_tint); + theme::fill(id(paint_accent_bright), Paint::accent_bright); + theme::fill(id(paint_button_dark), Paint::button_dark); + theme::fill(id(paint_button_dark_pressed), Paint::button_dark_pressed); + }; + theme::paints(); + theme::set_dark(settings_screen::dark_mode != 0); runtime_tiles::settings_changed = []() { id(apply_screen_settings).execute(); }; runtime_tiles::dismiss = []() { runtime_tiles::hide_detail(); @@ -227,7 +234,7 @@ esphome: id(active_climate_action) = t.extra().hvac_action; id(open_value_overlay).execute(t.name, t.entity, t.domain(), "auto", t.active(), 0, t.brightness, t.percentage, t.position, runtime_tiles::icon_for(t), - 0xD5EEFC, 0x00A6ED, 0x1B1B1B, "Off", "On", t.modes, + "Off", "On", t.modes, t.current, t.target, t.humidity, t.state, t.extra().hvac_modes, std::to_string(t.minimum), std::to_string(t.maximum), std::to_string(t.step)); }; @@ -286,6 +293,16 @@ esphome: settings_screen::before_open = []() { id(close_cards).execute(); }; settings_screen::hold_limit = ${SETTINGS_HOLD_DRIFT_PX}; settings_screen::tap_limit = ${TOUCH_MOVE_LIMIT_PX}; + // What a change of look draws again, now that everything is bound: the tiles, the top bar and an open card, + // the colour card, the settings page, an alert and the climate cards. + theme::redraw = []() { + runtime_tiles::restyle(); + light_controls::restyle(); + settings_screen::restyle(); + if (id(alert_active)) lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(theme::surface(id(alert_card_color))), LV_PART_MAIN); + if (!lv_obj_has_flag(id(climate_detail_overlay), LV_OBJ_FLAG_HIDDEN)) id(climate_card_refresh).execute(); + if (!lv_obj_has_flag(id(climate_mode_overlay), LV_OBJ_FLAG_HIDDEN)) id(open_climate_mode_picker).execute(); + }; // Under the cards: brightness_overlay is the first of them on the page, so the back button and // the action at the top right of a card keep their taps. settings_screen::attach_hold(id(home_page)->obj, ${SETTINGS_HOLD_X}, 0, ${SETTINGS_HOLD_W}, ${SCROLL_Y}, id(brightness_overlay)); @@ -537,6 +554,10 @@ globals: initial_value: 'false' - id: alert_title_text type: std::string + # The alert's colour as the automation named it (a swatch's light value, 0 for the normal card). + - id: alert_card_color + type: uint32_t + initial_value: '0' - id: alert_timeout_seconds type: int initial_value: '0' @@ -1098,6 +1119,18 @@ switch: - lambda: 'settings_screen::set("night_enabled", 1);' turn_off_action: - lambda: 'settings_screen::set("night_enabled", 0);' + # The dark look for a screen beside a bed (firmware 0.2.54+): black page, graphite cards, soft white text. + - platform: template + id: setting_dark_mode + name: "Dark mode" + icon: "mdi:theme-light-dark" + entity_category: config + restore_mode: DISABLED + lambda: return settings_screen::dark_mode != 0; + turn_on_action: + - lambda: 'settings_screen::set("dark_mode", 1);' + turn_off_action: + - lambda: 'settings_screen::set("dark_mode", 0);' - platform: template id: setting_clock_24h name: "24-hour clock" @@ -1363,23 +1396,17 @@ lvgl: rotation: ${LVGL_ROTATION} style_definitions: - # Background: two-stop vertical gradient instead of the 320x240 - # RGB565 wallpaper. Saves ~150 KB flash and an image blit per redraw, - # which you can see directly in how smoothly it scrolls. - - id: style_bg_grad - bg_color: ${BG_TOP_COLOR} - bg_grad_color: ${BG_BOTTOM_COLOR} - bg_grad_dir: VER + # The page behind the tiles and the cards: one colour from the theme (theme.h PAGE), no wallpaper and no + # gradient, so a redraw is a plain fill. + - id: style_page bg_opa: COVER border_width: 0 radius: 0 - id: style_tile - bg_color: 0xFFFFFF bg_opa: COVER radius: 22 border_width: 1 - border_color: 0xDDDDDD border_opa: COVER pad_left: 12 pad_right: 12 @@ -1388,66 +1415,51 @@ lvgl: shadow_width: 0 shadow_opa: 40% - - id: style_tile_disabled - bg_color: 0xFFFFFF - bg_opa: COVER - radius: 22 - border_width: 1 - border_color: 0xDDDDDD - border_opa: COVER - pad_left: 12 - pad_right: 12 - pad_top: 12 - pad_bottom: 12 - shadow_width: 0 - shadow_opa: 25% - - id: style_icon_circle - bg_color: 0xD5EEFC - bg_opa: COVER - radius: 999 - border_width: 0 - - - id: style_icon_circle_disabled - bg_color: 0xEEEEEE bg_opa: COVER radius: 999 border_width: 0 - id: style_room text_font: headline - text_color: 0x1B1B1B text_opa: 100% - id: style_time text_font: time_label - text_color: 0x1B1B1B text_opa: 100% - id: style_title text_font: label - text_color: 0x000000 text_opa: 100% - id: style_value text_font: sublabel - text_color: 0x7A7A7C text_opa: 100% - id: style_value_big text_font: sublabel_big - text_color: 0x1B1B1B text_opa: 80% - - id: style_title_disabled - text_font: label - text_color: 0x1B1B1B - text_opa: 100% - - - id: style_value_disabled - text_font: sublabel - text_color: 0x1B1B1B - text_opa: 100% + # Paints: shared styles without a colour of their own. theme.h fills them (the list in on_boot, theme::paints) + # and fills them again when Dark mode changes, so a widget names a paint where it used to write a colour. + - id: paint_page_soft + - id: paint_page_pressed + - id: paint_card + - id: paint_raised + - id: paint_key + - id: paint_key_pressed + - id: paint_track + - id: paint_ink + - id: paint_ink_soft + - id: paint_muted + - id: paint_subtle + - id: paint_slate + - id: paint_scrim + - id: paint_veil + - id: paint_accent_tint + - id: paint_accent_bright + - id: paint_button_dark + - id: paint_button_dark_pressed # ---------- ALERT OVERLAY (HA action show_alert) ---------- # LVGL's top layer sits above every page, card and the dim overlay; the card @@ -1461,7 +1473,7 @@ lvgl: width: ${DISPLAY_W} height: ${DISPLAY_H} hidden: true - bg_color: 0x101820 + styles: paint_scrim bg_opa: 60% radius: 0 border_width: 0 @@ -1478,11 +1490,10 @@ lvgl: align: CENTER width: ${ALERT_CARD_W} height: ${ALERT_CARD_H} - bg_color: 0xFFFFFF + styles: paint_raised bg_opa: COVER radius: 18 border_width: 1 - border_color: 0xDDDDDD border_opa: COVER shadow_width: 0 pad_all: 0 @@ -1496,7 +1507,6 @@ lvgl: y: ${ALERT_ICON_Y} text: "\U000F002A" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - label: id: alert_title @@ -1506,7 +1516,6 @@ lvgl: long_mode: DOT text: "Notification" text_font: headline - text_color: 0x1B1B1B clickable: false - label: id: alert_subtitle @@ -1517,7 +1526,7 @@ lvgl: long_mode: WRAP text: "" text_font: sublabel_big - text_color: 0x3A3A3C + styles: paint_ink_soft clickable: false - obj: id: alert_ok @@ -1527,7 +1536,7 @@ lvgl: width: ${ALERT_BUTTON_W} height: ${ALERT_BUTTON_H} radius: 999 - bg_color: 0x1B1B1B + styles: paint_button_dark bg_opa: COVER border_width: 0 shadow_width: 0 @@ -1535,7 +1544,7 @@ lvgl: clickable: true scrollable: false pressed: - bg_color: 0x3A3A3C + styles: paint_button_dark_pressed bg_opa: COVER on_click: - if: @@ -1551,12 +1560,11 @@ lvgl: align: CENTER text: "OK" text_font: headline - text_color: 0xFFFFFF clickable: false pages: - id: home_page - styles: style_bg_grad + styles: style_page pad_all: 0 scrollable: false scrollbar_mode: 'OFF' @@ -1642,7 +1650,6 @@ lvgl: id: tile1_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F001B" clickable: false - label: @@ -1696,7 +1703,6 @@ lvgl: id: tile2_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F0387" clickable: false - label: @@ -1750,7 +1756,6 @@ lvgl: id: tile3_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F02E3" clickable: false - label: @@ -1804,7 +1809,6 @@ lvgl: id: tile4_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F059C" clickable: false - label: @@ -1858,7 +1862,6 @@ lvgl: id: tile5_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F0425" clickable: false - label: @@ -1912,7 +1915,6 @@ lvgl: id: tile6_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F070D" clickable: false - label: @@ -1969,7 +1971,6 @@ lvgl: id: tile7_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F06B5" clickable: false - label: @@ -2027,7 +2028,6 @@ lvgl: id: tile8_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F06EE" clickable: false - label: @@ -2080,7 +2080,6 @@ lvgl: id: tile9_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F04B9" clickable: false - label: @@ -2133,7 +2132,6 @@ lvgl: id: tile10_icon_lbl align: CENTER text_font: materialdesign_icons - text_color: 0x1B1B1B text: "\U000F002A" clickable: false - label: @@ -2172,7 +2170,7 @@ lvgl: border_width: 0 scrollable: false pressed: - bg_color: 0xE3E3E3 + styles: paint_page_pressed bg_opa: COVER on_short_click: - if: @@ -2187,7 +2185,7 @@ lvgl: x: 24 text: "< Previous" text_font: label - text_color: 0x1B1B1B + styles: paint_ink clickable: false - label: id: page_number @@ -2200,7 +2198,6 @@ lvgl: text: "1 / 2" text_align: CENTER text_font: sublabel - text_color: 0x1B1B1B - obj: id: page_next align: BOTTOM_RIGHT @@ -2214,7 +2211,7 @@ lvgl: border_width: 0 scrollable: false pressed: - bg_color: 0xE3E3E3 + styles: paint_page_pressed bg_opa: COVER on_short_click: - if: @@ -2229,7 +2226,7 @@ lvgl: x: -24 text: "Next >" text_font: label - text_color: 0x1B1B1B + styles: paint_ink clickable: false - obj: @@ -2254,7 +2251,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - styles: style_bg_grad + styles: style_page scrollable: false clickable: true on_click: @@ -2266,7 +2263,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xFFFFFF + styles: paint_veil bg_opa: 18% border_width: 0 clickable: false @@ -2280,7 +2277,7 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2292,7 +2289,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2320,7 +2316,7 @@ lvgl: value: 100 adv_hittest: false - bg_color: 0xFFFFFF + styles: paint_accent_tint bg_opa: 100% radius: 42 # The only widget with BOTH a radius AND a child (overlay_icon). @@ -2333,7 +2329,7 @@ lvgl: border_width: 0 indicator: - bg_color: 0xD5EEFC + styles: paint_accent_bright bg_opa: 100% radius: 42 @@ -2365,7 +2361,7 @@ lvgl: align: CENTER y: ${OVERLAY_ICON_Y} text_font: materialdesign_icons - text_color: 0x1B1B1B + styles: paint_ink text: "\U000F001B" clickable: false @@ -2574,7 +2570,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xF7F7F7 + styles: paint_page_soft bg_opa: COVER hidden: true scrollable: false @@ -2585,27 +2581,6 @@ lvgl: pad_bottom: 0 border_width: 0 widgets: - - obj: - id: color_detail_bg - x: 0 - y: 0 - width: ${DISPLAY_W} - height: ${DISPLAY_H} - styles: style_bg_grad - scrollable: false - clickable: false - - obj: - id: color_detail_scrim - x: 0 - y: 0 - width: ${DISPLAY_W} - height: ${DISPLAY_H} - bg_color: 0xFFFFFF - bg_opa: 72% - border_width: 0 - clickable: false - scrollable: false - - obj: id: color_close_button align: TOP_LEFT @@ -2614,7 +2589,7 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2626,7 +2601,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2651,7 +2625,7 @@ lvgl: y: 0 width: ${DISPLAY_W} height: ${DISPLAY_H} - bg_color: 0xE7E7E7 + styles: style_page bg_opa: COVER hidden: true scrollable: false @@ -2670,7 +2644,7 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -2682,7 +2656,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - obj: @@ -2693,7 +2666,6 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE bg_opa: COVER border_width: 0 clickable: true @@ -2706,7 +2678,6 @@ lvgl: align: CENTER text: "\U000F0425" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false - label: @@ -2729,7 +2700,7 @@ lvgl: text_align: CENTER text: "--" text_font: sublabel_big - text_color: 0x616161 + styles: paint_muted clickable: false - obj: @@ -2739,10 +2710,9 @@ lvgl: width: 94% height: 200 radius: 24 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: false scrollable: false @@ -2755,14 +2725,14 @@ lvgl: width: 116 height: 116 radius: 58 - bg_color: 0xF1F1F1 + styles: paint_track bg_opa: COVER border_width: 0 pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xD9D9D9 + styles: paint_key_pressed disabled: opa: 40% on_short_click: @@ -2779,7 +2749,6 @@ lvgl: align: CENTER text: "\U000F0374" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - obj: id: climate_plus_button @@ -2788,14 +2757,14 @@ lvgl: width: 116 height: 116 radius: 58 - bg_color: 0xF1F1F1 + styles: paint_track bg_opa: COVER border_width: 0 pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xD9D9D9 + styles: paint_key_pressed disabled: opa: 40% on_short_click: @@ -2812,7 +2781,6 @@ lvgl: align: CENTER text: "\U000F0415" text_font: materialdesign_icons - text_color: 0x1B1B1B clickable: false - label: id: climate_target_label @@ -2820,7 +2788,6 @@ lvgl: y: -14 text: "--" text_font: setpoint_digits - text_color: 0x1B1B1B clickable: false - label: id: climate_set_label @@ -2828,7 +2795,7 @@ lvgl: y: 46 text: "Target" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle clickable: false # One key per mode the device supports (off is the power key); the one in use is @@ -2856,15 +2823,14 @@ lvgl: flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "auto" } widgets: @@ -2872,22 +2838,20 @@ lvgl: align: CENTER text: "\U000F1B17" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_heat_cool flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "heat_cool" } widgets: @@ -2895,22 +2859,20 @@ lvgl: align: CENTER text: "\U000F1A79" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_heat flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "heat" } widgets: @@ -2918,22 +2880,20 @@ lvgl: align: CENTER text: "\U000F0238" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_cool flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "cool" } widgets: @@ -2941,22 +2901,20 @@ lvgl: align: CENTER text: "\U000F0717" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_dry flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "dry" } widgets: @@ -2964,22 +2922,20 @@ lvgl: align: CENTER text: "\U000F058E" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_fan_only flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: { id: set_climate_mode, mode: "fan_only" } widgets: @@ -2987,22 +2943,20 @@ lvgl: align: CENTER text: "\U000F0210" text_font: materialdesign_icons - text_color: 0x46525E clickable: false - obj: id: cmkey_more flex_grow: 1 height: 76 radius: 38 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 clickable: true scrollable: false pressed: - bg_color: 0xEEEEEE + styles: paint_key on_click: - script.execute: open_climate_mode_picker widgets: @@ -3010,7 +2964,7 @@ lvgl: align: CENTER text: "\U000F01D8" text_font: materialdesign_icons - text_color: 0x46525E + styles: paint_slate clickable: false # Fan and swing, each a row of choices behind its icon (climate_card.h fills the card). - obj: @@ -3020,10 +2974,9 @@ lvgl: width: 94% height: 116 radius: 24 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD pad_all: 0 hidden: true clickable: false @@ -3040,7 +2993,7 @@ lvgl: width: ${DISPLAY_W} height: ${DISPLAY_H} hidden: true - bg_color: 0xE7E7E7 + styles: style_page bg_opa: COVER border_width: 0 clickable: true @@ -3052,7 +3005,6 @@ lvgl: y: 35 text: "Mode" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false # Flex ensures unsupported modes don't leave a gap: @@ -3082,10 +3034,9 @@ lvgl: width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3096,17 +3047,15 @@ lvgl: align: CENTER text: "Off" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_heat width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3117,17 +3066,15 @@ lvgl: align: CENTER text: "Heat" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_cool width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3138,17 +3085,15 @@ lvgl: align: CENTER text: "Cool" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_heat_cool width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3159,17 +3104,15 @@ lvgl: align: CENTER text: "Heat/Cool" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_auto width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3180,17 +3123,15 @@ lvgl: align: CENTER text: "Auto" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_dry width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3201,17 +3142,15 @@ lvgl: align: CENTER text: "Dry" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cmode_fan_only width: 136 height: 58 radius: 22 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3222,7 +3161,6 @@ lvgl: align: CENTER text: "Fan only" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - label: @@ -3231,7 +3169,7 @@ lvgl: height: 24 text: "Fan" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle text_align: CENTER clickable: false - obj: @@ -3239,10 +3177,9 @@ lvgl: width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3254,17 +3191,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cfan_1 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3276,17 +3211,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cfan_2 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3298,17 +3231,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cfan_3 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3320,7 +3251,6 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - label: id: cswing_title @@ -3328,7 +3258,7 @@ lvgl: height: 24 text: "Swing" text_font: sublabel - text_color: 0x6B6B6B + styles: paint_subtle text_align: CENTER clickable: false - obj: @@ -3336,10 +3266,9 @@ lvgl: width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3351,17 +3280,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cswing_1 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3373,17 +3300,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cswing_2 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3395,17 +3320,15 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: cswing_3 width: 98 height: 48 radius: 18 - bg_color: 0xFFFFFF + styles: paint_card bg_opa: COVER border_width: 1 - border_color: 0xDDDDDD clickable: true scrollable: false pad_all: 0 @@ -3417,7 +3340,6 @@ lvgl: align: CENTER text: "-" text_font: sublabel_big - text_color: 0x1B1B1B clickable: false - obj: id: climate_mode_overlay_x @@ -3427,7 +3349,7 @@ lvgl: width: 60 height: 60 radius: 999 - bg_color: 0xEEEEEE + styles: paint_key bg_opa: COVER border_width: 0 clickable: true @@ -3439,7 +3361,6 @@ lvgl: align: CENTER text: "\U000F004D" text_font: materialdesign_icons_mini - text_color: 0x1B1B1B clickable: false @@ -3468,7 +3389,7 @@ lvgl: - script.execute: wake_display - id: touch_cal_page - bg_color: 0xF7F7F7 + styles: paint_page_soft bg_opa: COVER pad_all: 0 border_width: 0 @@ -3479,7 +3400,6 @@ lvgl: y: 110 text: "GT911 touch check" text_font: headline - text_color: 0x1B1B1B - obj: x: 12 y: 12 @@ -3494,7 +3414,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink - obj: x: 443 y: 12 @@ -3509,7 +3429,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink - obj: x: 443 y: 443 @@ -3524,7 +3444,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink - obj: x: 12 y: 443 @@ -3539,7 +3459,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink - obj: x: 228 y: 228 @@ -3554,7 +3474,7 @@ lvgl: align: CENTER text: "+" text_font: headline - text_color: 0x1B1B1B + styles: paint_ink script: - id: capture_ui_snapshot @@ -3670,6 +3590,8 @@ script: then: - lambda: |- const auto &settings = screen_settings::current; + // Dark mode (firmware 0.2.54+): a look the screen already has costs nothing. + theme::set_dark(settings_screen::dark_mode != 0); if(runtime_tiles::enabled && static_cast(id(screen_lvgl).get_rotation())!=runtime_tiles::rotation){ cyd::touch_guard.consume(); if(lv_indev_get_act())lv_indev_wait_release(lv_indev_get_act()); @@ -3748,7 +3670,8 @@ script: lv_label_set_text(id(alert_title), alert.title.c_str()); lv_label_set_text(id(alert_subtitle), alert.subtitle.c_str()); lv_label_set_text(id(alert_ok_label), alert.button.c_str()); - lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(alert.color), LV_PART_MAIN); + id(alert_card_color) = alert.color; + lv_obj_set_style_bg_color(id(alert_card), lv_color_hex(theme::surface(alert.color)), LV_PART_MAIN); ESP_LOGI("alert", "show \"%s\" timeout=%d flash=%d", alert.title.c_str(), alert.timeout_seconds, (int) alert.flash); - script.execute: wake_display - lvgl.widget.show: alert_overlay @@ -3926,7 +3849,7 @@ script: std::string value = id(active_climate_target_known) ? tile_controls::format_value(target / 10.0f, id(active_climate_step_x10) / 10.0f, "°") : std::string("--"); lv_label_set_text(id(climate_target_label), value.c_str()); - lv_obj_set_style_text_color(id(climate_target_label), lv_color_hex(off ? 0x9E9E9E : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_text_color(id(climate_target_label), theme::color(off ? theme::OFF : theme::INK), LV_PART_MAIN); auto enable = [](lv_obj_t *key, bool on) { if (on) lv_obj_remove_state(key, LV_STATE_DISABLED); else lv_obj_add_state(key, LV_STATE_DISABLED); }; @@ -3958,9 +3881,9 @@ script: if (show) lv_obj_remove_flag(k.obj, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(k.obj, LV_OBJ_FLAG_HIDDEN); bool selected = show && !off && mode == k.mode; uint32_t color = tile_controls::mode_color(k.mode); - lv_obj_set_style_bg_color(k.obj, lv_color_hex(selected ? color : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_border_color(k.obj, lv_color_hex(selected ? color : 0xDDDDDD), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(k.obj, 0), lv_color_hex(selected ? 0xFFFFFF : 0x46525E), LV_PART_MAIN); + lv_obj_set_style_bg_color(k.obj, selected ? lv_color_hex(color) : theme::color(theme::CARD), LV_PART_MAIN); + lv_obj_set_style_border_color(k.obj, selected ? lv_color_hex(color) : theme::color(theme::LINE), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(k.obj, 0), theme::color(selected ? theme::ON_ACCENT : theme::SLATE), LV_PART_MAIN); } if (more) lv_obj_remove_flag(id(cmkey_more), LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(id(cmkey_more), LV_OBJ_FLAG_HIDDEN); // One mode is no choice: the power key already turns it on and off. @@ -4046,8 +3969,8 @@ script: if (has(m)) lv_obj_clear_flag(btn, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(btn, LV_OBJ_FLAG_HIDDEN); bool selected = (current == std::string(m)); - lv_obj_set_style_bg_color(btn, lv_color_hex(selected ? 0x00A6ED : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(btn, 0), lv_color_hex(selected ? 0xFFFFFF : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_bg_color(btn, theme::color(selected ? theme::ACCENT_BRIGHT : theme::CARD), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(btn, 0), theme::color(selected ? theme::ON_ACCENT : theme::INK), LV_PART_MAIN); }; apply(id(cmode_off), "off"); apply(id(cmode_heat), "heat"); @@ -4065,8 +3988,8 @@ script: if (raw.empty()) { lv_obj_add_flag(chips[i], LV_OBJ_FLAG_HIDDEN); continue; } lv_obj_clear_flag(chips[i], LV_OBJ_FLAG_HIDDEN); ++shown; lv_label_set_text(lv_obj_get_child(chips[i], 0), pretty(raw).c_str()); - lv_obj_set_style_bg_color(chips[i], lv_color_hex(raw == current_mode ? 0x00A6ED : 0xFFFFFF), LV_PART_MAIN); - lv_obj_set_style_text_color(lv_obj_get_child(chips[i], 0), lv_color_hex(raw == current_mode ? 0xFFFFFF : 0x1B1B1B), LV_PART_MAIN); + lv_obj_set_style_bg_color(chips[i], theme::color(raw == current_mode ? theme::ACCENT_BRIGHT : theme::CARD), LV_PART_MAIN); + lv_obj_set_style_text_color(lv_obj_get_child(chips[i], 0), theme::color(raw == current_mode ? theme::ON_ACCENT : theme::INK), LV_PART_MAIN); } if (shown) lv_obj_clear_flag(title, LV_OBJ_FLAG_HIDDEN); else lv_obj_add_flag(title, LV_OBJ_FLAG_HIDDEN); }; @@ -4158,8 +4081,8 @@ script: for (char &c : mode) if (c >= 'A' && c <= 'Z') c = (char)(c - 'A' + 'a'); bool on = !(mode == "off" || mode.empty() || mode == "unknown" || mode == "unavailable"); if (id(climate_edit_pending)) on = id(active_climate_power_on); - lv_obj_set_style_bg_color(id(climate_power_button), lv_color_hex(on ? 0xD5EEFC : 0xEEEEEE), LV_PART_MAIN); - lv_obj_set_style_text_color(id(climate_power_icon), lv_color_hex(on ? 0x0B6E99 : 0x8A8A8A), LV_PART_MAIN); + lv_obj_set_style_bg_color(id(climate_power_button), theme::color(on ? theme::ACCENT_TINT : theme::KEY), LV_PART_MAIN); + lv_obj_set_style_text_color(id(climate_power_icon), theme::color(on ? theme::ACCENT_ICON : theme::ICON_OFF), LV_PART_MAIN); - id: set_climate_mode mode: restart @@ -4404,9 +4327,6 @@ script: percentage_value: float position_value: float icon_text: string - slider_bg_color: uint32_t - slider_fill_color: uint32_t - slider_icon_color: uint32_t label_off: string label_on: string supported_color_modes: string @@ -4420,23 +4340,6 @@ script: climate_step: string then: - lambda: |- - // Accent colour from the Home Assistant domain: the part before the dot - // in the entity_id. script/scene/button fire (ACCENT_ACTION), a - // light is a light (ACCENT_LIGHT), the rest is a device. - // NOTE: this helper appears twice in this file — here and in - // open_value_overlay. Update them together. - auto accent_for = [](const std::string& entity_id) -> uint32_t { - std::string d = entity_id.substr(0, entity_id.find('.')); - if (d == "script" || d == "scene" || d == "button" || - d == "input_button" || d == "automation") return ${ACCENT_ACTION}; - if (d == "light") return ${ACCENT_LIGHT}; - return ${ACCENT_DEVICE}; - }; - - // The slider colour comes from the tile, so it can also be ${ACCENT_AUTO}. - uint32_t fill_color = (slider_fill_color == ${ACCENT_AUTO}) - ? accent_for(entity) : slider_fill_color; - std::string mode = longpress_mode; auto contains_mode = [](const std::string& modes, const std::string& needle) { return modes.find(needle) != std::string::npos; @@ -4543,16 +4446,8 @@ script: } } - if (tile_type == "cover") { - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(fill_color), LV_PART_MAIN); - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(slider_bg_color), LV_PART_INDICATOR); - lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); - } - else{ - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(slider_bg_color), LV_PART_MAIN); - lv_obj_set_style_bg_color(id(overlay_slider), lv_color_hex(fill_color), LV_PART_INDICATOR); - lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); - } + // Track and fill are the pale blue and blue paints of overlay_slider. + lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_MAIN); lv_obj_set_style_radius(id(overlay_slider), 28, LV_PART_MAIN); lv_obj_set_style_radius(id(overlay_slider), 0, LV_PART_INDICATOR); @@ -4586,8 +4481,6 @@ script: lv_obj_set_style_bg_opa(id(overlay_slider), LV_OPA_COVER, LV_PART_INDICATOR); - lv_obj_set_style_text_color(id(overlay_icon), lv_color_hex(slider_icon_color), 0); - - if: condition: lambda: 'return id(active_control_kind) != "climate_temperature";' diff --git a/screen_manager/CHANGELOG.md b/screen_manager/CHANGELOG.md index 538a31c..6adb3c9 100644 --- a/screen_manager/CHANGELOG.md +++ b/screen_manager/CHANGELOG.md @@ -1,3 +1,15 @@ +## 0.2.63 (firmware 0.2.54) + +Dark mode, for a screen beside the bed. + +- **Dark mode** is a new switch under **Brightness** on the screen's settings page, in the **Screen settings** of ESP Screens and as `switch._dark_mode` in Home Assistant, so an automation can turn it on at bedtime and off in the morning. The screen switches at once, open cards and an alert included, and keeps the look after a restart. +- **The same design, darker.** Nothing moves: a black page, graphite cards with a fine edge, soft white text and grey secondary words. Home Assistant's colours stay where they tell you something: an amber lamp that is on, the orange of heating, the blue of a chosen key, the lines of a history graph. Pastel card colours become deep versions of the same colour, and a pale colour is lifted just enough to read on graphite. +- **Every screen has it:** the tiles and their keys and sliders, the top bar, the weather, climate, light, cover, vacuum and history cards, the settings page, the alert and the busy spinner, on the CYD and the Guition. +- **One place for colours.** Every colour the firmware draws now comes from one table (`components/smart_display/theme.h`) with a light and a dark value; the board profiles no longer write colours of their own. The light look is unchanged. +- **A switch on the settings page shows where it is.** A switch that was on showed its knob at the left each time a settings page opened or turned, until you changed a setting. It now sits at the right from the first moment, which matters now that turning on Dark mode draws the page again. +- **The sun card keeps its sunlight.** The area under the sun's arc turned orange after the card changed state and yellow again a minute later. It stays the soft yellow of the sun. +- Needs firmware 0.2.54: press **Update** on the screen. ESP Screens shows the Dark mode switch only for a screen that has it. + ## 0.2.62 (firmware 0.2.53) On or off at a glance, in Home Assistant's words and colours. diff --git a/screen_manager/app/claude_skill.py b/screen_manager/app/claude_skill.py index 92fdb64..0b1639f 100644 --- a/screen_manager/app/claude_skill.py +++ b/screen_manager/app/claude_skill.py @@ -15,7 +15,8 @@ import tile_icons from core import (ALERT_ENDINGS, ALERT_EVENT, ALERT_FALLBACK_ICON, ALERT_FIELDS, ALERT_LIMITS, ALERT_MAX_TIMEOUT, ALERT_MIN_FIRMWARE, ALERT_SUGGESTED_ICONS, AUTO_STANDBY_MIN_FIRMWARE, BROADCAST_DISMISS, BROADCAST_SHOW, CONTROLS, DISPLAYS, MAX_PAGES, SETTINGS_PAGE_MIN_FIRMWARE, SLOTS_PER_PAGE, TILE_BACKGROUNDS, - TILE_EVENTS, TILE_RESULT_EVENT, WAKE_SLEEP_MIN_FIRMWARE, SETTING_ENTITIES_MIN_FIRMWARE) + TILE_EVENTS, TILE_RESULT_EVENT, WAKE_SLEEP_MIN_FIRMWARE, SETTING_ENTITIES_MIN_FIRMWARE, + DARK_MODE_MIN_FIRMWARE) NAME = 'esp-screens' # claude.ai accepts at most 200 characters; Claude Code picks the skill by this sentence. @@ -263,6 +264,7 @@ Every screen has these entities in Home Assistant, on its ESPHome device. `_normal_brightness` | Brightness while in use, 5 to 100 %. | | `number._standby_brightness` | Brightness in standby, 0 to 100 %, at most the normal brightness. | | `number._night_brightness` | Brightness in standby during the night hours, 0 to 100 %. | +| `switch._dark_mode` | On: the dark look, a black page with graphite cards and soft white text, for a screen beside a bed or in a dark room. Off: the light look. Firmware {DARK_MODE_MIN_FIRMWARE} or newer. | | `switch._night_mode` | Night mode: the night brightness between the two times below. Firmware {SETTING_ENTITIES_MIN_FIRMWARE} or newer, like every row below it. | | `time._night_starts`, `time._night_ends` | The night hours; set them with `time.set_value`. | | `switch._24_hour_clock` | On: 24-hour clock. Off: 12-hour clock. | @@ -342,11 +344,36 @@ actions: Replace the person, light, window and screen with the real entity IDs (ask which screens when there are several), and leave out conditions the user did not ask for. +Dark mode follows the same pattern: switch it on and off from an automation, for example at bedtime and in the morning, or with the sun. It changes the colours only, never the tiles or the brightness; lower the brightness with the numbers above. + +```yaml +alias: Bedroom screen dark at night +triggers: + - trigger: time + at: "21:30:00" + id: night + - trigger: time + at: "07:00:00" + id: day +actions: + - if: + - condition: trigger + id: night + then: + - action: switch.turn_on + target: + entity_id: switch.bedroom_screen_dark_mode + else: + - action: switch.turn_off + target: + entity_id: switch.bedroom_screen_dark_mode +``` + ## The settings page on the screen itself Firmware {SETTINGS_PAGE_MIN_FIRMWARE} or newer carries a settings page the user can open at the panel: hold the top bar (the strip with the screen's name and the clock) for about a second and a half, until the blue line along the top edge is full. A screen can also carry a tile for it: put the entity `screen.settings` on a screen like any other tile. -It holds Brightness, Night, Screen (clock, going back to page 1, swiping, rotation) and This screen (name, address, firmware, whether Home Assistant is connected, and Restart). A change there is saved on the screen and shows up in ESP Screens within a second, exactly like a change made from Home Assistant. +It holds Brightness (with Dark mode), Night, Screen (clock, going back to page 1, swiping, rotation) and This screen (name, address, firmware, whether Home Assistant is connected, and Restart). A change there is saved on the screen and shows up in ESP Screens within a second, exactly like a change made from Home Assistant. You can open it for someone who is standing at the panel: diff --git a/screen_manager/app/core.py b/screen_manager/app/core.py index f19c988..26cc9af 100644 --- a/screen_manager/app/core.py +++ b/screen_manager/app/core.py @@ -17,7 +17,7 @@ WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] REPO = 'https://github.com/MaxGramser/homeassistant_espscreen' REFS = {'cyd': 'main', 'guition': 'main'} # Firmware shipped with this app release; screens below it get an update offer. -FIRMWARE_VERSION = '0.2.53' +FIRMWARE_VERSION = '0.2.54' # The Auto standby switch a screen offers Home Assistant automations. AUTO_STANDBY_MIN_FIRMWARE = '0.2.41' # The settings page the screen opens itself, and the screen.settings tile that opens it. @@ -26,6 +26,8 @@ SETTINGS_PAGE_MIN_FIRMWARE = '0.2.44' WAKE_SLEEP_MIN_FIRMWARE = '0.2.45' # Every screen setting as an entity of the screen, which owns them (see SETTING_ENTITIES). SETTING_ENTITIES_MIN_FIRMWARE = '0.2.49' +# Dark mode: the screen's dark look, a setting and entity of its own (components/smart_display/theme.h). +DARK_MODE_MIN_FIRMWARE = '0.2.54' ATTRS = frozenset('brightness percentage current_position current_tilt_position current_temperature temperature current_humidity min_temp max_temp target_temp_step supported_color_modes hvac_modes hvac_action hs_color color_temp_kelvin min_color_temp_kelvin max_color_temp_kelvin fan_speed_list unit_of_measurement battery_level fan_speed volume_level is_volume_muted media_title options min max step temperature_unit supported_features device_class next_rising next_setting finishes_at duration remaining humidity wind_speed wind_speed_unit apparent_temperature fan_modes swing_modes fan_mode swing_mode'.split()) # Attributes whose boolean value the screen needs; every other bool stays behind. BOOL_ATTRS = frozenset(['is_volume_muted']) @@ -175,12 +177,15 @@ SETTING_RULES = { # after this many seconds without a touch. Older firmware ignores both keys. 'auto_home': (True, None, None), 'auto_home_seconds': (120, 30, 3600), + # The dark look for a screen beside a bed (firmware 0.2.54+). Only a screen that owns its settings has it: it + # never travels in the layout message. + 'dark_mode': (False, None, None), } # Firmware before 0.2.44 accepts a `settings` object with exactly its own eleven keys and refuses any # other size, so everything added after it travels as its own key in the layout message. Old firmware # ignores a key it does not know; a new screen with an old add-on keeps what it saved itself. # docs/SETTINGS.md walks through adding one. -SETTINGS_BESIDE_BLOCK = ('swipe_pages', 'rotation', 'auto_home', 'auto_home_seconds') +SETTINGS_BESIDE_BLOCK = ('swipe_pages', 'rotation', 'auto_home', 'auto_home_seconds', 'dark_mode') # ----- The screen owns its settings (firmware 0.2.49+) ----- # A screen offers every setting as an entity of its own device, and the settings page on the screen, Home @@ -204,6 +209,7 @@ SETTING_ENTITIES = { 'home_on_standby': ('switch', 'Back to page 1 on standby'), 'swipe_pages': ('switch', 'Swipe between pages'), 'rotation': ('select', 'Rotation'), + 'dark_mode': ('switch', 'Dark mode'), } # Entities firmware 0.2.49 added; one of them on a device means the screen owns its settings. The first five # existed before, so they cannot tell. diff --git a/screen_manager/app/server.py b/screen_manager/app/server.py index ff732a2..509a567 100644 --- a/screen_manager/app/server.py +++ b/screen_manager/app/server.py @@ -557,6 +557,8 @@ class Manager: values = validate_settings({}) if (self.firmware_version(inbox, screen) or (0, 0, 0)) < (0, 2, 44): keys = [key for key in keys if key not in ('auto_home', 'auto_home_seconds')] + # Dark mode came after the screens took over their settings: firmware that gets them with the layout lacks it. + keys = [key for key in keys if key != 'dark_mode'] return {'owner': 'layout', 'values': values, 'keys': keys, 'unavailable': []} # Only the settings this screen has an entity for: one added in later firmware stays out of the panel. keys = [key for key in keys if key in entities] diff --git a/screen_manager/app/static/app.js b/screen_manager/app/static/app.js index b819b3b..6ef112f 100644 --- a/screen_manager/app/static/app.js +++ b/screen_manager/app/static/app.js @@ -92,6 +92,7 @@ function select(id) { const SETTING_GROUPS = [ { title: "Brightness", icon: "F0599", rows: [ { key: "brightness", label: "Brightness", kind: "number", min: 5, max: 100, step: 5, unit: "%" }, + { key: "dark_mode", label: "Dark mode", kind: "toggle" }, { key: "standby_enabled", label: "Auto standby", kind: "toggle" }, { key: "standby_seconds", label: "Standby after", kind: "duration", min: 60, max: 86400, needs: "standby_enabled" }, { key: "standby_brightness", label: "Standby brightness", kind: "number", min: 0, max: 100, step: 5, unit: "%", needs: "standby_enabled", cap: "brightness" }, diff --git a/screen_manager/config.yaml b/screen_manager/config.yaml index 0a1be11..3151abb 100644 --- a/screen_manager/config.yaml +++ b/screen_manager/config.yaml @@ -1,5 +1,5 @@ name: ESP Screen Manager -version: "0.2.62" +version: "0.2.63" slug: esp_screen_manager description: Choose tiles for your CYD and Guition touchscreen, without reflashing. url: https://github.com/MaxGramser/homeassistant_espscreen diff --git a/tests/test_alert_overlay.cpp b/tests/test_alert_overlay.cpp index 0b5e745..4f9f876 100644 --- a/tests/test_alert_overlay.cpp +++ b/tests/test_alert_overlay.cpp @@ -1,3 +1,4 @@ +#define THEME_TEST #include "components/smart_display/alert_overlay.h" #include #include @@ -12,11 +13,13 @@ int main() { // Unknown names, a codepoint the fonts lack and junk draw the warning triangle. for (const char *icon : {"", "unknown", "mdi:", "F0000", "F12E", "\xF0\x9F\x94\x94", "mdi:not-in-the-set"}) assert(screen_alert::icon_codepoint(icon) == 0xF002A); - // Colour: palette names in any case; empty, none and anything unknown keep the white card. + // Colour: palette names in any case; empty, none and anything unknown keep the normal card. assert(make("x", "", "", "Red", "", 0, false, 48, 160, 12).color == 0xFADADD); assert(make("x", "", "", " mint ", "", 0, false, 48, 160, 12).color == 0xD5F0EA); for (const char *color : {"", "none", "auto", "#ff0000", "0xFF0000"}) - assert(make("x", "", "", color, "", 0, false, 48, 160, 12).color == 0xFFFFFF); + assert(make("x", "", "", color, "", 0, false, 48, 160, 12).color == screen_alert::DEFAULT_CARD_COLOR); + // The normal card is no colour of its own: the look draws it (theme::surface(0)). + assert(screen_alert::DEFAULT_CARD_COLOR == 0); // Timeout: 0 and negatives wait for OK; a day is the ceiling. assert(make("x", "", "", "", "", 0, false, 48, 160, 12).timeout_seconds == 0); assert(make("x", "", "", "", "", -5, false, 48, 160, 12).timeout_seconds == 0); diff --git a/tests/test_alerts_reference.py b/tests/test_alerts_reference.py index b362081..7a6653b 100644 --- a/tests/test_alerts_reference.py +++ b/tests/test_alerts_reference.py @@ -34,10 +34,10 @@ class ReferenceTests(unittest.TestCase): def test_colours_icons_and_fallback_match_the_firmware_headers(self): reference = alert_reference() - palette = (ROOT / 'components/smart_display/tile_palette.h').read_text() - self.assertEqual([c['name'] for c in reference['colors']], re.findall(r'if\(name=="(\w+)"\)return 0x', palette)) + palette = (ROOT / 'components/smart_display/theme.h').read_text() + self.assertEqual([c['name'] for c in reference['colors']], re.findall(r'\{"(\w+)", 0x[0-9A-F]{6}, 0x[0-9A-F]{6}\}', palette)) for colour in reference['colors']: - self.assertIn(f'if(name=="{colour["name"]}")return 0x{colour["color"][1:]};', palette) + self.assertRegex(palette, rf'\{{"{colour["name"]}", 0x{colour["color"][1:]}, 0x[0-9A-F]{{6}}\}}') self.assertEqual(colour['label'], TILE_BACKGROUNDS[colour['name']]['label']) header = (ROOT / 'components/smart_display/alert_overlay.h').read_text() self.assertIn(f'FALLBACK_ICON = "{reference["fallback_icon"]}"', header) diff --git a/tests/test_claude_skill.py b/tests/test_claude_skill.py index 390b7a2..bd42b01 100644 --- a/tests/test_claude_skill.py +++ b/tests/test_claude_skill.py @@ -13,7 +13,7 @@ import claude_skill # noqa: E402 import tile_icons # noqa: E402 from core import (ALERT_EVENT, ALERT_FIELDS, ALERT_LIMITS, ALERT_MIN_FIRMWARE, AUTO_STANDBY_MIN_FIRMWARE, BROADCAST_DISMISS, # noqa: E402 BROADCAST_SHOW, CONTROLS, DISPLAYS, TILE_BACKGROUNDS, TILE_EVENTS, TILE_RESULT_EVENT, - WAKE_SLEEP_MIN_FIRMWARE) + WAKE_SLEEP_MIN_FIRMWARE, DARK_MODE_MIN_FIRMWARE) HAS_YAML = importlib.util.find_spec('yaml') is not None HAS_AIOHTTP = importlib.util.find_spec('aiohttp') is not None @@ -56,6 +56,9 @@ class SkillText(unittest.TestCase): for entity in ('button._wake', 'button._sleep'): self.assertIn(f'`{entity}`', standby) self.assertIn(f'Firmware {WAKE_SLEEP_MIN_FIRMWARE} or newer', standby) + # Dark mode (0.2.63): the switch and the firmware that has it. + self.assertIn('`switch._dark_mode`', standby) + self.assertIn(f'Firmware {DARK_MODE_MIN_FIRMWARE} or newer', standby) self.assertIn('`button.press`', standby) self.assertIn('(#standby-and-brightness)', text, 'the intro links to the section') # Tiles (0.2.51): the events, what a tile can do per domain, how to read a screen and the rule to ask first. @@ -78,7 +81,7 @@ class SkillText(unittest.TestCase): def test_every_yaml_example_parses(self): import yaml blocks = re.findall(r'```yaml\n(.*?)```', claude_skill.text(), re.S) - self.assertEqual(len(blocks), 9) + self.assertEqual(len(blocks), 10) parsed = [yaml.safe_load(block) for block in blocks] # Tiles first (0.2.51): putting one on a screen, and ordering a page. self.assertEqual(parsed[0]['actions'][0]['event'], 'esp_screens_add_tile') @@ -112,6 +115,14 @@ class SkillText(unittest.TestCase): watched = set(awake['triggers'][0]['entity_id']) conditions = {branch['if'][0]['entity_id']} | {c['entity_id'] for c in branch['if'][1]['conditions']} self.assertEqual(watched, conditions, 'the automation reacts to every entity its condition reads') + # Dark mode at night (0.2.63): one automation that turns the switch on at one time and off at the other. + night = parsed[8] + self.assertEqual({trigger['id'] for trigger in night['triggers']}, {'night', 'day'}) + branch = night['actions'][0] + self.assertEqual((branch['if'][0]['condition'], branch['if'][0]['id']), ('trigger', 'night')) + self.assertEqual((branch['then'][0]['action'], branch['else'][0]['action']), ('switch.turn_on', 'switch.turn_off')) + for step in (branch['then'][0], branch['else'][0]): + self.assertTrue(step['target']['entity_id'].endswith('_dark_mode')) class Archive(unittest.TestCase): diff --git a/tests/test_off_look.py b/tests/test_off_look.py index 99a65b1..a3854da 100644 --- a/tests/test_off_look.py +++ b/tests/test_off_look.py @@ -13,6 +13,7 @@ import header_bar # noqa: E402 import tile_icons # noqa: E402 TILES = (ROOT / 'components/smart_display/runtime_tiles.h').read_text() +THEME = (ROOT / 'components/smart_display/theme.h').read_text() class OffLook(unittest.TestCase): @@ -23,7 +24,9 @@ class OffLook(unittest.TestCase): def test_the_screen_crosses_out_its_own_bulb_and_greys_what_is_off(self): self.assertIn('if (d == "light" && tile.state == "off") return "\\U000F0E4F";', TILES) - self.assertIn('(t.is_switch()||d=="light"||d=="binary_sensor"||d=="person"||d=="timer") && !on ? 0x9E9E9E : accent', TILES) + self.assertIn('(t.is_switch()||d=="light"||d=="binary_sensor"||d=="person"||d=="timer") && !on ? theme::STATE_OFF : accent', TILES) + self.assertIn('constexpr uint32_t STATE_OFF = ha::GREY;', THEME) + self.assertIn('constexpr uint32_t GREY = 0x9E9E9E;', THEME) def test_the_top_bar_does_the_same(self): light = lambda state, **attrs: {'state': state, 'attributes': attrs} diff --git a/tests/test_screen_owned_settings.py b/tests/test_screen_owned_settings.py index 19c5f90..a39a740 100644 --- a/tests/test_screen_owned_settings.py +++ b/tests/test_screen_owned_settings.py @@ -47,11 +47,12 @@ ENTITY_IDS = { 'clock_24h': 'switch.office_1_24_hour_clock', 'auto_home': 'switch.office_1_back_to_page_1', 'auto_home_seconds': 'number.office_1_back_to_page_1_after', 'home_on_standby': 'switch.office_1_back_to_page_1_on_standby', 'swipe_pages': 'switch.office_1_swipe_between_pages', 'rotation': 'select.office_1_rotation', + 'dark_mode': 'switch.office_1_dark_mode', } STATES = {'brightness': '80.0', 'standby_enabled': 'on', 'standby_seconds': '600.0', 'standby_brightness': '20.0', 'night_enabled': 'on', 'night_start': '22:30:00', 'night_end': '07:00:00', 'night_brightness': '5.0', 'clock_24h': 'on', 'auto_home': 'on', 'auto_home_seconds': '120.0', 'home_on_standby': 'off', - 'swipe_pages': 'on', 'rotation': '90°'} + 'swipe_pages': 'on', 'rotation': '90°', 'dark_mode': 'off'} def top_block(text, key): @@ -296,6 +297,34 @@ class OlderFirmware(unittest.IsolatedAsyncioTestCase): self.assertEqual([message['op'] for message, _ in m.ha.messages], ['layout'], 'the tiles are not sent again') self.assertEqual(m.ha.messages[0][0]['settings']['standby_seconds'], 1800) + async def test_dark_mode_needs_a_screen_that_owns_its_settings(self): + # Firmware that gets its settings with the layout has no dark look: no row, no key on the wire, no change. + with tempfile.TemporaryDirectory() as tmp: + m = Manager(fake_ha(firmware='0.2.48', owned=False), Path(tmp) / 'screens.json') + m.save('text.screen', {'title': 'Office 1', 'tiles': [{'entity': 'light.a', 'name': ''}], + 'settings': validate_settings({'dark_mode': True})}) + screen = m.screen('text.screen') + self.assertNotIn('dark_mode', m.settings_view(screen)['keys']) + message = m.layout_message('text.screen', m.layouts['text.screen'], screen) + self.assertNotIn('dark_mode', message) + self.assertNotIn('dark_mode', message['settings'], 'never inside the frozen eleven-key block') + self.assertEqual(len(message['settings']), 11) + with self.assertRaises(ValueError): + await m.change_settings('text.screen', {'dark_mode': True}) + # Firmware 0.2.49-0.2.53 owns its settings but lacks the switch: left out, not unknown. + with tempfile.TemporaryDirectory() as tmp: + m = Manager(fake_ha(firmware='0.2.53'), Path(tmp) / 'screens.json') + m.ha.registry = [item for item in m.ha.registry if item['entity_id'] != ENTITY_IDS['dark_mode']] + view = m.settings_view(m.screen('text.screen')) + self.assertNotIn('dark_mode', view['keys'] + view['unavailable']) + # Firmware 0.2.54: the switch of the screen itself. + with tempfile.TemporaryDirectory() as tmp: + m = Manager(fake_ha(), Path(tmp) / 'screens.json') + m.save('text.screen', {'title': 'Office 1', 'tiles': [{'entity': 'light.a', 'name': ''}]}) + self.assertFalse(m.settings_view(m.screen('text.screen'))['values']['dark_mode']) + await m.change_settings('text.screen', {'dark_mode': True}) + self.assertEqual(m.ha.calls, [('switch.turn_on', {'entity_id': ENTITY_IDS['dark_mode']})]) + async def test_back_to_page_1_needs_firmware_0_2_44(self): with tempfile.TemporaryDirectory() as tmp: m = Manager(fake_ha(firmware='0.2.43', owned=False, guition=False), Path(tmp) / 'screens.json') diff --git a/tests/test_settings_screen.cpp b/tests/test_settings_screen.cpp index ff6a1c5..8dea277 100644 --- a/tests/test_settings_screen.cpp +++ b/tests/test_settings_screen.cpp @@ -43,6 +43,11 @@ int main() { assert(moment_text(1320, false) == "10:00 PM" && moment_text(0, false) == "12:00 AM"); assert(moment_text(750, false) == "12:30 PM" && moment_text(60, false) == "1:00 AM"); + // ---- a switch's knob: inset at the left when off, flush with the same inset at the right when on ---- + // The Guition switch is 62 by 34 (a 28 px knob), the CYD one 40 by 22 (an 18 px knob). + assert(knob_x(62, 34, false) == 3 && knob_x(62, 34, true) == 31 && 31 + 28 + 3 == 62); + assert(knob_x(40, 22, false) == 2 && knob_x(40, 22, true) == 20 && 20 + 18 + 2 == 40); + // ---- rows read and write the real settings ---- screen_settings::current = screen_settings::Settings{}; const Page &light = pages[1]; @@ -58,6 +63,14 @@ int main() { standby.write(90); assert(screen_settings::current.standby_brightness == 30); // never above the normal brightness assert(screen_settings::current.valid()); + // Dark mode (firmware 0.2.54+) sits right under Brightness, a switch of its own outside the frozen block. + assert(light.count == 5 && light.rows[1].kind == Kind::toggle && std::string(light.rows[1].label) == "Dark mode"); + const Row &dark = row_named(light, "Dark mode"); + assert(value_text(dark) == "Off"); + dark.write(1); + assert(dark_mode == 1 && value_text(dark) == "On"); + dark.write(0); + assert(dark_mode == 0 && value_text(dark) == "Off"); const Page &screen = pages[3]; const Row &clock = row_named(screen, "Clock"); @@ -138,6 +151,7 @@ int main() { {"night_start", -5, 0}, {"night_end", 2000, 1439}, {"night_brightness", 7, 7}, {"clock_24h", 0, 0}, {"home_on_standby", 1, 1}, {"swipe_pages", 2, 1}, {"rotation", 100, 90}, {"rotation", 400, 270}, {"auto_home", 0, 0}, {"auto_home_seconds", 5, 30}, {"auto_home_seconds", 99999, 3600}, + {"dark_mode", 7, 1}, }; for (const auto &c : cases) { result = set(c.key, c.value); @@ -146,8 +160,15 @@ int main() { } assert(screen_settings::current.standby_seconds == 86400 && screen_settings::current.brightness == 100); assert(screen_settings::current.night_start == 0 && screen_settings::current.night_end == 1439); - assert(swipe_pages == 1 && rotation == 270 && auto_home == 0 && auto_home_seconds == 3600); + assert(swipe_pages == 1 && rotation == 270 && auto_home == 0 && auto_home_seconds == 3600 && dark_mode == 1); assert(screen_settings::current.valid()); + // Dark mode again is the same look: nothing stored, applied or reported; off is a change. + { + const int stored_before = stored, applied_before = applied; + assert(set("dark_mode", 1) == SetResult::same && stored == stored_before && applied == applied_before); + assert(set("dark_mode", 0) == SetResult::changed && last_key == "dark_mode" && last_value == 0 && dark_mode == 0); + set("dark_mode", 1); + } // A lower brightness pulls both dim levels down, and reports the brightness itself. set("standby_brightness", 60); set("night_brightness", 50); diff --git a/tests/test_theme.cpp b/tests/test_theme.cpp new file mode 100644 index 0000000..a69b030 --- /dev/null +++ b/tests/test_theme.cpp @@ -0,0 +1,118 @@ +// The colour table (firmware 0.2.54): the light look stays the design it was, the dark look reads well beside a bed. +// clang++ -std=c++17 -Wall -Wextra -Werror -I. tests/test_theme.cpp -o /tmp/test_theme && /tmp/test_theme +#define THEME_TEST +#include "components/smart_display/theme.h" +#include +#include +#include + +using namespace theme; + +static double channel(uint32_t value) { + const double c = value / 255.0; + return c <= 0.04045 ? c / 12.92 : std::pow((c + 0.055) / 1.055, 2.4); +} +static double luminance(uint32_t color) { + return 0.2126 * channel(color >> 16 & 0xFF) + 0.7152 * channel(color >> 8 & 0xFF) + 0.0722 * channel(color & 0xFF); +} +// WCAG contrast ratio of two colours. +static double contrast(uint32_t a, uint32_t b) { + double la = luminance(a), lb = luminance(b); + if (la < lb) std::swap(la, lb); + return (la + 0.05) / (lb + 0.05); +} +static int channel_gap(uint32_t a, uint32_t b) { + int gap = 0; + for (int shift = 0; shift <= 16; shift += 8) gap = std::max(gap, std::abs(int(a >> shift & 0xFF) - int(b >> shift & 0xFF))); + return gap; +} +static void look(bool on) { dark = on; } + +int main() { + // ---- the light look is the design as it was + assert(ROLES[PAGE].light == 0xE7E7E7 && ROLES[CARD].light == 0xFFFFFF && ROLES[LINE].light == 0xDDDDDD); + assert(ROLES[INK].light == 0x1B1B1B && ROLES[MUTED].light == 0x616161 && ROLES[SLATE].light == 0x46525E); + assert(ROLES[ACCENT].light == 0x009FE3 && ROLES[OFF].light == ha::GREY && ROLES[KNOB].light == 0xFFFFFF); + look(false); + assert(hex(PAGE) == 0xE7E7E7 && hex(INK) == 0x1B1B1B); + + // ---- mixing is LVGL's own: the ends are the two colours, the middle rounds down + assert(mix(0x123456, 0xABCDEF, 255) == 0x123456 && mix(0x123456, 0xABCDEF, 0) == 0xABCDEF); + assert(mix(0xFFFFFF, 0x000000, 128) == 0x808080); + // The old tile circle (the state colour at 38 over white) and icon (at 205 over #333333) are exactly what tint() and + // icon() give in the light look. + for (uint32_t accent : {ha::AMBER, ha::TEAL, ha::INDIGO, ha::DEEP_ORANGE, ha::GREY}) { + assert(tint(accent, 38) == mix(accent, 0xFFFFFF, 38)); + assert(icon(accent) == mix(accent, 0x333333, 205)); + assert(state(accent) == accent && foreground(accent) == accent); + } + // The halos and cover tracks that were written out by hand before are the same colours within two steps. + assert(channel_gap(tint(ha::TEAL, 36), 0xDCF0EE) <= 2 && channel_gap(tint(ha::BLUE, 36), 0xE1EFFD) <= 2); + assert(channel_gap(tint(ha::ORANGE, 36), 0xFFF0DA) <= 2 && channel_gap(tint(ha::RED, 36), 0xFDE4E2) <= 2); + assert(channel_gap(tint(ha::SKY, 22), 0xEAF5FC) <= 2); + assert(channel_gap(tint(ha::PURPLE, 37), 0xEFE8F7) <= 2 && channel_gap(tint(ha::PURPLE, 80), 0xDDD0EF) <= 2); + assert(fill_opacity() == 51); + + // ---- named card colours: identity in light, deep in dark, the normal card for none or an unknown colour + assert(SWATCH_COUNT == 9 && swatch("red") == 0xFADADD && swatch("gray") == 0xE5E7EB && swatch("none") == 0 && swatch("") == 0); + assert(surface(0) == 0xFFFFFF && surface(0xFADADD) == 0xFADADD && surface(0x123456) == 0x123456); + assert(outline(0) == 0xDDDDDD && outline(0xFADADD) == mix(0xFADADD, 0x000000, 220)); + assert(key_on(0xFFFFFF, 236) == mix(0xFFFFFF, 0x000000, 236)); + + // ---- the dark look + look(true); + assert(hex(PAGE) == 0x000000); + assert(surface(0) == ROLES[CARD].dark && surface(0x123456) == ROLES[CARD].dark); + for (const auto &s : SWATCHES) { + assert(surface(s.light) == s.dark); + // Light words read on every dark card colour, the slate of a value too. + assert(contrast(ROLES[INK].dark, s.dark) >= 7.0); + assert(contrast(ROLES[SLATE].dark, s.dark) >= 4.5); + assert(contrast(ROLES[INK].light, s.light) >= 7.0); + } + // Text reads in both looks: names and values, secondary and quiet words, the top bar on the page. + for (bool on : {false, true}) { + look(on); + assert(contrast(hex(INK), hex(CARD)) >= 7.0 && contrast(hex(INK), hex(PAGE)) >= 7.0); + assert(contrast(hex(MUTED), hex(CARD)) >= 4.5 && contrast(hex(SUBTLE), hex(CARD)) >= 4.5); + assert(contrast(hex(SLATE), hex(PAGE)) >= 4.5 && contrast(hex(INK_SOFT), hex(RAISED)) >= 4.5); + assert(contrast(hex(INK), hex(RAISED)) >= 7.0 && contrast(hex(INK), hex(TRACK)) >= 7.0); + assert(contrast(hex(ON_ACCENT), hex(BUTTON_DARK)) >= 4.5); + } + // The blue keys keep at least the contrast they always had (white on #009FE3, just under 3:1). + look(false); + const double blue_light = contrast(hex(ON_ACCENT), hex(ACCENT)); + look(true); + assert(blue_light > 2.9 && contrast(hex(ON_ACCENT), hex(ACCENT)) >= blue_light); + look(true); + // Surfaces step up from the black page, a raised card and a key under a finger stand out. + assert(lightness(hex(PAGE)) < lightness(hex(CARD)) && lightness(hex(CARD)) < lightness(hex(LINE))); + assert(lightness(hex(CARD)) < lightness(hex(RAISED)) && lightness(hex(KEY)) < lightness(hex(KEY_PRESSED))); + assert(lightness(hex(CARD)) < 40 && lightness(hex(INK)) > 200); + // Dark greys land on the same step of red, green and blue on the panel (RGB565), so they stay grey. + for (int role = 0; role < ROLE_COUNT; ++role) { + const uint32_t c = ROLES[role].dark; + const uint32_t r = c >> 16 & 0xFF, g = c >> 8 & 0xFF, b = c & 0xFF; + if (r == g && g == b && r > 0 && r < 0xFF) assert((r >> 3) * 2 == (g >> 2)); + } + + // ---- Home Assistant's colours in the dark look + assert(state(ha::GREY) == ROLES[OFF].dark && state(0xCFCFCF) == ROLES[HISTORY_OFF].dark && state(0xE6E6E6) == ROLES[HISTORY_EMPTY].dark); + assert(state(ha::AMBER) == ha::AMBER && state(ha::TEAL) == ha::TEAL); + // Bright state colours stay themselves; the deep ones are lifted until they read on graphite. + assert(foreground(ha::AMBER) == ha::AMBER && foreground(ha::LIGHT_BLUE) == ha::LIGHT_BLUE); + for (uint32_t deep : {ha::INDIGO, ha::DEEP_PURPLE, uint32_t{0}}) { + assert(lightness(foreground(deep)) > lightness(deep)); + assert(contrast(foreground(deep), hex(CARD)) >= 3.0); + } + // A circle stays dark and tinted, its icon light; a slider track stays dark. + for (uint32_t accent : {ha::AMBER, ha::TEAL, ha::INDIGO, ha::GREY, ha::DEEP_ORANGE}) { + assert(lightness(tint(accent, 38)) < 110 && lightness(tint(accent, 51)) < 120); + assert(contrast(icon(accent), tint(accent, 38)) >= 3.0); + } + // Keys in a card are lighter than the card, its hairline too. + assert(lightness(key_on(hex(CARD), 236)) > lightness(hex(CARD))); + assert(lightness(outline(0xFADADD)) > lightness(surface(0xFADADD))); + assert(fill_opacity() < 51); + return 0; +} diff --git a/tests/test_theme.py b/tests/test_theme.py new file mode 100644 index 0000000..6fa3951 --- /dev/null +++ b/tests/test_theme.py @@ -0,0 +1,162 @@ +"""Colours live in one place, and Dark mode reaches every screen (app 0.2.63 / firmware 0.2.54). + +components/smart_display/theme.h holds every colour the firmware chooses: roles with a light and a dark value, the named +card colours and Home Assistant's state colours. The board profiles name paints (shared LVGL styles theme.h fills) and +the firmware asks theme.h for roles, so a new look is a refill of a few styles plus one redraw. These tests keep it that +way: no colour written anywhere else, every paint defined and filled, and the look applied at boot and after +every settings change. tests/test_theme.cpp checks the values themselves. +""" +import re +import sys +import unittest +from pathlib import Path + +ROOT = Path(__file__).resolve().parents[1] +sys.path.insert(0, str(ROOT / 'screen_manager/app')) +from core import DARK_MODE_MIN_FIRMWARE, FIRMWARE_VERSION, SETTING_ENTITIES, SETTING_RULES, SETTINGS_BESIDE_BLOCK # noqa: E402 + +COMPONENT = ROOT / 'components/smart_display' +THEME = (COMPONENT / 'theme.h').read_text() +PROFILES = [ROOT / 'home-like-2432s028.yaml', ROOT / 'guition-4848s040.yaml', ROOT / 'packages/cyd.yaml', ROOT / 'packages/guition.yaml'] +HEX = re.compile(r'0x[0-9A-Fa-f]{6}\b') +# What may still carry a number that looks like a colour: the light's colour picker shows the colours a light can take, +# a mask and a codepoint check are no colours, and the value card's colour key is a wheel of fixed hues. +ALLOWED_IN_FIRMWARE = { + 'light_controls.h': ('constexpr uint32_t WARM = 0xFF9C32, COOL = 0xC6E6FF;', + 'inline constexpr uint32_t RAINBOW[] = {0xFF0000, 0xFFFF00, 0x00FF00, 0x00FFFF, 0x0000FF, 0xFF00FF, 0xFF0000};'), + 'tile_icon.h': ('if (cp < 0x10000 || cp > 0x10FFFF) return {};',), + 'runtime_tiles.h': ('state_color=lv_color_to_u32(lv_color_hsv_to_rgb(t.hue%360,t.saturation,100))&0xFFFFFF;',), +} +COLOUR_WHEEL = {'0xFF3B30', '0xFF9500', '0xFFD60A', '0x30D158', '0x32D6FF', '0x0A84FF', '0x5856D6', '0xBF5AF2'} + + +def paint_names(): + block = re.search(r'enum class Paint : uint8_t \{(.*?)\};', THEME, re.S)[1] + return [name.strip() for name in block.replace('\n', ' ').split(',') if name.strip() and name.strip() != 'COUNT'] + + +class OnePlace(unittest.TestCase): + def test_no_header_writes_a_colour_of_its_own(self): + for path in sorted(COMPONENT.glob('*.h')): + if path.name == 'theme.h': + continue + for number, line in enumerate(path.read_text().splitlines(), 1): + if HEX.search(line): + self.assertIn(line.strip(), ALLOWED_IN_FIRMWARE.get(path.name, ()), f'{path.name}:{number}: a colour outside theme.h') + + def test_no_profile_writes_a_colour_of_its_own(self): + for path in PROFILES: + text = path.read_text() + wheel = re.findall(r'^\s+arc_color: (0x[0-9A-F]{6})$', text, re.M) + self.assertEqual(set(wheel), COLOUR_WHEEL, path.name) + everything = HEX.findall(text) + self.assertEqual(sorted(everything), sorted(wheel), f'{path.name}: only the colour wheel keeps fixed hues') + self.assertNotIn('BG_TOP_COLOR', text) + self.assertNotIn('ACCENT_AUTO', text) + self.assertNotRegex(text, r'^\s+(bg|text|border|bg_grad|line|outline|shadow)_color:', path.name) + + def test_every_role_has_a_light_and_a_dark_value(self): + roles = re.search(r'enum Role : uint8_t \{(.*?)ROLE_COUNT', THEME, re.S)[1] + names = re.findall(r'^\s+([A-Z_]+),', roles, re.M) + values = re.findall(r'/\* (\w+) \*/\s+\{0x([0-9A-F]{6}), 0x([0-9A-F]{6})\}', THEME) + self.assertEqual(names, [name for name, _, _ in values], 'the table follows the enum, one row per role') + self.assertGreater(len(names), 40) + + +class Paints(unittest.TestCase): + def test_every_paint_is_defined_adopted_and_used_in_every_profile(self): + paints = paint_names() + for path in PROFILES: + text = path.read_text() + defined = re.findall(r'^ - id: (paint_\w+)$', text, re.M) + used = set(re.findall(r'styles: (paint_\w+)$', text, re.M)) + filling = text.split('theme::paints = []() {', 1)[1].split('\n };', 1)[0] + explicit = re.findall(r'theme::fill\(id\((\w+)\), Paint::(\w+)\);', filling) + listed = re.search(r'for \(auto \*style : \{([^}]*)\}\) theme::fill\(style, Paint::(\w+)\);', filling) + looped = [(name, listed[2]) for name in re.findall(r'id\((\w+)\)', listed[1])] + adopted = dict(explicit + looped) + self.assertEqual(len(adopted), len(explicit) + len(looped), f'{path.name}: every style is filled once') + self.assertEqual(text.count('theme::fill('), len(explicit) + 1, f'{path.name}: styles are filled in theme::paints only') + self.assertEqual(set(defined), used, f'{path.name}: every paint style is used, every used one defined') + for style in defined + ['style_page', 'style_tile', 'style_icon_circle', 'style_room', 'style_time', 'style_title', + 'style_value', 'style_value_big']: + self.assertIn(style, adopted, f'{path.name}: {style} takes its colours from theme.h') + self.assertIn(adopted[style], paints, f'{path.name}: {style}') + for style, paint in adopted.items(): + if style.startswith('paint_'): + self.assertEqual(style, f'paint_{paint}', f'{path.name}: a paint style is named after its paint') + # The styles that carry colours have none written down. + styles = re.search(r'^ style_definitions:\n(.*?)^ # ---------- ALERT', text, re.M | re.S)[1] + self.assertNotRegex(styles, r'_color:', path.name) + + def test_the_look_is_applied_at_boot_after_a_change_and_drawn_again(self): + for path in PROFILES: + text = path.read_text() + boot = text.split('runtime_tiles::load_settings();', 1)[1].split('runtime_tiles::settings_changed', 1)[0] + self.assertIn('theme::paints();\n theme::set_dark(settings_screen::dark_mode != 0);', boot, + f'{path.name}: the paints filled, then the saved look, before the first frame') + apply = text.split(' - id: apply_screen_settings\n', 1)[1].split('\n - id: ', 1)[0] + self.assertIn('theme::set_dark(settings_screen::dark_mode != 0);', apply, f'{path.name}: a change of the setting') + redraw = text.split('theme::redraw = []() {', 1)[1].split('};', 1)[0] + for needle in ('runtime_tiles::restyle();', 'light_controls::restyle();', 'settings_screen::restyle();', + 'theme::surface(id(alert_card_color))', 'id(climate_card_refresh).execute();', + 'id(open_climate_mode_picker).execute();'): + self.assertIn(needle, redraw, f'{path.name}: {needle}') + self.assertIn('id(alert_card_color) = alert.color;', text) + self.assertIn('lv_color_hex(theme::surface(alert.color))', text) + + def test_the_firmware_draws_long_lived_parts_with_paints(self): + tiles = (COMPONENT / 'runtime_tiles.h').read_text() + for needle in ('lv_obj_add_style(w.slider,theme::style(theme::Paint::knob),LV_PART_KNOB);', + 'lv_obj_add_style(w.busy,theme::style(theme::Paint::veil),0);', + 'lv_obj_add_style(w.spinner,theme::style(theme::Paint::spinner),LV_PART_MAIN);', + 'lv_obj_add_style(part, theme::style(theme::Paint::slate), 0);', + 'inline void restyle() {'): + self.assertIn(needle, tiles) + # Dark mode is kept in a preference of its own, next to the others outside the frozen settings block. + self.assertIn('make_preference(0x44524B31)', tiles) + self.assertIn('inline void restyle() {', (COMPONENT / 'settings_screen.h').read_text()) + self.assertIn('inline void restyle() {', (COMPONENT / 'light_controls.h').read_text()) + + +class RedrawnTheSame(unittest.TestCase): + """A change of look draws again what was drawn, and the renders compare a screen that switched with one that + booted in that look. Two differences they found were older than Dark mode: what a page showed depended on the + order it was drawn in.""" + + def test_a_switch_knob_follows_the_size_it_was_given(self): + page = (COMPONENT / 'settings_screen.h').read_text() + move = page.split('inline void move_knob(', 1)[1].split('\n}\n', 1)[0] + # draw() ends in refresh() before LVGL has laid the new rows out, when coordinates still read 0. + self.assertNotIn('lv_obj_get_width', move) + self.assertNotIn('lv_obj_get_height', move) + self.assertIn('knob_x(lv_obj_get_style_width(track, LV_PART_MAIN), lv_obj_get_style_height(track, LV_PART_MAIN), on)', move) + pill = page.split('inline lv_obj_t *pill(', 1)[1].split('\n}\n', 1)[0] + self.assertIn('plain(track, knob_x(w, h, on), inset, size, size)', pill) + + def test_the_sun_path_keeps_its_own_fill_after_a_palette_change(self): + tiles = (COMPONENT / 'runtime_tiles.h').read_text() + self.assertIn('w.fill_color=lv_color_hex(theme::ha::SUNNY);', tiles) + self.assertIn('if(w.extra_mode!="sunpath")w.fill_color=color;', tiles) + self.assertEqual(len(re.findall(r'\bw\.fill_color=', tiles)), 2, 'the sun path and the palette are the only two') + + +class Setting(unittest.TestCase): + def test_dark_mode_is_a_setting_the_screen_owns(self): + self.assertEqual(SETTING_RULES['dark_mode'], (False, None, None)) + self.assertIn('dark_mode', SETTINGS_BESIDE_BLOCK, 'never inside the eleven-key block older firmware insists on') + self.assertEqual(SETTING_ENTITIES['dark_mode'], ('switch', 'Dark mode')) + self.assertEqual(DARK_MODE_MIN_FIRMWARE, '0.2.54') + self.assertLessEqual(tuple(map(int, DARK_MODE_MIN_FIRMWARE.split('.'))), tuple(map(int, FIRMWARE_VERSION.split('.')))) + page = (COMPONENT / 'settings_screen.h').read_text() + self.assertIn('toggle("Dark mode", []() -> int32_t { return dark_mode; },', page) + self.assertIn('else if (key == "dark_mode") reported = dark_mode = flag(value);', page) + editor = (ROOT / 'screen_manager/app/static/app.js').read_text() + self.assertIn('{ key: "dark_mode", label: "Dark mode", kind: "toggle" },', editor) + brightness = editor.split('{ title: "Brightness"', 1)[1].split('] },', 1)[0] + self.assertLess(brightness.index('"brightness"'), brightness.index('"dark_mode"'), 'right under Brightness, as on the screen') + self.assertLess(brightness.index('"dark_mode"'), brightness.index('"standby_enabled"')) + + +if __name__ == '__main__': + unittest.main() diff --git a/tests/test_tile_controls.cpp b/tests/test_tile_controls.cpp index 56559ff..b6b4444 100644 --- a/tests/test_tile_controls.cpp +++ b/tests/test_tile_controls.cpp @@ -1,4 +1,5 @@ // c++ -std=c++17 -Wall -Wextra -pedantic tests/test_tile_controls.cpp -o /tmp/test_tile_controls && /tmp/test_tile_controls +#define THEME_TEST #include "../components/smart_display/tile_controls.h" #include #include diff --git a/tests/test_tile_palette.cpp b/tests/test_tile_palette.cpp index bfc1ead..4dd8b1b 100644 --- a/tests/test_tile_palette.cpp +++ b/tests/test_tile_palette.cpp @@ -1,10 +1,11 @@ +#define THEME_TEST #include "components/smart_display/tile_palette.h" #include int main() { assert(tile_palette::color("auto")==0); assert(tile_palette::color("")==0); assert(tile_palette::color("unknown-future-choice")==0); - assert(tile_palette::color("red")!=0); + assert(tile_palette::color("red")==0xFADADD); assert(tile_palette::color("green")!=tile_palette::color("red")); // "None" is not a colour: the card is hidden, and old firmware falls back to automatic. assert(tile_palette::color("none")==0); diff --git a/tests/test_tile_palette.py b/tests/test_tile_palette.py index 470949f..a89722c 100644 --- a/tests/test_tile_palette.py +++ b/tests/test_tile_palette.py @@ -12,8 +12,9 @@ def luminance(color): class PaletteTests(unittest.IsolatedAsyncioTestCase): def test_palette_matches_firmware_and_has_readable_text(self): - header=(Path(__file__).resolve().parents[1]/'components/smart_display/tile_palette.h').read_text() - native=dict(re.findall(r'name=="(\w+)"\)return 0x([A-F0-9]+)',header)) + # The named card colours live in theme.h (firmware 0.2.54+): name, light value, dark value. + header=(Path(__file__).resolve().parents[1]/'components/smart_display/theme.h').read_text() + native={name:light for name,light,_ in re.findall(r'\{"(\w+)", 0x([A-F0-9]{6}), 0x([A-F0-9]{6})\}',header)} expected={k:v['color'][1:] for k,v in TILE_BACKGROUNDS.items() if v['color']} self.assertEqual(native,expected) for color in expected.values():