Floorplan for Home Assistant

Third party integrations Floorplan
1454

That really cool. How did you get this working. I already have a floorplan working in HA, but can’t figure out how to hide a layer when a light state changes. I think it has to be configured in the CSS file, Am I right? Can you share the code?

1455

That really cool. How did you get this working. I already have a floorplan working in HA, but can’t figure out how to hide a layer when a light state changes. I think it has to be configured in the CSS file, Am I right? Can you share the code with me?

1456

hey everyone, after a few hours of work I finally got my first interactive floorplan in HA working! One question though (I’m sure many more will come as I fine tune it): the icons that I’m using have a very thin outline. That makes it difficult to click on in HA. Is there a way to make the entire object ‘clickable’? I’m using Inkscape btw.

1457

make a square or shape around it larger and opacity low so its clear, then make group with the icon (you dont need to) and apply the entity to the group or the shape that way you click the shape and a larger target area.

1 Like
1458

Yes its controlled via the CSS
Yaml is

  - name: shed door
    entities:
      - binary_sensor.door_window_sensor_shed_door
    states:
      - state: 'off'
        class: 'shed_closed'
      - state: 'on'
        class: 'shed_open'

CSS is

.shed_open {
display: none !important;
}
.shed_closed {
  
      display: initial !important;
}

I have 2 icons stacked in my SVG by default the one on top is hidden when door is closed, its is shown when its open

you can do the same with lights, I have a black circle when off, when on its a yellow circle with a fade around it and glow.

1459

Thanks Lerroy.

Can I use the same entity twice in a yaml? One for config the display on/off and one the control the entity, for example a light/switch?

1460

Hi All,
Just starting to play with the picture elements myself, as it is all CSS controlled i assume it is possible but has anyone been able to get their floor plan portrait for a phone screen and landscape for larger?
If i get the floorplan looking good on phone it looks awful on tablet and laptop and so on.

Cheers

1 Like
1461

From what I’m aware you can only use an entity once in the Yaml / svg

You could create an input boolean though and use that to trigger lights tied to the original entity via automation.

1462

I tried this out, but this is not compatible with lovelace, is that correct?

1463

Check this post:

1464

Thanks, but do i understand it right that that method doesn’t really need the floorplan module? It seems like it not using any of its functionality? Or do I misunderstand?

1465

That’s correct, but right now I think it’s the only way of having a floorplan using lovelace.
Also, check this topic:

1466

Thanks, that is very useful information, I have just started with HA, and are starting to make my UI, I guess I will be moving in another direction.

1467

Close the menu bar then pull it out from the left side of the screen. Then you can click on floorplan. When you click in the main window the menu bar will auto hide to the left and now you have floorplan full screen.

1 Like
1468

thanks doe the tip, that works now

1469

Hi all, I have a setup with several nest cameras including a nest door bell. In my floor plan UI I can click a camera icon and it will show me the camera in a popup window. My question is if it is possible to write an automation that automatically brings up that popup if somebody rings the door bell?

1470

I answer myself here for other people that can’t use floorplan on their smartphones or tablets:
you need to comment this line in www/custom_ui/floorplan/ha-floorplan.html:
<!-- <script src="lib/svg-pan-zoom.min.js"></script> -->

1 Like
1472

Many Thanks

1473

For those who’d like to use Floorplan as a Lovelace card, you can now do it:

2 Likes
1474

I was able to resolve this by placing the box about 10cm further up on the canvas above the whole floorplan

1 Like