Floorplan for Home Assistant

Gilganik · September 4, 2017, 8:08pm

Hi PhyberApex!

I’ve this setup here:

configuration.yaml:
panel_custom:

name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan
config: !include floorplan.yaml
name: floorplan2
sidebar_title: Test
sidebar_icon: mdi:home
url_path: floorplan
config: !include test.yaml

Into my file test.yaml, I specified a new .svg and a new .css file. Actually it’s not working. To the Left I see only the first panel.
Do I need to “clone” some other configuration file? I see there’s one inside “Panels” and one inside “www/custom_ui/floorplan/” called “ha-floorplan”.

Any tips?
Would you be so kind to share your configs maybe using GitHub?

Thanks!

PhyberApex · September 5, 2017, 8:02am

My config actually is already online on github. It can be found here: https://github.com/PhyberApex/homeassistant-config

~Cheers

anon35356645 · September 5, 2017, 9:18am

Can someone please help me understand how to proceed.

Currently I do have my floor plan in PDF like this

Cattura

now I found some external consultant that can convert it into SVG.

Once is converted in SVG I can add freely lights/switches/ airco and so on, and have it as below (copied from a user here)?

My goal is to have for each room

click on a light symbol to turn on/off the smart lights, plus a light symbol to turn them all off/on (if there is more then one)
show a door/window open/close (to those that have a sensor on it)
having the camera red if there is movement; clicking on the camera to show the feed

is the above possible?

sardoc · September 6, 2017, 2:22am

All 3 of those goals are doable - I actually do the first two myself (and probably should implement the third, been meaning to).

I didn’t write this, but here’s a quick tutorial on the basics:
https://github.com/pkozul/ha-floorplan/blob/master/own-floorplan-svg-file-tutorial.md

For your specific cases:

For the light symbol to turn all lights on/off, add the icon, then map that to a group containing all your lights.Can do that for individual lights, or groups of lights.
Simply map the door/window icon to your device names. In the floorplan.yaml file, make sure you map the statuses (Open/Closed) to classes in the CSS file
When I get around to doing this, I’m probably going to create a generic shape (cone of some sort) that roughly covers the area my motion sensor detects. Then I’d map that shape to my motion sensor status (with CSS classes defined in the floorplan.yaml file). Fairly similar to the door/windows actually.

OzGav · September 6, 2017, 12:29pm

Hi all,

First post noob! I have installed floorplan as per the instructions and checked them over but can’t find the issue. I am wondering if it is an incompatibility with the version of hass.io I am running? Anyway I have Home Assistant
0.52.1 running on a Raspberry Pi.

The error I am getting is:

Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
URL: http://192.168.1.105:8123/local/custom_ui/floorplan/ha-floorplan.html
Line: 235, column: 55
Error: {}

I have modified the floorplan.yaml file so I can’t work out where it is still getting that old URL from? The first three lines of my floorplan.yaml is now:

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

Any ideas?

sardoc · September 6, 2017, 3:38pm

You probably shouldn’t have modified those lines in the floorplan.yaml file (unless you made changes on the webserver side of things)

Leave it as (copied from mine):
name: Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css

The image and stylesheet above aren’t mapping to your local file system. They are the webpath to the svg and css. So to test if you have the right path, see if http://192.168.1.105:8123/local/custom_ui/floorplan/floorplan.svg exists. If it does, that’s what you should be using.

I’m not sure that’s the specific problem you are having, I just remember struggling with those lines initially as well (I too thought they were the local file path in the linux system…).

I am using hass.io on a Raspberry pi 3 (v52.1). The only issue I’m aware of is that Floorplan currently won’t work on iOS devices at that version

OzGav · September 6, 2017, 10:08pm

Edit: I think I have fixed it… Will let you know if it works.

Edit 2:
Actually no it doesn’t. The errors have gone but now I just have a spinning circle both on the Zones card on the default view and on the Floorplan custom panel.

What does the spinning circle indicate?

photo64 · September 7, 2017, 1:33pm

I have the same issue that @Will_Garbutt had back on July 16 of this thread where the weather icon is not inside the element is supposed to be tied to. I followed all the same setup and changed viewbox to viewBox in all of the weather svg files. I even applied the changed that worked for @Will_Garbutt by commenting out the pan/zoom option in the floorplan.yaml file but none of this seems to work. Anyone have an idea why the weather svg files are not being tied to the element as it should be?

xstrex · September 9, 2017, 1:34am

Hey guys, been lingering here for a few days. Thank you to everyone who contributed to the floorplan, it’s a great addition to HA!

I’ve spent the better part of a day creating my custom svg, and think I’ve got it working (and looking) just the way I want it.

Only problem I’m having now is the weather Icons that @pkozul originally posted about. I’ve downloaded the svg’s, changed the viewBox attribute, created a rect in my svg, assigned the ID to that of my dark_sky_icon sensor, and followed every step I could find here, as well as the github page. But it’s still not displaying a weather icon.

I can even display the weather icon if I goto: https://EXTERNAL-NAME/local/custom_ui/floorplan/images/cloudy-day-1.svg

I’ve also cleared / disabled cache, and tried it on Chrome (desktop), chromium-browser (Rpi), & Fully (Android).

Here’s my rect from my svg:

<rect
       style="display:inline;opacity:0.97000002;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00afff;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="sensor.dark_sky_icon"
       width="170"
       height="170"
       x="10.714"
       y="10.000017"
       inkscape:label="sensor.dark_sky_icon" />

And here’s my Dark Sky Sensor group from floorplay.yaml:

- name: Dark Sky Sensors
  entities:
    - sensor.dark_sky_icon
  image_template: '
    var imageName = "";

    switch (entity.state) {
      case "clear-day":
        imageName = "day";
        break;

      case "clear-night":
        imageName = "night";
        break;

      case "partly-cloudy-day":
        imageName = "cloudy-day-1";
        break;

      case "partly-cloudy-night":
        imageName = "cloudy-night-1";
        break;

      case "cloudy":
        imageName = "cloudy";
        break;

      case "rain":
        imageName = "rainy-1";
        break;

      case "snow":
        imageName = "snowy-1";
        break;
    }

    return "/local/custom_ui/floorplan/images/" + imageName + ".svg";
    '

Been banging my head on this for a few hours, any suggestions would be greatly appreciated!

cxlwill · September 9, 2017, 3:55am

Hey guys, I start to make a series of video tutorial about this project. You can access the first part from here and second part here. Since I am not a native English speaker, plz forgive my pour pronunciation and pause. I am trying to introduce the simplest way to fulfill the floorplan. And I hope you can enjoy it.

ggravlingen · September 10, 2017, 7:31am

Really cool, keep up the good work!

Smoculetz · September 10, 2017, 9:52am

Same problem, does not work on IOS devices. Either with chrome, safari, or Home Assistant App, it says : Script error: see browser console for details … any thoughts ?

Smoculetz · September 10, 2017, 9:54am

Same problem, does not work on IOS devices. Either with chrome, safari, or Home Assistant App, it says : Script error: see browser console for details … any thoughts ? … we can only use Android based tablets from now on ? …

sendorm · September 10, 2017, 12:12pm

I haven’t tried it myself yet. (still waiting for the ios 11 update, fingers crossed), but it has been said that floorplan not working is an issue with ios version and any ios version less than 10.3 will have similar problems. In your case you can try updating to ios 10.3 but I urge you to wait for ios 11 which will be avaliable in 2-3 days time.

Smoculetz · September 10, 2017, 12:58pm

Thanks, will do (the waiting and upgrading part) ! … but I have some iPad Mini 2 tablets, in wall mounts … lets hope they get the IOS 11 update too … otherwise … google nexus 7 2013 all the way …

DDK · September 10, 2017, 6:20pm

Sorry, I have bad news. I have been on ios11 for a while now (public beta), and it has exactly the same issue.

sjee · September 10, 2017, 6:34pm

The problem is caused by Polymer 2.0 changes in HA. The issue have been reported but untill now there is no solution.

Smoculetz · September 10, 2017, 6:47pm

Nice … it’s not (as yoda would say), so what small size (7…8"), inexpensive IPS screen android tablets do you guys recommend ? … a full screen working interface of Home Assistant Floorplan is a must !

jmart518 · September 10, 2017, 7:57pm

I would suggest going with a Fire HD 8 and Fully Kiosk Browser, it’s an awesome combo for HA (especially w/ Floorplan)

sendorm · September 10, 2017, 8:46pm

People were suggesting some polymer 2.0 capabilities were only available from 10.3 and up. So their guess were wrong. The solution lies in the floorplan code fix then. So it’s on my waiting list again. Thanks for the insight by the way