LVGL - screensaver page issues

ESPHome
1

Ive got a bit of a programatical conundrum and dont quite know how to go about this - would appreciate anyones help

I have a screensaver page that is called on a 30s timeout of no touch of the screen.
I also have a script that changes the background image of multiple pages to a red entity should a temp sensor return an error value. This script is called whenever a sensor entity detects an error OR whenever there is a state change of a thermostat.

This all works perfectly - as long as there is no navigation between screens.

My issue is that

whenever the screensaver page is called show_page: screensaver from no activity, it obviously changes the image to the default display_off image (which is grey) when the image may be displaying a display_error image (which is red)

The same issue occurs when the screensaver is cancelled and switches back to page1.

Unfortunately the image widget doesnt support a src: null or src: "" to allow the script to change the image. Label widgets do allow “” (which I also change in the same script, I just redacted it for clarity)

So, how do I change the image entity without the use of a src: “” when switching between two pages???
(or is this a good idea for an improvement of the image widget)

  pages:
    - id: page1
      skip: false
      pad_all: 0
      widgets:
        - image:
            id: page1_background
            src: display_off

    - id: screensaver
      skip: false
      bg_opa: cover
      pad_all: 0
      widgets:
        - image:
            id: ss_background
            src: display_off #grey

The script looks like this:

script:
  - id: update_background_text_state
    mode: restart
    then:
      - if:
          condition:
            # Probe ERROR, Thermostat is OFF
            and:
              - binary_sensor.is_off: ds18_state
              - lambda: |-
                  return id(controller).action == climate::CLIMATE_ACTION_OFF;
          then:
            - lvgl.image.update:
                id: [ page1_background, ss_background ]
                src: display_error #red
                hidden: false
2

the only basic solution I can come up with is:

  pages:
    - id: page1
      skip: false
      pad_all: 0
      widgets:
        - image:
            id: page1_background
            src: display_off
        - image:
            id: page1_error_background
            src: display_error

    - id: screensaver
      skip: false
      bg_opa: cover
      pad_all: 0
      widgets:
        - image:
            id: ss_background
            src: display_off
        - image:
            id: ss_error_background
            src: display_error

script

script:
  - id: update_background_text_state
    mode: restart
    then:
      - if:
          condition:
            # Probe ERROR, Thermostat is OFF
            and:
              - binary_sensor.is_off: ds18_state
              - lambda: |-
                  return id(controller).action == climate::CLIMATE_ACTION_OFF;
          then:
            - lvgl.image.update:
                id: [ page1_background, ss_background ]
                 hidden: true
            - lvgl.image.update:
                id: [ page1_error_background, ss_error_background ]
                 hidden: false
3

What exactly do you mean by “change the image entity” if you don’t mean “change the image src”? Other than common widget flags like hidden, there is nothing else to change.

I suspect all you need is:

          then:
            - lvgl.image.update:
                id: [ page1_background, ss_background ]
                src: display_error #red
          else:
            - lvgl.image.update:
                id: [ page1_background, ss_background ]
                src: display_off
1 Like