In an attempt to make my floor plan image more Theme friendly, I decided to replace all of the whitespace with a transparency and then export the floor plan as a PNG. Unfortunately, HA is not rendering the image correctly with any sort of transparency. I’ve read through the picture-elements documentation but nothing really stands out to me as a possible solution. Here are my settings, a screenshot of the rendered lovelace card, and a screenshot of the actual image I am trying to output.
Am I doing this correctly?
- title: Floor Plan
id: main-floor
icon: mdi:floor-plan
panel: true
cards:
- type: picture-elements
image: /local/floorplan/floorplan_transparent.png
elements:
<long list of elements removed>
Rendered Card
Actual Image (Transparency is inside the floor plan.)
Hi!
I use png picture for my picture-elemets card that has transparancy around and it works without problems.
Everything around the walls are transparancy and the theme color is shown. Also between the bars of the “fence” at the belcony is transparent expect the long side that has som white stripes left.
Thank you for you reply. I indeed purged all of my history and cookies. I also tried different browsers which yielded the same result. FWIW, the filename for the transparent version of the floorplan is different than the original floorplan image filename. I use this method to work around the need to clear browser history as it is far more efficient.
I’ve identified the culprit. As it turns out, the filename as listed in ui-lovelace.yaml was incorrect. I used an underscore instead of a dash. Therefore, lovelace could not load a file that didn’t exist…
Hi @r1kkie - I notice you are doing something similar to me above with the 3D floorplan and I was hoping you could help me further understand picture-elements. I have my floorplan done, split each ‘lit’ room into various files (were layers in photoshop) and have them working in lovelace no worries. However, I am starting to have issues with each transparent room overlapping the other as from what I understand, PNG files (like all transparent files) are still square although they only display the none transparent bit. This isn’t really an issue if using light icons to control your lights as the transparency hides the true dimensions of the image file but I am wanting to use the image tap action so that when I touch a room the light goes on or off. However, being a 3D background, the rooms are not rectangular like the images so the area you click overlaps with other rooms. Sorry, hard to explain but in a nutshell, each transparent image is fine unless you want to use it for tap action toggling of lights, where the ‘actual’ image dimensions are different from what’s visible (ie the rooms). If you click in the middle of a room it generally works ok but other rooms still infringe on the edges.
Did you have this issue with your floorplan (looks great BTW) or am I missing something? Am I simply forced to use light switch state-icons because of this issue? Would be great if we could map out areas that the tap action works from so that we can have more accuracy but I guess that isn’t currently possible.
I think i understand what your saying. I made it easy and made all pictures that overlaps equal in size so the positioning and sizeing wouldnt be an issue. What you could do is to overlap a square that fits inside the selected room and use that one for your tap action. This will however create some “blind spots” but as far as my knowing thats your best bet.
Hi, could someone help me with this simple one, I cant get an image to display in Lovelace? I have added four photo’s (as jpg) into my www folder, then added this into my lovelace.yaml;
I know I’m mad late but you guys are the closest to my issue so hoping y’all can help me out. I’m running into a transparency issue with only the active entity taking over the whole image
