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

Share your Projects! Dashboards & Frontend
21

6-pack to do mine? :beers:

22

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.

1 Like
23

wife or lovelace-dashboard? :wink:

but seriously - 3d-floorplan & the lovelace stuff - I guess it’s doable, if you’ll provide some plans it’s possible :slight_smile: don’t know if I could easily put all the furniture & other stuff the right way not knowing the house, but it could be a fun project. probably it would need some detail-tuning in the code on your side, but I can prepare the basics similar to what you can see in my video. PM me with some details :slight_smile:

1 Like
24

I was totally joking. I already have most of my floorplan done and picture-elements is easy to use. You’re way too nice :slight_smile: I just haven’t really spent much time on my own configuration since starting to contribute to the lovelace core project

25

haha you got me!
thanks for contributing then, lucky you! I’m more like a gfx guy than a programmer (let’s say I’m copy&paste type of a developer :D), so if there is something to play with design, I’m almost always ready :wink:

26

We could use a developer on the LL project. You should swing by the chat on Discord

27

you mean graphic designer? that - maybe I can help sometime, if I’ll find you, I’ll ping you on discord tomorrow, it’s 1:15a.m. at my place & I’m slowly thinking about going to sleep. just one more yaml edit & HA restart and I’m gone… :wink:

1 Like
28

@pejotigrek - if you were serious about doing these floorplans for others - you might want to check out Archilogic - get the client to upload their floorplans themselves then they can make changes as needed with furniture etc. They offer a trial so each client would get 30 days or whatever to make their floorplan and layout the furniture etc.

1 Like
29

Hey,

I am using this in my config but when I add the - image for the call service part the card goes blank.

Any idea guys?

Thanks in advance

type: picture-elements
image: /local/images/Ground Floor/Ground-Floor-Off.png
elements:
      - type: image
        tap_action: none
        hold_action: none
        entity: light.floor_lamp
        state_image:
          'on': /local/images/Ground Floor/Floor-Lamp.png
          'off': /local/lovelace/_empty.png
        style:
          transform: none
          left: 0%
          top: 0%
      - type: image
        tap_action:
        action: call-service
        service: light.toggle
        service_data:
          entity_id: light.floor_lamp
        image: /local/images/Ground Floor/Round-Button.png
30

thanks, will check what’s that :slight_smile: not that I’m looking for a full-time job [I run a graphic studio anyway] but if it will fit as a once-in-a-whle-gig then I’ll think about it :slight_smile:

31

first thing that I’d try is to change folder paths and filenames to all-lower-case and exchange spaces for underscores. I’m a little bit oldschool with file/folder naming and always try to avoid that. many systems still can’t handle properly different case or spaces/other special characters.

32

I managed to get it working. But now when I go to add a new picture under it for another entity I just get a grey rectangle for the image? It works with just one entity. Is the vertical stack needed?

Thanks

33

@ pejotigrek

Could you maybe share a bit more of your config with multiple elements?

I might be able to track what I am doing wrong if I have something to compare to as the code you posted the other day is only for 1 element.

Thanks

34

vertical stack - probably it can be removed, I got this because before all the type: picture-elements I have also custom:plan-coordinates card [custom component that shows a window with % for positioning].

btw more of the code - don’t know if it makes sense for me to spam with longer code - basically I took the two type: image from under the elements: statement, and multiplied it for every light. the only difference is picture path for “on” state, and entity_id in service_data.

are you sure all you images are available? sounds like something couldn’t be read or like the “top image” has no transparency

35

Yeah the images are available. Think its just Lovelace having issues updating. I have managed to get another entity on there now just had to hit space a few times to get it to update as I am using the configure-ui part.

Thanks for your help

36

@pejotigrek

I think I am getting somewhere as I have a few entities on there now. But noticing that if the screen is bigger than a certain size the images don’t line up and also sometimes when I turn an entity on and then another one it stops me being able to turn off the first one but they don’t overlap and they are transparent. I have to turn them off backwards to do it.

37

Outstanding!

1 Like
38

Well this is just lazy. :rofl:
Not even using time of day/year to calculate sun angle and rendering a different background for each? Combined with each setting for all the shades!
At any moment you could know exactly how much light each room has/needs.

Awesome work!

1 Like
39

true… I have to upgrade it… ;D

40

Hi, I have a question about your sweet home 3d design. I downloaded it and it looks like you do not have any sun shadow in your drawing. I am looking for how to do that for a long time. Could you help me out? Thanks