Max Gramser
bdb1f12c55
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>
2.6 KiB
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_Xin 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 +.txwith name and value) as a row, like the screen. A watch card has.head.topwith the big value under it; the small slider sits under the row.app.css:.tile .headis 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 withscrollHeightagainstclientHeightin 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 test47/47 (one new),npm run checkclean,npm run build; Pythonunittest discover -s tests409 OK. -
No firmware change, so no ESPHome build and no C++ tests;
FIRMWARE_VERSIONstays 0.2.63. -
Still for Max: open a CYD in the editor after updating the app and look at the tiles.