Floorplan for Home Assistant

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 :grin: 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?