How to cycle through background images in esphome?

Configuration Frontend
,
1

I have a number of background images for my project. I want to display a different background image every hour or so.

I’ve got it working with the yaml below but the way i’m doing it seems very clunky (using a global variable to store the current image number) so would appreciate any advice to simplify the code :slight_smile:

Ideally I’d like to store however many images on an SD card and cycle through them regardless of the number and the file names but I suspect this might be a step too far…

image:
  - file: "eli.jpg"
    id: eli
    type: rgb565
  - file: "lake.jpg"
    id: lake
    type: rgb565
  - file: "bull.jpg"
    id: bull
    type: rgb565
  - file: "zebra.jpg"
    id: zebra
    type: rgb565

### cycle background image ####
interval:
  - interval: 3600s
    then:
      - if:
          condition:
            lambda: return id(current_img) == 1;
          then:
            - lvgl.update:
                disp_bg_image: lake
            - globals.set:
                id: current_img
                value: "2"
            - delay: 3500s    
      - if:
          condition:
            lambda: return id(current_img) == 2;
          then:
            - lvgl.update:
                disp_bg_image: eli
            - globals.set:
                id: current_img
                value: "3"
            - delay: 3500s
      - if:
          condition:
            lambda: return id(current_img) == 3;
          then:
            - lvgl.update:
                disp_bg_image: bull
            - globals.set:
                id: current_img
                value: "4"
            - delay: 3500s
      - if:
          condition:
            lambda: return id(current_img) == 4;
          then:
            - lvgl.update:
                disp_bg_image: zebra
            - globals.set:
                id: current_img
                value: "1"
            - delay: 3500s
2

Where exactly in HA are you using your working code? I’m just curious because I’ve never seen a background image set in the way you’re doing it. I usually see it done as part of a theme or by using the raw configuration editor for a specific view like below.

views:
  - title: View 01
    path: view-01
    background: center / cover no-repeat url("/local/my_images/image_01.jpg") fixed

With that being said, I don’t know if the following method is less “clunky”, but it is an alternative way for you to accomplish what you’re trying to do.

Create an input_select like below.

input_select:
  my_backgrounds:
    name: My Backgrounds
    options:
      - /local/backgrounds/image1.jpg
      - /local/backgrounds/image2.jpg
      # And so on...

Then open the raw configuration editor and insert a template like below.

views:
  - title: View 01
    background: {{ states('input_select.my_backgrounds') }}
    cards:
    # Your frontend cards...

Then create an automation like below.

automation:
  - alias: Random Background
    trigger:
      - platform: time_pattern
        minutes: "/15"  # Change every 15 minutes
    action:
      - service: input_select.select_option
        target:
          entity_id: input_select.my_backgrounds
        data:
          option: >
            {{ states('input_select.my_backgrounds') | random }}

Like this you could add a bunch of background images like you want and you would only have to add their name to the input_select variable for them to be included. If you want to change the interval between changes it could easily be done in the automation. FYI, I haven’t tried this but I don’t see why it wouldn’t work. Let me know…

3

Thanks for your reply - I don’t have HA. I am using a Guition ESP32-S3-4848S040 with esphome as a standalone device.

4

I can’t help you with that.