Good one @pejotigrek that was exactly what I was after! I had individual overlays but were each their own size which meant I had problems with overlaying lamps and main room lights.
I’ll try save each element full size and give it a go.
Thanks again.
Excellent , love this.
thats awesome! well done. Could you please share the full code for an entity to show exactly what you mean with the interactive elements etc?
Hey @pejotigrek - just did as suggested but I am still getting overlay problems like this:
The two lamps (and all the other pictures) are definitely saved transparent but it seems when one transparent goes over the other it causes the transparent part to be visible. Any ideas? If I mess with Opacity it simply dims the lamps and the black outside is still there.
This is without the lamps turned on:
???
Scrap that - I worked it out. I didn’t realise that although the lamp images are transparent, I hadn’t trimmed the black away from when I layered the image… Doh!
Thanks again - I should be good now!
hi! I just sat next to my desktop and was to answer, but I see you’ve manage it 
if you have further questions, don’t hesistate to ask, I just might have a slight delay as I’m at work now 
thanks!
sure, here is a part of my code:
- title: Plan
icon: mdi:floor-plan
id: tab_plan
panel: true
cards:
- type: vertical-stack
cards:
- type: custom:plan-coordinates
- type: picture-elements
image: /local/lovelace/ground_off.jpg?v=1
elements:
- type: image
tap_action: none
hold_action: none
entity: light.table_left
state_image:
"on": /local/lovelace/table_left.png?v=1
"off": /local/lovelace/_empty.png?v=2
style:
transform: none
left: 0%
top: 0%
- type: image
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.table_left
image: /local/lovelace/_round_button.png?v=2
/local/lovelace/ground_off.jpg is just a jpg with the whole floorplan, lights off.
/local/lovelace/table_left.png is a transparent png with only the left lamp and part of the floor/table that shoud be lighten up when this light goes on.
/local/lovelace/_empty.png an empty png just as the placeholder [not sure if needed, but added that anyway]
/local/lovelace/_round_button.png small png with semi-transparent circle for buttons
the addition of ?v=… is for bypassing the cache [every time I change the pictures, I increase the number next to it so homeassistant force-reads new graphic files and doesn’t use them from the browser cache]
pictures for “light on” are masked in photoshop, so png contains only what is needed for each lamp, something like:
still no video? I’ve checked, all works fine, maybe it was still processing or something?
The video works perfectly fine. Thanks for sharing, it looks great.
Wow, this looks so good! Will definitely check it out when I have time to generate the graphics!
Hey @pejotigrek - ok there is something I don’t understand. With many of your lights, you manage to have them light the one bit of wall or carpet from two different lamps. ie, turn one lamp on and it lights a wall say, them turn another on which lights the same bit of wall then turn off the first and only the second lights the wall. How are you doing that?! I for example have lighting effects in my lounge area (as per the images of mine above) and I have to make sure none overlap as although they are transparent, the transparency is only around the outsides of the image and they will not ‘merge’ like yours seem to be doing, one will always overwrite the other if they are over the same area. In an instance like I have above with 3 different sets of lights for one area, I’d love to be able to use better lighting that lights up more than having to separate or stop the light at the border of the next room’s lights.
Any suggestions? Is my PNG 24 not working correctly? Should I be able to light up the same bit of wall from different light sources without them overwriting each other? Do you get the same thing unless you do something to make it work? I am using quite an old version of Photoshop so could be something wrong there…
I just don’t get it…
Thanks mate.
Sorry @pejotigrek, one more thing - I notice you say you masked the images in photoshop. Can you explain how you did that? I didn’t mask but instead used the pologonal lasso tool and traced around each area, copied what was selected and pasted the lassoed copy into a new layer. I then applied the lighting effect to the new layer and saved each layer as a PNG with transparency at full size (like you said above, full resolution including the transparent bit).
Do you think the way I am doing it is causing the problem? My logic is that it gives me the same result, ie a layer with just my lit up area, but it clearly isn’t working like yours.
Thanks.
hi! if I understood the problem correctly - I’m guessing that your masking technique might be the issue what you did is good for cutting objects from the background, but isn’t enough for this lovelace situation
instead of lasso tool, use layer mask & brush. quick tutorial [based on Photoshop CS6 on Windows, but tools are rather basic, so there shouldn’t be any issues with other versions]:
you’ll get the rest
Hi @pejotigrek
So I have created some masks as per your advice - do I then save the mask, the layer or both? I tried saving the layer but the end result looked identical to what I had when I lassoed, except for the fact that it looks ‘fluffier’/more transparent around the edges if I brush it that way. Is that what we are trying to achieve that gives the ability to have two different lights brighten the same wall?
Thanks so much for your help with this.
yes, you should then save every layer as separate file - and yes, this method of masking makes the image edges more feathered and smoothly transitioned into transparent background [like my example above]. if you have the “all lights off” layer somewhere in the background - you can turn it visible in photoshop just to test if your mask needs tweaking. when two lights are close to each other it might be good to do some editing on the mask [white color reveals, black hides] just to find that sweet spot which will give you desired effect files prepared with that smooth mask should add-up nicely when stack one on top of another - mine do exactly that.
if the edges are too hard - try to adjust brush softeness with shift+[ or shift+] and then paint black/white on the mask, according to needs
EDIT: also: the bigger brush radius is, the softer and more natural light looks on the edges
This is too pretty. I need to make sure my wife doesn’t come across this and expect me to do this
haha, I can confirm! this generates high WAF score! my wife approved even when it was just half-ready
6-pack to do mine? 
Ok cool. So no magic, just all about soft edges and white/black levels to blend the images. Ok I’ll play around. Thanks mate.
