Skip to content

Releases: djdevil/AlertTicker-Card

v1.3.4

Choose a tag to compare

@djdevil djdevil released this 24 Jun 17:14
94ab8be

AlertTicker Card — v1.3.4

🐛 Bug Fixes

Weather badge alignment in cinematic style (#167)

The high/low temperature, AQI and humidity row inside the weather badge was missing its base display: flex; align-items: center CSS rule. All other rows (row1, row2, row3) were explicit flex containers, but row-minmax rendered as a plain block element.

In cinematic style — where the badge arranges all rows horizontally — this caused a visible vertical misalignment of the humidity value and the elements that follow it (wind speed, condition label).

Fixed by adding the missing base flex rule to atc-cw-badge-row-minmax. No configuration changes needed.


conditions_logic: or incorrectly triggering on primary state match alone (#168)

When conditions_logic: or was set, the primary entity state check (primaryOk) was accidentally included inside the OR group alongside the conditions. This meant the alert fired if:

  • the entity was in the configured state ← (alone, without any condition passing)
  • OR any condition was true ← (alone, without the entity being in the configured state)

The correct behavior is:

  • the entity must be in the configured state AND
  • at least one condition must be true (the OR applies only among the conditions)
# Expected: shows only when door is OPEN *and* alarm is enabled or someone is home
alerts:
  - entity_filter: "sensor.interlogix*"
    state: "open"
    conditions_logic: or
    conditions:
      - entity: input_boolean.alarm_enabled
        state: "on"
      - entity: binary_sensor.someone_home
        state: "off"

Fixed in both the card render path and the cross-view overlay watcher.


Editor "entities match" counter ignoring label_filter and area_filter (#170)

The entity count shown next to the device class and text filter fields in the visual editor only applied its own single filter — it did not take into account any label_filter or area_filter that was also set. This caused the count to be inflated (e.g. "120 entities match" for device_class: temperature even when label_filter: [SMART] reduced the real set to a handful).

The runtime behavior was always correct. Fixed by replicating the same combined filter logic (device_class + text filter + label + area) in both editor counter paths.


Card blank when casting to Google Home (#171)

When casting a Lovelace dashboard to a Google Home display, AlertTicker Card rendered as a completely blank card.

Root cause: The Google Cast runtime declares adoptedStyleSheets on ShadowRoot (so Lit's supportsAdoptingStyleSheets feature-detection check passes), but the setter throws "TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'" at runtime. This is a Cast runtime bug — it advertises the API but can't handle Constructable StyleSheets objects. Because Lit relies on this path to inject the card's CSS, all styling is silently lost and the card renders blank.

Fix: At load time, ShadowRoot.prototype.adoptedStyleSheets setter is patched with a try-catch wrapper. When the native setter throws (Cast environment), the fallback iterates over each CSSStyleSheet, reads its rules via cssRules, and injects them as a <style> element inside the shadow root. Normal HA browsers take the fast path (native setter succeeds) with zero overhead.

No configuration changes needed.


📦 Update Instructions

  1. Download alert-ticker-card.js and alert-ticker-card-editor.js
  2. Replace both files in your www/ folder (or the path you set in Resources)
  3. Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R

HACS users: update from the HACS panel — no manual steps needed.


Full changelog: CHANGELOG.md


☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!

Buy Me A Coffee

v1.3.3

Choose a tag to compare

@djdevil djdevil released this 05 Jun 20:55
1e75cc1

AlertTicker Card — v1.3.3

✨ New Features

{entity} placeholder in conditions for entity_filter alerts (#163)

When using entity_filter (or device_class, wildcard filters) the matched entity is not known at config time, so conditions requiring a fixed entity ID couldn't reference it. Now you can use entity: "{entity}" (or entity: "this.entity_id") in any condition to dynamically reference the matched entity — enabling compound AND/OR tests on both state and attributes for every expanded entity.

# Show only entities that are both ON and have notification_control = enabled
alerts:
  - entity_filter: "alert2.zigbee*"
    state: "on"
    conditions:
      entity: "{entity}"
      attribute: notification_control
      operator: "="
      state: enabled

Works in all condition paths: normal, on_change, and the cross-view overlay watcher.


Per-alert native HA card override (#159)

New card property on each alert. When set, the themed rendering is replaced by any native HA card type — tile, entity, button, glance, custom cards, or anything else HA supports. The card's visibility evaluation, cycling logic, snooze, history, and time windows remain completely intact — only the visual content changes.

alerts:
  # Show a tile card instead of the default theme
  - entity: sensor.front_door
    state: "on"
    card:
      type: tile
      entity: this.entity_id
      name: Front door
      icon: mdi:door-open

  # Custom card
  - entity: sensor.smoke
    state: "on"
    card:
      type: custom:mushroom-entity-card
      entity: this.entity_id
      name: Smoke detected

this.entity_id placeholder

Use 'this.entity_id' anywhere inside the card config to reference the alert's matched entity. This is especially useful for entity_filter alerts that expand into multiple entities — each slide automatically gets the correct entity ID substituted.

alerts:
  - device_class: door
    state: "on"
    card:
      type: tile
      entity: this.entity_id   # ← resolved to each matched door entity

Visual editor

The card field is available as a YAML editor under each alert's settings section in the visual editor — no need to write raw YAML. Available in all 12 supported languages.


Per-alert and card-level animation disable (#157)

New disable_animation flag available at both card level and per-alert level. Suppresses all ambient looping animations without touching the theme styling:

  • Emergency pulsing glow + flashing icon
  • Warning/calendar blinking dot
  • Neon scanning line
  • Matrix cursor blink
  • Door/window icon swings
  • All weather widget effects (aurora, fog, rain, lightning, etc.)

Cycle transitions and ticker scrolling are not affected.

Card-level — silence all alerts at once:

type: custom:alert-ticker-card
disable_animation: true

Per-alert — silence a specific noisy alert while others keep animating:

alerts:
  - entity: binary_sensor.front_door
    theme: door
    state: "on"
    disable_animation: true   # icon won't swing

  - entity: binary_sensor.smoke
    theme: emergency
    state: "on"
    # ← still pulses/flashes

The per-alert flag overrides the global setting. Both are available in the visual editor — card-level in the Cycling & Animation section, per-alert in each alert's settings panel (all 12 languages).


Per-alert overlay exclusion + global priority gate (#160)

Two new controls for the cross-view overlay system:

overlay: false per alert

Set overlay: false on any individual alert to prevent it from ever triggering a cross-view overlay banner. The alert continues to appear in the ticker card as usual — only the overlay projection is suppressed.

alerts:
  - entity: sensor.routine_info
    state: "on"
    overlay: false   # shows in ticker, never overlays

overlay_min_priority global threshold

Set a global priority ceiling so only high-priority alerts trigger overlay banners. Alerts with a priority value higher than the threshold are silently excluded from overlay. Defaults to no gate (all alerts can overlay).

overlay_min_priority: 2   # only priority 1 and 2 alerts can overlay

Priority scale: 1 = critical, 2 = high, 3 = normal (default), 4 = low.

Both controls work togetheroverlay: false always wins regardless of priority.

Visual editor

overlay_min_priority is available in the global overlay settings section. The per-alert overlay toggle appears in each alert's settings when overlay mode is enabled. Both are available in all 12 supported languages.


🐛 Bug Fixes (also in this release)

  • card_height not applying to the all-clear state (#145) — card_height only applied to the active-alert render path, not to the "all clear" card (no active alerts). Setting it had no visible effect until an alert was simulated. Fixed by wrapping the clear card in the same atc-inner-clip container used by active alerts. Additionally, when card_height is larger than the natural content size, the content is now vertically centered in the available space.

  • TypeError: css is not a function (#155) — crash on mount in certain HA builds where LitElement.prototype.css is undefined. Fixed with a standards-compliant inline fallback.

  • Overlay fires outside configured time_range (#153) — cross-view overlay banners ignored time_range windows. Fixed by adding the _evalTimeRange() guard to the overlay watcher's _evalAlert().

  • snooze_action not fired on swipe (#146) — swiping left with swipe_to_snooze: true skipped snooze_action execution. Fixed for full parity with the snooze button tap.

  • card_background: true ignoring HA theme (#129) — var(--ha-card-background) was unresolved inside shadow DOM. Fixed via getComputedStyle(this) on the host element.


📦 Update Instructions

  1. Download alert-ticker-card.js and alert-ticker-card-editor.js
  2. Replace both files in your www/ folder (or the path you set in Resources)
  3. Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
  4. Clear the HA frontend cache if the editor still shows the old version

HACS users: update from the HACS panel — no manual steps needed.


Full changelog: CHANGELOG.md


☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!

Buy Me A Coffee

v1.3.2.6

Choose a tag to compare

@djdevil djdevil released this 24 May 15:03
7c1d11e

AlertTicker Card — v1.3.2.6

🐛 Bug Fixes

TypeError: css is not a function (#155)

In certain HA builds or loading contexts, LitElement.prototype.css is undefined. The card crashed on mount before rendering anything.

Fixed by adding a standards-compliant fallback: if LitElement.prototype.css is not available, a css tagged-template function is constructed inline that produces the CSSResult-compatible object ({ cssText, _$cssResult$: true }) that Lit's static get styles() expects.


Overlay fires outside configured time_range (#153)

The overlay watcher's _evalAlert() helper checked _evalVisibleTo() but never _evalTimeRange(). Cross-view overlay banners appeared at any hour regardless of the configured window (e.g. time_range: { from: "21:00", to: "07:00" }).

Fixed by adding a _evalTimeRange(a) guard at the top of _evalAlert(), mirroring the check already present in the card's own _computeActiveAlerts().


snooze_action not fired when swiping to snooze (#146)

With swipe_to_snooze: true, swiping left called _snoozeAlert() directly — skipping the snooze_action execution that always runs when the snooze button is tapped. If you had a service call (e.g. toggling a boolean helper) configured as snooze_action, it silently did nothing on swipe.

Fixed by firing snooze_action in the swipe path before calling _snoozeAlert(), giving the swipe gesture full parity with the button tap.


card_background: true not picking up the HA theme background (#129)

When card_background: true, the card was setting --atc-card-bg-override to the string var(--ha-card-background, ...). Because this is a custom property stored inside a shadow-DOM element, the inner var(--ha-card-background) reference could not be resolved by the browser — it stayed literal and the background always fell back to the hardcoded rgba(0,0,0,0.55) regardless of the active HA theme.

Fixed by reading the resolved value directly from getComputedStyle(this) on the host element. The host lives in the light DOM and participates in the full HA theme cascade, so --ha-card-background resolves to the actual color at call time. That resolved value is stored as the override, and shadow DOM children just receive a plain color string — no unresolvable var() chain.

# Now correctly picks up your HA theme background
type: custom:alert-ticker-card
card_background: true
alerts:
  - entity: sensor.front_door
    message: "Front door open"

📦 Update Instructions

  1. Download alert-ticker-card.js and alert-ticker-card-editor.js
  2. Replace both files in your www/ folder (or the path you set in Resources)
  3. Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
  4. Clear the HA frontend cache if the editor still shows the old version

HACS users: update from the HACS panel — no manual steps needed.


Full changelog: CHANGELOG.md


☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!

Buy Me A Coffee

v1.3.2.5

Choose a tag to compare

@djdevil djdevil released this 09 May 16:07
adbaf14

AlertTicker Card — v1.3.2.5

✨ New Features

🔁 on_change + conditions now work together (#83)

Two related fixes that make on_change: true + conditions behave as expected:

1 — Primary state guard

When state and operator are defined alongside on_change: true, they now act as a current-state filter. The alert fires on any state change, but is only shown while the entity is actually in the declared state. This suppresses alerts on idle / paused / buffering transitions when only playing is meaningful.

2 — Single-object conditions accepted

conditions can now be written as a single inline object as well as a list — previously a single object was silently ignored.

# Fires on every track change, visible only while the speaker is playing
alerts:
  - entity: media_player.living_room_speaker
    operator: "="
    state: playing
    on_change: true
    conditions:
      entity: media_player.all_speakers
      operator: "="
      state: playing
    auto_dismiss_after: 15
    theme: music
    message: "{{ state_attr('media_player.living_room_speaker','media_artist') }} – {{ state_attr('media_player.living_room_speaker','media_title') }}"

🎨 Per-alert custom accent color (#143)

New color property on each alert. Overrides the card border and badge color for that specific alert, independent of its theme. Works with any CSS color value.

alerts:
  - entity: sensor.front_door
    theme: door
    color: "#ff4500"
    message: "Front door open"
  - entity: sensor.smoke
    theme: alarm
    color: "var(--error-color)"
    message: "Smoke detected"

Available as a color picker + text field in the visual editor under the icon section of each alert — always visible, no toggles required. Leave empty to use the theme's default color.


🐛 Bug Fixes

Bottom border clipped on some themes (#141)

Themes that render an outer border (emergency, prism, and others) occasionally showed the bottom border clipped. The sub-pixel rounding of box-sizing: content-box borders caused the bottom edge to fall fractionally outside .atc-inner-clip's overflow: hidden boundary.

Fixed by adding transform: translateZ(0) to .atc-inner-clip, promoting it to a compositor layer with integer pixel snapping.


{state} placeholder not replaced in the ticker scrolling theme (#140)

The ticker theme was rendering a.message raw, skipping the _resolveMessage() call that all other themes use. As a result, {state}, {name}, {entity}, {device}, {timer}, and Jinja2 templates were displayed literally instead of being evaluated.

Fixed by routing the ticker item message through _resolveMessage(), consistent with all other themes.


Snooze menu and history panel appear behind adjacent cards (#142)

isolation: isolate (added in v1.3.2.4 to fix #127) created a stacking context that trapped the menu's z-index inside the card, causing it to render behind neighboring cards.

Fixed by toggling a CSS class atc-popup-open on :host while any popup is open. The class overrides isolation to auto and adds position: relative; z-index: 9999, making the card a stacking context root at z-index 9999 in the masonry/grid layout — above all sibling cards at z-index: auto. isolation: isolate is restored the moment the popup closes, so the #127 fix remains fully intact.


📦 Update Instructions

  1. Download alert-ticker-card.js and alert-ticker-card-editor.js
  2. Replace both files in your www/ folder (or the path you set in Resources)
  3. Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
  4. Clear the HA frontend cache if the editor still shows the old version

HACS users: update from the HACS panel — no manual steps needed.


Full changelog: CHANGELOG.md


☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!

Buy Me A Coffee

v1.3.2.4

Choose a tag to compare

@djdevil djdevil released this 08 May 20:47
dac3710

AlertTicker Card — v1.3.2.4

🚨 Critical Fix — HA 2026.5 compatibility

All visual editor text inputs disappear after HA 2026.5 upgrade (#133)

Home Assistant 2026.5 removed the ha-textfield component (part of Material Web Components). Every text input in the visual editor — entity filters, messages, attributes, URLs, durations, and more — was silently rendered invisible as a result.

Fixed by replacing every ha-textfield instance with the new ha-input component across alert-ticker-card-editor.js. This also resolves #136 (multi-entity filter inputs not accessible) and #137.

⚠️ If you are on HA 2026.5 or later, this update is required to use the visual editor.


☕ If this card saves you time, consider buying me a coffee — it keeps the updates coming!

Buy Me A Coffee


✨ New Features

🎨 All-Clear icon customization

Three new options to match the all-clear card's icon to your alert cards — same size, color, and MDI icon:

show_when_clear: true
clear_use_ha_icon: true
clear_icon: "mdi:check-circle-outline"
clear_icon_size: "2em"
clear_icon_color: "#4caf50"

All three are available via icon picker in the visual editor under ✅ All Clear.


⛈️ 2 New Weather Forecast Themes

Theme Category Effect
storm ⚠️ Warning Diagonal rain streaks + double lightning flash every ~3.5 s that shakes the icon on impact
frost ℹ️ Info Three layers of falling snowflake dots + a slow icy shimmer sweeping left-to-right
alerts:
  - entity: sensor.weather_alert
    state: "storm"
    theme: storm
    message: "Thunderstorm approaching"
  - entity: sensor.weather_alert
    state: "snow"
    theme: frost
    message: "Snowfall expected tonight"

🇹🇷 Turkish (TR) language support (#134)

Full Turkish translation contributed by @yunusuztr, covering all card runtime labels, visual editor UI, theme default messages, TTS prefixes, operator names, category group names, and overlay strings. The card now supports 12 languages.


🐛 Bug Fixes

Overlay banner fires on the same view as the card (#135)

Two related bugs in the cross-view overlay watcher:

  1. Banner visible when card is on screen — the watcher could fire the overlay banner on the same dashboard where the ticker card was already visible. Fixed by using the native el.isConnected DOM property alongside the internal _mounted flag for a more reliable visibility check, and by auto-dismissing any watcher overlay the instant its card reconnects to the DOM.

  2. Banner does not dismiss when alert resolves — the overlay always waited for the full overlay_duration timer to expire, even if the alert condition became inactive in the meantime. Fixed by tracking the currently-displayed alert and calling _hide() within the next 2-second watcher tick as soon as the alert goes inactive.


fire-dom-event action not firing

_handleAction was missing the fire-dom-event case, causing browser_mod popups and other custom DOM events to be silently ignored. Fixed by dispatching an ll-custom event with the full action config. Applies to all action slots: tap_action, hold_action, double_tap_action, clear_tap_action, clear_hold_action, clear_double_tap_action.


Snooze / history / counter buttons appear above Bubble Card popups (#127)

The :host shadow root was missing isolation: isolate, so the card's absolutely-positioned elements participated in the global stacking context and rendered above external popup layers (e.g. Bubble Card). Fixed by adding isolation: isolate to :host.


📦 Update Instructions

  1. Download alert-ticker-card.js and alert-ticker-card-editor.js
  2. Replace both files in your www/ folder (or the path you set in Resources)
  3. Hard-reload the browser: Ctrl+Shift+R / Cmd+Shift+R
  4. Clear the HA frontend cache if the editor still shows the old version

HACS users: update from the HACS panel — no manual steps needed.


Full changelog: CHANGELOG.md

Buy Me A Coffee

v1.3.2.3

Choose a tag to compare

@djdevil djdevil released this 04 May 18:58
31e69dc

AlertTicker Card v1.3.2.3

12 new features · 2 bug fixes


✨ What's New

🎨 8 Spectacular 3D Themes

Eight brand-new themes designed for maximum visual impact using layered CSS animations and CSS 3D transforms. Each brings a unique cinematic effect to every alert slide.

Theme Category Effect
portal 🚨 Critical Two counter-rotating conic-gradient discs form a crimson dimensional vortex; the icon spins and pulses with each cycle
void 🚨 Critical A 3D-perspective accretion disk spins around a deep violet core — a cosmic black hole in your dashboard
volt ⚠️ Warning Horizontal CRT scanlines + an electric bolt that discharges every ~1.2 s; icon strobes on impact
nebula ⚠️ Warning Three independently drifting gas clouds (purple · blue · teal), softly blurred with separate animation timing
prism ℹ️ Info A skewed rainbow light sweep crosses the card; the icon cycles through full-spectrum drop-shadows
arcade ℹ️ Info Tron-style 3D perspective grid scrolling toward the viewer, monospace badge font
diamond ✅ OK Crystalline facet overlay + specular shimmer that sweeps left-to-right; icon catches light with a gentle tumble
quantum ✅ OK Two atomic orbital rings rotating in opposite directions in CSS 3D perspective around a pulsing nucleus
alerts:
  - entity: binary_sensor.front_door
    state: "on"
    theme: portal      # or: void · volt · nebula · prism · arcade · diamond · quantum
    message: "Motion detected"

All 8 themes are fully compatible with ha_theme: true — decorative 3D layers fade to ~15–20% opacity and badge colors follow HA semantic color variables (--error-color, --warning-color, etc.).


📐 icon_size — Per-alert Icon Size Override (#128)

New per-alert option to override the default icon size with any CSS value. Useful when different icon types (e.g. mdi:battery vs a thin sensor state icon) have different visual weights at the same nominal size.

alerts:
  - device_class: battery
    use_ha_icon: true
    icon_size: "1.2em"    # shrink battery icon to match other alerts

Accepts any CSS length: em, px, rem. Configurable in the visual editor under the icon section.


🖼️ HA Theme Card Variables (#129)

The card now fully respects all three standard Lovelace card CSS variables:

Variable Effect
--ha-card-border-radius Card corner rounding (was already supported)
--ha-card-box-shadow Applied to :host — theme-defined shadows now render correctly
--ha-card-border-width + --ha-card-border-color Used as border source when card_border is not explicitly enabled

No config changes required — any HA theme that sets these variables will automatically apply to the card.


🎨 card_background — Custom Background / Transparency (#130)

New global toggle that overrides the alert theme's background with a custom color or the HA theme variable.

card_background: true                   # use --ha-card-background from HA theme
card_background: "rgba(20,20,30,0.7)"   # fixed semi-transparent dark background
card_background: "rgba(255,255,255,0.05)"  # near-transparent glass effect

When true, uses var(--ha-card-background) automatically so the card blends with other dashboard cards. Toggle and color picker (with opacity slider) available in the visual editor under Layout & Appearance.


🔗 Jinja2 Templates in navigation_path (#126)

tap_action.navigation_path (and hold_action, double_tap_action) now resolves {{ states('...') }} and {{ state_attr('...','...') }} templates at the moment of the tap, enabling dynamic navigation based on entity state.

tap_action:
  action: navigate
  navigation_path: "{{ states('sensor.room_presence') }}"

The same mini-evaluator used for message fields handles the template synchronously at tap time. If the template is too complex for the local evaluator, the raw string is used as a fallback.


🐛 Bug Fixes

Fix
Music player cover art invisible with ha_theme: true (#119) — the blanket [class$="-bg"] { opacity: 0.25 !important } HA theme rule was matching .mu-art-bg, dropping album art to 25% opacity. Fixed with :not(.mu-art-bg) exclusion + explicit dark base color for the player container.
Grouped alert snooze ignores snooze_default_duration — 💤 on a group slide always opened the duration menu even when snooze_default_duration was set. Fixed by applying the same fixed-duration logic to the group code path for an immediate one-tap snooze.

📦 Installation

HACS (recommended)

Search for AlertTicker Card in HACS → Frontend, or click:

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

Manual

Download alert-ticker-card.js and alert-ticker-card-editor.js from this release and copy both files to /config/www/. Then hard-reload your browser (Ctrl+Shift+R).


If this card saves you time, consider buying me a coffee ☕

Buy Me A Coffee

v1.3.2.1

Choose a tag to compare

@djdevil djdevil released this 02 May 22:07
4b6f8c8

[1.3.2.1] - 2026-05-03

Fixed

  • Music player cover art invisible with ha_theme: true (#119) — the v1.3.2 fix restored the art in HA's default theme but broke under the "Adapt to HA theme" option. Root cause: the ha_theme CSS block contains a blanket [class$="-bg"] { opacity: 0.25 !important } rule intended to dim decorative backgrounds; it also matched .mu-art-bg (the blurred album art layer), dropping it to 25% opacity. Additionally, the generic .at-fold-wrapper > div { background: var(--card-background-color) !important } rule overwrote the dark base color of the music player. Fixed by adding :not(.mu-art-bg) to the opacity rule and a specific .atc-ha-theme .at-music--player { background: #0c0a14 !important } override so the player retains its dark background regardless of the active HA theme.

  • Grouped alert snooze ignores snooze_default_duration — clicking 💤 on a group slide always opened the duration picker menu even when snooze_default_duration was configured. Root cause: _renderSnoozeButton had a separate code path for group slides (alert._isGroup) that always rendered the menu, bypassing the fixedDuration check used for individual alerts. Fixed by applying the same logic to the group path: if snooze_default_duration is set, the button directly calls _snoozeGroup(alert, duration) with a single tap; the menu is shown only when no default duration is configured.


v1.3.2

Choose a tag to compare

@djdevil djdevil released this 02 May 15:28
299217f

AlertTicker Card v1.3.2

2 new features · 12 bug fixes


✨ What's New

🕐 Clock Widget Color Customization

Three new options let you fully customize the appearance of the clock clear-state display without writing CSS. Compatible with all clock styles (aurora, gold, matrix) — the custom value always takes precedence over the style's built-in palette. All three pickers are available in the visual editor under ✅ All Clear → Custom colors. (#124)

show_when_clear: true
clear_display_mode: clock
clear_clock_color: "#00e5ff"
clear_clock_date_color: "rgba(0,229,255,0.5)"
clear_clock_background: "#0a0a1a"
Option Description
clear_clock_color CSS color for the clock digits (hex, rgb, named color)
clear_clock_date_color CSS color for the date text below the time
clear_clock_background CSS color or gradient for the card background

🌡️ Custom Sensor Overrides for the Weather Widget

Five new optional per-card options let you replace any individual weather field with a reading from your own sensor — without creating a template weather.* entity. The clear_weather_entity remains required for the condition icon, animated background, and forecast grid. (#123)

show_when_clear: true
clear_display_mode: weather_forecast
clear_weather_entity: weather.home
clear_weather_temperature_entity: sensor.local_temperature
clear_weather_humidity_entity: sensor.local_humidity
clear_weather_temp_high_entity: sensor.today_max_temp
clear_weather_temp_low_entity: sensor.today_min_temp
clear_weather_aqi_entity: sensor.pm25
Option Description
clear_weather_temperature_entity Override current temperature with a local sensor
clear_weather_humidity_entity Override humidity with a local sensor
clear_weather_temp_high_entity Override today's high with a sensor
clear_weather_temp_low_entity Override today's low with a sensor
clear_weather_aqi_entity Add air quality / PM2.5 reading (🌿 badge)

All five are independent and optional. Pickers available in the visual editor under ✅ All Clear → Custom sensors.


🐛 Bug Fixes

# Fix
#119 Music player cover art disappears in HA light themes — the blurred art background (position: absolute) was missing a positioned containing block on the player container. In HA's dark theme the card wrapper happened to serve as the ancestor; in light theme a different ancestor was resolved, pushing the art layer out of view. Fixed by adding position: relative; overflow: hidden to .at-music--player, plus an explicit dark base color so the card renders correctly even while art is loading.
#113 Manual ‹ › navigation resets to first alert in test mode_preview_index was re-evaluated on every HA state update (which fires continuously). Any manual navigation away from the preview alert was immediately overridden on the next update. Fixed by tracking _lastAppliedPreviewIndex — the jump now only fires when the editor actually changes the preview selection, not on every state update.
{%-only Jinja2 templates not rendered in overlay — messages built exclusively with {%...%} blocks (no {{...}}) were returned raw by the mini-evaluator and never sent to HA's WebSocket renderer. Fixed by including {% in the residual-syntax guard inside _evalTemplate.
Camera stream audio persists after overlay dismissal<ha-camera-stream> was hidden with display: none but left in the DOM, keeping the WebRTC/HLS audio track alive. Fixed by removing the stream element before hiding the overlay, which triggers disconnectedCallback and correctly stops all media tracks.
Camera snapshot proportions wrong in overlay — the snapshot <img> was not wrapped the same way as the live stream fix. Applied the same <div> wrapper pattern (overflow: hidden, line-height: 0, border-radius) for consistent sizing across all camera aspect ratios.
clear_clock_background ignored on aurora / gold / matrix styles — style-specific CSS rules applied hardcoded background values at the same specificity as the variable, overriding user-defined colors. Fixed using the var(--atc-ck-bg, <hardcoded>) fallback pattern.
Weather high/low temperatures missing in plain weather mode — the forecast subscription (_subscribeForecast) was only started for weather_forecast and forecast modes. Users on plain weather mode never saw today's min/max. Fixed by starting the subscription for weather mode as well.
History entries show raw Jinja2 for complex templates — the 500 ms async cancel timer in _recordHistory fired before HA returned results for multi-statement templates. Replaced with a done-flag pattern and a 5 s abort timeout.
History recorded during visual editor preview — config changes in the editor triggered _recordHistory, writing phantom entries from incomplete or test configurations. Fixed with an _isEditMode() guard.
state: "{{ }}" trigger templates intermittently cleared_syncTemplates only kept message/secondary-text subscriptions alive. Trigger-condition templates were cancelled and their cache deleted on every set hass(), causing alerts to briefly disappear between state updates. Fixed by including alert.state templates in the keep-alive set.
Test mode preview broken with YAML-pasted configs — alerts whose entities do not exist in the current HA instance were filtered out even in test mode, preventing the preview jump from working. Fixed by bypassing the entity-existence check when test_mode is active.
Humidity hidden in stage weather theme — humidity was placed in .atc-cw-badge-row2 which the stage style suppresses. Moved to .atc-cw-badge-row-minmax alongside high/low and AQI.

📦 Installation

HACS (recommended)

Search for AlertTicker Card in HACS → Frontend, or click:

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

Manual

Download alert-ticker-card.js and alert-ticker-card-editor.js from this release and copy both files to /config/www/. Then hard-reload your browser (Ctrl+Shift+R).


If this card saves you time, consider buying me a coffee ☕

Buy Me A Coffee

v1.3.1

Choose a tag to compare

@djdevil djdevil released this 01 May 11:12
ba9e9bc

AlertTicker Card v1.3.1

5 new features · 7 bug fixes


✨ What's New

📹 Live Camera Stream in Overlay Banner

When a camera_entity is set, the new per-alert toggle camera_live: true replaces the static snapshot in the overlay banner with a live HLS / WebRTC stream powered by <ha-camera-stream>. Falls back silently to the static snapshot when the streaming component is not yet loaded by HA.

alerts:
  - entity: binary_sensor.front_door_motion
    state: "on"
    message: "Motion at front door"
    camera_entity: camera.front_door
    camera_live: true
    overlay_mode: true

Configurable in the visual editor — 📷 Camera section → Live stream toggle (visible only when a camera entity is selected).


🖼️ Camera as Alert Card Background

New per-alert toggle camera_in_card: true shows the configured camera image as a full-bleed background layer behind the alert card slide — visible on every rotation, not just when the overlay fires. The card content is overlaid on top with a semi-transparent backdrop so all text and buttons remain readable. Works with all 41 themes.

alerts:
  - entity: binary_sensor.front_door_motion
    state: "on"
    message: "Motion at front door"
    theme: intruder
    camera_entity: camera.front_door
    camera_in_card: true

🔘 Hide History / Snooze Buttons

Two new global options (both default true) to completely remove the action buttons from the card — useful for minimal layouts or dashboards where history and snooze are not needed. (#118)

show_history_button: false   # hide 📋
show_snooze_button: false    # hide 💤

➡️ secondary_value_align: right — Per-Alert Layout

Move the secondary value (secondary_text, secondary_entity, or {timer}) to the right column on the same row as the message title instead of below it. This is a per-alert option — each alert in the card can use a different layout independently. The nav counter slot is hidden when active. (#118)

alerts:
  - entity: sensor.co2_ppm
    operator: ">"
    state: "1000"
    message: "CO₂ level critical"
    secondary_entity: sensor.co2_ppm
    secondary_value_align: right

📝 history_message — Custom History Log Entry

Override what gets written to the history log for any alert. Useful when message is a complex Jinja2 template that would produce a verbose or meaningless log entry. Supports {name}, {state}, {entity} placeholders. When not set, the main message is recorded as before (non-breaking). (#114)

alerts:
  - entity: sensor.power_meter
    operator: ">"
    state: "3000"
    message: "{{ state_attr('sensor.power_meter','current_power') | round(0) }} W · {{ now().strftime('%H:%M') }}"
    history_message: "High power usage detected"

🐛 Bug Fixes

# Fix
#110 Music player badge_label ignoredbadge_label now replaces "NOW PLAYING" when set; falls back to "NOW PLAYING" when absent
#110 Music player: entity/room name missing for entity_filter alerts — matched entity's friendly name is now shown as a subtitle below the artist line (respects show_filter_name: false)
#117 Timer secondary text invisible on HA light themestimer_pulse and timer_ring themes now use var(--primary-text-color) for secondary text instead of the hardcoded white that was correct for dark themes only
#113 Card flicker with mixed {{ }} + {name} templates — WebSocket subscriptions that already have a cached result are no longer discarded on each set hass() call, eliminating the flicker between raw template and resolved value
#112 auto_dismiss_after not dismissing — timer callback now calls _computeActiveAlerts() directly instead of requestUpdate(), so the alert is actually removed from the rendered list when the timer expires
#107 trigger_delay fires early with multi-entity conditions — elapsed time is now computed from Math.max(last_changed) across all condition entities, not just the primary entity
#105 #119 Music player cover art blank with local HA image URLs — reads entity_picture_local first, falls back to entity_picture; fixes blank art with Spotify, local media, and iOS Companion App

📦 Installation

HACS (recommended)

Search for AlertTicker Card in HACS → Frontend, or click:

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

Manual

Download alert-ticker-card.js and alert-ticker-card-editor.js from this release and copy both to /config/www/. Then hard-reload your browser (Ctrl+Shift+R).


If this card saves you time, consider buying me a coffee ☕

Buy Me A Coffee

v1.3

Choose a tag to compare

@djdevil djdevil released this 28 Apr 20:55
6e49e67

AlertTicker Card v1.3

📱 Mobile push notifications

Per-alert push notifications via any HA notify.* service. When an alert activates, the card sends a notification with a configurable title and message — both support full Jinja2 templates and fall back to the alert badge label / message when left empty.

alerts:
  - entity: binary_sensor.front_door
    state: "on"
    theme: door
    message: "Front door opened"
    push_notify: true
    push_notify_service: mobile_app_my_phone
    push_notify_title: "🚪 Door Alert"
    push_notify_message: "Front door has been opened — state: {state}"
Key Description
push_notify Enable push notification for this alert
push_notify_service notify.* service name (e.g. mobile_app_my_phone, notify.telegram)
push_notify_title Optional title (Jinja2). Defaults to alert badge label
push_notify_message Optional message (Jinja2). Defaults to alert message

A global 📱 Push Notifications section in the General tab provides a master toggle (push_notify_enabled) to disable all push notifications at once without changing individual alerts. Everything is configurable in the visual editor — no YAML required.


🎵 Music player — MDI icons, iOS rendering, button fix

Four improvements to the music_player alert type:

  • MDI icons for all controls — play/pause, previous, next, and mute now use <ha-icon mdi:...> instead of emoji characters, rendering correctly in the HA Companion App on all platforms.
  • Buttons unresponsive on desktop when tap_action is set — play/pause, prev/next, mute and the volume slider had no effect when the alert had a tap_action or double_tap_action. The card's outer pointer handler was intercepting events and suppressing click via preventDefault. Fixed with stopPropagation on all button elements.
  • Blurred art and vinyl not rendering on iOS — the album art background and spinning vinyl disc were invisible on iOS Safari. Root cause: inset: 0 shorthand not supported on iOS Safari < 15.4, missing -webkit-filter prefix, and missing will-change: transform for GPU compositing. All three are now applied.
  • Cover art too dark on desktop — background brightness raised from 0.4 to 0.55 for a better visual balance.

🌐 Full Jinja2 {% if %} / {% else %} block tag support

Template fields (message, secondary_text, group_message, group_expanded_message, group_secondary_text, overlay messages) now correctly evaluate Jinja2 block tags even without any {{ }} expression. The {{ "" }} workaround is no longer needed:

message: >
  Waste collection in {state}
  {% if state_attr('sensor.bins','daysTo') == 1 %} day {% else %} days {% endif %}

🗂️ Group tap / hold actions + custom secondary text

Three new options for grouped filter alerts, all configurable in the visual editor:

alerts:
  - device_class: update
    group: true
    group_message: "🐳 {count} updates available"
    group_secondary_text: "Tap to manage · {count} pending"
    group_tap_action:
      action: navigate
      navigation_path: /update
    group_hold_action:
      action: url
      url_path: http://portainer.local
Key Description
group_tap_action Action when tapping the collapsed group header. Default: expand/collapse (non-breaking)
group_hold_action Action when holding the collapsed group header
group_secondary_text Custom secondary line replacing the auto-generated entity name list. Supports {count}, {names}, Jinja2

💤 Snooze menu: 1 week and 1 month

The snooze duration menu now includes 1 week (168 h) and 1 month (720 h) alongside the existing 1h / 4h / 8h / 24h options, available in all 11 supported languages.

For a fixed long snooze without a menu (single tap), snooze_duration: 168 and snooze_default_duration: 720 already worked in previous versions.


🔔 Overlay improvements

  • Fires for ALL matching entities in filter-mode — when a device_class, entity_filter, label_filter, or area_filter alert had multiple entities simultaneously satisfying the condition (e.g. 3 batteries below 20%), the overlay fired only for the first entity. Now every matching entity gets its own banner, fired one at a time (2 s apart), with the correct per-entity message. When an entity recovers it is removed from the notified set so it can re-fire if the condition becomes active again.
  • Respects trigger_delay — the overlay watcher now correctly waits the full configured delay before firing.
  • No longer fires in the same view as the card — three overlapping bugs caused the overlay to fire even when the card was visible on the active dashboard view. All three are fixed: _bases not stamped on first watcher tick when mounted, card-ID-based dedup key preventing cross-instance suppression, and _overlayShown gate blocking multiple suppress() calls.

🐛 Bug fixes

  • trigger_delay resets to zero on page load (#88) — if an entity was already in the trigger state when the dashboard was opened, the card restarted the full delay from scratch instead of firing immediately. Fixed by reading entity.last_changed, subtracting the already-elapsed time, and activating instantly if the delay has already passed.
  • Snooze pill not visible over the clear widget (#106) — when show_when_clear: true and all alerts were snoozed, the snooze bar was returned early and blocked the weather/clock widget entirely. Now the widget renders correctly with the 💤 pill overlaid on top.
  • hold_action: url on desktopwindow.open("_blank") inside a setTimeout loses user-activation and is silently blocked by popup blockers. Fixed by deferring the open to pointerup, a direct user-interaction event that is never blocked.
  • hold_action: url on mobile/touch — iOS/Safari sends pointercancel instead of pointerup after a long-press (WKWebView limitation), so the URL was never opened. Fixed by using window.location.href directly from the hold timer for touch gestures.
  • Overlay secondary_text with {% %} blocks — secondary text in overlay banners containing only Jinja2 block tags was rendered verbatim instead of being evaluated server-side.

📦 Full changelog

See CHANGELOG.md for the complete list of changes.


☕ If this update saves you time, consider buying me a coffee — it keeps the development going!

Buy Me A Coffee