Floorplan for Home Assistant

I just upgraded to Hass.io a few days ago then discovered this floor plan piece! I was hesitant at first because it looks so awesome so I thought it’d be a lot of work. Turns out, was pretty easy. I’m still exploring what I can do but here’s what I got so far.

I couldn’t get tracker status to change though. I followed example here by CCOSTAN and it still won’t change in floorplan when it changes in other areas of HA.

Can’t wait to add sprinklers around the house (Rachio), webcam feeds and perhaps some animations. Very cool.

2 Likes

Does not work with ios anymore, version 0.52.1.

Will Floorplan support dimmers? Or did I miss that somewhere in this huge thread?

Also, kiosk mode came out with .49. Does Floorplan support it? Or I guess the question is: does kiosk mode supports Floorplan?

Hi

I’m new to HA/floorplan but learning

Not sure if this is a general HA question or Floorplan but…I’ve setup sensor.time and sensor.date to display on my floorplan and I would like the time to be displayed in 12 hour format and the date to be in Australian format eg. DD:MM:YYYY is this possible ?

Change your sensors to follow this format. You can change around the value template to get the exact format you are looking for, but this should be close to what you are looking for:

sensor:
  - platform: template
    sensors:
      floorplan_date:
        friendly_name: 'Date'
        value_template: >-
          {{now().strftime("%d")}}:{{now().strftime("%m")}}:{{now().strftime("%Y")}}
  - platform: template
    sensors:
      floorplan_time:
        friendly_name: 'Time'
        value_template: >-
          {{now().strftime("%-I")}}:{{now().strftime("%M")}} {{now().strftime("%p")}}

Refer here for more details http://man7.org/linux/man-pages/man3/strftime.3.html

1 Like

Does anyone know how to wrap text around a box? I have tried using “flowed text” but nothing appears in my floorplan. When I use a regular text box it works, but does not wrap as you can see from the following image:

textissue

I am using inkscape for editing if that matters.

Thank you appreciate the help :slight_smile:

Just FYI I also did try to find a way to do this but I did not find anything. May not be possible.

~Cheers

1 Like

I am hoping someone could help me out. I started with a basic floorplan setup with only lights and switches. I followed the instructions here -> https://github.com/pkozul/ha-floorplan for a custom panel however the .svg file is not loading and I am receiving a bunch of errors. Not sure what I need to look at to resolve these errors, anyone have an idea? The first one really confuses me because while I do have a camera in my HA setup I did not include it in the floor plan svg file.

Thx

Errors in Dev panel of chrome:

api/camera_proxy/camera.local_radar?token=03503560f299c2d9508698bc2f39bbea0dbe68e58fc2ddbefcffe15496fed20f&time=1504209327478 Failed to load resource: the server responded with a status of 401 (Unauthorized)
api/camera_proxy/camera.phonecamera1?token=15f2c6cd338f2c05403712e50c1b35be854be35cf88b5f1c9d544377b585556f&time=1504209327478 Failed to load resource: the server responded with a status of 401 (Unauthorized)

core-2a7d01e45187c7d4635da05065b5e54e.js:1 WebSocket connection to ‘ws://192.168.1.9:8123/api/websocket’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Uncaught ReferenceError: $ is not defined
at HTMLElement.error (ha-floorplan.html:860)
at HTMLElement.handleWindowError (ha-floorplan.html:185)
ha-floorplan.html:156 Uncaught ReferenceError: moment is not defined
at WebSocket.hass.connection.socket.addEventListener.event (ha-floorplan.html:156)

Uncaught ReferenceError: moment is not defined
at WebSocket.hass.connection.socket.addEventListener.event (ha-floorplan.html:156)
hass.connection.socket.addEventListener.event @ ha-floorplan.html:156
ha-floorplan.html:860 Uncaught ReferenceError: $ is not defined
at HTMLElement.error (ha-floorplan.html:860)
at HTMLElement.handleWindowError (ha-floorplan.html:185)

Edit:

I reloaded the floorplan page and it eliminated the camera error however I am still receiving these errors and the image is not loading. If you have any ideas on what these might be I’d appreciate the help !

image

Edit2:

I also just noticed my Configuration panel is missing

image

Slowly making progress, I think. Turns out I didn’t realize that a lib folder needed to be added to the www/custom_ui/floorplan folder. After adding those files I have run into a new set of errors. I am unable to load the floorplan panel and I see the errors below. Anyone have an idea about these?

image

phew, persistence has paid off. Seems I forgot to update a path in the floorplan.yaml file when I was trying an attempted fix. Now that I changed it back it’s working !

1 Like

Hi all

trying to achieve something just cant get my head around it

I have a presense detection working that displays Home and Away text no problems
However I want the color of another SVG element to change with this as well.
is it possible to achieve a trigger effecting two different SVG elements with separate CSS styles ?

  - name: Family
entities:
  - device_tracker.samsung_s7
  - device_tracker.nexus_5
text_template: '${entity.state ? entity.state.replace("not_home", "away") : "undefined"}'

states:
  - state: 'home'
    class: 'text-home'
  - state: 'not_home'
    class: 'text-away'

thanks

1 Like

FYI - There is now a Sub Category specifically for Floorplan under 3rd party integrations. Now we can break out these conversations into appropriate topics and threads for support.

I think it might make sense to lock this one up and start new threads for support issues and showing off the UIs.

7 Likes

I was able to get this up and running; however, my floorplan display is really small as shown below. Can anyone help me get the plan to fill the entire available space? I’m running Hassbian 0.52.1.

Open your list of panels on the left side and click on Floorplan. I believe you also should look at kiosk mode.

Ken

I’m loading Floorplan as a custom state card instead of a panel. Do I need to use a panel to get it to resize properly?

EDIT - Switching to panel did get the floorplan to resize properly. Maybe there is an issue with the state card HTML?

Hi,

Is it possible to have multiple istance of Floorplan running? Basically I would like to run 2 custom panel with different SVG files. Is it possible?

Nik

Yes you just need to create multiple “floorplan.yaml” files in custom_panel and if you use

 config: !include ../floorplan.yaml

in there you need another one of those as well.

~Cheers

Hi,

Thanks for your reply.
I did it but i doesn’t work.
It shows me 2 panels, but the second one is empty. Maybe do I need to duplicate something else?

Nik

Can you please explain in more details. In the same directory is not possible to have two floorplan.yaml

May I have same contact, so I don’t need to explain much what to do