3D Floorplan using lovelace picture-elements card

found it! i misspelled “type” in the service button.
OK I CAN SWITCH FLOORS!! TY!!

Awesome, glad you got it working!

1 Like

Hello,

I have an issue that the transparant png grays out my whole picture. Any idea why that is?


Even with your code it does this:

That gray box means that the picture is not found. Check the file name, the file extension and the path to see if they’re correct.

:thinking: Style width: 100% - Try reducing e.g. 2-10% - width: 10%

@fahr Can you please update the link of the article of juanmtech you have on your blog?

Is this one: How to set up the picture elements card in home assistant lovelace | JuanMTech

Thank you.

Great work!

1 Like

If someone needs help hiding title on state-badge refer to this link: Hide text for badges in picture-elements card - #16 by ellepdesk

Thanks, updated!

1 Like

I am attempting to create a 3D floor plan to navigate through my house room by room. I have two different floor plans (upstairs and downstairs) that I want to navigate through. I created the models in Sketchup, saved each as a png, used Inkscape to create svg’s with individual room layers. I am still relatively new to home assistant and still learning, but I have the upstairs floor plan working basically how I want (other than it loading very slowly).

In my learning process I have used the HACS HA-Floorplan and the built in picture elements card. But no matter what I do, the downstairs svg file will not scale correctly. It is very zoomed in and only shows a small portion of the whole image. I have used it with and without using panel = true. The downstairs png scales perfectly and the upstairs png and svg both scale perfectly fine. I’ve done it in it’s own dashboard, it’s own panel card, and as a horizontal stack card with the upstairs floor plan. All work with the pngs and the upstairs svg.

I’ve cleared my browser’s cache multiple times and rebooted several times. The yaml is clearly not the issue as it is an exact copy of the upstairs that is working. Any thoughts on what could be causing the scaling issue or links to people who have had similar issues?

Update: I spent a few more hours messing around with it. I decided the issue had to be with the svg file and I believe it was. I deleted the file and created a new one from scratch. I tried updating the cards but it didn’t work so I deleted from HA again, cleared the browser’s cache, and rebooted HA. I re-uploaded it as Downstairs2.svg and updated everything accordingly.

I can now get the Downstairs2.svg file to open in a picture elements card, but not a HACS floor plan card. I tried the exact yaml but with the Upstairs.svg and it worked fine. Thoughts on why the HACS floor plan card won’t open the new, correctly made file?

(Sorry if this is not the correct place for this kind of post. Like I said, I am fairly new to Home Assistant so if there is a better place, please let me know)

Hello everyone. Thanks for your contributions and hard work. This has inspired me to jump on the bandwagon and also create a floor plan.

So i have started with the overlays and I am running into a bit of a problem.

I have light groups set up. For example, my study has 2 set of lights so i have set them up so if any of the lights are on then it lights up that room.

The problem is any other rooms that have lights on, are dark.

Not sure what i am doing wrong with my code? Can someone look and tell me where the error is?

type: picture-elements
elements:
  - entity: sensor.time_of_day
    type: image
    state_image:
      Afternoon: https://sawagw.lv/local/floorplan/home_afternoon_lights off.png
      Morning: https://sawagw.lv/local/floorplan/home_morning_lights off.png
      Evening: https://sawagw.lv/local/floor/plan/home_evening_lights off.png
      Night: https://sawagw.lv/local/floorplan/home_night_lights off.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.garage
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': https://sawagw.lv/local/floorplan/Garage21.png
      'off': https://sawagw.lv/local/floorplan/home_transparent.png
      unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
  - type: image
    entity: light.light_group_hallway
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': https://sawagw.lv/local/floorplan/Hallway21.png
      'off': https://sawagw.lv/local/floorplan/home_transparent.png
      unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
  - type: image
    entity: light.corridor_lights_group
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': https://sawagw.lv/local/floorplan/Corridor21.png
      'off': https://sawagw.lv/local/floorplan/home_transparent.png
      unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
  - type: image
    entity: light.living_zone_lights_group
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': https://sawagw.lv/local/floorplan/Living21.png
      'off': https://sawagw.lv/local/floorplan/home_transparent.png
      unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
  - type: image
    entity: light.kitchen_spots
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': https://sawagw.lv/local/floorplan/Kitchen21.png
      'off': https://sawagw.lv/local/floorplan/home_transparent.png
      unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
  - type: image
    entity: light.lights_group_study
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': https://sawagw.lv/local/floorplan/Study21.png
      'off': https://sawagw.lv/local/floorplan/home_transparent.png
      unavailable: https://sawagw.lv/local/floorplan/home_transparent.png
image: https://sawagw.lv/local/floorplan/home_transparent.png

Any help would be appreciated and until i figure this out, I don’t want to add more rooms.

I believe the problem is that your off image displays all the rooms as dark: https://sawagw.lv/local/floorplan/home_transparent.png . Instead, your off images should be similar to the on image in that they are only the room with the light off with the rest of the image being transparent.

Right now all rooms with the light off are being overlay-ed with an image with all lights off that doesn’t have any transparency.

Thanks for that. I used a transparency and also removed the https:/ and now works well.

I’ll come back with more questions when i encounter another issue.

Me again. Started to experience some strange behaviour.

At the beginning none of my backgrounds would load and it showed broken. Cleared the cache and same thing, but when i turn a room light on it would show.

Now i have this.

The rooms are in the correct place but the background image is totally off.

Checked the code and all looks ok.

type: picture-elements
elements:
  - entity: sensor.time_of_day
    type: image
    state_image:
      Morning: local/floorplan/home_morning.png
      Afternoon: local/floorplan/home_afternoon.png
      Evening: local/floor/plan/home_evening.png
      Night: local/floorplan/home_night.png
      unavailable: local/floorplan/home_transparent.png
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.front_facade
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Facade.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.outside_entrance
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/FrontTerrace.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.outside_columns
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Columns.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.living_zone_lights_group
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Living.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.corridor_lights_group
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Corridor.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.light_group_hallway
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Hallway.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.kitchen_spots
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Kitchen.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.lights_group_bathroom
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Bathroom.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
image: local/floorplan/home_transparent.png

Any ideas? Also is there a way to force the images to load and not rely on cache?

Sorted it out

Hi @fahr!

One thing I didn’t understand and I also couldn’t see in the video. How did you make your back door open according to the sensor? I mean, the open/close state is all images as well? Different images of door open and closed?

I am asking that because that would apply to blind rollers and curtains as well right?

Thanks

Correct, based on the open/closed state and the state of the light in the room it will display one of 4 images:

  • door open light on
  • door open light off
  • door closed light on
  • door closed light off

Which is basically a mostly transparent image with just the door, for example:

You could apply the same thing to your blind rollers too, you would just need a lot of images based on how many you have.

1 Like

@fahr Thanks! I noticed you gave some tips regarding how to use Dim Lights, do we have any new tips or is that remain the same?

@1nutty1 Let us know if you succeeded on that matter or if you got any update as well, since you were the first one mention this. Thanks!!

Thanks! I noticed you gave some tips regarding how to use Dim Lights, do we have any new tips or is that remain the same?

I haven’t actually used this view for a few years and no longer maintain it, so no new tips.