reserved post 18
reserved post 19
reserved post 20
1 Like
Awesome, i really appretiate your work here!:):
1 Like
Does anyonne know how to make the hitbox of the icons bigger and how to remove the shadow of the picturelement?
I want to get rid of the black line at the bottom.
type: picture-elements
elements:
- type: icon
icon: mdi:chevron-up
tap_action:
action: call-service
service: script.fernseher_up
style:
top: 18%
left: 50%
transform: translate(-50%, -50%) scale(2, 2)
Great examples. How would you set the height of an image element based on a sensor value?
The use case is using overlays with transparent parts over the main image to show levels in tanks.
The element size is better to set dynamically by card-mod since it supports templates.
1 Like
Hi!
I’m building my floorplan with picture-elements card and I run into a problem: I cannot change the icon color of a switch when it is turned on.
My code is the following:
- type: state-icon
tap_action:
action: toggle
entity: light.terasz_szoba_lampa
style:
bottom: 33%
right: 7%
border-radius: 50%
"--paper-item-icon-color": black
"--paper-item-icon-active-color" : yellow
text-align: center
background-color: rgba(102, 102, 102, 0.2)
I’d like to have the “switched on” color yellor.
Any ideas? 
Useless here since there is no name displayed.
This works - you may check it if change “black” to “cyan” to be sure.
This does not work due to the light entity.
Check this:
type: picture-elements
elements:
- type: state-icon
entity: light.virtual_light_1
tap_action: &ref_tap_action
action: toggle
style:
bottom: 33%
right: 7%
<<: &ref_settings
border-radius: 50%
'--paper-item-icon-color': cyan
'--paper-item-icon-active-color': red
background-color: rgba(102, 102, 102, 0.2)
- type: state-icon
entity: input_boolean.test_boolean
tap_action: *ref_tap_action
style:
bottom: 53%
right: 7%
<<: *ref_settings
image: /local/images/blue.jpg
It works for the input_boolean entity and does not for the light entity.
You need to “override” this by some way - kind of using “!important” in CSS.
Seems that card-mod may be the only solution (provided here).
Hi all,
Thanks for all these great ideas!
Is there any way to rotate an icon according a variable?
Let’s say, something like this:
- type: icon
icon: mdi:bike
style:
top: 38%
right: 7%
transform:
rotate({{ states('sensor.mower_yaw')|int }}deg)
It is to set an icon according the position of the mower.
It sound easy… but how I specify and use it?
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_number.test_number
- type: picture-elements
style: |
ha-card {
{% set ANGLE = states('input_number.test_number') + 'deg' %}
--my-transform-style: translate(-50%,-50%) rotate({{ANGLE}});
}
elements:
- type: icon
icon: mdi:arrow-up-thin
style:
top: 18%
color: orange
left: 20%
transform: var(--my-transform-style)
image: /local/images/blue.jpg
Nice!
Really appreciated!!
Still cannot use as icon, but this is another option.
Thanks again
Nop. Copy/pasted the code, created the test_number and the image, but does not rotate
Anyway, I will keep trying with this idea.
Did you try changing a value of the input_number?
Or do you expect a continuous rotation?
I did, yes. You can see it in my picture.
I see in your picture that worked for you, but for any reason it does not rotate mine.
Do you have card-mod installed?
Yes, I have it installed
Then check again. Copy / paste exactly my code, check if the input_number is created.
Check whether you card-mod working with a simple examples, is it of the latest version.
Paste that code into the Template (dev-tool):
{% set ANGLE = states('input_number.test_number') + 'deg' %}
{{ANGLE}}
See what it returns:
