Mine does not work on my iPad as well… I haven’t been able to fix that one.
My floorplan is not working on my computer anymore. I use Firefox 54.0.1 with HASS 51.1.2 and I only got a white page.
It works with Chrome on the computer and also with Chrome on Android.
Thank you! I made changes to reflect this this morning and so far it seems to be working. It was probably the wifi wakelock that did it.
how do I go about changing the color of an element depending on state…
ex:
I want my Lights icon to be back or dark gray when off and Green or yellow when on.
also my motions sensor to be red when on. and so on
I have tried to added straight to the config with a class color and/or fill, but it didnt work.
where should i add or change in the files to get this?
edited - Never mind, I got it, its the floorplan.css
2 Likes
if I group multiple SVG elements, how can I style the individual paths in that group?
ie:
According to this http://svgtutorial.com/styling-svg-with-css/ I should be able to do something like…
/* Fans */
.fan-on {
.fan-circle {
stroke: #cbe960 !important;
}
.fan-icon {
fill: #000000 !important;
}
}
But the styling isn’t showing up (clicking the group does perform my toggle action though).
Thats SASS. You would need to do:
/* Fans */
.fan-on .fan-circle {
stroke: #cbe960 !important;
}
.fan-on .fan-icon {
fill: #000000 !important;
}
1 Like
Semi-final result
Working now to link a light to a zone.
ex: when kitchen light turns on, change the kitchen bg color lighter.
I have a problem with my new Floorplan setup. I have added 5 cameras, a number of lights, 1 Chromecast and a Google Home. I have added all to the sample floorplan.html file and only 2 of the cameras are working. None of the lights or Google devices work.
Here is a screenshot and my floorplan.yaml file, plus the floorplan part of my configuration.yaml.
configuration.yaml:
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan
config: !include floorplan.yaml
floorplan.yaml
groups:
- name: Sensors
entities:
- sensor.dark_sky_temperature
- sensor.dark_sky_hourly_summary
#text_template: '${entity.state ? entity.state : "unknown"}'
# An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}'
class_template: '
var temp = parseFloat(entity.state.replace("°", ""));
if (temp < 10)
return "temp-low";
else if (temp < 30)
return "temp-medium";
else
return "temp-high";
'
- name: Lights
entities:
- light.hall
- light.lego_lamp
- light.front_porch
- light.desk_lamp
- light.boy
- light.girls
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: homeassistant # This optional parameter allows you to use other services such as homeassistant.toggle like here.
service: toggle
- name: Cameras
entities:
- camera.front_yard
- camera.driveway
- camera.front_door
- camera.backyard_left
- camera.backyard_right
states:
- state: 'idle'
class: 'camera-idle'
- name: Media Players
entities:
- media_player.master_bedroom_home_2
- media_player.gorgon_2
states:
- state: 'off'
class: 'squeezebox-off'
- state: 'idle'
class: 'squeezebox-off'
- state: 'paused'
class: 'squeezebox-off'
- state: 'playing'
class: 'squeezebox-on'So for some reason the floorplan wont load on my phone, it works perfectly on my computer using chrome, but when i use the IOS app or the phone browser it just shows empty (just white screen where the floorplan should go) any ideas? i even tried just adding a small square and same issue…
I am having the exact same problem. I get the same behavior as you from iphone or ipad whether using chrome or safari, but it does work from my samsung tablet using chrome.
Make sure the icons are on top in your design tool (in Inkscape select the icon, from the top menu select Object and from the drop down menu select “Raise to Top”) as if they are not than they are not accesseble if you click on them
This happened since version 0.51
I downgraded and now it is working (although still not working on my ios9.3 device)
Should the icons all be merged into one layer?
I grouped all of the entities by shift clicking on them and them Raised them all to top. Saved and uploaded new SVG file. Still only showing the 2 cameras available to click on like in the original picture.
Can you share the svg file?
you bet!!
The file is too big for the Forum to allow me to include the whole thing, but I think these are the parts you want anyway…
<path
id="camera.front_door"
d="m 998.49256,475.0579 v -6.95056 a 1.9584117,1.9858756 0 0 0 -1.9584,-1.98588 h -23.5009 a 1.9584117,1.9858756 0 0 0 -1.9584,1.98588 v 19.85875 a 1.9584117,1.9858756 0 0 0 1.9584,1.98588 h 23.5009 a 1.9584117,1.9858756 0 0 0 1.9584,-1.98588 v -6.95056 l 7.83374,7.9435 V 467.1144 Z"
inkscape:connector-curvature="0"
style="stroke-width:1.97209585"
inkscape:label="Cam FD" />
<path
id="camera.driveway"
d="m 1797.3625,627.81212 v -6.95056 a 1.9584116,1.9858756 0 0 0 -1.9584,-1.98588 h -23.5009 a 1.9584116,1.9858756 0 0 0 -1.9584,1.98588 v 19.85875 a 1.9584116,1.9858756 0 0 0 1.9584,1.98588 h 23.5009 a 1.9584116,1.9858756 0 0 0 1.9584,-1.98588 v -6.95056 l 7.8337,7.9435 v -21.84463 z"
inkscape:connector-curvature="0"
style="stroke-width:1.97209573"
inkscape:label="Cam DW" />
<path
id="camera.front_yard"
d="m 1724.1987,479.50704 v -6.95056 a 1.9584116,1.9858756 0 0 0 -1.9584,-1.98588 h -23.5009 a 1.9584116,1.9858756 0 0 0 -1.9584,1.98588 v 19.85875 a 1.9584116,1.9858756 0 0 0 1.9584,1.98588 h 23.5009 a 1.9584116,1.9858756 0 0 0 1.9584,-1.98588 v -6.95056 l 7.8338,7.9435 v -21.84463 z"
inkscape:connector-curvature="0"
style="stroke-width:1.97209573"
inkscape:label="Cam FY" />
<path
id="camera.backyard_left"
d="m 1180.4134,1571.0324 v -6.9505 a 1.9584116,1.9858756 0 0 0 -1.9584,-1.9859 h -23.5009 a 1.9584116,1.9858756 0 0 0 -1.9584,1.9859 v 19.8587 a 1.9584116,1.9858756 0 0 0 1.9584,1.9859 h 23.5009 a 1.9584116,1.9858756 0 0 0 1.9584,-1.9859 v -6.9505 l 7.8337,7.9435 v -21.8447 z"
inkscape:connector-curvature="0"
style="stroke-width:1.97209573"
inkscape:label="Cam BYL" />
<path
id="camera.backyard_right"
d="m 913.46422,1573.0098 v -6.9505 a 1.9584116,1.9858756 0 0 0 -1.9584,-1.9859 h -23.5009 a 1.9584116,1.9858756 0 0 0 -1.9584,1.9859 v 19.8587 a 1.9584116,1.9858756 0 0 0 1.9584,1.9859 h 23.5009 a 1.9584116,1.9858756 0 0 0 1.9584,-1.9859 v -6.9505 l 7.8338,7.9435 v -21.8447 z"
inkscape:connector-curvature="0"
style="stroke-width:1.97209573"
inkscape:label="Cam BYR" />
<path
id="light.lego_lamp"
d="m 873.97737,430.0593 h 8.92373 v -14.87288 h 5.94916 v 14.87288 h 8.92372 l 11.89831,23.79661 h -47.59322 l 11.8983,-23.79661 m 17.84746,26.77119 a 5.9491524,5.9491524 0 0 1 -5.94915,5.94915 5.9491524,5.9491524 0 0 1 -5.94915,-5.94915 z"
inkscape:connector-curvature="0"
style="stroke-width:2.97457623"
inkscape:label="Lego Lamp" />
<path
id="light.boy"
d="m 353.9548,747.86721 a 17.114406,18.973163 0 0 1 -17.11441,-18.97316 c 0,-6.45088 2.90945,-12.11572 7.33475,-15.558 v -6.12562 a 2.4449152,2.7104518 0 0 1 2.44491,-2.71045 h 14.66949 a 2.4449152,2.7104518 0 0 1 2.44492,2.71045 v 6.12562 c 4.42529,3.44228 7.33474,9.10712 7.33474,15.558 a 17.114406,18.973163 0 0 1 -17.1144,18.97316 m -7.33475,-51.49859 a 2.4449152,2.7104518 0 0 1 2.44492,-2.71045 h 9.77966 a 2.4449152,2.7104518 0 0 1 2.44491,2.71045 v 2.71046 h -14.66949 z"
inkscape:connector-curvature="0"
style="stroke-width:2.5742619"
inkscape:label="Boy's Light" />
<path
id="light.girls"
d="m 385.59322,1300.5508 a 17.114405,18.973162 0 0 1 -17.11441,-18.9732 c 0,-6.4508 2.90945,-12.1157 7.33475,-15.558 v -6.1256 a 2.4449151,2.7104517 0 0 1 2.4449,-2.7104 h 14.66949 a 2.4449151,2.7104517 0 0 1 2.44492,2.7104 v 6.1256 c 4.42529,3.4423 7.33474,9.1072 7.33474,15.558 a 17.114405,18.973162 0 0 1 -17.11439,18.9732 m -7.33476,-51.4986 a 2.4449151,2.7104517 0 0 1 2.44493,-2.7104 h 9.77965 a 2.4449151,2.7104517 0 0 1 2.44491,2.7104 v 2.7105 h -14.66949 z"
inkscape:connector-curvature="0"
style="stroke-width:2.5742619"
inkscape:label="Girls' Light" />
<path
id="light.hall"
d="m 636.72315,1035.5791 a 17.114405,18.973162 0 0 1 -17.11441,-18.9732 c 0,-6.4508 2.90945,-12.1157 7.33475,-15.558 v -6.12565 a 2.4449151,2.7104517 0 0 1 2.44491,-2.7104 h 14.66949 a 2.4449151,2.7104517 0 0 1 2.44492,2.7104 v 6.12565 c 4.42529,3.4423 7.33474,9.1072 7.33474,15.558 a 17.114405,18.973162 0 0 1 -17.1144,18.9732 m -7.33475,-51.49865 a 2.4449151,2.7104517 0 0 1 2.44492,-2.7104 h 9.77966 a 2.4449151,2.7104517 0 0 1 2.44491,2.7104 v 2.7105 H 629.3884 Z"
inkscape:connector-curvature="0"
style="stroke-width:2.5742619"
inkscape:label="Hall Light" />
<path
id="light.desk_lamp"
d="m 1678.8135,614.39268 a 17.114405,18.973162 0 0 1 -17.1144,-18.9732 c 0,-6.4509 2.9094,-12.1157 7.3347,-15.558 v -6.12562 a 2.4449151,2.7104517 0 0 1 2.445,-2.71045 h 14.6694 a 2.4449151,2.7104517 0 0 1 2.445,2.71045 v 6.12562 c 4.4253,3.4423 7.3347,9.1071 7.3347,15.558 a 17.114405,18.973162 0 0 1 -17.1144,18.9732 m -7.3347,-51.49863 a 2.4449151,2.7104517 0 0 1 2.4449,-2.71045 h 9.7796 a 2.4449151,2.7104517 0 0 1 2.4449,2.71045 v 2.71046 h -14.6694 z"
inkscape:connector-curvature="0"
style="stroke-width:2.5742619"
inkscape:label="Desk Lamp" />
<path
id="light.front_porch"
d="m 1125.1412,497.72597 a 17.114405,18.973162 0 0 1 -17.1144,-18.97316 c 0,-6.45088 2.9094,-12.11572 7.3347,-15.558 v -6.12562 a 2.4449151,2.7104517 0 0 1 2.4449,-2.71045 h 14.6695 a 2.4449151,2.7104517 0 0 1 2.4449,2.71045 v 6.12562 c 4.4253,3.44228 7.3348,9.10712 7.3348,15.558 a 17.114405,18.973162 0 0 1 -17.1144,18.97316 m -7.3348,-51.49859 a 2.4449151,2.7104517 0 0 1 2.445,-2.71045 h 9.7796 a 2.4449151,2.7104517 0 0 1 2.4449,2.71045 v 2.71046 h -14.6695 z"
inkscape:connector-curvature="0"
style="stroke-width:2.5742619"
inkscape:label="Front Porch Light" />
<path
id="media_player.master_bedroom_home_2"
d="m 1509.9096,546.54729 a 20.516948,19.486618 0 0 1 20.5169,19.48662 20.516948,19.486618 0 0 1 -20.5169,19.48662 20.516948,19.486618 0 0 1 -20.517,-19.48662 20.516948,19.486618 0 0 1 20.517,-19.48662 m 44.4533,16.23885 a 3.4194914,3.2477697 0 0 1 3.4195,3.24777 3.4194914,3.2477697 0 0 1 -3.4195,3.24777 3.4194914,3.2477697 0 0 1 -3.4195,-3.24777 3.4194914,3.2477697 0 0 1 3.4195,-3.24777 m -11.9682,6.49554 a 8.5487286,8.1194244 0 0 1 8.5487,8.11942 8.5487286,8.1194244 0 0 1 -8.5487,8.11943 8.5487286,8.1194244 0 0 1 -8.5487,-8.11943 8.5487286,8.1194244 0 0 1 8.5487,-8.11942 m 0,19.48662 a 10.258474,9.7433093 0 0 1 10.2585,9.74331 10.258474,9.7433093 0 0 1 -10.2585,9.74331 10.258474,9.7433093 0 0 1 -10.2585,-9.74331 10.258474,9.7433093 0 0 1 10.2585,-9.74331 z"
inkscape:connector-curvature="0"
style="stroke-width:3.33252478"
inkscape:label="Google Home" />
<path
id="media_player.gorgon_2"
d="m 1389.8512,903.62197 h -60.7759 v -36.57942 h 60.7759 m -22.791,47.55325 h -15.1939 v -3.65794 h 15.1939 m 30.388,3.65794 v -54.86914 h -75.9699 v 54.86914 h -7.597 v 7.31589 h 91.1639 v -7.31589 z"
inkscape:connector-curvature="0"
style="stroke-width:3.72755551"
inkscape:label="Gorgon" />
</svg>Too big? Sorry but I’m not sure what to do with “raw” code actually never looked inside the file 
maybe somebody else knows.
The raw code was too many characters and the actual file was a format not allowed by the forum. I suppose I could upload it to my Google Drive and then share the link.
Edit: the link… https://drive.google.com/open?id=0B9xdLpLLXXdRcnhTTV9zNGdoMUE
I’m not sure, file looks good to me. I have all my labels set like this:
id: light.front_porch label: #light.front_porch
but I have no idea if it’s needed, just copied what others did… and I have my entities in a different layer but that should not make any difference. I assume these entities are identical to your HA config?