Compile & work with images?

[pixelwave]

I have ESPHome (2024.5.5) running in a docker container.

I tried to compile a yaml for a touchscreen device (Lily T-Display-S3-Long) which works.

Until I try to add an image:

image:
  - file: "placeholder_640_180.png"
    id: my_image
    resize: 640x180

display:
  - platform: axs15231
    id: main_display
    spi_id: display_qspi
    dimensions:
      height: 640
      width: 180
    cs_pin: 12
    reset_pin: 16
    backlight_pin: 1
    transform:
      swap_xy: false
    rotation: 90
    auto_clear_enabled: false
    lambda: |-
      it.fill(id(bgcolor));
      it.print(it.get_width()/2, it.get_height()/2-20, id(font_title), TextAlign::CENTER, "ESPHome");
      it.print(it.get_width()/2, it.get_height()/2+20, id(font_std), TextAlign::CENTER, "@UTBDK");
      // Draw the image my_image at position [x=0,y=0]
      it.image(0, 0, id(my_image));

I get the error message:

I double checked the esphome container and it seems pillow (10.2.0) is installed:

What am I missing / why can I not compile?

[vincen (Vincèn)]

Please share your sketch so we can help you

[pixelwave]

This is the full .yaml:

esphome:
  name: t-display-s3-long
  friendly_name: LilyGo-T-Display-S3-Long
  platformio_options:
    upload_speed: 921600
    build_unflags: -Werror=all
    board_build.flash_mode: dio
    board_build.f_flash: 80000000L
    board_build.f_cpu: 240000000L

psram:
  mode: octal
  speed: 120MHz

esp32:
  board: esp32-s3-devkitc-1
  flash_size: 16MB
  framework:
    type: esp-idf

external_components:
  - source: github://buglloc/esphome-components
    components: [axs15231]

# Enable logging
logger:

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

ota:
  password: "..."

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "T-Display-S3-Long"
    password: "..."

captive_portal:

spi:
  - id: display_qspi
    type: quad
    clk_pin: 17
    data_pins:
      - 13
      - 18
      - 21
      - 14

i2c:
  sda: 15
  scl: 10
  id: touchscreen_bus

font:
  - file: "gfonts://Roboto"
    id: font_std
    size: 40
    glyphs: "!\"%()+=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz/\\[]|&@#'"
  - file: "gfonts://Roboto@700"
    id: font_title
    size: 40
    glyphs: "!\"%()+=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz/\\[]|&@#'"

globals:
  - id: bgcolor
    type: Color
    initial_value: "Color::random_color()"

image:
  - file: "placeholder_640_180.png"
    id: my_image
    resize: 640x180

display:
  - platform: axs15231
    id: main_display
    spi_id: display_qspi
    dimensions:
      height: 640
      width: 180
    cs_pin: 12
    reset_pin: 16
    backlight_pin: 1
    transform:
      swap_xy: false
    rotation: 90
    auto_clear_enabled: false
    lambda: |-
      it.fill(id(bgcolor));
      it.print(it.get_width()/2, it.get_height()/2-20, id(font_title), TextAlign::CENTER, "ESPHome");
      it.print(it.get_width()/2, it.get_height()/2+20, id(font_std), TextAlign::CENTER, "@UTBDK");
      // Draw the image my_image at position [x=0,y=0]
      it.image(0, 0, id(my_image));

touchscreen:
  - platform: axs15231
    id: main_touch
    display: main_display
    i2c_id: touchscreen_bus
    transform:
      swap_xy: true
    on_touch:
      - lambda: |-
          Color newColor;
          do { newColor =  Color::random_color(); } while (newColor == id(bgcolor));
          id(bgcolor) = newColor;

          ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
            touch.x,
            touch.y,
            touch.x_raw,
            touch.y_raw
          );   

[pixelwave]

Ok never mind - I cleaned the build files and recompiled. Now it works!

[vincen (Vincèn)]

Your image file is in same directory as the yaml file ?
Have been careful also of caps in filename if there are some ?
you have already resized image at 640x180 ?