frontend
frontend copied to clipboard
home-assistant
Picture Elements Card - missing overlaying elements
The problem
I have a few Picture Elements cards configured to control my lights, but this is broken after upgrading to 2022.11.0 - images on top of the picture are now gone and nothing happens if I click on the spot where the dots (images) should be. Resources (images) are locally accessible.
Example:
There should be clickable dots on places circled with red:
Images are locally accessible:
Nothing in the logs. Restarted HA instance a few time and it does not help. The same issue is present on my desktop PC (Firefox, Chrome, Edge), on my tablet (via browser and Android app) and mobile (Android app).
Mentioned here.
What version of Home Assistant Core has the issue?
core-2022.11.0
What was the last working version of Home Assistant Core?
core-2022.10.5
What type of installation are you running?
Home Assistant OS
Integration causing the issue
No response
Link to integration documentation on our website
No response
Diagnostics information
No response
Example YAML snippet
elements:
- entity: group.kuhinja
image: /local/lightbulb-group(1).png
state_image:
'on': /local/lightbulb-group-outline(1).png
style:
left: 5%
top: 8%
tap_action:
action: toggle
type: image
- entity: switch.kuhinja_pc
image: /local/red1.png
state_image:
'on': /local/green1.png
style:
left: 23.3%
top: 53.5%
tap_action:
action: toggle
type: image
- entity: switch.kuhinja_ikea
image: /local/red1.png
state_image:
'on': /local/green1.png
style:
left: 39%
top: 18.3%
tap_action:
action: toggle
type: image
- entity: switch.kuhinja_ikea
image: /local/red1.png
state_image:
'on': /local/green1.png
style:
left: 80%
top: 10%
tap_action:
action: toggle
type: image
- entity: switch.kuhinja_glavna
image: /local/red1.png
state_image:
'on': /local/green1.png
style:
left: 62.8%
top: 20.4%
tap_action:
action: toggle
type: image
- entity: switch.emillux2
image: /local/red1.png
state_image:
'on': /local/green1.png
style:
left: 14%
top: 81.5%
tap_action:
action: toggle
type: image
image: /local/kuhinja1.jpg
type: picture-elements
Anything in the logs that might be useful for us?
No response
Additional information
No response
It's as if the origin for state_image has been moved and the element is not on the card. I was able to reposition my state_image by removing any reference to transform: scale (*) and adding width: *% to the styling and then changing the left: *% and top: *% values. I don't know if adding width is necessary, or if just repositioning will work.
Remember to take a copy of your original code for the card, just so you can easily revert back if a fix comes!
I too have the same issue, unfortunately trying to move the image using @AJStubbsy's suggestion does not work for me.
I have a lot of picture elements and all mine work fine with the upgrade. The only difference I can see is that I have a width: entry to scale all the images in the style section. If I remove the width, it does indeed disappear
- type: image
entity: binary_sensor.toilet_motion_occupancy
image: /local/images/icons8-motion-detector-96.png
state_filter:
"unknown": grayscale(100%) drop-shadow(0px 0px 2px Red) brightness(130%)
"unavailable": grayscale(100%) drop-shadow(0px 0px 2px Red)
"off": grayscale(100%) brightness(150%)
"on": drop-shadow(0px 0px 1px Grey) saturate(200%)
state_image:
"on": /local/images/icons8-motion-detector-96-animated2.gif
style:
top: 65%
left: 30%
width: 12%
I can confirm, by adding a "width: %" value my images now appear, although they are not as easy to control size wise as they used to be at least I can get them back again.
Is does mean I have 50+ images to add a width value to across several picture element cards.... :-(
I can confirm, by adding a "width: %" value my images now appear, although they are not as easy to control size wise as they used to be at least I can get them back again.
Is does mean I have 50+ images to add a width value to across several picture element cards.... :-(
Can confirm too.
Yes, this solves it for me too. I actually only added width: 8% to all my entities and it's like it was before. Thanks @AJStubbsy for pointing it out.
I spent the morning converting my images to custom button cards (thankfully only 3). They work now but with 4 times the amount of code. Just tried adding the width and it worked, but I think I'm just going to leave it now.
Same issue here, reverting to 2022.10 :(
If i add "width: 100%" to the anchor iconsCommonStyle in this demo it works fine https://github.com/rirofal/HomeAssistant-Stuff/tree/main/Overlay%20Demo
But to do that in my own environment would take a lot of time since the scale of images are different here and there...
Did some tests and https://github.com/rirofal/HomeAssistant-Stuff/tree/main/Overlay%20Demo looks fine in 2022.11.0b4 but not in 2022.11.0b5 So I guess there is something hiding in https://github.com/home-assistant/frontend/releases/tag/20221031.0
Adding width to state images seems to work
Does scale still work when using width? My x y scaling is different (not equal)
Even if you start with a new Picture Elements card, and then change the YAML from "type: state-badge" to "type: image" and then add your specific entity name, image location, the top and left percentages and then add the "state_image" it does not show the image. The image only appears after adding what others have said "state_image: "
This happened to me after upgrading to 2022.11. Running Supervisor 2022.10.2 Operating System 9.3 Frontend 20221102.1
My images are gone too.
- type: image
state_image:
'on': /local/my-icons/garage-open.png
'off': /local/my-icons/garage-closed.png
entity: binary_sensor.garage_door_sensor
style:
top: 66%
left: 71%
transform: scale(0.6)
tap_action:
action: call-service
service: script.garage_remote
hold_action:
action: more-info
Adding
style:
width: 30%
brings the image back, but I can't set the correct width without reworking the whole UI.
Home Assistant 2022.11.1 Supervisor 2022.10.2 Frontend 20221102.1 - latest
My images are gone too.
- type: image state_image: 'on': /local/my-icons/garage-open.png 'off': /local/my-icons/garage-closed.png entity: binary_sensor.garage_door_sensor style: top: 66% left: 71% transform: scale(0.6) tap_action: action: call-service service: script.garage_remote hold_action: action: more-infoAdding
style: width: 30%brings the image back, but I can't set the correct width without reworking the whole UI.
Home Assistant 2022.11.1 Supervisor 2022.10.2 Frontend 20221102.1 - latest
@mrbaloghakos, Do you add the "width" and remove "scale" or do you leave them both?
My images are gone too.
- type: image state_image: 'on': /local/my-icons/garage-open.png 'off': /local/my-icons/garage-closed.png entity: binary_sensor.garage_door_sensor style: top: 66% left: 71% transform: scale(0.6) tap_action: action: call-service service: script.garage_remote hold_action: action: more-infoAdding
style: width: 30%brings the image back, but I can't set the correct width without reworking the whole UI. Home Assistant 2022.11.1 Supervisor 2022.10.2 Frontend 20221102.1 - latest
@mrbaloghakos, Do you add the "width" and remove "scale" or do you leave them both?
@theone11 I left them both. But still have to play to find the correct width and position, so this is just a temporary solution..
What I finally did is just added width: 12% to all my image elements.
12% worked well for me, the UI now looks almost exactly like before.
The red and yellow icons were missing after the upgrade.
Now you can see they are back:
@rirofal
reverting to 2022.10
Just reverted with the actual data or have you restored a backup of your database?
@rirofal
reverting to 2022.10
Just reverted with the actual data or have you restored a backup of your database?
Kept the same data.
Just reverted
Did so and my pictures are back ;) The "width: %" had not worked for me.
I hope that this will be handled as a bug and fixed.
AND: A hint in the release notes if an easy just roll back is possible would be perfect. Or a hint, if the database will be modified during update, which would result in the same.
I rolled back only the hui-image.ts file (before this https://github.com/home-assistant/frontend/pull/14245) and everything seems to be working fine without any "width" trick. Also the flickering is gone (mentioned here https://github.com/home-assistant/frontend/issues/14310). I don't know the negative side effects of this...
11 days ago, and still no info about this. I'm going to downgrade until we have some confirmation about what to do.
I don't really want to add width to dozens of missing elements that are all different sizes if this is going to be fixed at some point.
