Help getting first Display (TFT) to work with ESPHome

Scoff · May 13, 2022, 9:52am

I want to see If I can connect a simple TFT display to my board to view my sensor distance readings, rather than having to use the ESPHome log viewer or Home Assistant dashboard.
I’m still very new to all things electrical and have been reading the ESPHome ‘Display’ component info here: Display Component — ESPHome

To keep things simple I’ve unplugged my ultrasonic sensor from my board and removed the code for it in my ESPHome config file, so that I can just test the display and the display code by itself, before trying to get my sensor readings to display.

I’ve fallen at the first hurdle and don’t know if its a problem with the GPIO pins I’ve assigned, a hardware issue with the display, or the ESPHome driver.

Hardware involved:
Board: Lolin D1 Mini Pro (ESP8266) - Powered via USB
Display: Waveshare 0.96" TFT 160 x 80 SPI ST7735S Controller

Connections:
Display VCC → Board 3.3v
Display GND → Board GND
Display DIN → Board MOSI GPIO13
Display CLK → Board SCK GPIO14
Display CS → Board SS GPIO15
Display DC → Board GPIO0
Display RST → Board GPIO2
Display BL → N.C

ESPHome config:

esphome:
  name: display

esp8266:
  board: d1_mini_pro

spi:
  clk_pin: GPIO14
  mosi_pin: GPIO13

display:
  - platform: st7735
    model: "INITR_MINI160X80"
    reset_pin: GPIO2
    cs_pin: GPIO15
    dc_pin: GPIO0
    rotation: 0
    device_width: 160
    device_height: 80
    col_start: 0
    row_start: 0
    eight_bit_color: true
    update_interval: 5s
    lambda: |-
      it.line(0, 0, 50, 50);

The above config compiles and uploads to my board fine, however the display isn’t working correctly.
The first half of the display from left to right is white, however the right half of the screen is showing multicoloured ‘white noise’ - sorry , the best I can describe it!
My black line code does render as a diagonal line, but not in the top left corner of the screen as expected. Imagining the screen from left to right divided into 4 quarters, my line starts in the top left of the second quarter of the screen. It ALSO replicates underneath this. Imagining the screen divided into 2 halves, top and bottom, the top half replicates on the bottom half.

I know that my display uses the ST7735S controller, and I am referencing the ESPHome native support for the ST7735 controller, so first thoughts, after checking my wiring/connections are ok, is this difference is causing the incompatibility?

A couple of picture to illustrate the problem better than my words:

Any help appreciated

Scoff · May 13, 2022, 8:07pm

I’ve subsequently downloaded the code from the display manufacturers website File:0.96inch-OLED-Code.7z - Waveshare Wiki
This contains some demo code for Arduino. I loaded up one of the sketches into my Arduino IDE and the screen works perfectly. This confirmed my esp board, wiring, the display, and my pin designations are all ok.

Does this mean that I will have to raise this as a feature request on thr ESPHome github page? In the meantime is there anyway to integrate/port the relevant arduino code into the ESPHome code for this ST7735S device? The Arduino IDE does need a couple of additional libraries to be referenced when compiling the code, which are the Adafruit_GFX.h and the Adafruit_7735.h

Not sure if this is even possible, but just keen to start using the display as soon as possibly, ideally with ESPHome…

stevemann · May 14, 2022, 2:28am

Scoff · May 14, 2022, 7:21am

That’s what I’ve used, but it isn’t working for the ST7735S model…

gaz99 · September 12, 2022, 8:03am

I have a similar 0.96" SPI ST7735S based OLED display and am also having trouble getting it to work.

I have tried all the models from the ESPHome docs but no luck.

Did you ever get it working ??

Scoff · September 12, 2022, 6:29pm

@gaz99 I had to work around the issue and figure out the code required to produce various colours such as Red, Green, Blue, Cyan etc.

Setting   -   Result on display

R 0
G 0        = WHITE
B 0

R 100
G 100      = BLACK
B 100

R 100
G 0        = YELLOW
B 0

R 0
G 100      = MAGENTA
B 0

R 0
G 0        = CYAN
B 100

R 0
G 100      = BLUE
B 100

R 100
G 0          = GREEN
B 100

R 100
G 100      = RED
B 0

Once I had done this, the code I used in my ESPHome project included the following:

display:
  - platform: st7735
    model: "INITR_MINI160X80"
    reset_pin: GPIO16
    cs_pin: GPIO15
    dc_pin: GPIO0
    rotation: 270
    device_width: 82
    device_height: 161
    col_start: 0
    row_start: 0
    eight_bit_color: true

After changing the width and height values to the values above, I was able to obtain the desired result on my display. Good luck!

gaz99 · September 13, 2022, 12:12pm

Thanks for that, with a bit of tweaking I got the display working fine.

160x80 OLED SPI #4b

# esp32-test3-spi.yaml
# V1a - minimum + wifi
# V1b - add SPI and ST7735 160x80 display - no good
# V1c - 160x80 display with setting from forum

esphome:
  name: esp32-test3-spi

esp32:
  board: esp32dev
  framework:
    type: arduino

# Enable logging
logger:

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

ota:
  password: ""

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

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Esp32-Test3-Spi Fallback Hotspot"
    password: ""

captive_portal:
   
sensor:

  - platform: wifi_signal
    name: "esp32-test3-spi WiFi"
    update_interval: 60s 
    
# Display stuff
spi:
  clk_pin: GPIO18
  mosi_pin: GPIO23
  
display:
  - platform: st7735
    model: "INITR_MINI160X80"
    reset_pin: GPIO16
    cs_pin: GPIO5
    dc_pin: GPIO17
    rotation: 270
    device_width: 82
    device_height: 161
    col_start: 0
    row_start: 0
    eight_bit_color: true
    update_interval: 5s
    lambda: |-
      it.rectangle(0,  2, 160, 80, id(my_red));
      it.filled_rectangle(1,  3, 158, 78, id(my_black));
      it.line(0, 27, 160, 27, id(my_red));
      it.line(0, 55, 160, 55, id(my_red));      
      it.print(80, 3, id(font5), my_blue, TextAlign::TOP_CENTER,  "Test");
      it.print(80, 31, id(font5), my_green, TextAlign::TOP_CENTER,  "Test");
      it.print(80, 59, id(font5), my_magenta, TextAlign::TOP_CENTER,  "Test");      
      // this line = the text is centered 80 pixels in from left and 59 pixels down 
font:
  - file: 'fonts/slkscr.ttf'
    id: font1
    size: 8

  - file: 'fonts/bebas-neue-regular.ttf'
    id: font2
    size: 48

  - file: 'fonts/arial.ttf'
    id: font3
    size: 14

  - file: 'fonts/bebas-neue-regular.ttf'
    id: font4
    size: 32
    
  - file: 'fonts/arial.ttf'
    id: font5
    size: 18
    
  - file: 'fonts/bebas-neue-regular.ttf'
    id: font6
    size: 54    

  - file: 'fonts/bebas-neue-regular.ttf'
    id: font7
    size: 72
    
color:
  - id: my_red
    red: 100%
    green: 100%
    blue: 0%
  - id: my_yellow
    red: 100%
    green: 0%
    blue: 0%
  - id: my_green
    red: 100%
    green: 0%
    blue: 100%
  - id: my_blue
    red: 0%
    green: 100%
    blue: 100%
  - id: my_cyan
    red: 0%
    green: 0%
    blue: 100%
  - id: my_magenta
    red: 0%
    green: 100%
    blue: 0%
  - id: my_white
    red: 0%
    green: 0%
    blue: 0%
  - id: my_gray
    red: 50%
    green: 50%
    blue: 50%
  - id: my_black
    red: 100%
    green: 100%
    blue: 100%    
```

hilo90mhz · October 3, 2022, 2:44am

My AIR101-LCD screen works with this config:
use_bgr: True # Use BGR mode. Default is false.

but my screen also works with

device_width: 80
device_height: 160

So maybe not the same issues…

full config:

spi:
  clk_pin: 2
  mosi_pin: 3

display:
  - platform: st7735
    model: "INITR_MINI160X80"
    reset_pin: 10
    cs_pin: 7
    dc_pin: 6
    rotation: 0
    device_width: 80
    device_height: 160
    col_start: 0
    row_start: 0
    eight_bit_color: True
    use_bgr: True
    update_interval: 5s
    lambda: |-
      it.rectangle(0,  0, it.get_width(), it.get_height(), id(my_blue));
      it.rectangle(0, 20, it.get_width(), it.get_height(), id(my_blue));   // header bar
      
      it.print(it.get_width()/2, 10, id(helvetica_12), id(my_yellow), TextAlign::CENTER, "ESPHome");
      it.print(it.get_width()/2, 30, id(helvetica_8), id(my_green), TextAlign::CENTER, "ESPHome");
      it.print(it.get_width()/2, 50, id(helvetica_6), id(my_red), TextAlign::CENTER, "ESPHome");

zimmer62 · February 24, 2023, 12:55am

@hilo90mhz I have this exact AIR101-LCD, trying to use it with the luatos. com/t/esp32c3 that I got from the same aliexpress store. Is there any chance you can share the rest of your file assuming you’re using the same esp32c3 board? I’m struggling with the luatos board itself.

I’ve tried esp32-c3-devkitm-1 It seems install the firmware, but then never gets wifi signal or lets me look at the logs.

– NEVER MIND –
I got it, it was the way the luatos board needed to be configured in esphome

esphome:
  name: test-air
  friendly_name: test-air
  platformio_options:
    board_build.f_flash: 40000000L
    board_build.flash_mode: dio
    board_build.flash_size: 4MB

esp32:
  board: esp32-c3-devkitm-1
  framework:
    type: arduino
    version: 2.0.5
    platform_version: 5.2.0

This seemed to do the trick.

wenter · April 11, 2023, 6:09pm

Hi,
can you please confirm your wires connections?
GND - ground
VCC - 3.3V
SCL-18
SDA-23
RES-16
DC-17
CS-5
BLK - not connected

Solarflor · February 5, 2024, 11:52am

Hi all,
is there any way to get a command via home assistant to turn on/odd the display?
For example using a Presence sensor the Display could turn on only when there is someone in the room.
Thanks

Found it

Display:
  - platform: ...
    # ...
    lambda: |-
      // Turn the whole display on.
      it.fill(COLOR_ON);
      // Turn the whole display off.
      it.fill(COLOR_OFF);

wtv1211 · February 7, 2024, 2:52pm

I’m stuck at finding the uart pins for my AIR101-LCD. The lack of an usb port came as a surprise for me. Can’t flash esphome as of yet, the wholo gpio is simply not standard c3.