More Instructions please

[rojoricardo]

Im trying to install this through HomeAssistant ESPHome Plugin, but i am no savy and im not being able to do it, it says that the board doesnot exist...
Please help

[landonr]

yup i get that too. you need to:

• install > manual download
• use https://web.esphome.io/ and install over usb

[rojoricardo]

yup i get that too. you need to:

• install > manual download
• use https://web.esphome.io/ and install over usb

I cant compile the code, in ESPHome, it tells me that the board is not exist, where did you compile it?

[landonr]

Are you on esphome 9.1?

[rojoricardo]

Im on 2022.3.1 in Home Assistant, how do i get esphome 9.1?

[landonr]

Check for updates in hacs

[rojoricardo]

I dont have it installed from HACS i have it directly from Home assistant Addons

[landonr]

sorry my bad that's right. at the bottom of my esphome ui i see "ESPHome by Nabu Casa | Fund development | v2022.9.1 Documentation"

[rojoricardo]

Error: Unknown development platform 'espressif32' when i try to manual download the program it says that

[TLCary]

I'm attempting this as well. In the s3.yaml file: - "file:///config/esphome/tdisplays3/TFT_eSPI". Apparently, landonr has cloned this repository to the esphome directory. To do that, you could install the SAMBA plugin and then copy to the shared config folder. There is likely a way to do a "git clone" command as well. But an easier option for picking up libraries is to use git from the s3.yaml file. Landonr, not sure how to do that exactly, but would it be easier to install that way?
Something like: - tdisplays3=https://github.com/landonr/lilygo-tdisplays3-esphome.git

[TLCary]

That worked. In the .yaml file replace:
- file:///config/esphome/tdisplays3/TFT_eSPI with - tdisplays3=https://github.com/landonr/lilygo-tdisplays3-esphome.git
Then Install / Manual Download / Modern... Install / Open ESPHome Web (it likes Chrome)... Might have to 'retry' before it connects/erases/uploads.
Thanks landonr, would still be struggling with this without your help.

[rojoricardo]

That worked. In the .yaml file replace: - file:///config/esphome/tdisplays3/TFT_eSPI with - tdisplays3=https://github.com/landonr/lilygo-tdisplays3-esphome.git Then Install / Manual Download / Modern... Install / Open ESPHome Web (it likes Chrome)... Might have to 'retry' before it connects/erases/uploads. Thanks landonr, would still be struggling with this without your help.

I did what you said, but now it's throwing an error: Unknown developer platform 'espressif32'

[TLCary]

Settings / Add-ons / ESPome... at the top does it say: Current version: 2022.9.1 ?

[rojoricardo]

NO! omg! how do I update! for crying out loud, isnt it automatic?

[TLCary]

Autoupdate should be the fourth button below... Should be.

[rojoricardo]

No wonder I'm struggling, rage uninstall installing again

[TLCary]

Been there. It gets better... At this point everything has gotten pretty mature and polished. It's super powerful and rock solid... Its worth the trouble. I'm now working on adding LVGL widgets. With this display they look great.

[rojoricardo]

Oh my goodness, I cant beleive this, h've been struggling with this for two days! TWO days! and it was just a missing update!
BTW. Do you mind sharing your at least show a picture of your widgets...

[rojoricardo]

Well, it now went further but once it starts compiling the *.cpp files, it starts throwing a bunch of errors, any ideas? by the way i got the files in my config/esphome/... so shouldnt be a problem there, allthough i also tried it going through the git address as you suggested, and same thing, a bunch of errors saying the functions are declared void and stuff

[TLCary]

That's odd. Paste the errors for us. We will get it.

[rojoricardo]

Dependency Graph
|-- SPI @ 2.0.0
|-- FS @ 2.0.0
|-- SPIFFS @ 2.0.0
|-- TFT_eSPI @ 2.4.71
|-- WiFi @ 2.0.0
|-- ESPmDNS @ 2.0.0
|-- Update @ 2.0.0
Compiling /data/regadera-principal/.pioenvs/regadera-principal/src/TFT_eSPI/Extensions/Button.cpp.o
Compiling /data/regadera-principal/.pioenvs/regadera-principal/src/TFT_eSPI/Extensions/Smooth_font.cpp.o
src/TFT_eSPI/Extensions/Button.cpp:5:1: error: 'TFT_eSPI_Button' does not name a type
TFT_eSPI_Button::TFT_eSPI_Button(void) {
^~~~~~~~~~~~~~~
src/TFT_eSPI/Extensions/Button.cpp:14:6: error: 'TFT_eSPI_Button' has not been declared
void TFT_eSPI_Button::initButton(
^~~~~~~~~~~~~~~
src/TFT_eSPI/Extensions/Button.cpp:15:2: error: variable or field 'initButton' declared void
TFT_eSPI *gfx, int16_t x, int16_t y, uint16_t w, uint16_t h,
^~~~~~~~
src/TFT_eSPI/Extensions/Button.cpp:15:2: error: 'TFT_eSPI' was not declared in this scope
src/TFT_eSPI/Extensions/Button.cpp:15:12: error: 'gfx' was not declared in this scope
TFT_eSPI *gfx, int16_t x, int16_t y, uint16_t w, uint16_t h,
^~~
src/TFT_eSPI/Extensions/Button.cpp:15:17: error: 'int16_t' was not declared in this scope
TFT_eSPI *gfx, int16_t x, int16_t y, uint16_t w, uint16_t h,
^~~~~~~
src/TFT_eSPI/Extensions/Button.cpp:15:17: note: suggested alternative: 'char16_t'
TFT_eSPI *gfx, int16_t x, int16_t y, uint16_t w, uint16_t h,
^~~~~~~
char16_t
src/TFT_eSPI/Extensions/Button.cpp:15:28: error: 'int16_t' was not declared in this scope
TFT_eSPI *gfx, int16_t x, int16_t y, uint16_t w, uint16_t h,
^~~~~~~
src/TFT_eSPI/Extensions/Button.cpp:15:28: note: suggested alternative: 'char16_t'
TFT_eSPI *gfx, int16_t x, int16_t y, uint16_t w, uint16_t h,
^~~~~~~
char16_t
src/TFT_eSPI/Extensions/Button.cpp:15:39: error: 'uint16_t' was not declared in this scope

[landonr]

Thanks @TLCary the github change also made the build action pass in github. I have a branch with some lvgl stuff in this repo but I didn't get very far
just an fyi @rojoricardo this uses TFT_Espi instead of the native esphome display component so normal widgets wont work!

[jamesarm97]

Is there any way to use the esphome normal display: section and the normal text, ui drawing elements with this setup? The only thing I see is the two hardcoded functions in the class for drawing the bar and text string. (figured out part, at least I can use the tft_espi graphic commands in script. Just moved the tft variable declaration from Private: to Public: so it can be accessed in esphome script directly.

[rperciaccante]

Is there any way to use the esphome normal display: section and the normal text, ui drawing elements with this setup? The only thing I see is the two hardcoded functions in the class for drawing the bar and text string. (figured out part, at least I can use the tft_espi graphic commands in script. Just moved the tft variable declaration from Private: to Public: so it can be accessed in esphome script directly.

Do you have any docs for this? I am used to the display sections, but with an example or two, I can figure it out. I am basically looking to make boxes, and fill them with text, at least for now :)

[lolo31370]

Could you explain more ?
I have the HA ESPHome add-on v2022.10.2
I don't see the menu Install->Manual Download
Should I compile the project first ?
In https://web.esphome.io/, I see the S3 board connected by USB but I don't know which file to install...
Thanks

[jamesarm97]

yes, pretty easy, but a hack. It would really be nicer to integrate the standard esphome display component to use this library so we can use the display commands. You should have downloaded the tdisplay3 folder from git into your esphome folder already if you have got this far. I used a file editor HACS add-on to edit this file: /config/esphome/tdisplays3/tft_espi_display.h
Move this line that is under the Private: section to just below the Public: section
TFT_eSPI tft = TFT_eSPI();

Then save the file. Next time you edit / compile and upload to the S3 board it will expose the tft class to esphome. You can then just use the standard tft_espi drawing functions (not the typical esphome "display:" section / drawing components).

Then in your script, use a lambda section and call the tft class functions like this:

    displayControllerComponent->tft.fillRectHGradient(0, 0, 50, 50, TFT_BLUE, TFT_RED);
    displayControllerComponent->tft.fillCircle(120, 120, 20, TFT_GREEN);

There are some examples for "C" on this page, just use the displayControllerComponent->tft.xxxxfunction_name
https://wiki.seeedstudio.com/Wio-Terminal-LCD-Graphics/

[rperciaccante]

yes, pretty easy, but a hack. It would really be nicer to integrate the standard esphome display component to use this library so we can use the display commands. You should have downloaded the tdisplay3 folder from git into your esphome folder already if you have got this far. I used a file editor HACS add-on to edit this file: /config/esphome/tdisplays3/tft_espi_display.h Move this line that is under the Private: section to just below the Public: section TFT_eSPI tft = TFT_eSPI();

Then save the file. Next time you edit / compile and upload to the S3 board it will expose the tft class to esphome. You can then just use the standard tft_espi drawing functions (not the typical esphome "display:" section / drawing components).

Then in your script, use a lambda section and call the tft class functions like this:

    displayControllerComponent->tft.fillRectHGradient(0, 0, 50, 50, TFT_BLUE, TFT_RED);
    displayControllerComponent->tft.fillCircle(120, 120, 20, TFT_GREEN);

There are some examples for "C" on this page, just use the displayControllerComponent->tft.xxxxfunction_name https://wiki.seeedstudio.com/Wio-Terminal-LCD-Graphics/

You are the man!

I am trying to use the code from tft_espi_display.h as a template, and I am trying to display the value of a sensor (host_ip) which is for all intents and purposes a string - it is defined as a text sensor:

text_sensor:
  - platform:                                 wifi_info
    ip_address:
      name:                                   IP Address
      id:                                     host_ip
      entity_category:                        diagnostic
      icon:                                   mdi:fingerprint

This is the line I am using in the YAML config:

interval:
  - interval: 1s
    then:
    - lambda: |-
        displayControllerComponent->tft.setRotation(1);
        displayControllerComponent->tft.setFreeFont(FMB12);
        displayControllerComponent->tft.drawRoundRect(0, 0, 320, 170, 10, TFT_RED);
        displayControllerComponent->tft.drawFastHLine(0, 40, 320, TFT_RED);
        displayControllerComponent->tft.drawString(id(host_ip),70,80);
        displayControllerComponent->tft.drawString("Holy Crap - it works",10,10);
        displayControllerComponent->tft.setFreeFont(FMB18);
        displayControllerComponent->tft.drawString("Thank You",10,50);
        displayControllerComponent->tft.drawString("jamesarm97",10,80);

And this is the error I am seeing:

s3.yaml: In lambda function:
s3.yaml:156:63: error: no matching function for call to 'TFT_eSPI::drawString(esphome::homeassistant::HomeassistantTime*&, int, int)'
In file included from src/tft_espi_display.h:2,
                 from src/main.cpp:81:
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:565:12: note: candidate: 'int16_t TFT_eSPI::drawString(const char*, int32_t, int32_t, uint8_t)'
            drawString(const char *string, int32_t x, int32_t y, uint8_t font),  // Draw string using specified font number
            ^~~~~~~~~~
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:565:12: note:   candidate expects 4 arguments, 3 provided
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:566:12: note: candidate: 'int16_t TFT_eSPI::drawString(const char*, int32_t, int32_t)'
            drawString(const char *string, int32_t x, int32_t y),                // Draw string using current font
            ^~~~~~~~~~
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:566:12: note:   no known conversion for argument 1 from 'esphome::homeassistant::HomeassistantTime*' to 'const char*'
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:567:12: note: candidate: 'int16_t TFT_eSPI::drawString(const String&, int32_t, int32_t, uint8_t)'
            drawString(const String& string, int32_t x, int32_t y, uint8_t font),// Draw string using specified font number
            ^~~~~~~~~~
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:567:12: note:   candidate expects 4 arguments, 3 provided
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:568:12: note: candidate: 'int16_t TFT_eSPI::drawString(const String&, int32_t, int32_t)'
            drawString(const String& string, int32_t x, int32_t y),              // Draw string using current font
            ^~~~~~~~~~
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:568:12: note:   no known conversion for argument 1 from 'esphome::homeassistant::HomeassistantTime*' to 'const String&'
*** [.pioenvs\s3\src\main.cpp.o] Error 1
======================================================================= [FAILED] Took 18.73 seconds ====================================================================

Any ideas where to start?

[jamesarm97]

        drawString(const String& string, int32_t x, int32_t y, uint8_t font),// Draw string using specified font number
        ^~~~~~~~~~

.piolibdeps/s3/tdisplays3/TFT_eSPI.h:567:12: note: candidate expects 4 arguments, 3 provided
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:568:12: note: candidate: 'int16_t TFT_eSPI::drawString(const String&, int32_t, int32_t)'
drawString(const String& string, int32_t x, int32_t y), // Draw string using current font
^~~~~~~~~~
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:568:12: note: no known conversion for argument 1 from 'esphome::homeassistant::HomeassistantTime*' to 'const String&'
*** [.pioenvs\s3\src\main.cpp.o] Error 1
======================================================================= [FAILED] Took 18.73 seconds ====================================================================

Any ideas where to start?

@rperciaccante
You have to first use the .state part of the text_sensor, I made that mistake on my first time using id() of a sensor. The data then needs to be cast to the char *.

    displayControllerComponent->tft.drawString(id(host_ip).state.c_str(),70,110);

[landonr]

thanks for helping out @jamesarm97! can we improve the docs to make it easier for other people?

[rperciaccante]

        drawString(const String& string, int32_t x, int32_t y, uint8_t font),// Draw string using specified font number
        ^~~~~~~~~~

.piolibdeps/s3/tdisplays3/TFT_eSPI.h:567:12: note: candidate expects 4 arguments, 3 provided
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:568:12: note: candidate: 'int16_t TFT_eSPI::drawString(const String&, int32_t, int32_t)'
drawString(const String& string, int32_t x, int32_t y), // Draw string using current font
^~~~~~~~~~
.piolibdeps/s3/tdisplays3/TFT_eSPI.h:568:12: note: no known conversion for argument 1 from 'esphome::homeassistant::HomeassistantTime*' to 'const String&'
*** [.pioenvs\s3\src\main.cpp.o] Error 1
======================================================================= [FAILED] Took 18.73 seconds ====================================================================

Any ideas where to start?

@rperciaccante You have to first use the .state part of the text_sensor, I made that mistake on my first time using id() of a sensor. The data then needs to be cast to the char *.

    displayControllerComponent->tft.drawString(id(host_ip).state.c_str(),70,110);

@jamesarm97 @landonr
You are awesome :) I was able to get it working, and then some! Here are the current images:

I put everything up on Github, hopefully a little way to give back :)

https://github.com/rperciaccante/MopekaLCDDisplay

[Feridoun]

Thanks for the advice here, but is there any possibility of getting the esphome display graph component working? I'm keen to display a power graph from a home assistant sensor.

[guillempages]

I've submitted a pr (#10) with which this could be used as a normal display component, and thus the standard esphom API would work (graph, images, animations,...).