Sometimes the error is right in front of us and we can’t see it😁, thanks for your help.
Hi Aaron,
Firstly thank you for your post, its the most informative I’ve been able to find on this subject.
I’ve successfully created my floorplan, and placed both transparent squares in my www folder.
My floorplan has all rooms lit and if they’re turned off, I overlay an unlit picture. Only problem is, when my lights are off, all I can see is the unlit room (or swimming pool in this instance), then when they’re turned on, I get my whole house plan.
Bit of a noob so maybe I haven’t emulated your example scripts correctly?
type: picture-elements
elements:
- type: image
entity: switch.77153011d8f15bb63a2c
state_image:
'on': /local/transparent_square2.png
'off': /local/PoolUnLit.png
'unavailable': /local/transparent_square2.png
style:
top: 50%
left: 50%
width: 100%
image: /local/9RoslynLit1080.png
Any advice you can provide would be appreciated.
I’m not quite sure I have a good idea of what the problem is that you are describing. Could you post some screenshots to show me what you mean? Feel free to private message me if you don’t want to share them publicly.
Hello programers, I am dealing with the problem with my blinds code. It’s great for any other switch, but not for blinds. I would like to use some if statment. Something like, if shades are closed, use this “closed shades picture” until I press openShades button.
Configuration that I am using is simple, and I dont have real info if shades are open or closed on my 3d flat.
Mby action “toggle” is not the best for this kind of switches…
My shades are closing after sunset, and after they are closed switch is turning off. On my phone I can see they are closed, only for the time of closing. (when switch is “on” or active).
Mby picture will help you to understand me beatter 
Thank you for reading this and trying to solve my problem!
I don’t quite understand what the problem is. I see you have images for both when the shades are closed and when they are open. Are you trying to figure out how to show one image when they are opened and another when they are closed? Or are you trying to hide one of your open/close buttons when the shades are open versus closed?
Hello, the problem is in fact that shades are closed on picture only when switch for closing is on. So its closed only while shades are going down/closing. I would like to make them stay closed untill i press button “open shades”.
I see, that does seem like a problem, what integration are you using for the blinds? That might give me more information to help lead you to a solution.
1 Like
Thanks for trying to help. I was on vacation, so I didnt check forum. I resolved the problem with door-window sensor. Its not perfect but its something…
Hello,
I kinda followed this tutorial and ran into the problem you mentioned of the multiple lights in the same room. But instead of generating a different image for every possible combination, I noticed that with the way I generated my “lights on” images, they merged pretty well and looked a lot like the rendering of both lights on in sh3d.
So first of all, I started by rendering a “every lights off” image instead of “every lights on” for the main background image.
Then I rendered an image for each light when it’s on but instead of deleting manually the other rooms, I used The Gimp (I don’t have Photoshop) to make the difference with the “lights off” image and replaced the color black with alpha.
It gave me something like this.
Then I followed the rest of your tutorial. Here are the results in the card :
Light A on :
Light B on :
Both lights on
And here is what sh3d render with both lights on :
3 Likes
Hello
can I ask you for help, i saw you set up a room with multiple lights.
I have the same case but i can’t solve.
I used the conditions to test but I’m doing something wrong.
This is my sample code.
I got stuck at the line, entity: ???,
I don’t know what to insert to get the solution to the conditions and then display the correct image
type: picture-elements
image: /local/floorplan/notte.png
conditions:
- entity: switch.light_1
state: 'on'
- entity: switch.light_2
state: 'off'
- entity: switch.light_3
state: 'off'
- entity: switch.light_4
state: 'off'
elements:
- type: image
entity: ????
tap_action: none
hold_action: none
state_image:
'off': /local/floorplan/55x5.png
'on': /local/floorplan/G.png
style:
top: 50%
left: 50%
width: 100%`
Hi
I solved the problems related to the previous post and I don’t know whether to delete it or leave it visible.
I am asking for help with a display problem in the floor plan.
I am attaching the images to try to explain the problem:
- simplified house plan with only 1 light point and with the light off
- if I click anywhere on the screen, a gray circle is displayed.
- another view but with the light on by clicking anywhere.
Basically if I click anywhere outside of the plant switch icons this gray circle appears. - if I then click outside the area in correspondence of the green area or click on the light bulb, the circular gray image disappears.
This is the lovelace.yaml of the example:
type: picture-elements
image: /local/floorplan/notte.png
elements:
- type: image
entity: switch.nicchia_sx
tap_action: none
hold_action: none
state_image:
'on': /local/floorplan/C.png
'off': /local/floorplan/55x55.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: switch.nicchia_sx
tap_action:
action: toggle
state_image:
'on': /local/floorplan/bulb_on.png
'off': /local/floorplan/bulb_off.png
unavailable: /local/floorplan/bulb_undefined.png
style:
top: 16%
left: 79%
width: 1.5%
C.png is the room with light on
55x55.png is the transparet image
bulb_on.png, bulb_off.png, bulb_undefined.png is the state of the lamp.
The image that creates the gray circle is the one called 55x55.png and is a transparent 55x55 pixel image.
It seems that it is this image that has problems but I don’t understand why.
thanks
Nothing jumps out at me right away. Could you share the exact image you are using? It’s a little hard to say what’s going on without seeing the exact images. Feel free to private message me if you don’t want to share them here.
- notte.png
- C.png
- 55x55.png
- bulb_on.png
- bulb_off.png
- bulb_undefined.png
Thanks for the reply,
I agree here, then if you do not want to fill the post too much I can send as it goes best.
these are the pictures with the order of your post.
notte.png
… … … … … … … … … … … … … …
c.png
… … … … … … … … … … … … … …
55x55.png
it is not seen because it is a transparent image
… … … … … … … … … … … … … …
bullb_on.png
… … … … … … … … … … … … … …
bulb_off.png
… … … … … … … … … … … … … …
buld_undefined
thanks again for your time
I tried out a simple example using your config and images and see the exact same result that you do. I really can’t figure out where the transparent oval is coming from when you click on a non-element. I went back and tested it out on my floorplan and the same thing happens.
So, I don’t know if it was always that way and I just only clicked on clickable elements, or it started with a version of HA after I initially created the floorplan. I spent about 30 minutes trying things out but was ultimately unable to figure out a fix. If you don’t want to see the overlay you’ll just have to be careful about where you click. You can also make the box around the light with the transparent image slightly bigger to make the click area larger and avoid causing that oval overlay from appearing.
Sorry I couldn’t be more helpful, it’s quite a curious issue.
Thanks very much for trying.
At least I realized it’s not my problem, it will probably be some overlay rendering problem.
Yes, clicking in the right places does not happen, maybe with a new release of HA it will solve.
Now I have to focus on a resizing problem, I have some cards to insert around the floor plan that you don’t want to scale.
maybe can share the code?
Ciao Alessio anche io ho notato questo problema tu hai mica risolto?
hello, where on the floor plan are you using this code?
No, honestly I haven’t solved it, it’s a problem that keeps repeating itself.
The problem is due to the image from
state image
‘off’: /…
which despite being of minimal size (it is a 55x55 px square) expands to 100% of the screen and if you press out of an icon this problem.
Let’s say that I found a compromise with the ios dark mode theme which at least creates an almost transparent overlay.
type or paste code heretype: picture-elements
image: /local/floorplan/notte.png
elements:
- type: image
entity: switch.cucina_1
tap_action: none
hold_action: none
state_image:
'off': /local/floorplan/55x5.png
'on': /local/floorplan/N1.png
style:
top: 50%
left: 50%
width: 100%
In the floorplan yaml the conditionals come after the lighting overlays and before any toggles.
1 Like