Floorplan for Home Assistant

DDK · September 10, 2017, 9:42pm

There is something to that suggestion…
I have downgraded home assistant to 0.50, now it works with my iPhone (on ios10.3) and my iPad on iOS 11. It still doesn’t work on my old iPad that is on 9.3.
In other words, the newer versions of iOS do fix part of the problem, but not the problem introduced in the latest version of home assistant.

hijinx · September 10, 2017, 9:43pm

The floor-plan icon is not live in HASS 0.53

sendorm · September 10, 2017, 10:34pm

The problem with my iphone @ios 10.2 started with the 0.50 version. It was working fine with 0.49.x.

automateit · September 11, 2017, 5:45am

So I have finally gotten the hang of this floorplan thing and love it.

I have 2 of them as side panels in the UI - one for upstairs and one for downstairs.

How do I configure one of the icons to link to the other floorplan?
For example, I want to click on the arrow icon of my stairs to switch to the upstairs floorplan, like so:

How would I do that if possible?

OzGav · September 11, 2017, 10:34am

I still have nothing but a spinning circle. I have gone through the steps again. Any ideas on what could be wrong?

sendorm · September 11, 2017, 1:57pm

What is your environment? Phone, pc? What is your home assistant version? Is it more than 0.49? Is your client an iphone? If iphone, does it have a firmware less than 10.3? If you have yes on these questions. This is a known error with no known resolution as of yet.

DDK · September 11, 2017, 4:30pm

Did you copy the lib folder?

Solo · September 11, 2017, 9:57pm

It’s a coincidence I came across your question today. I just bought two Fire 7s for $30 ($15 each) for this exact purpose. I get nothing from this but I thought some people might be interested and could take advantage. Even without the Amex points Prime members still get a discount on Kindle Fires today.

OzGav · September 12, 2017, 2:19am

Thanks Sendorm. I have Home Assistant 0.52.1 running on a Raspberry Pi. Clients are Chrome running on a Windows 7 PC and Safari on an iPad Air.

sendorm · September 12, 2017, 5:42am

The ipad is a known problem. For the pc it should be working.

anon35356645 · September 12, 2017, 6:18am

No, no, no, no

OzGav · September 12, 2017, 7:06am

EDIT: I copied in a clean version of floorplan.yaml which fixed it. I will now embark on getting mine working. Thanks for the help so far.

OzGav · September 12, 2017, 12:33pm

I am making solid progress! The only problem I have appears to be some SVG odd behaviour. I am using Inkscape. I can put any shape I like in my SVG and it will show up fine. However, if I put some text on the image it is invisible when viewed in the browser.

I was able to use the fill tool and colour some of the letters and then I could see it. If I put another filled rectangle over the text I still can’t see it (I take this to indicate that the text isn’t white). The only way I can see the text in the browser (its looks fine in Inkscape) is to subsequently colour each letter in.

Whilst this works for the text I type in I don’t see the outside temperature I am trying to get working. I am not 100% sure how this works but I am assuming you can put in any text in a box and then make it’s ID the same as the sensor in HA and that text will be replaced with the sensor value. Is that right? In any case has anyone seen this invisible text issue before?

sjee · September 12, 2017, 12:56pm

Can you post your SVG so we can take a look?

Tinkerer · September 12, 2017, 1:00pm

Convert it to a path, and it’ll appear - select it, then Path then Object to path

OzGav · September 12, 2017, 1:08pm

Thanks @Tinkerer that fixed it. Is there a setting I am missing as I am perplexed as to why I am the only one having this problem?

Now I can see the text in HA but the text I have made the ID the same as the sensor (sensor.bom_archerfield_air_temp_c) it is staying as is. Is it supposed to just automagically be changed to the sensor value? If so I must have something wrong…

EDIT: I just noticed if I hover over it the correct info is shown in the pop up box but the text is unchanged.

Tinkerer · September 12, 2017, 2:26pm

You’re not the only one, I’ve posted that what feels like half a dozen times in the last couple of weeks - here and in Discord.

For dynamic text, I simply copied the entity used in the example floorplan, and worked from there.

FrenchToast · September 12, 2017, 2:51pm

Not positive I’ll have to check my files tonight, but I believe the text should be converted to “text” not “path”.

Also, take a look at the below. If it’s not updating you might have the syntax wrong in your floorplan.yaml.

phdelodder · September 12, 2017, 3:12pm

I have a panel floorplan, that works. Now I want to use a different floorplan in custom state card.

I have the following config:

Binary_Sensors.yaml

 - platform: mqtt
   state_topic: dummy/floorplan-greenhouse/sensor
   name: "Floorplan Greenhouse"

Customize.yaml

binary_sensor.floorplan_greenhouse:
   config: !include floorplan-greenhouse.yaml
   custom_ui_state_card: floorplan

floorplan-greenhouse.yaml

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

   # These options are optional
   # warnings:                  # enable warnings (to find out why things might ot be working correctly)
   # pan_zoom:                  # enable experimental panning / zooming
   # hide_app_toolbar:          # hide the application toolbar (when used as a custom panel)
   # date_format: DD-MMM-YYYY   # Date format to use in hover-over text

   #last_motion_entity: sensor.template_last_motion
   #last_motion_class: last-motion

   groups:

     - name: Serre Temperature
       entities:
          - sensor.serre_temperature
       text_template: '${entity.state ? entity.state : "unknown"}'
       class_template: '
          var temp = parseFloat(entity.state.replace("°", ""));
          if (temp < 10)
            return "temp-low";

          else if (temp < 25)
            return "temp-medium";
          else
            return "temp-high";
          '

Folder structure of www

www:
total 180
drwxrwxr-x 3 hass hass 4096 Sep 7 13:29 .
drwxrwxr-x 9 hass hass 4096 Sep 12 17:10 …
-rw-rw-r-- 1 hass hass 141581 Jun 21 08:51 HPOJ6700.png
-rw-rw-r-- 1 hass hass 4342 Jun 21 08:47 black.jpg
drwxrwxr-x 3 hass hass 4096 Sep 12 16:59 custom_ui
-rw-rw-r-- 1 hass hass 4598 Jun 21 08:47 cyan.jpg
-rw-rw-r-- 1 hass hass 4549 Jun 21 08:46 magenta.jpg
-rw-rw-r-- 1 hass hass 3509 Jun 21 08:47 yellow.jpg

www/custom_ui:
total 16
drwxrwxr-x 3 hass hass 4096 Sep 12 16:59 .
drwxrwxr-x 3 hass hass 4096 Sep 7 13:29 …
drwxrwxr-x 3 hass hass 4096 Sep 12 16:59 floorplan
-rw-rw-r-- 1 hass hass 420 Sep 1 23:49 state-card-floorplan.html

www/custom_ui/floorplan:
total 1112
drwxrwxr-x 3 hass hass 4096 Sep 12 16:59 .
drwxrwxr-x 3 hass hass 4096 Sep 12 16:59 …
-rw-r–r-- 1 lodder lodder 225392 Sep 12 16:24 Floorplan-Greenhouse.svg
-rw-rw-r-- 1 hass hass 2261 Sep 1 23:49 floorplan.css
-rw-rw-r-- 1 lodder lodder 859616 Sep 12 16:11 floorplan.svg
-rw-rw-r-- 1 hass hass 30916 Sep 7 21:01 ha-floorplan.html
drwxrwxr-x 2 hass hass 4096 Sep 7 13:29 lib

www/custom_ui/floorplan/lib:
total 180
drwxrwxr-x 2 hass hass 4096 Sep 7 13:29 .
drwxrwxr-x 3 hass hass 4096 Sep 12 16:59 …
-rw-rw-r-- 1 hass hass 86659 Sep 1 23:49 jquery-3.2.1.min.js
-rw-rw-r-- 1 hass hass 51466 Sep 1 23:49 moment.min.js
-rw-rw-r-- 1 hass hass 29809 Sep 1 23:49 svg-pan-zoom.min.js

Any Ideas?

OzGav · September 12, 2017, 10:42pm

@Tinkerer again you are spot on. I copied from the example and that is working. Why I do not know! If anyone can tell me I would love to know.

@FrenchToast I couldn’t find a convert to “text” option. Let me know if you find it.