Floorplan for Home Assistant

[bighead85]

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

[lerroy_b]

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.

[ATWindsor]

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

[dornelas]

Check this post:

Floorplan for Home Assistant

Yes, using a panel and a picture elements. Something like this: - title: floorplan panel: true path: floorplan badges: [] cards: - type: picture-elements image: /local/custom_ui/floorplan/floorplan.svg elements: - type: state-label entity: sensor.lr_temperature style: left: 72% top: 44% - type: state-label entity: sensor.r1_temperature style: lef…

[ATWindsor]

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?

[dornelas]

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

Floorplan Support

Is floorplan no longer being developed?

[ATWindsor]

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.

[Contraption_Maker]

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.

[dashony]

thanks doe the tip, that works now

[marc.wi]

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?

[zentoo]

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> -->

[clabnet (Claudio Barca)]

Many Thanks

[pkozul (Petar Kozul)]

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

Floorplan now available as a Lovelace card

Hi all, It’s been a while, but I’m back again. I’ve done some work to get Floorplan working as a custom Lovelace card. I still need to flesh out the documentation, but for those who want a head start, you can get it from here: Feel free to try it out, and keep us posted on how you go with it. [image] Cheers, Petar

[dashony]

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

[Kei]

Hi I recently created a floorplan and it is working fine with my smart light bulbs, but I wanted to know if there is any way to change the color of the light bulb in the floorplan rather than just toggling the lights on and off.
Thanks

[Wetzel402 (Cody)]

Hi all, I have two items I’m hoping someone can help with…

1. I get an error when trying to load HA Floorplan (I am using panel and have not tried the card) using a remote connection. If I am on my LAN it loads correctly but using my Duck DNS URL I get the folowing error…

Uncaught TypeError: Cannot read property 'cssRules' of null
URL: https://wetzel402.duckdns.org:8123/local/custom_ui/floorplan/ha-floorplan.html
Line: 208, column: 72
Error: {}

I am currently using the files from the Git repo unmodified to troubleshoot.

Edit: I’ve found out this error was being caused by me having caching disabled in the dev options of my browser.

2. There doesn’t seem to be much in the way of information on using 2 or more floors. Can someone provide an example of how this is done? Do I just define both floors in the floorplan.yaml file?

name: Demo Floorplan floor 1
      image: /local/custom_ui/floorplan/floorplan.svg
      stylesheet: /local/custom_ui/floorplan/floorplan.css

     groups:
         etc.....

name: Demo Floorplan floor 2
      image: /local/custom_ui/floorplan/floorplan2.svg
      stylesheet: /local/custom_ui/floorplan/floorplan2.css

     groups:
         etc2.....

*Edit: After doing some digging (and also soft bricking my home assistant) I found this post from pkozul which helped me get several floors set up as custom panels. There are some small additional changes needed however. Instances of HaPanelFloorplan must also be changed at lines 37 and 75 so they don’t conflict with each other. *

Thank you!

[antoinevandenhurk (Antoine)]

I’ve had multiple floorplans working a few months ago. But after my SD crashed I can’t, get it working again. Can you tell me more of the extra changes to make over this post from pkozul, or will you share you’re config with me.

[alverman (Alberto)]

Is possible to control cover and show the position in floorplan ?
Thanks, Alberto

[alverman (Alberto)]

Good evening,
I managed the management of the shutters !!

But I have another problem !!
how can I view the weather icons.
When I insert a rectangle that refers to the darksky I see a half-icon hidden in a case position on the planimetry and not in the rectangle.
What can I do ?
Thanks, Alberto

[OzGav]

You probably have solved this by now but this is done in the CSS file. This is mine:

.light-off {
  fill: #E0E0EB !important;
}

.light-on {
  fill: #FFFF99 !important;
}

Then in the floorplan.yaml

        - name: Lights
          entities:
             - light.pantry
             
          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