ESP32-S3 4.3inch Capacitive Touch Display from - waveshare

Okay I got the display displaying a test image, it is buggy and unstable though. Config below.

If anybody knows how to interact with touch interfaces to drive commands in home assistant it would be appreciated. I started looking at the lvgl stuff but that looks like its far too early in development to be useful.

esphome:
  name: esp-display
  friendly_name: ESP Display
  platformio_options:
    board_build.flash_mode: dio

esp32:
  board: esp32s3box
  framework:
    type: esp-idf

psram:
  mode: octal
  speed: 120M

# Enable logging
logger:
#  level: DEBUG

spi:
  clk_pin:
    number: 7
    allow_other_uses: true
  mosi_pin: GPIO6

i2c:
  sda: GPIO08
  scl: GPIO09

time:
  - platform: homeassistant
    id: time_ha
    timezone: -bzzt-

# Enable Home Assistant API
api:
  encryption:
    key: "-bzzt-"

ota:
  password: "-bzzt-"

wifi:
  ssid: -bzzt-
  password: -bzzt-

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Esp-Display Fallback Hotspot"
    password: "-bzzt-"

bluetooth_proxy:
  active: true

button:
  - platform: restart
    name: "Restart Device"

text_sensor:
  - platform: wifi_info
    ip_address:
      name: IP Address
    ssid:
      name: Connected SSID
    bssid:
      name: Connected BSSID
    mac_address:
      name: Mac Wifi Address
    scan_results:
      name: Latest Scan Results

sensor:
  - platform: wifi_signal
    name: "WiFi Signal Sensor"
    update_interval: 60s

  - platform: wifi_signal # Reports the WiFi signal strength/RSSI in dB
    name: "WiFi Signal dB"
    id: wifi_signal_db
    update_interval: 60s
    entity_category: "diagnostic"

captive_portal:
    
display:
  - platform: rpi_dpi_rgb
    auto_clear_enabled: false
    color_order: RGB
    pclk_frequency: 16MHz
    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:
      number: 7
      allow_other_uses: true
    hsync_back_porch: 30
    hsync_front_porch: 210
    hsync_pulse_width: 30
    vsync_back_porch: 4
    vsync_front_porch: 4
    vsync_pulse_width: 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
    lambda: |-
      int shift_x = (it.get_width()-310)/2;
      int shift_y = (it.get_height()-256)/2;
      for(auto i = 0; i<256; i++) {
        it.horizontal_line(shift_x+  0,i+shift_y,50, my_red.fade_to_white(i));
        it.horizontal_line(shift_x+ 50,i+shift_y,50, my_red.fade_to_black(i));

        it.horizontal_line(shift_x+105,i+shift_y,50, my_green.fade_to_white(i));
        it.horizontal_line(shift_x+155,i+shift_y,50, my_green.fade_to_black(i));

        it.horizontal_line(shift_x+210,i+shift_y,50, my_blue.fade_to_white(i));
        it.horizontal_line(shift_x+260,i+shift_y,50, my_blue.fade_to_black(i));
      }
      it.rectangle(shift_x+ 0, 0+shift_y, shift_x+ 310, 256+shift_y, my_yellow);

color:
  - id: my_blue
    blue: 100%
  - id: my_red
    red: 100%
  - id: my_green
    green: 100%
  - id: my_white
    red: 100%
    blue: 100%
    green: 100%
  - id: my_yellow
    hex: ffff00
1 Like

I loaded your code and the screen is flickering all over the place. There must be something missing.

I tied a few different settings to match this code that is supposed to work but it didn’t help.

The touch screen pin is listed as GPIO4 here.

So I added this code. But that did not seem to do anything

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
              );
2 Likes

Using 80MHz seems to get rid of the screen flickering.

psram:
  mode: octal
  speed: 80MHz
1 Like

SenseCAP Indicator would be fantastic if it had a speaker and microphone…

Works for me.

1 Like

After a few flashes/toying with settings I was able to get it to stop flickering too, at least with the RGB BW fill in Real.Problems post.

Tried adding image or graph display components and maybe I missed having to add an include or something for it?

Linking .pioenvs/waveshare44/firmware.elf
/data/cache/platformio/packages/[email protected]+2021r2-patch5/bin/../lib/gcc/xtensa-esp32s3-elf/8.4.0/../../../../xtensa-esp32s3-elf/bin/ld: .pioenvs/waveshare44/src/esphome/components/display/display.o:(.literal._ZN7esphome7display7Display5graphEiiPNS_5graph5GraphENS_5ColorE+0x0): undefined reference to `esphome::graph::Graph::draw(esphome::display::Display*, unsigned short, unsigned short, esphome::Color)'
/data/cache/platformio/packages/[email protected]+2021r2-patch5/bin/../lib/gcc/xtensa-esp32s3-elf/8.4.0/../../../../xtensa-esp32s3-elf/bin/ld: .pioenvs/waveshare44/src/esphome/components/display/display.o: in function `esphome::display::Display::graph(int, int, esphome::graph::Graph*, esphome::Color)':
/data/build/waveshare44/src/esphome/components/display/display.cpp:388: undefined reference to `esphome::graph::Graph::draw(esphome::display::Display*, unsigned short, unsigned short, esphome::Color)'
/data/cache/platformio/packages/[email protected]+2021r2-patch5/bin/../lib/gcc/xtensa-esp32s3-elf/8.4.0/../../../../xtensa-esp32s3-elf/bin/ld: .pioenvs/waveshare44/src/main.o:(.literal._Z5setupv+0x208): undefined reference to `vtable for esphome::graph::Graph'
    lambda: |-
      it.graph(10, 20, id(single_wifi_graph));

graph:
  - id: single_wifi_graph
    sensor: wifi_signal_db
    duration: 1h
    width: 151
    height: 51

I stumbled across this PR that implements LVGL natively into esphome thanks to @clydebarrow. Since it hasn’t made it to release yet, you have to reference the external component.

external_components:
  - source: github://pr#6363
    refresh: 0min
    components: [lvgl]

Here is an example code that is working for me:

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

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

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
              );

lvgl:
  displays:
    - display_id: my_display
  buffer_size: 25%
  pages:
    - id: clock_page
      widgets:
        - obj: # Clock container
            height: size_content
            width: 800 #240
            align: CENTER
            pad_all: 0
            border_width: 0
            bg_color: 0xFFFFFF
            widgets:
              - meter: # Clock face
                  height: 400 #220
                  width: 400 #220
                  align: center
                  bg_opa: TRANSP
                  text_color: 0x000000
                  scales:
                    - ticks: # minutes scale
                        width: 1
                        count: 61
                        length: 10
                        color: 0x000000
                      range_from: 0
                      range_to: 60
                      angle_range: 360
                      rotation: 270
                      indicators:
                        - line:
                            id: minute_hand
                            width: 3
                            color: 0xa6a6a6
                            r_mod: -4
                            value: 0
                    - ticks: # hours scale
                        width: 1
                        count: 12
                        length: 1
                        major:
                          stride: 1
                          width: 4
                          length: 8
                          color: 0xC0C0C0
                          label_gap: 12
                      angle_range: 330
                      rotation: 300
                      range_from: 1
                      range_to: 12
                    - indicators:
                        - line:
                            id: hour_hand
                            width: 5
                            color: 0xa6a6a6
                            r_mod: -30
                            value: 0
                      angle_range: 360
                      rotation: 270
                      range_from: 0
                      range_to: 720

time:
  - platform: homeassistant
    id: time_comp

interval:
  - interval: 30s
    then:
      if:
        condition:
          time.has_time:
        then:
          - script.execute: time_update

script:
  - id: time_update
    then:
      - lvgl.indicator.update:
          id: minute_hand
          value: !lambda |-
            return id(time_comp).now().minute;
      - lvgl.indicator.update:
          id: hour_hand
          value: !lambda |-
            auto now = id(time_comp).now();
            return std::fmod(now.hour, 12) * 60 + now.minute;
2 Likes

has anyone had any luck with this device?

Yes, the display is supported in the current ESPHome release: RPI_DPI_RGB Display Driver — ESPHome

You realistically need to use LVGL, the ESPHome display drawing operations are too slow for the size of the screen, and LVGL is still in PR, but usable as an external component. See LVGL implementation for ESPHome by clydebarrow · Pull Request #6363 · esphome/esphome · GitHub

2 Likes

I just got mine from Amazon today. Going to use what everyone has posted as a starting point, and once I have a decent integration going, I’ll post up the code here and on my github

2 Likes

Hey folks,

just got mine as well. Any updates here on how to get it running?

Just got my ESP32-S3-Touch-LCD-7 in today – I’m able to get the clock display using the config above, now checking for 7" specific settings.

You need to define touch screen under section lvgl

Touchscreens:

  • touchscreen_id:

Is there a way to lower the backlight or turn of the screen on the 4.3" model when inactive? My unit gets hot running 24/7

Hello, do you know if it is possible to connect multiple sensors to the board? I would like to connect one relay and one DHT sensor.

You can connect as many sensors as you like on the I2C bus, and you could use an I2C relay board as well. There no other GPIO pins available though.

Has anyone managed to change the brightness level on this device?

I’m missing something – I can detect touches on the screen but I’m not clear how to wire the touch events to lvgl buttons so they can be pressed.

Add a touchscreen key to the LVGL config. The display is auto-detected, but not touchscreen, it has to be specified explicitly.

Tips I learned for calling a service (such as turning on a light) from Home assistant using a button:

  1. The “touchscreen” comments from Clyde and styphonthal above need to be included (see code snippet below) as this was not part of the clock code above.

  2. The device has to be configured back in home assistant to allow it to make a service call (see note below from the esp lvgl cookbook - LVGL: Tips and Tricks — ESPHome).

  3. For weird compile failures relating to c library code and not YAML, make sure to “clean build files”.

Note
Many of the examples below call services in Home Assistant; however, Home Assistant does not allow such service calls by default. For each ESPHome device which will call services, you must explicitly enable this setting in Home Assistant. This may be done when the device is initially adopted or by using the Configure option in the “devices” list of the ESPHome integration.


binary_sensor:
  - platform: homeassistant
    id: remote_light
    entity_id: light.office_light
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: light_btn
          state:
            checked: !lambda return x;



lvgl:
    displays:
      - display_id: my_display
    buffer_size: 25%

    touchscreens:
      - touchscreen_id: my_touch

    pages:  
      - id: light_page
        widgets:
          - btn:
              id: light_btn
              width: 200
              height: 120
              checkable: true
              widgets:
                - label:
                    align: center
                    text: 'Office light'
              on_click:
                - homeassistant.service:
                    service: light.toggle
                    data:
                      entity_id: light.office_light
1 Like