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
web/src/components/TileCard.vue
+11 -7
View File
@@ -154,14 +154,18 @@ async function onKey(e: KeyboardEvent) {
</span>
</template>
<template v-else>
<span class="ic mdi" :class="{ lit: isOn }">{{ glyph(tileIconCp(tile)) }}</span>
<span class="lead">
<span v-if="display === 'watch'" class="big">{{ bigValue }}<small v-if="unit && !gone">{{ unit }}</small></span>
<span class="nm">{{ name }}</span>
<span v-if="goesTo" class="goto">Page {{ goesTo }} ›</span>
<span v-else-if="display !== 'watch' && status" class="st" :class="{ off: gone }">{{ status }}</span>
<span v-if="tile.options?.inline === 'slider'" class="mini-slider" :style="sliderStyle"></span>
<!-- As the screen draws it: the icon on the left, the name and the value beside it. A watch
card puts the name on top and the big value under it; the small slider runs underneath. -->
<span class="head" :class="{ top: display === 'watch' }">
<span class="ic mdi" :class="{ lit: isOn }">{{ glyph(tileIconCp(tile)) }}</span>
<span class="tx">
<span class="nm">{{ name }}</span>
<span v-if="goesTo" class="goto">Page {{ goesTo }} ›</span>
<span v-else-if="display !== 'watch' && status" class="st" :class="{ off: gone }">{{ status }}</span>
</span>
</span>
<span v-if="display === 'watch'" class="big">{{ bigValue }}<small v-if="unit && !gone">{{ unit }}</small></span>
<span v-if="tile.options?.inline === 'slider'" class="mini-slider" :style="sliderStyle"></span>
</template>
<button v-if="live" type="button" class="remove" title="Remove tile" :aria-label="`Remove ${name}`" @click.stop="removeTile(tile)">✕</button>
</div>