Implementing esp32 7" Display ESP32-8048S070 - need Help

Hello everyone,
i found a blog where a 7" TFT powered by a esp32 was implemented into Home Assistant to show … HA stuff. :smiley:
I thought that it is a good idea to use this big screen and improve my smart mirror with it. (LINK to he current one)
My first idea is to use espHome to and just reuse my code but unfortunatly I have no idea how to properly get it running in espHome.
The Hardware:

  • esp32-s3
  • Display chip: EK9716
  • The whole system in alibaba: LINK (There is also a link to arduino.io libraries and schematics etc.)

The code (14.05.2023 doesnt work for now):

esphome:
  name: "smart-mirror"
  friendly_name: "smart-mirror"
  on_boot:
    priority: 199
    then:
      - light.turn_on: back_light
  project:
    name: "jb.Smartmirrorwithesp32"
    version: "0.4.0"

esp32: # ESP32-8048S070 https://de.aliexpress.com/item/1005004952726089.html?gatewayAdapt=glo2deu
  board: esp32-s3-devkitc-1
  variant: esp32s3
  framework:
    type: arduino
#    version: 2.0.3
#    platform_version: 5.1.0


# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "in0iuxh/XBtTQyelbPpWkdpnr84/SYej4zwX3v/W1BQ="

ota:
  password: "719381c892a947b3b52da0fa6a86ee90"

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

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Test4 Fallback Hotspot"
    password: "C9E4rTG4PLSW"


time:
  - platform: homeassistant
    id: homeassistant_time
    on_time:
      # Every 5 minutes triggering screensaver to prevent burn in
      - seconds: 0
        minutes: '10'
        then:
          - display.page.show: screensaver1
          - delay: 5s
          - display.page.show: screensaver2
          - delay: 5s
          - display.page.show: mainpage


spi: #intializing Display
  clk_pin: 18 # (Pin on display - SCK/T_CLK)
  mosi_pin: 20 # (Pin on display - SDI(MOSI)/T_DIN) SPID = MOSI = data out
  miso_pin: 19 # (Pin on display - SDO(MISO)/T_DO)  SPIQ = MISO = data in

display:
  - platform: ili9xxx #intializing Display
    model: ili9341 #Resolution 320x240
    rotation: 270
    cs_pin: 16 # (Pin on display - CS)
    dc_pin: 15 # (Pin on display - DC)
    reset_pin: 17 # (Pin on display - RESET)
    pages:
      - id: mainpage
        lambda: |-
          //layout
          //top line
          it.filled_circle(25, 25, 25, yellow);
          it.filled_rectangle(27, 0, 185, 23, yellow);
          it.filled_circle(308, 11, 11, yellow);
          it.filled_rectangle(296, 0, 9, 23, yellow);
          //vertikal line I
          it.filled_rectangle(0, 29, 50, 22, yellow);
          it.line(51, 23, 51, 27, yellow);
          it.line(52, 23, 52, 25, yellow);
          it.draw_pixel_at(53, 24, yellow);
          it.line(53, 23, 56, 23, yellow);
          it.filled_rectangle(0, 54, 50, 48, blue);
          //mid line I
          it.filled_rectangle(0, 105, 50, 30, rosa);
          it.filled_circle(7, 136, 7, rosa);
          it.filled_rectangle(9, 131, 177, 13, rosa);
          it.filled_rectangle(186, 131, 112, 6, rosa);
          it.filled_rectangle(298, 131, 12, 13, rosa);
          it.filled_circle(312, 137, 6, rosa);
          it.line(50, 130, 50, 124, rosa);
          it.line(51, 130, 51, 127, rosa);
          it.line(52, 130, 52, 128, rosa);
          it.draw_pixel_at(53, 129, rosa);
          it.line(53, 130, 56, 130, rosa);
          //mid line II
          it.filled_rectangle(0, 158, 50, 28, grey);
          it.filled_circle(7, 156, 7, grey);
          it.filled_rectangle(9, 149, 177, 13, grey);
          it.filled_rectangle(186, 157, 112, 5, grey);
          it.filled_rectangle(298, 149, 12, 13, grey);
          it.filled_circle(312, 155, 6, grey);
          it.line(50, 162, 50, 168, grey);
          it.line(51, 162, 51, 166, grey);
          it.line(52, 162, 52, 164, grey);
          it.draw_pixel_at(53, 163, grey);
          it.line(53, 162, 56, 162, grey);
          //buttom line
          it.filled_rectangle(0, 189, 50, 21, yellow);
          it.filled_circle(25, 214, 25, yellow);
          it.filled_rectangle(30, 217, 275, 23, yellow);
          it.filled_circle(308, 228, 11, yellow);
          it.line(51, 216, 51, 212, yellow);
          it.line(52, 216, 52, 214, yellow);
          it.draw_pixel_at(53, 215, yellow);
          it.line(53, 216, 56, 216, yellow);
      
          //Data
          it.print(217, 0, id(OkudaBold), red, "Guten Tag!");
          it.print(7, 85, id(Okuda15), "Weather");
          it.printf(65, 25, id(Okuda), "Temp. Balkon: %.1f °C", id(temp_balkon).state);
          it.printf(65, 50, id(Okuda), "Temp. Wohnzimmer: %.1f °C", id(temp_wohnzimmer).state);
          it.printf(65, 75, id(Okuda), "Wetter heute: %s", id(wetter).state.c_str());
          it.printf(65, 100, id(Okuda), "%s in den nachsten 30min.", id(regen30min).state.c_str());
      
          it.strftime(193, 133, id(OkudaBold), yellow2, "%H:%M %d.%m.%y", id(homeassistant_time).now());
          it.printf(65, 161, id(Okuda), "Alles Licht aus: %s", id(lightcheck).state.c_str());
          it.printf(65, 186, id(Okuda), "Gelber Sack ist %s", id(nachster_abfall).state.c_str());
          it.print(11, 188, id(Okuda15), "Status");
      - id: screensaver1
        lambda: |-
            it.filled_rectangle(0, 0, 320, 240);
            it.print(120, 100, id(OkudaBold), black, "SCREENSAVER");
      - id: screensaver2
        lambda: |-
            it.filled_rectangle(0, 0, 320, 240, black);
            it.print(120, 100, id(OkudaBold), "SCREENSAVER");
      - id: screenqrcodeHA #QR code fo allowing guests to connect easy to our HA
        lambda: |-
            it.qr_code(40, 0, id(qrcodeHA),  Color(255,255,255), 11);
font: 
  - file: "Okuda.ttf" #normal
    id: Okuda
    size: 25
  - file: "OkudaBold.ttf" #fett
    id: OkudaBold
    size: 25
  - file: "Okuda.ttf" #normal
    id: Okuda15
    size: 15

color:
  - id: red
    red: 100%
    green: 0%
    blue: 0%
  - id: rosa
    red_int: 204
    green_int: 154
    blue_int: 204
    white_int: 0
  - id: blue
    red_int: 150
    green_int: 160
    blue_int: 255
    white_int: 0
  - id: grey
    red_int: 180
    green_int: 178
    blue_int: 180
    white_int: 0
  - id: yellow
    red_int: 212
    green_int: 164
    blue_int: 114
    white_int: 0
  - id: yellow2
    red_int: 240
    green_int: 196
    blue_int: 19
    white_int: 0
  - id: black
    red: 0%
    green: 0%
    blue: 0%

# Define a PWM output on the ESP32
output:
  - platform: ledc
    pin: 2
    id: gpio_2_backlight_pwm

# Define a monochromatic, dimmable light for the backlight. Such light is later controllable via HA dashboard
light:
  - platform: monochromatic
    output: gpio_2_backlight_pwm
    name: "Display Backlight"
    id: back_light

sensor:
  - platform: homeassistant
    id: temp_balkon
    entity_id: sensor.temperature_5

  - platform: homeassistant
    id: temp_wohnzimmer
    entity_id: sensor.temperature_2

binary_sensor:
  - platform: gpio  #Pin for PIR Sensor
    id: GPIO26
    pin: 17
    name: "Motion Sensor"
    device_class: motion
    filters:
    - delayed_off: 30s
    on_state:
      if:
        condition: #conditions when motion Sensor is activated to switch LCD backlight on
          binary_sensor.is_on: GPIO26
        then:
          - light.turn_on: back_light
#          - delay: 60s
#          - light.turn_off: back_light
        else:
          light.turn_off: back_light
          
  - platform: homeassistant 
    name: "ShowQR"
    entity_id: input_boolean.showqr
    id: showqrscreen
    on_state:
      if:
        condition: #allows to show a QR code with URL to HA system
          binary_sensor.is_on: showqrscreen
        then:
          - display.page.show: screenqrcodeHA
        else:
          - display.page.show: mainpage

text_sensor:
  - platform: homeassistant
    id: wetter
    entity_id: weather.home
    filters:
    - substitute:
      - "sunny -> sonnig"
      - "partlycloudy -> teilweise wolkig"
      - "rainy -> Regen"
      - "windy -> windig"
      - "snowy -> Schnee"
      - "lightning -> Gewitter"
      - "cloudy -> wolkig"

  - platform: homeassistant
    id: lightcheck
    entity_id: light.alle_lichter
    filters:
    - substitute:
      - "on -> nein"
      - "off -> ja"

  - platform: homeassistant #https://www.youtube.com/watch?v=SoBjbW4zjWs
    id: nachster_abfall
    entity_id: sensor.mullabfuhr_wann
    filters:
    - substitute:                #Substitute done in this way because otherwiese the single digits e.g. 1 
      - "14 -> in zwei Wochen"   #would be used in all 6 strings where the number one occurs
      - "13 -> in zwei Wochen"
      - "12 -> in zwei Wochen"
      - "11 -> in zwei Wochen"
      - "10 -> naechste Woche"
      - "9 -> naechste Woche"
      - "8 -> naechste Woche"
      - "7 -> naechste Woche"
      - "6 -> in sechs Tagen"
      - "5 -> in funf Tagen"
      - "4 -> in vier Tagen"
      - "3 -> in drei Tagen"
      - "2 -> ubermorgen"
      - "1 -> morgen"
      - "0 -> heute"
      
  - platform: homeassistant #https://www.ajfriesen.com/rain-warning-sensor-with-home-assistant/
    id: regen30min
    entity_id: sensor.rrrainin30min
    filters:
    - substitute:
      - "1 -> Es regnet"
      - "0 -> Kein Regen"

qr_code:
  - id: qrcodeHA
    value: XXXXXXXXXX

deep_sleep:
  run_duration: 5min
  wakeup_pin: 19

The display relevant parts:

spi: #intializing Display
  clk_pin: 18 # (Pin on display - SCK/T_CLK)
  mosi_pin: 20 # (Pin on display - SDI(MOSI)/T_DIN) SPID = MOSI = data out
  miso_pin: 19 # (Pin on display - SDO(MISO)/T_DO)  SPIQ = MISO = data in

display:
  - platform: ili9xxx #intializing Display
    model: ili9341 #Resolution 320x240
    rotation: 270
    cs_pin: 16 # (Pin on display - CS)
    dc_pin: 15 # (Pin on display - DC)
    reset_pin: 17 # (Pin on display - RESET)

output:
  - platform: ledc
    pin: 2
    id: gpio_2_backlight_pwm

# Define a monochromatic, dimmable light for the backlight. Such light is later controllable via HA dashboard
light:
  - platform: monochromatic
    output: gpio_2_backlight_pwm
    name: "Display Backlight"
    id: back_light

My first issue is the:

display:
  - platform:
    model:

Sadly i couldnt find any espHome support for the display chip EK9716. Maybe iam blind or there is really nothing.
I tried just du reuse the ili model because it was somewhere mentioned in the arduino libraries from the manufacturer.
The Backlight is working proberly but there is nothing displayed. I dont know if it is a platform/model issue or i dont use the correct pins.

Here is a schematic of the layout:


Note: Top left is the esp32 layout, top right is the display connection layout.

Has here somone an idea how to figure out if i use the correct pins or use the correct display componend?
Or maybe it is all not supported by espHome and i have to find a espHome independet solution.

A big thanks in advance if somone could help me! :slight_smile:

Unfortunately you won’t get that going with ESPHome, not only because of no driver support, but also because of memory limitations.

ESPHome is quite memory hungry. To get an ILI9488 running an 480x320 resolution, you need to use an ESP32 with a fair amount of PSRAM. Your display has a resolution of 800x480 - many times that of the ILI9488.

That doesn’t mean you can’t integrate with ESPHome. Just write some C++ code and use MQTT to communicate with HA, just as the person in the blog you linked has done.

1 Like

These work with openhasp and it has great home assistant integration.

https://openhasp.haswitchplate.com/0.7.0/hardware/sunton/esp32-8048s0xx/

2 Likes

Ah yes - good thinking. I used it with a couple of my ILI9488s before ESPHome supported them.

1 Like

Thank you for your answers.
Not the answers that i wanted to hear :smiley: but they help me to continue with a solution.

Regarding the ili9488: Is there a good system combined with an esp32 that you would recommend?
Iam looking for a big as possible display that is usable with an esp32 and easy to implement into my HA environment.

You have such a system. It just requires you to use openhasp rather than esphome.

Thanks for the confidence. The next days iam going to dive into openhasp :slight_smile:

1 Like

But OpenHASP supports only one font. Is there any way to use several font with OpenHASP?

Best Regards…

Nonsense. Fonts - openHASP

I am using Arial Bold on one at present.

openHASP does not work with this screen. They have a build for the Sunton ESP32-8048S070C this seems to be a slightly different screen then the Sunton ESP32-8048S070 ESP32-S3 even though the part number is only different by one letter “C”.

The people over at Tasmota seem to have the ESP32-8048S070 working and they have detailed info on how they got it working. I don’t know enough about codding to translate their code to ESPHome.

Can somebody do this translation?

This works!

Hi,
thank you for the late answer. I actually dove into openHasp and manged to build my smart Mirror with the Sunton Display.
If you are interested, look into my post where I explain my code:

But Iam looking forward to the possibility to use it also with espHome. Thank you for the example.
Kind regards.

That looks great! Did you use some kind of tool to build the “Star Trek” style display?

Nope, it was manual coding of rectangles and cycles in openHASP. See the code that i posted in my “guide”.

I’ve been looking at this display, would it be possible to run kind of a lightweight webbrowser on esp32 (and/or offload rendering to host running ha)

I don’t know of a browser that runs on esp32. Are the existing systems not working for you?

You can make some really neat displays with the new LVGL code. You can display gauges and other types of Homeassistant output to make very nice info screens.