Floorplan for Home Assistant

Third party integrations Floorplan
1312

My floorplan isn’t opening (anymore).
This is my error ( on the floorplan) : Error loading stylesheet

this is my floorplan.yaml

  image: /local/custom_ui/floorplan/floorplan.svg
  stylesheet: /www/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
  

  groups:
  
    - name: temperatuur
      entities:
         - sensor.temperature_158d00022c8b2be
      text_template: '${entity.state ? Math.ceil(entity.state) + " °C": "undefined"}'

and this is my floorplan.css
/* SVG shapes */

svg, svg * {
vector-effect: non-scaling-stroke !important;
pointer-events: all !important;
}

/* Outdoor Temperature */

.temp-very-low {
fill: #00a1ff !important;
fill-opacity: 1 !important;
}

.temp-low {
fill: #00ddff !important;
fill-opacity: 1 !important;
}

.temp-good {
fill: #00c609 !important;
fill-opacity: 1 !important;
}

.temp-high {
fill: #ff4c00 !important;
fill-opacity: 1 !important;
}

/* Intdoor Temperature */

.temp-in-very-low {
fill: #00a1ff !important;
fill-opacity: 1 !important;
}

.temp-in-low {
fill: #00ddff !important;
fill-opacity: 1 !important;
}

.temp-in-good {
fill: #00c609 !important;
fill-opacity: 1 !important;
}

.temp-in-high {
fill: #ff4c00 !important;
fill-opacity: 1 !important;
}

.temp-in-too-high {
fill: #fe0000 !important;
fill-opacity: 1 !important;
}

What is wrong ?

In chrome i get this : Uncaught TypeError: Illegal invocation
URL: https://assets-cdn.github.com/assets/frameworks-69305c61e4ce67cdef4a70845fc0e959.js
Line: 1, column: 243176
Error: {}
Uncaught TypeError: Illegal invocation
URL: https://assets-cdn.github.com/assets/frameworks-69305c61e4ce67cdef4a70845fc0e959.js
Line: 1, column: 243176
Error: {}
Uncaught TypeError: Illegal invocation
URL: https://assets-cdn.github.com/assets/frameworks-69305c61e4ce67cdef4a70845fc0e959.js
Line: 1, column: 243176
Error: {}
Error loading stylesheet

1313

Just applied a fix (Floorplan v1.0.13) for anyone who was getting multiple instances of the floorplan appearing in the associated state card whenever you navigated back to that page. This new version ensures that the floorplan is created only once within the state card.

https://raw.githubusercontent.com/pkozul/ha-floorplan/master/www/custom_ui/floorplan/ha-floorplan.html

2 Likes
1314

Just updated to HA 0.70.1 and getting errors, repeated every 30 secs:

2018-06-01 17:02:01 ERROR (MainThread) [frontend.js.latest.201805310] http://192.168..:8123/local/custom_ui/floorplan/ha-floorplan.html:375:25 Uncaught TypeError: Polymer.dom is not a function

I found this info: https://developers.home-assistant.io/blog/2018/05/22/custom-ui-panels-api.html but saw that your latest commit had nothing to do with the Polymer-functions.

1315

Just updated to 70.1 for HA and 1.0.13 for floorplan (previously on 69 and 1.0.8) and I am seeing the following error in home assistant logs when trying to access my panel:

2018-06-01 14:27:20 ERROR (MainThread) [frontend.js.es5.201805310] https://url/frontend_es5/custom-elements-es5-adapter.js:1:11 Uncaught TypeError: Class constructor HaPanelFloorplan cannot be invoked without 'new'

Also getting the following error in the developer console:

Uncaught TypeError: Class constructor HaPanelFloorplan cannot be invoked without 'new'
    at new j (custom-elements-es5-adapter.js:4)
    at i (app-3904d93428b1e0b6438ee5d46a3ed872.js:2)
    at app-3904d93428b1e0b6438ee5d46a3ed872.js:2

I updated the html files in both the “panels” folder as well as the “custom_ui” folder.

Tested on chrome and fully kiosk browser with cleared cache. It still works in the HA app for iPhone, but does not work when I go navigate to the floorplan from safari on the iPhone.

1316

@SirBronski It looks like the error is talking about an older version of Floorplan. As you noted, the new version doesn’t refrence Polymer.dom in any way. Can you try on another browser or device, just to see if your browser caching is the problem?

1317

@shire210 @Kyle I haven’t been able to reproduce that issue. Can you check your frontend: configuration and paste it here? This is what mine looks like:

  javascript_version: latest
  extra_html_url:
    - /local/custom_ui/state-card-floorplan.html

You can ignore the last line if you don’t use Floorplan as a state card, but try setting the first line in your config to what I have above, because your error looks like it’s using an older standard of JavaScript (ES5) whereas it should be using the latest. Let us know how you go.

1 Like
1318

Odd, I have the same error:

ERROR (MainThread) [frontend.js.es5.201805310] http://192.168.2.234:8123/frontend/panels/alarm-001f97509c39e788542bd2b51deb052d.html:334:36 Uncaught TypeError: Polymer.dom is not a function

and my floorplan is now missing the weather icons, cleared the cache several times but no change.

snip_20180601173815
snip_201806011738151616×945 91.9 KB

1319

I have updated various files and cleared the cache and my error changed to this.

http://192.168.1.165:8123/frontend_es5/custom-elements-es5-adapter.js:4:618 Uncaught TypeError: Class constructor HaFloorplan cannot be invoked without ‘new’
5:23 PM components/system_log/init.py (ERROR)

Any ideas?

1320

I got the same error

1321

adding javascript_version: latest fixed it for me. Thank you! Really appreciate all the work you have put into this

1 Like
1322

Are you using the HASS custom alarm?. if so you need to update files for it

1323

not here :frowning:

1324

@aidbish, updating the custom alarm eliminated the Polymer.dom error, however, my floorplan icons for the weather still do not show up.

1325

Setting the JavaScript version to latest also fixed it for me. Thanks!

1 Like
1326

Are u using a custom weather component, that may also require an update

1327

If I change to latest (from es5) then the webpage no longer works on my iPad :frowning: But it didnt make any difference for me anyway… :frowning:

1328

@aidbish, I’m not using the custom weather component, my icons are tied to the Dark Sky component.

1329

I saw there was another, more recent commit after I pulled the version that I’ve had problems with. It works OK now. Thanks a lot!

1 Like
1330

OK I did not have this under frontend:

extra_html_url:
- /local/custom_ui/state-card-floorplan.html

I have added that and it is now working!

1 Like
1331

Not sure if this has been posted already (can’t find anything via the search function), but I am one of those people who run multiple panels and to make it work I made the following changes to the panel/Floorplan.html, which I in turn have renamed bottenvaning.html and ovanvaning.html:

On line 3 and 38 I changed ha-panel-floorplan to ha-panel-ovanvaning and ha-panel-bottenvaning.

On line 37 and 75 I renamed the class from HaPanelFloorplan to HaPanelOvanvaning and HaPanelBottennvaning respectively.

This seems to work for me.

1 Like