Floorplan for Home Assistant

Third party integrations Floorplan
1445

I were lucky 'cause I made EXACTLY the same mistake one day before you :wink:

1446

anyone else experiencing slow/delayed CSS animations after click?
I’ve been experiencing 2-3 seconds of delay whenever i click on my button and then my CSS animation kicks in after 2-3 seconds

1447

Hi guys, this is my floorplan so far.

I am experiencing a delay with the CSS animations tho, sometimes it takes a 2-3 second delay. is anybody else experiencing that?

I’ve even tried just a short page with one entity and 2 circles as test button clicks, but it still the same 2-3 seconds of delay to toggle my CSS display: none and display: block.

https://media.giphy.com/media/L0s0yDS8SKwWSahmr5/giphy.gif(image larger than 3072KB)

gekim-demo
gekim-demo1400×10865 1.99 MB

3 Likes
1448

Have always had that delay timeframe from floorplan, haven’t been able to change.

Running my HA on a intel nuc with plenty of power.

1449

Is it possible to add HA floorplan on Lovelace ui view ?
edit: I think it’s not :’(

1450

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:
              left: 39%
              top: 58%

(edit: reorder code)

1 Like
1452

thanks ! But this way, elements defined in the svg seems to be unclikable…

1453

Also happens with me.

Workaround is to redefine the elements in the elements: of the picture-elements
Like this:

        elements:
          - type: state-label
            entity: sensor.lr_temperature
            style:
              left: 72%
              top: 44%

check the docs https://www.home-assistant.io/lovelace/picture-elements/

1 Like
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: