EspHome & TTGO T-Display: no screen refresh

ESPHome
1

I’ve Home Assistant 0.107.7 with ESPHome 1.14.3 on Hassio installed in my RPi 3B+.

I’ve followed this guide done by musk95: https://github.com/musk95/esphome

The information that appears on the display coming from two homeassistant sensors (temperature and pH) becomes overwritten on every update. I don’t know how to avoid this situation. This is my current .yaml code:

`spi:
  clk_pin: GPIO18
  mosi_pin: GPIO19
  
font:
  - file: "SFNSRounded.ttf"
    id: font_cs
    size: 40

sensor:
  - platform: homeassistant
    entity_id: sensor.sonda_ph_aquari
    id: ph_aqua
    internal: true
  - platform: homeassistant
    entity_id: sensor.temperatura_aquari
    id: temp_aqua
    internal: true
    
display:
  - platform: st7789v
    id: st7789vdisplay
    reset_pin: GPIO23
    dc_pin: GPIO16
    cs_pin: GPIO5
    bl_pin: GPIO4
    rotation: 90°
    brightness: 25%
    update_interval: 1s
    lambda: |-
      if (id(ph_aqua).has_state()) {
        it.printf(55, 60, id(font_cs), 0x7E0, "%.1f pH", id(ph_aqua).state);
      } else {
        it.fill(0x000);
      }
      if (id(temp_aqua).has_state()) {
         it.printf(55, 10, id(font_cs), 0xF800, "%.1f °C", id(temp_aqua).state);
      } else {
        it.fill(0x000);
      }`
2

What are you trying to avoid? Surely they should update?

3

The update of sensor values is ok. The issue is with the display refresh. See picture:

image

The values becomes overwritten. I’ve tried different solutions like displaying a black picture, without success.

4

Yes, a picture is worth 1000 words. That is unsatisfactory!

I have only used the ssd1306 using the setup shown here and it doesn’t exhibit that behaviour.

5

I found the issue in the library st7789v.cpp in the function draw_absolute_pixel_internal

void HOT ST7789V::draw_absolute_pixel_internal(int x, int y, int color) {
  if (x >= this->get_width_internal() || x < 0 || y >= this->get_height_internal() || y < 0)
    return;
  uint16_t pos = (x + y * this->get_width_internal())*2;
  this->buffer_[pos++] = (color>>8) & 0xff;
  this->buffer_[pos] = color & 0xff;
 }
6

After few hours:

20200406_225800
20200406_2258001102×2312 585 KB

1 Like
7

Yes, is fixed now. Many thanks for your kind support.

9

Start at the top of the thread.

10

Ah, right. Thanks

11

In home assistant add to sensors:

- platform: template
  sensors:
    current_temp:
       value_template: "{{ state_attr('weather.home','temperature') | round(0) }}"
       friendly_name: "current temperature"
    current_weather:
      value_template: "{{ states('weather.home') | default('Unknown') }}"
      friendly_name: "current weather"

Esphome config:

spi:
  clk_pin: GPIO18
  mosi_pin: GPIO19

# Fonts (can be dowloaded)
font:
  - file: 'slkscr.ttf'
    id: font1
    size: 16
  - file: 'BebasNeue-Regular.ttf'
    id: font2
    size: 85
  - file: 'Arial-Black.ttf'
    id: font3
    size: 30
  - file: 'BebasNeue-Regular.ttf'
    id: font4
    size: 40
    
#Icons 128x128 (put in the folder 'images')
image:
#0-default.png
  - file: "images/0-default.png"
    id: wpng_0
    type: RGB565
#1-clear-night.png
  - file: "images/1-clear-night.png"
    id: wpng_1
    type: RGB565
#2-cloudy.png
  - file: "images/2-cloudy.png"
    id: wpng_2
    type: RGB565
#3-fog.png
  - file: "images/3-fog.png"
    id: wpng_3
    type: RGB565
#4-hail.png
  - file: "images/4-hail.png"
    id: wpng_4
    type: RGB565
#5-lightning.png
  - file: "images/5-lightning.png"
    id: wpng_5
    type: RGB565
#6-lightning-rainy.png
  - file: "images/6-lightning-rainy.png"
    id: wpng_6
    type: RGB565
#7-partlycloudy.png
  - file: "images/7-partlycloudy.png"
    id: wpng_7
    type: RGB565
#8-pouring.png
  - file: "images/8-pouring.png"
    id: wpng_8
    type: RGB565
#9-rainy.png
  - file: "images/9-rainy.png"
    id: wpng_9
    type: RGB565
#10-snowy.png
  - file: "images/10-snowy.png"
    id: wpng_10
    type: RGB565
#11-snowy-rainy.png
  - file: "images/11-snowy-rainy.png"
    id: wpng_11
    type: RGB565
#12-sunny.png
  - file: "images/12-sunny.png"
    id: wpng_12
    type: RGB565
#13-windy.png
  - file: "images/13-windy.png"
    id: wpng_13
    type: RGB565
#14-windy-variant.png
  - file: "images/14-windy-variant.png"
    id: wpng_14
    type: RGB565
#15-exceptional.png
  - file: "images/15-exceptional.png"
    id: wpng_15
    type: RGB565
  
display:
  - platform: st7789v
    id: st7789vdisplay
    reset_pin: GPIO23
    dc_pin: GPIO16
    cs_pin: GPIO5
    bl_pin: GPIO4
    brightness: 100%
    update_interval: 1s
    lambda: |-
      it.set_rotation(DISPLAY_ROTATION_0_DEGREES);
      //Icon
      if (id(current_weather).state == "clear-night")
      {
         it.image(5, 5, id(wpng_1));
      }
      else if (id(current_weather).state == "cloudy")
      {
         it.image(5, 5, id(wpng_2));
      }
      else if (id(current_weather).state == "fog")
      {
         it.image(5, 5, id(wpng_3));
      }
      else if (id(current_weather).state == "hail")
      {
         it.image(5, 5, id(wpng_4));
      }
      else if (id(current_weather).state == "lightning")
      {
         it.image(5, 5, id(wpng_5));
      }
      else if (id(current_weather).state == "lightning-rainy")
      {
         it.image(5, 5, id(wpng_6));
      }
      else if (id(current_weather).state == "partlycloudy")
      {
         it.image(5, 5, id(wpng_7));
      }
      else if (id(current_weather).state == "pouring")
      {
         it.image(5, 5, id(wpng_8));
      }
      else if (id(current_weather).state == "rainy")
      {
         it.image(5, 5, id(wpng_9));
      }
      else if (id(current_weather).state == "snowy")
      {
         it.image(5, 5, id(wpng_10));
      }
      else if (id(current_weather).state == "snowy-rainy'")
      {
         it.image(5, 5, id(wpng_11));
      }
      else if (id(current_weather).state == "sunny")
      {
         it.image(5, 5, id(wpng_12));
      }
      else if (id(current_weather).state == "windy")
      {
         it.image(5, 5, id(wpng_13));
      }
      else if (id(current_weather).state == "windy-variant")
      {
         it.image(5, 5, id(wpng_14));
      }
      else if (id(current_weather).state == "exceptional")
      {
         it.image(5, 5, id(wpng_15));
      }
      else
      {
         it.image(5, 5, id(wpng_0));
      }
      //Temperature
      if (id(current_temp).has_state()) 
      {
        it.printf(95, 200, id(font2),  0xFFFF, TextAlign::BASELINE_RIGHT, "%.0f", id(current_temp).state);
      }
        it.printf(100, 120, id(font3),  0xFFFF, "o");
        it.printf(105, 170, id(font4),  0xFFFF, "F");
      //Time
        it.strftime(67, 235, id(font1), 0x767E, TextAlign::BASELINE_CENTER, "%H:%M:%S", id(esptime).now());
      //Battery voltage
      if (id(vcc).has_state()) {
         it.printf(4, 4, id(font1), 0x767E, "%.2f V", id(vcc).state);
      }

sensor:
# Temperature from home assistant
  - platform: homeassistant
    id: current_temp
    entity_id: sensor.current_temp

#Battery voltage
  - platform: adc
    pin: 34
    attenuation: 11db
    name: VBatt
    id: vcc
    update_interval: 30s

#Weather state for icons  
text_sensor:
  - platform: homeassistant
    id: current_weather
    entity_id: sensor.current_weather


#Left button
binary_sensor:
  - platform: gpio
    pin: 
      number: 0
      inverted: True
      mode: INPUT_PULLUP
    name: left_button

#Right button
  - platform: gpio
    pin: 
      number: 35
      inverted: True
      mode: INPUT_PULLUP
    name: right_button

time:
  - platform: homeassistant
    id: esptime
3 Likes
12

Hi Everyone,
I must be missing some part of the setup because validation reports the following:

Platform not found: ‘display.st7789v,’

But the source files are all present and correct as far as I can tell.

Running latest esphome-dev

Anything I should be doing or looking for?

13

You have to use custom component:
https://github.com/musk95/esphome

14

Thanks for your answer. I tried that before changing over to -dev with same result.
Am I correct that the path should be something like the following?:

4ee:/config/esphome/t_display1/src/esphome/components/[display|image|st7789v]/

15

I have added the three folders but I still get the same error when validating.
Are there some more steps in the process that I am not aware of?

16

Check my full project on GitHub

3 Likes
17

Got it working at last! Thanks, Anton! It took me a while to cotton on that one has to create the custom_components directory, in the same directory as the device directories and .yaml files, and of course then populate it with the directories and files of your project.

18

Im getting the same problem and cannot seam to fix it.

here is my .yaml


#____TEMP Sensors______________

i2c:
  sda: 21
  scl: 22
  scan: True

sensor:
  - platform: bmp280
    address: 0x76
    temperature:
      name: "Temperature"
      oversampling: 8x
      id: Temperature
    pressure:
      name: "Pressure"
    update_interval: 30s
    id: espTemp



#______DISPLAY____________

    
spi:
  clk_pin: GPIO18
  mosi_pin: GPIO19
  
font:
   - file: 'arial-black.ttf'
     id: font1
     size: 50
    

display:
  - platform: st7789v
    id: st7789vdisplay
    reset_pin: GPIO23
    dc_pin: GPIO16
    cs_pin: GPIO5
    bl_pin: GPIO4
    update_interval: 1s
    pages:
      - id: page1
        lambda: |-
          it.set_rotation(DISPLAY_ROTATION_270_DEGREES);
          it.strftime(4, 55, id(font1), 0x767E, TextAlign::BASELINE_LEFT, "%H:%M:%S", id(esptime).now());
          it.printf(4, 70, id(font1), 0x767E, "%.1f°C", id(Temperature).state);
        
time:
  - platform: homeassistant
    id: esptime
19

@leonb, Do you have the display related directories and source files in the custom_components directory? What error message do you get when you compile?

Here is the display related section of my .yaml:
All it currently does is to display the date and time it obtains from my network ntp server.

Example minimal configuration entry

spi:
clk_pin: GPIO18
mosi_pin: GPIO19

(Fonts - folder ‘images’)

font:

  • file: ‘fonts/slkscr.ttf’
    id: font1
    size: 48
  • file: ‘fonts/BebasNeue-Regular.ttf’
    id: font2
    size: 85
  • file: ‘fonts/Arial-Black.ttf’
    id: font3
    size: 48
  • file: ‘fonts/BebasNeue-Regular.ttf’
    id: font4
    size: 40
  • file: ‘fonts/Arial-Black.ttf’
    id: font5
    size: 32
  • file: ‘fonts/Arial-Black.ttf’
    id: font6
    size: 24

display:

  • platform: st7789v
    id: st7789vdisplay
    bl_pin: GPIO4
    cs_pin: GPIO5
    dc_pin: GPIO16
    reset_pin: GPIO23
    brightness: 20%
    update_interval: 1s
    lambda: |-
    it.set_rotation(DISPLAY_ROTATION_90_DEGREES);
    it.strftime(120, 40, id(font3), 0xFFE0, TextAlign::BASELINE_CENTER, “%H:%M:%S”, id(esptime).now());
    it.strftime(120, 80, id(font5), 0x07E0, TextAlign::BASELINE_CENTER, “%A”, id(esptime).now());
    it.strftime(120, 120, id(font6), 0x07FF, TextAlign::BASELINE_CENTER, “%d %b %Y”, id(esptime).now());

time:

  • platform: sntp
    servers: 192.168.1.1
    id: esptime
20

@phaedrus42 thanks for the reply

let me clarify (i’m new to home assistant and ESPHome)

I can get the screen to work no problem and get no errors while compiling.

My issue is like the original issue and the characters overwrite themselves. and just turn into a single block of white pixels.

I downloaded the files from musk95 about a week ago.

Thanks for the help

21

The files from musk95’s repository have the issue.
semenyak’s GitHub linked above has the fix.
Or a little further up in the 5th post, the issue and fix is listed. It’s in the st7789v.cpp file, which you can edit in notepad or any text editor… or just swap that file from semenyak’s repository.

1 Like