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

Let every screen choose its top bar: clocks, date and entities (0.2.38)

Browse Source 
The name stays on the left; up to six items go on the right: the time, an
analog clock, the date, or a Home Assistant entity with its icon, showing its
state or how long ago it changed, always or only while active. The add-on
formats entity text in Dutch and sends it as op: header right after the layout
to firmware 0.2.32+; older firmware keeps the clock of show_clock, which now
follows the clock item.

The firmware draws every value in one font on the name's baseline, centres
icons and the dial on the digit height and measures gaps between glyph ink, so
the bar looks even; the editor's mockup uses Roboto and the same integer rules.
tools/render_topbar.py renders the real LVGL code on a computer (ESPHome host +
SDL2). The editor's section buttons are gone.

Firmware 0.2.32 for both boards.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Max Gramser
2026-09-14 18:38:49 +02:00
parent ae308e37ab
commit 3f6889f750
25 changed files with 2365 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
screen_manager/app/static/index.html
+25 -13
View File
@@ -85,19 +85,30 @@
</div>
<span id="delivery" class="badge"></span>
</div>
<label
>Naam bovenaan het scherm<input
id="title"
maxlength="60"
placeholder="Bijvoorbeeld: Woonkamer"
/></label>
<nav class="editor-nav" aria-label="Scherm beheren">
<button id="nav-tiles" class="quiet">Tegels instellen</button>
<button id="nav-settings" class="quiet">
Algemene instellingen
</button>
<button id="nav-inspector" class="quiet">Inspector</button>
</nav>
<section class="topbar-editor" id="topbar" aria-labelledby="topbar-title">
<div class="section-title">
<h3 id="topbar-title">Bovenbalk</h3>
<span id="topbar-count"></span>
</div>
<div class="topbar-fields">
<label class="topbar-name"
>Links: naam<input
id="title"
maxlength="60"
placeholder="Bijvoorbeeld: Woonkamer"
/></label>
<div class="topbar-right">
<span class="topbar-caption" id="topbar-caption">Rechts: tijd, sensoren of een klok</span>
<div
id="topbar-chips"
class="topbar-chips"
role="list"
aria-labelledby="topbar-caption"
></div>
</div>
</div>
<p class="hint" id="topbar-hint"></p>
</section>
<div class="columns" id="tile-section">
<div class="tile-editor">
<div class="section-title">
@@ -311,6 +322,7 @@
<pre id="firmware-log"></pre>
</dialog>
<dialog id="tile-sheet" class="tile-sheet" aria-label="Tegel instellen"></dialog>
<dialog id="topbar-sheet" class="tile-sheet" aria-label="Bovenbalk"></dialog>
<dialog id="alerts-dialog" class="alerts" aria-label="Alerts">
<div class="dialog-head">
<div>