Floorplan with many lights in one area - say hello to transparent png files!

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 :smiley:

if you’ll have any hints or comments - feel free to write :slight_smile:

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 :slight_smile:

EDIT:
for code part & more info on images check out this comment.

18 Likes

Anyone else unable to see the video?

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.

1 Like

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 :slight_smile: if you have further questions, don’t hesistate to ask, I just might have a slight delay as I’m at work now :wink:

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:

2 Likes

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.

1 Like

Wow, this looks so good! Will definitely check it out when I have time to generate the graphics!

1 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…

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 :slight_smile: what you did is good for cutting objects from the background, but isn’t enough for this lovelace situation :slight_smile:

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]:

  1. 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].
  2. choose one layer that you want to mask, turn it on [visible]
  3. click on “add layer mask” at the bottom of the layer palette
  4. 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]
  5. 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]

you’ll get the rest :slight_smile:

1 Like

Thanks @pejotigrek. I’ll give it a go!

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 :slight_smile: 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 :slight_smile:

2 Likes

haha, I can confirm! this generates high WAF score! my wife approved even when it was just half-ready :wink:

1 Like