Skip to content

New Example #5

@mik79

Description

@mik79

Hi,

sorry i'm not be familiar with Github. I made a yaml file for the 3.2 inch display from lcd wiki [https://www.lcdwiki.com/3.2inch_ESP32-32E_Display].

Maybe you can publish it.

#
# Basic yaml code to get the ESP32-E32R32P working in Home Assistant as a 12-button "Stream Deck"
# ============================================================
# Author: Aaron Stewart @makeitworktech, with the help of ChatGPT.
# GitHub: https://github.com/makeitworktech
#
# modified 25 Dec 2025 Michael to make E32R32P work
#
# ============================================================ 
# NOTE:
# In order for this to work you need to add the following settings in your secrets.yaml file:
# - api_key
# - ota_password
# - wifi_ssid
# - wifi_password
# - ap_password
#
# Create a folder named fonts in your ESPHome folder, and copy the 
# files fonts/Arimo-Regular.ttf and fonts/materialdesignicons-webfont.ttf there.
#
# ============================================================ 
# General ESPHome Setup
# ============================================================
# Change the naming below, they will be the names used in Home Assistant

substitutions:     # Modify these to fit your needs
  font_direcotry: C:\esphome-display\fonts\
  width: 320
  height: 240
  device_name: esp32-cyd-3pt2
  nice_name: ESP32-CYD-3.2in

# ESPHome naming
esphome:
  name: ${device_name}                  # Device hostname
  friendly_name: ${nice_name}           # Friendly name shown in Home Assistant
 
# The ESP32-2432S028 uses a standard ESP32-WROVER, so we use esp32dev
esp32:
  board: esp32dev
  framework:
    type: arduino

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: !secret api_key

# Set OTA password, enables updates via ESPHome
ota:
  platform: esphome
  password: !secret ota_password

# Setup WiFi credentials, references the wifi ssid and pass in secrets.yaml
wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

  # Enable fallback hotspot in case wifi connection fails
  ap:
    ssid: $device_name Fallback Hotspot
    password: !secret ap_password

# Allows captive portal access when in fallback mode
captive_portal:

# ============================================================ 
# ESPHome Display related setup
# ============================================================
# Create a font to use, add and remove glyphs as needed. 
font:
  - file:
      path: ${font_direcotry}Arimo-Regular.ttf  # Path to main font file
      type: local
    id: arimo48                                         # ID used to reference this font
    size: 48                                            # Font size
    glyphs:                                             # Characters to include in font. Only 
      - " .,°0123456789CF"                              # add characters you need to reduce memory usage.
  - file:                                               # Giving an ID for a larger size of that font.
      path: ${font_direcotry}Arimo-Regular.ttf
      type: local
    id: arimo14
    size: 14
    glyphs:
      - "0123456789"
  - file: ${font_direcotry}materialdesignicons-webfont.ttf         # Defining Material Design Icons as a font. This
    id: mdi_icons                                       # will allow us to use them as button icons.
    size: 48                                            # You can get these glyphs from the https://pictogrammers.com/library/mdi/
    glyphs:                                             # where you choose the icon, and then "copy glyph".
      - 󱁑  # mdi-led-strip-variant
      - 󰈐  # mdi-fan
      - 󰏘  # mdi-pallette
      - 󰤝  # mdi-wall-sconce-flat
      - 󰔍  # Cinema

# Defines the colors we want to use later for the different buttons.
# Per-button customizable colors
color:
  - id: room_bg_color
    hex: "000000"
  - id: default_button_bg_color
    hex: "000000"
  - id: default_button_pressed_bg_color
    hex: "D3D3D3"
  - id: btn_1_color
    hex: FF0000                    # Red
  - id: btn_2_color
    hex: FF7F00                    # Orange
  - id: btn_3_color
    hex: FFFF00                    # Yellow
  - id: btn_4_color
    hex: 00FF00                    # Green
  - id: btn_5_color
    hex: FF1493                    # Pink
  - id: btn_6_color
    hex: "800080"                  # Purple
  - id: btn_7_color
    hex: 0000FF                    # Blue
  - id: btn_8_color
    hex: 00FFFF                    # Aqua
  - id: btn_9_color
    hex: "FFFFFF"                  # White
  - id: btn_10_color
    hex: "FFFFFF"                  # White
  - id: btn_11_color
    hex: "FFFFFF"                  # White
  - id: btn_12_color
    hex: "FFFFFF"                  # White

# ============================================================ 
# Home Assistant related setup
# ============================================================

# ==== Lights ====
light:
# LCD backlight
  - platform: monochromatic
    output: backlight_pwm
    name: "Display Backlight"
    id: backlight
    restore_mode: ALWAYS_ON
# onboard rgb led
  - platform: rgb
    name: "Front LED"
    id: front_led
    restore_mode: ALWAYS_OFF
    red: led_red
    green: led_green
    blue: led_blue



# ==== Touch Button Sensors for Home Assistant ====
binary_sensor:
  - platform: template
    name: "Button 1"
    id: button_1_pressed
  - platform: template
    name: "Button 2"
    id: button_2_pressed
  - platform: template
    name: "Button 3"
    id: button_3_pressed
  - platform: template
    name: "Button 4"
    id: button_4_pressed
  - platform: template
    name: "Button 5"
    id: button_5_pressed
  - platform: template
    name: "Button 6"
    id: button_6_pressed
  - platform: template
    name: "Button 7"
    id: button_7_pressed
  - platform: template
    name: "Button 8"
    id: button_8_pressed
  - platform: template
    name: "Button 9"
    id: button_9_pressed
  - platform: template
    name: "Button 10"
    id: button_10_pressed
  - platform: template
    name: "Button 11"
    id: button_11_pressed
  - platform: template
    name: "Button 12"
    id: button_12_pressed

# These sensors mirror the state of Home Assistant entities on boot,
# or whenever the entity's state changes. 
text_sensor:
  - platform: homeassistant
    id: ts_office_ambient
    entity_id: light.office_ambient_lights
    on_value:
      then:
        - lvgl.widget.update:
            id: btn_10
            state:
              checked: !lambda return (0 == x.compare(std::string{"on"}));
              disabled: !lambda return ((0 == x.compare(std::string{"unavailable"})) or (0 == x.compare(std::string{"unknown"})));
        - lvgl.label.update:
            id: lbl_btn_10
            text: !lambda |-
              static char buf[10];
              std::string icon;
              if (0 == x.compare(std::string{"on"})) {
                  icon = "󱁑";  // mdi:led-strip-variant
              } else {
                  icon = "󱩋";  // mdi:led-strip-variant-off
              }
              snprintf(buf, sizeof(buf), "%s", icon.c_str());
              return buf;

  - platform: homeassistant
    id: ts_office_fan_plug
    entity_id: switch.office_fan_plug
    on_value:
      then:
        - lvgl.widget.update:
            id: btn_11
            state:
              checked: !lambda return (0 == x.compare(std::string{"on"}));
              disabled: !lambda return ((0 == x.compare(std::string{"unavailable"})) or (0 == x.compare(std::string{"unknown"})));
        - lvgl.label.update:
            id: lbl_btn_11
            text: !lambda |-
              static char buf[10];
              std::string icon;
              if (0 == x.compare(std::string{"on"})) {
                  icon = "󰈐";  // mdi:fan
              } else {
                  icon = "󰠝";  // mdi:fan-off
              }
              snprintf(buf, sizeof(buf), "%s", icon.c_str());
              return buf;

  - platform: homeassistant
    id: ts_office_light
    entity_id: light.office_light
    on_value:
      then:
        - lvgl.widget.update:
            id: btn_12
            state:
              checked: !lambda return (0 == x.compare(std::string{"on"}));
              disabled: !lambda return ((0 == x.compare(std::string{"unavailable"})) or (0 == x.compare(std::string{"unknown"})));
        - lvgl.label.update:
            id: lbl_btn_12
            text: !lambda |-
              static char buf[10];
              std::string icon;
              if (0 == x.compare(std::string{"on"})) {
                  icon = "󰤝";  // mdi:wall-sconce-flat
              } else {
                  icon = "󱟉";  // mdi:wall-sconce-flat-outline
              }
              snprintf(buf, sizeof(buf), "%s", icon.c_str());
              return buf;



# ============================================================ 
# Touchscreen Display related setup
# ============================================================

# SPI bus for TFT display and touch controller
spi:
  - id: tft
    clk_pin: GPIO14
    mosi_pin: GPIO13
    miso_pin: GPIO12


# Set a pin to control the backlight
output:
  - platform: ledc
    pin: GPIO27
    id: backlight_pwm
    frequency: 1000 Hz
    inverted: false
  - platform: ledc
    pin: GPIO22
    id: led_red
    inverted: true
  - platform: ledc
    pin: GPIO17  
    id: led_blue 
    inverted: true
  - platform: ledc
    pin: GPIO16  
    id: led_green 
    inverted: true

# Tracks if recent touch occurred
globals:
  - id: recent_touch
    type: bool
    restore_value: no
    initial_value: "true"

# Defining the touchscreen for later use
touchscreen:
  platform: xpt2046
  spi_id: tft
  cs_pin: GPIO33
  interrupt_pin: GPIO36
  update_interval: 50ms
  threshold: 400
  calibration:
    x_min: 180
    x_max: 3800
    y_min: 240
    y_max: 3860
  transform:
    swap_xy: true
    mirror_x: true  # If you need to swap bottom to top for touch, uncomment this so it registers correctly
  on_touch:
    then:
      - light.turn_on: backlight
      - lambda: |-
          id(recent_touch) = true;

# Defining the display type and properties, and defining the buttons displayed.
display:
  - platform: ili9xxx
    color_palette: 8BIT               # Lower memory usage
    model: ST7789V                    # Display driver model
    spi_id: tft
    cs_pin: 
      number: GPIO15
      ignore_strapping_warning: true
    dc_pin:
      number: GPIO2
      ignore_strapping_warning: true
    invert_colors: true
    transform:
      swap_xy: true                   # Orient screen properly
      mirror_x: true                  # if your top row is on the bottom, comment this line out or swtich to false
    dimensions:
      width: ${width}
      height: ${height}

# Defining the buttons displayed
lvgl:
  buffer_size: 25%
  theme:
    button:
      # This base is overridden by each button's bg_color
      bg_color: 0x000000
      bg_opa: COVER
      border_color: 0x000000
      border_width: 1
      text_color: 0xFFFFFF  # overridden per label using text_color: btn_x_color
      pressed:
        # Light grey for pressed state (used uniformly)
        bg_color: 0xC0C0C0
        bg_grad_color: 0xC0C0C0
        bg_opa: COVER
      checked:
        bg_color: 0x000000
        bg_grad_color: 0x000000
        bg_opa: COVER
        text_color: 0x800080 # purple icon when "checked"... entity is on
  pages:
    - id: main_page
      pad_all: 0
      widgets:
        - obj:
            width: ${width}
            height: ${height}
            bg_color: room_bg_color
            layout:
              type: grid
              grid_columns: [fr(1), fr(1), fr(1), fr(1)]
              grid_rows: [fr(1), fr(1), fr(1)]
            pad_all: 5px
            outline_pad: 5px
            widgets:
              - button:
                  id: btn_1
                  grid_cell_column_pos: 0
                  grid_cell_row_pos: 0
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: default_button_bg_color
                  pressed:
                    bg_color: default_button_pressed_bg_color
                  widgets:
                    - label:
                        id: lbl_btn_1
                        text: "󰏘"
                        text_font: mdi_icons
                        text_color: btn_1_color
                        align: center
                  on_click:
                    then:
                      - binary_sensor.template.publish:
                          id: button_1_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_1_pressed
                          state: OFF

              - button:
                  id: btn_2
                  grid_cell_column_pos: 1
                  grid_cell_row_pos: 0
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: default_button_bg_color
                  pressed:
                    bg_color: default_button_pressed_bg_color
                  widgets:
                    - label:
                        id: lbl_btn_2
                        text: "󰏘"
                        text_font: mdi_icons
                        text_color: btn_2_color
                        align: center
                  on_click:
                    then:
                      - binary_sensor.template.publish:
                          id: button_2_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_2_pressed
                          state: OFF

              - button:
                  id: btn_3
                  grid_cell_column_pos: 2
                  grid_cell_row_pos: 0
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: default_button_bg_color
                  pressed:
                    bg_color: default_button_pressed_bg_color
                  widgets:
                    - label:
                        id: lbl_btn_3
                        text: "󰏘"
                        text_font: mdi_icons
                        text_color: btn_3_color
                        align: center
                  on_click:
                    then:
                      - binary_sensor.template.publish:
                          id: button_3_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_3_pressed
                          state: OFF

              - button:
                  id: btn_4
                  grid_cell_column_pos: 3
                  grid_cell_row_pos: 0
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: default_button_bg_color
                  pressed:
                    bg_color: default_button_pressed_bg_color
                  widgets:
                    - label:
                        id: lbl_btn_4
                        text: "󰏘"
                        text_font: mdi_icons
                        text_color: btn_4_color
                        align: center
                  on_click:
                    then:
                      - binary_sensor.template.publish:
                          id: button_4_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_4_pressed
                          state: OFF

              - button:
                  id: btn_5
                  grid_cell_column_pos: 0
                  grid_cell_row_pos: 1
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: default_button_bg_color
                  pressed:
                    bg_color: default_button_pressed_bg_color
                  widgets:
                    - label:
                        id: lbl_btn_5
                        text: "󰏘"
                        text_font: mdi_icons
                        text_color: btn_5_color
                        align: center
                  on_click:
                    then:
                      - binary_sensor.template.publish:
                          id: button_5_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_5_pressed
                          state: OFF

              - button:
                  id: btn_6
                  grid_cell_column_pos: 1
                  grid_cell_row_pos: 1
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: default_button_bg_color
                  pressed:
                    bg_color: default_button_pressed_bg_color
                  widgets:
                    - label:
                        id: lbl_btn_6
                        text: "󰏘"
                        text_font: mdi_icons
                        text_color: btn_6_color
                        align: center
                  on_click:
                    then:
                      - binary_sensor.template.publish:
                          id: button_6_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_6_pressed
                          state: OFF

              - button:
                  id: btn_7
                  grid_cell_column_pos: 2
                  grid_cell_row_pos: 1
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: default_button_bg_color
                  pressed:
                    bg_color: default_button_pressed_bg_color
                  widgets:
                    - label:
                        id: lbl_btn_7
                        text: "󰏘"
                        text_font: mdi_icons
                        text_color: btn_7_color
                        align: center
                  on_click:
                    then:
                      - binary_sensor.template.publish:
                          id: button_7_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_7_pressed
                          state: OFF

              - button:
                  id: btn_8
                  grid_cell_column_pos: 3
                  grid_cell_row_pos: 1
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: default_button_bg_color
                  pressed:
                    bg_color: default_button_pressed_bg_color
                  widgets:
                    - label:
                        id: lbl_btn_8
                        text: "󰏘"
                        text_font: mdi_icons
                        text_color: btn_8_color
                        align: center
                  on_click:
                    then:
                      - binary_sensor.template.publish:
                          id: button_8_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_8_pressed
                          state: OFF

              - button:
                  id: btn_9
                  grid_cell_column_pos: 0
                  grid_cell_row_pos: 2
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: default_button_bg_color
                  pressed:
                    bg_color: default_button_pressed_bg_color
                  widgets:
                    - label:
                        id: lbl_btn_9
                        text: "󰏘"
                        text_font: mdi_icons
                        text_color: btn_9_color
                        align: center
                  on_click:
                    then:
                      - binary_sensor.template.publish:
                          id: button_9_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_9_pressed
                          state: OFF
              - button:
                  id: btn_10
                  grid_cell_column_pos: 1
                  grid_cell_row_pos: 2
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  checkable: true
                  widgets:
                    - label:
                        id: lbl_btn_10
                        text: "󱁑"
                        text_font: mdi_icons
                        align: center
                  on_click:
                    then:
                      - homeassistant.action:
                          action: light.toggle
                          data:
                            entity_id: light.office_ambient_lights
                      - binary_sensor.template.publish:
                          id: button_10_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_10_pressed
                          state: OFF
              - button:
                  id: btn_11
                  grid_cell_column_pos: 2
                  grid_cell_row_pos: 2
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  checkable: true
                  widgets:
                    - label:
                        id: lbl_btn_11
                        text: "󰈐"
                        text_font: mdi_icons
                        align: center
                  on_click:
                    then:
                      - homeassistant.action:
                          action: switch.toggle
                          data:
                            entity_id: switch.office_fan_plug
                      - binary_sensor.template.publish:
                          id: button_11_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_11_pressed
                          state: OFF

              - button:
                  id: btn_12
                  grid_cell_column_pos: 3
                  grid_cell_row_pos: 2
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  checkable: true
                  widgets:
                    - label:
                        id: lbl_btn_12
                        text: "󰤝"
                        text_font: mdi_icons
                        align: center
                  on_click:
                    then:
                      - homeassistant.action:
                          action: light.toggle
                          data:
                            entity_id: light.office_light
                      - binary_sensor.template.publish:
                          id: button_12_pressed
                          state: ON
                      - delay: 500ms
                      - binary_sensor.template.publish:
                          id: button_12_pressed
                          state: OFF

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions