3D Floorplan using lovelace picture-elements card

[fahr (Aaron)]

I spent the last few weeks creating my own 3D floor plan in home assistant after seeing other user’s post their creations. The model was created using SweetHome3D and the individual images for the various layers (lights in a room on/off, tv on/off, back door open, etc) were created using Gimp. I’m pretty pleased with how it turned out and wanted to share in order to inspire others.

Home Assistant 3D Floorplan Demo

Some of the more unique things in my floor plan:

• Added a button to toggle between the 1st and 2nd floors.
• When the back door contact sensor reports that it is open the back door will be open in the model and will close again when the contact sensor reports closed.
• Adds a glow around the tv screen when the tv is on.
• Clicking on the security cameras will toggle their armed status.

Tutorial is available here: Creating an Interactive 3D Floorplan in Home Assistant - Automate The Things

[kabsten (Kyle Absten)]

This is really cool! Well done!

[buzzshot]

Very well done! Liking the TV and under cabinet lights

[fahr (Aaron)]

I finally got around to creating a tutorial for others who want to give this a try. https://aarongodfrey.dev/home%20automation/creating-a-3d-floorplan-in-home-assistant/

[foxlees]

HI, I have managed to setup my office and Barn building using your tutorial, I am using the stock Lovelace UI, so do not have a Lovelace yaml, the problem I am having is getting the input select and conditional cards working I am not sure where to put the config for the input select, I have setup input select in configuration.yaml that’s working, I have modified the picture elements card for each floor to have the select.button that works, but can not understand where to put the actor code for the input selection as per your guide any help would be appreciated, I am also having a slight issue with the opaque circle for the on/off for each of the lights, when I create the circle in PH set opaque to 1% save the file (the same way I did all the other rooms for the complete floorplan) then set it up on the card it does not seem to allow me to select it

[fahr (Aaron)]

I’m not exactly sure which actor code you are referring to. I think you mean the service-button? There is no extra code required outside of the following lovelace yaml:

  - type: service-button
    title: 2nd Floor
    service: input_select.select_next
    service_data:
      entity_id: input_select.floorplan_floor
    style:
      top: 15%
      left: 5%
      background: "#eaeaea"
      border-radius: 5%

The input_select.select_next service is built in to homeassistant.

It’s hard for me to answer your second question without having access to your yaml. My best guess would be the order of the elements is preventing you from clicking on individual lights or your image is too large. It looks like I didn’t mention it in the blog post (I’ll update it) but you should have all of your lighting overlays before your toggles in your lovelace view. If you put a lighting overlay after a toggle then you will not be able to click on any of the toggles.

[foxlees]

Hi, thanks for responding looks like my 2nd question has been answered, I put the switch icons after each of the images, so as you said all the Light overlays need to be before the light toggles so I will readjust those and should fix it.

My first query was around the placement of the Floorplan.yaml, I am not sure where to put this code do I create a Floorplan yaml file in the config dir, or do I add this code somehow in the Lovelace UI using the raw editor.

What I was saying is I don’t use a Lovelace in yaml mode, I use Lovelace UI

Ok so in summary, I have added the input select code into my standard configuration.yaml, and have the entities listed in unused entities so I guess that’s working.

I have added the floor toggle code to each of my Floorplan cards and that works,
The only part I am unsure is the conditional card/ horizontal stack and the code that you have listed under Floorplan.yaml
I hope this is clearer now than my previous explanation

[fahr (Aaron)]

Wonderful! I’m glad I was able to resolve one of your two issues.

Thank you for elaborating on the other problem, I have a better idea what you are are referring to. I have not used the default lovelace ui without setting the configuration option:

lovelace:
  mode: yaml

I think you would have to use the raw editor and not have separate files as I’m not sure if you can include other views via the raw editor or not. Currently I have 3 files. floorplan.yaml just has the conditional cards for each floor. Then I have another yaml file for the 1st floor and the 2nd floor. I only did this because otherwise the floorplan.yaml would be hundreds (or over a thousand) lines.

Again I’m not super familiar with the raw editor, but I think you would just use it to have a conditional card and put the entirety of each of your floors yaml into each conditional block. This would give you access to the service-button to toggle the input select for your floors.

Let me know if that doesn’t make sense, and thanks for pointing out that I didn’t document the proper order of the overlays and toggles!

[criskolkman (Cris)]

Hello @fahr,

Love what you did here!

I do have a question.
I’m trying out your tutorial but when I have a light off, it’s not being shown as it should (the off image is being shown with full with instead of being put on the place it should be).

Lights on:

1 light (for now the only one added) off:

Do you have any idea of what I’m doing wrong?

Also with the below code the transparant square with the red border is not being added to the image.

- type: image
    entity: group.bar
    tap_action:
      action: toggle
    image: /local/floorplan/transparent_square.png
    style:
      top: 71%
      left: 40.5%
      border: 5px solid red

[fahr (Aaron)]

My guess would be the ordering of your elements is causing it to get covered up by another image. It’s really hard to say without seeing the images and more of your picture-elements yaml.

[criskolkman (Cris)]

Hello @fahr,

Thank you for the fast response!

I used SweetHome 3D to create the image with the lights on and created the photo 1540x558.
To create the overlays with the lights off I took the same steps to create the image with the lights on, only then with the lights turned to 0%.
Then I used Gimp (lasso tool) to cut out the different dark parts of the house.

My /config/ui-lovelace.yaml:

  - id: floorplan2
    title: Floorplan2
    path: floorplan2
    panel: true
    icon: mdi:floor-lamp-variant
    cards:
      - type: horizontal-stack
        cards:
          - type: conditional
            conditions:
              - entity: input_select.floorplan_floor
                state: "Begane grond"
            card: !include begane-grond.yaml

My /config/begane-grond.yaml:

type: picture-elements
image: /local/floorplan/Thuis-Beganegrond.png
elements:

  # Lighting Overlays...
  - type: image
    entity: group.bar
    tap_action: none
    hold_action: none
    state_image:
      "on": /local/floorplan/transparent_square.png
      "off": /local/floorplan/Bar-Off.png
    style:
      top: 5%
      left: 10%
      width: 100%

  # Light Toggles...
  - type: image
    entity: group.bar
    tap_action:
      action: toggle
    image: /local/floorplan/transparent_square.png
    style:
      top: 71%
      left: 40.5%
      border: 5px solid red

  # Floor Toggle
  - type: service-button
    title: Begane grond
    service: input_select.select_next
    service_data:
      entity_id: input_select.floorplan_floor
    style:
      top: 15%
      left: 5%
      background: "#eaeaea"
      border-radius: 5%

Sorry, English isn’t my native language, hope you understand what I mean.

[fahr (Aaron)]

Your English is excellent!

Are those 2 images the exact same that you are using? If so it will not work like you want. The image you have with the lights off needs to be exactly the same size as the main image with the lights on. It should be the same size with the rest of the image being transparent.

[criskolkman (Cris)]

Ohhhh I didn’t understand it like that.
I thought I had to cut the part out but now I understand that you have to cut the rest out and make it transparent.

Thanks I will try that in a bit!

Any idea why the transparent square with the red border isn’t showing?

[criskolkman (Cris)]

@fahr,

Thank you for your help/explaination!
I’ve come up with below results, not the most beautiful work but it’ll do for now.

Lights off:

Livingroom, bar, garage and front door on:

[fahr (Aaron)]

Great work! You may want to try adding a gaussian blur around the edges of the image with the lights off to make the darker areas blend better into the lit areas.

Glad you got it working!

[criskolkman (Cris)]

Thank you for the tips @fahr!

Still struggling a bit with creating the lights off images (see image below with the lights off, you can see the lights from the image below (with all the lights on) coming through).
But for now I’m kind of satisfied.

[criskolkman (Cris)]

Seems that the light coming from the image below (with the lights on) is being caused by the blur I added.
When I replace the dark images with the ones I haven’t applied the blur to, it’s a lot better.

[fahr (Aaron)]

It is tricky when you have multiple lights in a single room. That’s the primary reason each room only has one light that can be clicked which controls the entire room in my floorplan.

Since you only have one room like this the other thing you could do is multiple renders with one light on and 2 off, 2 lights on and 1 off, etc. That would create a lot of extra work though, so if you are happy with what you’ve got I would stick with that!

[criskolkman (Cris)]

Hello @fahr,

Yes that’s what I thought, I will leave it like this for now.
Thank you for all your help and tips!

[henrikrox]

cris, i can code but i cant work with gimp, im trying to lasso etc, but i cant get it to work, do you have a quick tutorial for this, i dunno how to setup the layers for it to work.

Great job btw