Cards: sections reloading/refreshing causing flickering #283

systanford · 2023-10-29T21:33:51Z

Which version of Room Card?
1.08.02

Describe the bug
When using Firefiox, Cards listed under cards: repeatedly reload/refresh causing a flickering effect.
experiencing issue with weather cards, media control, markdown cards,

To Reproduce
Load a page with Room Card featuring a card: element

Expected behavior
cards should be static.

Screenshots

Desktop (please complete the following information):

OS: windows 11
Browser: Firefox
Version: 118.0.2 (64-bit)

Smartphone (please complete the following information):
unaffected as far as I can tell

Additional context
cant be 100% sure, but think it started after latest HA update

marcokreeft87 · 2023-10-29T21:36:15Z

Can you share your yaml?

elninosi · 2023-10-29T21:38:16Z

Can confirm same observation on Android 14.

…

On Sun, Oct 29, 2023, 22:34 systanford ***@***.***> wrote: *Which version of Room Card?* 1.08.02 *Describe the bug* When using Firefiox, Cards listed under cards: repeatedly reload/refresh causing a flickering effect. experiencing issue with weather cards, media control, markdown cards, *To Reproduce* Load a page with Room Card featuring a card: element *Expected behavior* cards should be static. *Screenshots* *Desktop (please complete the following information):* - OS: windows 11 - Browser: Firefox - Version: 118.0.2 (64-bit) *Smartphone (please complete the following information):* unaffected as far as I can tell *Additional context* cant be 100% sure, but think it started after latest HA update — Reply to this email directly, view it on GitHub <#283>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACURVVAJIBPHQ45Q4F5IHGTYB24TVAVCNFSM6AAAAAA6VDTURWVHI2DSMVQWIX3LMV43ASLTON2WKOZRHE3DOMJWGI4DCNY> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

systanford · 2023-10-29T22:10:49Z

Can you share your yaml?
Difficult without Doxxing myself

marcokreeft87 · 2023-10-30T04:45:55Z

I can't help without

systanford · 2023-10-30T14:55:00Z

anyway I can send privately?

marcokreeft87 · 2023-10-30T15:07:28Z

Rather not. But you can mask your sensitive data in the yaml

marcokreeft87 · 2023-10-30T17:13:50Z

Haha that's a lot of yaml. Can you limit it to the dashboard that flickers? Or are they all flickering?

systanford · 2023-10-30T17:43:20Z

you asked and I provided haha

Thats just one dashboard

All cards that use 'cards:' flicker
this is an example of one

type: custom:room-card
title: Weather
content_alignment: center
entity: weather.met_office_harrogate_3_hourly
show_icon: true
state_color: true
show_state: true
tap_action:
  action: toggle
double_tap_action:
  action: more-info
hold_action:
  action: more-info
info_entities: null
entities:
  - entity: input_boolean.weather_hourly_menu_toggle
    name: Hourly
    state_color: true
    show_state: false
    tap_action:
      action: toggle
  - entity: input_boolean.weather_daily_menu_toggle
    name: Daily
    state_color: true
    show_state: false
    tap_action:
      action: toggle
cards:
  - type: weather-forecast
    style: |
      ha-card {
        border: 0px;
        background: none;
        box-shadow: none;
        }
    entity: weather.met_office_xxxxx_3_hourly
    name: Hourly
    hide_if:
      conditions:
        - condition: equals
          entity: input_boolean.weather_hourly_menu_toggle
          value: 'off'
    show_current: true
    show_forecast: true
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.met_office_xxxxx_daily
    hide_if:
      conditions:
        - condition: equals
          entity: input_boolean.weather_daily_menu_toggle
          value: 'off'
    name: Daily
    forecast_type: legacy
  - type: markdown
    hide_if:
      conditions:
        - condition: equals
          entity: input_boolean.xxxxx_trip
          value: 'off'
    style: |
      ha-card {
        border: 0px;
        background: none;
        box-shadow: none;
        }
    content: >
      The Forecast for **xxxxx** is {{
      states('weather.met_office_xxxxx_3_hourly') 

      | replace("pouring", "**Heavy Rain**") 

      | replace("rainy", "**Raining**") 

      | replace("fog", "**Foggy**") 

      | replace("cloudy", "**Cloudy**") 

      | replace("clear-night", "a **Clear Night**") 

      | replace("partlycloudy", "Partly Cloudy") }} with a "real feel" of **{{
      states('sensor.met_office_xxxxx_feels_like_temperature_3_hourly',
      with_unit=True) }}**.


      {% set feels_like_temp =
      states('sensor.met_office_xxxxx_feels_like_temperature_3_hourly') |
      float %}

      {% set weather_condition = states('weather.met_office_xxxxx_3_hourly')
      %}


      {% if feels_like_temp < 8 %}
        It's chilly, best take a coat! 
      {% endif %}


      {% if weather_condition == "rainy" %}
        {% if feels_like_temp < 8 %}
        Maybe a brolly too!
        {% else %}
        Take a brolly!
        {% endif %}
      {% endif %}


      {% if weather_condition == "sunny" %}
        {% if feels_like_temp > 16 %}
          It's a warm and sunny day!
        {% endif %}
      {% endif %}


      {% if weather_condition == "snowy" %}
        {% if feels_like_temp < 1 %}
         Be prepared for snow and icy conditions!
        {% endif %}
      {% endif %}


      {% if weather_condition == "windy" %}
        It's windy out there! Drive Safe!
      {% endif %}


      ETA: {{ states('sensor.drive_xxxxx_lane') | int // 60 }}h {{
      states('sensor.drive_xxxxx_lane') | int % 60 }}m, Driving from your
      location.
  - type: markdown
    hide_if:
      conditions:
        - condition: equals
          entity: input_boolean.xxxxx_trip
          value: 'on'
    style: |
      ha-card {
        border: 0px;
        background: none;
        box-shadow: none;
        }
    content: >
      In **xxxxx** it's likely to be {{
      states('weather.met_office_xxxxx_3_hourly') 

      | replace("pouring", "**Raining Heavily**") 

      | replace("rainy", "**Raining**") 

      | replace("fog", "**Foggy**") 

      | replace("cloudy", "**Cloudy**") 

      | replace("clear-night", "a **Clear Night**") 

      | replace("partlycloudy", "Partly Cloudy") }} with a "real feel" of **{{
      states('sensor.met_office_xxxxx_feels_like_temperature_3_hourly',
      with_unit=True) | join}}**.


      {% set feels_like_temp =
      states('sensor.met_office_xxxxx_feels_like_temperature_3_hourly') |
      float %}

      {% set weather_condition = states('weather.met_office_xxxxx_3_hourly')
      %}


      {% if feels_like_temp < 8 %}
        It's chilly, layer up! 
      {% endif %}


      {% if weather_condition == "rainy" %}
        {% if feels_like_temp < 8 %}
        Take a brolly too!
        {% else %}
        Take a brolly!
        {% endif %}
      {% endif %}


      {% if weather_condition == "sunny" %}
        {% if feels_like_temp > 16 %}
          Warm and sunny today!
        {% endif %}
      {% endif %}


      {% if weather_condition == "snowy" %}
        {% if feels_like_temp < 1 %}
        Be prepared for snow and icy conditions - Wrap Up!
        {% endif %}
      {% endif %}


      {% if weather_condition == "windy" %}
        It's windy out there! Drive Safe!
      {% endif %}


      {% if weather_condition == "pouring" %}
        100% a Brolly Day
      {% endif %}

marcokreeft87 · 2023-10-30T17:45:35Z

Ah ok. I have to admit, this is the most complex use of my room card. Could be that you ask too much of it and the companion app/browser struggles.

Other than that, if your info_entities is null, it's better to remove them from the config. Try to start every entity, info_entity and card with the entity property as high as possible in the declaration.

I'm afraid I can't help you with this other than give you tips. It could be the things I've mentioned above, but it could also be one of the entities that's on the cards.

Try and rebuild one of the flickering Dashboards step by step and try to find out when it starts flickering

systanford · 2023-10-30T18:05:36Z

It's happening with clean/new dashboard, with a basic set up as below.

The problem doesnt occur in the companion app.
It also wasn't an issue before the last HA update

type: custom:room-card
title: Media
entity: null
icon: mdi:multimedia
show_icon: true
state_color: true
show_state: false
tap_action:
  action: toggle
hold_action:
  action: more-info
cards:
  - type: media-control
    entity: media_player.living_room_tv

marcokreeft87 · 2023-10-30T18:07:00Z

Does it flicker when you remove 'entity: null' ?

systanford · 2023-10-30T18:09:34Z

Unfortunately yes

marcokreeft87 · 2023-10-30T18:10:30Z

I know that every mediaplayer type card refreshes a lot.

I see I've got the same issue now I'm playing media and the media player card pops up.

Only the card part flickers right?

marcokreeft87 · 2023-10-30T18:16:41Z

Hmm weird, I see the flickering in the browser on my phone, but not on my laptop.

systanford · 2023-10-30T18:17:27Z

Yeah, just the card part,
It also happens with markdown cards, iframes and sometimes, but not always weather cards.

Props for the room-card though.
Until this issue arose after the last HA update, it had zero issues putting up with the torture I put it through 😁

marcokreeft87 · 2023-10-30T18:20:03Z

Yeah, just the card part, It also happens with markdown cards, iframes and sometimes, but not always weather cards.

Props for the card though. Until this issue arose after the last HA update, it had zero issues putting up with the torture I put it through 😁

Haha good to hear that! Don't think its the card tbh. I've tested it on my work laptop too just now, and there it also doesnt flicker. But it does on my phone. Super weird.

I've tried different resolutions but that doesnt matter. Let me check what the last HA update changed

systanford · 2023-10-30T18:20:55Z

I'm also experiencing the issue on safari and firefox on my iPhone, but not the iOS companion app.

Just tested for certainty sake, the aforementioned cards don't flicker outside of room-card for me.

marcokreeft87 · 2023-10-30T18:26:27Z

I'm also experiencing the issue on safari and firefox on my iPhone, but not the iOS companion app.

Just tested for certainty sake, the aforementioned cards don't flicker outside of room-card for me.

That that don't flicker outside the card is expected, room-card is just another layer between if they are in the room-card.
But I see the problem, you are using an iPhone ;-)

Do you have a laptop or a tablet? Can you test with that?

systanford · 2023-10-30T18:27:52Z

I'm in the design world... I'm deep in the ecosystem 🤣

already on it... bare with me

systanford · 2023-10-30T18:37:14Z

OK, so...
The only way I'm not experiencing flickering, its the iOS HA Companion App.

The following all experience the issue

iPhone

Safari
Firefox

PC, Windows 11,

Firefox

Macbook Pro,

Firefox
Safari
HA App

tylerpieper · 2023-10-31T17:23:55Z

I think I'm experiencing the same issue with the Android companion app as well. The custom:collapsable-cards entry keeps resetting to the collapsed position due to the media player cards refreshing. Not sure if it's something to do with room-card specifically though.

type: custom:room-card
title: Living Room
entity: light.living_room_main_lights
show_icon: true
icon: mdi:sofa
state_color: false
info_entities:
  - entity: binary_sensor.g3_instant_motion
    sohw_name: false
    show_icon: true
  - entity: sensor.ths004_temperature
rows:
  - entities:
      - entity: light.living_room_main_lights
        name: Light
      - entity: switch.bubbles
        show_icon: true
        icon: mdi:chart-bubble
      - entity: media_player.do_not_use_2
        name: TV
        tap_action: toggle
  - entities:
      - entity: media_player.living_room_tv
    hide_if:
      conditions:
        - condition: not_equals
          entity: media_player.do_not_use_2
          value: 'on'
cards:
  - type: custom:mini-media-player
    entity: media_player.do_not_use_2
    name: TV (HDMI-1)
    toggle_power: false
    group: true
    hide:
      volume: true
      play_pause: true
      prev: true
      next: true
      info: true
    source: full
    volume_stateless: false
    artwork: none
    hide_if:
      conditions:
        - condition: not_equals
          entity: media_player.do_not_use_2
          value: 'on'
  - type: custom:mini-media-player
    entity: media_player.living_room
    sound_mode: full
    source: full
    artwork: none
    info: scroll
    volume_step: '5'
    name: Audio Reciever
    group: true
    volume_stateless: true
    hide:
      play_pause: true
      volume_level: false
    hide_if:
      conditions:
        - condition: not_equals
          entity: media_player.do_not_use_2
          value: 'on'
  - type: custom:collapsable-cards
    title_card:
      type: custom:mini-media-player
      group: true
      entity: media_player.living_room_tv
      hide:
        volume: true
        next: true
        prev: true
        play_pause: true
      info: none
      sound_mode: icon
    style: |
      ha-card, ha-card button:focus {
      border: none
      }
    cards:
      - type: custom:android-tv-card
        media_player_id: media_player.living_room_tv
        remote_id: remote.living_room_tv
        rows:
          - - back
            - home
            - power
          - - null
          - - - volume_up
              - null
              - volume_down
            - - navigation_buttons
          - - null
          - - rewind
            - play_pause
            - fast_forward
        touchpad_height: 300px
        alt_volume_icons: true
    hide_if:
      conditions:
        - condition: not_equals
          entity: media_player.do_not_use_2
          value: 'on'

efaden · 2023-11-03T15:38:25Z

Can confirm I started experiencing this behavior also.

chrispatin · 2023-11-04T02:03:01Z

Using Firefox on a PC, and Android Companion app I experienced the same behavior with the custom collapsible card which keeps on collapsing. I do not have any media player, just entity cards with sensors.

I reverted to Room Card 1.08.01 and the issue stopped.

efaden · 2023-11-07T17:06:13Z

I tried reverting to 1.08.01.... No good for me.

Shows what it is doing:

Screen.Recording.2023-11-07.at.12.02.08.PM.mov

And this is the code.

              - type: custom:room-card
                title: Sound Machines
                entities: []
                entity: switch.sound_machines
                show_icon: false
                tap_action: !include ui/popups/sound_machines.yaml
                style:
                  .: |
                    ha-card {
                      background: var(--material-secondary-background-color) !important;
                      box-shadow: none !important;
                    }
                    .card-header {padding-top: 0px;}
                    .entities-info-row {
                      padding: 50px;
                      right: 50px;
                      top: 50px;
                    }
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        content: >
                          {% set soundMachines = expand('switch.sound_machines') %} 
                          ({{ soundMachines | selectattr('state','eq','on') | list | count }}) Sound Machines On
                        icon: emf:sound-machine
                        icon_color: >
                          {% set soundMachines = expand('switch.sound_machines') %} 
                          {% if (soundMachines | selectattr('state','eq','on') | list | count > 0) %}
                            orange
                          {% else %}
                            gray
                          {% endif %}
                        tap_action:
                          action: more-info
                        entity: switch.sound_machines
                    alignment: end
                    card_mod:
                      style:
                        .: |
                          ha-card {
                            --chip-box-shadow: none;
                            --chip-spacing: 0;
                            --chip-border-width: 0;
                            --chip-background: none;
                            background: var(--material-background-color) !important;
                            border-radius: 0px 0px 12px 12px !important;

marcokreeft87 · 2023-11-07T17:08:53Z

And without the mushroom card?

efaden · 2023-11-07T17:14:42Z

Interestingly no... seems fine. But i have mushroom cards at the top of the page that don't seem to be doing it. So there is something with the mushroom cards within the room card.

marcokreeft87 · 2023-11-07T17:15:35Z

But are the mushroom cards on top in a room card?

But why are you using it like this? XD

efaden · 2023-11-07T17:15:57Z

No. So it only seems to happen to the mushroom chips that are within the room card.

efaden · 2023-11-07T17:19:28Z

But are the mushroom cards on top in a room card?

But why are you using it like this? XD

Because there was something about the chips that I liked... I just can't remember what. Some flexibility that didn't exist in the straight room card.

marcokreeft87 · 2023-11-07T17:46:36Z

But are the mushroom cards on top in a room card?

But why are you using it like this? XD

Because there was something about the chips that I liked... I just can't remember what. Some flexibility that didn't exist in the straight room card.

What I see in the video is possible in the room card

salvisbh · 2023-11-12T18:18:22Z

I can reproduce the flickering of the room card in various scenarios. It is not related to the mushroom cards, but occurs as soon as I use templating in my auto-entities. The following configuration flickers:

type: custom:room-card
title: Küche
show_icon: false
entities:
  - entity: light.kuechentisch
    name: Küchentisch
    tap_action:
      action: toggle
cards:
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - entity_id: scene.kuche*
          options:
            type: custom:card-templater
            card:
              type: button
              show_icon: false
              entity: this.entity_id
              name_template: |
                {{ state_attr("this.entity_id", "name") }}
      exclude: []
    sort:
      method: none

The flickering does not occur with version 1.08.00 of the room-card.
If I use auto-entities including templating outside the room-card, I have no problems. The refresh problem only occurs when using it as a card within the room-card.

systanford · 2023-11-13T07:03:47Z

Just to confirm, having re-read my previous responses, reverting to 1.08.00 of room-card has stopped the issue for me.

Re-downloading versions 1.08.01 or 1.08.02 of room-card has instances repeatedly flicker/refresh again.

doctorlunch · 2023-11-30T10:10:51Z

A this late stage, I don't know if it helps but I had the same problem with media refreshing every five seconds or so when using media control options in the card. As soon as I removed the media_player command in the card, the problem was resolved.

noobey · 2024-01-17T19:17:43Z

I'm a new user of room-card, and downloaded 1.08.02 today.

I have the same flickering issue whenever I embed any form of media card into room-card.
Even in an empty card with nothing else in it, it's a consistent issue for me.

Here's an example of it happening side by side with the same card not embedded on the left:
https://imgur.com/a/mrs0D9n

Here's my yaml:

type: custom:room-card
title: Cinema Room
entity: camera.cinema_room_camera_4
show_icon: true
tap_action: null
rows:
  - entities:
      - entity: switch.nspanellivingroom_relay_2
        name: Uplights
        icon: mdi:wall-sconce-flat-variant
        show_icon: true
        state_color: true
        tap_action:
          action: toggle
      - entity: switch.nspanellivingroom_relay_1
        name: Downlight
        icon: mdi:wall-sconce-flat
        show_icon: true
        state_color: true
        tap_action:
          action: toggle
  - entities:
      - entity: select.cinema_room_harmony_hub_activities
        icon:
          state_on: mdi:gate
          state_off: mdi:gate-open
        show_icon: true
        state_color: true
        name: Cinema Activity
        tap_action:
          action: select
      - entity: switch.sl_living_room_wall_socket_2
        name: Sonos
        show_icon: true
        state_color: true
        icon: mdi:power-socket-uk
        tap_action:
          action: toggle
cards:
  - type: custom:mini-media-player
    entity: media_player.sonos_playroom
    artwork: material
    source: full
    sound_mode: full
    info: scroll
    show_states:
      - playing
  - type: custom:mini-media-player
    entity: media_player.atv_cinema_room
    artwork: material
    source: full
    sound_mode: full
    info: scroll
    show_states:
      - playing
info_entities:
  - entity: binary_sensor.everything_presence_one_dacd10_pir
    show_icon: true
    state_color: true
  - entity: sensor.living_room_temperature
    state_color: true

Any help would be appreciated.

frankvHoof93 · 2024-02-03T16:41:49Z

V 1.08.02
Can confirm this is happening for me as well.
If I look at the html, I can see that everything in "Cards" is recreated from scratch (once per minute or so?), which messes up the CSS for me (causing a short time-window in which the room-card grows, then shrinks again)

This only happens with cards, not with entities or entity-info.

Video: https://gyazo.com/69a96358431fb6df6c3b2d754cf2a477
Yaml for specific room-card: https://pastebin.com/M2h1LngK

Edit: Looking at your render-method, I see that you 'createCardElement' for every render.
Shouldn't you be caching those cards?

${this.config.cards?.map((card) => this.createCardElement(card, this._hass))}

marcokreeft87 · 2024-02-03T16:47:07Z

V 1.08.02
Can confirm this is happening for me as well.
If I look at the html, I can see that everything in "Cards" is recreated from scratch (once per minute or so?), which messes up the CSS for me (causing a short time-window in which the room-card grows, then shrinks again)

This only happens with cards, not with entities or entity-info.

Video: https://gyazo.com/69a96358431fb6df6c3b2d754cf2a477
Yaml for specific room-card: https://pastebin.com/M2h1LngK

I see what buttons and stuff you have in the room card, but wouldn't it be better to use another card for this case? The room card isn't designed for this. You are using it more like a button card now

frankvHoof93 · 2024-02-03T16:48:29Z

V 1.08.02
Can confirm this is happening for me as well.
If I look at the html, I can see that everything in "Cards" is recreated from scratch (once per minute or so?), which messes up the CSS for me (causing a short time-window in which the room-card grows, then shrinks again)
This only happens with cards, not with entities or entity-info.
Video: https://gyazo.com/69a96358431fb6df6c3b2d754cf2a477
Yaml for specific room-card: https://pastebin.com/M2h1LngK

I see what buttons and stuff you have in the room card, but wouldn't it be better to use another card for this case? The room card isn't designed for this. You are using it more like a button card now

I'm using 4 different room-cards, with this being the only one enveloping other cards (since I needed somewhere to put my blinds).

frankvHoof93 · 2024-02-03T17:09:01Z

Can confirm this is NOT happening in 1.07.30.
Likely cause: contained cards are re-created from scratch upon an update, instead of the existing cards being updated/re-rendered.

(it not reproing in 1.07.30 might be a red-herring based on states not being tracked/forwarded, and thus an update never occurring?)

Edit: Repro's in 1.07.30 whenever layout changes (e.g. when moving from portrait to landscape) or when switching from/to view.

xbmcnut · 2024-03-09T03:31:36Z

I've rolled back to 1.07.30 today and can confirm it's still doing it.

systanford added the bug Something isn't working label Oct 29, 2023

This comment has been minimized.

Sign in to view

BeardedTinker mentioned this issue Feb 17, 2024

Media Control device Apple TV) refresh issue BeardedTinker/Home-Assistant_Config#112

Closed

Cards: sections reloading/refreshing causing flickering #283

Cards: sections reloading/refreshing causing flickering #283

Comments

systanford commented Oct 29, 2023

Screenshots

marcokreeft87 commented Oct 29, 2023

elninosi commented Oct 29, 2023 via email

systanford commented Oct 29, 2023

marcokreeft87 commented Oct 30, 2023

systanford commented Oct 30, 2023

marcokreeft87 commented Oct 30, 2023

This comment has been minimized.

marcokreeft87 commented Oct 30, 2023

systanford commented Oct 30, 2023

marcokreeft87 commented Oct 30, 2023 • edited Loading

systanford commented Oct 30, 2023 • edited Loading

marcokreeft87 commented Oct 30, 2023

systanford commented Oct 30, 2023

marcokreeft87 commented Oct 30, 2023

marcokreeft87 commented Oct 30, 2023

systanford commented Oct 30, 2023 • edited Loading

marcokreeft87 commented Oct 30, 2023

systanford commented Oct 30, 2023 • edited Loading

marcokreeft87 commented Oct 30, 2023

systanford commented Oct 30, 2023

systanford commented Oct 30, 2023

tylerpieper commented Oct 31, 2023

efaden commented Nov 3, 2023

chrispatin commented Nov 4, 2023 • edited Loading

efaden commented Nov 7, 2023

marcokreeft87 commented Nov 7, 2023

efaden commented Nov 7, 2023

marcokreeft87 commented Nov 7, 2023 • edited Loading

efaden commented Nov 7, 2023

efaden commented Nov 7, 2023

marcokreeft87 commented Nov 7, 2023

salvisbh commented Nov 12, 2023

systanford commented Nov 13, 2023

doctorlunch commented Nov 30, 2023

noobey commented Jan 17, 2024

frankvHoof93 commented Feb 3, 2024 • edited Loading

marcokreeft87 commented Feb 3, 2024

frankvHoof93 commented Feb 3, 2024

frankvHoof93 commented Feb 3, 2024 • edited Loading

xbmcnut commented Mar 9, 2024

marcokreeft87 commented Oct 30, 2023 •

edited

Loading

systanford commented Oct 30, 2023 •

edited

Loading

systanford commented Oct 30, 2023 •

edited

Loading

systanford commented Oct 30, 2023 •

edited

Loading

chrispatin commented Nov 4, 2023 •

edited

Loading

marcokreeft87 commented Nov 7, 2023 •

edited

Loading

frankvHoof93 commented Feb 3, 2024 •

edited

Loading

frankvHoof93 commented Feb 3, 2024 •

edited

Loading