dashboards: fire-hd-wallpanel screensaver layout and font sizing #3

Merged

jmaroeder merged 22 commits from jmaroeder/wallpanel-dashboard-rename into main 2026-05-26 13:12:42 +00:00

Conversation 0 Commits 22 Files changed 9 +716 -84

jmaroeder commented 2026-05-26 13:12:20 +00:00

Owner

Copy link

Renames the dashboard file to fire-hd-wallpanel.yaml and updates configuration.yaml. Redesigns the wallpanel screensaver: album art is constrained to 50vh via mini-media-player card_mod (background-size: contain), and the info-box switches to flex-start so text flows below the art without overlapping the clock. Typography uses h3 for title and artist (same size), h5 for album (smaller), right-aligned. Also rewrites screenshot.mjs to persist the browser across runs with a reconnect mechanism and a --wait flag for screensaver capture, and adds DOM inspection scripts used for debugging the shadow DOM font-size cascade.

Renames the dashboard file to fire-hd-wallpanel.yaml and updates configuration.yaml. Redesigns the wallpanel screensaver: album art is constrained to 50vh via mini-media-player card_mod (background-size: contain), and the info-box switches to flex-start so text flows below the art without overlapping the clock. Typography uses h3 for title and artist (same size), h5 for album (smaller), right-aligned. Also rewrites screenshot.mjs to persist the browser across runs with a reconnect mechanism and a --wait flag for screensaver capture, and adds DOM inspection scripts used for debugging the shadow DOM font-size cascade.

jmaroeder added 22 commits 2026-05-26 13:12:20 +00:00

dashboards: remove storage-mode fire-hd-wallpanel and rename yaml dashboard ... b6d9376f01

Delete the duplicate non-YAML storage-mode dashboard and rename
fire-hd-wallpanel-yaml → fire-hd-wallpanel (file, url_path, and title).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboards: expand wallpanel screensaver media to full width ... 3ff47dc693

Change --wp-card-width from 450px to 100vw so cover art and track
info fill the entire screen in the screensaver overlay.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboards: fix screensaver info box overflow and increase text sizes ... 0cedfdc4fd

Remove margin/padding causing the info box to overflow the viewport,
and bump artist/album font to 4vh/vw and track title to 6vh/vw.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tools: improve screenshot.mjs — persistent browser, no-hang, capture signal ... 8007b03e41

- Reuse existing Chrome via saved WS endpoint (browser survives script restarts)
- Wrap navigation and screenshot in withTimeout() to prevent hangs
- Add --capture flag (sends SIGUSR1 to running session) and file trigger
  (.context/screenshot-trigger) for on-demand screenshots in any mode
- On exit, disconnect (not close) so Chrome keeps running for next session
- Clean up legacy chrome.pid on startup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tools: add --wait=<ms> flag to screenshot.mjs for deferred capture ... 6a6f0472bb

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboards: fix wallpanel track text font size — remove :host inheritance ... 018933950c

card_mod shadow-piercing selectors don't inherit reliably through :host
inside the wallpanel screensaver overlay; set font-size explicitly on
.markdown-body and .markdown-body p instead.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tools: add --wait flag and mouse simulation for wallpanel screensaver capture ... 0ab0c0c22c

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboards: fix wallpanel track text font size — target ha-markdown-element ... 38ad0d8e50

This HA version renders markdown inside ha-markdown-element (no shadow
root) rather than .markdown-body. Update card_mod selector from
.markdown-body to ha-markdown-element p/strong.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboards: fix screensaver text size via cascade instead of card_mod ... 5b6b5d5a13

card_mod does not inject styles into wallpanel screensaver cards.
Instead, set font-size and text-align on wallpanel-screensaver-info-box-content
which cascades through all shadow DOM boundaries via CSS inheritance.
Use ## (h2) for track title so HA's own h2 sizing makes it larger than body text.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboards: fix screensaver info box transparency ... 4522740d82

Add explicit background: transparent to both the info-box and
info-box-content containers to prevent card backgrounds showing
over the full-width album art.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboards: flatten wallpanel screensaver cards — remove vertical-stack ... 6f066d5a2f

Put mini-media-player and markdown as separate conditional cards
to eliminate the vertical-stack card background layer.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboards: use gradient overlay for screensaver info box ... 9e698173c9

Instead of fighting with opaque card backgrounds, use a dark-to-transparent
gradient on the full-height info box so album art shows through the top
and text is readable against a dark band at the bottom. Flex layout pushes
cards to the bottom of the full-height container.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tools: update inspect-wallpanel with parent chain traversal ... 6168ba9de4

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboards: increase screensaver font size to max(5vh, 5vw) ... f517c807b6

At 800x1280 this gives 64px body / ~96px h2 title — visible at arm's length.
Also remove mouse moves from screenshot.mjs --wait path that were resetting
wallpanel's idle timer before the screensaver could activate.

dashboards: constrain screensaver art to 50vh, fix font hierarchy ... e1b72ce8b9

Replace full-cover-fit mini-media-player (full-screen background) with
picture-entity (in-flow, 50vh, object-fit: contain) so text renders below
the art without overlapping the clock. Switch info-box to flex-start.
Use card_mod on markdown card to set h2 (title) to max(6vh,6vw) and p
(artist/album) to max(2.5vh,2.5vw) with tight line spacing.

dashboards: use mini-media-player with card_mod 50vh constraint for screensaver art 3d009e8c90

dashboards: add right padding to screensaver text card to prevent clipping b3d9a81c6b

dashboards: move text card padding to ha-card level to fix right-edge clipping fa2a647f79

dashboards: screensaver text — title=artist size (h3), album smaller (h6) 384ec1c4e5

screenshot: restore single mouse move to start wallpanel idle timer before wait bf2a87bb62

dashboards: h5 album, reduce top margin on screensaver text card c6b0129141

ai: add DOM inspection scripts for wallpanel debugging fb1710dde9

jmaroeder merged commit 5de5558383 into main 2026-05-26 13:12:42 +00:00

jmaroeder deleted branch jmaroeder/wallpanel-dashboard-rename 2026-05-26 13:12:42 +00:00

jmaroeder referenced this pull request from a commit 2026-05-26 13:12:43 +00:00

dashboards: fire-hd-wallpanel screensaver layout and font sizing (#3)

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

jmaroeder/ha-config!3

No description provided.