Try playing with “pointer-events: none” style for elements you do not want to intercept mouse input.
1 Like
@Ildar_Gabdullin Thank you. But, if I understand that property right, it would also disable mouse clicks on the non-transparent part of the picture element. Is that right? If so, that’s not what I’m after at this time.
Right. An element is rectangular.
In similar circumstances I had to revise a structure of a card (what elements are located on each layer, what is an order of layers, …).
Ok. Thank you. I guess I got what I came here for which is that both are working as currently intended/designed and there’s nothing I’m missing in the basic configuration of the Picture Elements Card itself.
Overall, whether it’s this card or many others, I wish the HA front end had CSS more embedded (UI and/or yaml) so we didn’t have to mess with all of these CSS properties, card-mod, etc.
These two “issues” are IMO prime examples. I bring in a bunch of images all scaled appropriately, but the front end doesn’t present a check box to “preserve native size” (or similar). Same thing with the transparency…although if it cannot be done with CSS, I guess it’s not possible anyways (?)
That came off more rant-y than I intended. 
Again, thanks for your help. 
2 Likes
It is mentioned that one could “– the whole floorplan card is a decluttering-card - pass a scale value as a variable;”
Ideally, that’d come from the scaling of the original image. Is there a way to do that?
If I had easy access to javascript, this would be trivial-- I’d query the image size, and compute the scale, which I could use on all the other elements, but that isn’t what we have here.
Can you add a background picture.
I do not know any way for it - may be except a brute programming by JS.
I have updated from 2022.10.5 to 2022.11.x and my style tranforms for state_image (mainly scaling) have stopped working.
Anyone else have this issue?
2022.11 broke displaying images in the card - they are just not displayed.
So, cannot say anything regarding a scaling - cannot check it.
Hi @Ildar_Gabdullin I’ve got something that probably should be simple but I can’t figure it out. I have a state label that I want to display that is an address. For example,
123 Fake St Springfield USA
That ends up being too long for the box I want to display it in, so I’d like to wrap the text to a second line.
123 Fake St
Springfield USA
I’ve tried text-overflow, overflow-wrap, setting a width and no height. The only thing I could do that would somewhat do what I want is to set overflow: scroll which cuts off the text and gives me a horizontal scroll bar. How could I just have the text wrap around to a second line to fit better? For this example I’m just working with a very basic card based off the default for testing.
type: picture-elements
elements:
- type: state-label
entity: sensor.places_britni
style:
top: 32%
left: 50%
width: 50%
border: 5px solid black
overflow: scroll
color: black
image: https://demo.home-assistant.io/stub_config/floorplan.png
Also thanks for all the examples above, I had no idea picture elements could do half of these things!!
Seems to be possible by card-mod only:
Go to card-mod thread → 1st post → link at the bottom → styles for picture elements
@Ildar_Gabdullin , first of all…this is an amazing write-up. Especially with English not being your first language. Thank you very much for all the time you spent writing this up. I have my picture elements card almost where I want it; however, I am having problem with some of the scaling components (as you mentioned in your post). I’m using it for a status dashboard for a vehicle, where I have conditional images that appear as overlays depending on the state of the entities. all of this works great, and scales fine (I used all same size images as the main image). However, I have some state icons, and state labels that don’t scale properly on my wall mounted tablet vs iphone, vs PC. I read your suggestions regarding using cardmod mediaquery or decluttering card for solving this issue. can you please elaborate a little more on the “easiest” method you would suggest and how specifically to accomplish it, please? Thank you very much!
As you noticed, some image elements are better to be used of the same size as the main image, so they are automatically scaled properly. As for other images, icons and labels - yes, we need a way to scale them.
For a floorplan, I use a decluttering template with variables for scales for icons. Assume you are using desktop PC 1920x1200, mobile phone and tablet. For every case you need to define required scales. Suppose, for some icon you got these scales:
— 0.45 for desktop,
— 0.33 for tablet,
— 0.24 for phone.
Then you need to show a card with variable=0.45 for desktop and so on.
Using a decluttering card is clearly explained on a Github page of this card.
How to show a needed card on a particular client - up to you, either to use “custom:state-switch” or another way.
1 Like
Hi! I have 2 gif i need to light up when i toggle a switch
I have it to work with one picture, but how can i get 2 or 3 pictures to show up when state is on?
elements:
- type: image
entity: switch.shellyplus1pm_a8032abbcb94
tap_action:
action: toggle
state_image:
'on': /local/tree1.gif
'off': /local/treedark1.png
style:
top: 55%
left: 38.2%
width: 12%
A separate “image” element for each picture?
A separate Image element worked, i don’t know why i didn’t even think that would work.
This is the structure I’m after
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_boolean.test_boolean
- type: picture-elements
style: |
ha-card {
{% if is_state('input_boolean.test_boolean','on') %}
--my-state-color: magenta;
--my-transform-style: translate(-50%,-50%) rotate(-0.25turn);
{% else %}
--my-state-color: cyan;
--my-transform-style: translate(-50%,-50%)
{% endif %}
}
elements:
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 8%
left: 20%
'--label-badge-background-color': var(--my-state-color)
transform: var(--my-transform-style)
The question is from the following:
- type: picture-elements
style: |
ha-card {
{% if is_state('input_boolean.test_boolean','on') %}
How can i form the input_boolean.test_boolean statement so that it returns me result of the check is current viewport over or under a set limit?
Thank you! I have it working perfectly now.
I’d like to show “nothing” when the state is off. Is this possible?`
- type: image
entity: vacuum.eufyrobo
state_image:
'off': null
'on': /local/Eufy_station.png
When using this code, i get the loading symbole, when the vacuum is off. But I’d like to have it blank.