Card-mod cards causes all dashboard cards to flicker after the HA update and when Entity-filter in the same dashboard." #407
Comments
RobusX
changed the title
|
Please post a SHORT minimal code to reproduce the issue. |
|
Yes, no problem. Firstly, there are two automations which generate blinking lights for aqara lights (2 fields - columns in the entitiy-filter card -> please accommodate it to your entities and remove alarm/sun conditions, only blinking is needed: alias: Light Night Blinking RED when Armed
description: Light Night Blinking RED when Armed
trigger:
- platform: state
entity_id:
- switch.alarm_plug
to: "on"
id: alarm
- platform: numeric_state
entity_id: sun.sun
value_template: "{{ state_attr('sun.sun', 'elevation') }}"
below: -3
id: sunset
- platform: numeric_state
entity_id: sun.sun
value_template: "{{ state_attr('sun.sun', 'elevation') }}"
above: -3
id: sunrise
- platform: time_pattern
minutes: /3
id: alarm
condition:
- condition: or
conditions:
- condition: and
conditions:
- condition: state
entity_id: switch.alarm_plug
state: "on"
- condition: trigger
id: sunset
- condition: time
after: "18:00:00"
before: "07:00:00"
- condition: and
conditions:
- condition: state
entity_id: switch.alarm_plug
state: "on"
- condition: trigger
id: sunrise
- condition: time
after: "06:30:00"
before: "18:00:00"
- condition: and
conditions:
- condition: state
entity_id: switch.alarm_plug
state: "on"
- condition: trigger
id: alarm
action:
- choose:
- conditions:
- condition: trigger
id: sunset
sequence:
- repeat:
sequence:
- target:
entity_id:
- light.aqara_hub_m1s_5fc8_lightbulb
- light.aqara_hub_m1s_64d3_lightbulb
data:
color_name: red
brightness_pct: 70
action: light.turn_on
- delay: "00:00:00.6"
- target:
entity_id:
- light.aqara_hub_m1s_5fc8_lightbulb
- light.aqara_hub_m1s_64d3_lightbulb
data:
brightness_pct: 3
kelvin: 3800
action: light.turn_on
- delay: "00:00:05"
until:
- condition: state
entity_id: switch.alarm_plug
state: "off"
- conditions:
- condition: trigger
id: sunrise
sequence:
- repeat:
sequence:
- target:
entity_id:
- light.aqara_hub_m1s_5fc8_lightbulb
- light.aqara_hub_m1s_64d3_lightbulb
data:
color_name: red
brightness_pct: 70
action: light.turn_on
- delay: "00:00:00.6"
- target:
entity_id:
- light.aqara_hub_m1s_5fc8_lightbulb
- light.aqara_hub_m1s_64d3_lightbulb
data:
brightness_pct: 3
kelvin: 3800
action: light.turn_on
- delay: "00:00:05"
until:
- condition: state
entity_id: switch.alarm_plug
state: "off"
- conditions:
- condition: trigger
id: alarm
sequence:
- repeat:
sequence:
- target:
entity_id:
- light.aqara_hub_m1s_64d3_lightbulb
- light.aqara_hub_m1s_5fc8_lightbulb
data:
color_name: red
brightness_pct: 70
action: light.turn_on
- delay: "00:00:00.6"
- target:
entity_id:
- light.aqara_hub_m1s_64d3_lightbulb
- light.aqara_hub_m1s_5fc8_lightbulb
data:
brightness_pct: 3
kelvin: 3800
action: light.turn_on
- delay: "00:00:05"
until:
- condition: state
entity_id: switch.alarm_plug
state: "off"
mode: restart
And here is other automation needed which blinks additionally two kuril bulbs in the entity-filter card (when those bulbs blink, there are four columns in the entity-filter card (2 for aqara+2x kuril), so entity-filter card is stretching from 2 to 4 fields:
alias: Light Kuril Blinking RED when Armed
description: Light Kuril Blinking RED when Armed
trigger:
- platform: state
entity_id:
- switch.alarm_plug
to: "on"
id: day
- platform: time_pattern
minutes: /3
id: day
condition:
- condition: state
entity_id: switch.alarm_plug
state: "on"
action:
- choose:
- conditions:
- condition: trigger
id: day
sequence:
- repeat:
sequence:
- target:
entity_id:
- light.kurilbulb1
- light.kurilbulb2
data:
color_name: red
brightness_pct: 2
action: light.turn_on
- delay: "00:00:00.1"
- target:
entity_id:
- light.kurilbulb1
- light.kurilbulb2
data: {}
action: light.turn_off
- delay: "00:00:00.1"
- target:
entity_id:
- light.kurilbulb1
- light.kurilbulb2
data:
color_name: white
brightness: 2
action: light.turn_on
- delay: "00:00:00.1"
- target:
entity_id:
- light.kurilbulb1
- light.kurilbulb2
data: {}
action: light.turn_off
- delay: "00:00:06"
until:
- condition: state
entity_id: switch.alarm_plug
state: "off"
- data:
brightness_pct: 20
kelvin: 3500
target:
entity_id:
- light.kurilbulb1
- light.kurilbulb2
action: light.turn_on
- delay: "00:00:01"
- data: {}
target:
entity_id:
- light.kurilbulb1
- light.kurilbulb2
action: light.turn_off
mode: single
And here is entity-filter card for the dashboard which contains those four bulbs:
type: entity-filter
title: Lights/Sensors ON
show_header_toggle: false
entities:
- entity: light.aqara_hub_m1s_5fc8_lightbulb
name: AqSFlL
tap_action:
action: toggle
- entity: light.aqara_hub_m1s_64d3_lightbulb
name: AqStrL
tap_action:
action: toggle
- entity: light.kurilbulb1
name: Kur_1
tap_action:
action: toggle
- entity: light.kurilbulb2
name: Kur_2
tap_action:
action: toggle
state_filter:
- 'on'
- open
- detected
- operator: '>'
value: 4
show_empty: false
sort:
method: domain
card:
type: glance
title: ' '
And finally, here we have other (two for example) entities card in the same dashboard, which contains some car-mod code and are flickering (NOK):
1. Here on-off switch on the right near "Main Door" text, which is hidden by card-mod, flickers:
type: entities
entities:
- type: custom:template-entity-row
entity: binary_sensor.contact_sensor
name: Main Door State
toggle: false
secondary_info: last-updated
secondary: >
{% set state = states('binary_sensor.contact_sensor') %} {% if state ==
'off' %}
Closed
{% elif state == 'on' %}
Open
{% else %}
{{ state }}
{% endif %} | Last: {{
states.binary_sensor.contact_sensor.last_updated.astimezone().strftime('%m-%d
%H:%M:%S') }}
card_mod:
style: |
:host {
--mdc-icon-size: 40px;
--paper-item-icon-color: {%
if is_state('binary_sensor.contact_sensor', 'off') %}
green;
{%- elif is_state('binary_sensor.contact_sensor', 'on') or
is_state('switch.shelly_main_door_12v_switch_0', 'on') %}
red;
{%- else %}
grey;
{%- endif %};
}
- type: custom:fold-entity-row
head:
entity: switch.shelly_main_door_12v_switch_0
name: Main Door
toggle: false
state_color: true
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if is_state(config.entity, 'on') %}
orange;
{% else %}
grey;
{% endif %};
}
.entities .state-card-toggle .state-card {
display: none !important;
}
ha-entity-toggle {
display: none !important;
}
entities:
- type: custom:template-entity-row
entity: switch.shelly_main_door_12v_switch_0
name: Main Door 12V Switch
tap_action:
action: toggle
toggle: true
secondary_info: last-updated
secondary: >
Last: {{
states.switch.shelly_main_door_12v_switch_0.last_updated.astimezone().strftime('%m-%d
%H:%M:%S') }}
- type: custom:template-entity-row
entity: switch.2pm_main_door_switch_1
name: Main Door 230V Supply
tap_action:
action: toggle
toggle: true
secondary_info: last-updated
secondary: >
Power: {{ states('sensor.2pm_main_door_switch_1_power') }} W | Last:
{{
states.switch.shelly_main_door_12v_switch_0.last_updated.astimezone().strftime('%m-%d
%H:%M:%S') }}
title: ''
state_color: true
show_header_toggle: false
2. And in this entities card on the same dashboard all three doors, colored with green when closed (car-mod) are flickering:
type: entities
title: ' '
show_header_toggle: false
state_color: true
entities:
- type: custom:template-entity-row
entity: binary_sensor.contact_sensor
name: Main Door
icon: mdi:door
style: |
:host {
--mdc-icon-size: 30px;
--card-mod-icon-color:
{% if is_state(config.entity, 'on') %}
red
{% elif is_state(config.entity, 'unavailable') or is_state(config.entity, 'unknown') %}
yellow
{% else %}
green
{% endif %};
}
secondary: |
{% if is_state(config.entity, 'on') %}
Door Open
{% elif is_state(config.entity, 'off') %}
Door Closed
{% elif is_state(config.entity, 'unavailable') %}
Sensor Unavailable
{% elif is_state(config.entity, 'unknown') %}
Sensor State Unknown
{% endif %}
- type: custom:template-entity-row
entity: binary_sensor.contact_sensor_3
name: App Door
icon: mdi:door
style: |
:host {
--mdc-icon-size: 30px;
--card-mod-icon-color:
{% if is_state(config.entity, 'on') %}
red
{% elif is_state(config.entity, 'unavailable') or is_state(config.entity, 'unknown') %}
yellow
{% else %}
green
{% endif %};
}
secondary: |
{% if is_state(config.entity, 'on') %}
Door Open
{% elif is_state(config.entity, 'off') %}
Door Closed
{% elif is_state(config.entity, 'unavailable') %}
Sensor Unavailable
{% elif is_state(config.entity, 'unknown') %}
Sensor State Unknown
{% endif %}
- type: custom:template-entity-row
entity: binary_sensor.contact_sensor_2
name: Cellar Door
icon: mdi:door
style: |
:host {
--mdc-icon-size: 30px;
--card-mod-icon-color:
{% if is_state(config.entity, 'on') %}
red
{% elif is_state(config.entity, 'unavailable') or is_state(config.entity, 'unknown') %}
yellow
{% else %}
green
{% endif %};
}
secondary: |
{% if is_state(config.entity, 'on') %}
Door Open
{% elif is_state(config.entity, 'off') %}
Door Closed
{% elif is_state(config.entity, 'unavailable') %}
Sensor Unavailable
{% elif is_state(config.entity, 'unknown') %}
Sensor State Unknown
{% endif %}
I hope it is more clear now. Thanks for looking into it ! |
|
Sorry, this is not a short MWE. |
|
Also, the posted code is not formatted and cannot be analyzed. |
|
I shorted code as much i could..but entities for blinking should be present in the dashboard and in both automations. And also in the flickering cards. |
|
I uploaded "flickering" video from the test dashboard to Youtube. Link is here: IN original dashboard with much more cards, flickering is much more intenstive (with sliders up down flickering) and as i noticed also tab with mini graphic cards flickers: In video below i switched between two tabs to show flickering on both: |
|
Here you are :-D I have a sample as well. 2024-10-01.18-41-35-1.mp4 |
|
Thanks @ pickonedev . |
|
That is right. |
|
Yes, today i also tried your case. I turned one switch to ON in the entities card and all cards that use card-mod code flickered at the same time. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
My Home Assistant version: 2024.9.3
My lovelace configuration method (GUI or yaml): Yaml
After updating from 2024.6.4 to 2024.9.3, all dashboard cards with modified colors or card-mod hidden buttons are flickering (colors and hidden buttons blink) when an entity-filter card with color-changing mode is also present on the dashboard. The issue cannot be reproduced in safe mode, as no cards are displayed.
Flickering appeared with Firefox, Google Chrome and also within latest HA Android Companion app.
Slider button on the right browser side also blinks.
If the dashboard displays cards in the bottom part, browser due to flickering issue moves to the upper dashboard side, where the right slider also blinks.
As was discovered, issue disappears when entity-filter card is removed from the dashboard or dashboard in edit mode.
The problem is very annoying; please resolve it. The uses of the card-mod card are endless, and it would be a pitty to abandon it.
"Please review the detailed issue description and dashboard card codes (link below), where it was stated from the frontend developer that the problem is caused by card-mod not being updated to follow the latest HA frontend releases."
home-assistant/frontend#22084
By putting an X in the boxes ([]) below, I indicate that I:
The text was updated successfully, but these errors were encountered: