Xandrossian/homeassistant_espscreen
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw a tile on the editor's mockup the way the screen does: the CYD shows the whole tile again (0.2.76)

Browse Source 
Both boards draw a normal tile with the icon on the left and the name and value beside it;
the Vue editor stacked icon, name and value in one column. On a CYD mockup a tile is 47 px
high and that stack needed 58 px (63 for a watch card), so the value line was cut in half and
a big value hid the name. A single tile is now a row (.head: icon + .tx), a watch card puts
the name row on top and the number under it, and the small slider runs underneath; on a CYD
a tile with a slider uses the screen's 4 px padding and 8 px slider. The Guition mockup
follows the screen the same way.

App 0.2.76, firmware stays 0.2.63. Test results in docs/TEST_RESULTS_0276.md.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Max Gramser
2026-09-18 09:56:01 +02:00
parent 261fa82c7d
commit bdb1f12c55
10 changed files with 94 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/TEST_RESULTS_0276.md
+43
View File
@@ -0,0 +1,43 @@
# Test results app 0.2.76 / firmware 0.2.63 (2026-09-18)
Max sent a screenshot of a CYD page in the editor ("het gaat over CYD in de EDITOR die niet 100% goed eruit
ziet"): on every single tile the second line (*7,2 W*, *26,0 °C*, *Cleaning*, *Off*) was cut in half at the bottom
edge. See CHANGELOG 0.2.76. Built on 0.2.75 (`261fa82`).
## What happened before
- Both boards draw a normal tile the same way (`runtime_tiles.h`, `TILE_TITLE_X`/`TILE_VALUE_X` in both profiles):
the icon in its circle on the left, the name and the value beside it, vertically centred. A small slider runs
under that row; a watch card has the icon and the name on top and the big value below.
- The Vue editor (`TileCard.vue`, since 0.2.73) stacked the icon, the name and the value in one column. On a CYD
mockup (292 × 219 px, the screen at 0.91) a tile is 47 px high; the stack needed 58 px, a watch card 63 px, and
`.tile { overflow: hidden }` cut off the rest. The Guition's 73 px tiles had room, so it only showed on the CYD.
- The wide tiles already had the screen's row layout and were fine.
## What changed
- `TileCard.vue`: a single tile draws `.head` (icon + `.tx` with name and value) as a row, like the screen. A watch
card has `.head.top` with the big value under it; the small slider sits under the row.
- `app.css`: `.tile .head` is the row, `.tile .tx` (was only for wide tiles) is the name/value column. On a CYD a
tile with a small slider uses the screen's own numbers: 4 px padding above and below, an 8 px slider.
- `web/tests/components.spec.ts`: a test for the three shapes (plain, watch, small slider).
## Checks
- Demo home (`.esphome/readme-render/demo_home.py`) with the editor on Vite, kitchen screen (CYD): every tile
measured with `scrollHeight` against `clientHeight` in the browser.
| Tile | 0.2.75 needs / has | 0.2.76 needs / has |
| --- | --- | --- |
| Pasta · Active | 58 / 47 px | 47 / 47 px |
| Coffee machine · On | 58 / 47 px | 47 / 47 px |
| Kitchen lamp · On | 58 / 47 px | 47 / 47 px |
| Power · 1249 W (watch) | 63 / 47 px | 47 / 47 px |
| Sam · Home | 58 / 47 px | 47 / 47 px |
| Kitchen lamp with a small slider (added in the DOM) | not measured | 47 / 47 px |
- Living room screen (Guition): all 8 tiles fit; the single tiles now show the icon left as on the screen's render
(`docs/images/guition-home.png`).
- `npm test` 47/47 (one new), `npm run check` clean, `npm run build`; Python `unittest discover -s tests` 409 OK.
- No firmware change, so no ESPHome build and no C++ tests; `FIRMWARE_VERSION` stays 0.2.63.
- Still for Max: open a CYD in the editor after updating the app and look at the tiles.