GUITION 4" 480x480 ESP32-S3-4848S040 Smart Display #6747

agillis · 2024-05-14T22:31:31Z

agillis
May 14, 2024

https://www.aliexpress.us/item/3256806618705053.html

I have been seeing these a lot of Ali lately for around $27. They check all the boxes for me

Fast CPU
Lots of memory
Great format
Easy wall mount as a wall switch
120v relay included
Does not require programming another internal device for LVGL like NSPanel

Many thanks to everybody on the ESPhome discussion board for helping me get this working. I initially tested it with the openHASP project. This works very well but you a limited to what you can do with it.

I really like the infinite flexibility of ESPhome. I think it would be easy to build a complete automation system on the is screen without Homeassistant or anything else.

I have concentrated on building a simple light switch with it although it would be easy to build a multi page panel. I used the new (BETA) LVGL library. The buttons are on a flex grid so if you remove one the other buttons float to fill in the space. This is much easier then locating the button with exact pixial location.

Over all I think this is a huge feature for ESPhome!

substitutions:
  lightbulb:     "\U000F0335"
  ceiling_light: "\U000F0769"
  floor_lamp:    "\U000F08DD"
  string_lights: "\U000F12BA"

#-------------------------------------------
# ESPHOME PLATFORM SETTINGS
#-------------------------------------------
esphome:
  name: 480screen
  friendly_name: 480screen
  platformio_options:
    board_build.flash_mode: dio

#-------------------------------------------
# ESP MCU SETTINGS for
# Guition ESP32-S3-4848S040
#-------------------------------------------
esp32:
  board: esp32-s3-devkitc-1
  variant: esp32s3
  flash_size: 16MB
  framework:
    type: esp-idf
    sdkconfig_options:
      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

# Enable logging
logger:

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

ota:
  password: !secret ota_password

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), "%02d:%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

  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

  theme:
    btn:
      text_font: roboto24
      scroll_on_focus: true
      group: general
      radius: 25
      width: 150
      height: 109
      pad_left: 10px
      pad_top: 10px
      pad_bottom: 10px
      pad_right: 10px
      shadow_width: 0
      bg_color: 0x313131
      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: 223
            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: $lightbulb
                  id: lv_button_6_icon
              - label:
                  id: display_time
                  align: bottom_left
                  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: $lightbulb
                  id: lv_button_11_icon
              - label:
                  align: bottom_left
                  text: "Driveway"
                  long_mode: dot              

#-------------------------------------------
# Internal outputs
#-------------------------------------------
output:
    # Backlight LED
  - platform: ledc
    pin: GPIO38
    id: GPIO38
    frequency: 100Hz
    
    # Built in 240v 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
      ]          
      
  - 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
# updated: 05/20/2024
#-------------------------------------------
spi:
  - id: lcd_spi
    clk_pin: GPIO48
    mosi_pin: GPIO47
    
display:
  - platform: st7701s
    id: my_display
    update_interval: never
    auto_clear_enabled: False
    spi_mode: MODE3
    data_rate: 2MHz
    color_order: RGB
    invert_colors: False
    dimensions:
      width: 480
      height: 480
    cs_pin: 39
    de_pin: 18
    hsync_pin: 16
    vsync_pin: 17
    pclk_pin: 21
    pclk_frequency: 12MHz
    pclk_inverted: False
    hsync_pulse_width: 8
    hsync_front_porch: 10
    hsync_back_porch: 20
    vsync_pulse_width: 8
    vsync_front_porch: 10
    vsync_back_porch: 10
    init_sequence:
      - 1
      # Custom sequences are an array, first byte is command, the rest are data.
      - [ 0xFF, 0x77, 0x01, 0x00, 0x00, 0x10 ] # CMD2_BKSEL_BK0
      - [ 0xCD, 0x00 ] # disable MDT flag
    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

lboue · 2024-05-18T06:56:09Z

lboue
May 18, 2024

@agillis That's exactly what I've been trying to do for the last 2 months. It works really well, it's great.
I've changed the icons and the time format. This is what it looks like:

3 replies

agillis May 20, 2024
Author

Nice, looks great! The people over at the Home Assistant forum had a few changes to the screen driver section. It makes the color depth correct. I just edited the "Display st7701s spi" section above.

lboue May 20, 2024

Thank you, I'm going to correct this in my configuration file.
Would it be possible to find out how to reduce the size of button 1 so that it is the same size as all the others?

agillis May 20, 2024
Author

Sure just check section for "id: lv_button_1_icon" and remove the "height: 223" override. Of course then you will have room for an extra button! Just add another at the bottom of the list.

Ghome79 · 2024-05-23T12:45:03Z

Ghome79
May 23, 2024

Awesome work, is there a way to turn off screen after 60 seconds of inactivity and then turn back on with a touch

3 replies

agillis May 23, 2024
Author

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"

https://deploy-preview-3678--esphome.netlify.app/cookbook/lvgl

Ghome79 May 23, 2024

thank you for your fast response, ill check it out
also have you notice with the original firmware from guition there was a temperature and humidity stats on the main page.
is there a sensor? have you open it yet?

agillis May 23, 2024
Author

There is no hardware in the Guition panel for temperature or humidity but you could certainly pull this info from another device and display them.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GUITION 4" 480x480 ESP32-S3-4848S040 Smart Display #6747

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 6 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

GUITION 4" 480x480 ESP32-S3-4848S040 Smart Display #6747

agillis May 14, 2024

Replies: 2 comments · 6 replies

lboue May 18, 2024

agillis May 20, 2024 Author

lboue May 20, 2024

agillis May 20, 2024 Author

Ghome79 May 23, 2024

agillis May 23, 2024 Author

Ghome79 May 23, 2024

agillis May 23, 2024 Author

agillis
May 14, 2024

Replies: 2 comments 6 replies

lboue
May 18, 2024

agillis May 20, 2024
Author

agillis May 20, 2024
Author

Ghome79
May 23, 2024

agillis May 23, 2024
Author

agillis May 23, 2024
Author