Floorplan for Home Assistant

as a side question on this (@arsaboo 's yaml is a perfect example):

can/will we be able to, organize the ui-lovelace.yaml in a way to have separate files per view somehow? This is going to be one enormous file when fully built, and I fear we are prone to configuration accidents if we cant sub-divide it?

Officially not, but I think you can still use !include for now

Help
The iPad could not open the floorplan and the floorplan showed a blank. The display on the computer is normal.
Opening the floorplan on the iPad, the following error message appears:

Undefined:1:11 TypeError: Cannot call a class constructor without |new|

how did you make that floor plan ? looks awesome

Hi, after some reading I reply here (even some time is last) since this is close to what I’m trying to do. Do you finally manage to include in floorplan your cover? If yes how? I’m trying to find some example without succes…can you point me somewhere? I’m using an MQTT cover based on some custom hardware. The HA configuration for such cover is something like:
cover:

  • platform: mqtt
    name: “F14”
    state_topic: “home/giorno/tapparelle/F14”
    command_topic: “home/giorno/tapparelle/F14/set”
    payload_open : “OPEN”
    payload_close: “CLOSE”
    payload_stop: “STOP”

Thanks

Hi @luigi , I’m not using floorplan now but I managed to find a backup where I was able to include the covers. Maybe I’m missing something so feel free to ask again. I see things related to covers in these files (I can’t remember what HA version I was using by that time):

floorplan.yaml
You need to adapt the entities’ names to your setup (my covers were controlled by zwave devices from Fibaro):

        - name: Covers
          entities:
            - cover.fibaro_system_fgrm222_roller_shutter_controller_2_level_2_0
            - cover.fibaro_system_fgrm222_roller_shutter_controller_2_level_3_0
          states:
            - state: 'open'
              class: 'cover-open'
            - state: 'closed'
              class: 'cover-closed'

floorplan.css
Here you change the background color of the SVG object:

.cover-closed {
  fill: #ab916e !important;
}

.cover-open {
  fill: #ffffff !important;
}

floorplan.svg
Obviously you should have the corresponding Inkscape objects with the same name. This is an excerpt of my SVG file.

  <path
     sodipodi:nodetypes="ccccc"
     inkscape:connector-curvature="0"
     id="cover.fibaro_system_fgrm222_roller_shutter_controller_2_level_2_0"
     d="m 234.70065,91.671304 4.24091,5.71794 -9.92261,9.906256 -3.33119,-5.6893 z"
     style="fill:#ab916e;fill-opacity:1;stroke:none;stroke-width:0.87890619px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     inkscape:label="cover.fibaro_system_fgrm222_roller_shutter_controller_2_level_2_0" />

Good luck!

Thanks, I got the state. Any hint on how to manage commands?
With this I manage to run one command (closing in the example)
- name: Covers
entities:
- cover.f12
states:
- state: ‘open’
class: ‘cover-open’
- state: ‘closed’
class: ‘cover-closed’
action:
domain: cover
service: close_cover

I would send both close_cover and open_cover via mqtt.
Thank for any comments/hint!

@kevinfcook gave an example earlier of how to integrate covers into Floorplan. I think it is what you are looking to do:

Hi, all.
First of all, I love Floorplan!
I’m a novice trying to make the old head learn something new, and just ran into a challenge. I’m trying to make a set of buttons in my SVG Floorplan file. I want the buttons to have a text but it looks like any elements within the button group gets updated with the actual state (on/off)?

If the text is to be visible I guess the button text needs to be in the same svg-file group as the button, right? If I put it as a separate element above the button group it obviously prevents the click from happening on the button below.

So, is there a way to make Floorplan keep the text in the button group static, but still change button class based on the button state?

This is a question regarding switches. Current the on click action for switches pulls up the entity screen of homeassistant. Lights on the other hand just toggle the light. Is there a way for switches to have just a toggle action on press? The consistency would go a long way for overall look and feel (at least for how I am using it).

Any suggestions are welcome. Thanks for the awesome add on.

Just use the toggle action the same as the lights, then you won’t get the menu card.

Perfect, thank you. I had taken the switch example and left the doorbell-on and doorbell-off states and did not have an action. I set those to light-on and light-off, and set the toggle action. Everything is working perfect now. Thanks again.

hi, nice job! one question for th great floorplan page: Can I “isolate” the floorplan and “serperate” it from the hass main page? (eg totally hiding the side bar and show only the floorplan without any extra hass components?) Thanks

I’m trying to get started on floorplans:

I uploaded the files from the example here:

without making any changes to any file, just running it as is, there is no floorplan showing up, the loading wheel is spinning and the log says the following:

Log Details (ERROR)
Mon Jul 23 2018 19:07:19 GMT-0700 (Pacific Daylight Time)

http://192.168.0.31:8123/local/custom_ui/floorplan/ha-floorplan.html:87:19 Uncaught TypeError: Cannot read property ‘createConnection’ of undefined

why can I not even run the example when using the same exact files?
any ideas?

1 Like

ok finally figured everything out, have my floorplan integrated.

one thing I just can’t get to work: removing the toolbar on the iOS app.
on chrome, safar on both devices, iPad and mac the toolbar is gone, but when I’m in the iOS app the toolbar just doesn’t want to disappear.

is anybody using the app here and got the toolbar hidden/removed?

I want to wall-mount my iPad and use the app as fullscreen with iPad’s kiosk mode, but if the toolbar is there it sucks.

Blank page in floorplan?

I replaced new files from github.

Error:

http://hass:8123/static/custom-elements-es5-adapter.js:13:615 Uncaught TypeError: Class constructor HaPanelFloorplan cannot be invoked without 'new'

hass version 0.74.1

No one have same problem?

I still have blank page. Haven’t had time to investigate fully

@OzGav Did you figured out what is wrong?

Not yet sorry