My issue was unfixable. mirror_x would not change the direction of the coordinates on the touchscreen, irrespective of whether or not mirror_x was true or false.
So in one specific orientation, I have to have one of the axis incrementing in the wrong direction. All other rotations are fine.
On another touchscreen device i have, mirror_x seems to work fine, so it seems to be CYD specific issue for me.
I followed the OP github to get this working and most works how i expect. I am just having an issue with some icons.
I have
<<: !include
file: ../stateful.yaml
vars:
uid: ${uid}
entity_id: ${entity_id}
width: ${width}
height: ${height}
icon_on: "\U000F0438"
icon_off: "\U000F0AD8"
text: ${text}
on_short_click:
- homeassistant.action:
action: switch.toggle
data:
entity_id: ${entity_id}
set however on the display the icons show up as a square box. They should be the radiator on/off icons. I am not sure what I am missing or how to know which icons do and do not work.
For another button i have F0906 and F0903 which is power standby and power off, the standby works but on the power off.
And I see what I missed. Needed to add them to the glyphs.yaml
Glad you figured it out (adding them to the list in fonts/glyphs.yaml). It’s not documented anywhere and not obvious.
yeah, was reading the Esphome LVGL Graphics documentation and somewhere it mentions to load only the ones you need to save space and looked in the source and saw glyphs.yaml and realize as soon as I opened it what it did.
Your git was a huge help. Thanks
Hi all - I’ve tried the broken-out GitHub files, and the basic config above with and without some rotation/mirror settings but each time I get 2/3 of the screen looking mostly ok (Hello World with some artifacts), and artifacts throughout the other 1/3. Can anyone post another simple version I could try?
Using this device which I’ve assumed was the same but maybe isn’t?
as usual, I got it working shortly after posting despite a good bit of trying before posting.
Here is what worked for me.
esp32:
board: esp32dev
framework:
type: arduino
i2c:
- sda: 27
scl: 22
scan: true
spi:
- id: tft
clk_pin: 14
mosi_pin: 13
miso_pin:
number: 12
ignore_strapping_warning: true
- id: touch
clk_pin: 25
mosi_pin: 32
miso_pin: 39
output:
- id: backlight_pwm
platform: ledc
pin: 21
- id: output_red
platform: ledc
pin: 4
inverted: true
- id: output_green
platform: ledc
pin: 16
inverted: true
- id: output_blue
platform: ledc
pin: 17
inverted: true
light:
- id: backlight
platform: monochromatic
output: backlight_pwm
name: Display Backlight
restore_mode: ALWAYS_ON
- id: led
platform: rgb
red: output_red
green: output_green
blue: output_blue
restore_mode: ALWAYS_OFF
# sensor:
# - platform: adc
# pin: 34
# name: "Brightness"
# update_interval: 60s
display:
- id: main_display
platform: ili9xxx
model: ILI9341
spi_id: tft
cs_pin:
number: 15
ignore_strapping_warning: true
dc_pin:
number: 2
ignore_strapping_warning: true
invert_colors: false
update_interval: never
auto_clear_enabled: false
dimensions:
height: 240
width: 320
touchscreen:
- id: main_touchscreen
platform: xpt2046
spi_id: touch
cs_pin: 33
interrupt_pin: 36
threshold: 400
calibration:
x_min: 280
x_max: 3860
y_min: 340
y_max: 3860
transform:
swap_xy: true
mirror_x: true
mirror_y: true
# 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:
buffer_size: 25%
I modified “ESP32-2432S028R.yaml” to make it work with my 2432S028 that has USB C and micro USB as pictured bellow
I added comments with original values and added lines
esp32:
board: esp32dev
framework:
type: arduino
i2c:
- sda: 27
scl: 22
scan: true
spi:
- id: tft
clk_pin: 14
mosi_pin: 13
miso_pin:
number: 12
ignore_strapping_warning: true
- id: touch
clk_pin: 25
mosi_pin: 32
miso_pin: 39
output:
- id: backlight_pwm
platform: ledc
pin: 21
- id: output_red
platform: ledc
pin: 4
inverted: true
- id: output_green
platform: ledc
pin: 16
inverted: true
- id: output_blue
platform: ledc
pin: 17
inverted: true
light:
- id: backlight
platform: monochromatic
output: backlight_pwm
name: Display Backlight
restore_mode: ALWAYS_ON
- id: led
platform: rgb
red: output_red
green: output_green
blue: output_blue
restore_mode: ALWAYS_OFF
# sensor:
# - platform: adc
# pin: 34
# name: "Brightness"
# update_interval: 60s
display:
- id: main_display
platform: ili9xxx
model: TFT 2.4R # original used to be LI9341
spi_id: tft
cs_pin:
number: 15
ignore_strapping_warning: true
dc_pin:
number: 2
ignore_strapping_warning: true
invert_colors: true # original used to be false
color_palette: 8BIT # added this line
update_interval: never
auto_clear_enabled: false
transform: # added this line
swap_xy: true
mirror_x: false
dimensions: #added this line
height: 320
width: 240
touchscreen:
- id: main_touchscreen
platform: xpt2046
spi_id: touch
cs_pin: 33
interrupt_pin: 36
threshold: 400
calibration:
x_min: 280
x_max: 3860
y_min: 340
y_max: 3860
transform:
mirror_x: false # original used to be true
mirror_y: true #added this line
swap_xy: false #added this line
# 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:
buffer_size: 25%
as most of us i am not a programmer, but work hard to make it work
I used this starting point to create (modify really) my 2.8 resistive and 4.3 capacitive modifyng rotation and mirroring.
Now i want to go one step ahead, and change some settings like:
1-Use different widgets ,like slider to control a curtain position or meters to show the value of my thermostat
2-How can i make the board “beep” on keypress?
3-how can i put the display to sleep if no key press in two minutes?
I have several tablets running Home Assistant as displays, i used them for simplicity, but using this display is more challenging and interesting
I have a nice library for screens like this. It supports all of what you are looking for. You can add a button that controls something in Home Assistant with one line of code.
Out of curiosity, What should I be seeing on the screen when I install this?
Hello, how do we start with 2432S028R? I was going through documentation and got stuck at example config, because there was none for this device model. I have the variant without the R - 2432S028, recently purchased with USB-C.
Thanks!
I managed setting hardware.yaml to my screen type, but got this onto compilation:
Memory Type Usage Summary
┏━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━┳━━━━━━━━━━┳━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━┓
┃ Memory Type/Section ┃ Used [bytes] ┃ Used [%] ┃ Remain [bytes] ┃ Total [bytes] ┃
┡━━━━━━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━╇━━━━━━━━━━╇━━━━━━━━━━━━━━━━╇━━━━━━━━━━━━━━━┩
│ Flash Code │ 1002144 │ │ │ │
│ .text │ 1002144 │ │ │ │
│ Flash Data │ 822952 │ │ │ │
│ .rodata │ 822696 │ │ │ │
│ .appdesc │ 256 │ │ │ │
│ IRAM │ 84803 │ 64.7 │ 46269 │ 131072 │
│ .text │ 83775 │ 63.92 │ │ │
│ .vectors │ 1028 │ 0.78 │ │ │
│ DRAM │ 42380 │ 23.45 │ 138356 │ 180736 │
│ .bss │ 26144 │ 14.47 │ │ │
│ .data │ 16236 │ 8.98 │ │ │
└─────────────────────┴──────────────┴──────────┴────────────────┴───────────────┘
Total image size: 1926135 bytes (.bin may be padded larger)
Note: The reported total sizes may be smaller than those in the technical reference manual due to reserved memory and application configuration. The total flash size available for the application is not included by default, as it cannot be reliably determined due to the presence of other data like the bootloader, partition table, and application partition size.
RAM: [= ] 12.9% (used 42380 bytes from 327680 bytes)
Flash: [==========] 105.0% (used 1925879 bytes from 1835008 bytes)
Error: The program size (1925879 bytes) is greater than maximum allowed (1835008 bytes)
You can use the generic-display_modular.yaml. You just need to add the hardware file.
Thanks for your effort, got it working!
A 240x320px welcome screen would be perfect, this is now out of bounds at start. Or maybe there is a way to disable it?
Yes you could edit the code to change this screen or remove it.
I have edited the example yaml and it works, compiles and shows some of my switches already on 2432S028. Very nice and thanks for your effort! 
I have a few questions though -
I didn’t see that documented.
Thanks!
# Substitution variables used through the codebase
substitutions:
icon_font: mdi_icons_40
text_font: nunito_20
text_color: white
bg_color: black
button_on_color: "ep_orange"
button_off_color: "very_dark_gray"
icon_on_color: "yellow"
icon_off_color: "gray"
label_on_color: "white"
label_off_color: "gray"
button_text_color: "white"
# LCD back light modes - Code in backlight_time.yaml
# Set Day mode - starts at Sunrise - screen at 100%
touchscreen_daytime_brightness: "100%"
# Set Evening mode - starts at Sunset - screen at 50% (may need to be brighter for some screens)
touchscreen_nighttime_brightness: "50%"
# Set Night mode start time (default is midnight)
touchscreen_night_hour: "0" # Hour for night mode (0-23)
touchscreen_night_minute: "0" # Minute for night mode (0-59)
# Set touchscreen idle timeout - In night mode back light goes off after this amount of time
touchscreen_idle_timeout: "60s"
esphome:
name: "esp32-lvgl"
on_boot:
- priority: 400
then:
- script.execute: update_loading_page
logger:
level: debug
packages:
# Generic configuration for ESP32 screens
# SDL has no Wi-Fi
wifi: !include esphome-modular-lvgl-buttons/common/wifi.yaml
# Enable OTA updates with a status screen
ota_screen: !include esphome-modular-lvgl-buttons/common/ota.yaml
# All the colors
colors: !include esphome-modular-lvgl-buttons/common/color.yaml
# Some nice basic fonts
fonts: !include esphome-modular-lvgl-buttons/common/fonts.yaml
# 1000s of glyphs
glyphs: !include esphome-modular-lvgl-buttons/common/mdi_glyph_substitutions.yaml
# Some basic sensors
sensors: !include esphome-modular-lvgl-buttons/sensors/sensors_base.yaml
# Styles + Themes
theme_style: !include esphome-modular-lvgl-buttons/common/theme_style.yaml
# Harware description file (you need to add your hardware file here)
hardware: !include esphome-modular-lvgl-buttons/hardware/sunton-esp32-2432s028.yaml
# Basic boot screen with ESPHome logo and device diagnostic info
loading_screen: !include esphome-modular-lvgl-buttons/pages/loading_480px.yaml
# info screen - WiFi login, IP address, MAC address etc
info_screen: !include esphome-modular-lvgl-buttons/pages/info.yaml
# This section will add buttons and page to your screen using the ESPHome package system.
# Each package has all the code required for the button or page (LVGL, sensors, etc)
# Add a button the controls a light in HA
button_1: !include
file: esphome-modular-lvgl-buttons/buttons/switch_button.yaml
vars:
uid: button_1
row: 0
column: 0
text: Griesti
icon: $mdi_lightbulb
entity_id: "switch.darba_1"
# Add a button that displays the time
button_2: !include
file: esphome-modular-lvgl-buttons/buttons/switch_button.yaml
vars:
uid: button_2
row: 0
column: 1
text: Datora
icon: $mdi_lightbulb
entity_id: "light.datora_galds"
button_3: !include
file: esphome-modular-lvgl-buttons/buttons/switch_button.yaml
vars:
uid: button_3
row: 0
column: 2
text: Lod.g
icon: $mdi_lightbulb
entity_id: "light.lodesanas_galds"
button_4: !include
file: esphome-modular-lvgl-buttons/buttons/switch_button.yaml
vars:
uid: button_4
row: 1
column: 0
text: Dat2
icon: $mdi_lightbulb
entity_id: "light.datora_lamp"
button_5: !include
file: esphome-modular-lvgl-buttons/buttons/switch_button.yaml
vars:
uid: button_5
row: 1
column: 1
text: Lod.s
icon: $mdi_lightbulb
entity_id: "switch.lodesana_1_2"
# Add a dimmer light
# button_4: !include
# file: esphome-modular-lvgl-buttons/buttons/dimmer_light_button.yaml
# vars:
# uid: button_4
# row: 1
# column: 0
# row_span: 2 # optional make a button bigger then one cell
# text: RGB light
# icon: $mdi_string_lights
# entity_id: light.athom_rgb_light_d93662_rgb_light_strip
# button_4_page: !include
# file: esphome-modular-lvgl-buttons/pages/light_color.yaml
# vars:
# light_entity: "light.athom_rgb_light_d93662_rgb_light_strip"
# widget_name: "button_4"
# This is the main LVGL section. We start with a simple grid.
lvgl:
pages:
- id: main_page
layout: 3x3
styles: page_style
<<: !include esphome-modular-lvgl-buttons/widgets/swipe_navigation.yaml
widgets:
# You can use the package section above to add prebuilt button types or build your own custom button from scratch here.
- container:
id: button_12
grid_cell_x_align: stretch
grid_cell_y_align: stretch
grid_cell_row_pos: 2
grid_cell_column_pos: 2
grid_cell_row_span: 1
grid_cell_column_span: 1
# outline_width: 1 # debug code - This is for visualizing boundries remove for production
# outline_color: red # debug code - This is for visualizing boundries remove for production
widgets:
- label:
text_font: $text_font
align: center
text_color: white
text: "Cell 1,1"
# If you want to use other icons add them to the list here
font:
# http://materialdesignicons.com/cdn/7.4.47/
- file: 'https://github.com/Templarian/MaterialDesign-Webfont/raw/v7.4.47/fonts/materialdesignicons-webfont.ttf'
id: mdi_icons_40
size: 20
bpp: 8
glyphs: [
$mdi_bed, # mdi-bed - bedroom icon
$mdi_brightness_6, # mdi-brightness-6 - brightness slider icon
$mdi_bulkhead_light, # mdi-bulkhead-light - bulkhead fixture
$mdi_ceiling_fan_light, # mdi-ceiling-fan-light - ceiling fan with light
$mdi_ceiling_light, # mdi-ceiling-light - ceiling fixture
$mdi_chevron_down, # mdi-chevron-down - close/collapse button
$mdi_chevron_up, # mdi-chevron-up - back/expand button
$mdi_circle_opacity, # mdi-circle-opacity - saturation slider icon
$mdi_coach_lamp, # mdi-coach-lamp - outdoor coach light
$mdi_eyedropper, # mdi-eyedropper - spectrum mode toggle
$mdi_floor_lamp, # mdi-floor-lamp - floor lamp
$mdi_grid, # mdi-grid - grid mode toggle
$mdi_home, # mdi-home - home/back navigation
$mdi_information_box, # mdi-information-box - info screen
$mdi_lamp, # mdi-lamp - table lamp
$mdi_led_strip, # mdi-led-strip - LED strip light
$mdi_lightbulb, # mdi-lightbulb - generic bulb icon
$mdi_string_lights, # mdi-string-lights - decorative string lights
$mdi_track_light, # mdi-track-light - track lighting
$mdi_white_balance_sunny, # mdi-white-balance-sunny - color temp/sun icon
]
But it is 
take a look at this in the demo. And read the ESPHome LVGL docs.
# Add a button that goes to a different page
button_3: !include
file: esphome-modular-lvgl-buttons/buttons/page_button.yaml
vars:
uid: button_3
row: 1
column: 0
text: Info screen
icon: $mdi_information_box
click_page: info_screen
Good example of that here. Just a few lines of code are all that is required
Also check out all the docs here.
Take a look at this. Time is basically a sensor!
# Add a button that displays the time
button_2: !include
file: esphome-modular-lvgl-buttons/buttons/time_button.yaml
vars:
uid: button_2
row: 0
column: 5
text: 00:00
click_page: info_screen
Do we need to swap out the ESP32? I often run into too large program size error, with the weather components added its:
RAM: [= ] 12.0% (used 39380 bytes from 327680 bytes)
Flash: [==========] 134.4% (used 2467047 bytes from 1835008 bytes)
Error: The program size (2467047 bytes) is greater than maximum allowed (1835008 bytes)
Yes, I do not recommend running ESPHome on that screen unless you have a very simple design.
Get this one
Guition - ESP32-P4-jc4880p443