Has anyone got ESPHome working with this (Guition ESP32-S3 480*272) display?

ESPHome
1

This is the display I’m trying to get ESPHome onto.

So far, I’ve used this yaml. I wasn’t able to use the ESP Flasher tool. However, I was able to download the binary and flash it using Adafruit ESPTool.

esphome:
  name: experiment-thermostat
  friendly_name: Experiment thermostat

esp32:
  board: esp32-s3-devkitc-1
  variant: ESP32S3
  flash_size: 4MB

psram:
  mode: octal
  speed: 80MHz

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "..."

ota:
  - platform: esphome
    password: "..."

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

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Experiment-Thermostat"
    password: "..."

captive_portal:

web_server:

It does connect to wifi and the web server is working.

The next step is to try getting the display and touch working. From a review on the listing, I can see that the lcd controller is NV3041A and touch controller is GT911.

I see that people have gotten ESPHome working with GUITION 4” 480x480. I don’t see any mention of this device.

2

Why are you using third party flashing tools?

But more fundamentally I can’t find any support for the display chip in the esphome docs.

Does this help at all?

https://www.reddit.com/r/esp32/comments/1cnhrhc/i_cant_make_the_esp_screen_show_anything_it/?rdt=51202

3

This is the first device I’ve had trouble with the ESPHome flash tool.

It gave an error about it not being an ESP 32.

I saw the Reddit post before posting this. I didn’t see anything that I was able to translate to ESPHome.

4

Unless you can find someone who has incorporated the driver for that graphics chip to esphome, you’ll have to port it yourself.

5

I have seemingly managed to get working with the below config, hope it helps.

spi:
  id: quad_spi
  type: quad
  clk_pin: 47
  data_pins: [21,48,40,39]

power_supply:
  id: backlight_id
  pin: 1
  enable_on_boot: true

display:
  - platform: qspi_dbi
    model: CUSTOM
    data_rate: 20MHz
    dimensions:
      width: 480
      height: 272
    cs_pin: 
      number: 45
      ignore_strapping_warning: true
    invert_colors: true
    rotation: 180
    brightness: 50
    update_interval: never
    auto_clear_enabled: false
    init_sequence: 
      - [0xff,0xa5]
      - [0x36,0xc0]
      - [0x3A,0x01]
      - [0x41,0x03]
      - [0x44,0x15]
      - [0x45,0x15]
      - [0x7d,0x03]
      - [0xc1,0xbb]
      - [0xc2,0x05]
      - [0xc3,0x10]
      - [0xc6,0x3e]
      - [0xc7,0x25]
      - [0xc8,0x11]
      - [0x7a,0x5f]
      - [0x6f,0x44]
      - [0x78,0x70]
      - [0xc9,0x00]
      - [0x67,0x21]
      - [0x51,0x0a]
      - [0x52,0x76]
      - [0x53,0x0a]
      - [0x54,0x76]
      - [0x46,0x0a]
      - [0x47,0x2a]
      - [0x48,0x0a]
      - [0x49,0x1a]
      - [0x56,0x43]
      - [0x57,0x42]
      - [0x58,0x3c]
      - [0x59,0x64]
      - [0x5a,0x41]
      - [0x5b,0x3c]
      - [0x5c,0x02]
      - [0x5d,0x3c]
      - [0x5e,0x1f]
      - [0x60,0x80]
      - [0x61,0x3f]
      - [0x62,0x21]
      - [0x63,0x07]
      - [0x64,0xe0]
      - [0x65,0x02]
      - [0xca,0x20]
      - [0xcb,0x52]
      - [0xcc,0x10]
      - [0xcd,0x42]
      - [0xd0,0x20]
      - [0xd1,0x52]
      - [0xd2,0x10]
      - [0xd3,0x42]
      - [0xd4,0x0a]
      - [0xd5,0x32]
      - [0x80,0x00]
      - [0xa0,0x00]
      - [0x81,0x07]
      - [0xa1,0x06]
      - [0x82,0x02]
      - [0xa2,0x01]
      - [0x86,0x11]
      - [0xa6,0x10]
      - [0x87,0x27]
      - [0xa7,0x27]
      - [0x83,0x37]
      - [0xa3,0x37]
      - [0x84,0x35]
      - [0xa4,0x35]
      - [0x85,0x3f]
      - [0xa5,0x3f]
      - [0x88,0x0b]
      - [0xa8,0x0b]
      - [0x89,0x14]
      - [0xa9,0x14]
      - [0x8a,0x1a]
      - [0xaa,0x1a]
      - [0x8b,0x0a]
      - [0xab,0x0a]
      - [0x8c,0x14]
      - [0xac,0x08]
      - [0x8d,0x17]
      - [0xad,0x07]
      - [0x8e,0x16]
      - [0xae,0x06]
      - [0x8f,0x1B]
      - [0xaf,0x07]
      - [0x90,0x04]
      - [0xb0,0x04]
      - [0x91,0x0a]
      - [0xb1,0x0a]
      - [0x92,0x16]
      - [0xb2,0x15]
      - [0xff,0x00]
      - [0x11,0x00]
      - [0x29,0x00]

i2c:
  sda: 8
  scl: 4

touchscreen:
  - platform: gt911
    id: main_touchscreen
    interrupt_pin: 3
    reset_pin: 38
3 Likes
6

Nice work. There seems to be a million types of these little Chinese screens out there. And a lot of people getting them all working with ESPHome!

Make sure you reference the screen by it’s label on the back that way others can help you more easily. This seems to be a “Guition JC4827W543R” if you reference it that way more people will be able to help you and people searching for how to get their screen working can find this post.

Let me know if you get this screen working and I’ll add it to my esphome modular lvgl buttons system.

esphome-modular-lvgl-buttons

1 Like
8

Hey!

I’m able to display a static picture, however if I create something with a refresh interval I only get scrambled pixels. Were you able to update the content on your screen?

I can confirm that it works well with LVGL - however the builtin display engine does not work when refreshing

1 Like
9

Hi, @jaecktec , Could you share the esphome yaml you used to configure this screen to work with LVGL?

It would be a great help.

10

I added supported for it to my LVGL button library.

1 Like
11

Basically what @ChrisM90 posted plus this:

# LVGL
packages:
  lvgl: !include clock-package.yaml

lvgl:
  buffer_size: 0.5
  log_level: INFO

and clock-package.yaml:


# time:
#   - platform: sntp
#     id: time_comp
#     on_time_sync:
#       then:
#         - script.execute: time_update


script:
  - id: time_update
    then:
      - lvgl.indicator.update:
          id: minute_hand
          value: !lambda |-
            return id(time_comp).now().minute;
      - lvgl.indicator.update:
          id: hour_hand
          value: !lambda |-
            auto now = id(time_comp).now();
            return std::fmod(now.hour, 12) * 60 + now.minute;
      - lvgl.label.update:
          id: date_label
          text:
            format: "%s %2d"
            args:
              - '(new const char *[12]{"JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"})[id(time_comp).now().month-1]'
              - 'id(time_comp).now().day_of_month'
      - lvgl.label.update:
          id: day_label
          text:
            format: "%s"
            args:
              - '(new const char *[7]{"SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"})[id(time_comp).now().day_of_week-1]'

    
font:
  - file: "gfonts://Roboto"
    id: roboto10
    size: 10
    bpp: 4

interval:
  - interval: 1min
    then:
      - script.execute: time_update

lvgl:
  style_definitions:
    - id: date_style
      text_font: roboto10
      align: center
      text_color: 0x000000
      bg_opa: cover
      radius: 4
      pad_all: 2
  widgets:
    - obj: # Clock container
        height: 170
        width: 170
        align: center
        pad_all: 4
        widgets:
          - meter: # Gradient color  arc
              height: 100%
              width: 100%
              align: center
              bg_color: 0
              scales:
                angle_range: 360
                rotation: 255
                range_from: 0
                range_to: 12
                ticks:
                  width: 35
                  count: 13
                  length: 8
                indicators:
                  - tick_style:
                      local: true
                      start_value: 0
                      end_value: 12
                      color_start: 0xFF0000
                      color_end: 0x0000FF
          - meter:
              height: 100%
              width: 100%
              align: center
                    
              bg_opa: TRANSP
              text_color: 0xFFFFFF
              scales:
                - ticks:
                    width: 1
                    count: 61
                    length: 10
                    color: 0xFFFFFF
                  range_from: 0
                  range_to: 60
                  angle_range: 360
                  rotation: 270
                  indicators:
                    - line:
                        id: minute_hand
                        width: 3
                        color: 0xE0E0E0
                        r_mod: -1

                - angle_range: 330
                  rotation: 300
                  range_from: 1
                  range_to: 12
                  ticks:
                    width: 1
                    count: 12
                    length: 1
                    major:
                      stride: 1
                      width: 4
                      length: 8
                      color: 0xC0C0C0
                      label_gap: 6

                - angle_range: 360
                  rotation: 270
                  range_from: 0
                  range_to: 720
                  indicators:
                    - line:
                        id: hour_hand
                        width: 4
                        color: 0xA0A0A0
                        r_mod: -20
          - label:
              styles: date_style
              id: day_label
              y: -20
          - label:
              id: date_label
              styles: date_style
              y: +20