I have an ESP32-32E 2.8" CYD (pic attached).
I am just trying to display a local image on the CYD screen. I manged to do it with Lambda but the image was very grainy (low quality). I am now trying with LVGL but I don’t think I am using it right as I only get a white screen.
There are so many different configurations out there I am just becoming very confused. Any help would be so very much appreciated - thank you!
Here is the code I am using now:
display:
- platform: ili9xxx
model: ILI9341
id: main_display
spi_id: tft
cs_pin: GPIO5
dc_pin: GPIO4
reset_pin: GPIO22
rotation: 0
invert_colors: false
update_interval: never
color_palette: NONE
auto_clear_enabled: false
dimensions:
width: 320
height: 240
image:
- file: "forecats_original.png"
type: RGB
id: my_image
resize: 320x240
transparency: alpha_channel
lvgl:
displays:
- main_display
widgets:
- image:
src: my_image # References the ID defined in the 'image' section above
align: center # Positions the image in the center of the screen
x: 50
y: 50
output:
- platform: ledc
pin: GPIO21
id: backlight_pwm
light:
- platform: monochromatic
output: backlight_pwm
name: Display Backlight
id: backlight
restore_mode: ALWAYS_ON
spi:
- id: tft
clk_pin: GPIO14
mosi_pin: GPIO13
miso_pin: GPIO12
Don’t use RGB for the type, use RGB565. And use mipi_spi rather than ili9xxx.
1 Like
Thank you so much for dropping in Clyde. Wow! OK, I will absolutely try that. I was going to create a thread in the Discord if I still can’t get it to work. I hope that’s ok?
Thank you again for your time Clyde. Here is my revised configuration - does it look better? I am still just getting a white screen:
spi:
- id: tft
clk_pin: GPIO14
mosi_pin: GPIO13
miso_pin: GPIO12
output:
- platform: ledc
pin: GPIO21
id: backlight_pwm
frequency: 1000Hz
light:
- platform: monochromatic
output: backlight_pwm
id: backlight
restore_mode: ALWAYS_ON
display:
- platform: mipi_spi
model: ST7789V
id: main_display
spi_id: tft
cs_pin: GPIO15
dc_pin: GPIO2
color_order: rgb
spi_mode: MODE0
rotation: 0
invert_colors: false
update_interval: never
auto_clear_enabled: false
dimensions:
width: 320
height: 240
http_request:
verify_ssl: false
timeout: 20s
watchdog_timeout: 25s
online_image:
- id: online_image_of_the_day
url: "http://192.168.2.244:8123/local/daily_forecats/forecats_original.png"
format: png
type: rgb565
on_download_finished:
then:
- lvgl.image.update:
id: widget_image_of_the_day
src: online_image_of_the_day
resize: 320x240
lvgl:
buffer_size: 25%
pages:
id: page_image_of_the_day
widgets:
- image:
id: widget_image_of_the_day
src: online_image_of_the_day
width: 100%
height: 100%
Yes, Discord would be a good place to follow up (in #general-support).
You have the dimensions swapped to start with, that’s why part of the screen is just noise.
Start with an empty LVGL config to confirm correct display operation - you should get the Hello World page. Once that is working, add an image from a local file. Then replace with the online_image. By working through those steps you reduce the number of variables at each point.
Check the logs especially for online image - I don’t see anything in your config that would actually trigger the download.
Latest configuration gives me this on the screen:
esphome:
name: esphome-web-2b0070
friendly_name: cyd-display
on_boot:
priority: -100 # runs late, after everything is initialized
then:
- logger.log: "Boot action fired, waiting 3s..." # ← add this
- delay: 3s
- logger.log: "Triggering image download now..." # ← add this
- component.update: online_image_of_the_day
esp32:
board: esp32dev
framework:
type: esp-idf
advanced:
minimum_chip_revision: "3.1"
# Enable logging
logger:
level: VERBOSE
# Enable Home Assistant API
api:
# Allow Over-The-Air updates
ota:
- platform: esphome
wifi:
ssid: ""
password: ""
interval:
- interval: 30s
then:
- component.update: online_image_of_the_day
spi:
- id: tft
clk_pin: GPIO14
mosi_pin: GPIO13
miso_pin: GPIO12
interface: spi2
output:
- platform: ledc
pin: GPIO21
id: backlight_pwm
frequency: 1000Hz
light:
- platform: monochromatic
output: backlight_pwm
id: backlight
restore_mode: ALWAYS_ON
display:
- platform: mipi_spi
model: ILI9341
id: main_display
spi_id: tft
cs_pin: GPIO15
dc_pin: GPIO2
color_order: BGR
spi_mode: MODE0
rotation: 0
invert_colors: false
data_rate: 40MHz
update_interval: never
auto_clear_enabled: false
dimensions:
width: 240
height: 320
http_request:
verify_ssl: false
timeout: 20s
watchdog_timeout: 25s
buffer_size_rx: 8192
online_image:
- id: online_image_of_the_day
url: "http://192.168.2.244:8123/local/daily_forecats/HalfBakedb.jpg"
format: JPG
type: RGB565
on_download_finished:
then:
- logger.log: "Download finished! Updating widget..."
- lvgl.image.update:
id: widget_image_of_the_day
src: online_image_of_the_day
- lvgl.page.show: # ← added: force page to show after image loads
id: page_image_of_the_day
on_error:
then:
- logger.log: "Image download failed!"
resize: 120x160
buffer_size: 4096 # ← add this
lvgl:
displays:
- main_display
buffer_size: 25%
pages:
- id: page_image_of_the_day
widgets:
- image:
id: widget_image_of_the_day
src: online_image_of_the_day
align: CENTER
x: 0
y: 0
width: 120
height: 160
Is there any way to improve the quality and make it full screen? If I try to resize the image to 320x240, the image doesn’t download - buffer error.
Have the same CYD.
Need to use this to make it work in the display section:
color_palette: 8BIT
Also it is good idea to start with this first, till the display configuration is done:
show_test_card: true
