Picture Elements no longer showing "on" or "off" images

Configuration
1

I use PNG images overlaid onto my house plan, to indicate which lights are currently on or off. I also use it to change custom made icons for the Neato hoover integration, depending on its status. For example, “Docked” or “Charged”.

It seems since the 2022.11 update, the images no longer display via a browser or in the app for anything.

Below is the code that was working up til today:

- entity: light.lounge_left
    state_image:
      'on': /local/lounge_left_on.png
      'off': /local/lounge_left_off.png
    style:
      left: 0%
      top: 0%
      transform: none
    type: image

I have not changed any code, but I have tried changing the “state_image” paths from “local/lounge_left_on.png” to “local/www/” and “config/www/” to see if that would work. But it doesn’t. I’ve also tried adding quotation marks instead of the single hyphen.

The Picture Elements card page hasn’t been updated, and I don’t see this issue listed in the “Breaking” part of the 2022.11 update.

I can still toggle icons on and off, but the PNG images no longer display.

Anyone else having this issue? Any clues as to what needs updated or changed?

1 Like
2

There’s an issue on GitHub about this, it looks like it needs a width in the style section

3

Thanks, I’ll dig a little deeper. Rolling back to 2022.10.5 solved the issue for now.

5

Just to update. Adding “Width: 100%” to the Style section of the code does NOT solve the issue on the iOS App. I tried deleting and re-downloading the iOS App, refreshing the cache, but that made no difference. All of my icons/backgrounds no longer show.

Adding the above code DOES fix the issue in a browser though.

6

Thanks for pointing out that distinction. You saved me a ton of troubleshooting time.

7

Same problem here. ATM the issues are not assigned to someone. I really hope that this will be fixed soon. My whole ui is based on picture elements cards. Very disturbing and the WAF is now on a sub zero state… Please!! Take care of it! As the on/off state do not show the image which has tap actions for navigation my ui is nearly useless for the moment…

8

Adding width: 100% is not the solution. The width percentage will be dependant on the size of the state_image. You need to adjust width: *% aswell as the top and left % until you can get it back to how it looked before.

9

Thanks for this hint!!
I’ve now updated my yaml’s and added the “missing” width: 100%. Everything looks fine now and is functional again. Nevertheless I would suggest to fix it… If nothing is stated, the 100% feels like the native information.
Cheers
Olli

10

All my images are the same resolution, both height and width, I just placed the icons into the correct position on top of the floor plan map as a background, hid the layers in Photoshop, and exported a PNG file that is the exact same dimensions as the floor plan. So Top 0% and Left 0%.

Therefore, I use “Width: 100%” because as far as I can work out, that maths is correct. Every image does need to be 100% wide, in order for all the images to lay on top of each other correctly. It was designed that way.

With Width:100% it looks correct now, on a PC browser. I’m not saying it is correct, but it works. But on the app, it does not.

11

Hi Alex, yes that’s totally understandable for your case. I’m guessing the cards are rescaling on your mobile and that’s causing the problem, maybe try px values, instead of % and see if that makes a difference.

I’m just pointing out to others that may read this topic that the fix is not to set width: 100% but whatever is appropriate for their state_image.

12

Ah, I didn’t know px values were a thing. I will look into that now instead of the percentage and see if it fixes it. Thank you for giving me an alternative answer to look into.

13

It’s a close solution, but still doesn’t work. Using “px” instead of “%” allows the images to show in the app and a browser. But the positions are wildly out on both devices. They don’t scale. I’ve tried adding “scale” etc too, to no avail.

If would be great if we had some sort of feedback that it’s being looked at. I don’t see it on the GitHub or any forum that it’s an acknowledged issue.

14

Thanks for the information. I found that for my light bulb images using 5% was reasonable for both computer and phone display. It would have been better if it just kept working without having to specify a width, but I’m glad someone had a suggestion here. A smart house where you can’t control your lights, that’s an issue. With this suggestion I’m functional again!

15

In my case the problem got solved when i exported them with 16bcp RGBA pixel format. Perhaps this helps someone out there=)

Greetings,