What did you use to create the SVG? I’m jealous of the drawing.
I got some guy on fiverr to do it for me for $5 
Then i edited it with Inkscape to assign ID’s to the sensors i wanted to include
Anyone know how to lay 2 cards side by side when there is plenty of room? See below:
They are both in separate groups which from reading elsewhere is what should force them side by side
Floorplan :
view: yes
entities:
- group.downstairs_floorplan
- group.upstairs_floorplan
Any ideas?
1 Like
I have added your code to the GitHub repo, so it’s now in the ‘official’ code base. The floorplan functionality now treats ‘on’ and ‘open’ in the same manner.
2 Likes
Also, the new version now caters for the absence of an ‘off’ colour. If you leave out the ‘color_off’ setting from the configuration, it will only use the ‘on’ colour on the floorplan. Try out the new version and let me know how it goes.
actually thinking about it I might keep the color_off option as it makes it clear which windows and doors are monitored and which arent. So anything that isnt colored isnt monitored.
But its great to have the option, thanks for adding it
I get my group position to stay side by side using group order in customization. You might need a third group in order 2 to get your state cards to be side by side.
customize:
group.menu:
order: "1"
group.alerts:
order: "2"
group.devices:
order: "5"
group.control:
order: "3"
group.switches:
order: "4"
Would it be possible to use information coming from e.g. happy bubbles, which indicates how far away different BLE devices are located from the receivers, to graphically show the location of them? As soon as 3 receivers report a distance, the location of the device can be calculated (assuming you give exact coordonates of the receivers of course)
I’ve been playing around with adding lights into the floorplan so I can see where the lights are on and have managed to get it working.
What would be cool is click the light to turn it on/off (at the moment it disappears when the light is off) and also setting the color of the bulb to the actual color of the bulb (assuming you are using an RGB bulb).
3 Likes
I added lights, door sensors, and a couple of motion sensors (waiting on parts to build more). I will probably add the cameras and any other equipment I monitor as well just because I can lol and I like the hover over feedback. Control of lights/switches would definitely be cool!
New version is ready on GitHub, which adds support for user actions.
It now supports clicking on switches and lights to turn them on and off. Behind the scenes, the code calls the relevant HA service to ‘toggle’ the state of these entities. Only toggling is supported for now, but I might look at supporting other types of states moving forward (i.e. colours, dimmers, etc.).
Grab the updated HTML file, as well as the updated CSS file, to get this new feature.
To make it more obvious when hovering over entities, a new rule has been added to the CSS file which displays a blue border around entities that are being hovered over. The mouse cursor also changes to a pointer when hovering over these entities.
Another desirable side effect of this new feature is that clicking anywhere on the state card no longer results in that state card detail popup appearing (as it normally does for entities), which was showing nothing useful anyway. Clicking on the floorplan does nothing now, except for when you click on a switch or a light.
Let me know how you go with this.
2 Likes
Another update. Clicking on an entity now opens the standard HA ‘more info’ popup for that entity, which is even better than simply toggling between two states.
This means that we’re one step closer to supporting just about all types of entities on the floorplan.
Thanks to this change, you can now add other entities, such as cameras, to your floorplan configuration. Assuming you’ve added shapes to your SVG file to represent your cameras, you can then click on each of those cameras on the floorplan, which will open the ‘more info’ popup where you can view the camera’s live feed.
4 Likes
Hi
What software did you use to draw your floor plan?
Thanks and nicely done.
I paid a guy on fiverr to do it for me ($5 per floor). I provided him with a rough layout of the house as a jpg. I then used Inkscape to add the entity ID’s
1 Like
great work, I’ll get this new update running asap!
Wow you guys are awesome! I haven’t even had the time to install yet 
This is so freaking good.
I have this working for sensors but lights are not select-able or providing any information when hovering or clicking. The mouse does not change to a finger over them. Any thoughts?
Only error I see is:
One more thing. The latest version allows you to use groups within the SVG file to group multiple shapes into one entity. For example, your SVG image might contain some cameras in it, where each camera is made up of several shapes (paths, rects, circles, etc.).
So, as long as you name the group correctly, using the same name as the HA entity it represents, all the child shapes will ‘inherit’ the functionality, such as hover-over, clicking, etc.
This is probably a bit more of an advanced topic, and only applies if you want to represent your HA entities using more complex SVG objects, that is, groups with nested shapes within them.
BTW, just for some context, below is an example of an SVG group <g> containing several circles:
<svg viewBox="0 0 95 50"
xmlns="http://www.w3.org/2000/svg">
<g id="camera.entrance" stroke="green" fill="white" stroke-width="5">
<circle cx="25" cy="25" r="15"/>
<circle cx="40" cy="25" r="15"/>
<circle cx="55" cy="25" r="15"/>
<circle cx="70" cy="25" r="15"/>
</g>
</svg>
1 Like
Corey, can you try the very latest code? It was updated just moments ago.
Also, can you send me your SVG file, and I will test it with one of my light entities.
@pkozul I’m having some trouble setting up the new version. It seems that var shape never gets assigned and is always null. Here is the code with values from the debug console
As a result clicking on the elements does nothing as the click handler is never bound.
Any ideas?
@pkozul When making a new SVG floorplan what size page do start with?
And if i override the floorplan.svg with a new one it still showing the old one.