Floorplan for Home Assistant

Third party integrations Floorplan
267

Finally got around to setup my floor plan.
Awesome feature! You rock @pkozul

1440×772 63.4 KB

Now i need some more sensors :slight_smile:
Green area = Motion Sensor Not Triggered

3 Likes
268

@mcfrojd could you make your svg file available? I tried but it’s somehow not clear how to create it for me, your svg would be a good starting point :smile:

269

Here you go…
(Updated the dropboxfile)

1 Like
270

Thanks :slight_smile:

271

Side question @mcfrojd, What is the MDI Icon Index link?

272
2 Likes
273

I am a happy user!!!
off to create the first floor and attic :wink:

3149×1435 262 KB

1 Like
274

What i did:

  1. I created the basic layout of my house in floorplanner.com.
  2. Made a screenshot of the layout (the export of floorplanner.com is very low)
  3. Imported the screenshot in Inkscape. (create layers <-- search youtube for more info)
  4. Look up the icons you need at https://materialdesignicons.com/
  5. Right click the icon you need
  6. save the icon as a compressed svg
  7. Import the saved svg in Inkscape (Ctrl + i)
  8. Repeat 4 to 7 for every icon
  9. Positions the icons and give them the names of the entities of home-assistant!

Thats all folks!!

5 Likes
275

Just adding my work in progress to the inspirational mix! Really Great project! I was able to add input_booleans, Covers and climates. Really amazing!

2001×1125 172 KB

Source files can be found in my Repo.

5 Likes
276

Anyone any luck with showing the status of webcams/cameras?
Mine stay without the entity class…

277

I too would love to have your file! I almost finished recreating your styling in Inkscape, but then Inkscape crashed and of course, I did not save it…

278

@Bram_Kragten and @john1 here is my file. I’ve removed some of the effects which are not supported by SVG… I hope it still works!

1 Like
279

Thanks! I’ll look into it tonight!

280

@pkozul Would it be possible to have tabs on the top of the panel, the same as the States panel, so I can have a tab for every floor? Does HASS support this? And could you point me in the right direction? Not at home in the HASS front end…

2 Likes
281

I am struggling to get floorpan to work and have been trying for the last 2 days without success. I am new to Home Assistant and have done a clean installation of Hassbian on a Raspberry.

  1. Do I copy the files of the repo into the “/srv/homeassistant/” or “/home/homeassistant/.homeassistant” directories?
  2. There are no “www” directories. Do I create the same directory structure as the repo?
  3. Could anyone please provide me with a basic configuration.yaml, floorplan.svg, floorpan.css, files etc. with some instructions on what directories needs to be created and where these files needs to be placed. I would truly appreciate any assistance. It is not out of laziness, I have tried to follow the instructions on GitHub and have not been successful.
  4. When browsing I am using Safari version 9.0.3

I am sure that if I can get a minimalist setup working and be able to view the svg file, I could take it further.

282

Hi @Fezile

My setup is with “Option 2: Floorplan custom panel”. I hope the next figure will answer your questions 1 and 2. It is the directory tree of folders and files of this component:

As you can see, three files are in the last folder (floorplan) and examples for these can be found in the Github’s repository that you can download.

The file floorplan.yaml should be placed in /home/homeassistant/.homeassistant directory. There is also an example in github. For the custom panel it is also needed a file in its corresponding folder as you can see here:

And again there is an example file in github.
Finally, the part inside configuration.yaml

panel_custom: 
  - name: floorplan
    sidebar_title: Floorplan
    sidebar_icon: mdi:home
    url_path: floorplan
    config: !include floorplan.yaml

I hope I have remembered everything. I don’t know for the “Custom State Card” option, but for the “Custom panel” it is pretty easy. Good luck and ask if you get stuck!

283

One super important tip I learned is to make sure ALL IDs are lowercase. pretty much make sure all device names in HASS and floorplan are lowercase to avoid a ton of troubleshooting and frustration.

1 Like
284

floorplan.yaml (548 Bytes)
I have done as you indicated but the floor plan does not display.

  1. In floorplan.yaml should the path “/local” remain /local/custom_ui/floorplan/floorplan.svg.
  2. I have included below the floorplan.yaml to check if this is correct. The floorplan.yaml and floorplan.svg have been edited to only contain the ID “binary_sensor.front_hallway”.

floorplan.yaml

  name: Demo Floorplan
  image: /local/custom_ui/floorplan/floorplan.svg
  stylesheet: /local/custom_ui/floorplan/floorplan.css

  groups:

    - name: Binary sensors
      entities:
        - binary_sensor.front_hallway
      states:
        - state: 'off'
          class: 'info-background'
        - state: 'on'
          class: 'warning-background'
      state_transitions:
        - name: On to off
          from_state: 'on'
          to_state: 'off'
          duration: 10
285

That’s what I have, “local” is replaced by HA with “www” … this is my floorplan.yaml …

  name: Floorplan
  image:      /local/custom_ui/floorplan/floorplan.svg
  stylesheet: /local/custom_ui/floorplan/floorplan.css

  last_motion_entity: sensor.template_last_motion
  last_motion_class: last-motion

  groups:
    - name: Sensors
      entities:
        - sensor.avglroomtemp

Remember tho’ the actual files must be in /home/homeassistant/.homeassistant/www/custom_ui/floorplan/ ie where the github specifies :slight_smile:

286

I have the same paths as you and @keithh666

Have you mentioned your version of Home Assistant? I think you should have > 0.42
Other than that, I cannot point you in any direction. I have very little knowledge of software development. Sorry!