jmaroeder/ha-config
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dashboards: dynamic weather icon and clock in wallpanel screensaver #6

Merged
jmaroeder merged 1 commit from jmaroeder/wallpanel-clock-cloud-emoji into main 2026-06-02 12:41:11 +00:00
Conversation 0 Commits 1 Files changed 1 +33 -28
jmaroeder commented 2026-06-01 21:04:24 +00:00
Owner
Copy link

Replaces custom:digital-clock with custom:html-template-card to show a live weather condition icon next to the time in the screensaver.

What changed

  • Swapped custom:digital-clock for custom:html-template-card (already installed)
  • Weather condition from weather.forecast_home is mapped to an mdi:weather-* icon rendered via <ha-icon>, displayed to the left of the time
  • Icon and time are in a flex row with align-items: center so they align correctly
  • now() in the template triggers server-side auto-refresh every minute
  • Font sizes match the original clock: max(10vh,10vw) for time, max(5vh,5vw) for date
  • Edge margins tightened to 24px (was max(5vw,5vh))
  • Uses ha-card { position: absolute } (same pattern as the original clock) so the outer element stays in the wallpanel flex layout, keeping album art centered
  • Card width capped to calc(100vw - 48px) to prevent text overflowing the right edge

Icon map

Condition Icon
sunny mdi:weather-sunny
partlycloudy mdi:weather-partly-cloudy
cloudy mdi:weather-cloudy
rainy mdi:weather-rainy
pouring mdi:weather-pouring
snowy mdi:weather-snowy
snowy-rainy mdi:weather-snowy-rainy
lightning-rainy mdi:weather-lightning-rainy
lightning mdi:weather-lightning
fog mdi:weather-fog
hail mdi:weather-hail
clear-night mdi:weather-night
windy mdi:weather-windy
windy-variant mdi:weather-windy-variant
exceptional mdi:alert-circle-outline
Replaces `custom:digital-clock` with `custom:html-template-card` to show a live weather condition icon next to the time in the screensaver. ## What changed - Swapped `custom:digital-clock` for `custom:html-template-card` (already installed) - Weather condition from `weather.forecast_home` is mapped to an `mdi:weather-*` icon rendered via `<ha-icon>`, displayed to the left of the time - Icon and time are in a flex row with `align-items: center` so they align correctly - `now()` in the template triggers server-side auto-refresh every minute - Font sizes match the original clock: `max(10vh,10vw)` for time, `max(5vh,5vw)` for date - Edge margins tightened to 24px (was `max(5vw,5vh)`) - Uses `ha-card { position: absolute }` (same pattern as the original clock) so the outer element stays in the wallpanel flex layout, keeping album art centered - Card width capped to `calc(100vw - 48px)` to prevent text overflowing the right edge ## Icon map | Condition | Icon | |---|---| | sunny | `mdi:weather-sunny` | | partlycloudy | `mdi:weather-partly-cloudy` | | cloudy | `mdi:weather-cloudy` | | rainy | `mdi:weather-rainy` | | pouring | `mdi:weather-pouring` | | snowy | `mdi:weather-snowy` | | snowy-rainy | `mdi:weather-snowy-rainy` | | lightning-rainy | `mdi:weather-lightning-rainy` | | lightning | `mdi:weather-lightning` | | fog | `mdi:weather-fog` | | hail | `mdi:weather-hail` | | clear-night | `mdi:weather-night` | | windy | `mdi:weather-windy` | | windy-variant | `mdi:weather-windy-variant` | | exceptional | `mdi:alert-circle-outline` |
Replaces the custom:digital-clock with a markdown card that uses a Jinja
template to map weather.forecast_home states to emojis (e.g. ⛅ for
partlycloudy, ☀️ for sunny, 🌧️ for rainy). The template also renders time
and date, so the card updates every minute via now() auto-refresh.

Card is positioned absolute at bottom-right via :host card_mod, matching
the original clock placement.
jmaroeder force-pushed jmaroeder/wallpanel-clock-cloud-emoji from 8a3479365f to 2a2cc9395d 2026-06-01 21:15:04 +00:00 Compare
jmaroeder force-pushed jmaroeder/wallpanel-clock-cloud-emoji from 2a2cc9395d to 2ee2393e83 2026-06-01 21:27:08 +00:00 Compare
jmaroeder force-pushed jmaroeder/wallpanel-clock-cloud-emoji from 2ee2393e83 to 8b2f853482 2026-06-01 22:02:25 +00:00 Compare
jmaroeder force-pushed jmaroeder/wallpanel-clock-cloud-emoji from 8b2f853482 to 9e57c2f2e9 2026-06-01 22:08:56 +00:00 Compare
jmaroeder force-pushed jmaroeder/wallpanel-clock-cloud-emoji from 9e57c2f2e9 to 4176f9562e 2026-06-01 22:13:44 +00:00 Compare
jmaroeder force-pushed jmaroeder/wallpanel-clock-cloud-emoji from 4176f9562e to e025f74ac0 2026-06-02 02:16:18 +00:00 Compare
jmaroeder changed title from dashboards: dynamic weather emoji next to wallpanel clock to dashboards: dynamic weather icon and clock in wallpanel screensaver 2026-06-02 12:30:51 +00:00
jmaroeder deleted branch jmaroeder/wallpanel-clock-cloud-emoji 2026-06-02 12:41:11 +00:00
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
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!6
No description provided.