Wallpanel is choppy while screensaver is running

Hi,

I've converted from an old tablet with Fully Kiosk and Fotoo Android app to a raspberrypi 4 B, 4GB RAM, 120GB SSD (via USB). Fresh install of raspberrypi, latest version of HA is running in a docker container. Almost only wallpanel installed, main purpose of this device is to show my HA dashboard if someone is walking through the corridor and showing all the day the latest holiday pictures. The device is working as expected (almost ... :) ), i't switching to the dashboard if someone come close by, it shows the latest fotos with Ken Burns effect but it seems to be a bit choppy. The chromium browser runs in an xinit Session as described here (https://blog.developbyter.com/raspberry-pi-os-lite-mit-kioskmodus-einrichten/).

Is the rpi 4 hardware maybe not capable to handle that workload? top shows an avg. load 2 and CPU consumption of about 960MB. Is there anything w/ regards to GPU acceleration that could be improved?

My fotos are stored locally in the meantime but that didn't improve the situation. Here is my config:

title: Wallpanel
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 10
  display_time: 15
  hide_toolbar_action_icons: true
  image_fit: cover
  image_animation_ken_burns: true
  image_animation_ken_burns_zoom: 1.1
  show_progress_bar: false
  show_image_info: true
  fetch_address_data: true
  image_url: /media
  screensaver_stop_navigation_path: /dashboard-wallpanel/0
  screensaver_entity: input_boolean.main_tablet_screensaver
  cards:
    - type: custom:digital-clock
      locale: de
      dateFormat: DDDD
      timeFormat: HH:mm
      card_mod:
        style: |
          ha-card {
           text-align: right!important;
           font-weight: 500!important;
           font-size: 20px;
           padding: 8px 0px;
           background: transparent;
           border: 0px;
           color: rgb(255, 255, 255);
           position: absolute;
           right: 80px;
           bottom: 70px;
          }
    - type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: Restmüll Tonne
          secondary: '{{ states("sensor.main_abfall_restmull_tonne_txt")}}'
          icon: mdi:delete-variant
          icon_color: black
          badge_color: >-
            {% if states('sensor.main_abfall_restmull_tonne_days')|float(0) <=
            14  %}
               white
            {% endif %}
          tap_action:
            action: more-info
          hold_action:
            action: toggle
          fill_container: false
          multiline_secondary: false
          card_mod:
            style: |
              :host {
                --mush-card-primary-font-size: 20px;
                --mush-card-secondary-font-size: 18px;
                --mush-card-primary-font-weight: bold;
                --mush-card-secondary-font-weight: thin;
                --mush-icon-size: 44px;
                --mush-badge-size: 18px;
                --mush-spacing: 12px;
               #background: transparent;
               background-color: {{ 'rgba(1, 1, 1, .3)' }};
               opacity: 0.8;
               width:300px;
               color: rgb(255, 255, 255);
               position: absolute;
               left: 10px;
               bottom: 310px;
              }
        - type: custom:mushroom-template-card
          primary: Bio-Tonne
          secondary: '{{ states("sensor.main_abfall_bio_tonne_txt")}}'
          icon: mdi:trash-can-outline
          icon_color: brown
          badge_color: |-
            {% if states('sensor.main_abfall_bio_tonne_days')|float(0) <= 14  %}
               white
            {% endif %}
          tap_action:
            action: more-info
          hold_action:
            action: toggle
          fill_container: false
          multiline_secondary: false
          card_mod:
            style: |
              :host {
                --mush-card-primary-font-size: 20px;
                --mush-card-secondary-font-size: 18px;
                --mush-card-primary-font-weight: bold;
                --mush-card-secondary-font-weight: thin;
                --mush-icon-size: 44px;
                --mush-badge-size: 18px;
                --mush-spacing: 12px;
               #background: transparent;
               background-color: {{ 'rgba(1, 1, 1, .3)' }};
               opacity: 0.8;
               width:300px;
               color: rgb(255, 255, 255);
               position: absolute;
               left: 10px;
               bottom: 230px;
              }
        - type: custom:mushroom-template-card
          primary: Papier-Tonne
          secondary: '{{ states("sensor.main_abfall_papier_tonne_txt")}}'
          icon: mdi:delete-empty
          icon_color: blue
          badge_color: >-
            {% if states('sensor.main_abfall_papier_tonne_days')|float(0) <= 1 
            %}
               white
            {% endif %}
          tap_action:
            action: more-info
          hold_action:
            action: toggle
          fill_container: false
          multiline_secondary: false
          card_mod:
            style: |
              :host {
                --mush-card-primary-font-size: 20px;
                --mush-card-secondary-font-size: 18px;
                --mush-card-primary-font-weight: bold;
                --mush-card-secondary-font-weight: thin;
                --mush-icon-size: 44px;
                --mush-badge-size: 18px;
                --mush-spacing: 12px;
               #background: transparent;
               background-color: {{ 'rgba(1, 1, 1, .3)' }};
               opacity: 0.8;
               width:300px;
               color: rgb(255, 255, 255);
               position: absolute;
               left: 10px;
               bottom: 150px;
              }
        - type: custom:mushroom-template-card
          primary: Gelbe-Tonne
          secondary: '{{ states("sensor.main_abfall_gelbe_tonne_txt")}}'
          icon: mdi:sack
          icon_color: yellow
          badge_color: >-
            {% if states('sensor.main_abfall_gelbe_tonne_days')|float(0) <= 1 
            %}
               white
            {% endif %}
          tap_action:
            action: more-info
          hold_action:
            action: toggle
          fill_container: false
          multiline_secondary: false
          card_mod:
            style: |
              :host {
                --mush-card-primary-font-size: 20px;
                --mush-card-secondary-font-size: 18px;
                --mush-card-primary-font-weight: bold;
                --mush-card-secondary-font-weight: thin;
                --mush-icon-size: 44px;
                --mush-badge-size: 18px;
                --mush-spacing: 12px;
               #background: transparent;
               background-color: {{ 'rgba(1, 1, 1, .3)' }};
               opacity: 0.8;
               width:300px;
               color: rgb(255, 255, 255);
               position: absolute;
               left: 10px;
               bottom: 70px;
              }
  image_info_template: >-
    <span style="font-size: 1em; color: white; font-family: 'Roboto Noto',
    sans-serif;">
      ${DateTimeOriginal!options=day:2-digit!suffix=.}
      ${DateTimeOriginal!options=month:long}
      ${DateTimeOriginal!options=year:numeric}<br>${address.road!suffix=}
      ${address.house_number!suffix=}<br>${address.town|address.city!suffix=,}
      ${address.country}</span>
  style:
    wallpanel-screensaver-image-info:
      position: relative
      left: 15px
      top: 15px
      background: ''
      backdrop-filter: ''

Please let me know if there is anything I can test / give a try to improve the situation.

Thanks in advance, Sven

j-a-n / lovelace-wallpanel

Wallpanel is choppy while screensaver is running #223