Floorplan for Home Assistant

Third party integrations Floorplan
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!

287

I’m not sure what the difference between safari and chrome are but it works on chrome.

288

I have downloaded Chrome and it works now. It does not work however when using Safari.

Thank you to everyone who have assisted and guided me to getting it to work.

1 Like
289

Many, many thanks! It is starting to look like something!
Made a few small changes, and not everything is to my liking yet, but all seems to be working!

1075×513 24.6 KB

3 Likes
290

No worries glad you got it working, it’s an awesome addition to HA :smiley:

1 Like
291

Would you mind posting your SVG or AI file? Love your image, I use AI as well would be great to use as a template.

292

I used this SVG file Floorplan for Home Assistant

When I’m done I do plan to share all the CSS and SVG.

2 Likes
293

Hi Bram,

I would really like the css and sgv if you are done… (mainly the css for the colors :wink:

294

Question, can I also use attributes as the class_template and text_template? Or only the state?

I tried:
entity.attributes.current_temperature
But that doesn’t work… what am I doing wrong?

Thanks so much for all the effort!

295

Is there a way to make it so that when i click on an open area of a room it switches to a room view. Been reading but i’m not really seeing any mention of it.

I made something like what i mean before with a couple other programs. Here is an example of what i mean

6 Likes
296

I use this:

https://github.com/CCOSTAN/Home-AssistantConfig/blob/master/floorplan.yaml#L7-L11

To get this:

1 Like