I prefer to keep only active devices displaying in Home Assistant's front-end to keep things clean and was previously using Node-RED to accomplish this. Now with recent update's to Home Assistant's Lovelace interface we can do this all within Home Assistant by using Conditional Cards.
- some Chromecast device(s) setup in Home Assistant
- Home Assistant
Setting it up
You will go to the top right from the UI and click the 3 dots and then press "Configure UI". From here you can now configure existing cards as well as add new ones to the current Home Assistant page. What you want to do is add a new card by press the plus
+ in the bottom right and click
Manual Card. You will need need to paste in this YAML modifying it to match your setup:
cards: - card: entity: media_player.master_bedroom type: media-control conditions: - entity: media_player.master_bedroom state_not: unavailable type: conditional - card: entity: media_player.living_room type: media-control conditions: - entity: media_player.living_room state_not: unavailable type: conditional - card: entity: media_player.office type: media-control conditions: - entity: media_player.office state_not: unavailable type: conditional type: vertical-stack
The above snippet is setup to work with three Chromecast's in a
vertical-stack card to keep them organized and together. When you put in the snippet it should give you a nice little preview of what it looks like:
Note that in the above picture I am using a dark theme for Home Assistant called Midnight so your UI will probably look a little different. My front-end is setup to automatically switch between it for night time and use the default for day time.
It's awesome to see Home Assistant evolve and give us new ways of doing things that simplify the process. I'm really happy with the changes to Lovelace and the decision to use YAML as the language of choice.
This can easily be modified to hide/show any entity under any circumstance. This makes it easy to keep your Home Assistant front-end clean and straight to the point.
I hope others find this useful. I thought this would be a good addition on top of my other post about using Node-RED to hide entities from the front-end.
If you run into any issues with this or just want to leave some feedback feel free to do so below. I enjoy hearing back from my readers.