Floorplan for Home Assistant

Third party integrations Floorplan
1527

I also get this error occasionally:

Uncaught TypeError: Cannot read property ‘cssRules’ of null
URL: http://192.168.0.10:8123/local/custom_ui/floorplan/ha-floorplan.html.js
Line: 141, column: 72
Error: {}

1528

Just updated to 0.113 and noticed this message “The ‘extra_html_url’ option is deprecated, please remove it from your configuration. This option will become invalid in version 0.115”. Do you think this means that the non-lovelace version of floorplan will not work from then? I am migrating to the lovelace version but was just wondering…?.

EDIT:
I fixed this warning by (as per the breaking changes info) changing extra_html_url to extra_module_url

However I am also seeing from 0.112 that HTML custom panels have been deprecated so still looking to see if that can be overcome…

1529

did you ever get this solved?

1530

No, I gave up and created a floorplan using JuanMTech’s method: https://www.youtube.com/watch?v=LsFUwqb-6As

1 Like
1531

Hi Petar,
I using floorplan over a year and it is great. However he HTML custom panel is depreciated and stop working in 0,115.
I saw you are working on a new version of the floorplan. Any news you can provide us.
Great work and regards,
John

1532

You will need to switch to the Lovelace card version Floorplan now available as a Lovelace card

1533

Thanks for the recommendation.
I will give it a try
John

1534

Hi, I am trying to migrate to the Lovelace floorplan, and struggling to get the switches and lights to work properly.

The symptom is: when i click on it the light comes on as expected but within 2 seconds turns back off again.

For Background the light switch is a LightwaveRF switch, connected via RFXTRX. The light works fine normally this behaviour is only in the converted to Lovelace Floorplan.

I am using the latest stable release, and have things like temperature working

    - action:
        service: homeassistant.toggle
      entities:
        - switch.dining_room_light
        - switch.kitchen_cabinet_left
        - switch.kitchen_cabinet_right
        - switch.lightwaverf_siemens_f41f8e_13
        - switch.lightwaverf_siemens_f37cbf_1
      states:
        - state: 'on'
          class: switch-on
        - state: 'off'
          class: switch-off

If i write it like the following then all i get is a popup box like shown below

    - entities:
        - switch.dining_room_light
        - switch.kitchen_cabinet_left
        - switch.kitchen_cabinet_right
        - switch.lightwaverf_siemens_f41f8e_13
        - switch.lightwaverf_siemens_f37cbf_1
      states:
        - state: 'on'
          class: switch-on
        - state: 'off'
          class: switch-off
      service: homeassistant.toggle

Capture2

1535

Try switch.toggle instead of homeassistant.toggle

1 Like
1536

Thank you you are awesome, that worked.

1537

How can I get my rotating image to stay in the same place?

I have a fan symbol in my plan wich I want to rotate when enabled.
When I activate the fan the symbol gets larger and rotates over the entire plan.

What am I missing?

.fan-on {
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
1538

Hi @aee74

Can you try the suggestion described here?

We added a section about the positioning of animations

1539

This is how the editor shows the symbol

 <g
       inkscape:label="switch.afzuigkap_power"
       transform="matrix(0.43460003,0,0,0.43460003,444.74252,65.818359)"
       id="switch.afzuigkap_power">
      <g
         transform="matrix(0.02062095,0,0,0.02062095,2.4453086e-6,-0.5591783)"
         id="g855">
1540

Can you try removing the transform from the lower (second) <g> and I think your labels may be incorrect. Have a close look at the link Petar supplied above and replicate that.

1541

I will try

1542

Changed it to this:

    <g
       id="switch.afzuigkap_power_group"
       transform="matrix(0.01772951,0,0,0.01772951,443.23034,62.929346)"
      <g
         id="switch.afzuigkap_power">

The switch.afzuigkap_power_group does not exist, should I create this switch?

1543

You may not need to. Does it work with the above?

1544

It did not work. I’ve changed the setup now. Created a box and dependign on the state it wil show an icon. this icon rotates inside the box. works fine.

Is it also possible to make an icon mirror (hor or vert.)

1545

If you can do it in CSS then the answer should be yes. Does this help How To Flip an Image

1546

great. I’m going to try this. thanks