GUITION 4" 480x480 ESP32-S3-4848S040 Smart Display with LVGL

keep up the good work!!!
is there a way to turn off screen when there inactivity for 30 seconds and turn it back on by touching the screen?

I’m forwarded the answer i received from @agillis GitHub

Yes at some point I’ll start adding more features to this code. In the mean time the documentation from ESPHome has information on this subject. Check out the sections “Turn off screen when idle” and also “Prevent burn-in of LCD”

1 Like

Good day everyone. Thank you guys for your hard work on this devices. I order one and try to programmed. One thing I don’t understand in the code. Fonts in original code don’t let me compile this to the unit:


Without this code , everything is ok, but showing only one button.

Never mind. I fixed. My material design icons was in the different folder. Move them to esphome/fonts folder and everything start working . Thank you again

Good idea. I’ll change it in future releases to get that file from the Internet. Like this

  - file: 'https://github.com/Templarian/MaterialDesign-Webfont/raw/v7.4.47/fonts/materialdesignicons-webfont.ttf'
    id: light40
    size: 40
    bpp: 4
    glyphs: [
      "\U000F0335",  # mdi-lightbulb
      "\U000F0769",  # mdi-ceiling-light
      "\U000F06B5",  # mdi-lamp
      "\U000F08DD",  # mdi-floor-lamp
      "\U000F12BA",  # mdi-string-lights
    ]
1 Like

Playing with some cool futures, add footer( don’t do anything yet and need to adjust a dimension of the buttons)but looks promising;

 #-------------------------------------------
# lvgl Buttons
#-------------------------------------------    
lvgl:
  displays:
    - display_id: my_display
  touchscreens:
    - touchscreen_id: my_touchscreen

##########Pages####################
  top_layer:
    widgets:
      - btnmatrix:
          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:        

  style_definitions:
    - id: style_line
      line_color: 0x0000FF
      line_width: 8
      line_rounded: true
    - id: date_style
      text_font: roboto24
      align: center
      text_color: 0x333333
      bg_opa: cover
      radius: 4
      pad_all: 2

####Header_Footer##########
    - id: header_footer
      bg_color: 0x2F8CD8
      bg_grad_color: 0x005782
      bg_grad_dir: VER
      bg_opa: COVER
      border_width: 0
      radius: 0
      pad_all: 0
      pad_row: 0
      pad_column: 0
      border_color: 0x0077b3
      text_color: 0xFFFFFF
      width: 100%
      height: 30

I’m not a big fan of a permanent navigation bar. I don’t think it looks that clean. I am planning to use a few of the existing buttons to navigate to other pages.

I have a much more complicated YAML file for this device that has a boot screen and a some pages you can go to. It’s to big to post here. I’ll build a GIT repo for it.

2 Likes

Not a big fan of it either, but for now just playing with this device. Please do, I am not good in coding, and if you don’t mind will use some of the stuff from yours. I think front page with clock, weather and maybe button for relay will be cool. Thank you again for your hard work and sharing

1 Like

I too just prefer swiping between pages.

Yeah that would be cool. I have not figured out how to do that with the LVGL stuff yet.

I still playing with mine.
For some reason last part: Binary sensor, is not let me compile my code, any ideas why?

substitutions:
  name: "touch-panel"
  friendly_name: "Touch Panel"
  device_description: "Guition ESP32-S3-4848S040 480*480 Smart Screen"
  project_name: "Guition.ESP32_S3_4848S040"
  project_version: "1.0.0"

  lightbulb: "\U000F0335"
  ceiling_light: "\U000F0769"
  lamp: "\U000F06B5"
  floor_lamp: "\U000F08DD"
  string_lights: "\U000F12BA"
  clock: "\U000F0150"
  ceiling_fan: "\U000F1797"
  light_recessed: "\U000F179B"
  blinds_horizontal: "\U000F1A2B"
  blinds_horizontal_closed: "\U000F1A2C"
  curtains_closed: "\U000F1847"
  curtains: "\U000F1846"
  wallsconce: "\U000F091C"
  bed: "\U000F02E3"
  bed_empty: "\U000F08A0"
  thermometer_high: "\U000F10C2"
  humidity: "\U000F058E" 

esphome:
  name: "${name}"
  friendly_name: "${friendly_name}"
  #name_add_mac_suffix: true
  project:
    name: "${project_name}"
    version: "${project_version}"
  platformio_options:
    board_build.flash_mode: dio

esp32:
  board: esp32-s3-devkitc-1
  variant: esp32s3
  flash_size: 16MB
  framework:
    type: esp-idf
    sdkconfig_options:
      COMPILER_OPTIMIZATION_SIZE: y
      CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: "y"
      CONFIG_ESP32S3_DATA_CACHE_64KB: "y"
      CONFIG_ESP32S3_DATA_CACHE_LINE_64B: "y"
      CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
      CONFIG_SPIRAM_RODATA: y

psram:
  mode: octal
  speed: 80MHz

logger:

api:
  encryption:
    key: ""

ota:
  password: ""
  platform: esphome

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

web_server:
  port: 80



external_components:
 - source: github://clydebarrow/esphome@lvgl_original
   refresh: 10min
   components: [ lvgl ]

   
time:
  - platform: sntp
    id: sntp_time
    timezone: America/New_York
    servers:
     - 0.pool.ntp.org
     - 1.pool.ntp.org
     - 2.pool.ntp.org
    on_time_sync:
      - script.execute: time_update
    on_time:
      - minutes: '*'
        seconds: 0
        then:
          - script.execute: time_update

script:
  - id: time_update
    then:
      - lvgl.label.update:
          id: display_time
          text: !lambda |-
            static char time_buf[17];
            auto now = id(sntp_time).now();            
            bool is_pm = now.hour >= 12;
            int hour_12 = now.hour % 12;
            if (hour_12 == 0) {
                hour_12 = 12; // 12 AM/PM should be displayed as 12, not 0
            }
            snprintf(time_buf, sizeof(time_buf), "%2d:%02d%s", hour_12, now.minute, is_pm ? "pm" : "am");
            return time_buf; 

#-------------------------------------------
# Buttons
#-------------------------------------------
switch:  
  - platform: lvgl
    name: Kitchen
    widget: lv_button_1
    output_id: internal_relay_1
    on_turn_on:
      then:
        - lvgl.widget.update:
            id: lv_button_1_icon
            text_color: 0xFFFF00
    on_turn_off:
      then:
        - lvgl.widget.update:
            id: lv_button_1_icon
            text_color: 0xB6B6B6
  - platform: lvgl
    name: Outdoor
    widget: lv_button_2
    on_turn_on:
      then:
        - lvgl.widget.update:
            id: lv_button_2_icon
            text_color: 0xFFFF00
    on_turn_off:
      then:
        - lvgl.widget.update:
            id: lv_button_2_icon
            text_color: 0xB6B6B6            
       
#-------------------------------------------
# lvgl Buttons
#-------------------------------------------    
lvgl:
  displays:
    - display_id: my_display
  touchscreens:
    - touchscreen_id: my_touchscreen

##########Pages####################
  top_layer:
    widgets:
      - label:
          text: "00:00am"
          id: display_time
          align: bottom_mid
          x: -2
          y: -10
          text_align: right
          text_color: 0xFFFFFF   
      - label:
          text_font: light32
          text: $humidity
          id: display_humidity
          align: bottom_right
          x: -20
          y: -10
          text_align: right
          text_color: 0xFFFFFF 
      - label:
          text_font: light32
          text: $thermometer_high
          id: display_temperature
          align: bottom_left
          x: 12
          y: -10
          #text_align: right
          text_color: 0xFFFFFF                     

  style_definitions:
    - id: style_line
      line_color: 0x0000FF
      line_width: 8
      line_rounded: true
    - id: date_style
      text_font: roboto24
      align: center
      text_color: 0x333333
      bg_opa: cover
      radius: 4
      pad_all: 2

####Header_Footer##########
    - id: header_footer
      bg_color: 0x0C7B5F
      bg_grad_color: 0x03291F
      bg_grad_dir: VER
      bg_opa: COVER
      border_width: 0
      radius: 0
      pad_all: 0
      pad_row: 0
      pad_column: 0
      border_color: 0x0077b3
      text_color: 0xFFFFFF
      width: 100%
      height: 40

  theme:
    btn:
      text_font: roboto24
      scroll_on_focus: true
      group: general
      radius: 25
      width: 150
      height: 97
      pad_left: 10px
      pad_top: 10px
      pad_bottom: 10px
      pad_right: 10px
      shadow_width: 0
      bg_color: 0x0C7B5F
      text_color: 0xB6B6B6
      checked:
        bg_color: 0xCC5E14
        text_color: 0xB6B6B6

  page_wrap: true
  pages:
    - id: main_page
      skip: true
      layout: flex
      flex_flow: COLUMN_WRAP
      width: 100%
      bg_color: 0x000000
      bg_opa: cover
      pad_all: 5
      widgets:
        - btn:
            height: 207
            checkable: true
            id: lv_button_1
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $lightbulb
                  id: lv_button_1_icon
              - label:
                  align: bottom_left
                  text: "Kitchen"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_2
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $string_lights
                  id: lv_button_2_icon
              - label:
                  align: bottom_left
                  text: "Outdoor"
                  long_mode: dot              
        - btn:
            checkable: true
            id: lv_button_3
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $floor_lamp
                  id: lv_button_3_icon
              - label:
                  align: bottom_left
                  text: "Living Room"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_4
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $lightbulb
                  id: lv_button_4_icon
              - label:
                  align: bottom_left
                  text: "Accent"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_5
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $lightbulb
                  id: lv_button_5_icon
              - label:
                  align: bottom_left
                  text: "Bed Room"
                  long_mode: dot  
        - btn:
            checkable: true
            id: lv_button_6
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $clock
                  id: lv_button_6_icon
              - label:
                  #id: display_time
                  align: bottom_mid
                  text: "00:00am"
                  long_mode: dot                             

        - btn:
            checkable: true
            id: lv_button_7
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $lightbulb
                  id: lv_button_7_icon
              - label:
                  align: bottom_left
                  text: "Fan"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_8
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $lightbulb
                  id: lv_button_8_icon
              - label:
                  align: bottom_left
                  text: "Timer"
                  long_mode: dot              
        - btn:
            checkable: true
            id: lv_button_9
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $lightbulb
                  id: lv_button_9_icon
              - label:
                  align: bottom_left
                  text: "Lamp"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_10
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $lightbulb
                  id: lv_button_10_icon
              - label:
                  align: bottom_left
                  text: "Wall Spot"
                  long_mode: dot

        - btn:
            checkable: true
            id: lv_button_11
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $curtains
                  id: lv_button_11_icon
              - label:
                  align: bottom_left
                  text: "Covers"
                  long_mode: dot      
                 

#-------------------------------------------
# Internal outputs
#-------------------------------------------
output:
    # Backlight LED
  - platform: ledc
    pin: GPIO38
    id: GPIO38
    frequency: 100Hz
    
    # Built in 120v relay
  - id: internal_relay_1
    platform: gpio
    pin: 40

#-------------------------------------------
# LIGHTS
#-------------------------------------------
light:
  - platform: monochromatic
    output: GPIO38
    name: Backlight
    id: backlight
    restore_mode: ALWAYS_ON

#-------------------------------------------
# Graphicsd and Fonts
#-------------------------------------------
image:
  - file: https://esphome.io/_images/logo.png
    id: boot_logo
    resize: 200x200
    type: RGB565
    
font:
  - file: "gfonts://Roboto"
    id: roboto24
    size: 24
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          "\U000F004B",
          "\U0000f0ed",
          "\U000F006E",
          "\U000F012C",
          "\U000F179B",
          "\U000F0748",
          "\U000F1A1B",
          "\U000F02DC",
          "\U000F0A02",
          "\U000F035F",
          "\U000F0156",
          "\U000F0C5F", 
          "\U000f0084",
          "\U000f0091",

          ]
  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: weather70
    size: 70
    bpp: 4
    glyphs: &mdi-weather-glyphs
      - "\U000F0590" # mdi-weather-cloudy
      - "\U000F0F2F" # mdi-weather-cloudy-alert
      - "\U000F0E6E" # mdi-weather-cloudy-arrow-right
      - "\U000F0591" # mdi-weather-fog
      - "\U000F0592" # mdi-weather-hail
      - "\U000F0F30" # mdi-weather-hazy
      - "\U000F0898" # mdi-weather-hurricane
      - "\U000F0593" # mdi-weather-lightning
      - "\U000F067E" # mdi-weather-lightning-rainy
      - "\U000F0594" # mdi-weather-clear-night
      - "\U000F0F31" # mdi-weather-night-partly-cloudy
      - "\U000F0595" # mdi-weather-partly-cloudy
      - "\U000F0F32" # mdi-weather-partly-lightning
      - "\U000F0F33" # mdi-weather-partly-rainy
      - "\U000F0F34" # mdi-weather-partly-snowy
      - "\U000F0F35" # mdi-weather-partly-snowy-rainy
      - "\U000F0596" # mdi-weather-pouring
      - "\U000F0597" # mdi-weather-rainy
      - "\U000F0598" # mdi-weather-snowy
      - "\U000F0F36" # mdi-weather-snowy-heavy
      - "\U000F067F" # mdi-weather-snowy-rainy
      - "\U000F0599" # mdi-weather-sunny
      - "\U000F0F37" # mdi-weather-sunny-alert
      - "\U000F14E4" # mdi-weather-sunny-off
      - "\U000F059A" # mdi-weather-sunset
      - "\U000F059B" # mdi-weather-sunset-down
      - "\U000F059C" # mdi-weather-sunset-up
      - "\U000F0F38" # mdi-weather-tornado
      - "\U000F059D" # mdi-weather-windy
      - "\U000F059E" # mdi-weather-windy-variant

  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: light32
    size: 32
    bpp: 4
    glyphs: [
      "\U000F0335", # mdi-lightbulb
      "\U000F0769", # mdi-ceiling-light
      "\U000F08DD", # mdi-floor-lamp
      "\U000F12BA", # mdi-string-lights
      "\U000F0150", # mdi-clock
      "\U000F1797", # mdi-ceiling_fan
      "\U000F179B", # mdi-light_recessed
      "\U000F1A2B", # mdi-blinds_horizontal
      "\U000F1A2C", # mdi-blinds_horizontal_closed
      "\U000F1847", # mdi-curtains_closed
      "\U000F1846", # mdi-curtains
      "\U000F091C", # mdi-wallsconce
      "\U000F02E3", # mdi-bed
      "\U000F08A0", # mdi-bed_empty
      "\U000F10C2", # mdi-thermometer_high
      "\U000F058E", # mdi-humidity 
      ]          
      
  - file: "gfonts://Roboto"
    id: roboto10
    size: 10
    bpp: 4          

#-------------------------------------------
# Touchscreen gt911 i2c
#-------------------------------------------
i2c:
  - id: bus_a
    sda: GPIO19
    scl: GPIO45
    #frequency: 100kHz
    
touchscreen:
  platform: gt911
  transform:
    mirror_x: false
    mirror_y: false
  id: my_touchscreen
  display: my_display

  on_touch:
    - logger.log:
          format: Touch at (%d, %d)
          args: [touch.x, touch.y]
    - lambda: |-
          ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
              touch.x,
              touch.y,
              touch.x_raw,
              touch.y_raw
              );

#-------------------------------------------
# Display st7701s spi
#-------------------------------------------
spi:
  - id: lcd_spi
    clk_pin: GPIO48
    mosi_pin: GPIO47
    
display:
  - platform: st7701s
    id: my_display
    update_interval: never
    auto_clear_enabled: True
    data_rate: 2MHz
    spi_mode: MODE3
    color_order: RGB
    invert_colors: false
    dimensions:
      width: 480
      height: 480
    transform:
      mirror_x: false
      mirror_y: false
    cs_pin: 39
      # reset not defined 
    de_pin: 18
    hsync_pin: 16
    vsync_pin: 17
    pclk_pin: 21
    init_sequence: 
      - 1
      - [0xFF, 0x77, 0x01, 0x00, 0x00, 0x10] # CMD2_BKSEL_BK0
      - [0xCD, 0x00] # disable MDT flag
    pclk_frequency: 12MHz
    pclk_inverted: false
    data_pins:
      red:
        - 11         # R1
        - 12         # R2
        - 13         # R3
        - 14         # R4
        - 0          # R5
      green:
        - 8          # G0
        - 20         # G1
        - 3          # G2
        - 46         # G3
        - 9          # G4
        - 10         # G5 
      blue:
        - 4          # B1
        - 5          # B2
        - 6          # B3
        - 7          # B4
        - 15         # B5


binary_sensor:
  - platform: homeassistant
    id: remote_covers
    entity_id: cover.master_bedroom_all_covers
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: lv_button_11
          state:
            checked: !lambda return x;

This is what I got so far:

substitutions:
  name: "touch-panel"
  friendly_name: "Touch Panel"
  device_description: "Guition ESP32-S3-4848S040 480*480 Smart Screen"
  project_name: "Guition.ESP32_S3_4848S040"
  project_version: "1.0.0"

  lightbulb: "\U000F0335"
  ceiling_light: "\U000F0769"
  lamp: "\U000F06B5"
  floor_lamp: "\U000F08DD"
  string_lights: "\U000F12BA"
  clock: "\U000F0150"
  ceiling_fan: "\U000F1797"
  light_recessed: "\U000F179B"
  blinds_horizontal: "\U000F1A2B"
  blinds_horizontal_closed: "\U000F1A2C"
  curtains_closed: "\U000F1847"
  curtains: "\U000F1846"
  wallsconce: "\U000F091C"
  bed: "\U000F02E3"
  bed_empty: "\U000F08A0"
  thermometer_high: "\U000F10C2"
  humidity: "\U000F058E" 

esphome:
  name: "${name}"
  friendly_name: "${friendly_name}"
  #name_add_mac_suffix: true
  project:
    name: "${project_name}"
    version: "${project_version}"
  platformio_options:
    board_build.flash_mode: dio

esp32:
  board: esp32-s3-devkitc-1
  variant: esp32s3
  flash_size: 16MB
  framework:
    type: esp-idf
    sdkconfig_options:
      COMPILER_OPTIMIZATION_SIZE: y
      CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: "y"
      CONFIG_ESP32S3_DATA_CACHE_64KB: "y"
      CONFIG_ESP32S3_DATA_CACHE_LINE_64B: "y"
      CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
      CONFIG_SPIRAM_RODATA: y

psram:
  mode: octal
  speed: 80MHz

logger:

api:
  encryption:
    key: ""

ota:
  password: ""
  platform: esphome

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

web_server:
  port: 80



external_components:
 - source: github://clydebarrow/esphome@lvgl_original
   refresh: 10min
   components: [ lvgl ]

   
time:
  - platform: sntp
    id: sntp_time
    timezone: America/New_York
    servers:
     - 0.pool.ntp.org
     - 1.pool.ntp.org
     - 2.pool.ntp.org
    on_time_sync:
      - script.execute: time_update
    on_time:
      - minutes: '*'
        seconds: 0
        then:
          - script.execute: time_update

script:
  - id: time_update
    then:
      - lvgl.label.update:
          id: display_time
          text: !lambda |-
            static char time_buf[17];
            auto now = id(sntp_time).now();            
            bool is_pm = now.hour >= 12;
            int hour_12 = now.hour % 12;
            if (hour_12 == 0) {
                hour_12 = 12; // 12 AM/PM should be displayed as 12, not 0
            }
            snprintf(time_buf, sizeof(time_buf), "%2d:%02d%s", hour_12, now.minute, is_pm ? "pm" : "am");
            return time_buf; 

#-------------------------------------------
# Buttons
#-------------------------------------------
switch:  
  - platform: lvgl
    name: Kitchen
    widget: lv_button_1
    output_id: internal_relay_1
    on_turn_on:
      then:
        - lvgl.widget.update:
            id: lv_button_1_icon
            text_color: 0xFFFF00
    on_turn_off:
      then:
        - lvgl.widget.update:
            id: lv_button_1_icon
            text_color: 0xB6B6B6
  - platform: lvgl
    name: Outdoor
    widget: lv_button_2
    on_turn_on:
      then:
        - lvgl.widget.update:
            id: lv_button_2_icon
            text_color: 0xFFFF00
    on_turn_off:
      then:
        - lvgl.widget.update:
            id: lv_button_2_icon
            text_color: 0xB6B6B6            
       
#-------------------------------------------
# lvgl Buttons
#-------------------------------------------    
lvgl:
  displays:
    - display_id: my_display
  touchscreens:
    - touchscreen_id: my_touchscreen

##########Pages####################
  top_layer:
    widgets:
      - label:
          text_font: roboto24
          text: "00:00am"
          id: display_time
          align: bottom_mid
          #x: -2
          y: -10
          text_align: right
          text_color: 0xFFFFFF 
            
      - label:
          text_font: light32
          text: $humidity
          id: display_humidity
          align: bottom_right
          x: -20
          y: -10
          text_align: right
          text_color: 0xFFFFFF 
      - label:
          text_font: light32
          text: $thermometer_high
          id: display_temperature
          align: bottom_left
          x: 12
          y: -10
          #text_align: right
          text_color: 0xFFFFFF                     

  style_definitions:
    - id: style_line
      line_color: 0x0000FF
      line_width: 8
      line_rounded: true
    - id: date_style
      text_font: roboto24
      align: center
      text_color: 0x333333
      bg_opa: cover
      radius: 4
      pad_all: 2

####Header_Footer##########
    - id: header_footer
      bg_color: 0x0C7B5F
      bg_grad_color: 0x03291F
      bg_grad_dir: VER
      bg_opa: COVER
      border_width: 0
      radius: 0
      pad_all: 0
      pad_row: 0
      pad_column: 0
      border_color: 0x0077b3
      text_color: 0xFFFFFF
      width: 100%
      height: 40

  theme:
    btn:
      text_font: roboto24
      scroll_on_focus: true
      group: general
      radius: 25
      width: 150
      height: 97
      pad_left: 10px
      pad_top: 10px
      pad_bottom: 10px
      pad_right: 10px
      shadow_width: 0
      bg_color: 0x0C7B5F
      text_color: 0xB6B6B6
      checked:
        bg_color: 0xCC5E14
        text_color: 0xB6B6B6

  page_wrap: true
  pages:
    - id: main_page
      skip: true
      layout: flex
      flex_flow: row_WRAP
      width: 100%
      bg_color: 0x000000
      bg_opa: cover
      pad_all: 5
      widgets:
        - btn:
            #height: 207
            checkable: true
            id: lv_button_1
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $light_recessed
                  id: lv_button_1_icon
              - label:
                  align: bottom_left
                  text: "Bed Lights"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_2
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $light_recessed
                  id: lv_button_2_icon
              - label:
                  align: bottom_left
                  text: "Mirror Lights"
                  long_mode: dot              
        - btn:
           # width: 207
            checkable: true
            id: lv_button_3
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $light_recessed
                  id: lv_button_3_icon
              - label:
                  align: bottom_left
                  text: "TV Lights"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_4
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $wallsconce
                  id: lv_button_4_icon
              - label:
                  align: bottom_left
                  text: "Irina Light"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_5
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $bed
                  id: lv_button_5_icon
              - label:
                  align: bottom_left
                  text: "Under Bed"
                  long_mode: dot  
        - btn:
            checkable: true
            id: lv_button_6
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $wallsconce
                  id: lv_button_6_icon
              - label:
                  #id: display_time
                  align: bottom_mid
                  text: "My Lights"
                  long_mode: dot                                

        - btn:
            width: 230
            checkable: true
            id: lv_button_7
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $curtains_closed
                  id: lv_button_7_icon
              - label:
                  align: bottom_left
                  text: "Covers"
                  long_mode: dot
        - btn:
            width: 230
            checkable: true
            id: lv_button_8
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $blinds_horizontal
                  id: lv_button_8_icon
              - label:
                  align: bottom_left
                  text: "Blinds"
                  long_mode: dot              

        - btn:
            width: 230
            checkable: true
            id: lv_button_10
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $bed
                  id: lv_button_10_icon
              - label:
                  align: bottom_left
                  text: "Fan"
                  long_mode: dot

        - btn:
            width: 230
            checkable: true
            id: lv_button_11
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $curtains
                  id: lv_button_11_icon
              - label:
                  align: bottom_left
                  text: "Curtains"
                  long_mode: dot   
                     
                 

#-------------------------------------------
# Internal outputs
#-------------------------------------------
output:
    # Backlight LED
  - platform: ledc
    pin: GPIO38
    id: GPIO38
    frequency: 100Hz
    
    # Built in 120v relay
  - id: internal_relay_1
    platform: gpio
    pin: 40

#-------------------------------------------
# LIGHTS
#-------------------------------------------
light:
  - platform: monochromatic
    output: GPIO38
    name: Backlight
    id: backlight
    restore_mode: ALWAYS_ON

#-------------------------------------------
# Graphicsd and Fonts
#-------------------------------------------
image:
  - file: https://esphome.io/_images/logo.png
    id: boot_logo
    resize: 200x200
    type: RGB565
    
font:
  - file: "gfonts://Roboto"
    id: roboto24
    size: 24
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          "\U000F004B",
          "\U0000f0ed",
          "\U000F006E",
          "\U000F012C",
          "\U000F179B",
          "\U000F0748",
          "\U000F1A1B",
          "\U000F02DC",
          "\U000F0A02",
          "\U000F035F",
          "\U000F0156",
          "\U000F0C5F", 
          "\U000f0084",
          "\U000f0091",

          ]
  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: weather70
    size: 70
    bpp: 4
    glyphs: &mdi-weather-glyphs
      - "\U000F0590" # mdi-weather-cloudy
      - "\U000F0F2F" # mdi-weather-cloudy-alert
      - "\U000F0E6E" # mdi-weather-cloudy-arrow-right
      - "\U000F0591" # mdi-weather-fog
      - "\U000F0592" # mdi-weather-hail
      - "\U000F0F30" # mdi-weather-hazy
      - "\U000F0898" # mdi-weather-hurricane
      - "\U000F0593" # mdi-weather-lightning
      - "\U000F067E" # mdi-weather-lightning-rainy
      - "\U000F0594" # mdi-weather-clear-night
      - "\U000F0F31" # mdi-weather-night-partly-cloudy
      - "\U000F0595" # mdi-weather-partly-cloudy
      - "\U000F0F32" # mdi-weather-partly-lightning
      - "\U000F0F33" # mdi-weather-partly-rainy
      - "\U000F0F34" # mdi-weather-partly-snowy
      - "\U000F0F35" # mdi-weather-partly-snowy-rainy
      - "\U000F0596" # mdi-weather-pouring
      - "\U000F0597" # mdi-weather-rainy
      - "\U000F0598" # mdi-weather-snowy
      - "\U000F0F36" # mdi-weather-snowy-heavy
      - "\U000F067F" # mdi-weather-snowy-rainy
      - "\U000F0599" # mdi-weather-sunny
      - "\U000F0F37" # mdi-weather-sunny-alert
      - "\U000F14E4" # mdi-weather-sunny-off
      - "\U000F059A" # mdi-weather-sunset
      - "\U000F059B" # mdi-weather-sunset-down
      - "\U000F059C" # mdi-weather-sunset-up
      - "\U000F0F38" # mdi-weather-tornado
      - "\U000F059D" # mdi-weather-windy
      - "\U000F059E" # mdi-weather-windy-variant

  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: light32
    size: 32
    bpp: 4
    glyphs: [
      "\U000F0335", # mdi-lightbulb
      "\U000F0769", # mdi-ceiling-light
      "\U000F08DD", # mdi-floor-lamp
      "\U000F12BA", # mdi-string-lights
      "\U000F0150", # mdi-clock
      "\U000F1797", # mdi-ceiling_fan
      "\U000F179B", # mdi-light_recessed
      "\U000F1A2B", # mdi-blinds_horizontal
      "\U000F1A2C", # mdi-blinds_horizontal_closed
      "\U000F1847", # mdi-curtains_closed
      "\U000F1846", # mdi-curtains
      "\U000F091C", # mdi-wallsconce
      "\U000F02E3", # mdi-bed
      "\U000F08A0", # mdi-bed_empty
      "\U000F10C2", # mdi-thermometer_high
      "\U000F058E", # mdi-humidity 
      ]          
      
  - file: "gfonts://Roboto"
    id: roboto10
    size: 10
    bpp: 4          

#-------------------------------------------
# Touchscreen gt911 i2c
#-------------------------------------------
i2c:
  - id: bus_a
    sda: GPIO19
    scl: GPIO45
    #frequency: 100kHz
    
touchscreen:
  platform: gt911
  transform:
    mirror_x: false
    mirror_y: false
  id: my_touchscreen
  display: my_display

  on_touch:
    - logger.log:
          format: Touch at (%d, %d)
          args: [touch.x, touch.y]
    - lambda: |-
          ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
              touch.x,
              touch.y,
              touch.x_raw,
              touch.y_raw
              );

#-------------------------------------------
# Display st7701s spi
#-------------------------------------------
spi:
  - id: lcd_spi
    clk_pin: GPIO48
    mosi_pin: GPIO47
    
display:
  - platform: st7701s
    id: my_display
    update_interval: never
    auto_clear_enabled: True
    data_rate: 2MHz
    spi_mode: MODE3
    color_order: RGB
    invert_colors: false
    dimensions:
      width: 480
      height: 480
    transform:
      mirror_x: false
      mirror_y: false
    cs_pin: 39
      # reset not defined 
    de_pin: 18
    hsync_pin: 16
    vsync_pin: 17
    pclk_pin: 21
    init_sequence: 
      - 1
      - [0xFF, 0x77, 0x01, 0x00, 0x00, 0x10] # CMD2_BKSEL_BK0
      - [0xCD, 0x00] # disable MDT flag
    pclk_frequency: 12MHz
    pclk_inverted: false
    data_pins:
      red:
        - 11         # R1
        - 12         # R2
        - 13         # R3
        - 14         # R4
        - 0          # R5
      green:
        - 8          # G0
        - 20         # G1
        - 3          # G2
        - 46         # G3
        - 9          # G4
        - 10         # G5 
      blue:
        - 4          # B1
        - 5          # B2
        - 6          # B3
        - 7          # B4
        - 15         # B5


1 Like

Got some stuff working (finally)

substitutions:
  name: "touch-panel"
  friendly_name: "Touch Panel"
  device_description: "Guition ESP32-S3-4848S040 480*480 Smart Screen"
  project_name: "Guition.ESP32_S3_4848S040"
  project_version: "1.0.0"

  lightbulb: "\U000F0335"
  ceiling_light: "\U000F0769"
  lamp: "\U000F06B5"
  floor_lamp: "\U000F08DD"
  string_lights: "\U000F12BA"
  clock: "\U000F0150"
  ceiling_fan: "\U000F1797"
  light_recessed: "\U000F179B"
  blinds_horizontal: "\U000F1A2B"
  blinds_horizontal_closed: "\U000F1A2C"
  curtains_closed: "\U000F1847"
  curtains: "\U000F1846"
  wallsconce: "\U000F091C"
  bed: "\U000F02E3"
  bed_empty: "\U000F08A0"
  thermometer_high: "\U000F10C2"
  humidity: "\U000F058E" 

esphome:
  name: "${name}"
  friendly_name: "${friendly_name}"
  #name_add_mac_suffix: true
  project:
    name: "${project_name}"
    version: "${project_version}"
  platformio_options:
    board_build.flash_mode: dio

esp32:
  board: esp32-s3-devkitc-1
  variant: esp32s3
  flash_size: 16MB
  framework:
    type: esp-idf
    sdkconfig_options:
      COMPILER_OPTIMIZATION_SIZE: y
      CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: "y"
      CONFIG_ESP32S3_DATA_CACHE_64KB: "y"
      CONFIG_ESP32S3_DATA_CACHE_LINE_64B: "y"
      CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
      CONFIG_SPIRAM_RODATA: y

psram:
  mode: octal
  speed: 80MHz

logger:

api:
  encryption:
    key: ""

ota:
  password: ""
  platform: esphome

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

web_server:
  port: 80



external_components:
 - source: github://clydebarrow/esphome@lvgl_original
   refresh: 10min
   components: [ lvgl ]

   
time:
  - platform: sntp
    id: sntp_time
    timezone: America/New_York
    servers:
     - 0.pool.ntp.org
     - 1.pool.ntp.org
     - 2.pool.ntp.org
    on_time_sync:
      - script.execute: time_update
    on_time:
      - minutes: '*'
        seconds: 0
        then:
          - script.execute: time_update

script:
  - id: time_update
    then:
      - lvgl.label.update:
          id: display_time
          text: !lambda |-
            static char time_buf[17];
            auto now = id(sntp_time).now();            
            bool is_pm = now.hour >= 12;
            int hour_12 = now.hour % 12;
            if (hour_12 == 0) {
                hour_12 = 12; // 12 AM/PM should be displayed as 12, not 0
            }
            snprintf(time_buf, sizeof(time_buf), "%2d:%02d%s", hour_12, now.minute, is_pm ? "pm" : "am");
            return time_buf; 

###################Temp and Humidity ################
sensor:
  - platform: homeassistant
    entity_id: sensor.atc_7997_temperature
    id: outdoor_temperature
    on_value:
      - lvgl.label.update:
          id: temp_text
          text:
            format: "\U000F10C3 %.1f°C"
            args: [ 'x' ]  

  - platform: homeassistant
    id: room_humidity
    entity_id: sensor.atc_7997_humidity
    on_value:
      - lvgl.label.update:
          id: humidity_text
          text:
            format: "\U000F058E %.1f"
            args: [ 'x' ]  


################lvgl Buttons################

lvgl:
  displays:
    - display_id: my_display
  touchscreens:
    - touchscreen_id: my_touchscreen

##########Pages####################
  top_layer:
    widgets:
      - label:
          text_font: roboto24
          text: "00:00 am"
          id: display_time
          align: bottom_mid
          #x: -2
          y: -10
          text_align: right
          text_color: 0xFFFFFF 
            
      - label:
          text_font: roboto24
          text: "-.- %"
          id: humidity_text
          align: bottom_right
          x: -20
          y: -10
          text_align: right
          text_color: 0xFFFFFF 
          on_press:
            then:
              - lvgl.page.show: second_page

      - label:
          text_font: roboto24
          text: "-.-°C"
          id: temp_text
          align: bottom_left
          x: 12
          y: -10
          #text_align: right
          text_color: 0xFFFFFF
          on_press:
            then:
              - lvgl.page.show: main_page    

                

  style_definitions:
    - id: style_line
      line_color: 0x0000FF
      line_width: 8
      line_rounded: true
    - id: date_style
      text_font: roboto24
      align: center
      text_color: 0x333333
      bg_opa: cover
      radius: 4
      pad_all: 2

####Header_Footer##########
    - id: header_footer
      bg_color: 0x0C7B5F
      bg_grad_color: 0x03291F
      bg_grad_dir: VER
      bg_opa: COVER
      border_width: 0
      radius: 0
      pad_all: 0
      pad_row: 0
      pad_column: 0
      border_color: 0x0077b3
      text_color: 0xFFFFFF
      width: 100%
      height: 40

  theme:
    btn:
      text_font: roboto24
      scroll_on_focus: true
      group: general
      radius: 25
      width: 150
      height: 97
      pad_left: 10px
      pad_top: 10px
      pad_bottom: 10px
      pad_right: 10px
      shadow_width: 0
      bg_color: 0x0C7B5F
      text_color: 0xB6B6B6
      checked:
        bg_color: 0xCC5E14
        text_color: 0xB6B6B6

  page_wrap: true
  pages:
    - id: main_page
      skip: true
      layout: flex
      flex_flow: row_WRAP
      width: 100%
      bg_color: 0x000000
      bg_opa: cover
      pad_all: 5
      widgets:
        - btn:
            #height: 207
            checkable: true
            id: lv_button_1
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $light_recessed
                  id: lv_button_1_icon
              - label:
                  align: bottom_mid
                  text: "Bed Lights"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_2
            widgets:
              - label:
                  text_font: light32
                  align: top_mid
                  text: $light_recessed
                  id: lv_button_2_icon
              - label:
                  align: bottom_mid
                  text: "Mirror Lights"
                  long_mode: dot              
        - btn:
           # width: 207
            checkable: true
            id: lv_button_3
            widgets:
              - label:
                  text_font: light32
                  align: top_right
                  text: $light_recessed
                  id: lv_button_3_icon
              - label:
                  align: bottom_mid
                  text: "TV Lights"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_4
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $wallsconce
                  id: lv_button_4_icon
              - label:
                  align: bottom_mid
                  text: "Irina Light"
                  long_mode: dot
        - btn:
            checkable: true
            id: lv_button_5
            widgets:
              - label:
                  text_font: light32
                  align: top_mid
                  text: $bed
                  id: lv_button_5_icon
              - label:
                  align: bottom_mid
                  text: "Under Bed"
                  long_mode: dot  
        - btn:
            checkable: true
            id: lv_button_6
            widgets:
              - label:
                  text_font: light32
                  align: top_right
                  text: $wallsconce
                  #text_flip: mdi-flip-h
                  #translate_x: 80%
                  
                  id: lv_button_6_icon
              - label:
                  align: bottom_mid
                  text: "My Light"
                  long_mode: dot                                

        - btn:
            width: 230
            checkable: true
            id: lv_button_7
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $curtains_closed
                  id: lv_button_7_icon
              - label:
                  align: bottom_left
                  text: "Covers"
                  long_mode: dot
        - btn:
            width: 230
            checkable: true
            id: lv_button_8
            widgets:
              - label:
                  text_font: light32
                  align: top_right
                  text: $blinds_horizontal
                  id: lv_button_8_icon
              - label:
                  align: bottom_right
                  text: "Blinds"
                  long_mode: dot              

        - btn:
            width: 230
            checkable: true
            id: lv_button_10
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $ceiling_fan
                  id: lv_button_10_icon
              - label:
                  align: bottom_left
                  text: "Fan"
                  #long_mode: dot               

        - btn:
            width: 230
            checkable: true
            id: lv_button_11
            widgets:
              - label:
                  text_font: light32
                  align: top_right
                  text: $curtains
                  id: lv_button_11_icon
              - label:
                  align: bottom_right
                  text: "Curtains"
                  long_mode: dot   
            #on_click:
              #- homeassistant.service:
                  #service: cover.toggle
                  #data:
                    #entity_id: cover.master_bedroom_all_covers     

    - id: second_page
      skip: true
      layout: flex
      flex_flow: row_WRAP
      width: 100%
      bg_color: 0x000000
      bg_opa: cover
      pad_all: 5
      widgets:  
          - meter:
              align: CENTER
              height: 180
              width: 180
              scales:
                - range_from: -100 # scale for the needle value
                  range_to: 400
                  angle_range: 240
                  rotation: 150
                  indicators:
                    - line:
                        id: temperature_needle
                        width: 2
                        color: 0xFF0000
                        r_mod: -4
                    - ticks:
                        start_value: -10
                        end_value: 40
                        color_start: 0x0000bd
                        color_end: 0xbd0000
                        width: 1
                - range_from: -10 # scale for the value labels
                  range_to: 40
                  angle_range: 240
                  rotation: 150
                  ticks:
                    width: 1
                    count: 51
                    length: 10
                    color: 0x000000
                    major:
                      stride: 5
                      width: 2
                      length: 10
                      color: 0x404040
                      label_gap: 10
              widgets:
                - label:
                    id: temperature_text
                    text: "-.-°C"
                    align: CENTER
                    y: 45
                - label:
                    text: "Outdoor"
                    align: CENTER
                    y: 65                                        
                 

#-------------------------------------------
# Internal outputs
#-------------------------------------------
output:
    # Backlight LED
  - platform: ledc
    pin: GPIO38
    id: GPIO38
    frequency: 100Hz
    
    # Built in 120v relay
  - id: internal_relay_1
    platform: gpio
    pin: 40

#-------------------------------------------
# LIGHTS
#-------------------------------------------
light:
  - platform: monochromatic
    output: GPIO38
    name: Backlight
    id: backlight
    restore_mode: ALWAYS_ON

#-------------------------------------------
# Graphicsd and Fonts
#-------------------------------------------
image:
  - file: https://esphome.io/_images/logo.png
    id: boot_logo
    resize: 200x200
    type: RGB565

  - file: "fonts/wall-sconce-180.svg"
    id: wallsconce_180
    resize: 20x20
    
font:
  
  - file: "gfonts://Roboto"
    id: roboto24
    size: 24
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          "\U000F004B",
          "\U0000f0ed",
          "\U000F006E",
          "\U000F012C",
          "\U000F179B",
          "\U000F0748",
          "\U000F1A1B",
          "\U000F02DC",
          "\U000F0A02",
          "\U000F035F",
          "\U000F0156",
          "\U000F0C5F", 
          "\U000f0084",
          "\U000f0091",
          "\U000F058E",
          "\U000F10C3",
          ]
  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: weather70
    size: 70
    bpp: 4
    glyphs: &mdi-weather-glyphs
      - "\U000F0590" # mdi-weather-cloudy
      - "\U000F0F2F" # mdi-weather-cloudy-alert
      - "\U000F0E6E" # mdi-weather-cloudy-arrow-right
      - "\U000F0591" # mdi-weather-fog
      - "\U000F0592" # mdi-weather-hail
      - "\U000F0F30" # mdi-weather-hazy
      - "\U000F0898" # mdi-weather-hurricane
      - "\U000F0593" # mdi-weather-lightning
      - "\U000F067E" # mdi-weather-lightning-rainy
      - "\U000F0594" # mdi-weather-clear-night
      - "\U000F0F31" # mdi-weather-night-partly-cloudy
      - "\U000F0595" # mdi-weather-partly-cloudy
      - "\U000F0F32" # mdi-weather-partly-lightning
      - "\U000F0F33" # mdi-weather-partly-rainy
      - "\U000F0F34" # mdi-weather-partly-snowy
      - "\U000F0F35" # mdi-weather-partly-snowy-rainy
      - "\U000F0596" # mdi-weather-pouring
      - "\U000F0597" # mdi-weather-rainy
      - "\U000F0598" # mdi-weather-snowy
      - "\U000F0F36" # mdi-weather-snowy-heavy
      - "\U000F067F" # mdi-weather-snowy-rainy
      - "\U000F0599" # mdi-weather-sunny
      - "\U000F0F37" # mdi-weather-sunny-alert
      - "\U000F14E4" # mdi-weather-sunny-off
      - "\U000F059A" # mdi-weather-sunset
      - "\U000F059B" # mdi-weather-sunset-down
      - "\U000F059C" # mdi-weather-sunset-up
      - "\U000F0F38" # mdi-weather-tornado
      - "\U000F059D" # mdi-weather-windy
      - "\U000F059E" # mdi-weather-windy-variant

  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: light32
    size: 32
    bpp: 4
    glyphs: [
      "\U000F0335", # mdi-lightbulb
      "\U000F0769", # mdi-ceiling-light
      "\U000F08DD", # mdi-floor-lamp
      "\U000F12BA", # mdi-string-lights
      "\U000F0150", # mdi-clock
      "\U000F1797", # mdi-ceiling_fan
      "\U000F179B", # mdi-light_recessed
      "\U000F1A2B", # mdi-blinds_horizontal
      "\U000F1A2C", # mdi-blinds_horizontal_closed
      "\U000F1847", # mdi-curtains_closed
      "\U000F1846", # mdi-curtains
      "\U000F091C", # mdi-wallsconce
      "\U000F02E3", # mdi-bed
      "\U000F08A0", # mdi-bed_empty
      "\U000F10C2", # mdi-thermometer_high
      "\U000F058E", # mdi-humidity 
      ]          
      
  - file: "gfonts://Roboto"
    id: roboto10
    size: 10
    bpp: 4          

#-------------------------------------------
# Touchscreen gt911 i2c
#-------------------------------------------
i2c:
  - id: bus_a
    sda: GPIO19
    scl: GPIO45
    #frequency: 100kHz
    
touchscreen:
  platform: gt911
  transform:
    mirror_x: false
    mirror_y: false
  id: my_touchscreen
  display: my_display

  on_touch:
    - logger.log:
          format: Touch at (%d, %d)
          args: [touch.x, touch.y]
    - lambda: |-
          ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
              touch.x,
              touch.y,
              touch.x_raw,
              touch.y_raw
              );

#-------------------------------------------
# Display st7701s spi
#-------------------------------------------
spi:
  - id: lcd_spi
    clk_pin: GPIO48
    mosi_pin: GPIO47
    
display:
  - platform: st7701s
    id: my_display
    update_interval: never
    auto_clear_enabled: True
    data_rate: 2MHz
    spi_mode: MODE3
    color_order: RGB
    invert_colors: false
    dimensions:
      width: 480
      height: 480
    transform:
      mirror_x: false
      mirror_y: false
    cs_pin: 39
      # reset not defined 
    de_pin: 18
    hsync_pin: 16
    vsync_pin: 17
    pclk_pin: 21
    init_sequence: 
      - 1
      - [0xFF, 0x77, 0x01, 0x00, 0x00, 0x10] # CMD2_BKSEL_BK0
      - [0xCD, 0x00] # disable MDT flag
    pclk_frequency: 12MHz
    pclk_inverted: false
    data_pins:
      red:
        - 11         # R1
        - 12         # R2
        - 13         # R3
        - 14         # R4
        - 0          # R5
      green:
        - 8          # G0
        - 20         # G1
        - 3          # G2
        - 46         # G3
        - 9          # G4
        - 10         # G5 
      blue:
        - 4          # B1
        - 5          # B2
        - 6          # B3
        - 7          # B4
        - 15         # B5

Is anybody make an IDLE and Screen OFF working. Every time I add this to my code it’s give me an error

1 Like

I’ve just started to play around with it. I really think it needs some documentation. But I guess that’ll come when it’s a bit more mature.

@zenia I have actually gotten idle and wake up to work. Honestly i don’t know if it can be made better, but it works :slight_smile:

Here is config of my LVGL component, which makes the screen sleep:

lvgl:
  displays:
    - display_id: my_display
  touchscreens:
    - touchscreen_id: my_touchscreen
  on_idle:
    - timeout: 10s
      then:
        - logger.log: idle timeout
        - lvgl.pause:
        - light.turn_off:
            id: backlight
            transition_length: 5s

And here is the touchscreen component where i make it wake up again:

touchscreen:
  platform: gt911
  transform:
    mirror_x: false
    mirror_y: false
  id: my_touchscreen
  display: my_display

  on_touch:
    - logger.log:
          format: Touch at (%d, %d)
          args: [touch.x, touch.y]
    - lambda: |-
          ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
              touch.x,
              touch.y,
              touch.x_raw,
              touch.y_raw
              );
    - if:
        condition: lvgl.is_paused
        then:
          - light.turn_on: backlight
          - lvgl.resume:
          - lvgl.widget.redraw:

Thank you for reply and code. I actually make this work :wink: Now I am trying to add Anti burn part, but no success yet. Also, I change all buttons to obj, it’s easier to add some stuff inside of the object. Still working with this device, will post my code latter on today, if you are interesting.

Progress updates:
Everything is working the way I wanted, except 2 things

  1. Anti Burn is not compile properly ( a lot of errors, took code out for now)
  2. Copy and Paste Climate control give me an error: no - lvgl.spinbox.update: value :person_shrugging:
    Here is my working code:
substitutions:
  name: "touch-panel"
  friendly_name: "Touch Panel"
  device_description: "Guition ESP32-S3-4848S040 480*480 Smart Screen"
  project_name: "Guition.ESP32_S3_4848S040"
  project_version: "1.0.0"

  lightbulb: "\U000F0335"
  ceiling_light: "\U000F0769"
  lamp: "\U000F06B5"
  floor_lamp: "\U000F08DD"
  string_lights: "\U000F12BA"
  clock: "\U000F0150"
  ceiling_fan: "\U000F1797"
  light_recessed: "\U000F179B"
  blinds_horizontal: "\U000F1A2B"
  blinds_horizontal_closed: "\U000F1A2C"
  curtains_closed: "\U000F1847"
  curtains: "\U000F1846"
  wallsconce: "\U000F091C"
  bed: "\U000F02E3"
  bed_empty: "\U000F08A0"
  thermometer_high: "\U000F10C2"
  humidity: "\U000F058E" 
  wallsconce_variant: "\U000F091E"
  kiss: "\U000F0C73"
  hvac: "\U000F0D43"

esphome:
  name: "${name}"
  friendly_name: "${friendly_name}"
  #name_add_mac_suffix: true
  project:
    name: "${project_name}"
    version: "${project_version}"
  platformio_options:
    board_build.flash_mode: dio

esp32:
  board: esp32-s3-devkitc-1
  variant: esp32s3
  flash_size: 16MB
  framework:
    type: esp-idf
    sdkconfig_options:
      COMPILER_OPTIMIZATION_SIZE: y
      CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: "y"
      CONFIG_ESP32S3_DATA_CACHE_64KB: "y"
      CONFIG_ESP32S3_DATA_CACHE_LINE_64B: "y"
      CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
      CONFIG_SPIRAM_RODATA: y

psram:
  mode: octal
  speed: 80MHz

logger:

api:
  encryption:
    key: ""

ota:
  password: ""
  platform: esphome

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

web_server:
  port: 80



external_components:
 - source: github://clydebarrow/esphome@lvgl_original
   refresh: 10min
   components: [ lvgl]

   
time:
  - platform: sntp
    id: sntp_time
    timezone: America/New_York
    servers:
     - 0.pool.ntp.org
     - 1.pool.ntp.org
     - 2.pool.ntp.org
    on_time_sync:
      - script.execute: time_update
    on_time:
      - minutes: '*'
        seconds: 0
        then:
          - script.execute: time_update

############ AntiBurn ################
      - hours: 2,3,4,5
        minutes: 5
        seconds: 0
        then:
          #- switch.turn_on: switch_antiburn
      - hours: 2,3,4,5
        minutes: 35
        seconds: 0
        then:
          #- switch.turn_off: switch_antiburn
#########################################

script:
  - id: time_update
    then:
      - lvgl.label.update:
          id: display_time
          text: !lambda |-
            static char time_buf[17];
            auto now = id(sntp_time).now();            
            bool is_pm = now.hour >= 12;
            int hour_12 = now.hour % 12;
            if (hour_12 == 0) {
                hour_12 = 12; // 12 AM/PM should be displayed as 12, not 0
            }
            snprintf(time_buf, sizeof(time_buf), "%2d:%02d%s", hour_12, now.minute, is_pm ? "pm" : "am");
            return time_buf; 

###################Temp and Humidity ################
sensor:
  - platform: homeassistant
    entity_id: sensor.atc_7997_temperature
    id: outdoor_temperature
    on_value:
      - lvgl.label.update:
          id: temp_text
          text:
            format: "\U000F10C3 %.1f \U000F0504"
            args: [ 'x' ]  

  - platform: homeassistant
    id: room_humidity
    entity_id: sensor.atc_7997_humidity
    on_value:
      - lvgl.label.update:
          id: humidity_text
          text:
            format: "\U000F058E %.1f \U000F03F0"
            args: [ 'x' ]  

#Fan#
  - platform: homeassistant
    id: fan_speed
    entity_id: fan.master_fan
    attribute: set_percentage
    on_value:
      - lvgl.slider.update:
          id: fan_slider
          value: !lambda return x;

################HVAC####################
  #- platform: homeassistant
   #id: room_thermostat
    #entity_id: climate.room_thermostat
    #attribute: temperature
    #on_value:
      #- lvgl.spinbox.update:
          #id: spinbox_id
          #value: !lambda return x;
############Cover##############
  - platform: homeassistant
    id: cover_myroom_pos
    entity_id: cover.myroom
    attribute: current_position
    on_value:
      - if:
          condition:
            lambda: |-
              return x == 100;
          then:
            - lvgl.widget.update:
                id: cov_up_myroom
                text_opa: 60%
          else:
            - lvgl.widget.update:
                id: cov_up_myroom
                text_opa: 100%
      - if:
          condition:
            lambda: |-
              return x == 0;
          then:
            - lvgl.widget.update:
                id: cov_down_myroom
                text_opa: 60%
          else:
            - lvgl.widget.update:
                id: cov_down_myroom
                text_opa: 100%



text_sensor:
  - platform: homeassistant
    id: cover_myroom_state
    entity_id: cover.myroom
    on_value:
      - if:
          condition:
            lambda: |-
              return ((0 == x.compare(std::string{"opening"})) or (0 == x.compare(std::string{"closing"})));
          then:
            - lvgl.label.update:
                id: cov_stop_myroom
                text: "STOP"
          else:
            - lvgl.label.update:
                id: cov_stop_myroom
                text:
                  format: "%.0f%%"
                  args: [ 'id(cover_myroom_pos).get_state()' ]


################### AntiBurn #######################
switch:
  - platform: lvgl
    name: Intim Lights
    widget: lv_button_8
    on_turn_on:
      then:
        - lvgl.widget.update:
            id: lv_button_8_icon
            text_color: 0xFFFF00
    on_turn_off:
      then:
        - lvgl.widget.update:
            id: lv_button_8_icon
            text_color: 0xB6B6B6 
  #- platform: template
    #name: Antiburn
    #id: switch_antiburn
    #icon: mdi:television-shimmer
    #optimistic: true
    #entity_category: "config"
    #turn_on_action:
      #- logger.log: "Starting Antiburn"
      #- if:
         # condition: lvgl.is_paused
          #then:
          #  - lvgl.resume:
          #  - lvgl.widget.redraw:
          #  - delay: 1s
      #- lvgl.pause:
         # show_snow: true
    #turn_off_action:
     # - logger.log: "Stopping Antiburn"
      #- if:
         # condition: lvgl.is_paused
         # then:
           # - lvgl.resume:
          #  - lvgl.widget.redraw:
          #  - delay: 1s
          #  - lvgl.pause:
################binary_sensors###############
# Lights#
binary_sensor:
  - platform: homeassistant
    id: remote_light1
    entity_id: light.over_the_bed_lights
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: lv_button_1
          state:
            checked: !lambda return x;

  - platform: homeassistant
    id: remote_light2
    entity_id: light.mirror_lighs
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: lv_button_2
          state:
            checked: !lambda return x;

  - platform: homeassistant
    id: remote_light3
    entity_id: light.tv_lights
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: lv_button_3
          state:
            checked: !lambda return x;

  - platform: homeassistant
    id: remote_light4
    entity_id: light.irina_s_wall_light
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: lv_button_4
          state:
            checked: !lambda return x;

  - platform: homeassistant
    id: remote_light5
    entity_id: light.bed_occupancy_sensor_yevgeniy_lights
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: lv_button_5
          state:
            checked: !lambda return x;

  - platform: homeassistant
    id: remote_light6
    entity_id: light.my_wall_light
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: lv_button_6
          state:
            checked: !lambda return x;
#Fan#
  - platform: homeassistant
    id: remote_fan
    entity_id: fan.master_fan
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: lv_button_10
          state:
            checked: !lambda return x;
#Covers#
  - platform: homeassistant
    id: remote_cover
    entity_id: cover.master_bedroom_all_covers
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: lv_button_11
          state:
            checked: !lambda return x;

################lvgl Buttons################

lvgl:
  displays:
    - display_id: my_display
  touchscreens:
    - touchscreen_id: my_touchscreen
  on_idle:
    timeout: 90s
    then:
      - logger.log: "LVGL is idle"
      - light.turn_off: backlight
      - lvgl.pause:

##########Pages####################
  top_layer:
    widgets:
      - label:
          text_font: roboto24
          text: "00:00 am"
          id: display_time
          align: bottom_mid
          #x: -2
          y: -10
          text_align: right
          text_color: 0xFFFFFF 
            
      - label:
          text_font: roboto24
          text: "-.- %"
          id: humidity_text
          align: bottom_right
          x: -20
          y: -10
          text_align: right
          text_color: 0xFFFFFF 
          on_press:
            then:
              - lvgl.page.show: second_page

      - label:
          text_font: roboto24
          text: "-.-°C"
          id: temp_text
          align: bottom_left
          x: 12
          y: -10
          #text_align: right
          text_color: 0xFFFFFF
          on_press:
            then:
              - lvgl.page.show: main_page    

                

  style_definitions:
    - id: style_line
      line_color: 0x0000FF
      line_width: 8
      line_rounded: true
    - id: date_style
      text_font: roboto24
      align: center
      text_color: 0x333333
      bg_opa: cover
      radius: 4
      pad_all: 2

####Header_Footer##########
    - id: header_footer
      bg_color: 0x0C7B5F
      bg_grad_color: 0x03291F
      bg_grad_dir: VER
      bg_opa: COVER
      border_width: 0
      radius: 0
      pad_all: 0
      pad_row: 0
      pad_column: 0
      border_color: 0x0077b3
      text_color: 0xFFFFFF
      width: 100%
      height: 40

  theme:
    btn:
      text_font: roboto24
      scroll_on_focus: true
      group: general
      radius: 25
      width: 150
      height: 97
      pad_left: 10px
      pad_top: 10px
      pad_bottom: 10px
      pad_right: 10px
      shadow_width: 0
      bg_color: 0x0C7B5F
      text_color: 0xB6B6B6
      checked:
        bg_color: 0xCC5E14
        text_color: 0xB6B6B6

    obj:
      text_font: roboto24
      scroll_on_focus: true
      group: general
      radius: 25
      width: 150
      height: 97
      pad_left: 10px
      pad_top: 10px
      pad_bottom: 10px
      pad_right: 10px
      shadow_width: 0
      bg_color: 0x0C7B5F
      border_color: 0x0C7B5F
      text_color: 0xB6B6B6
      checked:
        bg_color: 0xCC5E14
        text_color: 0xB6B6B6      

  page_wrap: true
  pages:
    - id: main_page
      skip: true
      layout: flex
      flex_flow: row_WRAP
      width: 100%
      bg_color: 0x000000
      bg_opa: cover
      pad_all: 5
      widgets: 
        - obj:
            #height: 207
            checkable: true
            id: lv_button_1
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $light_recessed
                  id: lv_button_1_icon
              - label:
                  align: bottom_mid
                  text: "Bed Lights"
                  long_mode: dot
            on_short_click:
              - homeassistant.service:
                  service: light.toggle
                  data:
                    entity_id: light.over_the_bed_lights 
        - obj:
            checkable: true
            id: lv_button_2
            widgets:
              - label:
                  text_font: light32
                  align: top_mid
                  text: $light_recessed
                  id: lv_button_2_icon
              - label:
                  align: bottom_mid
                  text: "Mirror Lights"
                  long_mode: dot  
            on_short_click:
              - homeassistant.service:
                  service: light.toggle
                  data:
                    entity_id: light.mirror_lighs 

        - obj:
           # width: 207
            checkable: true
            id: lv_button_3
            widgets:
              - label:
                  text_font: light32
                  align: top_right
                  text: $light_recessed
                  id: lv_button_3_icon
              - label:
                  align: bottom_mid
                  text: "TV Lights"
                  long_mode: dot
            on_short_click:
              - homeassistant.service:
                  service: light.toggle
                  data:
                    entity_id: light.tv_lights

        - obj:
            checkable: true
            id: lv_button_4
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $wallsconce_variant
                  id: lv_button_4_icon
              - label:
                  align: bottom_mid
                  text: "Irina Light"
                  long_mode: dot
            on_short_click:
              - homeassistant.service:
                  service: light.toggle
                  data:
                    entity_id: light.irina_s_wall_light
        - obj:
            checkable: true
            id: lv_button_5
            widgets:
              - label:
                  text_font: light32
                  align: top_mid
                  text: $bed
                  id: lv_button_5_icon
              - label:
                  align: bottom_mid
                  text: "Under Bed"
                  long_mode: dot
            on_short_click:
              - homeassistant.service:
                  service: light.toggle
                  data:
                    entity_id: light.bed_occupancy_sensor_yevgeniy_lights 

        - obj:
            checkable: true
            id: lv_button_6
            widgets:
              - label:
                  text_font: light32
                  align: top_right
                  text: $wallsconce_variant
                  id: lv_button_6_icon
              - label:
                  align: bottom_mid
                  text: "My Light"
                  long_mode: dot  
            on_short_click:
              - homeassistant.service:
                  service: light.toggle
                  data:
                    entity_id: light.my_wall_light 


        - obj:
            width: 230
            checkable: true
            id: lv_button_7
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $hvac
                  id: lv_button_7_icon
              - label:
                  align: bottom_left
                  text: "HVAC"
                  long_mode: dot
      
        - obj:
            width: 230
            checkable: true
            id: lv_button_8
            widgets:
              - label:
                  text_font: light32
                  align: top_right
                  text: $kiss
                  id: lv_button_8_icon
              - label:
                  align: bottom_right
                  text: "Intim"
                  long_mode: dot              

        - obj:
            width: 230 
            checkable: true
            id: lv_button_10
            widgets:
              - label:
                  text_font: light32
                  align: top_left
                  text: $ceiling_fan
                  id: lv_button_10_icon
              - label:
                  align: bottom_left
                  text: "Fan"
                  long_mode: dot 
              - slider:
                  x: 90
                  y: 25
                  width: 130
                  height: 10
                  indicator:
                    bg_color: 0x0C7B5F  
                  knob:
                    bg_color: 0x0C7B5F
                  #pad_all: 8
                  id: fan_slider
                  value: 75
                  min_value: 0
                  max_value: 100
                  adv_hittest: true
                  on_release:
                    - homeassistant.service:
                        service: fan.turn_on
                        data:
                          entity_id: fan.master_fan
                          percentage: !lambda return int(x);

            on_short_click:
              - homeassistant.service:
                  service: fan.toggle
                  data:
                    entity_id: fan.master_fan
            on_press: 
              - homeassistant.service:
                  service: fan.set_percentage
                  data:
                    entity_id: fan.master_fan


        - obj:
            width: 230
            checkable: true
            id: lv_button_11
            widgets:
              - label:
                  text_font: light32
                  align: top_right
                  text: $curtains
                  id: lv_button_11_icon
              - label:
                  align: bottom_right
                  text: "Curtains"
                  long_mode: dot   
            on_short_click:
              - homeassistant.service:
                  service: cover.toggle
                  data:
                    entity_id: cover.master_bedroom_all_covers    

    - id: second_page
      skip: true
      layout: flex
      flex_flow: row_WRAP
      width: 100%
      bg_color: 0x000000
      bg_opa: cover
      pad_all: 5    
      widgets:
############## Covers###################
          - label:
              x: 10
              y: 6
              width: 70
              text: "My room"
              text_align: CENTER
          - btn:
              x: 10
              y: 30
              width: 70
              height: 68
              widgets:
                - label:
                    id: cov_up_myroom
                    align: CENTER
                    text:  "\U000F0143"
              on_press:
                then:
                  - homeassistant.service:
                      service: cover.open
                      data:
                        entity_id: cover.myroom
          - btn:
              x: 10
              y: 103
              width: 70
              height: 68
              widgets:
                - label:
                    id: cov_stop_myroom
                    align: CENTER
                    text: STOP
              on_press:
                then:
                  - homeassistant.service:
                      service: cover.stop
                      data:
                        entity_id: cover.myroom
          - btn:
              x: 10
              y: 178
              width: 70
              height: 68
              widgets:
                - label:
                    id: cov_down_myroom
                    align: CENTER
                    
                    text: "\U000F0140"
              on_press:
                then:
                  - homeassistant.service:
                      service: cover.close
                      data:
                        entity_id: cover.myroom

#-------------------------------------------
# Internal outputs
#-------------------------------------------
output:
    # Backlight LED
  - platform: ledc
    pin: GPIO38
    id: GPIO38
    frequency: 100Hz
    
    # Built in 120v relay
  - id: internal_relay_1
    platform: gpio
    pin: 40

#-------------------------------------------
# LIGHTS
#-------------------------------------------
light:
  - platform: monochromatic
    output: GPIO38
    name: Backlight
    id: backlight
    restore_mode: ALWAYS_ON


#-------------------------------------------
# Graphicsd and Fonts
#-------------------------------------------
image:
  - file: https://esphome.io/_images/logo.png
    id: boot_logo
    resize: 200x200
    type: RGB565

  - file: "fonts/wall-sconce-180.svg"
    id: wallsconce_180
    resize: 20x20
    
font:
  
  - file: "gfonts://Roboto"
    id: roboto24
    size: 24
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          "\U000F004B",
          "\U0000f0ed",
          "\U000F006E",
          "\U000F012C",
          "\U000F179B",
          "\U000F0748",
          "\U000F1A1B",
          "\U000F02DC",
          "\U000F0A02",
          "\U000F035F",
          "\U000F0156",
          "\U000F0C5F", 
          "\U000f0084",
          "\U000f0091",
          "\U000F058E",
          "\U000F10C3",
          "\U000F03F0", # mdi-percent
          "\U000F0504", # mdi- celcius
          "\U000F091E",
          "\U000F0143", # mdi-arrow_up
          "\U000F0140", # mdi-arrow_down          
                    ]
  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: weather70
    size: 70
    bpp: 4
    glyphs: &mdi-weather-glyphs
      - "\U000F0590" # mdi-weather-cloudy
      - "\U000F0F2F" # mdi-weather-cloudy-alert
      - "\U000F0E6E" # mdi-weather-cloudy-arrow-right
      - "\U000F0591" # mdi-weather-fog
      - "\U000F0592" # mdi-weather-hail
      - "\U000F0F30" # mdi-weather-hazy
      - "\U000F0898" # mdi-weather-hurricane
      - "\U000F0593" # mdi-weather-lightning
      - "\U000F067E" # mdi-weather-lightning-rainy
      - "\U000F0594" # mdi-weather-clear-night
      - "\U000F0F31" # mdi-weather-night-partly-cloudy
      - "\U000F0595" # mdi-weather-partly-cloudy
      - "\U000F0F32" # mdi-weather-partly-lightning
      - "\U000F0F33" # mdi-weather-partly-rainy
      - "\U000F0F34" # mdi-weather-partly-snowy
      - "\U000F0F35" # mdi-weather-partly-snowy-rainy
      - "\U000F0596" # mdi-weather-pouring
      - "\U000F0597" # mdi-weather-rainy
      - "\U000F0598" # mdi-weather-snowy
      - "\U000F0F36" # mdi-weather-snowy-heavy
      - "\U000F067F" # mdi-weather-snowy-rainy
      - "\U000F0599" # mdi-weather-sunny
      - "\U000F0F37" # mdi-weather-sunny-alert
      - "\U000F14E4" # mdi-weather-sunny-off
      - "\U000F059A" # mdi-weather-sunset
      - "\U000F059B" # mdi-weather-sunset-down
      - "\U000F059C" # mdi-weather-sunset-up
      - "\U000F0F38" # mdi-weather-tornado
      - "\U000F059D" # mdi-weather-windy
      - "\U000F059E" # mdi-weather-windy-variant

  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: light32
    size: 32
    bpp: 4
    glyphs: [
      "\U000F0335", # mdi-lightbulb
      "\U000F0769", # mdi-ceiling-light
      "\U000F08DD", # mdi-floor-lamp
      "\U000F12BA", # mdi-string-lights
      "\U000F0150", # mdi-clock
      "\U000F1797", # mdi-ceiling_fan
      "\U000F179B", # mdi-light_recessed
      "\U000F1A2B", # mdi-blinds_horizontal
      "\U000F1A2C", # mdi-blinds_horizontal_closed
      "\U000F1847", # mdi-curtains_closed
      "\U000F1846", # mdi-curtains
      "\U000F091C", # mdi-wallsconce
      "\U000F02E3", # mdi-bed
      "\U000F08A0", # mdi-bed_empty
      "\U000F10C2", # mdi-thermometer_high
      "\U000F058E", # mdi-humidity 
      "\U000F091E", # mdi-wallsconce_variant
      "\U000F0C73", # mdi-kiss
      "\U000F0D43", # mdi- hvac   
    ]          
      
  - file: "gfonts://Roboto"
    id: roboto10
    size: 10
    bpp: 4          

#-------------------------------------------
# Touchscreen gt911 i2c
#-------------------------------------------
i2c:
  - id: bus_a
    sda: GPIO19
    scl: GPIO45
    #frequency: 100kHz
    
touchscreen:
  platform: gt911
  transform:
    mirror_x: false
    mirror_y: false
  id: my_touchscreen
  display: my_display

  on_touch:
    - logger.log:
          format: Touch at (%d, %d)
          args: [touch.x, touch.y]
    - lambda: |-
          ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
              touch.x,
              touch.y,
              touch.x_raw,
              touch.y_raw
              );

  on_release:
    - if:
        condition: lvgl.is_paused
        then:
          - logger.log: "LVGL resuming"
          - lvgl.resume:
          - lvgl.widget.redraw:
          - light.turn_on: backlight

#-------------------------------------------
# Display st7701s spi
#-------------------------------------------
spi:
  - id: lcd_spi
    clk_pin: GPIO48
    mosi_pin: GPIO47
    
display:
  - platform: st7701s
    id: my_display
    update_interval: never
    auto_clear_enabled: True
    data_rate: 2MHz
    spi_mode: MODE3
    color_order: RGB
    invert_colors: false
    dimensions:
      width: 480
      height: 480
    transform:
      mirror_x: false
      mirror_y: false
    cs_pin: 39
      # reset not defined 
    de_pin: 18
    hsync_pin: 16
    vsync_pin: 17
    pclk_pin: 21
    init_sequence: 
      - 1
      - [0xFF, 0x77, 0x01, 0x00, 0x00, 0x10] # CMD2_BKSEL_BK0
      - [0xCD, 0x00] # disable MDT flag
    pclk_frequency: 12MHz
    pclk_inverted: false
    data_pins:
      red:
        - 11         # R1
        - 12         # R2
        - 13         # R3
        - 14         # R4
        - 0          # R5
      green:
        - 8          # G0
        - 20         # G1
        - 3          # G2
        - 46         # G3
        - 9          # G4
        - 10         # G5 
      blue:
        - 4          # B1
        - 5          # B2
        - 6          # B3
        - 7          # B4
        - 15         # B5

1 Like

@Zenia
Thanks for posting your full code, this most definitely has some interesting part, which i’ve been looking for!
But please remember to remove your api key, and ota password :wink:

You welcome
Usually I remove this information but this time,I forgot, getting old :grin:
If you don’t mind to play with anti burn and climate control and then post your code, I will really appreciate that
Thank you

My testing

1 Like

I was on vacation for last week and didn’t play with mine, but still don’t see any reply about ANTIBURN and CLIMATE CONTROL. Is anyone make it work ? TY
If anybody interesting, here is a link to 3d box for this devices. Thank you to this genius person for sharing a file
Guition ESP32-S3-4848S040 Desk Stand by juliannesermon - Thingiverse