Button-card: A single card with rotating alerts for my dashboard!

I’ve been working on a way to conserve space on my dashboards. I have three 7" Fire tablets that I have mounted to the wall. But with the small screen, space is at a premium.

I’ve used button-cards inside of conditional cards to display alerts on my tablets if an entity was in a certain state. However, if multiple of these were active - it would push the other cards below them down and off the screen. I wanted to try to figure out a way to consolidate them into a single card.

I used node-red to create a Home Assistant entity, and then I have a trigger that fires every 3 seconds to swap out the entity data. It also:

  • Counts the number of alerts, and displays it on the card if it’s greater than 1.
  • Everything on the button-card is templated, so you can adjust the color of the alert, the icon, the title, even the entity that toggles by pressing it! I do use the state on the card to display the alert count though.
  • It shows the alert, and then seconds later applies a flashing animation to the text before it switches to the next alert.
  • I’ve created template logic to account for no icon, no title, no label, etc…all so that the layout is consistent between swaps.

Here is a video of the card in action:

In the video above, I’m adding notifications via node red using a subflow to simulate adding alerts to the queue. The queue is managed in memory in node red. I think eventually I’ll swap this out for an MQTT topic so that it’ll persist…

Here is the “HA Alert Queue” subflow I’m using:

Here is the flow to update the node-red created entity:

You’ll also need an input_boolean for when you trigger an update by tapping the button:

    name: Trigger an Alert Update
    icon: mdi:bell

And then the button-card yaml itself:

This is the first iteration of this, so I’m looking for feedback and ideas! Thanks!

EDIT: Adding a few more screenshots.

Sample Lovelace Card

Subflow Config Example

Sample Test Case…

Flow that updates the NodeRed entity