search

home-assistant / frontend

:lollipop: Frontend for Home Assistant
https://demo.home-assistant.io
Other
4.02k stars 2.75k forks source link

Picture Elements card 'flicker' since last update. #14310

Closed SdeGeata closed 1 year ago

SdeGeata commented 1 year ago

Checklist

Describe the issue you are experiencing

Greetings;

I just finished updating to the latest Home Assistant Core and Supervisor and have since noticed a "flicker" on a picture elements card. It is a single card in panel mode and the card had no issues before the latest update.

I have attached a video that shows the buggy effect.

Home Assistant 2022.11.1 Supervisor 2022.10.2 Operating System 9.2 Frontend 20221102.1 - latest

https://user-images.githubusercontent.com/5808871/200147742-ce6ba09d-3937-4402-bd74-63039c396946.mov

Describe the behavior you expected

Expected behaviour? I expect my card to not flicker every few seconds.

Steps to reproduce the issue

  1. Update Home Assistant core to 2022.11.1
  2. Update Supervisor to 2022.10.2
  3. Check your picture elements cards ...

What version of Home Assistant Core has the issue?

2022.11.1

What was the last working version of Home Assistant Core?

2022.10.5

In which browser are you experiencing the issue with?

Home Assistant Companion 2022.10 (2022.398), Google Chrome Version 94.0.4606.81 (Official Build) (x86_64), Apple Safari Version 15.3 (15612.4.9.1.8, 15612)

Which operating system are you using to run this browser?

MacOS 10.15.7, iOS 16.2

State of relevant entities

No response

Problem-relevant frontend configuration

type: custom:config-template-card
entities:
  - switch.sonoff_10010ff659_1
  - switch.sonoff_10010ff659_2
  - switch.ghost
  - switch.sonoff_1000c653cc
  - light.mini_bar
  - group.pub_lighting
  - switch.tiffany_lamps
  - switch.pub_sign
  - switch.mirror_mirror
  - light.living_room
  - switch.sonoff_1000b81e3d
  - switch.sonoff_1000c64a28
  - light.kitchen
  - switch.slow_cooker
  - switch.sonoff_1000d8209c
  - switch.movement_detected
  - input_number.mm_brightness
  - sensor.mirror_brightness_sensor
  - input_boolean.bathroom_boolean
  - input_boolean.working
  - automation.random_vacation_lighting
  - group.all_lighting
  - automation.all_lights_off
  - switch.kitchen_sink_light
  - switch.moroccan_globe_lamp
  - input_boolean.tv_boolean
  - input_boolean.laptop_boolean
card:
  type: picture-elements
  image: /local/lighting_floorplan/lights/00_floorplan_all_off.png
  style: |
    ha-card:first-child {
      background: rgba(42, 46, 48, 1)
    }
  elements:
    - action: none
      entity: switch.sonoff_10010ff659_1
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/01_front_porch.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.sonoff_10010ff659_1'].state === 'on' ?
          (states['switch.sonoff_10010ff659_1'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.sonoff_10010ff659_2
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/02_front_hallway.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.sonoff_10010ff659_2'].state === 'on' ?
          (states['switch.sonoff_10010ff659_2'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.ghost
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/03_ghost_light.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.ghost'].state === 'on' ?
          (states['switch.ghost'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.sonoff_1000c653cc
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/04_break_front.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.sonoff_1000c653cc'].state === 'on' ?
          (states['switch.sonoff_1000c653cc'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.tiffany_lamps
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/07_tiffany_lights.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.tiffany_lamps'].state === 'on' ?
          (states['switch.tiffany_lamps'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.pub_sign
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/06_magick_mirror.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.pub_sign'].state === 'on' ?
          (states['input_number.mm_brightness'].state / 200) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.mirror_mirror
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/06_magick_mirror.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.mirror_mirror'].state === 'on' ?
          (states['input_number.mm_brightness'].state / 200) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.mini_bar
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/05_mini_bar.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.mini_bar'].state === 'on' ?
          (states['light.mini_bar'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.living_room
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/08_living_room.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.living_room'].state === 'on' ?
          (states['light.living_room'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.sonoff_1000b81e3d
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/09_living_room_lamp.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.sonoff_1000b81e3d'].state === 'on' ?
          (states['switch.sonoff_1000b81e3d'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.sonoff_1000c64a28
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/10_bedside.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.sonoff_1000c64a28'].state === 'on' ?
          (states['switch.sonoff_1000c64a28'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.movement_detected
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/11_pee_step_motion.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.movement_detected'].state === 'on' ?
          (states['switch.movement_detected'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.moroccan_globe_lamp
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/12_moroccan_globe.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.moroccan_globe_lamp'].state === 'on' ?
          (states['switch.moroccan_globe_lamp'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.kitchen
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/13_kitchen.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.kitchen'].state === 'on' ?
          (states['light.kitchen'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.kitchen_sink_light
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/16_kitchen_sink.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.kitchen_sink_light'].state === 'on' ?
          (states['switch.kitchen_sink_light'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.slow_cooker
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/17_kitchen_stovetop.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.slow_cooker'].state === 'on' ?
          (states['switch.slow_cooker'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.sonoff_1000d8209c
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/15_back_porch.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.sonoff_1000d8209c'].state === 'on' ?
          (states['switch.sonoff_1000d8209c'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: input_boolean.livingroom_motion_activated
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/14_bathroom.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['input_boolean.bathroom_boolean'].state === 'on' ?
          (states['input_boolean.bathroom_boolean'].attributes.brightness / 255)
          : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: input_boolean.laptop_boolean
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/Computer_ON.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['input_boolean.laptop_boolean'].state === 'on' ?
          (states['input_boolean.laptop_boolean'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: input_boolean.tv_boolean
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/18_TV_on.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['input_boolean.tv_boolean'].state === 'on' ?
          (states['input_boolean.tv_boolean'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: switch.slow_cooker
      hold_action:
        action: none
      image: /local/lighting_floorplan/lights/17_kitchen_stovetop.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['switch.slow_cooker'].state === 'on' ?
          (states['switch.slow_cooker'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - entity: switch.sonoff_10010ff659_1
      type: image
      title: Front Porch
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 35%
        left: 7.5%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 9%
        height: 19%
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: switch.sonoff_10010ff659_2
      type: image
      title: Front Hallway
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 35%
        left: 20.75%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 10%
        height: 19%
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: switch.ghost
      type: image
      title: Ghost Lamp
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 35%
        left: 34%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 9%
        height: 19%
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: switch.sonoff_1000c653cc
      type: image
      title: Break-Front
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 17%
        left: 49.5%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 12%
        height: 12%
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: light.mini_bar
      type: image
      title: Track Lights
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 19%
        left: 61%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 7%
        height: 15%
      tap_action:
        action: toggle
      double_tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: Mini-Bar
            content:
              type: custom:light-slider-card
              entity: light.mini_bar
              transparent_card: true
              icon_position: inside
              slider_color_auto: true
              hide_title: true
              step: 1
      hold_action:
        action: none
    - entity: group.pub_lighting
      type: image
      title: Pub
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 36%
        left: 46%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 12%
        height: 22%
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: switch.tiffany_lamps
      type: image
      title: Tiffany Lamps
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 32%
        left: 54.5%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 3%
        height: 6%
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: switch.tiffany_lamps
      type: image
      title: Tiffany Lamps
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 44%
        left: 54.5%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 3%
        height: 6%
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: switch.pub_sign
      type: image
      title: Magick Mirror
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        left: 62%
        top: 38%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 5%
        height: 10%
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: Magick Mirror
            card_mod:
              style:
                $: |
                  .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                    border-radius: 25px;
                  } .: | :host {
                    --mdc-theme-surface: rgba(0,0,0,0);
                    --secondary-background-color: rgba(0,0,0,0.8);
                    --ha-card-background: rgba(0,0,0,0.8);
                  } :host .content {
                    width: 40vw;
                    height: 80vh;
                    }
            content:
              type: custom:stack-in-card
              title: Magick Mirror
              mode: vertical
              cards:
                - type: horizontal-stack
                  cards:
                    - type: button
                      entity: switch.pub_sign
                      icon: mdi:glass-mug-variant
                      name: Laughing Goblin
                    - type: button
                      entity: switch.mirror_mirror
                      icon: mdi:drama-masks
                      name: Mirror Mirror
                - type: horizontal-stack
                  cards:
                    - type: button
                      entity: switch.mm_brightness_toggle
                      name: Brightness
                      icon: mdi:brightness-6
                      icon_height: 70px
                    - type: sensor
                      entity: sensor.mirror_brightness_sensor
                      icon: mdi:powershell
                      name: Current Brightness
      hold_action:
        action: none
    - entity: sensor.mirror_brightness_sensor
      type: state-label
      title: Magick Mirror Brighness
      icon: mdi:brightness-percent
      state_color: true
      style:
        left: 69%
        top: 42%
        transform: translate(-50%,-50%) scale(0.5,0.5)
        color: '#a6a4a4'
        font-size: x-large
        font-weight: bold
        text-align: center
      tap_action:
        action: none
      double_tap_action:
        action: more-info
      hold_action:
        action: none
    - entity: light.living_room
      type: image
      title: Living Room
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 67%
        left: 43.7%
        height: 15%
        width: 8%
        border: 1px dashed rgba(255,0,0,0.0)
      tap_action:
        action: toggle
      double_tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: Living Room
            content:
              type: custom:light-slider-card
              entity: light.living_room
              transparent_card: true
              icon_position: inside
              slider_color_auto: true
              hide_title: true
              step: 1
      hold_action:
        action: none
    - entity: switch.sonoff_1000b81e3d
      type: image
      title: Living Room Lamp
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 87%
        left: 33%
        height: 10%
        width: 5%
        border: 1px dashed rgba(255,0,0,0.0)
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: switch.sonoff_1000c64a28
      type: image
      title: Bedside Lamp
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 55%
        left: 7%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 5%
        height: 10%
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: switch.moroccan_globe_lamp
      type: image
      title: Moroccan Globe Lamp
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 89%
        left: 26%
        height: 10%
        width: 5%
        border: 1px dashed rgba(255,0,0,0.0)
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: light.kitchen
      type: image
      title: Kitchen
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 71%
        left: 70%
        height: 15%
        width: 8%
        border: 1px dashed rgba(255,0,0,0.0)
      tap_action:
        action: toggle
      double_tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: Kitchen
            content:
              type: custom:light-slider-card
              entity: light.kitchen
              transparent_card: true
              icon_position: inside
              slider_color_auto: true
              hide_title: true
              step: 1
      hold_action:
        action: none
    - type: image
      entity: switch.kitchen_sink_light
      title: Kitchen Sink
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 53%
        left: 72%
        border: 1px dashed rgba(255,0,0,0.0)
        width: 6%
        height: 8%
      tap_action:
        action: toggle
      double_tap_action:
        action: none
      hold_action:
        action: none
    - entity: switch.sonoff_1000d8209c
      type: image
      title: Back Porch
      state_image:
        'on': /local/lighting_floorplan/lights/00_transparent_square.png
        'off': /local/lighting_floorplan/lights/00_transparent_square.png
        unavailable: /local/lighting_floorplan/lights/00_unavailable.png
      style:
        top: 71%
        left: 91.5%
        height: 10%
        width: 5%
        border: 1px dashed rgba(255,0,0,0.0)
      tap_action:
        action: toggle
      double_tap_action:
        action: more-info
      hold_action:
        action: none
    - entity: input_boolean.tv_boolean
      type: state-icon
      state_color: true
      icon: mdi:television
      style:
        left: 10%
        top: 17%
        '--mdc-icon-size': 50%
      tap_action:
        action: toggle
      hold_action:
        action: none
    - entity: switch.mm_brightness_toggle
      type: state-icon
      state_color: true
      icon: mdi:brightness-6
      style:
        left: 20%
        top: 17%
        '--mdc-icon-size': 50%
      tap_action:
        action: toggle
      hold_action:
        action: none
    - entity: input_boolean.working
      type: state-icon
      icon: mdi:hammer-wrench
      state_color: true
      style:
        left: 20%
        top: 7%
        '--mdc-icon-size': 50%
      tap_action:
        action: toggle
      hold_action:
        action: none
    - entity: automation.random_vacation_lighting
      type: state-icon
      state_color: true
      style:
        left: 30%
        top: 7%
        '--mdc-icon-size': 50%
      tap_action:
        action: toggle
      hold_action:
        action: none
    - entity: group.all_lighting
      type: state-icon
      state_color: true
      style:
        left: 10%
        top: 7%
        '--mdc-icon-size': 50%
      hold_action:
        action: none
      tap_action:
        action: call-service
        service: automation.trigger
        service_data:
          entity_id: automation.all_lights_off

Javascript errors shown in your browser console/inspector

Nothing relevant.

Additional information

Video is attached in first field.

ildar170975 commented 1 year ago

The config-template-card updates itself on every change of any of monitored entities. It is NOT recommended to place the whole picture elements card into config-template-card. Use CTC card for a particular element only.

same as https://github.com/iantrich/config-template-card/issues/114 https://github.com/home-assistant/frontend/issues/14269

SdeGeata commented 1 year ago

I realize that, but there was no change of entity states, as you can see by the video. It just flickers every few seconds on its own. This behaviour never happened before the update. I'll look into your CTC card suggestion, but please look into this behaviour on your end too.

ildar170975 commented 1 year ago

but please look into this behaviour on your end too.

I am a user like you. Just trying to follow recommendations.

SdeGeata commented 1 year ago

Yeah, all my other research told me the same as you did.  I ended up downgrading HA CORE to the previous version.On Nov 6, 2022, at 1:42 PM, ildar170975 @.***> wrote:

but please look into this behaviour on your end too.

I am a user like you. Just trying to follow recommendations.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>

marcodb82 commented 1 year ago

I realize that, but there was no change of entity states, as you can see by the video. It just flickers every few seconds on its own. This behaviour never happened before the update. I'll look into your CTC card suggestion, but please look into this behaviour on your end too.

Excuse for my intrusion: What means "CTC Card" ?

thank

SdeGeata commented 1 year ago

@marcodb82

”CTC card” is Config-Template-Card. It is mentioned in the posts above.

smonesi commented 1 year ago

I tried to submit a PR with a fix (or at least a "workaround") for this issue, we're still discussing on it...

However, I'm migrating away from config-template-card and I started using card-mod which is not affected by this issue, seems less demanding on the browser side and also has a more standard templating syntax.

Basically I am changing configurations like this (which is a part of a picture-elements):

  - type: custom:config-template-card
    entities:
      - light.hue_go_new_2
    element:
      type: image
      image: /local/casa/rotated7/Casa3D_rotated7_light_hue_go_new_2_MASK.png?a2
      entity: light.hue_go_new_2
      tap_action:
        action: none
      hold_action:
        action: none
    style:
      opacity: >-
        ${ ( states["light.hue_go_new_2"].attributes.brightness ?
        states["light.hue_go_new_2"].attributes.brightness / 255 : 0) -
        (states["light.hue_go_new_2"].attributes.hs_color ?
        states["light.hue_go_new_2"].attributes.hs_color[1]/90 : 0)}
      mix-blend-mode: lighten
      top: 0%
      left: 0%
      transform: none

into configurations like this:

  - type: image
    image: /local/casa/rotated7/Casa3D_rotated7_light_hue_go_new_2_MASK.png?a2
    entity: light.hue_go_new_2
    tap_action:
      action: none
    hold_action:
      action: none
    style:
      mix-blend-mode: lighten
      top: 0%
      left: 0%
      transform: none
    card_mod:
      style: |
        :host {
          opacity: {{ (state_attr("light.hue_go_new_2","brightness")|float/255 if state_attr("light.hue_go_new_2","brightness") else 0) - (state_attr("light.hue_go_new_2","hs_color")[1]|float/90 if state_attr("light.hue_go_new_2","hs_color") else 0) }};
        }
davideickhoff commented 1 year ago

@smonesi using card-mod is a nice idea, I tested it but ran into an issue with the light state. It works well initially but once I turn off the light (state != 'on') and on again the card-mod style does not update anymore. Did you encounter this issue as well or is your example working for you?

I used it with a colored hue light like this (works well until I turn the light off and on again):

      - type: picture-elements
        image: /local/ui/floorplan/night.png
        elements:
          - type: image
            image: /local/ui/floorplan/lights/hallway_living_on.png
            entity: light.hallway_1
            tap_action:
              action: none
            hold_action:
              action: none
            style:
              mix-blend-mode: lighten
              transform: none
              width: 100%
              height: 100%
              top: 0
              left: 0
            card_mod:
              style: |
                :host {
                  opacity: {{ (state_attr(config.entity, 'brightness') / 255) if is_state(config.entity, 'on') else 0.0 }};
                  filter: {{ 'hue-rotate(' + ((state_attr(config.entity, 'hs_color')[0] - 45)|string if state_attr(config.entity, 'hs_color') else 0) + 'deg)' }};
                }

I also played around with the state_filter as it changes some other styles.. but didn't make a difference

Edit: It seems like the component is loosing its connection to the change events, the console logs:

core.327e9f9f.js:1 Received event for unknown subscription 35. Unsubscribing.

After I turned off and on the light and then change brightness or color..

davideickhoff commented 1 year ago

Found the issue:

filter: {{ 'hue-rotate(' + ((state_attr(config.entity, 'hs_color')[0] - 45)|string if state_attr(config.entity, 'hs_color') else 0) + 'deg)' }};

the string concatenation with 0 (int) in the else branch didn't work... so changing to

filter: {{ 'hue-rotate(' + ((state_attr(config.entity, 'hs_color')[0] - 45)|string if state_attr(config.entity, 'hs_color') else '0') + 'deg)' }};

did the trick.

github-actions[bot] commented 1 year ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.