Add the Alerts cheatsheet to ESP Screens (0.2.37)

Home Assistant shows an ESPHome device action with bare field names and
types only: no description, no dropdowns. The new Alerts button opens a
reference page instead: per screen the exact action names
(esphome.<node>_show_alert and _dismiss_alert) with copy buttons and
whether the firmware is new enough, a paste-ready YAML example per
screen, every field with explanation, example and the byte limits per
board, all icons with glyph and name (searchable, tap copies), the
colour swatches, the behaviour (timeout, button, flash, standby,
replace), and the esphome.screen_alert event with an automation that
waits for the button.

core.alert_reference() carries the data and tests/test_alerts_reference.py
keeps it equal to what both board profiles, tile_palette.h,
alert_overlay.h and tile_icons.py compile. Screens carry alert_action
and dismiss_action in the inventory. App only; firmware stays 0.2.31.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Max Gramser
2026-09-14 15:08:40 +02:00
parent e37148f9b1
commit ae308e37ab
10 changed files with 637 additions and 6 deletions
+2 -1
View File
@@ -107,7 +107,8 @@ data:
nachtstand wachten zolang de kaart staat.
- **`flash`**: `true` laat de backlight vier keer knipperen bij binnenkomst.
Home Assistant vraagt alle zeven velden; laat een veld leeg (`""`, `0`, `false`) als je het
In ESP Screens opent de knop **Alerts** een cheatsheet met per scherm de exacte actienaam,
een voorbeeld om te plakken, alle velden, iconen en kleuren. Home Assistant vraagt alle zeven velden; laat een veld leeg (`""`, `0`, `false`) als je het
niet gebruikt. Een nieuwe alert vervangt de huidige. Elk einde meldt zich als event
**`esphome.screen_alert`** met `action` (`ok`, `timeout`, `replaced` of `remote`), `title`,
`screen` en het `device_id` dat Home Assistant toevoegt, zodat een automatisering op Oké
+32
View File
@@ -0,0 +1,32 @@
# Testresultaten app 0.2.37 / firmware 0.2.31 (2026-09-14)
Nieuw: de cheatsheet **Alerts** in ESP Screens (knop bovenaan). Home Assistant toont bij
ESPHome-apparaatacties alleen veldnamen en typen, geen uitleg of keuzelijsten; de pagina
vult dat gat. Geen firmwarewijziging.
## Wat veranderde
- `core.py`: `alert_reference()` (velden, limieten per bord, kleuren, aanbevolen en extra
iconen, event en eindes) en `alert_service(node, action)` voor de actienaam
`esphome.<apparaatnaam>_show_alert`. `server.py` stuurt de referentie mee in de volledige
inventaris en zet per scherm `alert_action` en `dismiss_action`.
- `static/index.html`, `app.js`, `style.css`: dialoog met mock van de kaart, sprongknoppen,
per scherm de actienamen met kopieerknop en firmwarestatus, YAML-voorbeeld per scherm,
veldentabel met limieten, iconenlijst met zoekveld (tikken kopieert de naam), kleurstalen,
gedrag, events met een wacht-op-de-knop-voorbeeld en tips. `copyText` kreeg een label.
## Geautomatiseerd
- Python: 103 tests OK; nieuw `tests/test_alerts_reference.py` houdt de referentie gelijk
aan beide profielen (velden en typen van `show_alert`, `ALERT_*_MAX`, event en eindes),
`tile_palette.h`, `alert_overlay.h` en `tile_icons.py`, en controleert de inventaris via
de aiohttp-testclient (`alerts` alleen in de volledige inventaris, actienamen per scherm,
`None` zonder apparaatnaam).
- `node --check app.js` schoon; `generate_packages.py --check` onveranderd groen.
## Handmatig
- Lokaal met een nep-Home Assistant (twee schermen: firmware 0.2.31 en 0.2.29): dialoog
geopend, alle secties nagelopen op 1280 px en op telefoonbreedte, zoekveld gefilterd,
geen consolefouten. Niet getest in Ingress op een echte HA; de pagina gebruikt dezelfde
inventaris-API als de rest, dus daar verandert niets aan.
+5
View File
@@ -1,3 +1,8 @@
## 0.2.37 (firmware 0.2.31)
- **Cheatsheet Alerts in ESP Screens.** De knop **Alerts** bovenaan opent een naslagpagina met alles over `show_alert`: per scherm de exacte actienaam (`esphome.<apparaatnaam>_show_alert`) met kopieerknop en of de firmware het al kan, een kant-en-klaar YAML-voorbeeld per scherm, alle zeven velden met uitleg, voorbeelden en de tekstlimieten per bord, alle iconen met glyph en naam (zoeken, tikken kopieert de naam), de kleuren als stalen, het gedrag (timeout, knop, knipperen, standby, vervangen) en het event `esphome.screen_alert` met een voorbeeldautomatisering die op de knop wacht. Home Assistant toont bij ESPHome-acties zelf geen uitleg of keuzelijsten; deze pagina vult dat gat.
- Geen nieuwe firmware; de doelversie blijft 0.2.31.
## 0.2.36 (firmware 0.2.31)
- **Alert vanuit een automatisering.** Elk scherm heeft nu de actie `esphome.<scherm>_show_alert` met `title`, `subtitle`, `icon`, `color`, `button_text`, `timeout` en `flash`. De kaart ligt op LVGL's toplaag over alles heen (pagina's, kaarten, de standby-laag), wekt het scherm en houdt de backlight op de normale helderheid tot iemand op de knop tikt (`button_text`, standaard Oké), of tot `timeout` seconden (0 is tot de knop; de knop sluit ook een alert met timeout direct). `flash: true` laat de backlight vier keer knipperen bij binnenkomst. Iconen zijn de namen uit de tegelkiezer (ook als `mdi:naam`, of als hex-codepoint van een meegecompileerd glyph); onbekend wordt `alert-outline`. Kleuren zijn de pasteltinten van de tegels; leeg is de witte kaart. Een nieuwe alert vervangt de huidige. Oké, timeout, vervangen en `dismiss_alert` melden zich als event `esphome.screen_alert` met `action`, `title` en `screen`.
+38
View File
@@ -392,6 +392,44 @@ def packets(message, token=None):
chunks = [encoded[i:i+200] for i in range(0, len(encoded), 200)]
return [f'{token}|{i}|{int(i == len(chunks)-1)}|{part}' for i, part in enumerate(chunks)]
# ----- Alerts (firmware 0.2.31+): the reference the cheatsheet shows. tests/test_alerts_reference.py
# keeps every value here equal to what the board profiles compile. -----
ALERT_MIN_FIRMWARE = '0.2.31'
ALERT_EVENT = 'esphome.screen_alert'
ALERT_ENDINGS = (('ok', 'De knop is ingedrukt'), ('timeout', 'De timeout is verstreken'),
('replaced', 'Een nieuwe alert kwam eroverheen'), ('remote', 'dismiss_alert vanuit Home Assistant'))
ALERT_FALLBACK_ICON = 'alert-outline'
# (field, ESPHome type, label, explanation, example) in the order Home Assistant shows them.
ALERT_FIELDS = (
('title', 'string', 'Titel', 'Eén regel bovenaan de kaart; wat niet past krijgt puntjes. Leeg wordt "Melding".', 'Iemand belt aan'),
('subtitle', 'string', 'Subtitle', 'Toelichting onder de titel, over meerdere regels; een regeleinde mag. Leeg mag.', 'Deur 3, achterkant'),
('icon', 'string', 'Icoon', 'Een naam uit de lijst, ook als mdi:naam of als hex-codepoint (F12E6). Onbekend of leeg geeft de waarschuwingsdriehoek.', 'doorbell'),
('color', 'string', 'Kleur', 'Een van de negen pastelkleuren van de tegels. Leeg geeft de witte kaart.', 'orange'),
('button_text', 'string', 'Knoptekst', 'De tekst op de knop. Leeg is "Oké".', 'Ik kom'),
('timeout', 'int', 'Timeout', 'Seconden waarna de kaart vanzelf verdwijnt. 0 wacht op de knop, hoe lang dat ook duurt. De knop sluit altijd direct, ook met een timeout.', 0),
('flash', 'bool', 'Knipperen', 'Aan laat de backlight vier keer knipperen als de alert binnenkomt; daarna blijft het scherm gewoon aan.', True),
)
# Bytes per field the firmware keeps (the profiles' ALERT_*_MAX); a Dutch letter with accent takes two.
ALERT_LIMITS = {'cyd': {'title': 48, 'subtitle': 160, 'button_text': 12}, 'guition': {'title': 64, 'subtitle': 240, 'button_text': 16}}
ALERT_SUGGESTED_ICONS = ('doorbell', 'bell', 'bell-ring', 'alert-outline', 'alarm-light', 'lock', 'lock-open-variant', 'door-open',
'window-closed-variant', 'motion-sensor', 'cctv', 'smoke-detector', 'water-alert', 'fire', 'mailbox', 'car',
'account', 'account-group', 'washing-machine', 'robot-vacuum', 'timer-outline', 'check')
def alert_service(node, action='show_alert'):
"""Home Assistant registers a device's actions as esphome.<node>_<action>, dashes as underscores."""
return f"esphome.{node.replace('-', '_')}_{action}" if isinstance(node, str) and node else None
def alert_reference():
"""Everything the Alerts cheatsheet shows besides the screens themselves."""
return {'min_firmware': ALERT_MIN_FIRMWARE, 'event': ALERT_EVENT,
'endings': [{'action': action, 'label': label} for action, label in ALERT_ENDINGS],
'fallback_icon': ALERT_FALLBACK_ICON, 'fallback_cp': tile_icons.GLYPHS[ALERT_FALLBACK_ICON],
'fields': [{'name': name, 'type': kind, 'label': label, 'help': help_, 'example': example} for name, kind, label, help_, example in ALERT_FIELDS],
'limits': ALERT_LIMITS,
'colors': [{'name': name, 'label': item['label'], 'color': item['color']} for name, item in TILE_BACKGROUNDS.items() if item['color']],
'suggested_icons': [{'name': name, 'cp': tile_icons.GLYPHS[name]} for name in ALERT_SUGGESTED_ICONS],
'extra_icons': [{'name': name, 'cp': cp} for name, cp in tile_icons.FIXED]}
def discover(registry, states, devices, areas):
device_map = {d['id']: d for d in devices}
area_map = {a['area_id']: a['name'] for a in areas}
+4 -1
View File
@@ -14,7 +14,7 @@ import tile_icons
from updates import Updater
from aiohttp import ClientSession, ClientTimeout, WSMsgType, web
from core import BUILTIN, TILE_BACKGROUNDS, controls_catalogue, discover, extras, min_firmware, pack_slots, packets, state_message, validate_layout, validate_settings
from core import BUILTIN, TILE_BACKGROUNDS, alert_reference, alert_service, controls_catalogue, discover, extras, min_firmware, pack_slots, packets, state_message, validate_layout, validate_settings
from zoneinfo import ZoneInfo
LOG = logging.getLogger('screen_manager')
@@ -453,6 +453,8 @@ def create_app(manager, development=False):
screen['layout'] = manager.layouts.get(screen['id'], {'title': 'Thuis', 'tiles': []})
screen['delivery'] = manager.status.get(screen['id'], 'Kies je eerste tegels')
screen['update'] = manager.updates.state_for(screen, profiles)
screen['alert_action'] = alert_service(screen.get('node'))
screen['dismiss_action'] = alert_service(screen.get('node'), 'dismiss_alert')
return {'csrf': csrf, 'connected': manager.ha.online, 'screens': screens,
'pending': manager.pending_profiles(screens, profiles),
'updates': manager.updates.summary(screens, profiles)}, entities
@@ -464,6 +466,7 @@ def create_app(manager, development=False):
payload['backgrounds'] = TILE_BACKGROUNDS
payload['controls'] = controls_catalogue()
payload['icons'] = tile_icons.editor()
payload['alerts'] = alert_reference()
payload['builtin'] = [{'id': key, 'name': name, 'device': 'Ingebouwd op het scherm', 'area': '', 'state': 'ok'} for key, name in BUILTIN.items()]
return web.json_response(payload)
async def events(request):
+223 -3
View File
@@ -272,11 +272,11 @@ function openIntegrations() {
window.open(path, "_blank");
}
}
async function copyText(text, element) {
async function copyText(text, element, what = "API-sleutel") {
try {
if (!navigator.clipboard || !window.isSecureContext) throw new Error();
await navigator.clipboard.writeText(text);
toast("API-sleutel gekopieerd.");
toast(`${what} gekopieerd.`);
} catch {
if (element) {
const range = document.createRange();
@@ -285,7 +285,7 @@ async function copyText(text, element) {
selection.removeAllRanges();
selection.addRange(range);
}
toast(document.execCommand("copy") ? "API-sleutel gekopieerd." : "De sleutel is geselecteerd. Kopieer met Ctrl+C of Command+C.");
toast(document.execCommand("copy") ? `${what} gekopieerd.` : `${what} is geselecteerd. Kopieer met Ctrl+C of Command+C.`);
}
}
// Profiles that Home Assistant does not list yet: the freshly flashed screen is not lost, it
@@ -1128,6 +1128,7 @@ async function refresh(full = true) {
renderScreens();
if (selected) renderSettingsSupport();
if (!selected && inventory.screens.length) select(inventory.screens[0].id);
if ($("#alerts-dialog").open) renderAlertScreens();
} catch {
$("#connection").textContent =
"Beheerpagina niet bereikbaar · opnieuw proberen…";
@@ -1616,3 +1617,222 @@ async function inspect(entity) {
}
}
$("#inspect").onclick = () => inspect();
// ----- Alerts: the cheatsheet for esphome.<node>_show_alert, built from the inventory -----
const versionAtLeast = (version, minimum) => {
const parse = (v) => (/^(\d+)\.(\d+)\.(\d+)$/.exec(v || "") || []).slice(1).map(Number);
const [a, b] = [parse(version), parse(minimum)];
if (a.length !== 3 || b.length !== 3) return false;
for (let i = 0; i < 3; i++) if (a[i] !== b[i]) return a[i] > b[i];
return true;
};
const yamlString = (text) => `"${String(text).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
function copyChip(text, what) {
const b = node("button", "Kopieer", "mini");
b.type = "button";
b.onclick = () => copyText(text, undefined, what);
return b;
}
function alertExampleYaml(action) {
const fields = inventory.alerts?.fields || [];
const lines = fields.map((f) => ` ${f.name}: ${f.type === "string" ? (/^[a-z][a-z0-9-]*$/.test(f.example) ? f.example : yamlString(f.example)) : f.example === true ? "true" : f.example === false ? "false" : f.example}`);
return `action: ${action || "esphome.<apparaatnaam>_show_alert"}\ndata:\n${lines.join("\n")}`;
}
function alertWaitYaml(action) {
return [
`# Deurbel: toon de alert en wacht tot iemand op de knop drukt.`,
`actions:`,
` - action: ${action || "esphome.<apparaatnaam>_show_alert"}`,
` data:`,
` title: "Iemand belt aan"`,
` subtitle: "Deur 3, achterkant"`,
` icon: doorbell`,
` color: orange`,
` button_text: "Ik kom"`,
` timeout: 0`,
` flash: true`,
` - wait_for_trigger:`,
` - trigger: event`,
` event_type: ${inventory.alerts?.event || "esphome.screen_alert"}`,
` event_data:`,
` action: ok`,
` timeout: "00:05:00"`,
` - if:`,
` - condition: template`,
` value_template: "{{ wait.trigger is not none }}"`,
` then:`,
` - action: notify.notify`,
` data:`,
` message: "Iemand komt naar de deur."`,
].join("\n");
}
function renderAlertScreens() {
const alerts = inventory.alerts, list = $("#alerts-screen-list");
if (!alerts) return;
$("#alerts-min-firmware").textContent = alerts.min_firmware;
list.replaceChildren();
if (!inventory.screens.length) {
list.append(node("p", "Nog geen scherm gekoppeld. Installeer er een via Nieuw scherm; de actie verschijnt zodra Home Assistant het scherm ziet.", "hint"));
}
for (const screen of inventory.screens) {
const row = node("div", undefined, "alert-screen");
const head = node("div", undefined, "alert-screen-head");
head.append(node("strong", screen.name));
const ready = versionAtLeast(screen.firmware, alerts.min_firmware) && screen.alert_action;
const badge = node("span", ready ? `● firmware ${screen.firmware}` : screen.alert_action ? `Update nodig · firmware ${screen.firmware || "onbekend"}` : "Apparaatnaam onbekend · werk het scherm bij", `badge ${ready ? "online" : "update"}`);
head.append(badge);
row.append(head);
for (const [label, action] of [["Alert tonen", screen.alert_action], ["Alert sluiten", screen.dismiss_action]]) {
const line = node("div", undefined, "copy-line");
line.append(node("span", label, "copy-label"), node("code", action || "esphome.<apparaatnaam>_show_alert"));
if (action) line.append(copyChip(action, "Actienaam"));
row.append(line);
}
list.append(row);
}
const select = $("#alerts-example-screen"), current = select.value;
select.replaceChildren();
for (const screen of inventory.screens.filter((s) => s.alert_action)) {
const option = node("option", screen.name);
option.value = screen.alert_action;
select.append(option);
}
if (!select.options.length) {
const option = node("option", "een scherm (nog niet gekoppeld)");
option.value = "";
select.append(option);
}
if ([...select.options].some((o) => o.value === current)) select.value = current;
renderAlertExamples();
}
function renderAlertExamples() {
const action = $("#alerts-example-screen").value;
$("#alerts-example").textContent = alertExampleYaml(action);
$("#alerts-wait-example").textContent = alertWaitYaml(action);
}
function alertIconCard(icon, label) {
const b = node("button", undefined, "alert-icon");
b.type = "button";
b.title = `${icon.name} kopiëren`;
b.append(node("span", glyph(icon.cp), "mdi"), node("code", icon.name));
if (label) b.append(node("small", label));
b.onclick = () => copyText(icon.name, undefined, "Icoonnaam");
return b;
}
function renderAlertIcons() {
const alerts = inventory.alerts, icons = inventory.icons;
if (!alerts || !icons) return;
const suggested = $("#alerts-suggested");
suggested.replaceChildren();
for (const icon of alerts.suggested_icons) {
const chip = node("button", undefined, "chip");
chip.type = "button";
chip.append(node("span", glyph(icon.cp), "mdi"), node("code", icon.name));
chip.onclick = () => copyText(icon.name, undefined, "Icoonnaam");
suggested.append(chip);
}
const query = $("#alerts-icon-search").value.trim().toLowerCase();
const groups = $("#alerts-icon-groups");
groups.replaceChildren();
const all = [...icons.groups, { label: "Ook beschikbaar: bedienings- en weericonen", icons: alerts.extra_icons }];
let shown = 0;
for (const group of all) {
const matches = group.icons.filter((i) => !query || i.name.includes(query) || (i.label || "").toLowerCase().includes(query));
if (!matches.length) continue;
shown += matches.length;
const block = node("div", undefined, "alert-icon-group");
block.append(node("p", `${group.label} · ${matches.length}`, "alerts-subhead"));
const grid = node("div", undefined, "alert-icon-grid");
for (const icon of matches) grid.append(alertIconCard(icon, icon.label));
block.append(grid);
groups.append(block);
}
if (!shown) groups.append(node("p", `Geen icoon voor "${query}". Onbekende namen tonen de waarschuwingsdriehoek (${alerts.fallback_icon}).`, "hint"));
}
function renderAlertColors() {
const alerts = inventory.alerts, swatches = $("#alerts-swatches");
if (!alerts) return;
swatches.replaceChildren();
const white = node("button", undefined, "swatch");
white.type = "button";
const blank = node("i");
blank.style.background = "#FFFFFF";
white.append(blank, node("span", undefined));
white.lastChild.append(node("code", "leeg"), node("small", "Wit (standaard)"));
white.onclick = () => copyText("", undefined, "Lege kleur");
swatches.append(white);
for (const colour of alerts.colors) {
const b = node("button", undefined, "swatch");
b.type = "button";
const dot = node("i");
dot.style.background = colour.color;
const text = node("span");
text.append(node("code", colour.name), node("small", `${colour.label} · ${colour.color}`));
b.append(dot, text);
b.onclick = () => copyText(colour.name, undefined, "Kleurnaam");
swatches.append(b);
}
}
function renderAlertTables() {
const alerts = inventory.alerts;
if (!alerts) return;
const types = { string: "tekst", int: "getal", bool: "aan / uit" };
const table = $("#alerts-field-table");
table.replaceChildren();
const head = node("tr");
for (const title of ["Veld", "Type", "Wat het doet", "Voorbeeld", "Limiet"]) head.append(node("th", title));
table.append(head);
for (const field of alerts.fields) {
const row = node("tr");
const name = node("td");
name.append(node("code", field.name), node("small", field.label));
const example = node("td");
example.append(node("code", typeof field.example === "string" ? field.example : String(field.example)));
const limit = alerts.limits.cyd[field.name];
const cells = [name, node("td", types[field.type] || field.type), node("td", field.help), example,
node("td", limit ? `CYD ${limit} · Guition ${alerts.limits.guition[field.name]} bytes` : field.type === "int" ? "0 tot 86400 s" : "—")];
cells.forEach((cell, index) => cell.dataset.label = ["Veld", "Type", "Wat het doet", "Voorbeeld", "Limiet"][index]);
row.append(...cells);
table.append(row);
}
const endings = $("#alerts-ending-table");
endings.replaceChildren();
const endHead = node("tr");
for (const title of ["action", "Wanneer"]) endHead.append(node("th", title));
endings.append(endHead);
for (const ending of alerts.endings) {
const row = node("tr"), cell = node("td"), when = node("td", ending.label);
cell.append(node("code", ending.action));
cell.dataset.label = "action";
when.dataset.label = "Wanneer";
row.append(cell, when);
endings.append(row);
}
$("#alerts-event-name").textContent = alerts.event;
const doorbell = alerts.suggested_icons.find((i) => i.name === "doorbell");
if (doorbell) $("#alert-mock-icon").textContent = glyph(doorbell.cp);
const orange = alerts.colors.find((c) => c.name === "orange");
if (orange) $("#alert-mock").querySelector(".alert-mock-card").style.background = orange.color;
}
function renderAlerts() {
if (!inventory.alerts) {
toast("De cheatsheet laadt nog; probeer het zo opnieuw.");
return false;
}
renderAlertTables();
renderAlertScreens();
renderAlertIcons();
renderAlertColors();
return true;
}
$("#open-alerts").onclick = () => {
if (renderAlerts()) $("#alerts-dialog").showModal();
};
$("#close-alerts").onclick = () => $("#alerts-dialog").close();
$("#alerts-example-screen").onchange = renderAlertExamples;
$("#alerts-example-copy").onclick = () => copyText($("#alerts-example").textContent, $("#alerts-example"), "YAML");
$("#alerts-wait-copy").onclick = () => copyText($("#alerts-wait-example").textContent, $("#alerts-wait-example"), "YAML");
$("#alerts-icon-search").oninput = renderAlertIcons;
for (const b of document.querySelectorAll("#alerts-dialog [data-jump]")) {
b.onclick = () => document.getElementById(b.dataset.jump)?.scrollIntoView({ behavior: "smooth", block: "start" });
}
+158
View File
@@ -30,6 +30,13 @@
><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>
@@ -304,6 +311,157 @@
<pre id="firmware-log"></pre>
</dialog>
<dialog id="tile-sheet" class="tile-sheet" aria-label="Tegel instellen"></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>
+74
View File
@@ -1083,3 +1083,77 @@ pre {
display: inline-block;
margin-top: 6px;
}
/* Alerts: the cheatsheet for esphome.<node>_show_alert. */
#alerts-dialog { max-width: 920px; width: 92vw; }
.alerts section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.alerts h3 { font-size: 18px; letter-spacing: -0.3px; margin-bottom: 4px; }
.alerts section > p { margin-top: 4px; }
.alerts code { background: var(--soft); color: var(--ink); padding: 1px 6px; border-radius: 6px; font-size: 12px; overflow-wrap: anywhere; }
.alerts pre { max-height: none; margin: 0; flex: 1; min-width: 0; }
.alerts ol.steps { margin: 6px 0 18px; }
.alerts .steps li { margin-bottom: 8px; }
.alerts-list { padding-left: 20px; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.alerts-list li { margin-bottom: 9px; }
.alerts-list b { color: var(--ink); }
.alerts-subhead { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted) !important; margin: 18px 0 8px !important; }
.alert-hero { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 20px; align-items: center; margin: 6px 0 4px; }
.alert-mock { background: #101820; border-radius: 16px; padding: 22px 18px; display: grid; place-items: center; }
.alert-mock-card { position: relative; width: 100%; background: #FFE1C6; border: 1px solid #0001; border-radius: 14px; padding: 12px 12px 48px 52px; color: #1b1b1b; display: grid; gap: 2px; }
.alert-mock-icon { position: absolute; left: 12px; top: 12px; font-size: 30px; }
.alert-mock-card strong { font-size: 15px; line-height: 1.2; }
.alert-mock-card > span { font-size: 12px; color: #3a3a3c; }
.alert-mock-card button { position: absolute; right: 10px; bottom: 10px; padding: 6px 16px; border-radius: 999px; background: #1b1b1b; color: white; font-size: 13px; cursor: default; }
.alerts-nav { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.alerts-nav button { background: var(--soft); color: var(--accent); padding: 7px 12px; font-size: 12px; border-radius: 20px; }
.alerts-nav button:hover { filter: none; background: #dfe9ff; }
.alert-screen { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 8px; background: white; }
.alert-screen-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.alert-screen-head .badge { padding: 4px 9px; font-size: 12px; }
.copy-line { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.copy-line .copy-label { flex: none; width: 96px; font-size: 12px; color: var(--muted); padding-top: 2px; }
.copy-line > code { flex: 1; min-width: 0; padding: 4px 8px; }
.copy-line .mini { flex: none; background: white; color: var(--ink); border: 1px solid var(--line); }
.alert-example { display: grid; gap: 10px; }
.alert-example label { margin: 0; }
.alert-example select { max-width: 360px; margin-top: 7px; }
.table-scroll { overflow-x: auto; }
.alerts table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.alerts th, .alerts td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
.alerts th { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.alerts td small { margin-top: 3px; }
.alerts td:first-child code, .alerts td code { white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; background: white; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); font-size: 12px; font-weight: 500; }
.chip .mdi { font-size: 18px; }
.chip code { background: none; padding: 0; color: var(--ink); }
.chip:hover { border-color: #b9cbec; filter: none; }
.alerts-search { margin: 18px 0 6px; }
.alerts-search input { font-weight: 400; }
.alert-icon-group { margin-top: 6px; }
.alert-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.alert-icon { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 92px; padding: 10px 6px 8px; background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; font-weight: 500; }
.alert-icon:hover { border-color: #b9cbec; filter: none; box-shadow: 0 3px 10px #202c3c0c; }
.alert-icon .mdi { font-size: 28px; }
.alert-icon code { background: none; padding: 0; font-size: 11px; color: var(--accent); text-align: center; }
.alert-icon small { font-size: 11px; text-align: center; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.swatch { display: flex; align-items: center; gap: 10px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); font-size: 12px; text-align: left; font-weight: 500; }
.swatch:hover { border-color: #b9cbec; filter: none; }
.swatch i { width: 34px; height: 34px; border-radius: 10px; border: 1px solid #0001; flex: none; }
.swatch span { display: grid; gap: 2px; min-width: 0; }
.swatch code { background: none; padding: 0; color: var(--ink); }
.swatch small { font-size: 11px; }
@media (max-width: 700px) {
.alert-hero { grid-template-columns: 1fr; }
.copy-line .copy-label { width: 100%; }
/* Tables stack per row on a phone; each cell shows its column name. */
.alerts table { min-width: 0; }
.alerts table tr:first-child { display: none; }
.alerts table tr { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.alerts td { display: block; padding: 0; border: 0; }
.alerts td::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.alerts td:first-child::before { display: none; }
.alerts td:first-child code { font-size: 14px; }
.copy-line > pre { flex-basis: 100%; }
}
+1 -1
View File
@@ -1,5 +1,5 @@
name: ESP Screen Manager
version: "0.2.36"
version: "0.2.37"
slug: esp_screen_manager
description: Kies tegels voor je CYD en Guition touchscreen, zonder opnieuw flashen.
url: https://github.com/MaxGramser/homeassistant_espscreen
+100
View File
@@ -0,0 +1,100 @@
"""The Alerts cheatsheet in ESP Screens must describe exactly what the firmware compiles."""
import asyncio
import importlib.util
import re
import sys
import tempfile
import unittest
from pathlib import Path
ROOT = Path(__file__).resolve().parents[1]
sys.path.insert(0, str(ROOT / 'screen_manager/app'))
import tile_icons # noqa: E402
from core import (ALERT_LIMITS, ALERT_MIN_FIRMWARE, FIRMWARE_VERSION, TILE_BACKGROUNDS, alert_reference, # noqa: E402
alert_service)
from updates import parse_version # noqa: E402
PROFILES = {'cyd': 'home-like-2432s028.yaml', 'guition': 'guition-4848s040.yaml'}
STATIC = ROOT / 'screen_manager/app/static'
class ReferenceTests(unittest.TestCase):
def test_fields_and_limits_match_both_board_profiles(self):
reference = alert_reference()
for board, name in PROFILES.items():
text = (ROOT / name).read_text()
block = text.split(' - action: show_alert\n', 1)[1].split(' - action: dismiss_alert\n', 1)[0]
self.assertEqual(re.findall(r'^ (\w+): (\w+)$', block, re.M), [(f['name'], f['type']) for f in reference['fields']], name)
for field, key in (('title', 'ALERT_TITLE_MAX'), ('subtitle', 'ALERT_SUBTITLE_MAX'), ('button_text', 'ALERT_BUTTON_MAX')):
self.assertEqual(ALERT_LIMITS[board][field], int(re.search(rf'^ {key}: "(\d+)"', text, re.M)[1]), (board, field))
for needle in ('event: esphome.screen_alert', 'execute("replaced")', 'reason: "timeout"', 'reason: "remote"', 'reason: "ok"'):
self.assertIn(needle, text, (name, needle))
self.assertEqual(reference['event'], 'esphome.screen_alert')
self.assertEqual([e['action'] for e in reference['endings']], ['ok', 'timeout', 'replaced', 'remote'])
self.assertEqual(reference['limits'], ALERT_LIMITS)
def test_colours_icons_and_fallback_match_the_firmware_headers(self):
reference = alert_reference()
palette = (ROOT / 'components/smart_display/tile_palette.h').read_text()
self.assertEqual([c['name'] for c in reference['colors']], re.findall(r'if\(name=="(\w+)"\)return 0x', palette))
for colour in reference['colors']:
self.assertIn(f'if(name=="{colour["name"]}")return 0x{colour["color"][1:]};', palette)
self.assertEqual(colour['label'], TILE_BACKGROUNDS[colour['name']]['label'])
header = (ROOT / 'components/smart_display/alert_overlay.h').read_text()
self.assertIn(f'FALLBACK_ICON = "{reference["fallback_icon"]}"', header)
self.assertEqual(reference['fallback_cp'], tile_icons.GLYPHS[reference['fallback_icon']])
for icon in reference['suggested_icons']:
self.assertEqual(icon['cp'], tile_icons.GLYPHS[icon['name']], icon)
self.assertEqual([(i['name'], i['cp']) for i in reference['extra_icons']], list(tile_icons.FIXED))
self.assertEqual(len(reference['suggested_icons']), len({i['name'] for i in reference['suggested_icons']}))
def test_action_names_follow_home_assistant_and_the_firmware_is_current(self):
self.assertEqual(alert_service('studio-1'), 'esphome.studio_1_show_alert')
self.assertEqual(alert_service('keuken-scherm', 'dismiss_alert'), 'esphome.keuken_scherm_dismiss_alert')
for missing in (None, '', 3):
self.assertIsNone(alert_service(missing))
self.assertLessEqual(parse_version(ALERT_MIN_FIRMWARE), parse_version(FIRMWARE_VERSION))
def test_page_carries_the_cheatsheet(self):
html = (STATIC / 'index.html').read_text()
for marker in ('id="open-alerts"', 'id="alerts-dialog"', 'id="close-alerts"', 'id="alerts-screens"', 'id="alerts-icons"', 'id="alerts-colors"', 'id="alerts-fields"', 'id="alerts-example"'):
self.assertIn(marker, html, marker)
script = (STATIC / 'app.js').read_text()
for marker in ('inventory.alerts', 'alert_action', 'dismiss_action', 'function renderAlerts', '#open-alerts'):
self.assertIn(marker, script, marker)
self.assertIn('#alerts-dialog', (STATIC / 'style.css').read_text())
HAS_AIOHTTP = importlib.util.find_spec('aiohttp') is not None
if HAS_AIOHTTP:
from server import Manager, create_app
from aiohttp.test_utils import TestClient, TestServer
@unittest.skipUnless(HAS_AIOHTTP, 'Run using .venv-portal/bin/python for server tests')
class InventoryTests(unittest.IsolatedAsyncioTestCase):
async def test_inventory_carries_the_reference_and_each_screen_its_action_names(self):
class HA:
online = True
registry = [{'entity_id': 'text.studio_1_tegelinstellingen', 'platform': 'esphome', 'original_name': 'Tegelinstellingen', 'device_id': 'd1'},
{'entity_id': 'sensor.studio_1_apparaatnaam', 'platform': 'esphome', 'original_name': 'Apparaatnaam', 'device_id': 'd1'},
{'entity_id': 'sensor.studio_1_schermfirmware', 'platform': 'esphome', 'original_name': 'Schermfirmware', 'device_id': 'd1'},
{'entity_id': 'text.oud_tegelinstellingen', 'platform': 'esphome', 'original_name': 'Tegelinstellingen', 'device_id': 'd2'}]
devices = [{'id': 'd1', 'name': 'Studio 1'}, {'id': 'd2', 'name': 'Oud scherm'}]
areas = []
states = {'text.studio_1_tegelinstellingen': {'state': 'Ready'}, 'sensor.studio_1_apparaatnaam': {'state': 'studio-1'},
'sensor.studio_1_schermfirmware': {'state': '0.2.31'}, 'text.oud_tegelinstellingen': {'state': 'Ready'}}
changed = asyncio.Event()
async def send(self, inbox, message): pass
with tempfile.TemporaryDirectory() as temp:
manager = Manager(HA(), Path(temp) / 'screens.json')
async with TestClient(TestServer(create_app(manager, True))) as client:
full = await (await client.get('/api/inventory')).json()
self.assertEqual(full['alerts'], alert_reference())
by_id = {s['id']: s for s in full['screens']}
self.assertEqual(by_id['text.studio_1_tegelinstellingen']['alert_action'], 'esphome.studio_1_show_alert')
self.assertEqual(by_id['text.studio_1_tegelinstellingen']['dismiss_action'], 'esphome.studio_1_dismiss_alert')
self.assertIsNone(by_id['text.oud_tegelinstellingen']['alert_action'])
light = await (await client.get('/api/inventory?light=1')).json()
self.assertNotIn('alerts', light)
self.assertEqual(light['screens'][0]['alert_action'], 'esphome.studio_1_show_alert')
if __name__ == '__main__':
unittest.main()