so I finally finished my basic floorplan in lovelace. there is a lot of work to do [add sensors, temperature, nest controls etc.] but I didn’t figure out which and where yet - even that I already like the outcome. and because my groundfloor is basically one big room with lots of lights I couldn’t use sharp-edged areas to light up the scene. fortunately there are 24-bit png files with transparency
if you’ll have any hints or comments - feel free to write
a demo video:
the recipe is easy: just use full-size images with transparent background for every light [full size - meaning every image should be filling up the window, and all of them should have the very same resolution]. then add these few lines into config under every picture:
style:
transform: none
left: 0%
top: 0%
in case you want something to be tapable/clickable - you’ll need to add some smaller ones [I did it with semi-transparent circles, to show where the interactive elemens are], with normal, non-zero positioning and transform, but I think that the outcome is worth this couple of extra elements
EDIT: for code part & more info on images check out this comment.
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.
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.
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!
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
/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:
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…
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.
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]:
make a duplicate of “lights on” layer, so every light has it’s own copy. turn them all off [eye icon left side of the thumbnail on the layers palette].
choose one layer that you want to mask, turn it on [visible]
click on “add layer mask” at the bottom of the layer palette
click on this mask to activate it, ctrl-A to select all, shift-backspace and choose black color to fill all mask black [meaning: mask everything]
choose brush tool [or press B] and paint with white color, changing brush size and softness [size = square brackets on keyboard, softness = shift+square brackets]
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?
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
