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

I think this setting has moved. In my case I just commented out these lines.

Yes , comment out it works. But now I have in the bottom buttons (navigatieon buttons) between them some space. So it should be defined somewhere else to let it work

Yes, it was moved somewhere else. Since it made no difference to my setup I didn’t check the documentation.

Edit:

pad_row is now in the styling variables

Stick with the Guition ESP32-S3-4848S040 it’s cheaper and there are more people using it.

1 Like

LVGL has been added to 2024.8.0 so there is no longer a need to use the @clydebarrow external repo. I updated my demo code to only use stock 2024.8.0 . I had to update a bunch of small stuff to bring it in line with the latest LVGL code.

What an amazing leap forward for ESPhome!

The link at the start of the thread to AliExpress says “this item is no longer available”, but if you click on “Find similar items” it does so.

Yeah it’s always a good idea to dig around for the best price.

Hmm.

I shouldn’t know how t solve it, where I should put the code to fix it.

I have nog this in style definirations

 style_definitions:
    - id: header_footer
      bg_color: 0x444444
      bg_grad_color: 0x444444
      bg_grad_dir: VER
      bg_opa: COVER
      border_width: 0
      radius: 0
      pad_all: 0
      border_color: 0x333333
      text_color: 0xFFFFFF
      width: 100%
      height: 40

andi this as buttonmatrix to create them. But putting hem here I get also an error.

  - buttonmatrix:
      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: clock_page
          - id: page_next
            text: "\uF054"
            on_press:
              then:
                lvgl.page.next:

is this the same device? (link in the first post is for us and fcks up aliexpress for non us users)

https://www.aliexpress.com/item/1005006622809642.html

As far as I can tell it is. Same model number (ending 4848s040) and a reference in the reviews to bring openhasp compatible. Also pics from customers referring to guition.

1 Like

Found one and ordered :smiley: thanks for the info!

Hi,

Here my designs. The only issue I can’t fix is on the bottom, to have it as one bar , and not as three buttons.

I also have the issue when booting and also when the condition change, I get first tjhe state in the big font, and after a minute or so the icon. It should be nice that I only get this icon.

On first page I have my Airco. On top you see state icons that will be visibile when it is on or open (garage door open, audio on, airco mode, hot water etc.)

Other page is my light, and my shuttters. I;m using this panel in my office.

3 Likes

Code please?

In 3 pieces

substitutions:
  lightbulb: "\U000F1802"
  boiler_on: "\U000F0238"
  boiler_off: "\U000F1722"
  radiator: "\U000F0438"
  ceiling_light: "\U000F0769"
  house_temp: "\U000F0F55"
  house_hum: "\U000F058E"
  house_solar: "\U000F1A73"
  house_solar2: "\U000F0A72"
  house_valve: "\U000F1066"
  airco: "\U000F001B"
  powerbutton: "\U000F0906"
#weather icons
  cloudy: "\U000F0590"
  cloudyalert: "\U000F0F2F"
  cloudyarrowright: "\U000F0E6E"
  fog: "\U000F0591"
  hail: "\U000F0592"
  hazy: "\U000F0F30"
  hurricane: "\U000F0898"
  lightning: "\U000F0593"
  lightningrainy: "\U000F067E"
  night: "\U000F0594"
  nightpartlycloudy: "\U000F0F31"
  partlycloudy: "\U000F0595"
  partlylightning: "\U000F0F32"
  partlyrainy: "\U000F0F33"
  partlysnowy: "\U000F0F34"
  partlysnowyrainy: "\U000F0F35"
  pouring: "\U000F0596"
  rainy: "\U000F0597"
  snowy: "\U000F0598"
  snowyheavy: "\U000F0F36"
  snowyrainy: "\U000F067F"
  sunny: "\U000F0599"
  sunnyalert: "\U000F0F37"
  sunnyoff: "\U000F14E4"
  sunset: "\U000F059A"
  sunsetdown: "\U000F059B"
  sunsetup: "\U000F059C"
  tornado: "\U000F0F38"
  windy: "\U000F059D"
  windyvariant: "\U000F059E"
  happyface: "\U000F01F5"
#airco
  cool: "\U000F0717"
  heat: "\U000F0510"
  dry: "\U000F058E"
  fan: "\U000F0210"
esphome:
  name: ha-panel-1
  friendly_name: HA panel 1
  platformio_options:
    board_build.flash_mode: dio
  on_boot:
    - delay: 5s
    - lvgl.widget.hide: boot_screen
    - delay: 30s
    - light.turn_on:
          id: backlight
          brightness: 75%
          transition_length: 4s

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:
  on_client_connected:
    - if:
        condition:
          lambda: 'return (0 == client_info.find("Home Assistant "));'
        then:
          - lvgl.widget.show: lbl_hastatus
  on_client_disconnected:
    - if:
        condition:
          lambda: 'return (0 == client_info.find("Home Assistant "));'
        then:
          - lvgl.widget.hide: lbl_hastatus

ota:
  - platform: esphome
    password: "secret"

wifi:
  networks:
  - ssid: ssidname
    password: secret
  #use_address: 192.168.9.75

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Ha-Panel-1 Fallback Hotspot"
    password: secret

captive_portal:

external_components:
  - source: github://pr#7338
    components: [lvgl]

#-----------------------------------------------------------------------------------------------------------
# Content
#------------------------------------------- 
lvgl:

  displays:
    - my_display
  touchscreens:
    - my_touchscreen
#-------------------------------------------
  theme:
    #label:
     # text_font: roboto24 # set all your labels to use your custom defined font
    button:
      bg_color: 0x333333
      #bg_grad_color: 0x333333
      #bg_grad_dir: VER
      text_font: roboto24
      bg_opa: 85%
      border_color: 0x333333
      border_width: 0
      text_color: 0xFFFFFF
      pressed: # set some btn colors to be different in pressed state
        bg_color: 0x111111
        bg_grad_color: 0x111111
      checked: # set some btn colors to be different in checked state
        bg_color: 0x111111
        bg_grad_color: 0x111111
        text_color: 0xf6ff00
    buttonmatrix:
      bg_opa: TRANSP
      border_color: 0x333333
      border_width: 0
      text_color: 0xFFFFFF
      pad_all: 0
      items: # set all your btnmatrix buttons to use your custom defined styles and font
        bg_color: 0x333333
        bg_grad_color: 0x333333
        bg_grad_dir: VER
        bg_opa: COVER
        border_color: 0x333333
        border_width: 1
        text_color: 0xFFFFFF
        #text_font: roboto10
        pressed:
          bg_color: 0x111111
          bg_grad_color: 0x111111
        checked:
          bg_color: 0x111111
          bg_grad_color: 0x111111
          text_color: 0xEEEEEE
    switch:
      bg_color: 0xC0C0C0
      bg_grad_color: 0xb0b0b0
      bg_grad_dir: VER
      bg_opa: COVER
      checked:
        bg_color: 0x1d5f96
        bg_grad_color: 0x03324A
        bg_grad_dir: VER
        bg_opa: COVER
      knob:
        bg_color: 0xFFFFFF
        bg_grad_color: 0xC0C0C0
        bg_grad_dir: VER
        bg_opa: COVER
    slider:
      border_width: 1
      border_opa: 30%
      bg_color: 0x9c9c9c
      bg_opa: 15%
      indicator:
        bg_color: 0x333333
        bg_grad_color: 0x333333
        bg_opa: COVER
      knob:
        bg_color: 0x444444
        bg_grad_color: 0x444444
        bg_opa: COVER
        border_color: 0x444444
        border_width: 1
        text_color: 0xFFFFFF
#-------------------------------------------
  style_definitions:
    - id: header_footer
      bg_color: 0x444444
      bg_grad_color: 0x444444
      bg_grad_dir: VER
      bg_opa: COVER
      border_width: 0
      radius: 0
      pad_all: 0
      border_color: 0x333333
      text_color: 0xFFFFFF
      width: 100%
      height: 40
#-------------------------------------------
  top_layer:
    widgets:
      - label:
          text: "\uF1EB"
          id: lbl_hastatus
          hidden: true
          align: top_right
          x: -10
          y: 90
          text_align: right
          text_color: 0xFFFFFF
      - label:
          text: "\U000F04C3"
          id: radio_status
          hidden: true
          align: top_left
          x: 300
          y: 2
          text_font: top_icons
          text_align: left
          text_color: 0xFFFFFF
      - label:
          text: "\U000F0379"
          id: tv_status
          hidden: true
          align: top_left
          x: 260
          y: 2
          text_font: top_icons
          text_align: left
          text_color: 0xFFFFFF
      - label:
          text: "\U000F10AF"
          id: schuur_status
          hidden: true
          align: top_left
          x: 220
          y: 2
          text_font: top_icons
          text_align: left
          text_color: 0xFFFFFF
      - label:
          text: "\U000F0872"
          id: garage_status
          hidden: true
          align: top_left
          x: 180
          y: 2
          text_font: top_icons
          text_align: left
          text_color: 0xFFFFFF
      - label:
          text: "\U000F081C"
          id: kelder_status
          hidden: true
          align: top_left
          x: 140
          y: 2
          text_font: top_icons
          text_align: left
          text_color: 0xFFFFFF
      - label:
          text: "\U000F058F"
          id: hotwater_status
          hidden: true
          align: top_left
          x: 100
          y: 2
          text_font: top_icons
          text_align: left
          text_color: 0x800000
      - label:
          text: "\U000F0438"
          id: heating_status
          hidden: true
          align: top_left
          x: 60
          y: 2
          text_font: top_icons
          text_align: left
          text_color: 0x800000
      - label:
          id: display_airco_icon
          align: top_left
          x: 40
          y: 2
          text_font: top_airco
          text_align: left
          text_color: 0xFFFFFF
      - label:
          align: RIGHT_MID
          id: display_date
          text: date
          text_font: roboto24
          text_color: 0xFFFFFF
          y: -60
          x: -45
      - label:
          align: RIGHT_MID
          id: display_time
          text: clock
          text_font: roboto90
          text_color: 0xFFFFFF
          y: -120
          x: -30
      - label:
          align: LEFT_MID
          id: display_house_temp
          text: house temp
          text_font: roboto32
          text_color: 0xFFFFFF
          y: 10
          x: 20 
      - label:
          align: LEFT_MID
          id: display_house_hum
          text: house hum
          text_font: roboto32
          text_color: 0xFFFFFF
          y: 52
          x: 20

      - label:
          align: LEFT_MID
          id: display_weather_icon
          text: $happyface
          text_color: 0xFFFFFF
          bg_opa: TRANSP
          text_font: weather_icons
          y: -90
          x: 30
      - label:
          align: CENTER
          id: display_temp
          text: temp
          text_font: roboto32
          text_color: 0xFFFFFF
          y: -140
          x: -80



      - buttonmatrix:
          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: clock_page
              - id: page_next
                text: "\uF054"
                on_press:
                  then:
                    lvgl.page.next:
      - obj:
          id: boot_screen
          x: 0
          y: 0
          width: 100%
          height: 100%
          bg_color: 0x000000
          bg_opa: COVER
          radius: 0
          pad_all: 0
          border_width: 0
          widgets:
            - image:
                align: CENTER
                src: boot_logo
                y: -40
            - spinner:
                align: CENTER
                y: 95
                height: 50
                width: 50
                spin_time: 1s
                arc_length: 60deg
                arc_width: 8
                indicator:
                  arc_color: 0x18bcf2
                  arc_width: 8
          on_press:
            - lvgl.widget.hide: boot_screen

  page_wrap: true
  pages:  
    - id: clock_page
      widgets:

        - image:
            align: CENTER
            src: back7
        - label:
            align: LEFT_MID
            id: display_solar
            text: Solar
            text_font: roboto24
            text_color: 0xFFFFFF
            y: 95
            x: 20
        - label:
            align: LEFT_MID
            id: display_solar2
            text: Solar2
            text_font: roboto24
            text_color: 0xFFFFFF
            y: 130
            x: 20

        - button:
            x: 320
            y: 260
            width: 60
            height: 58
            checkable: true
            widgets:
               - label:
                  text_font: light32
                  id: living_room_light_l1_btn
                  text: "\U000F0335"
                  align: center
            on_click:
              - homeassistant.service:
                  service: switch.toggle
                  data_template:
                    entity_id: switch.zolderverlichting

        - button:
            x: 250
            y: 340
            width: 60
            height: 50
            widgets:
              - label:
                  text_font: roboto24
                  id: cov_up_myroom
                  align: CENTER
                  text:  "\U000F0143"
            on_press:
              then:
                - homeassistant.service:
                    service: cover.open_cover
                    data:
                      entity_id: cover.rolluikzolder_cover_1

        - button:
            x: 320
            y: 340
            width: 60
            height: 50
            widgets:
              - label:
                  id: cov_stop_myroom
                  align: CENTER
                  text: STOP
            on_press:
              then:
                - homeassistant.service:
                    service: cover.stop_cover
                    data:
                      entity_id: cover.rolluikzolder_cover_1

        - button:
            x: 390
            y: 340
            width: 60
            height: 50
            widgets:
              - label:
                  id: cov_down_myroom
                  align: CENTER
                  text: "\U000F0140"
            on_press:
              then:
                - homeassistant.service:
                    service: cover.close_cover
                    data:
                      entity_id: cover.rolluikzolder_cover_1



    - id: hvac_page
      widgets:
        - image:
            align: CENTER
            src: back7
        - obj: # a properly placed coontainer object for all these controls
            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)] # equal
              grid_rows: [FR(50), FR(50)] # like percents
            width: 100%
            height: 90%
            #align: CENTER
            pad_all: 15
            pad_top: 22
            #pad_row: 6
            #pad_column: 2
            bg_opa: TRANSP
            border_opa: TRANSP
            widgets:
              - obj:
                  id: info_btn
                  #checkable: false
                  grid_cell_column_pos: 2 # place the widget in
                  grid_cell_row_pos: 1 # the corresponding cell
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: 0x333333
                  bg_opa: TRANSP
                  border_color: 0x333333
                  border_width: 0
                  text_color: 0xFFFFFF
                  widgets:
                    - button:
                        align: CENTER
                        width: 110
                        height: 35
                        #x: 0
                        y: -60
                        checkable: false
                        widgets:
                          - label:
                              text_font: roboto24
                              text: "+"
                              align: CENTER
                        on_click:
                          - homeassistant.service:
                              service: input_number.increment
                              data: 
                                entity_id: input_number.house_temperature_setpoint
                    
                    - label:
                        text_font: btn_icons_font2
                        text: $house_temp
                        align: CENTER
                        y: -5
                    - label:
                        id: house_setpoint_display
                        text_font: roboto24
                        text: "--- °C"
                        align: CENTER
                        y: 25
                    - button:
                        align: CENTER
                        width: 110
                        height: 35
                        #x: 0
                        y: 60
                        checkable: false
                        widgets:
                          - label:
                              text_font: roboto24
                              text: "-"
                              align: CENTER
                        on_click:
                          - homeassistant.service:
                              service: input_number.decrement
                              data: 
                                entity_id: input_number.house_temperature_setpoint


        - label:
            align: LEFT_MID
            id: display_valve
            text: valve
            text_font: roboto32
            text_color: 0xFFFFFF
            y: 95
            x: 20

2nd part

    - id: airco_page
      widgets:
        - image:
            align: CENTER
            src: back7
        - obj: # a properly placed coontainer object for all these controls
            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)] # equal
              grid_rows: [FR(50), FR(50)] # like percents
            width: 100%
            height: 90%
            #align: CENTER
            pad_all: 15
            pad_top: 22
            #pad_row: 6
            #pad_column: 2
            bg_opa: TRANSP
            border_opa: TRANSP
            widgets:
              - obj:
                  id: info_btn2
                  #checkable: false
                  grid_cell_column_pos: 2 # place the widget in
                  grid_cell_row_pos: 1 # the corresponding cell
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: 0x333333
                  bg_opa: TRANSP
                  border_color: 0x333333
                  border_width: 0
                  text_color: 0xFFFFFF
                  widgets:
                    - button:
                        align: CENTER
                        width: 110
                        height: 35
                        #x: 0
                        y: -60
                        checkable: false
                        widgets:
                          - label:
                              text_font: roboto24
                              text: "+"
                              align: CENTER
                        on_click:
                          - homeassistant.service:
                              service: input_number.increment
                              data: 
                                entity_id: input_number.zolderairco_temperature_setpoint
                    - label:
                        id: aircoicon
                        text_font: roboto40
                        text: $airco
                        align: CENTER
                        y: -5
                    - label:
                        id: airco_setpoint_display
                        text_font: roboto24
                        text: "--- °C"
                        align: CENTER
                        y: 25
                    - button:
                        align: CENTER
                        width: 110
                        height: 35
                        #x: 0
                        y: 60
                        checkable: false
                        widgets:
                          - label:
                              text_font: roboto24
                              text: "-"
                              align: CENTER
                        on_click:
                          - homeassistant.service:
                              service: input_number.decrement
                              data: 
                                entity_id: input_number.zolderairco_temperature_setpoint


              - obj:
                  id: info_btn3
                  #checkable: false
                  grid_cell_column_pos: 1 # place the widget in
                  grid_cell_row_pos: 1 # the corresponding cell
                  grid_cell_x_align: STRETCH
                  grid_cell_y_align: STRETCH
                  bg_color: 0x333333
                  bg_opa: TRANSP
                  border_color: 0x333333
                  border_width: 0
                  text_color: 0xFFFFFF
                  widgets:
                    - button:
                        align: LEFT_MID
                        width: 50
                        height: 35
                        x: 0
                        y: 20
                        checkable: false
                        widgets:
                          - label:
                              id: aircocool
                              text_font: airco24
                              text: $cool
                              align: CENTER
                        on_click:
                          - homeassistant.service:
                              service: climate.set_fan_mode
                              data: 
                                entity_id: climate.aircozolder_mqtt_hvac
                                fan_mode: night
                          - homeassistant.service:
                              service: climate.set_hvac_mode
                              data: 
                                entity_id: climate.aircozolder_mqtt_hvac
                                hvac_mode: cool


                    - button:
                        align: LEFT_MID
                        width: 50
                        height: 35
                        x: 0
                        y: -20
                        checkable: false
                        widgets:
                          - label:
                              id: aircodry
                              text_font: airco24
                              text: $dry
                              align: CENTER
                        on_click:
                          - homeassistant.service:
                              service: climate.set_hvac_mode
                              data: 
                                entity_id: climate.aircozolder_mqtt_hvac
                                hvac_mode: dry


                    - button:
                        align: RIGHT_MID
                        width: 50
                        height: 35
                        #x: 0
                        y: 20
                        checkable: false
                        widgets:
                          - label:
                              id: aircoheat
                              text_font: airco24
                              text: $heat
                              align: CENTER
                        on_click:
                          - homeassistant.service:
                              service: climate.set_hvac_mode
                              data: 
                                entity_id: climate.aircozolder_mqtt_hvac
                                hvac_mode: heat

                    - button:
                        align: RIGHT_MID
                        width: 50
                        height: 35
                        #x: 0
                        y: -20
                        checkable: false
                        widgets:
                          - label:
                              id: aircofan
                              text_font: airco24
                              text: $fan
                              align: CENTER
                        on_click:
                          - homeassistant.service:
                              service: climate.set_hvac_mode
                              data: 
                                entity_id: climate.aircozolder_mqtt_hvac
                                hvac_mode: fan_only


                    - button:
                        align: CENTER
                        width: 110
                        height: 35
                        #x: 0
                        y: 60
                        checkable: false
                        widgets:
                          - label:
                              text_font: airco24
                              text: $powerbutton
                              align: CENTER
                        on_click:
                          - homeassistant.service:
                              service: climate.turn_off
                              data: 
                                entity_id: climate.aircozolder_mqtt_hvac



#--------------------- Sensors -------------------


globals:
  - id: dimmer_level
    type: int
    restore_value: no


sensor:
  - platform: uptime
    name: Uptime



  - platform: homeassistant
    id: house_temp_sensor
    entity_id: sensor.aircozolder_ble_temp
    on_value:
      then:
         - lvgl.label.update:
            id: display_house_temp
            text: 
              format: "$house_temp %.1f°C"
              args: ["id(house_temp_sensor).state"]

  - platform: homeassistant
    id: house_setpoint_ha
    entity_id: input_number.house_temperature_setpoint
    on_value:
      - logger.log: id(house_setpoint_ha).state.c_str()
      - lvgl.label.update:
          id: house_setpoint_display
          text: 
            format: "%.1f °C"
            args: ["id(house_setpoint_ha).state"]

  - platform: homeassistant
    id: airco_setpoint_ha
    entity_id: input_number.zolderairco_temperature_setpoint
    on_value:
      - logger.log: id(airco_setpoint_ha).state.c_str()
      - lvgl.label.update:
          id: airco_setpoint_display
          text: 
            format: "%.1f °C"
            args: ["id(airco_setpoint_ha).state"]


  - platform: homeassistant
    id: house_hum_sensor
    entity_id: sensor.aircozolder_ble_humidity
    on_value:
      then:
         - lvgl.label.update:
            id: display_house_hum
            text: 
              format: "$house_hum %.1f%% "
              args: ["id(house_hum_sensor).state"]


  - platform: homeassistant
    id: house_solar_sensor
    entity_id: sensor.zonvandaag
    on_value:
      then:
         - lvgl.label.update:
            id: display_solar
            text: 
              format: "$house_solar %.3f Kwh"
              args: ["id(house_solar_sensor).state"]

  - platform: homeassistant
    id: house_valve_sensor
    entity_id: sensor.zolder_trv
    on_value:
      then:
        - lvgl.label.update:
            id: display_valve
            text: 
              format: "$house_valve %d%% "
              args: ["int(round(id(house_valve_sensor).state))"]


  - platform: homeassistant
    id: airco_mode_check
    entity_id: climate.aircozolder_mqtt_hvac
    on_value:
      - if:
          condition:
            lambda: |-
              return id(airco_mode_sensor).state == "cool";
          then:
            - lvgl.widget.update:
                id: aircocool
                text_color: 0x0096FF
          else:
            - lvgl.widget.update:
                id: aircocool
                text_opa: 100%
                text_color: 0xFFFFFF
      - if:
          condition:
            lambda: |-
              return id(airco_mode_sensor).state == "heat";
          then:
            - lvgl.widget.update:
                id: aircoheat
                text_color: 0xFF2C2C
          else:
            - lvgl.widget.update:
                id: aircoheat
                text_opa: 100%
                text_color: 0xFFFFFF
      - if:
          condition:
            lambda: |-
              return id(airco_mode_sensor).state == "fan_only";
          then:
            - lvgl.widget.update:
                id: aircofan
                text_color: 0x00FFFF
          else:
            - lvgl.widget.update:
                id: aircofan
                text_opa: 100%
                text_color: 0xFFFFFF
      - if:
          condition:
            lambda: |-
              return id(airco_mode_sensor).state == "dry";
          then:
            - lvgl.widget.update:
                id: aircodry
                text_color: 0xFFCB75
          else:
            - lvgl.widget.update:
                id: aircodry
                text_opa: 100%
                text_color: 0xFFFFFF



  - platform: homeassistant
    id: cover_myroom_pos
    entity_id: cover.rolluikzolder_cover_1
    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%


  - platform: homeassistant
    id: house_solar2_sensor
    entity_id: sensor.solar_sensor
    on_value:
      then:
         - lvgl.label.update:
            id: display_solar2
            text: 
              format: "$house_solar2 %.0f W"
              args: ["id(house_solar2_sensor).state"]



time:
  - platform: homeassistant
    id: ha_date

  - platform: sntp
    id: sntp_time_backoff
    timezone: Europe/Amsterdam
    on_time:
      - seconds: 0
        minutes: 45
        hours: 22
        then:
          - light.turn_off: backlight

  - platform: sntp
    id: sntp_time_backon
    timezone: Europe/Amsterdam
    on_time:
      - seconds: 0
        minutes: 00
        hours: 7
        then:
          - light.turn_on: backlight



text_sensor:
  - platform: homeassistant
    id: ha_time
    entity_id: sensor.time
    on_value:
      then:
        - lvgl.label.update:
            id: display_time
            text: !lambda return id(ha_time).state.c_str();

  - platform: homeassistant
    id: cover_myroom_state
    entity_id: cover.rolluikzolder_cover_1
    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()' ]


  - platform: homeassistant
    id: airco_mode_sensor
    entity_id: climate.aircozolder_mqtt_hvac
    name: "Airco Mode"


  - platform: template 
    id: display_date_sensor
    name: ha2esp_date
    update_interval: 10s
    lambda: |-
      static const char* dagen[] = {"Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"};
      auto now = id(ha_date).now();
      std::string dag_van_week = dagen[now.strftime("%w").c_str()[0] - '0'];
      char buffer[20];
      sprintf(buffer, "%s, %02d.%02d", dag_van_week.c_str(), now.day_of_month, now.month);
      return std::string(buffer);
    on_value:
      then:
        - lambda: |-
            lv_label_set_text(id(display_date), x.c_str());


  - platform: homeassistant
    id: ha_airco_cond
    entity_id: climate.aircozolder_mqtt_hvac
    on_value:
      then:
        - text_sensor.template.publish:
            id: zolder_airco_icon
            state: !lambda return id(ha_airco_cond).state.c_str();


  - platform: template
    id: zolder_airco_icon
    lambda: |-
      std::string state = id(ha_airco_cond).state.c_str();
      if (state == "cool") { return std::string("$cool"); }
      else if (state == "heat") { return std::string("$heat"); }
      else if (state == "dry") { return std::string("$dry"); }
      else if (state == "fan") { return std::string("$fan"); }
      return std::string("$happyface");
    on_value:
      then:
        - logger.log: id(zolder_airco_icon).state.c_str()
        - lvgl.label.update:
            id: display_airco_icon
            text: !lambda return id(zolder_airco_icon).state.c_str();

  
  - platform: homeassistant
    id: ha_weather_cond
    entity_id: weather.weerstation
    filters:
      - to_upper
    on_value:
      then:
#        - lvgl.label.update:
#            id: display_weather
#            text: !lambda return id(ha_weather_cond).state.c_str();
        - text_sensor.template.publish:
            id: weather_condition_icon
            state: !lambda return id(ha_weather_cond).state.c_str();

  - platform: template
    id: weather_condition_icon
    lambda: |-
      std::string state = id(ha_weather_cond).state.c_str();
      if (state == "RAINY") { return std::string("$rainy"); }
      else if (state == "CLOUDY") { return std::string("$cloudy"); }
      else if (state == "PARTLYCLOUDY") { return std::string("$partlycloudy"); }
      else if (state == "SUNNY") { return std::string("$sunny"); }
      else if (state == "FOG") { return std::string("$fog"); }
      else if (state == "HAIL") { return std::string("$hail"); }
      else if (state == "HAZY") { return std::string("$hazy"); }
      else if (state == "LIGHTNING") { return std::string("$lightning"); }
      else if (state == "LIGHTNINGRAINY") { return std::string("$lightningrainy"); }
      else if (state == "NIGHT") { return std::string("$night"); }
      else if (state == "NIGHTPARTLYCLOUDY") { return std::string("$nightpartlycloudy"); }
      else if (state == "PARTLYRAINY") { return std::string("$partlyrainy"); }
      else if (state == "PARTLYLIGHTNING") { return std::string("$partlylightning"); }
      else if (state == "PARTLYSNOWY") { return std::string("$partlysnowy"); }
      else if (state == "PARTLYSNOWYRAINY") { return std::string("$partlysnowyrainy"); }
      else if (state == "POURING") { return std::string("$pouring"); }
      else if (state == "SNOWY") { return std::string("$snowy"); }
      else if (state == "SNOWYHEAVY") { return std::string("$snowyheavy"); }
      else if (state == "SUNSET") { return std::string("$sunset"); }
      else if (state == "TORNADO") { return std::string("$tornado"); }
      else if (state == "WINDY") { return std::string("$windy"); }
      else if (state == "HURRICANE") { return std::string("$hurricane"); }
      return std::string("$happyface");
    on_value:
      then:
        - logger.log: id(weather_condition_icon).state.c_str()
        - lvgl.label.update:
            id: display_weather_icon
            text: !lambda return id(weather_condition_icon).state.c_str();
  
  - platform: homeassistant
    id: ha_weather_temp
    entity_id: weather.weerstation
    attribute: temperature
    on_value:
      then:
        - lvgl.label.update:
            id: display_temp
            text: 
              format: "%s°C"
              args: ["id(ha_weather_temp).state.c_str()"]
 
binary_sensor:
  - platform: homeassistant
    id: living_room_light_l1
    entity_id: switch.zolderverlichting
    publish_initial_state: true
    on_state:
      then:
        - lvgl.widget.update:
            id: living_room_light_l1_btn
            state:
              checked: !lambda "return x;"

  - platform: homeassistant
    id: radio_status_sensor
    entity_id: binary_sensor.radio_on
    publish_initial_state: true
    on_state:
      then:
        - if:
            condition:
               lambda: 'return id(radio_status_sensor).state == true;'
            then:
               - lvgl.widget.show: radio_status
            else:
               - lvgl.widget.hide: radio_status

  - platform: homeassistant
    id: tv_status_sensor
    entity_id: binary_sensor.tv_on
    publish_initial_state: true
    on_state:
      then:
        - if:
            condition:
               lambda: 'return id(tv_status_sensor).state == true;'
            then:
               - lvgl.widget.show: tv_status
            else:
               - lvgl.widget.hide: tv_status
  - platform: homeassistant
    id: schuur_status_sensor
    entity_id: binary_sensor.schuurdeur2
    publish_initial_state: true
    on_state:
      then:
        - if:
            condition:
               lambda: 'return id(schuur_status_sensor).state == true;'
            then:
               - lvgl.widget.show: schuur_status
            else:
               - lvgl.widget.hide: schuur_status

  - platform: homeassistant
    id: garage_status_sensor
    entity_id: binary_sensor.garage2
    publish_initial_state: true
    on_state:
      then:
        - if:
            condition:
               lambda: 'return id(garage_status_sensor).state == false;'
            then:
               - lvgl.widget.show: garage_status
            else:
               - lvgl.widget.hide: garage_status

  - platform: homeassistant
    id: kelder_status_sensor
    entity_id: switch.kelderlamp
    publish_initial_state: true
    on_state:
      then:
        - if:
            condition:
               lambda: 'return id(kelder_status_sensor).state == true;'
            then:
               - lvgl.widget.show: kelder_status
            else:
               - lvgl.widget.hide: kelder_status

  - platform: homeassistant
    id: hotwater_status_sensor
    entity_id: binary_sensor.boiler_tapwater_active
    publish_initial_state: true
    on_state:
      then:
        - if:
            condition:
               lambda: 'return id(hotwater_status_sensor).state == true;'
            then:
               - lvgl.widget.show: hotwater_status
            else:
               - lvgl.widget.hide: hotwater_status

  - platform: homeassistant
    id: heating_status_sensor
    entity_id: binary_sensor.boiler_heating_active
    publish_initial_state: true
    on_state:
      then:
        - if:
            condition:
               lambda: 'return id(heating_status_sensor).state == true;'
            then:
               - lvgl.widget.show: heating_status
            else:
               - lvgl.widget.hide: heating_status

3rd part


#-------------------------------------------
# Internal outputs
#-------------------------------------------
output:   
  # Backlight LED
  - platform: ledc
    pin: GPIO38
    id: GPIO38
    frequency: 100Hz

  # Built in 240v relay
  - platform: gpio
    pin: 40
    id: panel_output
#-------------------------------------------
# LIGHTS
#-------------------------------------------
light:
  - platform: monochromatic
    output: GPIO38
    name: Backlight
    id: backlight
    restore_mode: ALWAYS_ON
  
  - platform: binary
    name: "Panel Switch"
    id: panel_switch
    output: panel_output
    
#-------------------------------------------
# Graphicsd and Fonts
#-------------------------------------------
image:
  #- file: 'images/back1.png'
  #  id: back1
  #  type: RGB565
  
  - file: 'images/back2.png'
    id: back2
    type: RGB565
  
  #- file: 'images/back3.png'
  #  id: back3
  #  type: RGB565
  
  #- file: 'images/back4.png'
  #  id: back4
  #  type: RGB565
  
  #- file: 'images/back5.png'
  #  id: back5
  #  type: RGB565
  
  - file: 'images/back6.png'
    id: back6
    type: RGB565
  
  - file: 'images/back7.png'
    id: back7
    type: RGB565
  
  - file: 'images/ha_logo2.png'
    id: boot_logo
    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",
          "\U000F04C3",
          "\U000F0143", # mdi-arrow_up
          "\U000F0140", # mdi-arrow_down
          "\U000F050F", # Thermometer
          $house_solar,
          $house_solar2,
          $house_valve,
	  $house_hum,
          $house_temp 
          ]

  - file: "gfonts://Roboto"
    id: roboto32
    size: 32
    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",
          "\U000F04C3",
          "\U000F0143", # mdi-arrow_up
          "\U000F0140", # mdi-arrow_down
          "\U000F050F", # Thermometer
          $house_solar,
          $house_valve,
          $house_solar2,
          $house_hum,
          $house_temp 
          ]



  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: top_icons
    size: 32
    bpp: 4
    glyphs: [
      "\U000F04C3",
      "\U000F0379",
      "\U000F10AF",
      "\U000F081C",
      "\U000F058F",
      "\U000F0438",
      "\U000F0872",
      "\U000F0717",
      "\U000F0510",
      "\U000F058E",
      "\U000F0210"
    ]

  - file: "gfonts://Roboto"
    id: top_airco
    size: 32
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          $cool,
          $heat,
          $dry,
          $fan,
          $happyface,
          $airco
        ]

  - file: "gfonts://Roboto"
    id: airco24
    size: 24
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          $cool,
          $heat,
          $dry,
          $fan,
          $happyface,
          $airco,
          $powerbutton
        ]


  - file: "gfonts://Roboto"
    id: weather_icons
    size: 110
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          $cloudy,
          $cloudyalert,
          $cloudyarrowright,
          $fog,
          $hail,
          $hazy,
          $hurricane,
          $lightning,
          $lightningrainy,
          $night,
          $nightpartlycloudy,
          $partlycloudy,
          $partlylightning,
          $partlyrainy,
          $partlysnowy,
          $partlysnowyrainy,
          $pouring,
          $rainy,
          $snowy,
          $snowyheavy,
          $snowyrainy,
          $sunny,
          $sunnyalert,
          $sunnyoff,
          $sunset,
          $sunsetdown,
          $sunsetup,
          $tornado,
          $windy,
          $windyvariant,
          $happyface
        ]

  - 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: roboto40
    size: 40
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          $lightbulb,
          $house_temp,
          $airco
        ]
  
  - file: "gfonts://Roboto"
    id: btn_icons_font
    size: 70
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          $lightbulb,
          $boiler_on,
          $boiler_off,
          $radiator,
          $ceiling_light,
          $house_temp
        ]
    
  - file: "gfonts://Roboto"
    id: btn_icons_font2
    size: 50
    bpp: 4
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          $lightbulb,
          $house_temp,
          $airco
        ]

  - file: "gfonts://Roboto"
    id: roboto90
    size: 80
    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
              );
    - script.stop: screen_light
    - script.execute: screen_light

script:
  - id: screen_light
    mode: restart
    then:
      - lvgl.resume:
      - light.turn_on:
          id: backlight
          brightness: 100%          
          transition_length: 1s
      - delay: 30s
      - light.turn_on:
            id: backlight
            brightness: 75%
            transition_length: 2s
      - delay: 15min
      - light.turn_on:
            id: backlight
            brightness: 75%
            transition_length: 5s

#-------------------------------------------
# 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: false
    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

I think you need to set pad_column to 0 somewhere. With the original code there was no gap between the buttons.

I didn’t understand, which icon and text are you referring to?

I know but I got errors when I went to the lvgl implementation in esphome on style_definitions. (I posted 9 days ago) but couldn’t solve it.

I got first this cloudy text before I get the icon, on booting, but also in condition change

I moved the automation directly to the home assistant sensor, excluding the sensor template, but I’m using text instead of icons.

if you want to test to see if it works:

text_sensor:
  - platform: homeassistant
    id: ha_weather_cond
    entity_id: weather.casa
    filters:
      - to_lower
      - substitute:
        - "- -> _"
    on_value:
      - lvgl.label.update:
          id: display_weather
          text: !lambda |-
              std::string state = id(ha_weather_cond).state.c_str(); {
                  if (state == "clear_night") return "Noite Clara";
                  else if (state == "cloudy") return "Nublado";
                  else if (state == "fog") return "Neblina";
                  else if (state == "hail") return "Granizo";
                  else if (state == "lightning") return "Relâmpagos";
                  else if (state == "lightning_rainy") return "Tempestade com Relâmpagos";
                  else if (state == "partlycloudy") return "Parcialmente Nublado";
                  else if (state == "pouring") return "Chuva forte";
                  else if (state == "rainy") return "Chuva";
                  else if (state == "snowy") return "Nevando";
                  else if (state == "snowy_rainy") return "Neve com Chuva";
                  else if (state == "sunny") return "Ensolarado";
                  else if (state == "windy") return "Ventania";
                  else if (state == "windy_variant") return "Variante Ventosa";
                  else if (state == "exceptional") return "Excepcional";
                  //else if (state == "hazy") return "Embaçado";
                  //else if (state == "nightpartlycloudy") return "Noite Parcialmente Nublada";
                  //else if (state == "partlyrainy") return "Parcialmente Chuvoso";
                  //else if (state == "partlylightning") return "Parcialmente com Relâmpagos";
                  //else if (state == "partlysnowy") return "Parcialmente Nevado";
                  //else if (state == "partlysnowyrainy") return "Parcialmente Nevado com Chuva";
                  //else if (state == "snowyheavy") return "Neve Intensa";
                  //else if (state == "sunset") return "PĂ´r do Sol";
                  //else if (state == "tornado") return "Tornado";
                  //else if (state == "hurricane") return "FuracĂŁo";
                  
                  return state;
              }


Sort of a bit OT, but has anyone come across a rectangular version (portrait) of this screen WITH relays?

I want to install on a distribution box but need a larger screen size with the corresponding escutcheon/surround, (no DIY) needs to look good and don’t want to have to make a separate relay board to accompany the screen.