Skip to content

Releases: djdevil/AlertTicker-Card

v1.3.7

Choose a tag to compare

@djdevil djdevil released this 09 Jul 21:13
95a08ac

AlertTicker Card — v1.3.7

🩹 Patch Fix

Test mode preview shows wrong alert when config has group: true alerts (#173)

When at least one alert had group: true, the test mode preview selected the wrong card for any alert at priority 2, 3, or 4. Priority-1 alerts appeared correct and all other priorities showed an unrelated alert.

Root cause: The test mode findIndex ran on the pre-grouping active array to find the previewed alert's position. The grouping pass then collapsed N group: true entities into 1 slide, shifting the positions of every alert that came after the grouped entries. Because _currentIndex was set from the pre-grouping index but _activeAlerts was updated to the post-grouping array, the card rendered the wrong alert.

Priority-1 alerts were unaffected only because they sort before the group: true entries and are not shifted.

Fix: The test mode index resolution now runs after the grouping pass on the final _activeAlerts array, keeping _currentIndex always consistent with what is actually displayed.

No configuration changes needed.


✨ New Features

assist action — open the HA voice assistant from any tap/hold slot (#180)

You can now set action: assist on any action slot to open the Home Assistant voice assistant dialog directly from the card.

Supported slots: tap_action, hold_action, double_tap_action, snooze_action, clear_tap_action, clear_hold_action, clear_double_tap_action, group_tap_action, group_hold_action.

YAML example:

tap_action:
  action: assist
  pipeline_id: ""          # optional — leave empty for the HA-preferred pipeline
  start_listening: true    # optional — true opens the mic immediately

Parameters:

Parameter Type Default Description
pipeline_id string "" (preferred) ID of the voice pipeline to use. Leave empty to use the HA-preferred pipeline.
start_listening boolean false When true, the microphone opens immediately without requiring a tap on the mic button.

Both parameters are also available in the visual editor action dropdowns for all supported action slots, with full translations in all 12 languages (it, en, fr, de, nl, vi, ru, da, cs, pt, es, tr).


{area} placeholder in alert messages (#166)

You can now use {area} in any message field to display the Home Assistant area name the entity (or its parent device) belongs to.

Example:

alerts:
  - entity: binary_sensor.motion_kitchen
    message: "Motion detected in {area} — {name} is {state}"

Result: Motion detected in Kitchen — Motion Kitchen is on

How it resolves:

  1. Checks if the entity itself has an area assigned in HA
  2. Falls back to the parent device's area if the entity has none
  3. Returns an empty string if no area is assigned

Supported fields: message, secondary_text, tts_message, push_notify_title, push_notify_message, group_expanded_message — and any field that accepts placeholders. The overlay banner engine also resolves {area} correctly.


📦 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.6.4

Choose a tag to compare

@djdevil djdevil released this 09 Jul 17:54
6eec269

AlertTicker Card — v1.3.6.4

🩹 Patch Fixes

Root cause — two separate problems:

  1. WebSocket reconnect not detected: When HA restarts, the weather/subscribe_forecast WebSocket subscription is killed server-side. The subscribe guard (entity !== forecastEntity) blocked re-subscription after reconnect since the entity name hadn't changed. Forecast data became permanently stale or blank.

  2. Card remount not triggering re-subscribe: disconnectedCallback nulled _forecastUnsub but left _forecastEntity set, blocking re-subscription on Lovelace remounts (dashboard navigation, panel reload).

Fix: hass.connection.socket is tracked — when it becomes a new object (new WebSocket after HA reconnects), _forecastEntity is reset to force a fresh subscription. _forecastEntity is also reset in disconnectedCallback for clean remounts.


📦 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.6.3

Choose a tag to compare

@djdevil djdevil released this 09 Jul 17:12
40dfbd0

AlertTicker Card — v1.3.6.3

🩹 Patch Fixes

disable_animation / clear_disable_animation — animations still playing with show_when_clear: true (#172)

Setting clear_disable_animation: true had no effect when the card was in the show_when_clear mode. All weather widget animations (sun rotation, halo float, cloud drift, shooting star, snowflakes, etc.) continued to play regardless of the flag.

Root cause: The show_when_clear render path wrapped the weather widget in a plain <div> with no at-fold-wrapper class. All animation-play-state: paused rules are scoped to .at-fold-wrapper.atc-no-anim .element — without that ancestor class the selector never matched and atc-no-anim was never effective.

Fix: The wrapper div in the show_when_clear path now carries the at-fold-wrapper class, and atc-no-anim is added to it when disable_animation or clear_disable_animation is set. The same check is also patched for the show_widget_in_cycle slide path.

No configuration changes needed.


Weather widget stops displaying after HA restart (#181)

After a Home Assistant restart, the weather forecast widget went blank and required a browser refresh to recover.

Root cause — two separate problems:

  1. WebSocket reconnect not detected: When HA restarts, the weather/subscribe_forecast WebSocket subscription is killed server-side. The subscribe guard (entity !== forecastEntity) blocked re-subscription after reconnect since the entity name hadn't changed. Forecast data became permanently stale or blank.

  2. Card remount not triggering re-subscribe: disconnectedCallback nulled _forecastUnsub but left _forecastEntity set, blocking re-subscription on Lovelace remounts (dashboard navigation, panel reload).

Fix: hass.connection.socket is tracked — when it becomes a new object (new WebSocket after HA reconnects), _forecastEntity is reset to force a fresh subscription. _forecastEntity is also reset in disconnectedCallback for clean remounts.

No configuration changes needed.


disable_animation / clear_disable_animation — sun, halo, shooting star, and snowflakes still animating (#172)

Four weather elements were absent from the animation-play-state: paused !important rule: .sun-core (pulsing glow), .sun-halo (floating halo), .w-shooting-star (shooting star trail), .w-snowflake (falling snowflakes). All four are now included.

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.6.2

Choose a tag to compare

@djdevil djdevil released this 09 Jul 17:02
ed6399c

AlertTicker Card — v1.3.6.2

🩹 Patch Fix

Weather widget stops displaying after HA restart (#181)

After a Home Assistant restart, the weather forecast widget went blank and required a browser refresh to recover.

Root cause — two separate problems that compound each other:

  1. WebSocket reconnect not detected: When HA restarts, the weather/subscribe_forecast WebSocket subscription is killed on the server side. The card uses a subscribe guard (entity !== forecastEntity) to avoid redundant re-subscriptions during normal operation — but this guard also blocked re-subscription after the reconnect, since the entity name hadn't changed. _forecastData became permanently stale and the forecast panel went blank.

  2. Card remount not triggering re-subscribe: disconnectedCallback nulled _forecastUnsub but left _forecastEntity set. If Lovelace remounted the card (dashboard navigation, panel reload), the subscribe guard again prevented a fresh subscription.

Fix:

  • hass.connection.socket is tracked on every hass update. When it becomes a new object (a new WebSocket is opened after HA reconnects), _forecastEntity is reset to null, forcing a fresh weather/subscribe_forecast subscription.
  • _forecastEntity is also reset to null in disconnectedCallback so any remount always starts a clean subscription.

No configuration changes needed.


disable_animation / clear_disable_animation — sun, halo, shooting star, and snowflakes still animating (#172)

Four weather elements were not included in the animation-play-state: paused !important rule and continued to animate even when disable_animation or clear_disable_animation was enabled:

  • Sun core glow pulse (.sun-coresunBreath)
  • Sun halo float (.sun-halohaloFloat)
  • Shooting star trail (.w-shooting-starshootingStar)
  • Falling snowflakes (.w-snowflakesnowFall)

All four selectors are now included, completing full animation suppression for the All Clear weather widget.

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.6

Choose a tag to compare

@djdevil djdevil released this 09 Jul 16:15
073de61

AlertTicker Card — v1.3.6

✨ New Feature

clear_disable_animation — disable weather widget animations independently (#172)

New card-level flag that suppresses all animations in the All Clear weather widget without affecting alert animations:

clear_disable_animation: true

Freezes: rotating sun rays, drifting clouds, twinkling stars, glowing moon, fog, rain, wind, and all other weather condition effects.

The existing disable_animation: true already covers the widget (and now works correctly — see fix below), but clear_disable_animation is the right choice when you want a static weather display while keeping emergency pulse, warning blink, and other alert effects alive.

Available as a toggle in the visual editor under the Weather badge style section (all 12 languages).


🐛 Bug Fixes

disable_animation not suppressing weather clear-widget animations (#172)

disable_animation: true was correctly pausing weather condition elements (fog bands, rain drops, wind lines, etc.) but left four atmospheric elements from _renderWeatherBg still animating:

  • Rotating sun rays (.sun-rays-wrap)
  • Drifting clouds (.w-cloud)
  • Twinkling stars (.w-star)
  • Glowing moon (.w-moon)

Fixed by adding these four selectors to the existing animation-play-state: paused !important rule block. All weather animations in the all-clear widget are now fully suppressed when disable_animation: true is set.

No configuration changes needed.


History close button invisible on mobile / HA app (#179)

The close button in the history panel existed but was effectively invisible and untappable on mobile devices.

Root cause: The button was styled with font-size: 0.80rem, color: rgba(255,255,255,0.5), no background, no border, and only 2px 4px padding — a near-invisible label with a tiny touch target. On the HA mobile app there is no hover state, so the button never became visible. With ha_theme: true and a light card background, the white text at 50% opacity disappeared entirely.

Fix: Restyled as a visible pill button with:

  • Subtle semi-transparent background and border (adapts to dark and light themes)
  • Full-opacity text (rgba(255,255,255,0.85) / HA theme variable)
  • min-height: 30px and touch-action: manipulation for reliable mobile tapping
  • Active state for touch feedback

No configuration changes needed.


Test mode showing wrong card when priority ≠ 1 (#173)

When using the editor's test mode to preview a specific alert, changing that alert's priority caused the wrong card to be displayed.

Root cause: Alerts are sorted by priority before rendering. When test mode first jumped to the previewed alert, it stored the alert's sorted-array position in this._currentIndex and then skipped re-evaluation on subsequent updates (guarded by lastAppliedPreviewIndex). When priority was changed in the editor, the active array was re-sorted but this._currentIndex still pointed to the old sorted position — now occupied by a different alert.

Priority 1 appeared to work because sorting to position 0 happened to match the default currentIndex, so the correct card rendered coincidentally.

Fix: The lastAppliedPreviewIndex guard is removed. Test mode now re-resolves the target alert's position in the sorted array on every update. A secondary guard (pi !== this._currentIndex) prevents unnecessary re-renders when the position hasn't changed.

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.5

Choose a tag to compare

@djdevil djdevil released this 05 Jul 18:52
08d72f5

AlertTicker Card — v1.3.5

🐛 Bug Fixes

Vertical layout renders at double height (#174)

With vertical: true, the card appeared at roughly twice its correct height — the alert content occupied the top half and an equal blank area appeared below it.

Root cause: The card_height centering fix in v1.3.4 (#145) made .atc-inner-clip a flex column container and gave .at-fold-wrapper flex: 1. Vertical mode independently sets height: 100% on .at-fold-wrapper. The two rules together — flex: 1 inside a flex container AND height: 100% on the same element — create a circular size dependency that browsers resolve by doubling the height.

Fix: .atc-inner-clip is reset to display: block inside .atc-vertical, exactly matching its pre-v1.3.4 behavior. The flex centering for card_height remains active for all non-vertical cases.

No configuration changes needed.


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.


state list not working in overlay / filter alerts (#176)

Using a list of states to match multiple values (e.g. show when a media player is playing or paused) was partially broken: it worked in the card's render path but not in the cross-view overlay watcher or filter-alert paths.

Root cause: The card render path uses _matchesState, which already handles arrays. The overlay watcher and filter paths use a separate _matchOp helper that did not — it would coerce the array to a string ("playing,paused") and never match.

Fix: _matchOp now short-circuits on array values with the same "is one of" logic used by _matchesState.

Correct config for multiple states:

alerts:
  - entity: media_player.living_room
    state:
      - "playing"
      - "paused"
    theme: info
    message: "Now playing: {state}"

No configuration changes needed if you were already using the array syntax — it now works consistently everywhere.


📦 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.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