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

I download a full log. I thought it will be more visual and easy to identify where I have a problem.
Here is a full log:

INFO ESPHome 2024.6.6
INFO Reading configuration /config/esphome/touch-panel.yaml...
Failed config

lvgl: [source /config/esphome/touch-panel.yaml:368]
  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: {}
  top_layer: 
    widgets: 
      - label: 
          text_font: roboto24
          text: 00:00 am
          id: display_time
          align: bottom_mid
          y: -10
          text_align: right
          text_color: 16777215
      - label: 
          text_font: roboto24
          text: -.- %
          id: humidity_text
          align: bottom_right
          x: -20
          y: -10
          text_align: right
          text_color: 16777215
          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_color: 16777215
          on_press: 
            then: 
              - lvgl.page.show: main_page
  style_definitions: 
    - id: style_line
      line_color: 255
      line_width: 8
      line_rounded: True
    - id: date_style
      text_font: roboto24
      align: center
      text_color: 3355443
      bg_opa: cover
      radius: 4
      pad_all: 2
    - id: header_footer
      bg_color: 818015
      bg_grad_color: 207135
      bg_grad_dir: VER
      bg_opa: COVER
      border_width: 0
      radius: 0
      pad_all: 0
      pad_row: 0
      pad_column: 0
      border_color: 30643
      text_color: 16777215
      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: 818015
      text_color: 11974326
      checked: 
        bg_color: 13393428
        text_color: 11974326
    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: 818015
      border_color: 818015
      text_color: 11974326
      checked: 
        bg_color: 13393428
        text_color: 11974326
  page_wrap: True
  pages: 
    
    Layout value must be a dict.
    - id: main_page
      skip: True
      layout: flex
      flex_flow: row_WRAP
      width: 100%
      bg_color: 0
      bg_opa: cover
      pad_all: 5
      widgets: 
        - obj: 
            checkable: True
            id: lv_button_1
            widgets: 
              - label: 
                  text_font: light32
                  align: top_left
                  text: 󱞛
                  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: 󱞛
                  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: 
            checkable: True
            id: lv_button_3
            widgets: 
              - label: 
                  text_font: light32
                  align: top_right
                  text: 󱞛
                  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: 󰤞
                  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: 󰋣
                  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: 󰤞
                  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: 󰵃
                  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: 󰱳
                  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: 󱞗
                  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: 818015
                  knob: 
                    bg_color: 818015
                  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: 󱡆
                  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
    
    Layout value must be a dict.
    - id: second_page
      skip: True
      layout: flex

Syntax for layout was changed - see the docs: LVGL Graphics — ESPHome

Thank you. Working like a charm.
@clydebarrow THANK YOU for your hard work with esphome lvgl stuff.

Everybody who help me with this project- THANK YOU

I have a device of the same brand, but it is circular. The latest device model is JC3636W518C
. It has a microphone, DAC, QI wireless power supply, SD card, but the screen driver is QSPI st77916. St77916 is not supported by ESPHome. Its frame rate is very high. It would be great if it could be added.

Do you have a link to that?

It probably hasn’t been listed on AliExpress yet. But it can be purchased on Taobao China.

JC3636W518CN:1.8寸圆屏 QSPI 360*360 IPS电容屏拾音频谱电子相框 ESP32开发板-淘宝网 (taobao.com)
Data Connection:http://pan.jczn1688.com/directlink/1/HMI%20display/JC3636W518CN.zip
Demo video:【全网性能最强ESP32-S3刷屏霸主 8M PSRAM 16M FLASH】 全网性能最强ESP32-S3刷屏霸主 8M PSRAM 16M FLASH_哔哩哔哩_bilibili

Need help again ( probably not a last time :grinning:) How I can move label: HVAC down to make it looks like on the other buttons? I try everything ( I think) what I can, read all documentation, but still no luck.

        - obj:
            width: 230
            layout: # enable the GRID layout for the children widgets
              type: GRID # split the rows and the columns proportionally
              grid_columns: [FR(1), FR(1), FR(1), FR(1), FR(1), FR(1), FR(1)] # equal
              grid_rows: [FR(1), FR(1), FR(1), FR(1), FR(1)] # like percents
            checkable: true
            id: lv_button_7
            widgets:
              - label:
                  grid_cell_column_pos: 0
                  grid_cell_row_pos: 7
                  text_font: light32
                  align: top_left
                  text: $hvac
                  id: lv_button_7_icon
              - label:                   
                  grid_cell_column_pos: 0
                  grid_cell_row_pos: 6
                  align: bottom_mid
                  #grid_cell_x_align: SPACE_BETWEEN
                  grid_cell_y_align: start
                  text: "Hvac"
                  long_mode: dot
              - btn:
                  id: spin_down
                  grid_cell_column_pos: 3
                  grid_cell_row_pos: 6
                  #grid_cell_x_align: start
                  #grid_cell_y_align: start
                  align: CENTER
                  text_align: CENTER
                  bg_opa: transp                 
                  width: 40
                  height: 50
                  on_click:
                    - lvgl.spinbox.decrement: spinbox_id
                  widgets:
                    - label:
                          text: "-"
              - spinbox:
                  id: spinbox_id
                  grid_cell_column_pos: 4
                  grid_cell_row_pos: 6
                  #grid_cell_x_align: center
                  #grid_cell_y_align: center

                  align: CENTER
                  text_align: CENTER
                  text_color: 0xB6B6B6
                  bg_opa: transp
                  border_opa: transp
                  width: 60
                  range_from: 15
                  range_to: 35
                  step: 0.1
                  rollover: false
                  digits: 3
                  decimal_places: 1
                  on_value:
                    then:
                      - homeassistant.service:
                          service: climate.set_temperature
                          data:
                            temperature: !lambda return x;
                            entity_id: climate.upstairs
              - btn:
                  id: spin_up
                  grid_cell_column_pos: 6
                  grid_cell_row_pos: 6
                  #grid_cell_x_align: SPACE_AROUND
                  #grid_cell_y_align: SPACE_AROUND
                  align: CENTER
                  text_align: CENTER
                  bg_opa: transp               
                  width: 40
                  height: 50
                  on_click:
                    - lvgl.spinbox.increment: spinbox_id
                  widgets:
                    - label:
                        text: "+"  

Grit part: LVGL Graphics — ESPHome
Thank you

This is wrong: grid_cell_row_pos: 6 - You only specified 6 rows so the row number should be in the range 0-5.

Rather than using a grid inside the buttons, you might find it simpler to just use align: - that basically gives you a 3x3 grid with left/mid/right top/bottom/center etc.

1 Like

It would be better to make a new forum thread to this discuss device . An leave this thread just for the Guition ESP32-S3-4848S040.

I tried the Guition esp32-24245012c and it seems to work OK
https://www.aliexpress.us/item/3256806114329043.html

It’s very similar to the device you have.

Will try that when internet and power will be restored. It was a big storm with lighting in my area

So, I tried, but not satisfy with result. I want a + temp and - to be shifted to the right , like I had it before. For some reason I can’t do this with 3x3 grid.

        - 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
              - btn:
                  id: spin_down
                  align: left_mid
                  text_align: right
                  bg_opa: transp                 
                  width: 40
                  height: 60
                  on_click:
                    - lvgl.spinbox.decrement: spinbox_id
                  widgets:
                    - label:
                          text: "-"
              - spinbox:
                  id: spinbox_id
                  align: center
                  text_align: right
                  text_color: 0xB6B6B6
                  bg_opa: transp
                  border_opa: transp
                  width: 60
                  range_from: 15
                  range_to: 35
                  step: 0.1
                  rollover: false
                  digits: 3
                  decimal_places: 1
                  on_value:
                    then:
                      - homeassistant.service:
                          service: climate.set_temperature
                          data:
                            temperature: !lambda return x;
                            entity_id: climate.upstairs
              - btn:
                  id: spin_up
                  align: right_mid
                  text_align: right
                  bg_opa: transp               
                  width: 40
                  height: 60
                  on_click:
                    - lvgl.spinbox.increment: spinbox_id
                  widgets:
                    - label:
                        text: "+"     

Any segestions? TY

You need to wrap the spinbox with its controlling buttons in an obj to keep them together. See the example in the cookbook: Quote from “LVGL: Tips and Tricks — ESPHome”

I understand that, but it’s already in OBJ together with icon and name. I will try to put obj inside the main obj tomorrow . Thank you for suggestion.

Yes, but each obj has its own layout. So you need another obj wrapping just the spinbox and buttons.

Question.

Is there any advantage of using this display with ESPHome and LVGL graphics instead of OpenHasp?

Read the thread, it is discussed in the first few posts.

I would say the biggest advantage of using ESPhome is that you can do all the other functions of ESPhome not just use it as a display. Also ESPhome uses the latest LVGL 8.4. This has many more features then the old version used by openHASP.

The biggest feature is you can use “layout” this allows you to create a bunch of objects and have LVGL place them on a grid for you. No more “counting pixels”

Plus you don’t need and of the openHASP stuff loaded into Home Assistant. You can access all the Home Assistant devices directly. The code is much cleaner and more simple.

2 Likes

I can see advantages to not depending on MQ{{TEMPLATE:TOP}} but I couldn’t get far. Here’s the error I get when I compile an example configuration:

INFO ESPHome 2024.7.0
INFO Reading configuration /config/esphome/480screen.yaml...
Failed config

external_components: [source /config/esphome/480screen.yaml:54]
  - source: github://clydebarrow/esphome@lvgl_original
    refresh: 10min
    components: 
      
      Could not find __init__.py file for component lvgl. Please check the component is defined by this source (search path: /data/external_components/c2814a01/esphome/components/lvgl/__init__.py).
      - lvgl