Floorplan for Home Assistant

Third party integrations Floorplan
1182

ok so I am getting somewhere with my HA address as https://192.168.0.8:8123 but got some errors (see image below):

26
261263×707 74.1 KB

However if I use my https://XXX.duckdns.org the floorplan doesnt load at all and I have the following errors which keep on looping:

15
151271×627 131 KB

@pkozul Can you please help?

thanks.

1183

Are you using google chrome? if not, can you try using chrome and see if that works?

1 Like
1184

that is chrome you see in the photos @Zepixir

1185

Ok, are you using state card or custom panel? If you are using state card, I can`t help you, since I just use custom panel. If you use or will try custom panel I can meaby help you. First of all, have you edited some of the files?

1186

@Zepixir so I have just tried on firefox using https://XXX.duckdns.org and it works fine with no issues but the errors are still there.

I am using custom panel.

the errors I am getting are continuous:

ERROR (MainThread) [frontend.js.es5.201802090] https://XXX.duckdns.org/local/custom_ui/floorplan/lib/jquery-3.2.1.min.js:7:1 Uncaught SyntaxError: Unexpected token <
ERROR (MainThread) [frontend.js.es5.201802090] https://XXX.duckdns.org/local/custom_ui/floorplan/lib//moment.min.js:7:1 Uncaught SyntaxError: Unexpected token <
ERROR (MainThread) [frontend.js.es5.201802090] https://XXX.duckdns.org/local/custom_ui/floorplan/lib/svg-pan-zoom.min.js:7:1 Uncaught SyntaxError: Unexpected token <
ERROR (MainThread) [frontend.js.es5.201802090] https://XXX.duckdns.org/local/custom_ui/floorplan/ha-floorplan.html:156:36 Uncaught ReferenceError: moment is not defined
ERROR (MainThread) [frontend.js.es5.201802090] https://XXX.duckdns.org/local/custom_ui/floorplan/ha-floorplan.html:156:36 Uncaught ReferenceError: moment is not defined
ERROR (MainThread) [frontend.js.es5.201802090] https://XXX.duckdns.org/local/custom_ui/floorplan/ha-floorplan.html:156:36 Uncaught ReferenceError: moment is not defined
ERROR (MainThread) [frontend.js.es5.201802090] https://XXX.duckdns.org/local/custom_ui/floorplan/ha-floorplan.html:156:36 Uncaught ReferenceError: moment is not defined

I have changed the SVG file just as a test put a circle and set the entity id of my light and in my floorplan.yaml I have only set lights.

1187

Ok, can you change javascript to latest, so you have the same as me? And just to be 100% sure, just use the original floorplan.yaml file with no editing.
And your panel_custom looks like this?

  - name: floorplan
    sidebar_title: Floorplan
    sidebar_icon: mdi:home
    url_path: floorplan
    config: !include floorplan.yaml

In your config folder, you have a folder named panels, and a file named floorplan.html?

In this path “config\www\custom_ui\floorplan\lib” you have the three javascript files?

In this path “config\www\custom_ui\floorplan” you have the files: floorplan.svg, floorplan.css and ha-floorplan.html?

And of course have the floorplan.yaml in the config folder?

1188

I have changed it to latest.

And have everything set the way you described i.e.

config\www\custom_ui\floorplan\lib - containing the 3 javascript files
config\www\custom_ui\floorplan\ - containing floorplan.svg, floorplan.css and ha-floorplan.html

1189

@Zepixir so latest doesnt open in Safari and I face the same issue in Chrome on Android but everything works well in Firefox.

1190

Ok, that`s strange.
And you have now the original floorplan.yaml in your config folder?
And the top of that file looks like this?

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

Then I`m not really sure.

Latest works for me, do you have Chrome version 64?

1191

And of course, you have tried to delete all the browser data? The three checkboxes? (you need to remember your password on homeassistant) :stuck_out_tongue: AND after deleting the browser data, close the browser, then re-open the browser.

1192

Ok works on android chrome after clearing cache and all. However those errors are related to floorplan do you get them?

1193

ok, good. you do still get the error messages? no, I have no error messages.

1194

Surprinsgly errors have disappeared and floorplan works

2 Likes
1195

I am no expert at this, but in my experience it seems like the html file is not loaded correctly by the browser if you don’t clear it’s cache, thus resulting in errors. So everytime you change or paste a new html file, you should clear the cache and relaunch the browser(s) you want to use.

1 Like
1196

Ive tried adding this to my svg for hiding two layers and showing one…
> <g
> id=“media_button”
> transform=“matrix(0.99939487,0,0,1.000055,-53.913191,-4.5996255)”
> inkscape:label="#g1912"
> onclick=“document.getElementById(‘layer10’).setAttribute(“opacity”,0),document.getElementById(‘layer5’).setAttribute(“opacity”,100),document.getElementById(‘layer11’).setAttribute(“opacity”,0);”><rect
> transform=“matrix(0.55586133,0,0,0.52062657,61.5333,222.44345)”
> id=“rect28-6”
> height=“80”
> width=“150”
> ry=“15”
> rx=“15”
> y=“457.74301”
> x=“154.19669”
> style=“fill:url(#button_surface-9);stroke:#360000;filter:url(#virtual_light-3)” /><text
> style=“font-weight:500;font-size:11.87037373px;font-family:Tahoma;fill:#ffffff;stroke-width:0.59351867”
> id=“text30-3”
> font-weight=“500”
> font-size=“20”
> y=“485.20575”
> x=“175.01678”>Media
>
works fine when testing just the svg file in a browser, but shows an error in homeassistant:

Uncaught TypeError: Cannot read property ‘setAttribute’ of null
URL: https://xxx.xx/floorplan
Line: 2, column: 35
Error: {}
anyone know why?

1197

Looks nice!
Did you created the SVG to work with HA like shown in the mockup?

1198

Thanks for an amazing project!

1199

Any update on the release of the new floorplan?

2 Likes
1200

Hi All,
Loving the ideas in this thread.
Now trying to add a now playing section linked to spotify. (i intend it to only show when state: playing)
I want:
Image ${entity.attributes.entity_picture} - Track Title ${entity.attributes.media_title}
Artist ${entity.attributes.media_artist}
Playing on: ${entity.attributes.source}

I see some people have achieved close to this, and just wondering how you link the attribute to the svg?

Many thanks

1201

I created template sensors with the Artist and song and then linked them to the floor plan. Template for artist is below:

platform: template
sensors:
  spotify_artist:
    value_template: >
      {% if is_state("media_player.spotify", "playing")%}
        {{states.media_player.spotify.attributes.media_artist}}
      {% else %}
        Nothing Playing
      {% endif %}
    friendly_name: "Spotify Artist"

For the song I do the same but use:
states.media_player.spotify.attributes.media_title

Then in the floorplan.yaml file i have the following group:

        - name: Songs
          entities:
             - sensor.spotify_song
             - sensor.spotify_artist
          text_template: '${entity.state ? entity.state : "Nothing Playing"}'
4 Likes