Show the screens and ESP Screens in the README; firmware 0.2.35 to test updates (0.2.41)

- README: photos of a Guition at home, both boards with demo layouts, a card gallery, the alert with the Alerts cheatsheet, New screen and choosing tiles, tile settings next to the resulting tile, and the top bar sheet. Screen images are rendered from the firmware's own LVGL code (ESPHome host + SDL) fed by the app's own messages on a demo home. - App store page (screen_manager/README.md): a photo and the editor via absolute URLs. - Firmware 0.2.35 only raises SCREEN_FIRMWARE_VERSION so the update path can be tested. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-15 08:08:38 +02:00
parent 3e959b3df9
commit 8f52b6cb2d
32 changed files with 144 additions and 6 deletions
@@ -7,6 +7,15 @@ No blueprint, MQTT, or long-lived token needed for normal use.
 **New screen? Follow the [complete installation guide](docs/EASY_SETUP.md).**
 For every new user and every new device, you create your own profile.

+<p align="center">
+  <img src="docs/images/photo-guition-page-2.jpg" width="49%" alt="The Guition 4-inch screen on a table: the second page with scenes and scripts, the robot vacuum and a table lamp with a brightness slider">
+  <img src="docs/images/photo-guition-vacuum.jpg" width="49%" alt="The vacuum card on the Guition: start cleaning, return to dock, find my robot and the suction power">
+</p>
+<p align="center">
+  <img src="docs/images/editor.png" width="98%" alt="ESP Screens in Home Assistant: the screens on the left, the top bar and tiles of the selected screen on the right">
+</p>
+<p align="center"><sub>A Guition ESP32-S3-4848S040 at home, and the ESP Screens page in Home Assistant with a demo home.</sub></p>
+
 ## Supported screens

 | Screen | Resolution | Display / touch |
@@ -18,6 +27,18 @@ Use these exact board variants: similar-looking product names can have different
 controllers or connectors. Wallbox relays are not controlled.
 The firmware and built-in CLI are tested with **ESPHome 2026.6.2**.

+<p align="center">
+  <img src="docs/images/guition-home.png" width="32%" alt="Guition 4-inch screen: an analog clock with the date, a temperature graph, the weather forecast, a lamp and presence">
+  <img src="docs/images/guition-controls.png" width="32%" alt="Double-width tiles with direct control: the heating setpoint, a dimmer and the Sonos volume">
+  <img src="docs/images/guition-page-4.png" width="32%" alt="An energy graph, the robot vacuum, a coffee machine, a fan and a good-night script with pastel backgrounds">
+</p>
+<p align="center">
+  <img src="docs/images/cyd-home.png" width="32%" alt="CYD 2.8-inch screen: the weather forecast, a kitchen timer, the coffee machine, a lamp and power usage as a large value">
+  <img src="docs/images/cyd-page-2.png" width="32%" alt="Second CYD page: Sonos volume, presence, a scene and an energy graph">
+  <img src="docs/images/cyd-weather.png" width="32%" alt="The weather card on the CYD: current weather, the coming hours and the coming days">
+</p>
+<p align="center"><sub>Guition 4-inch, 480 × 480 (top) and CYD 2.8-inch, 320 × 240 (bottom), rendered from the firmware's own LVGL code with a demo home.</sub></p>
+
 ## What you can configure

 - **Up to twenty tiles**, spread across up to four fixed pages of six
@@ -72,6 +93,17 @@ The firmware and built-in CLI are tested with **ESPHome 2026.6.2**.
 - **Inspector:** check entities, status, and configuration in ESP Screens.
  Action feedback shows that a command is on its way.

+<p align="center">
+  <img src="docs/images/guition-weather.png" width="32%" alt="Weather card: current weather, the coming hours and the coming days with chance of rain">
+  <img src="docs/images/guition-climate.png" width="32%" alt="Climate card: target temperature dial, current temperature and humidity, and the mode">
+  <img src="docs/images/guition-light.png" width="32%" alt="Light control: color, color temperature and brightness">
+</p>
+<p align="center">
+  <img src="docs/images/guition-vacuum.png" width="32%" alt="Vacuum card: status, battery, start, return to dock, find the robot and suction power">
+  <img src="docs/images/guition-history.png" width="32%" alt="Sensor history of the last 24 hours">
+  <img src="docs/images/guition-page-3.png" width="32%" alt="Curtains with open, stop and close, a kitchen timer counting down, a scene and the sun path">
+</p>
+
 Features depend on the capabilities Home Assistant reports for an entity.
 The app must keep running to keep the screens supplied with current data.

@@ -83,6 +115,11 @@ icon; on the CYD, the icon and text block are vertically centered.

 ## Alert from an automation

+<p align="center">
+  <img src="docs/images/guition-alert.png" width="41%" alt="An alert on the Guition: someone is at the door, with a Coming button">
+  <img src="docs/images/editor-alerts.png" width="53%" alt="The Alerts cheatsheet in ESP Screens: the action name of every screen, ready to copy">
+</p>
+
 Every screen has the action **`esphome.<screen>_show_alert`** (firmware 0.2.31+). It places
 a card over the entire screen, wakes the screen, and keeps the backlight at normal
 brightness until someone taps **OK**. In an automation:
@@ -169,6 +206,12 @@ For Home Assistant OS with Apps/Add-ons on **aarch64 or amd64**:
 5. Select the screen in ESP Screens, choose your tiles, and click
   **Save & send to screen**. Then test the physical controls.

+<p align="center">
+  <img src="docs/images/editor-new-screen.png" width="37%" alt="New screen in ESP Screens: choose the board, give it a name, pick the USB port and install">
+  <img src="docs/images/editor-tiles.png" width="59%" alt="Choosing tiles: every page in the screen preview, next to the entity picker with filters">
+</p>
+<p align="center"><sub>New screen (step 3) and choosing your tiles (step 5).</sub></p>
+
 You can install new firmware later from **Firmware & USB → Wi-Fi / OTA**.
 For an existing screen, always use the existing profile; creating a new
 installation profile generates new keys.
@@ -180,6 +223,12 @@ such as red or green. Optionally adjust the name, click action, mini-slider, or
 value. Click **Save & send to screen** to apply the changes.
 After the first supporting firmware update, this requires no new flash.

+<p align="center">
+  <img src="docs/images/editor-tile-settings.png" width="36%" alt="Tile settings: name, icon, display, width, direct control, tap action and pastel background">
+  <img src="docs/images/guition-controls.png" width="60%" alt="The result on the screen: a double-width Heating tile with temperature − and +">
+</p>
+<p align="center"><sub>The settings of the Heating tile, and that tile on the screen: double-width with temperature − / +.</sub></p>
+
 A color is a fixed choice for that tile: it stays red, for example,
 even when you run the all-off script. The entity status and action feedback
 stay separately visible.
@@ -204,6 +253,11 @@ to change their order; tap one to configure it:
  washing machine. Active items are colored like in Home Assistant (open door amber,
  alarm armed green, alarm triggered red).

+<p align="center">
+  <img src="docs/images/editor-top-bar.png" width="31%" alt="Add to the top bar: the time, an analog clock, the date and suggestions from your own home">
+  <img src="docs/images/guition-home.png" width="49%" alt="The top bar on the screen: outdoor temperature, people at home and the time">
+</p>
+
 The screen preview draws the bar with the same letters and rules as the screen:
 all values on one line with the name, icons aligned to digit height, equal spacing.
 If not everything fits next to the name, the name gets an ellipsis and the screen drops the
@@ -176,6 +176,14 @@ 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.41 / firmware 0.2.35
+
+Storage version and tile protocol stay 1. Firmware 0.2.35 only raises
+`SCREEN_FIRMWARE_VERSION`, so the owner can test the update path from 0.2.34: no new
+entities, names, preferences or keys. App 0.2.41 changes the README, the App store
+description (`screen_manager/README.md`, images through absolute `raw.githubusercontent.com`
+URLs because the App store does not resolve relative paths) and `FIRMWARE_VERSION`.
+
 ### Compatibility 0.2.40 / firmware 0.2.34

 Storage version and tile protocol stay 1; no new message fields, preferences or keys.
@@ -0,0 +1,63 @@
+# Test results app 0.2.41 / firmware 0.2.35 (2026-09-15)
+
+Screenshots in the README and on the App store page, and firmware 0.2.35 so the owner can
+test an update from the app. See CHANGELOG 0.2.41 and RELEASING "Compatibility 0.2.41".
+
+## What changed
+
+- `README.md`: the owner's two photos of a Guition at home and the ESP Screens page at the
+  top; both boards under **Supported screens**; a card gallery under **What you can
+  configure**; the alert next to the Alerts cheatsheet; New screen and choosing tiles under
+  **Step by step**; the Heating tile's settings next to that tile on the screen; the top bar
+  sheet next to the top bar. 21 images in `docs/images/` (2.4 MB). The photos carry no
+  location or camera metadata (EXIF holds only the image size).
+- `screen_manager/README.md` (the App store page): a photo and the editor through absolute
+  `raw.githubusercontent.com` URLs, since the App store does not resolve relative paths.
+- Firmware 0.2.35: only `SCREEN_FIRMWARE_VERSION` in both profiles, packages regenerated,
+  `core.FIRMWARE_VERSION`.
+
+## How the images were made
+
+- **Screens:** each board's generated package (`packages/guition.yaml`, `packages/cyd.yaml`)
+  became an ESPHome host project with SDL display and touch at the panel's native size.
+  The CYD stays 240 × 320 and LVGL's 90° rotation makes it landscape, like the real screen.
+  The project also got template outputs for the backlight and LED, host time
+  (Europe/Amsterdam) and a stand-in for the LEDC backlight fader. What the screen draws is the
+  package's own LVGL tree, fonts and `runtime_tiles`. The firmware's own `screen_message` and
+  `preview_runtime_card` actions fed it the messages and opened the detail cards;
+  host-only actions switched pages and saved `lv_snapshot_take` of the screen with the top
+  layer composited, so the alert card is included. Time fixed at Tuesday 15 September 2026, 10:08.
+- **Messages:** the app's own code (`server.Manager`, `core`, `header_bar`) on a demo home
+  with made-up English entities, no data from a real home: a Guition with 17 tiles on 4 pages
+  and a CYD with 9 tiles on 2 pages.
+- **ESP Screens page:** that demo app in headless Chrome (DevTools protocol, device scale 2,
+  the same frozen time). For the capture session only, the page's CSP was bypassed to swap
+  the dialog backdrop blur for a flat color.
+- Post-processing: rounded corners on the screen renders, crops of the editor captures.
+
+## Automated
+
+- Python (`.venv-portal`): 139 tests OK.
+- C++ (clang++ -std=c++17 -Wall -Wextra -Werror -I.): 13/13 PASS.
+- `generate_packages.py --check` green; `node --check app.js` clean.
+- ESPHome 2026.6.2 compile SUCCESS, one after another: `easy-guition-device.yaml` (RAM 32.5%,
+  flash 18.6%), `easy-cyd-device.yaml` (RAM 31.5%, flash 77.3%), manual `guition-device.yaml`
+  (RAM 32.6%, flash 19.7%) and `device.yaml` (RAM 31.5%, flash 82.1%); `main.cpp` of both
+  builds carries 0.2.35. Not uploaded: both bench boards stay on 0.2.34 so the owner can
+  test the update.
+- Profiles written by `core.installation_yaml` for both boards (remote package from `main`,
+  `refresh: 0s`) pass `esphome config` in an empty folder: package, external components and
+  fonts all download from GitHub.
+
+## README check
+
+- Rendered through GitHub's markdown API (`POST /markdown`, gfm, repository context) inside
+  GitHub's markdown CSS and captured at 1280 px and 400 px: all 23 image references load.
+  Every row stays on one line, with matched heights where a sheet sits next to a render.
+  Nothing overflows at phone width.
+
+## Not tested / for the owner
+
+- The update from 0.2.34 to 0.2.35 through the app (**Update** or the nightly round).
+- How Home Assistant's App store draws the images on the app page (not opened in the
+  Home Assistant frontend).
@@ -1,7 +1,7 @@
 # Guition ESP32-S3-4848S040 / 4-inch EU wallbox, 480x480 IPS + GT911.
 # Use guition-device.yaml; see docs/GUITION.md. CYD hardware is a separate profile.
 substitutions:
-  SCREEN_FIRMWARE_VERSION: "0.2.34"
+  SCREEN_FIRMWARE_VERSION: "0.2.35"
  # 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"
@@ -57,7 +57,7 @@
 ############################################################

 substitutions:
-  SCREEN_FIRMWARE_VERSION: "0.2.34"
+  SCREEN_FIRMWARE_VERSION: "0.2.35"
  # 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.
@@ -58,7 +58,7 @@
 ############################################################

 substitutions:
-  SCREEN_FIRMWARE_VERSION: "0.2.34"
+  SCREEN_FIRMWARE_VERSION: "0.2.35"
  # 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.
@@ -2,7 +2,7 @@
 # Guition ESP32-S3-4848S040 / 4-inch EU wallbox, 480x480 IPS + GT911.
 # Use guition-device.yaml; see docs/GUITION.md. CYD hardware is a separate profile.
 substitutions:
-  SCREEN_FIRMWARE_VERSION: "0.2.34"
+  SCREEN_FIRMWARE_VERSION: "0.2.35"
  # 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"
@@ -1,3 +1,10 @@
+## 0.2.41 (firmware 0.2.35)
+
+See ESP Screens before you install it. What the screens show and what you can set stay the same.
+
+- **Screenshots in the README.** Photos of a Guition at home, both boards with demo layouts (pages, direct controls, the weather, climate, light and vacuum cards, sensor history, an alert) and the ESP Screens page itself: the tiles, tile settings, top bar, Alerts cheatsheet and New screen. The screen images are rendered from the firmware's own LVGL code on a demo home, so they match what the screens draw. The app's page in the App store shows a photo and the editor too.
+- Firmware 0.2.35 for both boards, so you can try an update from the app. It only changes the version number.
+
 ## 0.2.40 (firmware 0.2.34)

 ESP Screens is now in English: the screens, the management page, the Home Assistant entities and the documentation.
@@ -4,5 +4,11 @@ Find your Home Assistant entities, arrange up to twenty tiles, and push changes
 to a CYD or Guition screen without reflashing. Includes installation help,
 a unique per-device YAML, and support for multiple screens.

+<p align="center">
+  <img src="https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/docs/images/photo-guition-page-2.jpg" width="47%" alt="A Guition 4-inch screen with tiles from Home Assistant">
+  <img src="https://raw.githubusercontent.com/MaxGramser/homeassistant_espscreen/main/docs/images/editor.png" width="51%" alt="ESP Screen Manager in Home Assistant: the screens, the top bar and the tiles of the selected screen">
+</p>
+
 Open the web interface after installation. See **Documentation** for the first flash.
 The app uses Home Assistant Ingress and needs no login or token of its own.
+More screenshots are in the [project README](https://github.com/MaxGramser/homeassistant_espscreen#readme).
@@ -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.34'
+FIRMWARE_VERSION = '0.2.35'
 ATTRS = frozenset('brightness percentage current_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'])
@@ -1,5 +1,5 @@
 name: ESP Screen Manager
-version: "0.2.40"
+version: "0.2.41"
 slug: esp_screen_manager
 description: Choose tiles for your CYD and Guition touchscreen, without reflashing.
 url: https://github.com/MaxGramser/homeassistant_espscreen