Floorplan UI with Color synced lights

KeeganMcc · February 25, 2024, 9:04am

Odd, I’ve added that and it still doesn’t work.

Looking at the previous code I had which somewhat worked, there was also no tap_action. But again, this code didn’t seem to handle colours correct which is why I’m using your code.

  - type: "custom:config-template-card"
    entities:
      - light.desk
    element:
      action: none
      entity: light.desk
      tap_action:
        action: none
      hold_action:
        action: none
      image: /local/home_transparent.png
      state_image:
        "on": /local/ui/floorplan/lights/rez/home_afternoon_bedroomdesk_on.png
      type: image
    style:
      filter: >-
        ${ "hue-rotate(" + (states['light.desk'].attributes.hs_color ? states['light.desk'].attributes.hs_color[0] : 0) + "deg) saturate(100%)"}
      opacity: >-
        "${states['light.desk'].state === 'on' ? (states['light.desk'].attributes.brightness / 255) : '0'}"
      left: 50%
      top: 35.70%
      width: 100%
      mix-blend-mode: lighten

Christian-CFP · February 25, 2024, 9:08am

I quess now I am also confused

The code for the light images is correct without tab_action. Its just the color of the light if its on.

For the icon switch you have to edit the other code, where you have the icon and the color wheel for hold_action. There you have to insert the tab_action.

CDRX2 · February 25, 2024, 9:08am

I notice your icon does not change either, it should also reflect the fact the light is on.

CDRX2 · February 25, 2024, 9:10am

I believe this has to do with the hue-rotate code. If my colored lights are not rendere as red, the colors in HA will not show correctly. Perhaps you’re not affected by this, have you tried the same code with a light rendered as white instead of red?

Christian-CFP · February 25, 2024, 9:14am

I got a white and a red rendered image.
This is the actual selected light color.
And its not only if i select a red light color (wich is obviously not red its white) even all other colors are slightly off. Just a white color shows correctly.

EDIT: With a light bulb it works great with all colors just on a lightstrip it doesn’t.

KeeganMcc · February 25, 2024, 9:15am

I’ve fixed that now! Dark grey when OFF and white when ON. But when I set it to a colour it will change to the selected colour.

KeeganMcc · February 25, 2024, 9:15am

I’ve got both white and red rendered images too.

KeeganMcc · February 25, 2024, 9:28am

Have also just tried this config on another hue colour light with all the images rendered for white and red & it still doesn’t work. So I must be doing something wrong/have broken config somewhere.

Annoying how it somewhat works on the old code but doesn’t work at all on this new code. But I need this new code haha

Christian-CFP · February 25, 2024, 9:34am

Can you share your code where you have the color wheel inside with the light_timer?

KeeganMcc · February 25, 2024, 9:37am

This code?

light_timer:
  variables:
    entity: "var_entity"
  custom_fields:
    minus:
      card:
        type: "custom:button-card"
        show_icon: true
        show_name: false
        size: 100%
        icon: "mdi:minus"
        tap_action:
          action: call-service
          service: counter.decrement
          service_data:
            entity_id: counter.light_time
        styles:
          card:
            - border-radius: 100%
            - padding: 0
            - background: "rgba(255, 255, 255, 0.3)"
    time:
      card:
        type: "custom:button-card"
        show_icon: false
        show_name: true
        aspect_ratio: 3.5/1
        name: '[[[ return states["counter.light_time"].state + " min."; ]]]'
        tap_action:
          action: none
        styles:
          card:
            - border-radius: 1vw
            - padding: 0
            - background: "rgba(255, 255, 255, 0.3)"
          name:
            - font-size: 1vw
    plus:
      card:
        type: "custom:button-card"
        show_icon: true
        show_name: false
        size: 100%
        icon: "mdi:plus"
        tap_action:
          action: call-service
          service: counter.increment
          service_data:
            entity_id: counter.light_time
        styles:
          card:
            - border-radius: 100%
            - padding: 0
            - background: "rgba(255, 255, 255, 0.3)"
    OK:
      card:
        type: "custom:button-card"
        show_icon: true
        show_name: false
        size: 100%
        icon: "mdi:play"
        tap_action:
          action: call-service
          service: script.light_timer
          service_data:
            entity_id: "[[[ return variables.entity ]]]"
        styles:
          card:
            - border-radius: 100%
            - padding: 0
            - background: "rgba(255, 255, 255, 0.3)"
  name: "Timer extinction"
  show_icon: false
  show_name: true
  action: none
  styles:
    grid:
      - grid-template-areas: '"n n n n n n n n n" ". minus . time . plus . OK ."'
      - grid-template-columns: 10% 10% 5% 35% 5% 10% 5% 10% 10%
      - grid-template-rows: 1fr 1fr
    card:
      - border: none
      - box-shadow: none
    name:
      - font-size: 1vw

CDRX2 · February 25, 2024, 9:47am

That’s the intended behaviour.

Christian-CFP · February 25, 2024, 9:49am

This looks like a decluttering card or button card.
You have to have inside your visual.yaml also a code witch shows the light icon on your desk.

I can show you my code but I do not use icons. With my code you have to click on an area. (dont like icons on the light floormap ) This code is with the light wheel etc. if you hold.

If you need a icon you have to look at CDRX code. In my case there is no icon and you have to play around with the position of the area:

style:
  height: 27%
  left: 44.0%
  top: 78.5%
  width: 12.5%

This one second:

- type: custom:config-template-card
  entities:
    - light.desk
  element:
    type: image
    image: /local/transparent.png
    entity: light.desk
    tap_action:
      action: call-service
      service: homeassistant.toggle
      service_data:
        entity_id: light.desk
    hold_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: custom:mod-card
            card_mod:
              style:
                layout-card$:
                  grid-layout$: |
                    :host {
                      padding: 0 !important;
                    }
                    #root {
                      margin: 0px !important;
                    }
                    #root > * {
                      margin: 0px !important;
                    }
            card:
              type: "custom:decluttering-card"
              template: light_popup_mid
              variables:
                - light: light.desk
                - name: Desk Light
          title: Desk Light
  style:
    height: 27%
    left: 44.0%
    top: 78.5%
    width: 12.5%

EDIT CORRECTED THE CODE IT WAS A WRONG ONE! So you have to have both this (above) and your code:

This one first:

- type: custom:config-template-card
    entities:
      - light.desk
    element:
      type: image
      image: /local/ui/floorplan/lights/rez/home_night_desklights_on_white.png
      entity: light.desk
      tap_action:
        action: none
      hold_action:
        action: none
    style:
      opacity: >-
        ${ ( states["light.desk"].attributes.brightness ?
        states["light.desk"].attributes.brightness / 255 : 0) -
        (states["light.desk"].attributes.hs_color ?
        states["light.desk"].attributes.hs_color[1]/255 : 0)}
      mix-blend-mode: lighten
      left: 50%
      top: 50%
      width: 100%
      transform: none

  - type: custom:config-template-card
    entities:
      - light.desk
    element:
      type: image
      image: /local/ui/floorplan/lights/rez/home_night_desklights_on_red.png
      entity: light.desk
      tap_action:
        action: none
      hold_action:
        action: none
    style:
      filter: >-
        ${ "hue-rotate(" + (states["light.desk"].attributes.hs_color ?
        states["light.desk"].attributes.hs_color[0] : "0") + "deg)
        saturate(" + (states["light.desk"].attributes.hs_color ?
        states["light.desk"].attributes.hs_color[1] : 255)+ "%)" }
      opacity: >-
        ${ (states["light.desk"].attributes.brightness ?
        states["light.desk"].attributes.brightness / 100 : 0) *
        (states["light.desk"].attributes.hs_color ?
        states["light.desk"].attributes.hs_color[1]/90 : 0) }
      mix-blend-mode: lighten
      left: 50%
      top: 50%
      width: 100%
      transform: none

CDRX2 · February 25, 2024, 9:51am

Hmmm I’m just spitballing here, but where did you put the new code? The order of the code inside the yaml file is important, since the engine will render from the top down. That means your base image (floorplan at night) should be at the very top of your code, followed by the day image with the sun attributes. Since the engine renders from top down, your night image will be the image all the way at the back of your view, with all images coming after it rendering on top of it.