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.

Requirements

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

Conclusion

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.

Feedback

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.