Floorplan for Home Assistant

[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

[BionX (George)]

I got a problem with CSS I don’t see any changes in icons when I click and check my css
I don’t understand why. like the “fill” not recognized.
any suggestions?
I am on hassio 0.99.3

[OzGav]

I’ve got a PHP script that I pull the images off the BOM site and then animate them. Currently just in a new window from a link in the side panel. Let me know if you want the script.

[OzGav]

I have a bunch of GU10 bulbs (Innr brand) in a group linked to a Hue hub. In my floorplan I have been using a touch on the room to TOGGLE the lights. However I have found that sometimes I have a light which gets out of sync and stays on.

I found this thread Automation to toggle light and decided to try and implement it in floorplan.yaml as follows:

        - name: Toggle meals room lights
          entities: 
            - light.meals_room
          states:
            - state: 'on'
              class: 'light-on'
            - state: 'off'
              class: 'light-off'
          action:                             # https://community.home-assistant.io/t/automation-to-toggle-light/54795
            service_template: >
              light.{% if is_state('light.meals_room', 'on') %}turn_off{% else %}turn_on{% endif %}

BUT instead of just turning on or off the lights it is popping up a dialog box for me to do it. I have checked in the template editor and everything looks ok. Anybody who can enlighten me as to why this isn’t just working as before. That is, turning the lights on and off based on the existing state?
EDIT: After much testing I can only conclude service_template doesn’t work in floorplan?

[OzGav]

I have worked out how to get the service_template info in the file ha-floorplan.html but I can’t work out how to parse the template to get the result. If anyone has any ideas then please let me know. I’m actually a bit surprised no one has wanted to use a service_template before…? Here is my main thread where I have asked for help:

Help with service_templates in javascript

Hi all, I am trying to improve the functionality of the FLOORPLAN component by allowing service_templates. I want to be able to click on an element and have the action defined by a service_template. The original file ha-floorplan.html is here: https://github.com/pkozul/ha-floorplan/tree/master/www/custom_ui/floorplan I have done some initial modifications as follows and I have access to the service_template BUT because I don’t know much about the backend of Home Assistant initially I had thoug…

[Kayhold]

@ccostan, I was looking at your setup and noticed you have a sensor for Disney Circle. I’ve never seen anyone integrate it with HA, so I’d love to see how you used it.

[nsbyrer (Nathan Byrer)]

I’m trying to implement the floorplan_speaker custom component and am getting error:

Platform error media_player.floorplan_speaker - Integration ‘floorplan_speaker’ not found.

My configuration.yaml is setup for the integration as below:

media_player:
  - platform: spotify
    client_id: !secret spotify_client_id
    client_secret: !secret spotify_client_secret
  - platform: onkyo
    host: 192.168.1.46
    name: Basement
  - platform: floorplan_speaker
    name: floorplan

I’ve checked the permissions on floorplan_speaker.py. It seems right:

I’m running HASS.io 0.101.3 on a RPi 3B+.

Does anyone have any thoughts on what I can check next?

[CCOSTAN]

Hi @Kayhold. My sensor for Circle is basically just a ping sensor to make sure it is still online. We also do some notifications when a new device is found by HA to remind us to add to circle. But the integration is pretty minimal.