This is wrong, you are using smth looking like a JS code from some custom card like button-card.
Go to the 1st post of the thread ā link at the bottom titled āfantasticā ā picture-elements
okay, thanks . i just simplified the code and changed it, but unfortunately without successā¦
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
hue-rotate({{ state_attr('light.tradfri_light', 'hs_color')[0] | int
}}deg) saturate(100%)
opacity: "{{(state_attr('light.tradfri_light', 'brightness') / 255)}}"
in the Template I get the right values
(post deleted by author)
Yes, it was taken from ChatGPT. Could you please be more specific with examples? I passed through topics and did not found anything helpful for first look. My point is to have entity in Glance card with consumption when turned on:
and without consumption when turned off:
But Picture elements card does not support templates.
Already told you where to find.
What could be more specific than a link to a post with examples? You got wrong card-mod code, I told you where to find a proper one.
(post deleted by author)
I tried to say, that I did not find example how to conditionally hide entity state.
I see, assume a proper code to address some element is
card_mod:
style: |
some_element {
...
}
(the simplest case w/o shadow Root)
So to change some css property (color, visibility etc):
card_mod:
style: |
some_element {
{% if ... -%}
some_css_property: ...;
{%- else -%}
some_css_property: ...;
{%- endif %}
}
Since in your initial post there was a wrong DOM path - using provided examples you may define a valid DOM path & then use an appropriate CSS property.
I usually use ādisplay: noneā to hide an element, know nothing about a āvisibilityā property. This might help you.
Thanks a lot for your help!
div:nth-child(3) {
visibility: {% if states('light.garage_light_switch_0') == "off" %} hidden {% else %} visible {% endif %};
}
did the trick!
hide a state in Glance is not straightforward.
I ended up using stuff like this:
- entity: sun.sun
card_mod:
style: |
state-badge {
display: none;
}
:host div {
display: none;
}
to create an empty placeholder.
If you want to reshuffle the glance items, it might be even more complex
fwiw, setting your mod on the entity:
- entity: sun.sun
card_mod:
style: |
:host div {
visibility: hidden;
}
does not remove the icon, only name and state
Thanks Marius, I finally managed it with help of Ildar. This works like a charm, hiding state value only:
div:nth-child(3) {
visibility: {% if states('light.garage_light_switch_0') == "off" %} hidden {% else %} visible {% endif %};
}
right, so you Want to only hide the state value, not the entire entityā¦
in that case you can set the mod on the entity directly, and dont need the nth child construction
(I now see we crossposted aboveā¦)
Correct, but conditionally. When light is turned off, I donāt want to show state, but when on, it shows the consumption.
Could you provide me an example please? My current entity config is as follows:
- entity: sensor.shellyplus1pm_xxxxxxxxxxxxxxx_switch_0_power
name: Garage
tap_action:
action: call-service
service: homeassistant.toggle
target:
entity_id: light.garage_light_switch_0
double_tap_action:
action: more-info
entity: light.garage_light_switch_0
card_mod:
style: |
:host {
color: {% if states("light.garage_light_switch_0") == "on" %} gold {% else %} gray {% endif %};
--card-mod-icon-color: {% if states("light.garage_light_switch_0") == "on" %} gold {% else %} lightskyblue {% endif %};
--card-mod-icon: {% if states("light.garage_light_switch_0") == "on" %} mdi:lightbulb {% else %} mdi:power-standby {% endif %};
}
div:nth-child(3) {
visibility: {% if states('light.garage_light_switch_0') == "off" %} hidden {% else %} visible {% endif %};
}
Hmm, I would make it almost invisible instead.
I do not like when elements change their placeā¦ Ageing probably)))
tbh, I really believe you should be using another card, if you want as much change like that.
You are showing a light, which in HA will show its color and brightness natively upon change, so imho, no need to set a mod on that.
I can see why one would use a different icon, so yeah, I guess you could to that using card_mod.
all of these are native options in eg custom:button-card, why no use that, and use a core type: grid to show your lights including their brightness:
sure, this is a very mature button-card template, but it has been working for the last 5 years 
No issue with card_mod at all, all native inside the button-card options
cut it short: my advice would be to use the card that matches your requirements as closely as possible. Use card_mod there where nothing else will do the job. Or when really straightforward.
as for this
I already did in the post above:
just use your template there, replacing the now fixed hidden and it should do what you want, on the entity itself
1 Like
haha, yes, well, my example was only used in a config where I needed 2 rows of 4 columns, and the top row only displayed 3 entities, so I needed that empty placeholder fixed.
this was the only way of doing that at the time, and, considering what I just tested with the visibility property, it still is.
Btw, I did put in (editā¦) a WTH for conditional in Glance, like we can do in entities: WTH, why cant we use a type conditional in Glance
it would solve a lot of trouble we experience here
Yes, I was a bit intrigued before your edit). Have seen your WTH and voted there already.
1 Like
got you ) that was the trick!
took some time, but I managed to modify the code, so itĀ“s working now!
type: picture-elements
image: /local/floorplan/base.png
elements:
- type: conditional
conditions:
- entity: light.tradfri_light
state: "on"
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
entity: light.tradfri_light
image: /local/floorplan/light.tradfri_light.png
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: var(--my-filter_tradfri_light)
opacity: var(--my-opacity_tradfri_light)
card_mod:
style: |
:host {
--my-filter_tradfri_light: hue-rotate({{ state_attr('light.tradfri_light', 'hs_color')[0] | int }}deg) saturate(100%) !important;
--my-opacity_tradfri_light: {{(states['light.tradfri_light'].attributes.brightness / 255)}};
}
- type: conditional
conditions:
- entity: light.rgb_bad_light
state: "on"
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
entity: light.rgb_bad_light
image: /local/floorplan/light.rgb_bad_light.png
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: var(--my-filter_rgb_bad_light)
opacity: var(--my-opacity_rgb_bad_light)
card_mod:
style: |
:host {
--my-filter_rgb_bad_light: hue-rotate({{ state_attr('light.rgb_bad_light', 'hs_color')[0] | int }}deg) saturate(100%) !important;
--my-opacity_rgb_bad_light: {{(states['light.rgb_bad_light'].attributes.brightness / 255)}};
}
- type: state-icon
entity: light.tradfri_light
title: null
style:
top: 65.71%
left: 68%
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.2)
tap_action:
action: toggle
- type: state-icon
entity: light.rgb_bad_light
title: null
style:
top: 54.88%
left: 80.45%
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.2)
tap_action:
action: toggle
1 Like
Looking nice)