in this page has a sample:
image:
- file: https://esphome.io/_images/logo.png
id: esphome_logo
resize: 200x162
Compiling in Synology Nas/ova VM/Home Assistant 2024.7.3 + ESPHome 2024.7.1
Donāt attach screenshots (especially truncated ones!), copy and paste the text. What you added there is no help, since it doesnāt show where youāre trying to use the image.
1 Like
I think the screenshot says more. I donāt want to share the whole yaml, itās still under development, it might confuse others. Here, too, the image component is clearly visible, which is inserted according to the rules.
Iām going step by step. do you mean that the error could also be because the image is just inserted, but not used anywhere?
Your picture of the compile error discussion looks almost exactly like the picture that was shown in the posting that I linked to above. So, just to verify, did you follow that link and did you āClean Build Filesā?
Also, in order for Clyde to help you (its amazing that he is doing all of this work on the code and taking time to help us as well!), he needs code that shows your issue but has all of the extra stuff that no one wants to see (esp_modus, abb_ev, etc) removed so that it only focuses on the problem. For example, below is working code that will compile and shows a picture of a cat (assuming the picture is in you esphome folder) but nothing else (as for why the cat is drawn in black and white on the displayā¦ heck if I know).
esphome:
name: largedisplay
friendly_name: Largedisplay
platformio_options:
build_flags: "-DBOARD_HAS_PSRAM"
board_build.arduino.memory_type: qio_opi
board_build.flash_mode: dio
board_upload.maximum_ram_size: 524288
esp32:
board: esp32-s3-devkitc-1
variant: esp32s3
framework:
type: esp-idf
sdkconfig_options:
CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: y
CONFIG_ESP32S3_DATA_CACHE_64KB: y
CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
CONFIG_SPIRAM_RODATA: y
external_components:
- source: github://pr#6363
refresh: 0min
components: [lvgl]
psram:
mode: octal
speed: 80MHz
# Enable logging
logger:
level: DEBUG
i2c:
sda: GPIO08
scl: GPIO09
scan: True
id: bus_a
display:
- platform: rpi_dpi_rgb
id: my_display
auto_clear_enabled: false
update_interval: never
color_order: RGB
pclk_frequency: 14MHz
dimensions:
width: 800
height: 480
de_pin:
number: 5
hsync_pin:
number: 46
ignore_strapping_warning: true
vsync_pin:
number: 3
ignore_strapping_warning: true
pclk_pin: 7
pclk_inverted: false
hsync_back_porch: 10 #30
hsync_front_porch: 20 #210
hsync_pulse_width: 10 #30
vsync_back_porch: 10 #4
vsync_front_porch: 10 #4
vsync_pulse_width: 10 #4
data_pins:
red:
- 1 #r3
- 2 #r4
- 42 #r5
- 41 #r6
- 40 #r7
blue:
- 14 #b3
- 38 #b4
- 18 #b5
- 17 #b6
- 10 #b7
green:
- 39 #g2
- 0 #g3
- 45 #g4
- 48 #g5
- 47 #g6
- 21 #g7
font:
- file: "gfonts://Roboto"
id: chu_nano
size: 12
image:
- file: "test.jpg"
id: my_test_image
resize: 480x480
- file: "cat.png"
id: my_cat_image
resize: 69x86
- file: https://esphome.io/_images/logo.png
id: esphome_logo
resize: 200x162
touchscreen:
platform: gt911
id: my_touchscreen
interrupt_pin: GPIO4
on_touch:
- lambda: |-
ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
touch.x,
touch.y,
touch.x_raw,
touch.y_raw
);
lvgl:
displays:
- display_id: my_display
buffer_size: 25%
touchscreens:
- touchscreen_id: my_touchscreen
pages:
- id: image_page
widgets:
- img:
align: CENTER
src: my_cat_image
id: img_id
radius: 11
clip_corner: true
# Enable Home Assistant API
api:
encryption:
key: "<redacted>"
ota:
- platform: esphome
password: "<redacted>"
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_password
# Enable fallback hotspot (captive portal) in case wifi connection fails
ap:
ssid: "<redacted>"
password: "<redacted>"
captive_portal:
1 Like
The default image type is binary, I.e. monochrome. type: RGB565 will get you colours.
1 Like
Now the code compoled. But the image not visible. The midea4.png is next to e.yaml in esphome folder
substitutions:
lightbulb: "\U000F0335"
ceiling_light: "\U000F0769"
floor_lamp: "\U000F08DD"
string_lights: "\U000F12BA"
esphome:
name: home-display
friendly_name: Home Display
platformio_options:
build_flags: "-DBOARD_HAS_PSRAM"
board_build.arduino.memory_type: qio_opi
board_build.flash_mode: dio
board_upload.maximum_ram_size: 524288
esp32:
board: esp32-s3-devkitc-1
variant: esp32s3
framework:
type: esp-idf
sdkconfig_options:
CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: y
CONFIG_ESP32S3_DATA_CACHE_64KB: y
CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
CONFIG_SPIRAM_RODATA: y
api:
ota:
- platform: esphome
wifi:
networks:
- ssid: !secret wifi_ssid
password: !secret wifi_password
web_server:
port: 80
external_components:
- source:
type: git
url: https://github.com/clydebarrow/esphome
ref: 82264dc2440981873b8400d613e0cc32d229daa3 #previous commit - wont be needed in the future
components: [lvgl]
psram:
mode: octal
speed: 80MHz
logger:
level: DEBUG
i2c:
sda: GPIO08
scl: GPIO09
scan: True
id: bus_a
uart:
- id: mod_bus
tx_pin: GPIO16
rx_pin: GPIO15
baud_rate: 9600
parity: EVEN
stop_bits: 1
data_bits: 8
modbus:
id: heatpump_modbus
uart_id: mod_bus
modbus_controller:
- id: "esp_modbus"
address: 0x1
modbus_id: heatpump_modbus
setup_priority: -10
update_interval: 10s
- id: "abb_ev"
address: 0x1
modbus_id: heatpump_modbus
setup_priority: -10
update_interval: 10s
image:
- file: "midea4.png"
id: midea_logo
resize: 400x600
display:
- platform: rpi_dpi_rgb
id: my_display
auto_clear_enabled: false
update_interval: never
color_order: RGB
pclk_frequency: 14MHz
dimensions:
width: 800
height: 480
de_pin:
number: 5
hsync_pin:
number: 46
ignore_strapping_warning: true
vsync_pin:
number: 3
ignore_strapping_warning: true
pclk_pin: 7
pclk_inverted: false
hsync_back_porch: 10
hsync_front_porch: 20
hsync_pulse_width: 10
vsync_back_porch: 10
vsync_front_porch: 10
vsync_pulse_width: 10
data_pins:
red:
- 1
- 2
- 42
- 41
- 40
blue:
- 14
- 38
- 18
- 17
- 10
green:
- 39
- 0
- 45
- 48
- 47
- 21
font:
- file: "gfonts://Roboto"
id: roboto24
size: 24
bpp: 4
extras:
- file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/
glyphs: [
"\U000F004B",
"\U0000f0ed",
"\U000F006E",
"\U000F012C",
"\U000F179B",
"\U000F0748",
"\U000F1A1B",
"\U000F02DC",
"\U000F0A02",
"\U000F035F",
"\U000F0156",
"\U000F0C5F",
"\U000f0084",
"\U000f0091",
"\U000F0335",
]
- file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/
id: weather70
size: 70
bpp: 4
glyphs: &mdi-weather-glyphs
- "\U000F0590" # mdi-weather-cloudy
- "\U000F0F2F" # mdi-weather-cloudy-alert
- "\U000F0E6E" # mdi-weather-cloudy-arrow-right
- "\U000F0591" # mdi-weather-fog
- "\U000F0592" # mdi-weather-hail
- "\U000F0F30" # mdi-weather-hazy
- "\U000F0898" # mdi-weather-hurricane
- "\U000F0593" # mdi-weather-lightning
- "\U000F067E" # mdi-weather-lightning-rainy
- "\U000F0594" # mdi-weather-clear-night
- "\U000F0F31" # mdi-weather-night-partly-cloudy
- "\U000F0595" # mdi-weather-partly-cloudy
- "\U000F0F32" # mdi-weather-partly-lightning
- "\U000F0F33" # mdi-weather-partly-rainy
- "\U000F0F34" # mdi-weather-partly-snowy
- "\U000F0F35" # mdi-weather-partly-snowy-rainy
- "\U000F0596" # mdi-weather-pouring
- "\U000F0597" # mdi-weather-rainy
- "\U000F0598" # mdi-weather-snowy
- "\U000F0F36" # mdi-weather-snowy-heavy
- "\U000F067F" # mdi-weather-snowy-rainy
- "\U000F0599" # mdi-weather-sunny
- "\U000F0F37" # mdi-weather-sunny-alert
- "\U000F14E4" # mdi-weather-sunny-off
- "\U000F059A" # mdi-weather-sunset
- "\U000F059B" # mdi-weather-sunset-down
- "\U000F059C" # mdi-weather-sunset-up
- "\U000F0F38" # mdi-weather-tornado
- "\U000F059D" # mdi-weather-windy
- "\U000F059E" # mdi-weather-windy-variant
- file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/
id: light32
size: 32
bpp: 4
glyphs: [
"\U000F0335", # mdi-lightbulb
"\U000F0769", # mdi-ceiling-light
"\U000F08DD", # mdi-floor-lamp
"\U000F12BA", # mdi-string-lights
]
- file: "gfonts://Roboto"
id: roboto10
size: 10
bpp: 4
touchscreen:
platform: gt911
id: my_touch
interrupt_pin: GPIO4
on_touch:
- lambda: |-
ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
touch.x,
touch.y,
touch.x_raw,
touch.y_raw
);
sensor:
- platform: wifi_signal
name: "WiFi Signal"
id: wifi_signal_db
update_interval: 60s
entity_category: diagnostic
internal: true
- platform: copy
source_id: wifi_signal_db
name: "WiFi Strength"
filters:
- lambda: return min(max(2 * (x + 100.0), 0.0), 100.0);
unit_of_measurement: "%"
entity_category: diagnostic
- platform: modbus_controller
modbus_controller_id: "abb_ev"
name: "ABB Import energy total"
id: abb_import_energy_total
address: 0x5000
register_type: holding
value_type: U_QWORD
device_class: "energy"
unit_of_measurement: "kWh"
accuracy_decimals: 4
state_class: "total_increasing"
filters:
- multiply: 0.0001
- platform: modbus_controller
modbus_controller_id: abb_ev
name: "ABB Voltage L1-N"
id: abb_voltage_l1_n
address: 0x5B00
register_type: holding
value_type: U_DWORD
accuracy_decimals: 1
device_class: voltage
unit_of_measurement: "V"
filters:
- multiply: 0.1
- platform: modbus_controller
modbus_controller_id: "abb_ev"
name: "ABB Power total"
id: abb_power_total
address: 0x5B14
register_type: holding
value_type: S_DWORD
accuracy_decimals: 2
device_class: power
unit_of_measurement: "W"
filters:
- multiply: 0.01
text_sensor:
- platform: wifi_info
ip_address:
name: "IP Address"
entity_category: diagnostic
ssid:
name: "Connected SSID"
entity_category: diagnostic
mac_address:
name: "Mac Address"
entity_category: diagnostic
#-------------------------------------------
# LVGL Buttons
#-------------------------------------------
lvgl:
displays:
- display_id: my_display
touchscreens:
- touchscreen_id: my_touch
on_idle:
- timeout: 10s
then:
- logger.log: idle timeout
- if:
condition:
lvgl.is_idle:
timeout: 5s
then:
- logger.log: LVGL is idle
- timeout: 15s
then:
- logger.log: idle 15s timeout
style_definitions:
- id: style_line
line_color: 0x0000FF
line_width: 8
line_rounded: true
- id: date_style
text_font: roboto24
align: center
text_color: 0x333333
bg_opa: cover
radius: 4
pad_all: 2
theme:
btn:
text_font: roboto24
scroll_on_focus: true
group: general
radius: 25
width: 150
height: 109
pad_left: 10px
pad_top: 10px
pad_bottom: 10px
pad_right: 10px
shadow_width: 0
bg_color: 0x313131
text_color: 0xB6B6B6
checked:
bg_color: 0xCC5E14
text_color: 0xB6B6B6
page_wrap: true
pages:
- id: main_page
skip: true
layout:
type: flex
flex_flow: column_wrap
width: 100%
bg_color: 0x000000
bg_opa: cover
pad_all: 5
widgets:
- btn:
height: 223
checkable: true
id: lv_button_1
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_1_icon
- label:
align: bottom_left
text: "Kitchen"
long_mode: dot
- btn:
checkable: true
id: lv_button_2
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_2_icon
- label:
align: bottom_left
text: "Outdoor"
long_mode: dot
- btn:
checkable: true
id: lv_button_3
widgets:
- label:
text_font: roboto24
align: top_left
text: $floor_lamp
id: lv_button_3_icon
- label:
align: bottom_left
text: "Living Room"
long_mode: dot
- btn:
checkable: true
id: lv_button_4
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_4_icon
- label:
align: bottom_left
text: "Accent"
long_mode: dot
- btn:
checkable: true
id: lv_button_5
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_5_icon
- label:
align: bottom_left
text: "Bed Room"
long_mode: dot
- btn:
checkable: true
id: lv_button_6
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_6_icon
- label:
id: display_time
align: bottom_left
text: "00:00am"
long_mode: dot
- btn:
checkable: true
id: lv_button_7
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_7_icon
- label:
align: bottom_left
text: "Fan"
long_mode: dot
- btn:
checkable: true
id: lv_button_8
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_8_icon
- label:
align: bottom_left
text: "Timer"
long_mode: dot
- btn:
checkable: true
id: lv_button_9
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_9_icon
- label:
align: bottom_left
text: "Lamp"
long_mode: dot
- btn:
checkable: true
id: lv_button_10
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_10_icon
- label:
align: bottom_left
text: "Wall Spot"
long_mode: dot
- btn:
checkable: true
id: lv_button_11
widgets:
- label:
text_font: roboto24
align: top_left
text: $lightbulb
id: lv_button_11_icon
- label:
align: bottom_left
text: "Driveway"
long_mode: dot
- btn:
id: switch_to_page2
widgets:
- label:
align: center
text: "Go to Page 2"
on_click:
then:
- lvgl.page.show: page2
- btn:
id: switch_to_page3
widgets:
- label:
align: center
text: "Go to Page 3"
on_click:
then:
- lvgl.page.show: page3
- id: page2
skip: true
layout:
type: flex
flex_flow: column_wrap
width: 100%
bg_color: 0x000000
bg_opa: cover
pad_all: 5
widgets:
- btn:
id: switch_to_main_page
widgets:
- label:
align: center
text: "Go to Main Page"
text_font: roboto10
on_click:
then:
- lvgl.page.show: main_page
- label:
id: abb_import_energy_label
text: "ABB Import Energy: 0 kWh"
text_font: roboto24
text_color: 0xFFFFFF
align: top_right
- label:
id: abb_voltage_l1_n_label
text: "ABB Voltage L1-N"
text_font: roboto24
text_color: 0xFFFFFF
align: top_right
- meter:
id: abb_power_meter
align: center
scales:
- range_from: 0
range_to: 10000
angle_range: 240
rotation: 150
ticks:
count: 11
length: 10
major:
stride: 1000
length: 13
label_gap: 13
indicators:
- line:
id: abb_power_needle
width: 2
color: 0xFF0000
r_mod: -4
- tick_style:
start_value: 0
end_value: 5000
color_start: 0x0000bd
color_end: 0xbd0000
- id: page3
skip: true
layout:
type: flex
flex_flow: column_wrap
width: 100%
bg_color: 0x000000
bg_opa: cover
pad_all: 5
widgets:
- img:
align: CENTER
src: midea_logo
id: img_id
radius: 11
clip_corner: true
- btn:
id: switch_to_main_page2
widgets:
- label:
align: center
text: "Go to Main Page"
text_font: roboto10
on_click:
then:
- lvgl.page.show: main_page
# - label:
# id: abb_import_energy_label2
# text: "ABB Import Energy: 0 kWh"
# text_font: roboto24
# text_color: 0xFFFFFF
# align: top_right
# - label:
# id: abb_voltage_l1_n_label2
# text: "ABB Voltage L1-N"
# text_font: roboto24
# text_color: 0xFFFFFF
# align: top_right
#
# - meter:
# id: abb_power_meter2
# align: center
# scales:
# - range_from: 0
# range_to: 10000
# angle_range: 240
# rotation: 150
# ticks:
# count: 11
# length: 10
# major:
# stride: 1000
# length: 13
# label_gap: 13
# indicators:
# - line:
# id: abb_power_needle2
# width: 2
# color: 0xFF0000
# r_mod: -4
# - tick_style:
# start_value: 0
# end_value: 5000
# color_start: 0x0000bd
# color_end: 0xbd0000
interval:
- interval: 20s
then:
- lambda: |-
char buffer_energy[64];
snprintf(buffer_energy, sizeof(buffer_energy), "ABB Import Energy: %.4f kWh", id(abb_import_energy_total).state);
lv_label_set_text(id(abb_import_energy_label), buffer_energy);
char buffer_voltage[64];
snprintf(buffer_voltage, sizeof(buffer_voltage), "ABB Voltage L1-N: %.1f V", id(abb_voltage_l1_n).state);
lv_label_set_text(id(abb_voltage_l1_n_label), buffer_voltage);
You Cleaned the build files, didnāt you 
Clyde answered that one already (Thank you BTW!).
I had the same issue as you with the logo image below not being visible until I followed Clydeās comment above and included type: RGB565
- file: https://esphome.io/_images/logo.png
id: esphome_logo
resize: 200x162
Now, for your specific issue, change
image:
- file: "midea4.png"
id: midea_logo
resize: 400x600
to the following and it should work.
image:
- file: "midea4.png"
id: midea_logo
resize: 400x600
type: RGB565
From the display component page:
type (Optional): Specifies how to encode image internally. Defaults to BINARY for local images and TRANSPARENT_BINARY for MDIs.
BINARY: Two colors, suitable for 1 color displays or 2 color image in color displays. Uses 1 bit per pixel, 8 pixels per byte.
TRANSPARENT_BINARY: One color, any pixel that is fully transparent will not be drawn, and any other pixel will be the on color. Uses 1 bit per pixel, 8 pixels per byte.
GRAYSCALE: Full scale grey. Uses 8 bits per pixel, 1 pixel per byte.
RGB565: Lossy RGB color stored. Uses 2 bytes per pixel.
RGB24: Full RGB color stored. Uses 3 bytes per pixel.
RGBA: Full RGB color stored. Uses 4 bytes per pixel. Any pixel with an alpha value < 127 will not be drawn.
1 Like
Oh, I get it!
Thank you! You can see that I struggle a lot with the language barrier, but I managed.
the disp_bg_image: is use the ismage all pages?
If i need background only one page, it is possible?
Yes you can set that on a per page basis.
1 Like
can you show me a sample for this? I have not been successful so far.
Is there any way to show percent battery left? I canāt find any information about a GPIO being dedicated to the battery input.
Anyone have any luck getting deepsleep to work with touch screen wake?
I too would like to know this.
clydebarrow!
Please help me, the individual background question!
Just add the image to the page as the first object.
is there any way to control the LEDs on ESP32? (or any GPIO)
Hi,
got my Waveshare Display today an having trouble getting the Touchscreen to work.
I used the Yaml from here an getting an Error in the Logs and the Touchscreen is not Working
touchscreen:
platform: gt911
id: my_touchscreen
interrupt_pin: GPIO4
on_touch:
- lambda: |-
ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
touch.x,
touch.y,
touch.x_raw,
touch.y_raw
);
[22:12:35][C][gt911.touchscreen:127]: GT911 Touchscreen:
[22:12:35][C][gt911.touchscreen:128]: Address: 0x5D
[22:12:35][C][gt911.touchscreen:129]: Interrupt Pin: GPIO4
[22:12:35][E][component:082]: Component touchscreen is marked FAILED
Updated: Corrected EXIO number.
Iāve been tinkering with this board for a bit, and I wound up returning one with what I thought was an intermittent touchscreen.
Turns out that the touchscreen will select one of two i2c addresses (0x5D or 0x14) dynamically durning initialization based on the level of the interrupt pin and reset pin.
The ESPhome gt911 component handles this automatically (setting it to 0x5D) if it has the reset pin defined.
Unfortunately, on the waveshare board, the CTS_RST pin is connected to the CH422, not the ESP32.
Iām working on configuring the CH422 IO1 and setting it as the reset pin for the GT911 (was looking here to see if anyone had already done that). Iāll report back if I get it working.
Edit: Wow, working on the first try, must be my lucky day.
Youāll need to configure the CH422 as follows: (I added this just below the i2c section)
ch422g:
- id: ch422g_hub
address: 0x24
# Edit: Upon review, different addresses are used for different commands.
# 0x24 is the correct address to use in the setup here.
And then modify the touchscreen section as below to define a reset pin via the ch422.
N.B: my commentary and the excluded address line are not required.
touchscreen:
platform: gt911
id: my_touch
# Uncomment below if you got the janky OTHER i2c address this time
#address: 0x14
# Probably fixed by adding reset_pin via CH422 though
interrupt_pin: GPIO4
# DEFINE RESET PIN for consistent i2c address selection
# CTP_RST is wired to IO1 of CH422G
reset_pin:
ch422g: ch422g_hub
number: 1 #edit: It's on IO1
mode: OUTPUT
on_touch:
- lambda: |-
ESP_LOGI("Touch", "Touch detected at x=%d, y=%d", touch.x, touch.y);
Paging @max.simon1 : see if this resolves your issue, I suspect it will.
2 Likes
Note that Iām somewhat experienced with coding for MCUās but very novice at ESPhome ā I have no idea if thatās the correct way to define the reset pin via GPIO expander ā but it compiles and hasnāt failed yet so ā fafo?
If anyone has any feedback on how thatās setup (E.G - should the EXIO be set up independently and then passed to the touchscreen component as a reset pin? I feel like it might) please donāt hesitate to chime in.
I assure you, I do not know what Iām doing, Iām just deft at hitting it with a hammer and yelling at LLMās until I get something that resembles the neighborhood adjacent to functional.
Edit: Actually this does seem the correct way to do it ā I just didnāt see that this has been already well-solved for a few weeks now 
1 Like