Max Gramser
3f6889f750
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>
480 lines
20 KiB
HTML
480 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="nl">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>ESP Screens</title>
|
||
<link rel="stylesheet" href="static/style.css" />
|
||
<script src="static/app.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="brand">
|
||
<span class="mark">▦</span>
|
||
<div>
|
||
<strong>ESP Screens</strong
|
||
><small>Tegels voor je CYD en Guition, zonder opnieuw flashen</small>
|
||
</div>
|
||
</div>
|
||
<nav class="toolbar" aria-label="Acties">
|
||
<button id="new-screen" class="tool tool-primary">
|
||
<span class="tool-icon" aria-hidden="true">＋</span>
|
||
<span class="tool-text"
|
||
><b>Nieuw scherm</b><small>Aansluiten en installeren</small></span
|
||
>
|
||
</button>
|
||
<button id="open-firmware" class="tool">
|
||
<span class="tool-icon" aria-hidden="true">⇪</span>
|
||
<span class="tool-text"
|
||
><b>Firmware & USB</b
|
||
><small>Bouwen en installeren via USB of wifi</small></span
|
||
>
|
||
</button>
|
||
<button id="open-alerts" class="tool">
|
||
<span class="tool-icon" aria-hidden="true">!</span>
|
||
<span class="tool-text"
|
||
><b>Alerts</b
|
||
><small>Meldingen over het hele scherm, vanuit een automatisering</small></span
|
||
>
|
||
</button>
|
||
</nav>
|
||
</header>
|
||
<main>
|
||
<div class="intro">
|
||
<div>
|
||
<p class="eyebrow">HOME ASSISTANT</p>
|
||
<h1>Beheer je remote screens hier.</h1>
|
||
</div>
|
||
<span id="connection" role="status" class="badge">Verbinden…</span>
|
||
</div>
|
||
<div class="workspace">
|
||
<aside>
|
||
<h2>Mijn schermen</h2>
|
||
<div id="screens"></div>
|
||
<div id="pending"></div>
|
||
<button class="quiet" id="refresh">↻ Vernieuwen</button>
|
||
<div class="updates" id="updates" hidden>
|
||
<h2>Firmware-updates</h2>
|
||
<p class="hint" id="updates-hint"></p>
|
||
<button id="update-all" hidden>Alle schermen bijwerken</button>
|
||
<label class="check">
|
||
<input type="checkbox" id="auto-update" />
|
||
<span
|
||
>Elke nacht automatisch bijwerken<small
|
||
>Tussen 03:00 en 06:00, één scherm tegelijk. Stopt bij een
|
||
fout en meldt dat in Home Assistant.</small
|
||
></span
|
||
>
|
||
</label>
|
||
</div>
|
||
</aside>
|
||
<section id="empty" class="empty">
|
||
<span class="empty-icon">▦</span>
|
||
<h2>Begin met een scherm</h2>
|
||
<p>
|
||
Sluit een CYD of Guition via USB aan op je Home Assistant-machine.
|
||
Profiel, firmware en de eerste flash gebeuren in één venster.
|
||
</p>
|
||
<button id="start">Nieuw scherm installeren</button>
|
||
</section>
|
||
<section id="editor" hidden>
|
||
<div class="editor-head">
|
||
<div>
|
||
<p class="eyebrow" id="screen-name"></p>
|
||
<h2>Maak het jouw scherm</h2>
|
||
</div>
|
||
<span id="delivery" class="badge"></span>
|
||
</div>
|
||
<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">
|
||
<h3>Je tegels</h3>
|
||
<span id="count">0 / 10</span>
|
||
</div>
|
||
<div id="layout-preview" aria-label="Schermindeling"></div>
|
||
<button id="add-page" class="quiet add-page" type="button">
|
||
＋ Pagina toevoegen
|
||
</button>
|
||
<p id="no-tiles" class="hint">
|
||
Voeg je eerste lamp, scène of apparaat toe via de kiezer.
|
||
</p>
|
||
<p id="positions-hint" class="hint" hidden></p>
|
||
</div>
|
||
<div class="picker">
|
||
<label for="search">Voeg een entiteit toe</label
|
||
><input
|
||
id="search"
|
||
type="search"
|
||
placeholder="Zoek op naam, apparaat of ruimte…"
|
||
autocomplete="off"
|
||
/>
|
||
<div class="filters" id="filters"></div>
|
||
<div id="results" aria-live="polite"></div>
|
||
</div>
|
||
</div>
|
||
<details class="screen-settings" id="general-settings" open>
|
||
<summary>
|
||
Scherminstellingen
|
||
<span class="hint">Helderheid, rustmomenten en weergave</span>
|
||
</summary>
|
||
<p class="hint" id="settings-support"></p>
|
||
<div class="settings-grid" id="settings-fields"></div>
|
||
<p class="hint">
|
||
Nachturen gelden voor de helderheid tijdens standby. De eerste
|
||
aanraking maakt het scherm wakker; de volgende bedient je huis.
|
||
Gelijke begin- en eindtijd schakelen het nachtvenster uit.
|
||
</p>
|
||
</details>
|
||
<details class="screen-settings" id="inspector-section">
|
||
<summary>
|
||
Inspector
|
||
<span class="hint"
|
||
>Verbinding, status en ondersteunde eigenschappen</span
|
||
>
|
||
</summary>
|
||
<button id="inspect" class="quiet">Lees actuele gegevens</button>
|
||
<div id="inspection-summary"></div>
|
||
<pre id="inspection">Selecteer een scherm en lees de gegevens.</pre>
|
||
</details>
|
||
<footer class="savebar">
|
||
<div>
|
||
<strong id="dirty">Alles opgeslagen</strong
|
||
><small id="save-detail"
|
||
>Aanpassen kan zonder opnieuw flashen.</small
|
||
>
|
||
</div>
|
||
<button id="save">Opslaan & naar scherm</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
<dialog id="installer">
|
||
<form id="install-form">
|
||
<div class="dialog-head">
|
||
<div>
|
||
<p class="eyebrow">NIEUW SCHERM</p>
|
||
<h2 id="install-title">Aansluiten en installeren.</h2>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="quiet"
|
||
id="close-install"
|
||
aria-label="Sluiten"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
<div id="install-setup">
|
||
<p>
|
||
Sluit het scherm met een USB-datakabel aan op de machine waarop Home
|
||
Assistant draait. ESP Screens maakt een eigen profiel met unieke
|
||
sleutels, bouwt de firmware en zet die direct op het scherm.
|
||
</p>
|
||
<fieldset>
|
||
<legend>Welk scherm heb je?</legend>
|
||
<label class="board"
|
||
><input type="radio" name="board" value="cyd" checked /><span
|
||
><b>CYD · 2,8 inch</b
|
||
><small>ESP32-2432S028 · 320 × 240</small></span
|
||
></label
|
||
><label class="board"
|
||
><input type="radio" name="board" value="guition" /><span
|
||
><b>Guition · 4 inch</b
|
||
><small>ESP32-S3-4848S040 · 480 × 480 · GT911</small></span
|
||
></label
|
||
>
|
||
</fieldset>
|
||
<label
|
||
>Naam<input
|
||
name="friendly_name"
|
||
required
|
||
maxlength="60"
|
||
placeholder="Scherm woonkamer"
|
||
autocomplete="off" /><small class="node-line"
|
||
>Apparaatnaam <code id="node-preview">scherm</code
|
||
><button type="button" class="link" id="edit-node">
|
||
aanpassen
|
||
</button></small
|
||
><small
|
||
>Elk scherm krijgt een eigen profiel met eigen sleutels. Vier
|
||
schermen? Doorloop dit vier keer met een andere naam.</small
|
||
></label
|
||
>
|
||
<label id="node-label" hidden
|
||
>Apparaatnaam<input
|
||
name="name"
|
||
pattern="[a-z][a-z0-9-]{0,29}"
|
||
maxlength="30"
|
||
autocomplete="off" /><small
|
||
>Kleine letters, cijfers en streepjes. Elk scherm een andere
|
||
naam.</small
|
||
></label
|
||
>
|
||
<fieldset id="wifi-fields" class="wifi" hidden disabled>
|
||
<legend>Wifi</legend>
|
||
<p class="hint" id="wifi-status"></p>
|
||
<label id="wifi-ssid-label"
|
||
>Wifi-naam (2,4 GHz)<input name="wifi_ssid" autocomplete="off"
|
||
/></label>
|
||
<label id="wifi-password-label"
|
||
>Wifiwachtwoord<input
|
||
name="wifi_password"
|
||
type="password"
|
||
autocomplete="new-password"
|
||
/></label>
|
||
</fieldset>
|
||
<label
|
||
>Installeren via<select name="target" id="install-target"></select
|
||
><small id="target-hint"></small
|
||
></label>
|
||
<p class="hint" id="install-note"></p>
|
||
<div class="install-actions">
|
||
<button type="submit" id="install-go">Installeren</button>
|
||
<span id="install-status" role="status"></span>
|
||
</div>
|
||
</div>
|
||
<div id="install-progress" hidden>
|
||
<div class="progress-head">
|
||
<span class="spin" id="progress-spin"></span>
|
||
<span class="outcome" id="progress-mark" hidden></span>
|
||
<strong id="progress-title"></strong>
|
||
</div>
|
||
<p id="progress-detail"></p>
|
||
<div id="install-result" hidden>
|
||
<div class="key-box">
|
||
<span>API-sleutel</span><code id="api-key"></code>
|
||
<button type="button" class="mini" id="copy-key">Kopieer</button>
|
||
</div>
|
||
<ol class="steps" id="install-steps"></ol>
|
||
</div>
|
||
<details id="install-log-wrap">
|
||
<summary>Log van ESPHome</summary>
|
||
<pre id="install-log"></pre>
|
||
</details>
|
||
<div class="install-actions">
|
||
<button type="button" id="install-retry" hidden>
|
||
Opnieuw proberen
|
||
</button>
|
||
<button type="button" class="quiet" id="install-close">
|
||
Sluiten
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
<dialog id="firmware-dialog">
|
||
<div class="dialog-head">
|
||
<div>
|
||
<p class="eyebrow">FIRMWARE & USB</p>
|
||
<h2>Schermfirmware bouwen en installeren</h2>
|
||
</div>
|
||
<button id="close-firmware" class="quiet" aria-label="Sluiten">✕</button>
|
||
</div>
|
||
<p>
|
||
De ingebouwde ESPHome CLI gebruikt je eigen profiel (YAML met sleutels)
|
||
en secrets. Kies het profiel van het scherm, dan een USB-poort (scherm
|
||
aan de Home Assistant-machine) of <b>Wifi / OTA</b> met de hostnaam.
|
||
<b>Controleren</b> valideert alleen, <b>Alleen bouwen</b> compileert,
|
||
<b>Bouwen & installeren</b> zet de firmware op het scherm. Je tegels
|
||
blijven in ESP Screens staan. De eerste build duurt enkele minuten.
|
||
</p>
|
||
<label>ESPHome-profiel<select id="firmware-file"></select></label>
|
||
<label
|
||
>Installeren naar<select id="firmware-port">
|
||
<option value="ota">Wifi / OTA</option>
|
||
</select></label
|
||
>
|
||
<label id="firmware-host-label"
|
||
>IP-adres of hostnaam<input
|
||
id="firmware-host"
|
||
placeholder="scherm-woonkamer.local"
|
||
/></label>
|
||
<div class="yaml-actions">
|
||
<button id="firmware-validate" class="quiet">Controleren</button
|
||
><button id="firmware-build" class="quiet">Alleen bouwen</button
|
||
><button id="firmware-install">Bouwen & installeren</button>
|
||
</div>
|
||
<p id="firmware-status" role="status"></p>
|
||
<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>
|
||
<p class="eyebrow">ALERTS · CHEATSHEET</p>
|
||
<h2>Een melding over het hele scherm, vanuit een automatisering.</h2>
|
||
</div>
|
||
<button id="close-alerts" class="quiet" aria-label="Sluiten">✕</button>
|
||
</div>
|
||
<p>
|
||
Elk scherm heeft de actie <code>show_alert</code>. Die legt een kaart over alles
|
||
heen, wekt het scherm en houdt de backlight op de normale helderheid tot iemand op
|
||
de knop tikt of de timeout verstrijkt. Home Assistant toont bij ESPHome-acties
|
||
zelf geen uitleg of keuzelijsten; alles wat je kunt invullen staat hier.
|
||
</p>
|
||
<div class="alert-hero">
|
||
<div class="alert-mock" id="alert-mock" aria-hidden="true">
|
||
<div class="alert-mock-card">
|
||
<span class="mdi alert-mock-icon" id="alert-mock-icon"></span>
|
||
<strong id="alert-mock-title">Iemand belt aan</strong>
|
||
<span id="alert-mock-subtitle">Deur 3, achterkant</span>
|
||
<button type="button" id="alert-mock-button" tabindex="-1">Ik kom</button>
|
||
</div>
|
||
</div>
|
||
<nav class="alerts-nav" aria-label="Onderdelen">
|
||
<button type="button" data-jump="alerts-screens">Jouw schermen</button>
|
||
<button type="button" data-jump="alerts-howto">In een automatisering</button>
|
||
<button type="button" data-jump="alerts-fields">De velden</button>
|
||
<button type="button" data-jump="alerts-icons">Iconen</button>
|
||
<button type="button" data-jump="alerts-colors">Kleuren</button>
|
||
<button type="button" data-jump="alerts-behaviour">Gedrag</button>
|
||
<button type="button" data-jump="alerts-events">Events</button>
|
||
<button type="button" data-jump="alerts-tips">Tips</button>
|
||
</nav>
|
||
</div>
|
||
<section id="alerts-screens">
|
||
<h3>Jouw schermen</h3>
|
||
<p>
|
||
Elke scherm heeft zijn eigen actie, met de apparaatnaam erin. Vanaf firmware
|
||
<code id="alerts-min-firmware">0.2.31</code>; een ouder scherm werk je bij onder
|
||
Firmware-updates.
|
||
</p>
|
||
<div id="alerts-screen-list"></div>
|
||
</section>
|
||
<section id="alerts-howto">
|
||
<h3>In een automatisering</h3>
|
||
<ol class="steps">
|
||
<li><b>Actie toevoegen</b> en zoek op <b>ESPHome</b>. Kies de actie van je scherm:
|
||
Home Assistant noemt hem "Performs the action show_alert of the node
|
||
<i>apparaatnaam</i>".</li>
|
||
<li><b>Vul de velden in.</b> Home Assistant vraagt alle zeven; laat wat je niet
|
||
gebruikt leeg (<code>""</code>, <code>0</code>, uit).</li>
|
||
<li>Liever YAML? Kies <b>Bewerken in YAML</b> bij de actie en plak het voorbeeld
|
||
hieronder.</li>
|
||
</ol>
|
||
<div class="alert-example">
|
||
<label
|
||
>Voorbeeld voor<select id="alerts-example-screen"></select
|
||
></label>
|
||
<div class="copy-line">
|
||
<pre id="alerts-example"></pre>
|
||
<button type="button" class="mini" id="alerts-example-copy">Kopieer YAML</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="alerts-fields">
|
||
<h3>De velden</h3>
|
||
<p>
|
||
Teksten zijn vrij; de limiet is in bytes en een letter met accent telt voor twee.
|
||
Wat niet past krijgt puntjes (titel) of valt weg (subtitle).
|
||
</p>
|
||
<div class="table-scroll"><table id="alerts-field-table"></table></div>
|
||
</section>
|
||
<section id="alerts-icons">
|
||
<h3>Iconen</h3>
|
||
<p>
|
||
Vul de naam in bij <code>icon</code>, bijvoorbeeld <code>doorbell</code>.
|
||
<code>mdi:doorbell</code> en de hex-codepoint (<code>F12E6</code>) mogen ook.
|
||
Alleen deze iconen zitten in de firmware; een andere naam geeft de
|
||
waarschuwingsdriehoek. Tik op een icoon om de naam te kopiëren.
|
||
</p>
|
||
<p class="alerts-subhead">Handig voor meldingen</p>
|
||
<div class="chips" id="alerts-suggested"></div>
|
||
<label class="alerts-search"
|
||
>Zoek een icoon<input
|
||
id="alerts-icon-search"
|
||
type="search"
|
||
placeholder="Zoek op naam of omschrijving…"
|
||
autocomplete="off"
|
||
/></label>
|
||
<div id="alerts-icon-groups"></div>
|
||
</section>
|
||
<section id="alerts-colors">
|
||
<h3>Kleuren</h3>
|
||
<p>
|
||
Vul de naam in bij <code>color</code>. Dit zijn de pasteltinten van de tegels,
|
||
met donkere tekst. Leeg of onbekend geeft de witte kaart. Tik om te kopiëren.
|
||
</p>
|
||
<div class="swatches" id="alerts-swatches"></div>
|
||
</section>
|
||
<section id="alerts-behaviour">
|
||
<h3>Gedrag</h3>
|
||
<ul class="alerts-list">
|
||
<li><b>Wekken.</b> Een alert maakt een gedimd of donker scherm meteen wakker en
|
||
komt boven elke pagina, elke open lichtkaart en de standby-laag.</li>
|
||
<li><b>Aan tot de knop.</b> Zolang de kaart staat blijft de backlight op de
|
||
normale helderheid. Standby en de nachturen wachten. Na de knop start de gewone
|
||
standby-tijd opnieuw.</li>
|
||
<li><b>Timeout.</b> <code>timeout: 0</code> wacht op de knop, hoe lang ook. Met
|
||
<code>timeout: 60</code> verdwijnt de kaart na een minuut, maar de knop sluit
|
||
hem eerder.</li>
|
||
<li><b>Knipperen.</b> <code>flash: true</code> knippert de backlight vier keer
|
||
bij binnenkomst (ongeveer een seconde) en laat het scherm daarna aan.</li>
|
||
<li><b>Vervangen.</b> Een nieuwe alert vervangt de huidige; er is geen stapel.
|
||
De vervangen alert meldt zich als <code>replaced</code>.</li>
|
||
<li><b>Op afstand sluiten.</b> <code>dismiss_alert</code> haalt de kaart weg,
|
||
bijvoorbeeld als de deur al open is. Zonder alert doet die actie niets.</li>
|
||
<li><b>Tikken naast de kaart</b> doet niets; alleen de knop sluit. Zo drukt een
|
||
wek-tik de alert nooit per ongeluk weg.</li>
|
||
</ul>
|
||
</section>
|
||
<section id="alerts-events">
|
||
<h3>Events</h3>
|
||
<p>
|
||
Elk einde vuurt het event <code id="alerts-event-name">esphome.screen_alert</code>
|
||
met <code>action</code>, <code>title</code>, <code>screen</code> (de apparaatnaam)
|
||
en het <code>device_id</code> dat Home Assistant toevoegt. Te zien onder
|
||
Ontwikkelhulpmiddelen → Events.
|
||
</p>
|
||
<div class="table-scroll"><table id="alerts-ending-table"></table></div>
|
||
<p class="alerts-subhead">Wachten tot iemand op de knop drukt</p>
|
||
<div class="copy-line">
|
||
<pre id="alerts-wait-example"></pre>
|
||
<button type="button" class="mini" id="alerts-wait-copy">Kopieer YAML</button>
|
||
</div>
|
||
</section>
|
||
<section id="alerts-tips">
|
||
<h3>Tips</h3>
|
||
<ul class="alerts-list">
|
||
<li>Gebruik een <b>kleur per soort melding</b>: oranje voor de deur, rood voor
|
||
rook of water, groen voor "klaar". De tekst blijft altijd donker en leesbaar.</li>
|
||
<li>Houd de titel <b>kort</b>; de CYD toont ongeveer veertig tekens op één regel.
|
||
Zet details in de subtitle.</li>
|
||
<li>Een <b>eigen knoptekst</b> maakt de melding een vraag: "Ik kom", "Gezien",
|
||
"Uitzetten". Het event zegt dan wie reageerde.</li>
|
||
<li>Een alert die zichzelf oplost (de deur gaat open, de was is eruit gehaald)
|
||
sluit je in dezelfde automatisering met <code>dismiss_alert</code>.</li>
|
||
<li>Meerdere schermen? Roep de actie van elk scherm aan; ze werken los van
|
||
elkaar en melden zich elk met hun eigen <code>screen</code>.</li>
|
||
</ul>
|
||
</section>
|
||
</dialog>
|
||
<div id="toast" role="status" hidden></div>
|
||
</body>
|
||
</html>
|