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:
Hi!
I have card-mod 3.1.5 installed and tested with simple rotate and translate examples. I came across this post and I´m also trying to achieve something like this. I tried your code and on the Template (dev-tool) that code works as expected but does not work when using it on the card configuration.
I´m a newbie so I don´t know if it has something to do with the variable “–my-transform-style” because I tried modifying the variable so that it would rotate 15deg instead of using the “ANGLE” value and didn´t rotate either.
Thanks for your help! Really appreciate it!
… and where is your code?
I tried yours first then mine. Here´s mine
type: picture-elements
style: |
ha-card {
{% set ANGLE = states('sensor.pitch') + 'deg' %}
--my-transform-style: translate(-50%,-50%) rotate({{ANGLE}});
}
elements:
- type: state-badge
entity: sensor.front
style:
top: 84%
left: 50%
transform: var(--my-transform-style)
image: >-
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbI_TB-oQI1xUV4iHDzRDf7ocC-F09qP6nHw&usqp=CAU
What I´m trying to do is an inclinometer. So at the end what I want to accomplish is having a couple images rotate according to roll and pitch values coming from a sensor.
Thanks!