2D Floorplan

[MDLefevere (Maurice)]

Hi All,

I’m starting to build a 2D floorplan and have some questions that i can’t find an answer for:

• I want a tekst button to toggle all lights in a room. I’ve managed to get the tekst button but can’t get any space between the prefix and the current state. Also it’s a verry small piece of tekst :).

  - type: state-label
    prefix: Woonkamer
    tap_action:
      action: toggle
    entity: light.woonkamer
    style:
      top: 65%
      left: 10%

• Is it possible to size the icons on the floorplan?. I find them a bit small.

The floorplan looks as following:

With icons on it:

[patman (Patrick)]

You should be able to use all CSS related properties like width or height under style. Try

...
style:
  top: 65%
  left: 10%
  width: 150%
  height: 150%

you can also try to use px as unit if you want absolute values.

[tobi-bo]

patman is right, you can use css, here is an example from my floorplan, which may help you:

- type: state-icon
  entity: light.schlafzimmer_decke
  state_color: false
  tap_action:
    action: toggle
  style:
    top: 20%
    left: 15%
    width: 50px
    height: 50px
    line-height: 50px
    border-radius: 50%
    transform: scale(1.5,1.5)
    text-align: center
    background-color: "rgba(255, 255, 255, 0.3)"

which finally looks like this:

For more complex texts on my floorplan I use template sensors which concatenate things as I like and then use the state-label.

[MDLefevere (Maurice)]

Thanks for the replies, but this doesn’t change my icon size.
If i change the width and height only the outer circle gets larger. The icon inside stays the same size.

  - type: state-icon
    tap_action:
      action: toggle
    entity: light.nanoleaf_dressoir
    icon: 'mdi:led-strip'
    style:
      top: 94%
      left: 71%
      width: 90px
      height: 90px
      line-height: 50px
      border-radius: 50%
      transform: 'scale(1.5,1.5)'
      text-align: center
      background-color: 'rgba(255, 255, 255, 0.3)'

[tobi-bo]

When you like it even bigger, then leave width and height property at 50px and try a bigger scale, like this:

  - type: state-icon
    tap_action:
      action: toggle
    entity: light.nanoleaf_dressoir
    icon: 'mdi:led-strip'
    style:
      top: 94%
      left: 71%
      width: 50px
      height: 50px
      line-height: 50px
      border-radius: 50%
      transform: 'scale(3,3)'
      text-align: center
      background-color: 'rgba(255, 255, 255, 0.3)'

[MDLefevere (Maurice)]

Thanks!. That did the trick

Do you perhaps know something about a text box on the side.
I have a text box that turns off all lights at the same time, but it looks silly.

I want it like the text on the bottom. Bigger, bold and with a space between the room name and the current state.

[MDLefevere (Maurice)]

Woops. Figured it out myself.
I need to start reading some more before asking

      transform: 'scale(3,3)'
      font-weight: bold

[Infineghost]

What program did you use for making this 2D floorplan?

[MDLefevere (Maurice)]

I used: https://www.homestyler.com/floorplan/

[Infineghost]

Thanks. I like the subtle floorplan. Gonna take a look and see if I can make myself one