Light Groups are not visible in selected lights.

[pk802]

I have several lights turning on with 1 switch. Currently when I select group, it's not showing in the list of lights.

[shmuelzon]

Can you give all the individual lights the same name? I don't think I take groups into consideration

[pk802]

If I give same name only 1 of it is rendering in image. Also is it possible to just create 1 image per light? Currently it's creating images as per light on off combination. In CSS I can use mix-blend-mode: screen which will easily overlay images of multiple lights and creates same effect. I am using this plugin as it gives me yaml easily but I only need single image of the light.

[shmuelzon]

Can you please try to ungroup them? I didn't bother with grouping them, just have them the same name and that worked well...

Regarding the CSS option, how do the results of that compare with rendering the different combinations? If it's good enough, I'd be more than happy to just use that and cut down on the number of renders. I'll also simplify the YAML

[pk802]

This one with CSS Mix Blend Mode Screen 1 image per light https://github.com/shmuelzon/home-assistant-floor-plan/assets/99890240/1430afc8-1c93-429d-bdc4-c964da9b2368

This one with default images generated https://github.com/shmuelzon/home-assistant-floor-plan/assets/99890240/af56e973-f61e-4924-a9da-cc8998ba27f5

[pk802]

It is also easier to do coloured lights if we have single image. https://github.com/shmuelzon/home-assistant-floor-plan/assets/99890240/d03ca61e-2576-45a2-9aea-028df62fd9a8

[shmuelzon]

How are you doing the colored lights? Changing the hue of the PNG or something with CSS?

[shmuelzon]

I created a side branch with a hack to create an image per room. You can download the build from here.

I'd be happy to hear what kind of improvements you can offer to the generated YAML.

[pk802]

How are you doing the colored lights? Changing the hue of the PNG or something with CSS?

Yes I am using CSS filters. Here is code for 1 light.

    - action: none
      entity: light.bed_light
      hold_action:
        action: none
      image: /local/floorplan/switch.pk_cabin_backspot_hanging_l1_red.png
      style:
        filter: >-
          ${ "sepia(100%)  hue-rotate(calc(" +
          (states['light.bed_light'].attributes.hs_color ?
          states['light.bed_light'].attributes.hs_color[0] : 0) + "deg - 55deg))
          saturate(calc(" + (states['light.bed_light'].attributes.hs_color ?
          states['light.bed_light'].attributes.hs_color[1] : 100)+"% *2))
          saturate(3) brightness(1)"}
        left: 50%
        mix-blend-mode: screen
        opacity: |-
          ${states['light.bed_light'].state === 'on' ?
           (states['light.bed_light'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
        will-change: opacity
      tap_action:
        action: none

I have tried several filters and options but this gave me best results. I found this somewhere in the forum. I am not sure where.

For colored lights to work I take image of single light and edit in GIMP and get only Red channel.

[pk802]

I created a side branch with a hack to create an image per room. You can download the build from here.

I'd be happy to hear what kind of improvements you can offer to the generated YAML.

Initial testing looks good. In YAML in style, You need to add mix-blend-mode: screen

         style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: screen

[pk802]

Can you add cover.xxx, switch.xxx, climate.xxx and media_player.xxx entities? This will be really helpful. currently its rendering entities only with names sensor.xxx, binary_sensor.xxx or camera.xxx.

[shmuelzon]

Hey,

I've tried this out for myself now and the results aren't looking that good even without mixing two lights: Without mix-blend-mode: With mix-blend-mode: It might work better if my background was pitch black like your example but I prefer the floor plan to always be visible even without any lights turned on. I think I'll need to stay with the current rendering option.

As for adding the other entities, sure I can add that

[shmuelzon]

I added support for the new entities and pushed a new release: v0.2.2.

I'm closing this issue for now as I don't see how to make use of the mix-blend-mode that would work in the common scenarios.

[shmuelzon]

Hey, why did you remove your comment about mix-blend-mode: lighten? It seems to work quite nicely. Am I missing something?

[pk802]

Hey, why did you remove your comment about mix-blend-mode: lighten? It seems to work quite nicely. Am I missing something?

Actually I am trying few things so I can show which method works best.

[pk802]

Ok So after testing several options, you can get best results using mix-blend-mode: lighten If you face grain issue, you can use images in renders rather then floorplan folder. Let me know if out put is acceptable.

[shmuelzon]

The CSS mode has been implemented as a part of #16.

Thanks for all you help with this!

[pk802]

@shmuelzon Thank you for the update. I have tested the update. There are 2 issues with new update that I have found. It is adding lights in yaml which not selected in sweethome 3D. It's not adding this lights in floorplan/ render which is correct. It is also creating 2 icons for each switch 1 with tap_action: action: toggle and 1 without it. I am sharing the YAML generated.

type: picture-elements
image: /local/floorplan/base.png?version=40BFAFFA4D8ABB50833E0E930AADA8B5
elements:
  - type: conditional
    conditions:
      - entity: switch.pk_cabin_sofaspot_center_l2
        state: 'on'
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity:
          - switch.pk_cabin_sofaspot_center_l2
        image: /local/floorplan/switch.pk_cabin_sofaspot_center_l2.png?version=8847C1A75C0EFA1161A90D3A5B1A8929
        filter: none
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
  - type: conditional
    conditions:
      - entity: switch.pk_cabin_sofaspot_center_l1
        state: 'on'
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity:
          - switch.pk_cabin_sofaspot_center_l1
        image: /local/floorplan/switch.pk_cabin_sofaspot_center_l1.png?version=CDFB82FAF1196CF5203A7D79F746792F
        filter: none
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
  - type: conditional
    conditions:
      - entity: switch.pk_cabin_backspot_hanging_l1
        state: 'on'
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity:
          - switch.pk_cabin_backspot_hanging_l1
        image: /local/floorplan/switch.pk_cabin_backspot_hanging_l1.png?version=5825135B76C099DF82BAEB08F5E9273D
        filter: none
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
  - type: conditional
    conditions:
      - entity: switch.pk_cabin_backspot_hanging_l2
        state: 'on'
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity:
          - switch.pk_cabin_backspot_hanging_l2
        image: /local/floorplan/switch.pk_cabin_backspot_hanging_l2.png?version=413EB5B04D1ADE14707C68904FD5BAD1
        filter: none
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
  - type: conditional
    conditions:
      - entity: switch.reception_spot_backdual_na_l1
        state: 'on'
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity:
          - switch.reception_spot_backdual_na_l1
        image: /local/floorplan/switch.reception_spot_backdual_na_l1.png?version=9A20D2A1B616EA3CB8DC1D3673C0EC54
        filter: none
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
  - type: state-icon
    entity: switch.pk_cabin_sofaspot_center_l2
    title: null
    style:
      top: 30.39%
      left: 43.34%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.pk_cabin_sofaspot_center_l1
    title: null
    style:
      top: 17.83%
      left: 43.58%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.pk_cabin_backspot_hanging_l1
    title: null
    style:
      top: 69.96%
      left: 47.49%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.pk_cabin_backspot_hanging_l2
    title: null
    style:
      top: 51.91%
      left: 41.14%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.reception_spot_backdual_na_l1
    title: null
    style:
      top: 31.22%
      left: 59.48%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.pk_cabin_backspot_hanging_l2
    title: null
    style:
      top: 51.91%
      left: 41.14%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: switch.pk_cabin_sofaspot_center_l2
    title: null
    style:
      top: 30.39%
      left: 43.34%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: switch.pk_cabin_backspot_hanging_l1
    title: null
    style:
      top: 69.96%
      left: 47.49%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: switch.pk_cabin_sofaspot_center_l1
    title: null
    style:
      top: 17.83%
      left: 43.58%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: switch.reception_spot_backdual_na_l1
    title: null
    style:
      top: 31.22%
      left: 59.48%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: cover.pk_cabin_blind
    title: null
    style:
      top: 77.47%
      left: 38.77%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: switch.pk_cabin_sofaspot_center_l1_red
    title: null
    style:
      top: 18.79%
      left: 37.30%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: switch.pk_cabin_sofaspot_center_l2_red
    title: null
    style:
      top: 30.28%
      left: 43.34%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: switch.reception_spot_backdual_na_l1_red
    title: null
    style:
      top: 31.11%
      left: 59.42%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: switch.pk_cabin_backspot_hanging_l2_red
    title: null
    style:
      top: 52.02%
      left: 41.20%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: switch.pk_cabin_backspot_hanging_l1_red
    title: null
    style:
      top: 63.19%
      left: 50.62%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
  - type: state-icon
    entity: climate.office_ac
    title: null
    style:
      top: 16.58%
      left: 44.28%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)

[shmuelzon]

It is adding lights in yaml which not selected in sweethome 3D. It's not adding this lights in floorplan/ render which is correct.

You're right, I didn't ignore hidden entities when generating the state icons for non-light HA entities.

It is also creating 2 icons for each switch 1 with tap_action: action: toggle and 1 without it.

This is one is a bit odd since your lights are switches in HA and not lights so they're being picked up twice. Once as SH3D light sources and another as "non-light" entities for which I just add state icons. To be honest, I think you should change the switches in HA to be lights (there's a place in the switch configuration UI you can set this) and then it won't be a problem but, for completeness, I also verify now that the "non-light" HA entities aren't lights in SH3D so they won't be picked up twice.

Both issues were fixed in v0.3.1

[pk802]

It is adding lights in yaml which not selected in sweethome 3D. It's not adding this lights in floorplan/ render which is correct.

You're right, I didn't ignore hidden entities when generating the state icons for non-light HA entities.

It is also creating 2 icons for each switch 1 with tap_action: action: toggle and 1 without it.

This is one is a bit odd since your lights are switches in HA and not lights so they're being picked up twice. Once as SH3D light sources and another as "non-light" entities for which I just add state icons. To be honest, I think you should change the switches in HA to be lights (there's a place in the switch configuration UI you can set this) and then it won't be a problem but, for completeness, I also verify now that the "non-light" HA entities aren't lights in SH3D so they won't be picked up twice.

Both issues were fixed in v0.3.1

Thank you for quick response. Surprisingly only switches are picked up twice. Cover and climate are only added once.

[shmuelzon]

Thank you for quick response. Surprisingly only switches are picked up twice. Cover and climate are only added once.

That's because those aren't lights in SH3D. I start by going over the lights in SH3D, regardless of their names (which is why they were rendered for you despite having names like switch.*.

The state icons for other entities was added later and looked for specific prefixes in the names of any SH3D furniture. After you asked to add switch.* to those as well, this bug started.

[pk802]

Thank you for quick response. Surprisingly only switches are picked up twice. Cover and climate are only added once.

That's because those aren't lights in SH3D. I start by going over the lights in SH3D, regardless of their names (which is why they were rendered for you despite having names like switch.*.

The state icons for other entities was added later and looked for specific prefixes in the names of any SH3D furniture. After you asked to add switch.* to those as well, this bug started.

Understood. I will make adjustment and use lights instead of switch.