Show a live picture on a camera tile, run an action from the alert button, roll long media titles, and keep full-page tiles in their own colour (0.2.91)

Live picture (issue #4): a camera or image tile on a Guition takes
Display -> Live picture with a pace of 15 or 30 s. The camera tiles of a
page share one download: the screen asks ESP Screens for them together
(esphome.screen_camera with tiles, size and bg) and the app serves one
BMP, a strip of squares with the corners rounded over each tile's own
colour; every tile draws its square out of it with LVGL's image offset
(LV_IMAGE_ALIGN_TOP_LEFT: the default centres a taller source). A third
online_image on the Guition holds the strip; it loads after the alert's
picture, a cover and the camera full screen, never under a card, in
standby or under a finger. The strip is served whole every time: ESPHome's
http_request logs a 304 as a failed request. Firmware 0.2.77.

Alert button: esp_screens_show_alert takes action and data; the app
performs the action once when the button's report (esphome.screen_alert,
ok) comes from any screen. show_alert keeps its seven fields, so every
firmware from 0.2.31 has it.

Media card and full-page media tile: a title or artist line that is too
wide rolls by (LV_LABEL_LONG_SCROLL_CIRCULAR) instead of ending in dots.

Full-page tiles are white or their own pastel like every other tile; the
tint in the state colour of firmware 0.2.62 to 0.2.76 is gone.

Host harness (27 checks) and bench Guition + local add-on on the Yellow:
docs/TEST_RESULTS_0291.md. CYD firmware 1,633,728 B, 89.0 %.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/components/TileCard.vue

@@ -130,7 +130,7 @@ async function onKey(e: KeyboardEvent) {
       <span class="lead"><span class="big">{{ clockText(clock24, now) }}</span><span class="nm">{{ name }}</span></span>
     </template>
     <template v-else-if="full">
-      <span class="ic mdi" :class="{ lit: isOn }">{{ glyph(tileIconCp(tile)) }}</span>
+      <span class="ic mdi" :class="{ lit: isOn, thumb: display === 'live' }">{{ glyph(tileIconCp(tile)) }}</span>
       <span class="lead">
         <span class="nm">{{ name }}</span>
         <span v-if="goesTo" class="goto">{{ pageLink }}</span>
@@ -150,7 +150,7 @@ async function onKey(e: KeyboardEvent) {
     </template>
     <template v-else-if="wide">
       <span class="lead">
-        <span class="ic mdi" :class="{ lit: isOn }">{{ glyph(tileIconCp(tile)) }}</span>
+        <span class="ic mdi" :class="{ lit: isOn, thumb: display === 'live' }">{{ glyph(tileIconCp(tile)) }}</span>
         <span class="tx">
           <span class="nm">{{ name }}</span>
           <span v-if="goesTo" class="goto">{{ pageLink }}</span>
@@ -178,7 +178,7 @@ async function onKey(e: KeyboardEvent) {
       <!-- 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="ic mdi" :class="{ lit: isOn, thumb: display === 'live' }">{{ glyph(tileIconCp(tile)) }}</span>
         <span class="tx">
           <span class="nm">{{ name }}</span>
           <span v-if="goesTo" class="goto">{{ pageLink }}</span>

web/src/components/TileInspector.vue

@@ -49,14 +49,18 @@ const displays = computed(() => {
   if (domain.value === "weather" && (!c || c.displays.includes("forecast") || display.value === "forecast")) keys.push("forecast");
   if (domain.value === "sensor" && (!c || c.displays.includes("graph") || display.value === "graph")) keys.push("graph");
   if (domain.value === "sun") keys.push("sunpath");
+  // A live picture on a camera tile (app 0.2.91): the picker only offers cameras on a Guition, the board that draws images.
+  if (["camera", "image"].includes(domain.value)) keys.push("live");
   return keys.map((key) => [key, t(`editor.tile.display.${key}`)] as [string, string]);
 });
 const displayHint = computed(() => {
   const c = caps.value;
   if (c && display.value === "graph" && !c.displays.includes("graph")) return t("editor.tile.display.no_graph");
   if (c && display.value === "forecast" && !c.displays.includes("forecast")) return t("editor.tile.display.no_forecast");
+  if (display.value === "live") return t(supports(0, 2, 77) ? "editor.tile.display.live_hint" : "editor.tile.display.live_needs_firmware");
   return "";
 });
+const refresh = computed(() => current("refresh", 15) as number);
 const size = computed(() => current("size", "single") as string);
 const catalogue = computed(() => state.inventory.controls?.[domain.value]);
 const controls = computed(() => current("controls", size.value === "full" ? "none" : catalogue.value?.default) as string);
@@ -124,7 +128,11 @@ function inspect() {
     <div v-else class="f">
       <span class="f-label">{{ t("editor.tile.display.label") }}</span>
       <Segmented :choices="displays" :value="display" @pick="(v) => setTileOption(tile, 'display', v)" />
-      <small v-if="displayHint" class="warn">{{ displayHint }}</small>
+      <small v-if="displayHint" :class="{ warn: display !== 'live' || !supports(0, 2, 77) }">{{ displayHint }}</small>
+    </div>
+    <div v-if="display === 'live'" class="f">
+      <span class="f-label">{{ t("editor.tile.refresh.label") }}</span>
+      <Segmented :choices="[15, 30].map((seconds) => [seconds, t('editor.tile.refresh.seconds', { n: seconds })] as [number, string])" :value="refresh" @pick="(v) => setTileOption(tile, 'refresh', Number(v))" />
     </div>
     <div class="f">
       <span class="f-label">{{ t("editor.tile.size.label") }}</span>

web/src/styles/app.css

@@ -173,6 +173,10 @@ a:hover { text-decoration: underline; }
 .tile .tog.off { background: #c9ccd1; }
 .tile .tog.off::after { right: auto; left: 2px; }
 .tile .ic.lit { color: #d9930f; }
+/* A live camera tile (app 0.2.91): the picture's rounded square stands in for the icon on the mockup. */
+.tile .ic.thumb { width: 28px; height: 28px; border-radius: 7px; background: #d7dbe1; display: grid; place-items: center; font-size: 15px; color: #5a5f66; }
+.tile.full .ic.thumb { width: 54px; height: 54px; border-radius: 12px; font-size: 26px; }
+.device.cyd .tile .ic.thumb { width: 22px; height: 22px; font-size: 12px; }
 .tile .big { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .tile .big small { display: inline; font-size: 10.5px; font-weight: 500; color: #5a5f66; margin-left: 2px; }
 .device.cyd .tile .big { font-size: 16px; }

web/tests/components.spec.ts

@@ -183,6 +183,38 @@ describe("several tiles that go to the same page in the library (firmware 0.2.65
   });
 });
 
+describe("TileInspector: a live picture on a camera tile (app 0.2.91)", () => {
+  const row = (wrapper: ReturnType<typeof mount>, label: string) =>
+    wrapper.findAll(".f").find((f) => f.find(".f-label").exists() && f.find(".f-label").text() === label)!;
+  const choices = (wrapper: ReturnType<typeof mount>, label: string) => row(wrapper, label).findAll(".seg button").map((b) => b.text());
+  it("offers the live picture for a camera, with its pace once chosen, and says which firmware it needs", async () => {
+    state.inventory.entities.push({ id: "camera.front", name: "Front", state: "idle", area: "Hall" } as any);
+    const tile: Tile = { entity: "camera.front", name: "", slot: 0 };
+    state.layout!.tiles.push(tile);
+    const drawer = mount(TileInspector, { props: { tile } });
+    expect(choices(drawer, "Display")).toEqual(["Name and status", "Large value", "Live picture"]);
+    expect(row(drawer, "Refresh")).toBeUndefined();
+    await row(drawer, "Display").findAll(".seg button")[2].trigger("click");
+    expect(tile.options).toEqual({ display: "live" });
+    expect(choices(drawer, "Refresh")).toEqual(["Every 15 s", "Every 30 s"]);
+    expect(row(drawer, "Refresh").find('[aria-pressed="true"]').text()).toBe("Every 15 s");
+    expect(row(drawer, "Display").find("small").text()).toMatch(/firmware 0\.2\.77/);
+    expect(row(drawer, "Display").find("small").classes()).toContain("warn");
+    await row(drawer, "Refresh").findAll(".seg button")[1].trigger("click");
+    expect(tile.options).toEqual({ display: "live", refresh: 30 });
+    Object.assign(state.inventory.screens[0], { firmware: "0.2.77" });
+    await drawer.vm.$nextTick();
+    expect(row(drawer, "Display").find("small").text()).toMatch(/icon's place/);
+    expect(row(drawer, "Display").find("small").classes()).not.toContain("warn");
+    // A light has no such choice.
+    const lamp = mount(TileInspector, { props: { tile: { entity: "light.a", name: "", slot: 1 } } });
+    expect(choices(lamp, "Display")).not.toContain("Live picture");
+    // The mockup draws the picture's rounded square instead of the icon.
+    const card = mount(TileCard, { props: { tile, slot: 0 } });
+    expect(card.find(".ic").classes()).toContain("thumb");
+  });
+});
+
 describe("TileInspector: pages (app 0.2.78)", () => {
   const row = (wrapper: ReturnType<typeof mount>, label: string) =>
     wrapper.findAll(".f").find((f) => f.find(".f-label").exists() && f.find(".f-label").text() === label)!;