You are a genius!
I tried the CSS update first and it did not help but editing my SVG definitely did the trick!
(I had looked up opacity but thought I should have applied to the CSS. I never thought about the SVG.)
I do like that the other method highlighted the affected area and showed that it normalized. I ended up setting the opacity to 0.3 to give a light but noticable shading.
wow awesome your floorplan… yould u mind just writing down the programs u used? I would lovely wanna give it a try but i am not familiar at all with htose things 
Thanks to pkozul for his very useful project. I highly appreciate for his work, For my floor plan, I use the existing .dwg floor plan files of my house that I received several years ago. Then I use AutoCAD 2016 (software that is widely used to create drawings) to open the files and delete some layers that I don’t like to include such as dimensions, Text, construction lines and so on. Then I combined the floor plan files into one and changed objects 's color to the colors I want and save the file. Then I exported the file to .pdf format. I tested with .dxf format but it doesn’t work. After I get .pdf file, I use Inkscape to import the file and then I started to create .svg file. For small objects like camera and light icon I created in Inscape. I imported Thermometer icon from Flaticon.com website as suggested above. That is all I did. Thanks for your comment, thundergreen.
Thanks for this project! I’ve been attempting to get this working with my HA install. I have integrated your latest config/css/html. I created a very simple svg to see if I could get lights working before proceeding to more complicated stuff. I can get the popup to work, but unfortunately, I haven’t been able to get state changes to be reflected in the color of the element. In order to see the state change (color of the svg element), I need to navigate to another panel (e.g. states), then navigate back to the floorplan panel.
Here is my svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg3726"
inkscape:version="0.92.1 r"
sodipodi:docname="test.svg">
<defs
id="defs3720" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="65.714286"
inkscape:cy="560"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1080"
inkscape:window-height="675"
inkscape:window-x="0"
inkscape:window-y="23"
inkscape:window-maximized="0" />
<metadata
id="metadata3723">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="stroke-width:0.26458332;fill:gray;fill-opacity:0.5"
d="M 93.738098,81.553574 A 32.127975,32.505951 0 0 1 61.758017,114.05918 32.127975,32.505951 0 0 1 29.483509,81.852839 32.127975,32.505951 0 0 1 61.166452,49.050722 a 32.127975,32.505951 0 0 1 32.5662,31.904347"
sodipodi:type="arc"
sodipodi:cx="61.610123"
sodipodi:cy="81.553574"
sodipodi:rx="32.127975"
sodipodi:ry="32.505951"
sodipodi:start="0"
sodipodi:end="6.2647721"
sodipodi:open="true"
id="light.ai_light_ac2ac1"
inkscape:label="#path3730">
<title
id="title3734">Some Light</title>
</path>
<path
style="stroke-width:0.26458332;fill:blue;fill-opacity:0.5"
d="m 167.82143,195.70238 a 32.127975,32.505951 0 0 1 -31.98008,32.5056 32.127975,32.505951 0 0 1 -32.27451,-32.20634 32.127975,32.505951 0 0 1 31.68294,-32.80211 32.127975,32.505951 0 0 1 32.5662,31.90434"
sodipodi:open="true"
sodipodi:end="6.2647721"
sodipodi:start="0"
sodipodi:ry="32.505951"
sodipodi:rx="32.127975"
sodipodi:cy="195.70238"
sodipodi:cx="135.69345"
sodipodi:type="arc"
id="switch.bedroom_switch"
inkscape:label="#path3732">
<title
id="title3736">Bedroom Light</title>
</path>
</g>
</svg>
I’m using Firefox.
With Chrome, I haven’t had much luck at all in getting this to work…even after clearing cache. Popup works, but rendering of state with color doesn’t work.
Any ideas?
I tried your SVG file in my setup. I changed the id to binary_sensor.kitchen so I could test it where I’m currently sitting. It works fine (at least in Chrome), and also on my Windows phone. I don’t see any issue at all with the SVG file you’re starting with.
In Chrome, can you hit F12 to view the Developer Tools and select the Console tab. Then refresh your page (F5) and check whether any are errors are being logged to the Console tab.
Other than that, I’m not sure what might be causing that behaviour in your setup.
How about if you also add switch.bedroom_switch to the same group as your floorplan, so you can see them side by side as state cards? Are they both not updating to reflect the current state?
Thanks for the quick reply!
I found the problem. The call to HAWS.createConnection was failing (I wondered where the login fail notifications were coming from). Removing the API password from the HTTP component configuration fixed the problem. Of course, that is not the long term solution as I’d like to keep password authentication for the HTTP component.
Thanks for letting us know. I will probably add some code to display a message on the floorplan for this scenario. Generally speaking, I think the floorplan could do with warning/message section so that it’s easy to see these types of errors, as well see which of your entities cannot be matched with shapes within the SVG, etc.
Err, I guess this is a known problem? I went back in the thread and see there was some discussion about this earlier. Adding the password to the binary sensor in customize didn’t help. FWIW, it appears that Chrome doesn’t like passwords in non-secure pages:
Uncaught (in promise) DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
This page includes a password or credit card input in a non-secure context. A warning has been added to the URL bar. For more information, see https://goo.gl/zmWq3m.From what I recall, the older versions used the password from the floorplan configuration. The newer version no longer uses this explicit password, but instead, uses the password that the HA frrontend has already stored within the web browser. Are you using the latest version from GitHub?
Agreed on the message section in floorplan panel.
Another thought. What do people think about have some canned assets for common entities such as light, switch, camera, etc. included in the distribution? I’m just thinking of ways to reduce the barrier to entry for people to get this running…customization for those that want to as a later exercise.
Yes, latest version from GitHub.
Good idea. I started doing some experimental work around including pre-canned SVG images into the floorplan. I guess you’d still need to create some sort of placeholder shapes to pinpoint where the ‘dynamic’ images would go. I managed to get some images to load dynamically into the floorplan, but some of the positioning was off, and I couldn’t get the images exactly where they were supposed to go.
I will revisit this when I get some more time…
How do I specify a switch that switches without the info card coming up? I’m sure it can be done but I can’t see the wood for the trees 
Just to test this, I reverted my HA back to normal HTTP, and got the same message. I actually get this message as soon as the HA site is loaded, before it even gets to the floorplan,
Are you not running your HA site using HTTPS?
Hi Keith. At the moment, that’s not possible, but I can add that back in again. At one point, I introduced the ability to click on an entity and have its ‘toggle’ service called. I guess I can add that back in. All you’d then need to do is specify that behaviour for your swirch, in the floorplan config, something along the lines of action: toggle as opposed to the current behaviour (which would be action: more_info) which displays the more info popup. Does that sound like what you’re after?
That looks cool. Nice idea!!!
Yep, works very well apart from the info cards popping up 
In that case, I think the floorplan should be enhanced so that you’d be able to specify (in the floorplan config) which action(s) should occur when you click on a shape in the SVG file (similar to how things already work in HA). That means you could configure a click to either trigger an automation, run a service, change a state, etc. In other words, make it flexible enough so that a click can do just about anything in HA.
That would be brilliant 
