A while ago I started my struggles on a bathing display (as the current control panel is broken). As you now during projects there are always some struggles on the path.
But whatever I try, I can’t get these 2 things fixed:
The display looks ugly like if it stays in 8bit mode
The footer navigation only shows a somewhat devided bar on the footer but no navigation and home button.
The hardware:
ESP-S3 N16r8 (item is discontinued on Temu but I got a screenshot):
Actually: On the photo the display looks even better than in real life But here you see navigation foorter issue and slightly a bit of the coloring issue.
To be clear about the coloring issue (which makes gradients look very ugly i made a macro photo:
At first I was using the ILI9488 lib but I discovered that I needed to use the alternative gamma version of it so Right now I’m using the ILI9488_A
I discovered that I had to set invert_colors: mode to “true”
I made sure the board is using it’s flash by setting the platformio_options: and setting the flash_size: 16MB under ESP32: component + setting the PSRAM to Ocal with 80Mhz
In the display component i’ve set: auto_clear_enabled: false and update_interval: never as this is a requirement to use LVGL properly.
I tried RGB and played with the invert colors but in the end the currently settings set got the best results of all bad results.
My code (currently a bit unstructured but I usually get it structured if everything works well):
esphome:
name: bath
friendly_name: Bath
platformio_options:
build_flags: "-DBOARD_HAS_PSRAM"
board_build.arduino.memory_type: qio_opi
esp32:
board: esp32-s3-devkitc-1
variant: esp32s3
flash_size: 16MB
#partitions: "/config/esphome/custom_16MB.csv"
framework:
type: arduino
# version: latest
psram:
mode: octal
speed: 80MHz
# Enable logging
logger:
# Enable Home Assistant API
api:
encryption:
key: "SuperSecretEncryptionKey"
ota:
- platform: esphome
password: "SuperSecretOTAPassword"
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_password
# Enable fallback hotspot (captive portal) in case wifi connection fails
ap:
ssid: "BathDisplay"
password: "SuperSecretAPPassword"
captive_portal:
web_server:
port: 80
## Configuring push buttons
binary_sensor:
- platform: gpio
pin: GPIO3 # The GPIO pin connected to the push button
name: "Push Button"
id: push_button
on_press:
then:
- switch.toggle: relay_s1
## Configuring the Relay Switch
switch:
- platform: gpio
pin: 7
name: "S1"
id: relay_s1
- platform: gpio
pin: 6
name: "S2"
id: relay_s2
- platform: gpio
pin: 5
name: "S3"
id: relay_s3
- platform: gpio
pin: 4
name: "S4"
id: relay_s4
# Remove the first 3 #'s to make the display work
# Configuring the SPI Pins
spi:
clk_pin: GPIO12
mosi_pin: GPIO11
miso_pin: GPIO13
# Assigning the i2c pins that can be used for i2c communication
i2c:
sda: GPIO38 # Probably the boot issue due to reserved for USB_D+ --> From 20 to 38
scl: GPIO9
scan: True
### Configuring the Display Part
display:
- platform: ili9xxx
model: ILI9488_A
dimensions:
height: 320
width: 480
offset_height: 0
offset_width: 0
transform:
swap_xy: true
mirror_x: false
mirror_y: false
auto_clear_enabled: false # Disabling autoclear to be compatible with LVGL
update_interval: never
color_order: BGR # RGB or BGR
invert_colors: true
data_rate: 40MHz
cs_pin: GPIO1
dc_pin: GPIO42
reset_pin: GPIO2
# show_test_card: true
# rotation: 90
#lambda: |-
# it.print(0, 0, id(my_font), "Hello, World!");
## Configuring things for ontrolling the display's ledled
# Define the LED pin as a PWM output
output:
- platform: ledc
pin: GPIO39
id: gpio_backlight_pwm
light:
- platform: monochromatic
output: gpio_backlight_pwm
name: "Display Backlight"
id: display_backlight
restore_mode: ALWAYS_ON
## Configuring the touchscreen part
touchscreen:
- platform: ft63x6
id: my_touchscreen
reset_pin: GPIO40
interrupt_pin: GPIO21 # boot issue due to reserved for USB_D- --> From 19 to 21
on_release:
- if:
condition: lvgl.is_paused
then:
- logger.log: "LVGL resuming"
- lvgl.resume:
- lvgl.widget.redraw:
- light.turn_on: display_backlight
## Configuring the SD card Slot (based on assumption if it 'll be supported ever by ESPHOME')
# sd_card:
# cs_pin: GPIO48 (This is the real connected GPIO port in preparation of potential support in the future)
# spi_id: spi_bus
font:
- file: "fonts/arial.ttf"
id: my_font
size: 30
# Setting a wall paper for use in lvgl
image:
- file: 'bath/bg/BackgroundWaterdrop.png'
id: wallpaper
resize: 480x320
type: RGB565
use_transparency: false
### Start of the LVGL part
lvgl:
buffer_size: 100%
disp_bg_image: wallpaper
### START Theme Part
theme:
label:
text_font: my_font # set all your labels to use your custom defined font
button:
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x0077b3
border_width: 1
text_color: 0xFFFFFF
pressed: # set some button colors to be different in pressed state
bg_color: 0x006699
bg_grad_color: 0x00334d
checked: # set some button colors to be different in checked state
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
text_color: 0xfff300
buttonmatrix:
bg_opa: TRANSP
border_color: 0x0077b3
border_width: 0
text_color: 0xFFFFFF
pad_all: 0
items: # set all your buttonmatrix buttons to use your custom defined styles and font
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x0077b3
border_width: 1
text_color: 0xFFFFFF
text_font: my_font
pressed:
bg_color: 0x006699
bg_grad_color: 0x00334d
checked:
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
text_color: 0x005580
switch:
bg_color: 0xC0C0C0
bg_grad_color: 0xb0b0b0
bg_grad_dir: VER
bg_opa: COVER
checked:
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
bg_grad_dir: VER
bg_opa: COVER
knob:
bg_color: 0xFFFFFF
bg_grad_color: 0xC0C0C0
bg_grad_dir: VER
bg_opa: COVER
slider:
border_width: 1
border_opa: 15%
bg_color: 0xcccaca
bg_opa: 15%
indicator:
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
bg_grad_dir: VER
bg_opa: COVER
knob:
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x0077b3
border_width: 1
text_color: 0xFFFFFF
style_definitions:
- id: header_footer
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_opa: TRANSP
radius: 0
pad_all: 0
pad_row: 0
pad_column: 0
border_color: 0x0077b3
text_color: 0xFFFFFF
width: 100%
height: 30
### END Theme Part
### START Page navigation footer
top_layer:
widgets:
- buttonmatrix:
align: bottom_mid
styles: header_footer
pad_all: 0
outline_width: 0
id: top_layer
items:
styles: header_footer
rows:
- buttons:
- id: page_prev
text: "\uF053"
on_press:
then:
lvgl.page.previous:
- id: page_home
text: "\uF015"
on_press:
then:
lvgl.page.show: main_page
- id: page_next
text: "\uF054"
on_press:
then:
lvgl.page.next:
### END Page navigation footer
### START Pages part
pages:
- id: main_page
widgets:
- switch:
#x: 100
#y: 100
id: s1_lvglswitch
on_value:
then:
- switch.toggle: relay_s1
- button:
#x: 150
#y: 150
#width: 100
#height: 100
id: s1_lgvlbtn
checkable: false
align: center
widgets:
- label:
align: center
text: "Relay_S1"
on_release:
then:
- switch.toggle: relay_s1
### END Pages part
### START LVGL Display auto turn of part
on_idle:
timeout: !lambda "return (id(display_timeout).state * 1000);" # was 1000 for 10s
then:
- logger.log: "LVGL is idle"
- light.turn_off: display_backlight
- lvgl.pause:
### END LVGL Display auto turn of part
### END of the LVGL part
### START ESPHOME Display auto turn of part
number:
- platform: template
name: LVGL Screen timeout
optimistic: true
id: display_timeout
unit_of_measurement: "s"
initial_value: 20
restore_value: true
min_value: 1
max_value: 180
step: 5
mode: box
### END ESPHOME Display auto turn of part
I Hope someone struggled with the same as I do and is willing to share the knowledge to resolve this.
*EDIT 12-12-2024
I couldn’t fix the issue, perhaps the screen was broken so I decided to return it.
Now I’ll try it with another display with another driver.
I Marked Clyde’s answer on my navigation footer as this was my solution to 50% of this thread The other one never got solved (probably because the display appeared to be broken.
Firstly the ILI9488 is a bad choice for a display since it only works in 18 bit mode, which makes it slow.
Your text will look better if you set the font bpp to 4. And the footer symbols are not specified in the font. You will either need to use regular Latin characters, or add the special characters from another font.
Thanks for your input.
So actually the ILI9488 isn’t on the best-practises list. Which display would you prefer?
When searching for the right display I only made sure it was on esphome’s support list and that it has capacitive touch with a supported touch driver.
Regarding the font: I indeed got better results with BPP: 4 thanks for that one.
I also tried switching to latin fonts but this doesnt solve my navigation footer issue.
Actually I think the fotter issue relays somewhere else as the whole layout as it should look like this:
Take note of the 3 buttons prev_page button/Home/Next page button so 3 columns whilst my display shows 4 columns and no buttons at all.
Pretty much anything else It is usable, just slow, which may not be an issue for many applications.
The footer is showing the buttons, it’s just you haven’t said how you want them drawn. The unicode characters like "\uF053" are not part of the default glyphset, and probably not present in the font you are using anyway, so they get drawn with the “unknown character” representation which is a simple rectangle.
Thanks (again) for your input.
I dived into it and got the navigation footer solved by your direction. So I;m very happy on that one
However since setting up the glyphset the display became pretty much slower. Formerly it fired up immediately on a touch, whilst now I need to touch it for a full second and then it slowly comes up. Is this typical behavior of the ILI9844 driver?
Anyway if it won’t become slower than it is now when adding more things to the display then I can live with it.
I’ve also set the background image to the main page: This makes the uglyness of the displays picture displaying much more obvious (it’s best visible at the upper part of the image):
As the manufacturer decides to put a sticker on it I guess this is a common issue on this display. However I don’t know what’s ment with TN code as esphome only supports SPI displays and I therefore automatically assumed I was using the right code on this display, but now I see they wrote IPS and not SPI , does this clarify anything or doesn’t it make any sense?
This and the other Waveshare LCD boards in that series (4.3, 4.3B, 5) work great, have a lot of features, are well documented, and are solidly constructed. I think they’re all great value for the price.
IPS refers to the type of LCD panel, not the interface. The main difference from a software point of view between IPS and TN is whether invert_colors needs to be set, which you can establish with experimentation anyway.
I changed to ESP-IDF, but functionally I noticed no difference at all.
I’m using an ESP-SR N16R8 So I guess I got 16MB of PSRAM and 8Mb of Flash
In the logs I see 8Mb PSram (line: 120). So I’m going to look into that on how to set it to 16Mb.
Below the log file when I upload the code:
INFO ESPHome 2024.11.2
INFO Reading configuration /config/esphome/bath.yaml...
WARNING GPIO3 is a strapping PIN and should only be used for I/O with care.
Attaching external pullup/down resistors to strapping pins can cause unexpected failures.
See https://esphome.io/guides/faq.html#why-am-i-getting-a-warning-about-strapping-pins
INFO Generating C++ source...
INFO Compiling app...
Processing bath (board: esp32-s3-devkitc-1; framework: espidf; platform: platformio/[email protected])
--------------------------------------------------------------------------------
HARDWARE: ESP32S3 240MHz, 320KB RAM, 8MB Flash
- framework-espidf @ 3.40408.0 (4.4.8)
- tool-cmake @ 3.16.4
- tool-ninja @ 1.7.1
- toolchain-esp32ulp @ 2.35.0-20220830
- toolchain-riscv32-esp @ 8.4.0+2021r2-patch5
- toolchain-xtensa-esp32s3 @ 8.4.0+2021r2-patch5
Reading CMake configuration...
Dependency Graph
|-- noise-c @ 0.1.6
|-- ArduinoJson @ 6.18.5
|-- lvgl @ 8.4.0
Compiling .pioenvs/bath/src/main.o
Linking .pioenvs/bath/firmware.elf
RAM: [= ] 10.4% (used 33920 bytes from 327680 bytes)
Flash: [== ] 16.3% (used 1327369 bytes from 8126464 bytes)
Building .pioenvs/bath/firmware.bin
Creating esp32s3 image...
Successfully created esp32s3 image.
esp32_create_combined_bin([".pioenvs/bath/firmware.bin"], [".pioenvs/bath/firmware.elf"])
Wrote 0x154270 bytes to file /data/build/bath/.pioenvs/bath/firmware.factory.bin, ready to flash to offset 0x0
esp32_copy_ota_bin([".pioenvs/bath/firmware.bin"], [".pioenvs/bath/firmware.elf"])
========================= [SUCCESS] Took 24.87 seconds =========================
INFO Successfully compiled program.
INFO Connecting to 192.168.2.164 port 3232...
INFO Connected to 192.168.2.164
INFO Uploading /data/build/bath/.pioenvs/bath/firmware.bin (1327728 bytes)
Uploading: [============================================================] 100% Done...
INFO Upload took 5.22 seconds, waiting for result...
INFO OTA successful
INFO Successfully uploaded program.
INFO Starting log output from 192.168.2.164 using esphome API
INFO Successfully connected to bath @ 192.168.2.164 in 7.260s
INFO Successful handshake with bath @ 192.168.2.164 in 0.061s
[15:56:24][I][app:100]: ESPHome version 2024.11.2 compiled on Dec 4 2024, 15:55:47
[15:56:24][C][wifi:600]: WiFi:
[15:56:24][C][wifi:428]: Local MAC: **:3D:**:E9:E4:**
[15:56:24][C][wifi:433]: SSID: 'D****-****2'[redacted]
[15:56:24][C][wifi:436]: IP Address: 192.168.2.164
[15:56:24][C][wifi:440]: BSSID: **:60:F9:**:E3:**[redacted]
[15:56:24][C][wifi:441]: Hostname: 'bath'
[15:56:24][C][wifi:443]: Signal strength: -59 dB ▂▄▆█
[15:56:24][C][wifi:447]: Channel: 5
[15:56:24][C][wifi:448]: Subnet: 255.255.255.0
[15:56:24][C][wifi:449]: Gateway: 192.168.2.254
[15:56:24][C][wifi:450]: DNS1: 192.168.2.77
[15:56:24][C][wifi:451]: DNS2: 192.168.2.77
[15:56:24][C][logger:185]: Logger:
[15:56:24][C][logger:186]: Level: DEBUG
[15:56:24][C][logger:188]: Log Baud Rate: 115200
[15:56:24][C][logger:189]: Hardware UART: USB_SERIAL_JTAG
[15:56:24][C][spi:064]: SPI bus:
[15:56:24][C][spi:065]: CLK Pin: GPIO12
[15:56:24][C][spi:066]: SDI Pin: GPIO13
[15:56:24][C][spi:067]: SDO Pin: GPIO11
[15:56:24][C][spi:072]: Using HW SPI: SPI2_HOST
[15:56:24][C][i2c.idf:075]: I2C Bus:
[15:56:24][C][i2c.idf:076]: SDA Pin: GPIO38
[15:56:24][C][i2c.idf:077]: SCL Pin: GPIO9
[15:56:24][C][i2c.idf:078]: Frequency: 50000 Hz
[15:56:24][C][i2c.idf:084]: Recovery: bus successfully recovered
[15:56:24][I][i2c.idf:094]: Results from i2c bus scan:
[15:56:24][I][i2c.idf:100]: Found i2c device at address 0x38
[15:56:24][C][switch.gpio:068]: GPIO Switch 'S1'
[15:56:24][C][switch.gpio:091]: Restore Mode: always OFF
[15:56:24][C][switch.gpio:031]: Pin: GPIO7
[15:56:24][C][switch.gpio:068]: GPIO Switch 'S2'
[15:56:24][C][switch.gpio:091]: Restore Mode: always OFF
[15:56:24][C][switch.gpio:031]: Pin: GPIO6
[15:56:24][C][switch.gpio:068]: GPIO Switch 'S3'
[15:56:24][C][switch.gpio:091]: Restore Mode: always OFF
[15:56:24][C][switch.gpio:031]: Pin: GPIO5
[15:56:24][C][switch.gpio:068]: GPIO Switch 'S4'
[15:56:24][C][switch.gpio:091]: Restore Mode: always OFF
[15:56:24][C][switch.gpio:031]: Pin: GPIO4
[15:56:24][C][ili9xxx:094]: ili9xxx
[15:56:24][C][ili9xxx:094]: Rotations: 0 °
[15:56:24][C][ili9xxx:094]: Dimensions: 480px x 320px
[15:56:24][C][ili9xxx:095]: Width Offset: 0
[15:56:24][C][ili9xxx:096]: Height Offset: 0
[15:56:24][C][ili9xxx:102]: Color mode: 16bit
[15:56:24][C][ili9xxx:109]: 18-Bit Mode: YES
[15:56:24][C][ili9xxx:111]: Data rate: 40MHz
[15:56:24][C][ili9xxx:113]: Reset Pin: GPIO2
[15:56:24][C][ili9xxx:114]: CS Pin: GPIO1
[15:56:24][C][ili9xxx:115]: DC Pin: GPIO42
[15:56:24][C][ili9xxx:117]: Color order: BGR
[15:56:24][C][ili9xxx:118]: Swap_xy: YES
[15:56:24][C][ili9xxx:119]: Mirror_x: NO
[15:56:24][C][ili9xxx:120]: Mirror_y: NO
[15:56:24][C][ili9xxx:121]: Invert colors: YES
[15:56:24][C][ili9xxx:126]: Update Interval: never
[15:56:24][C][ledc.output:180]: LEDC Output:
[15:56:24][C][ledc.output:181]: Pin GPIO39
[15:56:24][C][ledc.output:182]: LEDC Channel: 0
[15:56:24][C][ledc.output:183]: PWM Frequency: 1000.0 Hz
[15:56:24][C][ledc.output:184]: Phase angle: 0.0°
[15:56:24][C][ledc.output:185]: Bit depth: 14
[15:56:24][C][template.number:050]: Template Number 'LVGL Screen timeout'
[15:56:24][C][template.number:050]: Unit of Measurement: 's'
[15:56:24][C][template.number:051]: Optimistic: YES
[15:56:24][C][template.number:052]: Update Interval: 60.0s
[15:56:24][C][gpio.binary_sensor:015]: GPIO Binary Sensor 'Push Button'
[15:56:24][C][gpio.binary_sensor:016]: Pin: GPIO3
[15:56:24][C][light:092]: Light 'Display Backlight'
[15:56:24][C][light:094]: Default Transition Length: 1.0s
[15:56:24][C][light:095]: Gamma Correct: 2.80
[15:56:24][C][psram:020]: PSRAM:
[15:56:24][C][psram:021]: Available: YES
[15:56:24][C][psram:024]: Size: 8191 KB
[15:56:24][C][FT63X6:070]: FT63X6 Touchscreen:
[15:56:24][C][FT63X6:071]: Address: 0x38
[15:56:24][C][FT63X6:072]: Interrupt Pin: GPIO21
[15:56:24][C][FT63X6:073]: Reset Pin: GPIO40
[15:56:24][C][FT63X6:074]: Update Interval: 0.050s
[15:56:24][C][lvgl:086]: LVGL:
[15:56:24][C][lvgl:087]: Display width/height: 480 x 320
[15:56:24][C][lvgl:088]: Rotation: 0
[15:56:24][C][lvgl:089]: Draw rounding: 2
[15:56:24][C][captive_portal:089]: Captive Portal:
[15:56:25][C][web_server:153]: Web Server:
[15:56:25][C][web_server:154]: Address: bath.local:80
[15:56:25][C][mdns:116]: mDNS:
[15:56:25][C][mdns:117]: Hostname: bath
[15:56:25][C][esphome.ota:073]: Over-The-Air updates:
[15:56:25][C][esphome.ota:074]: Address: bath.local:3232
[15:56:25][C][esphome.ota:075]: Version: 2
[15:56:25][C][esphome.ota:078]: Password configured
[15:56:25][C][safe_mode:018]: Safe Mode:
[15:56:25][C][safe_mode:020]: Boot considered successful after 60 seconds
[15:56:25][C][safe_mode:021]: Invoke after 10 boot attempts
[15:56:25][C][safe_mode:023]: Remain in safe mode for 300 seconds
[15:56:25][C][api:140]: API Server:
[15:56:25][C][api:141]: Address: bath.local:6053
[15:56:25][C][api:143]: Using noise encryption: YES
And below my Yaml code:
esphome:
name: bath
friendly_name: Bath
platformio_options:
build_flags: "-DBOARD_HAS_PSRAM"
board_build.arduino.memory_type: qio_opi
esp32:
board: esp32-s3-devkitc-1
variant: esp32s3
flash_size: 16MB # This is flash so prolly needs to be 8Mb
#partitions: "/config/esphome/custom_16MB.csv"
framework:
type: esp-idf
# version: latest
psram:
mode: octal
speed: 120MHz
# Enable logging
logger:
level: DEBUG
# Enable Home Assistant API
api:
encryption:
key: "o**************************="
ota:
- platform: esphome
password: "d******************a"
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_password
# Enable fallback hotspot (captive portal) in case wifi connection fails
ap:
ssid: "BathDisplay"
password: "1************d"
captive_portal:
web_server:
port: 80
## Configuring push buttons
binary_sensor:
- platform: gpio
pin: GPIO3 # The GPIO pin connected to the push button
name: "Push Button"
id: push_button
on_press:
then:
- switch.toggle: relay_s1
## Configuring the Relay Switch
switch:
- platform: gpio
pin: 7
name: "S1"
id: relay_s1
- platform: gpio
pin: 6
name: "S2"
id: relay_s2
- platform: gpio
pin: 5
name: "S3"
id: relay_s3
- platform: gpio
pin: 4
name: "S4"
id: relay_s4
# Remove the first 3 #'s to make the display work
# Configuring the SPI Pins
spi:
clk_pin: GPIO12
mosi_pin: GPIO11
miso_pin: GPIO13
# Assigning the i2c pins that can be used for i2c communication
i2c:
sda: GPIO38 # Probably the boot issue due to reserved for USB_D+ --> From 20 to 38
scl: GPIO9
scan: True
### Configuring the Display Part
display:
- platform: ili9xxx
model: ILI9488_A
dimensions:
height: 320
width: 480
offset_height: 0
offset_width: 0
transform:
swap_xy: true
mirror_x: false
mirror_y: false
auto_clear_enabled: false # Disabling autoclear to be compatible with LVGL
update_interval: never
color_order: BGR # RGB or BGR
invert_colors: true
data_rate: 40MHz
cs_pin: GPIO1
dc_pin: GPIO42
reset_pin: GPIO2
# show_test_card: true
# rotation: 90
#lambda: |-
# it.print(0, 0, id(my_font), "Hello, World!");
## Configuring things for ontrolling the display's ledled
# Define the LED pin as a PWM output
output:
- platform: ledc
pin: GPIO39
id: gpio_backlight_pwm
light:
- platform: monochromatic
output: gpio_backlight_pwm
name: "Display Backlight"
id: display_backlight
restore_mode: ALWAYS_ON
## Configuring the touchscreen part
touchscreen:
- platform: ft63x6
id: my_touchscreen
reset_pin: GPIO40
interrupt_pin: GPIO21 # boot issue due to reserved for USB_D- --> From 19 to 21
transform:
mirror_x: true
mirror_y: false
swap_xy: true
on_release:
- if:
condition: lvgl.is_paused
then:
- logger.log: "LVGL resuming"
- lvgl.resume:
- lvgl.widget.redraw:
- light.turn_on: display_backlight
## Configuring the SD card Slot (based on assumption if it 'll be supported ever by ESPHOME')
# sd_card:
# cs_pin: GPIO48 (This is the real connected GPIO port in preparation of potential support in the future)
# spi_id: spi_bus
font:
- file: "fonts/calibri.ttf"
id: my_font
size: 30
bpp: 4
extras:
- file: "fonts/materialdesignicons-webfont.ttf"
glyphs: [
"\U000F0142", # mdi:chevron-right
"\U000F0141", # mdi:chevron-left
"\U000F02DC", # mdi:home
]
# Setting a wall paper for use in lvgl
image:
- file: 'bath/bg/BackgroundWaterdrop.png'
id: wallpaper
resize: 480x320
type: RGB565
use_transparency: false
lvgl:
buffer_size: 100%
disp_bg_image: wallpaper
### START Theme Part
theme:
label:
text_font: my_font # set all your labels to use your custom defined font
button:
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x0077b3
border_width: 1
text_color: 0xFFFFFF
pressed: # set some button colors to be different in pressed state
bg_color: 0x006699
bg_grad_color: 0x00334d
checked: # set some button colors to be different in checked state
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
text_color: 0xfff300
buttonmatrix:
bg_opa: TRANSP
border_color: 0x0077b3
border_width: 0
text_color: 0xFFFFFF
pad_all: 0
items: # set all your buttonmatrix buttons to use your custom defined styles and font
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x0077b3
border_width: 1
text_color: 0xFFFFFF
text_font: my_font
pressed:
bg_color: 0x006699
bg_grad_color: 0x00334d
checked:
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
text_color: 0x005580
switch:
bg_color: 0xC0C0C0
bg_grad_color: 0xb0b0b0
bg_grad_dir: VER
bg_opa: COVER
checked:
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
bg_grad_dir: VER
bg_opa: COVER
knob:
bg_color: 0xFFFFFF
bg_grad_color: 0xC0C0C0
bg_grad_dir: VER
bg_opa: COVER
slider:
border_width: 1
border_opa: 80%
bg_color: 0xcccaca
bg_opa: 80%
indicator:
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
bg_grad_dir: VER
bg_opa: COVER
knob:
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x0077b3
border_width: 1
text_color: 0xFFFFFF
style_definitions:
- id: header_footer
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_opa: TRANSP
radius: 0
pad_all: 0
pad_row: 0
pad_column: 0
border_color: 0x0077b3
text_color: 0xFFFFFF
width: 100%
height: 30
### END Theme Part
### START Page navigation footer
top_layer:
widgets:
- buttonmatrix:
align: bottom_mid
styles: header_footer
pad_all: 0
outline_width: 0
id: top_layer
items:
styles: header_footer
rows:
- buttons:
- id: page_prev
text: "\U000F0141" #"\uF053"
on_press:
then:
lvgl.page.previous:
- id: page_home
text: "\U000F02DC" # "\uF015"
on_press:
then:
lvgl.page.show: main_page
- id: page_next
text: "\U000F0142" # "\uF054"
on_press:
then:
lvgl.page.next:
### END Page navigation footer
pages:
- id: main_page
bg_image_src: wallpaper
widgets:
- switch:
#x: 100
#y: 100
id: s1_lvglswitch
on_value:
then:
- switch.toggle: relay_s1
- button:
#x: 150
#y: 150
#width: 100
#height: 100
id: s1_lgvlbtn
checkable: false
align: center
widgets:
- label:
align: center
text: "Relay_S1"
on_release:
then:
- switch.toggle: relay_s1
- id: led_page
bg_image_src: wallpaper
widgets:
- button:
#x: 150
#y: 150
#width: 100
#height: 100
id: s2_lgvlbtn
checkable: false
align: center
widgets:
- label:
align: center
text: "Relay_S2"
on_release:
then:
- switch.toggle: relay_s2
- id: settings
bg_image_src: wallpaper
widgets:
- label:
text: Display Brightness
- slider:
id: backlight_pwm_slider
x: 50
y: 100
width: 220
height: 30
pad_all: 8
min_value: 30
max_value: 100
on_release:
then:
- light.turn_on:
id: display_backlight # ID of the to be controlled light source
brightness: !lambda 'return x / 100.0;'
on_idle:
timeout: !lambda "return (id(display_timeout).state * 1000);" # was 1000 for 10s
then:
- logger.log: "LVGL is idle"
- light.turn_off: display_backlight
- lvgl.pause:
number:
- platform: template
name: LVGL Screen timeout
optimistic: true
id: display_timeout
unit_of_measurement: "s"
initial_value: 20
restore_value: true
min_value: 1
max_value: 180
step: 5
mode: box
Yeah I knew but about IPS having something to do with the display itself. I already found out I had to invert the colors, but now with your comment I know why and it also solves the IPS vs TN code riddle thnx.
I don’t see anything particularly wrong from the log output. The banding in the image is probably because the source image has limited colour depth - no obvious reason for your config to mess it up.
Oops. That’s the funny fact of AliExpress, I constantly needs to change my language to english in my account. Everytime I come back, I’t set back to my native language (Dutch) :-(.
But actually I knew this, so gotta pay attentio to it. I replaced the link in the original post.
Good to hear there are no complains about the Guition Display If I got one I’ll make sure my experience will find it’s way here
Thnx I’ve looked into that one and but the image looks okay on my computer screen and also the gradient on the button which is generated by the LVGL component is also experiencing the same.
I resized another image to my displays resolution (480x320) and uploaded it to my config and turned off image resizing (to make sure the issue doesn’t rely in the resize feature of the Esphome’s Image component.
I guess there are no differences but this picture visualize the issue better than ever before.
This is the resized image I’ve set:
and this is what it actually looks like on the display:
I also saw in the logs that Indeed as you said the ILI9488 uses 18bit and the color is set to 16 bit.
As I said earlier it looks like 8 bit graphics but perhaps I’m looking in the wrong direction as the logs state 16bit.
I slightly got a feeling I got an uncommon issue with my display (and I don’t like uncommon issues )
Could it be that my display is broken or something? Is there anyone else willing to test this on an ILI9488 with my yaml?
I’ve asked the reseller of the display about the SPI code (in all my desperateness I hoped it would led me to a solution). The reseller came back with several pieces of code. One of them seems like a partial solution to mimize the image banding:
But the code looks like some kind of Arduino code or so, I guess this should be done by the developer of esphome?
Ill paste the contents of the several txt files and their filenames below:
VCOM–uniformity of glow and burnout.txt
The most important parameter for setting the uniformity of glow and burnout is -VCOM.
The burnout does not disappear completely, but it becomes noticeably less.
writecommand(0xC5);
writedata(0x00);
writedata(0x4D); <--- !!!
writedata(0x80);
invert the colors.txt (i’m sure this is already done by the Display component invert-colors: true)
It is also important to invert the colors, but it is simple, anyone can do it.
writecommand (0x21);
writecommand(0xC5);
writedata(0x00);
writedata(0x4D); // <--- important!!! -VCOM = -0.79688V
writedata(0x80);
writecommand (0x21); //inverse colors for IPS
Thanks again for your input I saw that section but didn’t recognized it as this was the way to put that coe
I tried and partly suceeded as not all code was accepted when uploading.
Of course the part of color inversing and other stufff that already got done by the display component wasn’t necessary and I left that away.
I tried every with this piece of code:
I could succesfully upload it but it didn’t solved the issue, it actually didn’t changed anything.
In the end I tried as far as I know everything possible and with your help even more and I still couldn’t solve the image burnout/banding. So I decided to return the device and buy another one with another display driver.
At first I wanted to buy a guition ESP32-S3 display but I turned Ali inside/out and discovered that there simply isn’t a guition 3.5" or 4.3" display that runs an ESPHOME compatible display driver.
To be honest I find it pretty hard to find a suitable display for ESPHome. I really like ESPHome but it would be great if drivers that are used by Guition were also supported like:
St7262
ST3401A AXS15231B
Thank you all very much for your input (very very appreciated), up to the next one
But here you see navigation foorter issue and slightly a bit of the coloring issue.
, does this clarify anything or doesn’t it make any sense?
)
