Floorplan for Home Assistant

I have to clear all my cache/history when I make any changes.

tried that…no joy :confused:

I usually have Chrome developer tools open. In the Network tab, after the page loads, you can right-click and select ‘Clear browser cache’.

Good catch! I fixed that earlier, but somehow missed pushing the change to GitHub.

Please grab the latest version and let me know how it goes.

working perfect now cheers

Just worth noting for others, if you import another SVG icon to represent an entity make sure the group element doesnt contain a nested group, if it does assign the ID to the last nested group. The code doesnt appear to traverse down to the tree until it finds the actual elements

Craziest thing, when I open in Chrome ‘incognito mode’ everything works fine. I cleared all history, cache, etc on 3 different computers & on my phone but could not get it to work in regular browsing mode… I am sure I am missing something simple.

shift + ctrl + del

should do the trick in Chrome

1 Like

Really cool this… working like a dream :slight_smile:

So how about being able to add a sensor text like temperature and humidity?
How difficult is that?

1 Like

You would think but I even selected ‘the beginning of time’… I may have bigger issues.

This is awesome! I hope that this weekend I’ll find the time for testing :smiley:

that worked for me…

Not sure what my issue was… I just uninstalled and reinstalled and everything is appearing as it should.

Well went to add in some switches to the floorplan and downloaded the latest files from github and i have nothing working now.

So not sure what to do?

Tried uninstalling the files and rebooted then reinstalling again. and still not working.

Cameron, any errors showing in the developer tools Console in Chrome?

Can you send me the SVG file?

How do you want me to send the SVG file to you?
I cant send it here as the upload wont let me send *.SVG files.

Errors on console.

state-card-floorplan.html:236 Uncaught TypeError: Cannot read property ‘entity_id’ of undefined
at HTMLElement.getTargetEntities (state-card-floorplan.html:236)
at HTMLElement.handleEntities (state-card-floorplan.html:254)
at Array.HAWS.subscribeEntities.entities (state-card-floorplan.html:129)
at Object.i [as eventCallback] (core-5d08475….js:1)
at L._handleMessage (core-5d08475….js:1)

Sent you a PM.

In the meantime, can you try with the latest code. I made a minor change.

BTW, if anyone needs a good site for SVG files, there are plenty here:

http://www.flaticon.com

Comes in handy if you need to add some images to your SVG file, to represent cameras, lights, switches, etc.

I prefer to stick to simple ‘flat’ images on a floorplan. Images with too much detail, or too many colours, can make it look a bit too busy, not to mention making it harder to distinguish entities when viewing on mobile devices.

4 Likes

Ok thats working sort of.
The on / off status of the shape its not working but when you select the shape it shows.

Thanks for the help.

Great to see it working.

BTW, what you noticed is actually ‘by design’. I recently had implemented the ‘click to toggle’ functionality, but that was limited to only those entities that support toggling between two states. I then removed that functionality, and implemented the ‘click to open more info popup’, which is what you are seeing now. I think it’s a lot more flexible that way, since support for the ‘more info’ popups is already built into HA.

Note: I am assuming you were thinking of the click feature?

I did like the way that the states were visible on the floorplan.
it showed a quick way of seeing the on /off states.

So what does the shape for the camera do ? on/off state or select the camera picture.