Floorplan UI with Color synced lights

AlbyQuaia · December 20, 2024, 3:22pm

ok thanks, I’ll have a look. I would like to ask you also another thing. Using your configuration, I’d like to create the circles for the entities like the one in the image, so that when an entity is on it changes its color in purple, with a blinking red circle that continues pulsing infinitely. I tried the following configuration, but it doesn’t work, any clue why?

entity: switch.telecamera_ingresso
tap_action:
  action: more-info
  entity: camera.telecamera_ingresso_sd_stream
icon: mdi:camera
styles:
  card:
    - position: absolute
    - top: 74%
    - left: 52%
    - height: 2.5vw
    - width: 2.5vw
    - border-radius: 50%
    - display: flex
    - justify-content: center
    - align-items: center
    - background-color: >
        [[[
          if (entity.state === 'on') {
            return 'rgba(128, 0, 128, 1)';
          } else {
            return 'rgba(255, 255, 255, 0.3)';
          }
        ]]]
    - animation: >
        [[[
          if (entity.state === 'on') {
            return 'pulse 2s infinite';
          } else {
            return 'none';
          }
        ]]]
  icon:
    - color: >
        [[[
          if (entity.state === 'on') {
            return 'white';
          } else {
            return 'lightgrey';
          }
        ]]]

I defined, when configuring the picture elements card, the following animations:

 @keyframes pulse {
   0% {
     box-shadow: 0 0 0 rgba(255, 0, 0, 0);
   }
   50% {
     box-shadow: 0 0 20px rgba(255, 0, 0, 1);
   }
   100% {
     box-shadow: 0 0 0 rgba(255, 0, 0, 0); 
   }
 }

CDRX2 · December 21, 2024, 7:05pm

Ok, so let’s start with: does the background turn purple or no? Or is it just the blinking that doesn’t work?

marcpot · December 21, 2024, 7:29pm

Hi @CDRX2, seems you blocked off your repo, I’d very much like to use your template, could you share it again?

jegres · December 21, 2024, 8:11pm

Maybe someone could check my code and what is wrong here. The color does not change at all

type: picture-elements
image: /local/floorplan/base.png
elements:
  - type: conditional
    conditions:
      - entity: light.tradfri_light
        state: "on"
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity: light.tradfri_light
        image: /local/floorplan/light.tradfri_light.png
        style:
          filter: |-
            [[[ 
              'hue-rotate(' + (states['light.tradfri_light'].attributes.hs_color ? states['light.tradfri_light'].attributes.hs_color[0] : 0) + 'deg) saturate(' + (states['light.tradfri_light'].attributes.hs_color ? states['light.tradfri_light'].attributes.hs_color[1] : 100) + '%)'
            ]]]
          opacity: |-
            [[[ 
              (states['light.tradfri_light'].attributes.brightness || 0) / 255 
            ]]]
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten

  - type: state-label
    entity: light.tradfri_light
    attribute: brightness
    style:
      top: 60%
      left: 50%

  - type: state-label
    entity: light.tradfri_light
    attribute: hs_color
    style:
      top: 65%
      left: 50%

  - type: state-icon
    entity: light.tradfri_light
    title: null
    style:
      top: 65.71%
      left: 74.32%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
    tap_action:
      action: toggle

fixed values are working fine.

style:
  filter: hue-rotate(30deg) saturate(100%)
  opacity: 0.5

added the state values to check if they are displayed correctly

CDRX2 · December 21, 2024, 8:13pm

It’s public again.

CDRX2 · December 21, 2024, 8:15pm

I’m not sure your comments would work here… Try without them?
Is the opacity part working at all?

jegres · December 21, 2024, 8:18pm

deleted the comments without changes.
Opacity also doesn´t work, only with fixed value…

EDIT: edited the previous post with picture and modified code

CDRX2 · December 21, 2024, 8:43pm

First thing I notice in your code is the use of only single quotes. Should be something like this:
"${states['light.bar'].state === 'on' ? (states['light.bar'].attributes.brightness / 255) : '0'}"
or
${ "hue-rotate(" + (states['light.bar'].attributes.hs_color ? states['light.bar'].attributes.hs_color[0] : 0) + "deg) saturate(100%)"}

jegres · December 21, 2024, 8:49pm

changed to this, without success

        style:
          filter: >
            ${ "hue-rotate(" + (states['light.tradfri_light'].attributes.hs_color ? states['light.tradfri_light'].attributes.hs_color[0] : 0) + "deg) saturate(100%)"}
          opacity: >
            "${states['light.tradfri_light'].state === 'on' ? (states['light.tradfri_light'].attributes.brightness / 255) : '0'}"

jegres · December 23, 2024, 11:29am

picture-element cards do not support templates… so you need to set variables

I managed to modify the code, so it´s working now!

type: picture-elements
image: /local/floorplan/base.png
elements:
  - type: conditional
    conditions:
      - entity: light.tradfri_light
        state: "on"
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity: light.tradfri_light
        image: /local/floorplan/light.tradfri_light.png
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
          filter: var(--my-filter_tradfri_light)
          opacity: var(--my-opacity_tradfri_light)
    card_mod:
      style: |
        :host {
          --my-filter_tradfri_light: hue-rotate({{ state_attr('light.tradfri_light', 'hs_color')[0] | int }}deg) saturate(100%) !important;
          --my-opacity_tradfri_light: {{(states['light.tradfri_light'].attributes.brightness / 255)}};
          }
  - type: conditional
    conditions:
      - entity: light.rgb_bad_light
        state: "on"
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity: light.rgb_bad_light
        image: /local/floorplan/light.rgb_bad_light.png
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
          filter: var(--my-filter_rgb_bad_light)
          opacity: var(--my-opacity_rgb_bad_light)
    card_mod:
      style: |
        :host {
          --my-filter_rgb_bad_light: hue-rotate({{ state_attr('light.rgb_bad_light', 'hs_color')[0] | int }}deg) saturate(100%) !important;
          --my-opacity_rgb_bad_light: {{(states['light.rgb_bad_light'].attributes.brightness / 255)}};
          }          
  - type: state-icon
    entity: light.tradfri_light
    title: null
    style:
      top: 65.71%
      left: 68%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.2)
    tap_action:
      action: toggle
  - type: state-icon
    entity: light.rgb_bad_light
    title: null
    style:
      top: 54.88%
      left: 80.45%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.2)
    tap_action:
      action: toggle

marcpot · December 24, 2024, 11:31am

@CDRX2 Thank you very much, your template got me running in no time! Only thing I cannot get working is my Hue Ambiance lights, they stay the same color as initially rendered.

CDRX2 · December 25, 2024, 7:35am

You’re right. I completely oversaw that you were not using config-template-card, searched in your templates… Congrats on figuring out another way with card-mod

CDRX2 · December 25, 2024, 7:35am

First thing would be to check if the states in HA actually do change.

AlbyQuaia · December 27, 2024, 7:05pm

yeah it turns purple, but the blinking doesn’t work

CDRX2 · January 4, 2025, 2:57pm

Did you check the box-shadow without the blinking?

AlbyQuaia · January 4, 2025, 5:43pm

just using box-shadow works

CDRX2 · January 6, 2025, 8:36pm

Ok, so maybe a stupid question: did you define the animation with card-mod? Because I don’t think picture-elements styling supports advanced styling such as keyframes natively.

You can check the ciboulette.yaml file in my repo, there’s keyframes defined in there.

Guinius · January 10, 2025, 8:04pm

Just in case anyone followed CDRX2’s template and for whatever reason decided to change the levels from rez 1es 2e (ground floor, first floor, second floor) thinking it will simplify your life, and decided to rename them to 0, 1, 2 like me, or is adding more floors, and then can’t figure out why you just have a blank floor plan and spends hours looking for the mistake… Let me save you the trouble!

In Decluttering_templates/views.yaml the state for the floors template can’t be just a number, so you need to put it in " " See below:

cards:
        - '[[sidebar]]'
        - type: conditional
          conditions:
            - entity: input_select.floor
              state: "0"

Not:

cards:
        - '[[sidebar]]'
        - type: conditional
          conditions:
            - entity: input_select.floor
              state: 0

AlbyQuaia · January 11, 2025, 6:02pm

I’ll try soon, thanks for suggestion

AlbyQuaia · January 13, 2025, 3:50pm

hey I finally found time to try, but even defining the animation with card-mod doesn’t work. This is my configuration:

type: custom:button-card
entity: switch.telecamera_ingresso
tap_action:
  action: more-info
  entity: camera.telecamera_ingresso_sd_stream
show_label: false
show_name: false
show_state: false
icon: mdi:webcam
style:
  "--mdc-icon-size": 1.3vw
  top: 74%
  left: 52%
  width: 2.5vw
  height: 2.5vw
  position: absolute
  transform: scale(1.2, 1.2)
  margin-left: "-1.25vw"
  margin-top: "-1.25vw"
styles:
  card:
    - "--mdc-icon-size": 1.3vw
    - width: 2.5vw
    - height: 2.5vw
    - border-radius: 100%
    - display: flex
    - justify-content: center
    - align-items: center
    - background-color: >
        [[[ return entity.state === 'on' ? 'rgba(128,0,128,1)' : 'rgba(255, 255,
        255, 0.3)'; ]]]
    - transition: background-color 0.3s ease-in-out
  icon:
    - color: |
        [[[ return entity.state === 'on' ? 'white' : 'lightgrey'; ]]]
card_mod:
  style: |
    @keyframes pulse {
      0% {
        box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.5);
      }
      50% {
        box-shadow: 0 0 20px 10px rgba(255, 0, 0, 1);
      }
      100% {
        box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.5);
      }
    }

    :host {
      animation: [[[ return entity.state === 'on' ? 'pulse 2s infinite' : 'none'; ]]];
    }

Do you see any mistakes. And I’ll also show you what i see