XIAO 7.5" ePaper Panel - Home Assistant Dashboard

Products & Technology XIAO
1

I got a XIAO 7.5" ePaper Panel (early build) while it was on a flash sale from Seeed Studio. This is something you can make yourself, but I took the lazy route.

After playing with it for a little bit, I’ve got a nice battery powered eink display that shows a bunch of Home Assistant entities. I think it looks good and it replaces several of those LCD displays that come with temp probes.

When I first got it I thought I was going to have to build what’s displayed using YAML in ESPHome Builder, but then I read about the Puppet add-on and decided to give that a try instead. Much easier! You just have to create a dashboard in Home Assistant and get it to look right on the 800x480 B&W display. That was the hardest part; getting it to display nicely in B&W. After a bunch of card_mod changes, I got it to look pretty good. I’m still tweaking it, but I’m happy with what I have now.

The big unknown is battery life. They say it’ll last 3 months if you refresh every 6 hours. I’m refreshing every 30 mins, so I’m curious to see how long it last. The one draw back to this product is that there’s currently no way to see the battery status. From some reading, I’m pretty sure I can mod it to so battery status is available, but I’ll hold off on that for now. Hopefully the release version has battery status (it sounds like a fairly easy change).

20250630_1658502
20250630_16585021920×1434 525 KB

1 Like
2

Here’s the YAML for ESPHome:

esphome:
  name: kitchendisplay
  friendly_name: KitchenDisplay

esp32:
  board: esp32-c3-devkitm-1
  framework:
    type: arduino

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "YourKey"

ota:
  - platform: esphome
    password: "YourPassword"

globals:
  - id: wifi_status
    type: int
    restore_value: no
    initial_value: "0"
  - id: recorded_display_refresh
    type: int
    restore_value: yes
    initial_value: '0'    

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password
  on_connect:
    then:
      - lambda: |-
          id(wifi_status) = 1;
  on_disconnect:
    then:
      - lambda: |-
          id(wifi_status) = 0;
  ap:
    ssid: "Kitchendisplay Fallback Hotspot"
    password: "YourPassword"


captive_portal:

# Here is deep sleep part
deep_sleep:
  id: deep_sleep_1
  run_duration: 1min  # Device wake up and run 60s (enough to pull data and update)
  sleep_duration: 30min  # deep sleep for 30m

http_request:
  verify_ssl: false
  timeout: 10s
  watchdog_timeout: 15s

online_image:
  - id: dashboard_image
    format: PNG
    type: BINARY
    buffer_size: 30000
    url: http://192.168.1.101:10000/dashboard-robin/display?viewport=800x480&eink=2&invert #change this link to your screenshot link
    update_interval: 20s
    on_download_finished:
      - delay: 0ms
      - component.update: main_display

spi:
  clk_pin: GPIO8
  mosi_pin: GPIO10

display:
  - platform: waveshare_epaper
    id: main_display
    cs_pin: GPIO3
    dc_pin: GPIO5
    busy_pin: 
      number: GPIO4
      inverted: true
    reset_pin: GPIO2
    model: 7.50inv2
    update_interval: never
    lambda: |-
      it.image(0, 0, id(dashboard_image));

time:
  - platform: homeassistant
    id: homeassistant_time
          
sensor:
  - platform: wifi_signal # Reports the WiFi signal strength/RSSI in dB
    name: "WiFi Signal dB"
    id: wifi_signal_db
    update_interval: 120s
    entity_category: "diagnostic"

  - platform: copy # Reports the WiFi signal strength in %
    source_id: wifi_signal_db
    name: "WiFi Signal Percent"
    id: wifi_signal_percent
    filters:
      - lambda: return min(max(2 * (x + 100.0), 0.0), 100.0);
    unit_of_measurement: "Signal %"
    entity_category: "diagnostic"

  - platform: uptime
    name: Uptime

  - platform: internal_temperature
    name: "Internal Temperature"

  - platform: template
    name: "Display Last Update"
    device_class: timestamp
    entity_category: "diagnostic"
    id: display_last_update
    lambda: 'return id(homeassistant_time).now().timestamp;'

  - platform: template
    name: "Display Refresh Count"
    accuracy_decimals: 0
    unit_of_measurement: "Refreshes"
    state_class: "total_increasing"
    entity_category: "diagnostic"
    lambda: 'return id(recorded_display_refresh) += 1;'
    


# Battery read ADC
#  - platform: adc
#    pin: GPIO4
#    name: "A2 Voltage"
#    id: LIION
#    update_interval: never
#    attenuation: 2.5db
#    internal: true
#  - platform: template
#    name: "Battery Voltage"
#    id: bat_v
#    unit_of_measurement: 'V'
#    update_interval: never
#    accuracy_decimals: 2
#    icon: "mdi:battery"
#    lambda: |-
#      return (id(LIION).state * 4);
#  - platform: template
#    name: "Battery Percentage"
#    id: bat_percent
#    unit_of_measurement: '%'
#    update_interval: never
#    accuracy_decimals: 0
#    device_class: battery
#    lambda: |-
#      if(id(bat_v).state < 1)
#      {return 0;}
#      return ((id(bat_v).state-3) /1.2 * 100.00);

Here’s the YAML for the dashboard:

type: masonry
path: display
title: Display
cards:
  - type: vertical-stack
    cards:
      - show_current: true
        show_forecast: true
        type: weather-forecast
        entity: weather.kpajamis12
        forecast_type: daily
        secondary_info_attribute: humidity
        card_mod:
          style: |
            :host {
              --weather-icon-clear-night: url("/local/community/weather-card-pics/icons8-moon-and-stars-100.png");
              --weather-icon-cloudy: url("/local/community/weather-card-pics/icons8-cloud-100.png");
              --weather-icon-fog: url("/local/community/weather-card-pics/icons8-fog-100.png");
              --weather-icon-lightning: url("/local/community/weather-card-pics/icons8-cloud-lightning-100.png");
              --weather-icon-lightning-rainy: url("/local/community/weather-card-pics/icons8-stormy-weather-100.png");
              --weather-icon-partlycloudy: url("/local/community/weather-card-pics/icons8-partly-cloudy-day-100.png");
              --weather-icon-pouring: url("/local/community/weather-card-pics/icons8-torrential-rain-100.png");
              --weather-icon-rainy: url("/local/community/weather-card-pics/icons8-rain-100.png");
              --weather-icon-hail: url("/local/community/weather-card-pics/icons8-snow-storm-100.png");
              --weather-icon-snowy: url("/local/community/weather-card-pics/icons8-snow-100.png");
              --weather-icon-snowy-rainy: url("/local/community/weather-card-pics/icons8-snow-100.png");
              --weather-icon-sunny: url("/local/community/weather-card-pics/icons8-sun-100.png");
              --weather-icon-windy: url("/local/community/weather-card-pics/icons8-wind-100.png");
              --weather-icon-windy-variant: url("/local/community/weather-card-pics/icons8-wind-100.png");
              --weather-icon-exceptional: url("/local/community/weather-card-pics/icons8-rainbow-100.png");
            }  
            ha-card {
              border: 2px solid black;
              padding: 10px !important;
            }
            .name-state .name {
              color: black;
              #font-size: 2px;
            }
            .name-state .state {
              color: black;
              #font-size: 7px;
            }
            .temp-attribute .temp {
              color: black;
              font-size: 26px !important;
            }
            .temp-attribute .temp span {
              color: black;
              #font-size: 7px !important;
            }
            .temp-attribute .attribute {
              color: black;
              font-size: 16px;
            }
            .forecast .temp {
              color: black;
              font-size: 20px;
            }
            .forecast .templow {
              color: black;
              font-size: 14px;      
            }
            .forecast div {
              color: black;
            }
            ha-card div.forecast div.temp {
              font-size: 14pt;
            } 
      - type: horizontal-stack
        cards:
          - graph: none
            type: sensor
            detail: 2
            entity: sensor.home_thermostat_air_temperature
            name: Inside
            icon: mdi:home-thermometer
            hours_to_show: 12
            card_mod:
              style: |
                .header .icon {
                  color: black;
                }
                ha-card {
                  border: 2px solid black;
                  --secondary-text-color: black;  
                }         
          - graph: none
            type: sensor
            detail: 2
            name: Outside
            icon: mdi:sun-thermometer-outline
            hours_to_show: 12
            entity: sensor.acurite_5n1_a_3430_temperature
            card_mod:
              style: |
                .header .icon {
                  color: black;
                }  
                ha-card {
                  border: 2px solid black;
                  --secondary-text-color: black;
                }        
          - graph: none
            type: sensor
            detail: 2
            entity: sensor.aqualogic_pool_temperature
            name: Pool
            icon: mdi:pool-thermometer
            hours_to_show: 12
            card_mod:
              style: |
                .header .icon {
                  color: black;

                }
                ha-card {
                  border: 2px solid black;
                  --secondary-text-color: black;  
                }
      - type: horizontal-stack
        cards:
          - graph: none
            type: sensor
            detail: 2
            icon: ""
            hours_to_show: 12
            entity: sensor.acurite_5n1_a_3430_humidity
            name: Humidity
            card_mod:
              style: |
                .header .icon {
                  color: black;
                }
                ha-card {
                  border: 2px solid black;
                  --secondary-text-color: black;  
                }        
          - graph: none
            type: sensor
            detail: 2
            entity: sensor.topwindspeedhr
            name: Wind
            icon: mdi:weather-windy
            hours_to_show: 12
            card_mod:
              style: |
                .header .icon {
                  color: black;
                }
                ha-card {
                  border: 2px solid black;
                  --secondary-text-color: black;  
                }      
          - graph: none
            type: sensor
            detail: 2
            name: Rain
            icon: ""
            hours_to_show: 24
            entity: sensor.kpajamis12_precipitation_today
            card_mod:
              style: |
                .header .icon {
                  color: black;
                }
                ha-card {
                  border: 2px solid black;
                  --secondary-text-color: black;
                }             
  - type: vertical-stack
    cards:
      - entities:
          - entity: calendar.birthdays
            show_time: true
          - entity: calendar.philadelphia_phillies
            show_time: true
          - entity: calendar.carolina_panthers
            show_time: true
          - entity: calendar.holidays_in_united_states
            show_time: true
            split_multiday_events: false
          - entity: calendar.north_carolina_tar_heels_men_s_basketball
            show_time: true
          - entity: calendar.philadelphia_eagles
            show_time: true
          - entity: calendar.email_gmail_com
            show_time: true
        days_to_show: 5
        show_empty_days: true
        filter_duplicates: true
        title_color: ""
        accent_color: Black
        day_spacing: 4px
        event_spacing: 2px
        day_separator_width: 1px
        day_separator_color: var(--primary-text-color)
        today_indicator: dot
        today_indicator_color: var(--primary-text-color)
        event_font_size: 18px
        time_font_size: 14px
        time_color: var(--primary-text-color)
        show_location: false
        weather:
          position: none
          date:
            show_conditions: true
            show_high_temp: true
            show_low_temp: false
            icon_size: 14px
            font_size: 12px
            color: var(--primary-text-color)
          event:
            show_conditions: true
            show_temp: true
            icon_size: 14px
            font_size: 12px
            color: var(--primary-text-color)
          entity: weather.kpajamis12
        type: custom:calendar-card-pro
        height: 350px
        card_mod:
          style: |
            ha-card {
              border: 2px solid black;
            } 
      - type: heading
        icon: mdi:update
        heading: Last Update
        heading_style: subtitle
        badges:
          - type: entity
            show_state: true
            show_icon: false
            entity: sensor.date_time
            color: black
        card_mod:
          style: |
            ha-card .title p { 
              font-size: 14px; 
              padding: 0px !important;
            }   
badges:
  - type: custom:mod-card
    card:
      type: custom:mushroom-template-badge
      content: "{{states('cover.ratgdov25i_1bdf3a_door') | capitalize  }}"
      icon: |
        {% if is_state('cover.ratgdov25i_1bdf3a_door', 'closed') %}
          mdi:garage
        {% else %}
          mdi:garage-open
        {% endif %}
      color: grey
      entity: cover.ratgdov25i_1bdf3a_door
      label: L Garage
      tap_action:
        action: more-info
    card_mod:
      style:
        mushroom-template-badge:
          $: |
            .badge {
              --divider-color: black;
              --ha-card-border-width: 2px;
              --mdc-icon-size: 32px !important;
              .info {
                .label {
                  font-size: 12px;
                  --secondary-text-color: black;
                }
                .content {
                  font-size: 14px;
              }
            }        
        .: |
          ha-card {
            background: none;
            border: none;
          }
  - type: custom:mod-card
    card:
      type: custom:mushroom-template-badge
      content: "{{states('cover.ratgdov25i_1ba3c0_door') | capitalize  }}"
      icon: |
        {% if is_state('cover.ratgdov25i_1ba3c0_door', 'closed') %}
          mdi:garage
        {% else %}
          mdi:garage-open
        {% endif %}
      color: grey
      entity: cover.ratgdov25i_1ba3c0_door
      label: M Garage
      tap_action:
        action: more-info
    card_mod:
      style:
        mushroom-template-badge:
          $: |
            .badge {
              --divider-color: black;
              --ha-card-border-width: 2px;
              --mdc-icon-size: 32px !important;
              .info {
                .label {
                  font-size: 12px;
                  --secondary-text-color: black;
                }
                .content {
                  font-size: 14px;
              }
            }        
        .: |
          ha-card {
            background: none;
            border: none;
          }
  - type: custom:mod-card
    card:
      type: custom:mushroom-template-badge
      content: "{{states('cover.ratgdov25i_1ba3c8_door') | capitalize  }}"
      icon: |
        {% if is_state('cover.ratgdov25i_1ba3c8_door', 'closed') %}
          mdi:garage
        {% else %}
          mdi:garage-open
        {% endif %}
      color: grey
      entity: cover.ratgdov25i_1ba3c8_door
      label: R Garage
      tap_action:
        action: more-info
    card_mod:
      style:
        mushroom-template-badge:
          $: |
            .badge {
              --divider-color: black;
              --ha-card-border-width: 2px;
              --mdc-icon-size: 32px !important;
              .info {
                .label {
                  font-size: 12px;
                  --secondary-text-color: black;
                }
                .content {
                  font-size: 14px;
              }
            }        
        .: |
          ha-card {
            background: none;
            border: none;
          }
  - type: custom:mod-card
    card:
      type: custom:mushroom-template-badge
      content: "{{states('lock.side_door_lock') | capitalize  }}"
      icon: |
        {% if is_state('lock.side_door_lock', 'locked') %}
          mdi:lock
        {% else %}
            mdi:lock-open
        {% endif %}
      color: grey
      entity: lock.side_door_lock
      label: Garage Lock
      tap_action:
        action: more-info
    card_mod:
      style:
        mushroom-template-badge:
          $: |
            .badge {
              --divider-color: black;
              --ha-card-border-width: 2px;
              --mdc-icon-size: 24px !important;
              .info {
                .label {
                  font-size: 12px;
                  --secondary-text-color: black;
                }
                .content {
                  font-size: 14px;
              }
            }        
        .: |
          ha-card {
            background: none;
            border: none;
          }
  - type: custom:mod-card
    card:
      type: custom:mushroom-template-badge
      content: "{{states('input_select.washing_machine_status') }}"
      icon: |
        {% if is_state('input_select.washing_machine_status', 'Off') %}
            mdi:washing-machine-off
        {% elif is_state('input_select.washing_machine_status', 'Not Empty') %}
            mdi:washing-machine-alert
        {% else %}
            mdi:washing-machine
        {% endif %}
      color: grey
      entity: input_select.washing_machine_status
      label: Washer
      tap_action:
        action: more-info
    card_mod:
      style:
        mushroom-template-badge:
          $: |
            .badge {
              --divider-color: black;
              --ha-card-border-width: 2px;
              --mdc-icon-size: 24px !important;
              .info {
                .label {
                  font-size: 12px;
                  --secondary-text-color: black;
                }
                .content {
                  font-size: 14px;
              }
            }        
        .: |
          ha-card {
            background: none;
            border: none;
          }
  - type: custom:mod-card
    card:
      type: custom:mushroom-template-badge
      content: "{{states('input_select.dryer_status') }}"
      icon: |
        {% if is_state('input_select.dryer_status', 'Off') %}
            mdi:tumble-dryer-off
        {% elif is_state('input_select.dryer_status', 'Not Empty') %}
            mdi:tumble-dryer-alert
        {% else %}
            mdi:tumble-dryer
        {% endif %}
      color: grey
      entity: input_select.dryer_status
      label: Dryer
      tap_action:
        action: more-info
    card_mod:
      style:
        mushroom-template-badge:
          $: |
            .badge {
              --divider-color: black;
              --ha-card-border-width: 2px;
              --mdc-icon-size: 24px !important;
              .info {
                .label {
                  font-size: 12px;
                  --secondary-text-color: black;
                }
                .content {
                  font-size: 14px;
              }
            }        
        .: |
          ha-card {
            background: none;
            border: none;
          }

I also changed the icons in the weather card to black and white icons. The default ones work, but sometimes multiple colors blend. I got the icons from icons8.com

2 Likes
3

Hi there,

Well done!, Looks great! :fire:
We all agree on the battery monitoring thing, and there are a few mod posters so, that’s good. I don’t see My “pirates” on the Baseball schedule though :grin: they don’t want that heat yet! :sweat_smile: :crossed_fingers:

I’m hoping they do a color unit, that would be sweet, and PLEASE keep us posted on the battery consumption… :+1:

and Thanks for the contribution…

GL :slight_smile: PJ :v:

1 Like
4

It looks like battery life is a little over a month with 30 min refreshes (1 min run time).

2 Likes
5

Sorry if this is a dumb question but it’s my first time working with ESPHome. You have posted two scripts. I know the first one goes in the YAML for the display. Where does the other one go? I assume it’s not the same place since you separated the scripts.

1 Like
6

Awesome, That is not Terrible but I think it probably could be increased too. :v:

Thanks for the check-in :+1:

GL :slight_smile: PJ :v:

7

Are you using Home Assistant? One goes into ESPHome Builder (add-on) and is converted and loaded onto the display. The other is my Home Assistant dashboard YAML. The ESPHome YAML points to the URL for the dashboard in Home Assistant and renders the webpage to display on the device using Puppet.

8

Thanks. Yes on HA. Is the dashboard script an automation, then? Like where does the script actually live in HA?

9

If you don’t have any dashboards setup, go to Settings → Dashboards and select Add Dashboard. Then just click New dashboard from scratch. Give it a name and it’ll select show in side bar. You’ll now have the blank dashboard you created in the sidebar. Select it and then select the pencil on the right to edit it. Hit the pencil on the Home tab and then the Menu in the right corner. Select Edit in YAML and paste the YAML in. it Save. You’ll need to play with the dashboard to get the entities correct for your configuration.

You can also just build your own dashboard with the GUI tools provided or just edit the one I created after you paste in the YAML.

10

Duh. You put it in a dashboard. Sorry for being dense.

What are you using to screenshot the dashboard? I’m using hass-lovelace-screenshotter and it is producing a 600-448 image, whereas it looks like you set everything up for 800 x 480. There are parameters RENDERING_SCREEN_HEIGHT and RENDERING_SCREEN_WIDTH but when I change these I get the same size image as before.

Finally I see there is commented-out code for battery status. Does that work or is it still under development?

11

I’m using a Puppet add-on.

The device unfortunately does not allow battery tracking. The commented code was just a try, but the device lacks the hardware needed. It should be hackable to add, but I haven’t done it yet.

12

I’m having trouble with me Seeed Studio panel. Unforatunately, they have discontinued it so if it’s defective it’s back to the drawing board. Meanwhile I am working on the dashboard and almost everything is working except the sun icon is not showing up in the forecast. The other icons are, just not that one. I have ensured that it is in the folder. It has the same name as in the YAML section below. Any idea how to troubleshoot it?

 - type: vertical-stack
        cards:
          - show_current: true
            show_forecast: true
            type: weather-forecast
            entity: weather.forecast_home
            forecast_type: daily
            secondary_info_attribute: humidity
            card_mod:
              style: |
                :host {
                  --weather-icon-clear-night: url("/local/community/weather-card-pics/icons8-moon-and-stars-100.png");
                  --weather-icon-cloudy: url("/local/community/weather-card-pics/icons8-cloud-100.png");
                  --weather-icon-fog: url("/local/community/weather-card-pics/icons8-fog-100.png");
                  --weather-icon-lightning: url("/local/community/weather-card-pics/icons8-cloud-lightning-100.png");
                  --weather-icon-lightning-rainy: url("/local/community/weather-card-pics/icons8-stormy-weather-100.png");
                  --weather-icon-partlycloudy: url("/local/community/weather-card-pics/icons8-partly-cloudy-day-100.png");
                  --weather-icon-pouring: url("/local/community/weather-card-pics/icons8-torrential-rain-100.png");
                  --weather-icon-rainy: url("/local/community/weather-card-pics/icons8-rain-100.png");
                  --weather-icon-dust: url("/local/community/weather-card-pics/icons8-dust-100.png");
                  --weather-icon-sunny: url("/local/community/weather-card-pics/icons8-sun-100.png");
                  --weather-icon-windy: url("/local/community/weather-card-pics/icons8-wind-100.png");
                  --weather-icon-windy-variant: url("/local/community/weather-card-pics/icons8-wind-100.png");
                  --weather-icon-exceptional: url("/local/community/weather-card-pics/icons8-rainbow-100.png");
                }
13

If you use a different icon for sunny, does that different icon show up?

--weather-icon-sunny: url("/local/community/weather-card-pics/icons8-rainbow-100.png");
14

Just remove the case and sneak in this driver board and you’ll be able to measure the battery voltage perfectly LOL

1 Like
15

Yes, it does. Weird. When I click that icon in file manager it appears so I don’t think the file is corrupt. But I got a similar sun icon from google images and it works :man_shrugging:

16

Everything is working now. Thanks for all your comebacks. Just one more question about the device YAML, if you don’t mind. I currently have the “deep sleep” section of the code commented out. If I uncomment it, does this mean the display will update once every 30 min? Shouldn’t this match the 300s/5 min update interval of the image? Or does the image update even if it’s in deep sleep?

17

I’m not sure what image you’re referring to that is 300s/5min?

If you don’t use the deep sleep, it will be constantly running and refreshing at the interval you specify in the “online_image” selection. My code is set to 20 secs. This would run down the battery pretty quick. I have it set to wake up every 30 mins (the deep_sleep section) and this seems to last about 1 month on battery.

18

I though there was a 5 mi refresh in there somewhere. Anyway, I uncommented the deep sleep code and reflashed it, and the image hasn’t updated since. It also looks like on my RPi5 its taking more than 20 sec between image refreshes. I guess I need to disable the deep sleep and see how long the update takes, and make sure the awake interval is long enough. Now I have to catch it when it’s awake.

19

Is anyone getting errors when accessing the image from Puppet? The screen was working for me during testing, and now I have tried to move it over to use a Lovelace Kindle Screensaver image it will not load any image. I have reverted back to Puppet but still it does not load.

online_image:
  - id: dashboard_image
    format: PNG
    type: BINARY
    buffer_size: 30000
    url: http://192.168.1.222:10000/f1-e-ink/0?viewport=800x480&eink=1
    #url: http://192.168.1.216:5000 #change this link to your screenshot link
    update_interval: 300s
    on_download_finished:
      - delay: 0ms
      - component.update: main_display

spi:
  clk_pin: GPIO8
  mosi_pin: GPIO10

display:
  - platform: waveshare_epaper
    id: main_display
    cs_pin: GPIO3
    dc_pin: GPIO5
    busy_pin: 
      number: GPIO4
      inverted: true
    reset_pin: GPIO2
    model: 7.50inv2
    update_interval: never
    lambda: |-
      it.image(0, 0, id(dashboard_image));

[20:32:24][I][safe_mode:042]: Boot seems successful; resetting boot loop counter
[20:32:24][D][esp32.preferences:142]: Writing 1 items: 0 cached, 1 written, 0 failed
[20:33:44][I][online_image:109]: Updating image http://192.168.1.222:10000/f1-e-ink/0?viewport=800x480&eink=1
[20:33:48][D][online_image:175]: Starting download
[20:33:48][D][online_image:194]: Allocating PNG decoder
[20:33:48][I][online_image:212]: Downloading image (Size: 5536)
[20:33:48][W][component:407]: online_image took a long time for an operation (4689 ms)
[20:33:48][W][component:408]: Components should block for at most 30 ms
[20:33:48][W][component:407]: wifi took a long time for an operation (4694 ms)
[20:33:48][W][component:408]: Components should block for at most 30 ms
[20:33:48][D][online_image:089]: Allocating new buffer of 48000 bytes
[20:33:48][E][online_image:092]: allocation of 48000 bytes failed. Biggest block in heap: 31744 Bytes
[20:33:48][E][online_image.png:086]: Error decoding image: Incorrect PNG signature
[20:33:48][E][online_image:250]: Error when decoding image.

Strangely, I set the buffer to 30000 as per the example code in the OP, but it says it is allocating a new buffer. When I download the referenced image from the URL, it is 6kB in size.

Also when I use the Lovelace Kindle Screensaver addon I get a different set of errors. The image is already created in the background on my server, the XIAO display should just be accessing the image.

[20:41:58][I][safe_mode:042]: Boot seems successful; resetting boot loop counter
[20:41:58][D][esp32.preferences:142]: Writing 1 items: 0 cached, 1 written, 0 failed
[20:42:09][I][online_image:109]: Updating image http://192.168.1.216:5000
[20:42:19][D][esp-idf:000]: E (81219) esp-tls: [sock=58] select() timeout
[20:42:19][D][esp-idf:000]: E (81221) transport_base: Failed to open a new connection: 32774
[20:42:19][D][esp-idf:000]: E (81224) HTTP_CLIENT: Connection failed, sock < 0
[20:42:19][E][component:286]: http_request set Error flag: unspecified
[20:42:19][E][http_request.idf:127]: HTTP Request failed: ESP_ERR_HTTP_CONNECT
[20:42:19][E][online_image:154]: Download failed.
[20:42:19][W][component:407]: online_image took a long time for an operation (10022 ms)
[20:42:19][W][component:408]: Components should block for at most 30 ms
[20:42:19][W][component:407]: wifi took a long time for an operation (10027 ms)
[20:42:19][W][component:408]: Components should block for at most 30 ms
[20:42:20][E][component:313]: http_request cleared Error flag

The display did work initially, I have no idea what changed.