Add Recipe for WaveShare ESP32S3 Round 1.28" LCD with Touch

[karl-petter]

WIP: Have some issues with the generated YAML

[karl-petter]

Currently this recipe generates code with some dual sections. See the attached example with a circle and a simple Hello text. Also have issued with the designer to use the latest version from my branch. I forked the repo, created my own branch. Cloned that onto my Home Assistant. Each time after pushing a commit to that branch I do:

git pull
cp -r reterminal_dashboard ../../../../config/custom_components

Doing less ../../../../config/custom_components/reterminal_dashboard/frontend/hardware/waveshare-esp32-s3-touch-lcd-1.28.yaml clearly shows that it is the latest version there. Some cache spooking or what is going on?

Here is the latest generated yaml when comparing to this PR it obviously misses the new substitutions like name:

# ============================================================================
# ESPHome YAML - Generated by ESPHome Designer
# ============================================================================
# TARGET DEVICE: Waveshare Touch LCD 1.28 1.28" 240x240
#         - https://www.waveshare.com/esp32-s3-touch-lcd-1.28.htm
#         - Display Platform: ili9xxx
#         - PSRAM: Yes (Octal, 80MHz)
#         - Touchscreen: CST816S (I2C)
#         - Framework: ESP-IDF with execute_from_psram
# ============================================================================
#
# ============================================================================
#
# SETUP INSTRUCTIONS:
#
# STEP 1: Copy the Material Design Icons font file
#         - From this repo: resources/fonts/materialdesignicons-webfont.ttf
#         - To ESPHome: /config/esphome/fonts/materialdesignicons-webfont.ttf
#         (Create the fonts folder if it doesn't exist)
#
# STEP 2: Create a new device in ESPHome
#         - Click "New Device"
#         - Name: your-device-name
#         - Select: ESP32-S3
#         - Framework: ESP-IDF (Required for this device)
#
# STEP 3: REPLACE your entire YAML with this generated output
#         (This profile includes full esphome: and esp32: sections)
#
# ============================================================================

substitutions:
  #GPIO pins for the LCD screen
  rstpin:  GPIO14
  dcpin:   GPIO8
  blpin:   GPIO2
  clkpin:  GPIO10
  mosipin: GPIO11
  misopin: GPIO12
  cspin:   GPIO9
  # GPIO pins for i2c
  sdapin:  GPIO6
  sclpin:  GPIO7
  # GPIO pins for the IMU QMI8658C
  imuint1pin: GPIO4
  imuint2pin: GPIO3
  # GPIO pins for Touchpanel
  tpintpin: GPIO5
  tprstpin: GPIO13
  # GPIO pins battery
  batadcpin: GPIO1

esphome:
  min_version: 2025.12.0
  name: waveshare-round-lcd-128
  friendly_name: WaveShare Round LCD 1.28"

esp32:
  board: waveshare_esp32s3_touch_lcd_128
  variant: esp32s3
  flash_size: 16MB
  framework:
    type: esp-idf
    advanced:
       execute_from_psram: true
    sdkconfig_options:
      CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: "y"
      CONFIG_ESP32S3_DATA_CACHE_64KB: "y"
      CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
      CONFIG_SPIRAM_RODATA: y

psram:
  mode: octal
  speed: 80MHz

preferences:
  flash_write_interval: 5min

logger:

spi:
  mosi_pin: $mosipin
  clk_pin: $clkpin

i2c:
  sda: $sdapin
  scl: $sclpin

touchscreen:
  platform: cst816
  id: my_touchscreen
  interrupt_pin: $tpintpin
  reset_pin: $tprstpin
    
output:
  - platform: ledc
    pin: $blpin
    id: backlight_pwm

light:
  - platform: monochromatic
    output: backlight_pwm
    name: "Display Backlight"
    id: back_light

display:
  - platform: ili9xxx
    model: GC9A01A
    id: waveshare_round_128
    invert_colors: true
    cs_pin: $cspin
    update_interval: never
    auto_clear_enabled: false
    color_order: RGB
    pclk_frequency: 16MHz
    dimensions:
      width: 240
      height: 240
    reset_pin: $rstpin
    dc_pin:
      number: $dcpin
    lambda: |-
      const auto COLOR_WHITE = Color(255, 255, 255);
      const auto COLOR_BLACK = Color(0, 0, 0);
      const auto COLOR_RED = Color(255, 0, 0);
      const auto COLOR_GREEN = Color(0, 255, 0);
      const auto COLOR_BLUE = Color(0, 0, 255);
      const auto COLOR_YELLOW = Color(255, 255, 0);
      const auto COLOR_ORANGE = Color(255, 165, 0);
      auto color_off = COLOR_WHITE;
      auto color_on = COLOR_BLACK;

      auto extract_time = [](const char* iso_str) -> std::string {
          // Expected format: YYYY-MM-DDTHH:MM:SS or similar
          std::string s(iso_str);
          if (s.length() >= 16) return s.substr(11, 5);
          return "";
      };

      int currentPage = id(display_page);
      if (currentPage == 0) {
        // page:name "Page 1"
        // page:dark_mode "inherit"
        // page:refresh_type "interval"
        // page:refresh_time ""
        // Clear screen for this page
        it.fill(COLOR_WHITE);
        color_off = COLOR_WHITE;
        color_on = COLOR_BLACK;
        // widget:shape_circle id:w_mjlzuodtbz5nx type:shape_circle x:20 y:20 w:200 h:200 fill:false border:1 color:black border_color:black 
        for (int i = 0; i < 1; i++) {
          it.circle(120, 120, 100 - i, COLOR_BLACK);
        }
        // widget:text id:w_mjm03m8fm12st type:text x:60 y:100 w:120 h:40 text:"Hello!" font_family:"Roboto" font_size:20 font_weight:400 italic:false color:black text_align:CENTER 
        it.printf(60 + 120/2, 100 + 40/2, id(font_roboto_400_20), COLOR_BLACK, TextAlign::CENTER, "Hello!");
      }


# ------------------------------------
# Hardware Recipe / Package Content
# ------------------------------------
# ============================================================================
# ESPHome YAML - Generated by ESPHome Designer
# ============================================================================
# TARGET DEVICE: Waveshare Touch LCD 1.28 1.28" 240x240
#         - https://www.waveshare.com/esp32-s3-touch-lcd-1.28.htm
#         - Display Platform: ili9xxx
#         - PSRAM: Yes (Octal, 80MHz)
#         - Touchscreen: CST816S (I2C)
#         - Framework: ESP-IDF with execute_from_psram
# ============================================================================
#
# ============================================================================
#
# SETUP INSTRUCTIONS:
#
# STEP 1: Copy the Material Design Icons font file
#         - From this repo: resources/fonts/materialdesignicons-webfont.ttf
#         - To ESPHome: /config/esphome/fonts/materialdesignicons-webfont.ttf
#         (Create the fonts folder if it doesn't exist)
#
# STEP 2: Create a new device in ESPHome
#         - Click "New Device"
#         - Name: your-device-name
#         - Select: ESP32-S3
#         - Framework: ESP-IDF (Required for this device)
#
# STEP 3: REPLACE your entire YAML with this generated output
#         (This profile includes full esphome: and esp32: sections)
#
# ============================================================================

substitutions:
  #GPIO pins for the LCD screen
  rstpin:  GPIO14
  dcpin:   GPIO8
  blpin:   GPIO2
  clkpin:  GPIO10
  mosipin: GPIO11
  misopin: GPIO12
  cspin:   GPIO9
  # GPIO pins for i2c
  sdapin:  GPIO6
  sclpin:  GPIO7
  # GPIO pins for the IMU QMI8658C
  imuint1pin: GPIO4
  imuint2pin: GPIO3
  # GPIO pins for Touchpanel
  tpintpin: GPIO5
  tprstpin: GPIO13
  # GPIO pins battery
  batadcpin: GPIO1

esphome:
  min_version: 2025.12.0
  name: waveshare-round-lcd-128
  friendly_name: WaveShare Round LCD 1.28"

esp32:
  board: waveshare_esp32s3_touch_lcd_128
  variant: esp32s3
  flash_size: 16MB
  framework:
    type: esp-idf
    advanced:
       execute_from_psram: true
    sdkconfig_options:
      CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: "y"
      CONFIG_ESP32S3_DATA_CACHE_64KB: "y"
      CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
      CONFIG_SPIRAM_RODATA: y

psram:
  mode: octal
  speed: 80MHz

preferences:
  flash_write_interval: 5min

logger:

spi:
  mosi_pin: $mosipin
  clk_pin: $clkpin

i2c:
  sda: $sdapin
  scl: $sclpin

touchscreen:
  platform: cst816
  id: my_touchscreen
  interrupt_pin: $tpintpin
  reset_pin: $tprstpin
    
output:
  - platform: ledc
    pin: $blpin
    id: backlight_pwm

light:
  - platform: monochromatic
    output: backlight_pwm
    name: "Display Backlight"
    id: back_light

display:
  - platform: ili9xxx
    model: GC9A01A
    id: waveshare_round_128
    invert_colors: true
    cs_pin: $cspin
    update_interval: never
    auto_clear_enabled: false
    color_order: RGB
    pclk_frequency: 16MHz
    dimensions:
      width: 240
      height: 240
    reset_pin: $rstpin
    dc_pin:
      number: $dcpin
    # __LAMBDA_PLACEHOLDER__


# ====================================
# Device Settings
# ====================================
# Orientation: landscape
# Dark Mode: disabled
# Power Strategy: Full Power (Always On)
# ====================================

globals:
  - id: display_page
    type: int
    restore_value: true
    initial_value: '0'
  - id: page_refresh_default_s
    type: int
    restore_value: true
    initial_value: '600'
  - id: page_refresh_current_s
    type: int
    restore_value: false
    initial_value: '60'

http_request:
  verify_ssl: false
  timeout: 20s

time:
  - platform: homeassistant
    id: ha_time

button:
  - platform: template
    name: "Next Page"
    on_press:
      then:
        - lambda: |-
            if (id(display_page) < 0) {
              id(display_page) += 1;
            } else {
              id(display_page) = 0;
            }
        - component.update: my_display
  - platform: template
    name: "Previous Page"
    on_press:
      then:
        - lambda: |-
            if (id(display_page) > 0) {
              id(display_page) -= 1;
            } else {
              id(display_page) = 0;
            }
        - component.update: my_display
  - platform: template
    name: "Refresh Display"
    on_press:
      then:
        - component.update: my_display
  - platform: template
    name: "Go to Page 1"
    on_press:
      then:
        - lambda: 'id(display_page) = 0;'
        - component.update: my_display

font:
  - file:
      type: gfonts
      family: Roboto
      weight: 400
    id: font_roboto_400_20
    size: 20
    glyphs: ["\U00000020", "\U00000021", "\U00000022", "\U00000023", "\U00000024", "\U00000025", "\U00000026", "\U00000027", "\U00000028", "\U00000029", "\U0000002a", "\U0000002b", "\U0000002c", "\U0000002d", "\U0000002e", "\U0000002f", "\U00000030", "\U00000031", "\U00000032", "\U00000033", "\U00000034", "\U00000035", "\U00000036", "\U00000037", "\U00000038", "\U00000039", "\U0000003a", "\U0000003b", "\U0000003c", "\U0000003d", "\U0000003e", "\U0000003f", "\U00000040", "\U00000041", "\U00000042", "\U00000043", "\U00000044", "\U00000045", "\U00000046", "\U00000047", "\U00000048", "\U00000049", "\U0000004a", "\U0000004b", "\U0000004c", "\U0000004d", "\U0000004e", "\U0000004f", "\U00000050", "\U00000051", "\U00000052", "\U00000053", "\U00000054", "\U00000055", "\U00000056", "\U00000057", "\U00000058", "\U00000059", "\U0000005a", "\U0000005b", "\U0000005c", "\U0000005d", "\U0000005e", "\U0000005f", "\U00000060", "\U00000061", "\U00000062", "\U00000063", "\U00000064", "\U00000065", "\U00000066", "\U00000067", "\U00000068", "\U00000069", "\U0000006a", "\U0000006b", "\U0000006c", "\U0000006d", "\U0000006e", "\U0000006f", "\U00000070", "\U00000071", "\U00000072", "\U00000073", "\U00000074", "\U00000075", "\U00000076", "\U00000077", "\U00000078", "\U00000079", "\U0000007a", "\U0000007b", "\U0000007c", "\U0000007d", "\U0000007e", "\U000000B0", "\U000000B1", "\U000000B2", "\U000000B3", "\U000000B5", "\U000000A3", "\U000000A5", "\U000000A9", "\U000000AE", "\U000000D7", "\U000000F7", "\U000003BC", "\U000003A9", "\U000020AC", "\U00002122"]
script:
  - id: manage_run_and_sleep
    mode: restart
    then:
      - logger.log: "Waiting for sync (Generic/E1001)..."
      - wait_until:
          condition:
            lambda: 'return id(ha_time).now().is_valid() && api_is_connected();'
          timeout: 60s
      - delay: 5s # Grace period for data propagation
      - lambda: |-
          if (!id(ha_time).now().is_valid()) {
            ESP_LOGW("script", "Time sync failed/invalid! Sleeping for 1 hour to retry.");
            return;
          }

      # Regular Run
      - if:
          condition:
            lambda: 'return !id(ha_time).now().is_valid();'
          then:
            - delay: 2000ms
            - script.execute: manage_run_and_sleep
          else:
            - lambda: |-
                int page = id(display_page);
                int interval = id(page_refresh_default_s);
                switch (page) {
                  default:
                    break;
                }
                if (interval < 60) {
                  interval = 60;
                }
                id(page_refresh_current_s) = interval;
                ESP_LOGI("refresh", "Next refresh in %d seconds for page %d", interval, page);
            

            - component.update: my_display
      
            - delay: !lambda 'return id(page_refresh_current_s) * 1000;'
            - script.execute: manage_run_and_sleep

[koosoli]

Thank you for putting work into this, can of course not pull as long as it is not working.
I will have a look at it. Do you have a link of the exact screen you are using? I will try to ask waveshare to send me one so that I can verify.

[karl-petter]

Happy to help out and make your great work be even better! The link is provided in the TARGET DEVICE 😄 And here it is too https://www.waveshare.com/esp32-s3-touch-lcd-1.28.htm but do not put time into the device details. I'll sort that out but of course ask if you can get one 😄

I changed to v0.8.2B6 but kept my device file. It behaves the same. But noticed when I switch to the ones that do not have (untested) in their name the "Hardware Recipe / Package Content" section is not duplicated. But when I select any of the "untested" it is! Also noticed there and no files under frontend/hardware for the not-untested like M5Paper. Are they somehow different? Checked the code and they seems to be treated completely different and implemented in devices.js. How come?

[koosoli]

Thanks for the link and the kind words :-)

Device.js is my "old" way how I implemented all the hardware Profils, it works very well but it will not work for the recipe idea. So I think the recipe mechanism is still buggy with all the dublicate problems, so I need to analyse this and fix it. Once it works I think all new hardware will be implemented this way, but one other downside is that unfortunately this will not work offline with file html :-/