Icon Colour based on Sensor State

Configuration Frontend
1

Hi all,

I’m trying to configure a Glance Card using a combination of media entities and sensors. Simply to display when a certain device is in use. The iocn colour of the media entites, such as Sonos and Chromecast, changes when in use. I want to mimic this behaviour with the two below sensors. I’m not sure if this is possible, or if it is, where I’m going wrong in my configuration.

For the computer and the television I’m using TP-Link HS110 sockets and creating a sensor based off the power consumption to tell me whether they are on or off. That works fine, but I’ve been trying to get the icon to change colour like the rest of the media entities automatically do. Am I going about this the wrong way? I’m not great when it comes to templating.

Cheers!

You can see that the TV and Computer (Maurice) are on.
Glance
Sensor Configuration

Sensor
Sensor707×127 15.6 KB

Customize.yaml
customise
customise904×61 10 KB

2

Add this to your card:

state_color: true

Then vote here:

1 Like
3

Hey, thanks for the reply! I tried this, but it still isn’t working.

Below is the config for the card in particular if that helps.

      - columns: 4
        entities:
          - entity: sensor.tv_status
            name: Television
            state_color: true
          - entity: media_player.television
            icon: 'mdi:cast'
            name: Chromecast
          - entity: media_player.lounge
            icon: 'mdi:speaker-multiple'
          - entity: media_player.bedroom
            icon: 'mdi:speaker'
          - entity: media_player.study
            icon: 'mdi:speaker'
          - entity: media_player.bathroom
            icon: 'mdi:speaker'
          - entity: media_player.study_2
            icon: 'mdi:speaker'
          - entity: sensor.computer_status
            icon: 'mdi:desktop-classic'
            name: Maurice
            state_color: true
        title: Home Entertainment
        type: glance
4

Don’t indent it. Put it hard against the margin.

1 Like
5

Thanks again for the help. For some reason that wouldn’t work either so I assumed it was the way I had configured the sensors as opposed to the customisation on the frontend; I’m still learning! I created binary_sensors for both devices and now it works.

Cheers, mate!