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:
input_boolean:
trigger_alert_update:
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