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

twanjaarsveld · November 27, 2024, 5:48pm

Yeah exactly,
unfortunately i still can’t control any home assistant devices

twanjaarsveld · November 27, 2024, 6:32pm

substitutions:
  name: "guition-esp32-s3-4848s040"
  friendly_name: "Guition480"
  device_description: "Guition ESP32-S3-4848S040 480*480 Smart Screen"

  lightbulb:         "\U000F0335"
  ceiling_light:     "\U000F0769"
  lamp:              "\U000F06B5"
  floor_lamp:        "\U000F08DD"
  string_lights:     "\U000F12BA"
  track_light:       "\U000F0914"
  bulkhead_light:    "\U000F1A2F"
  led_strip:         "\U000F07D6"
  coach_lamp:        "\U000F1020"
  ceiling_fan_light: "\U000F1798"

  icon_font: light40
  text_font: roboto24
  screen_height: '480px'
  screen_width: '480px'
  button_on_color: "burnt_sienna"
  button_off_color: "very_dark_gray"
  icon_on_color: "yellow"
  icon_off_color: "gray"
  label_on_color: "white"
  label_off_color: "gray"
  button_text_color: "white"
  button_height_single: '109px'
  button_height_double: '228px'
  button_width: '150px'
  touchscreen_idle_timeout: "120s"
  touchscreen_daytime_brightness: "100%"
  touchscreen_nighttime_brightness: "50%"
  # Screen goes to sleep at Mightnight
  screen_sleep_hour: '0'
  screen_sleep_minute: '0'
  # Screen wakes up at 5:30am
  screen_wake_hour: '5'
  screen_wake_minute: '30'

  button_1_name: "Local Light"
  button_1_id: local_light
  button_1_icon: $lightbulb
  button_1_device: "internal_relay_1"

  button_2_name: "Button 2"
  button_2_id: couch_lamp
  button_2_icon: $lightbulb
  button_2_device: "light.woonkamer_hue"

  # Button 3 is an empty object that requires no settings. It just pushes everything down one button

  button_4_name: "RGB light"
  button_4_id: rgb_light
  button_4_icon: $string_lights
  button_4_device: light.bar_filament_1

globals:
# Keeps track of late night mode for turning off the backlight
  - id: late_night_mode
    type: bool
    restore_value: false
    initial_value: 'false'
    
packages:
  base: !include modules/common_base.yaml
  webserver: !include modules/wifi_base.yaml
  hardware: !include modules/hardware/guition-esp32-s3-4848s040.yaml
  colors: !include modules/common/color.yaml
  fonts: !include modules/common/fonts.yaml  
  time: !include modules/lvgl/lvgl_time_sntp.yaml
  sensors: !include modules/lvgl/lvgl_sensors_base.yaml

esphome:
  on_boot:
    priority: -100
    then:
      - delay: 60s
      - lvgl.widget.hide: boot_screen

# -------------------------------------------------------------------------
# Button state - Update state for Homeassistant objects and internal relays
# -------------------------------------------------------------------------

# Internal Relays defined as lights go here
light:
  - !include { file: modules/lvgl/basic_local_relay_button_state.yaml, vars: { id: 1 } }
  

# Update button state from Home Assistant
text_sensor:
  - !include { file: modules/lvgl/basic_switch_button_state.yaml, vars: { id: 2 } }
  - !include { file: modules/lvgl/basic_switch_button_state.yaml, vars: { id: 4 } }

sensor:
  - !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 4 } }

#-------------------------------------------
# LVGL pages and Buttons
#-------------------------------------------

# Wake screen on touch
touchscreen:
  on_touch:
    then:
      - logger.log: "LVGL is active"
      - lvgl.resume:
      - if:
      # Only turn on baclight and set to 50% if late_night_mode is on
          condition:
            - lambda: |-
                return id(late_night_mode);
          then:
            - light.turn_on:
                id: display_backlight
                brightness: 50%

# Main LVGL section
lvgl:
  displays:
    - my_display
  touchscreens:
    - my_touchscreen
  on_idle: !include { file: modules/lvgl/lvgl_touchscreen_idle.yaml }

  theme: !include { file: modules/lvgl/lvgl_theme.yaml }
  page_wrap: true

# Boot Screen
  top_layer: !include { file: modules/lvgl/boot_screen.yaml, vars: { height: $screen_height, width: $screen_width  } }

# Main Page
  pages:
    - id: main_page
      layout:
        type: flex
        flex_flow: COLUMN_WRAP
      width: 100%
      bg_color: black
      bg_opa: cover
      pad_all: 5
      widgets: # Include all the buttons
        - button: !include { file: modules/lvgl/basic_local_relay_button.yaml, vars: { id: 1, height: $button_height_double } }
        - button: !include { file: modules/lvgl/basic_switch_button.yaml, vars: { id: 2, height: $button_height_single } }
        - button: !include { file: modules/lvgl/transparent_empty_button.yaml, vars: { id: 3, height: $button_height_single } }
        - button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 4, height: $button_height_double } }

#-------------------------------------------
# Graphics and Fonts
#-------------------------------------------
image:
  - file: https://esphome.io/_static/logo-text-on-light.svg
    id: boot_logo
    resize: 460x90
    type: RGB565
    use_transparency: true

andrew_NH · November 29, 2024, 4:18pm

Make sure you have enabled “Allow the device to perform Home Assistant actions” in Home assistant. Otherwise it can’t control anything.

Also if you have lights you need to use basic_light_button.yaml you are using basic_switch_button.yaml. That is for switches not lights.

andrew_NH · November 29, 2024, 4:21pm

Good steps here to setup Allow the device to perform Home Assistant actions

github.com

Blackymas/NSPanel_HA_Blueprint/blob/0c0be2dd26ee12de5d30628c60940976b9ce40f8/docs/alarm.md

# Alarm Control Panel

You can control an Alarm Control Panel from your NSPanel, which allows you to set the alarm mode to standard 
modes supported by Home Assistant (Home, Away, Night, Vacation, or Custom bypass) or disarm the alarm.

Currently, the NSPanel supports alarms without a code or with a numeric code. For alarms using a text code, 
the NSPanel will display it, but interactions (like button clicks) will send action calls to Home Assistant 
without the code, leading to failed operations that require a code.

> [!IMPORTANT]
> **Security advisory**
> The default communication between your NSPanel (ESPHome) and Home Assistant (HA) is not encrypted. This 
> could allow someone with network access to monitor and replicate the action calls. This risk is 
> particularly relevant when controlling your alarm system.
>
> To enhance security, we strongly recommend enabling API encryption for NSPanel users managing an Alarm 
> system. Follow the instructions in the ["API encryption" example here](customization.md#api-encryption) 
> to implement this security measure.
## Configuration

This file has been truncated. show original

twanjaarsveld · December 1, 2024, 7:13pm

thanks i forgot the “Allow the device to perform Home Assistant actions” i do now have lights working

only things is that it won’t update the state if i trigger the lights using something else than the display

substitutions:
  name: "guition-esp32-s3-4848s040"
  friendly_name: "Guition480"
  device_description: "Guition ESP32-S3-4848S040 480*480 Smart Screen"

  lightbulb:         "\U000F0335"
  ceiling_light:     "\U000F0769"
  lamp:              "\U000F06B5"
  floor_lamp:        "\U000F08DD"
  string_lights:     "\U000F12BA"
  track_light:       "\U000F0914"
  bulkhead_light:    "\U000F1A2F"
  led_strip:         "\U000F07D6"
  coach_lamp:        "\U000F1020"
  ceiling_fan_light: "\U000F1798"

  icon_font: light40
  text_font: roboto24
  screen_height: '480px'
  screen_width: '480px'
  button_on_color: "burnt_sienna"
  button_off_color: "very_dark_gray"
  icon_on_color: "yellow"
  icon_off_color: "gray"
  label_on_color: "white"
  label_off_color: "gray"
  button_text_color: "white"
  button_height_single: '109px'
  button_height_double: '228px'
  button_width: '150px'
  touchscreen_idle_timeout: "120s"
  touchscreen_daytime_brightness: "100%"
  touchscreen_nighttime_brightness: "50%"
  # Screen goes to sleep at Mightnight
  screen_sleep_hour: '0'
  screen_sleep_minute: '0'
  # Screen wakes up at 5:30am
  screen_wake_hour: '5'
  screen_wake_minute: '30'



  # Button 4-9 is dimmable light
  button_4_name: "Woonkamer"
  button_4_id: woonkamer
  button_4_icon: $string_lights
  button_4_device: light.woonkamer_hue

  button_5_name: "Keuken"
  button_5_id: keuken
  button_5_icon: $string_lights
  button_5_device: light.keuken_hue

  button_6_name: "Eetkamer"
  button_6_id: eetkamer
  button_6_icon: $string_lights
  button_6_device: light.eetkamer_hue

  button_7_name: "Gang"
  button_7_id: gang
  button_7_icon: $string_lights
  button_7_device: light.gang_hue

  button_8_name: "Tuin"
  button_8_id: tuin
  button_8_icon: $string_lights
  button_8_device: light.tuin_hue

  button_9_name: "Slaapkamer"
  button_9_id: slaapkamer
  button_9_icon: $string_lights
  button_9_device: light.slaapkamer_hue

  button_10_name: "Toilet"
  button_10_id: toilet
  button_10_icon: $string_lights
  button_10_device: light.toilet_hue


globals:
# Keeps track of late night mode for turning off the backlight
  - id: late_night_mode
    type: bool
    restore_value: false
    initial_value: 'false'
    
packages:
  base: !include modules/common_base.yaml
  webserver: !include modules/wifi_base.yaml
  hardware: !include modules/hardware/guition-esp32-s3-4848s040.yaml
  colors: !include modules/common/color.yaml
  fonts: !include modules/common/fonts.yaml  
  time: !include modules/lvgl/lvgl_time_sntp.yaml
  sensors: !include modules/lvgl/lvgl_sensors_base.yaml

esphome:
  on_boot:
    priority: -100
    then:
      - delay: 60s
      - lvgl.widget.hide: boot_screen

# -------------------------------------------------------------------------
# Button state - Update state for Homeassistant objects and internal relays
# -------------------------------------------------------------------------

# Internal Relays defined as lights go here
light:

# Update button state from Home Assistant
text_sensor:


sensor:
  - !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 4 } }
  - !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 5 } }
  - !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 6 } }
  - !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 7 } }
  - !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 8 } }
  - !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 9 } }  
  - !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 10 } }  

# -------------------------------------------------------------------------
# LVGL pages and Buttons
# -------------------------------------------------------------------------

# Wake screen on touch
touchscreen:
  on_touch:
    then:
      - logger.log: "LVGL is active"
      - lvgl.resume:
      - if:
      # Only turn on baclight and set to 50% if late_night_mode is on
          condition:
            - lambda: |-
                return id(late_night_mode);
          then:
            - light.turn_on:
                id: display_backlight
                brightness: 50%

# Main LVGL section
lvgl:
  displays:
    - my_display
  touchscreens:
    - my_touchscreen
  on_idle: !include { file: modules/lvgl/lvgl_touchscreen_idle.yaml }

  theme: !include { file: modules/lvgl/lvgl_theme.yaml }
  page_wrap: true

# Boot Screen
  top_layer: !include { file: modules/lvgl/boot_screen.yaml, vars: { height: $screen_height, width: $screen_width  } }

# Main Page
  pages:
    - id: main_page
      layout:
        type: flex
        flex_flow: COLUMN_WRAP
      width: 100%
      bg_color: black
      bg_opa: cover
      pad_all: 5
      widgets: # Include all the buttons
        - button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 4, height: $button_height_double } }
        - button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 5, height: $button_height_double } }
        - button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 6, height: $button_height_double } }
        - button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 7, height: $button_height_double } }
        - button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 8, height: $button_height_double } }        
        - button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 9, height: $button_height_double } }   
        - button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 10, height: $button_height_double } }                

# -------------------------------------------------------------------------
# Graphic assets
# -------------------------------------------------------------------------
image:
  - file: https://esphome.io/_static/logo-text-on-light.svg
    id: boot_logo
    resize: 460x90
    type: RGB565
    use_transparency: true

andrew_NH · December 3, 2024, 5:00pm

No sure on that one. I have not seen an issue with state before. Maybe check your logs.

andrew_NH · December 3, 2024, 6:08pm

I think I found a better way to pull in the button states. This should resolve your issues.

I changed the states an pull them in a packages now. Check out the new code on my git repo.

twanjaarsveld · December 4, 2024, 7:34pm

Thanks i will try this
edit: awesome it works!

andrew_NH · December 4, 2024, 10:04pm

I spun this off info a new project. It supports lots of other screens. Not just this one.

Nick4 · December 5, 2024, 12:06am

Andrew, that first ALI link of the device in the GH list doesn’t work.

andrew_NH · December 5, 2024, 4:14am

I don’t understand your abbreviations. Can you be more specific?

Nick4 · December 5, 2024, 10:00am

Sorry
ALI = aliexpress
GH = Github

paul_c5x4 · December 5, 2024, 12:10pm

There are a couple of issues at play with these phantom touches.

Crappy PSU with loose components. On one display, I had two of the capacitors fall out of the PSU module. After soldering them back in, phantom touches appeared to be eliminated.
Mains borne interference - Some of this can be filtered out by adding an inductor & capacitor. There is also a register buried in the touch screen chip that can be tweaked to reduce the effect of noise. There is a patch floating around for openHASP to access this register. See: Guition ESP32-S3-4848S040 Display wakes-up randomly · Issue #706 · HASwitchPlate/openHASP · GitHub

Protoncek · December 5, 2024, 3:23pm

While built-in PSU can be a problem it’s not the main cause of this fault, because these phantom wake-ups&touches are also frequently happening when display is powered via USB…
Regarding 2.: i added missing inductor and capacitor, but it seems that made things even worse, not better…
Yes, that custom fw does help, but occasional wakeups are still happening. I guess that’s because main problem is not addressed, which is, as i believe, hardware fault - wrong design. Too bad, because it’s nice and cheap lcd…sadly useless…

andrew_NH · December 5, 2024, 3:59pm

aliexpress links break often. I’ll do my best to keep them updated. You can just google the name of the screen if you want to find a local vendor for it.

paul_c5x4 · December 5, 2024, 4:11pm

I have a couple of the displays here. Did have a short spell of getting an occasional phantom touch, but not experienced any for over six months. On that basis, I wouldn’t write them off as useless.

Protoncek · December 5, 2024, 5:47pm

True, my statement is perhaps a bit harsh. I’m preparing to replace my openhasp with esphome on my device and see over weeks if it will be any better. But it’s a learning curve all over again, and that’s why i didn’t do that yet…
While this lcd indeed has a register for touch sensitivity i didn’t find yet that esphome would use it…or does it?

Zenia · December 5, 2024, 5:58pm

Same here. I have this panel working for couple of months in my Master Bedroom on my night stand , and don’t see any occasional wakeups at all, but I also use an automation to lower lcd screen brightness for night time, just in case it will wake up.

alias: Touch Panel Backlight Brightness
description: ""
mode: single
triggers:
  - at: "21:00:00"
    id: 9:00 PM
    trigger: time
  - at: "06:00:00"
    id: 9:00 Am
    trigger: time
conditions: []
actions:
  - choose:
      - conditions:
          - condition: trigger
            id:
              - 9:00 PM
        sequence:
          - metadata: {}
            data:
              brightness_pct: 50
            target:
              entity_id: light.touch_panel_backlight
            action: light.turn_on
          - delay:
              hours: 0
              minutes: 1
              seconds: 0
              milliseconds: 0
          - action: light.turn_off
            metadata: {}
            data: {}
            target:
              entity_id: light.touch_panel_backlight
      - conditions:
          - condition: trigger
            id:
              - 6:00 Am
        sequence:
          - metadata: {}
            data:
              brightness_pct: 97
            target:
              entity_id: light.touch_panel_backlight
            action: light.turn_on
          - delay:
              hours: 0
              minutes: 1
              seconds: 0
              milliseconds: 0
          - action: light.turn_off
            metadata: {}
            data: {}
            target:
              entity_id: light.touch_panel_backlight

andrew_NH · December 6, 2024, 9:27pm

There are some settings for touch sensitivity but they are preset to a good setting. I have not seen any issues.

I tried openhasp but I like esphome much better. it has a lot more options and is easier to use.

Protoncek · December 7, 2024, 7:30am

Now i also have esphome for a couple of days on my test device. I must say i didn’t have a single random wakeup yet, and this is device where wakeups were quite frequent (every couple of minutes), even with modified openhasp.
Also you’re correct about more options, i missed quite some of those in openhasp. As i said, there’s quite a learning curve, but most of solutions can be found in expamples and/or this topic, so my start is good so far.