Floorplan for Home Assistant

Third party integrations Floorplan
182

Installing HA? Or this add-on?

HA install with docker is here.

To install this add on I just took a (calculated) risk and guessed it.
Everything from the github repo should be placed in the same dir that is mapped as the docker /config volume.
If you already have an existing www dir you’ll need to merge the contents. (I needed to as I already had a www dir for other custom panels)
Same with the panels dir. (I didnt need to merge as I didnt have this dir already)
Also of course you’ll need to merge the configuration.yaml and other yamls from the repo.

183

Hi @pkozul I think I spotted a bug in your CSS file (line 59):

.dange-lightr {

should be

.danger-light {

3 Likes
184

Useful resource for anyone using hue bulbs.lightstrips…its an icon pack with all their products in SVG format
https://developers.meethue.com/documentation/icon-pack

185

Good catch. Now fixed. Thanks!

186

For anyone using multiple floorplans on the same page, the latest update allows the floorplans to play nicely together.

In the earlier versions, the floorplans were sharing some of their behaviours, instead of operating fully independently of each other, as they do now.

2 Likes
187

Think I got it going. I couldn’t get ha to make binary sensors so I had to make another entry for sensors

image.png1843×822 69.3 KB

3 Likes
188

I think I found what was causing my problems I had another custom lights UI, which I’ve now disabled and I can see all of my floorplan now :slight_smile:

189

Trying to integrate Bruh’s Multisensor into my floorplan in a room where I already had lights configured. The I drew a rectangle and gave it an id (sensor.bedroom_motion_sensor) but when I reload, the lights are no loner visible or selectable.

Any thoughts?

190

pkozul, Thanks to you for your great shared project. I could mange my house easier with your floor plan code. Anyway my svg file (1st and 2nd floors on the same .svg file) is getting bigger about 2.3 MB. It is a little bit 3-4 seconds delay when calling from the panel. I am thinking about dividing the svg into separate one and put the item on the panel as you suggested above. Here below is my floor plans. I use existing .dwg files from AutoCAD and exported to pdf and imported to Inkscape. Thank you very much for your kind contribution.

Untitled-2.jpg1920×1047 281 KB

6 Likes
191

Looks really good. Thanks for the info on how you got your floorplans into Inkscape.

@stipex got his floorplans into Inkscape by importing a PDF file that his architect had generated (from AutoCAD originally I think). That gave him a starting point, and from there, he simply started removing bits he didn’t need and ended up with a great floorplan for HA.

BTW, made some updates to the file on the GitHub repo today. The floorplan now renders colours as soon it’s displayed, so you no longer need to wait for the next state upate to kick off the rendering. Also, the CSS rules are simplified. I also added support for dynamically rendering a background rectangle for your SVG <text> elements. Looks better now, as there is more surface area with colour. You can see an example below:

2 Likes
193

Is there a way to make the the off/standby clear or translucent? That way a triggered zone shows the floor plan unless there is motion/alarm?

194

Corey, from memory, I believe you can simply leave out the ‘off’ state (or whatever state you want to ignore) in your config, and that should cause that state to display in the original colour your SVG file contains. Wghen the code detects that your entity has changed to the 'off; state, all it does is remove the CSS class for the ‘on’ state, so the absence of a CSS class for the ‘off’ state should reset the original colour. You can try commenting out the lines as I have done below, and see how you go.

        - name: Binary sensors
          entities:
            - binary_sensor.back_hallway
            - binary_sensor.kitchen
            - binary_sensor.master_bedroom
          states:
#            - state: 'off'
#              class: 'info-background'
            - state: 'on'
              class: 'warning-background'
195

No luck. I also tried changing the fill-opacity but no-go.

196

Did you remove or comment out the state transitions also?

#          state_transitions:
#            - name: On to off
#              from_state: 'on'
#              to_state: 'off'
#              duration: 10

What exactly isn’t working? Are the ‘on’ colours remaining visible?

197

I tried it both with and without the transitions commented out. What it does is remove the ‘off’ state entirely from the SVG; It is no longer selectable.

Might not be a bad thing but not what I was hoping for. I liked being able to select the area for control/viewing but I was wanting to see the actual drawing when it was not in alarm status.

198

Strange. I just tried on my setup and I am able to select the ‘off’ areas for viewing (the more info dialog open when clicked). Do you have the latest version of the floorplan?

199

I downloaded it this morning. Let me rebuild and make sure I did not miss anything,

200

I recreated the floorplan.yaml, floorplan.css, and ha-floorplan.html - cleared cache & images and restarted HASS.

Still not selectable:

201

OK, I see why. Your SVG shapes have been set with fill:none;. This prevents the CSS hover rule from working, as it seems to want a real fill colour. I got it working by setting a fill colour, but also setting the opacity to 0, which makes it invisible. End result is that you can still hover over and select that shape.

Before:

    <rect style="fill:none;.............etc. etc.

After:

    <rect style="fill:red;fill-opacity:0;.............etc. etc.

You can open your SVG file in NotePad++ or some text editor, and quickly make the changes there. I set the colour to red in my example above, but you can set it to whatever… it’s not shown anyway.

Does that work now?

202

Actually, this might be an even easier solution: I have updated the CSS file on GitHub to add the pointer-events: all !important; rule to SVG shapes. This may be all you need to get it working. Just copy from the latest CSS file from GitHub.

/* SVG shapes */

svg, svg * {
  vector-effect: non-scaling-stroke !important;
  pointer-events: all !important;
}