Different icon for on/off in glance card

maxandersen · January 4, 2019, 9:51pm

Is it possible to have the icon change on glance cards based on state ?

i.e. I have a group/switch I would like to just have in a glance card and clicking and hold long press works great but the icon never changes.

Any way to have glance card have such visual indication ?

Here is what I have so far:

    - type: glance
       title: Winter Garden
       show_name: false
       entities:
        - entity: group.winter_garden_lights
          icon: mdi:lightbulb-outline
          tap_action:
            action: toggle
      - sensor.temperature_winter_garden
      - timer.timer_winter_garden

sjee · January 27, 2019, 7:21am

Good question, did you find a solution?

maxandersen · January 27, 2019, 1:39pm

Nope I did not.

sjee · February 5, 2019, 1:10pm

I just found it doesn’t work for a group but it does for a light group. As your group.winter_garden_lights seems to be a “normal” group, try adding them to a light group.

Tdw · February 11, 2019, 11:22pm

I accomplish what I think you are looking for with andrey-git’s CustomUI elements. I still have Lovelace frontend obviously but use Tileboard primarily now so haven’t changed much on this in a while.

Custom UI

maxandersen · February 12, 2019, 11:03am

That’s a big repo - got a more specific pointer where you setup the state icon handling ?

Tdw · February 12, 2019, 1:46pm

Once you install and activate CustomUI (it isn’t as complicated as it looks), you can set the icon state by domain in configuration.yaml or by individual entity in customize.yaml. Below is mine for the lights domain from my configuration.yaml.

customize_glob:
    light.*:
      custom_ui_state_card: state-card-custom-ui
      templates:
        icon: "if (state === 'on') return 'mdi:lightbulb'; else return 'mdi:power-standby';"
        icon_color: "if (state === 'on') return 'rgb(239, 239, 0)'; else return 'rgb(3, 169, 244)';"

maxandersen · February 12, 2019, 7:31pm

ah this is non-lovelace; nice idea but bummer it doesn’t seem to work in lovelace. thanks for the pointer.

Tdw · February 12, 2019, 7:57pm

Lovelace is just a frontend for the rest of Homeassistant. Good luck though

maxandersen · February 12, 2019, 8:13pm

ooh now i get it - customize_glob can override the values before lovelace sees them…okey, that could be useful for sure

maxandersen · February 12, 2019, 8:34pm

gah - I got my hopes up - the templates part is only honored by the custom ui state card…so not sure I follow how this would get understood by lovelace? what am I missing?

Tdw · February 12, 2019, 9:16pm

Do you have CustomUI installed and activated per the instructions on the github site? Once you do that and update either your configuration.yaml (domain) or customize.yaml (individual entities) then the icons will change however you set them to change. Lovelace is just the UI. The icons would still change by state in the old UI with CustomUI enabled.

maxandersen · February 12, 2019, 10:21pm

what i’m missing is how those dynamic templates gets evaluated since its javascript so how is that executed/applied when lovelace doesn’t know about the ui-state-card?

Tdw · February 12, 2019, 10:34pm

Magic of HomeAssistant I guess. I’m no expert; I just know it works. Perhaps the confusion is with ‘ui-state-card’. That exists independent of Lovelace and is not a card in the sense of a Lovelace card. I used the CustomUI set up (with the ui-state-card set up) prior to Lovelace even existing. The CustomUI set-up I’ve referenced changes the entity and/or domain icons within HomeAssistant based on their individual state. Lovelace is just pulling the state icon into the frontend. Lovelace is not actually changing the state icon; CustomUI is.

maxandersen · February 12, 2019, 10:34pm

ah - its not the actual card that does this - its the custom component named “customizer” enabled via:

customizer:
custom_ui: local

now it starts making sense.

Tdw · February 12, 2019, 10:43pm

Yes Sir. I did the 1.2 manual activation from the github instructions but any of them aligned with your HA version will work.

Let me know if you get stuck. These forums were invaluable to me; happy to return the favor if I can.

floyd86uk · November 15, 2019, 8:54pm

Sorry to restart an old thread, but I was looking to achieve the same outcome of a different icon based on state and came across this. Tdw, as it happens, I am pretty much trying to create the same kind layout that you have in the screenshot above. I have the CustomUI elements from andrey-git installed, but I can’t figure out for the life of me how to get the light groupings to come out like you have in the Custom UI. Are they seperate buttons?

Would you mind providing a quick rundown of what you utilised to achieve this?

exetico · December 6, 2019, 4:59pm

I love the theme Could you share the source?

And, i’m sorry for bumping this topic… I didn’t think that through, before pressing “Post”

Tdw · February 2, 2020, 4:14am

I never saw this reply to me before. Are you still looking for help on that setup? Apologies for not getting back to you sooner.