Have managed to build a template for the LilyGo T-Display ESP32S3 board family

Great idea - they have several excellent ESP32S3 boards now with built in displays, and one with a touch screen so I hope they are interested I your approaching them.

I am sure there are a few improvements I could make to my template; one I have identified already is to amend the contents of the default .ino file to set the tft.setRotation to 0 instead of 3.

looks interesting, where can I find this template?

Thanks JojoS, I hadn’t looked at how to create something for distribution, but will do for sure. Give me a couple of days and I’ll either come up with a zip or do a tutorial and how-to etc.

I now have a board template for the 7" ESPS3 capacitive touch panel (ESP32-8048S070-c) running with the Arduino IDE - I will see how you share and follow on. Been a real learning exercise getting it working (problems were not with LVGL or SquareLine).

Do you intend to add the libraries to the ZIP (Arduino_GFX in my case) - I have not as I want the IDE to keep them up to date. Not sure if this is good or bad?

A template for the LilyGo Display would indeed be nice. I have spend about 2 hours to get this display running.

What exactly are you having trouble with, Chris? Have you managed to get your Lilygo device working with Squareline Studio at all? Which device do you have? If it is one of the boards I have I’d be happy to help you get up and running with it.

Also, @deadeye, I have posted a Tips on getting up and running post for the LilyGo T-Display boards that might help you…

Here’s the thread: Tips on using the LilyGo T-Display / Touch boards with SquareLine Studio

Yes I got it up and running.
Was just a matter on using the right library and the configuration. Encountered some WDT resets when calling the ui_init(). Now everything is setup and working right now.

1 Like

Glad you’ve got it sorted. Enjoy :+1:

Any update on the relase of the template configuaration?

Apologies Chris, I sort of mis read your previous comment as though you were not necessarily in need of the template any more as you had your device up and running. I guess given what you posted yesterday implies you would still like the template.

In work today, I’ll sort something over the weekend for you.

Here is the Zip file and how-to-install instructions for the LilyGo T-Display template for SquareLineStudio.

arduino_tft_espi_v1_0_0_LilyGo.zip (5.4 MB)

PLEASE NOTE: this comes with caveats.
This is for information

  • Please make sure you have a backup. I am not in any way an expert in SquareLine Studio, and you add this template at your own risk.
  • I have only tested this on MacOS though I am sure it would work on a Windows machine too with the correct directory as it follows SquareLIne Studios Open Board Protocol.
  • There is a Zip file within this Zip file which amongst other things contains the libraries that SquareLineSrtudio uses to create Arduino sketches and code. I have not yet found a way to update these auto-contained Zip files. I am not too concerned about the /lvgl library but you may need to update the auto-created TFT_eSPI library with one specific for your device as each LilyGo T-Display or T-Embed device needs a specific library to operate correctly. If you do need to update the TFT_eSPI library ensure you use the library from the respective LilyGo GitHub board page.

LilyGo T-display and Touch boards GitHub Page

LilyGo T-Embed board GitHb page

Instructions

  1. Download and extract the attached file
  2. Locate the SquareLIne folder on your Mac or PC
  3. Place the newly extracted folder and contents into the /SquareLine/Boards/Arduino directory as indicated in the screenshot. NB: in this image it is the second entry in the /arduino directory and the folder is called arduino_tft_espi_v1_0_0_LilyGo

  1. When you next open SquareLine Studio, you should see the LilyGo T-Display template in the Arduino section of the Create project area as per screenshot at the top of this thread.

Have fun!

Thank you for providing your template. I gave it a try but have problems running it.

When I use the latest version of the tft_espi library the project complies but the screen is corrupt. The drawn size is smaller than it should be and all elements are shown multiple times and look like an interleaved picture.

If I use all of the files the template generates I can’t compile the project anymore. Since some references are missing.

I’m still trying to figure out the later problem, cause the arduino IDE shows me some very strange paths to the libarary files. Seems to be a bug in the current IDE release of temporary files not beeing cleaned up.

There is a bug in one of the lines in the SLS generated UI.ino file…

Look in the ui.ino file for…

TFT_eSPI tft = TFT_eSPI( screenWidth, screenHeight ); /* TFT instance */

Remove the variables contained inside the parenthesis…

TFT_eSPI tft = TFT_eSPI(); /* TFT instance */

… and it should then all work fine

Indeed this was the right solution.
So I can confirm besided this, the template is working.
Thank you for providing it.

You are very welcome, Chris. Glad you are finding it useful.

Hi I’ve been trying to get the T-display working and have been unsuccessful. i have installed square line studio and your template. Created a project and exported it to the ui.ino that was in the folders. I have changed the screen resolution and it compiles and uploads with no errors but the display show’s nothing. i have copied the Lv_confi file, lvgl folder, tft_espi folder from T-Display-S3-main folder from the github into the arduino libraries.

i have tried and uploaded the factory image and that works fine. i have also uploaded and tried the youtubers “Volos” examples of using tft_espi and sprite sketches and they load and work. I’m not sure where I’m going wrong, would you be able to offer me any help advice.

#include <lvgl.h>
#include <TFT_eSPI.h>
#include "ui.h"



/*If you want to use the LVGL examples,
  make sure to install the lv_examples Arduino library
  and uncomment the following line.
#include <lv_examples.h>
*/

/*Change to your screen resolution*/
static const uint16_t screenWidth  = 320;
static const uint16_t screenHeight = 170;

static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * screenHeight / 10 ];

TFT_eSPI tft = TFT_eSPI(); /* TFT instance */

#if LV_USE_LOG != 0
/* Serial debugging */
void my_print(const char * buf)
{
    Serial.printf(buf);
    Serial.flush();
}
#endif

/* Display flushing */
void my_disp_flush( lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p )
{
    uint32_t w = ( area->x2 - area->x1 + 1 );
    uint32_t h = ( area->y2 - area->y1 + 1 );

    tft.startWrite();
    tft.setAddrWindow( area->x1, area->y1, w, h );
    tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
    tft.endWrite();

    lv_disp_flush_ready( disp );
}

/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
{
    uint16_t touchX = 0, touchY = 0;

    bool touched = false;//tft.getTouch( &touchX, &touchY, 600 );

    if( !touched )
    {
        data->state = LV_INDEV_STATE_REL;
    }
    else
    {
        data->state = LV_INDEV_STATE_PR;

        /*Set the coordinates*/
        data->point.x = touchX;
        data->point.y = touchY;

        Serial.print( "Data x " );
        Serial.println( touchX );

        Serial.print( "Data y " );
        Serial.println( touchY );
    }
}

void setup()
{
    Serial.begin( 115200 ); /* prepare for possible serial debug */
   


 


    String LVGL_Arduino = "Hello Arduino! ";
    LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();

    Serial.println( LVGL_Arduino );
    Serial.println( "I am LVGL_Arduino" );
  

    lv_init();

#if LV_USE_LOG != 0
    lv_log_register_print_cb( my_print ); /* register print function for debugging */
#endif

    tft.begin();          /* TFT init */
    tft.setRotation( 3 ); /* Landscape orientation, flipped */
    
    lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * screenHeight / 10 );

    /*Initialize the display*/
    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init( &disp_drv );
    /*Change the following line to your display resolution*/
    disp_drv.hor_res = screenWidth;
    disp_drv.ver_res = screenHeight;
    disp_drv.flush_cb = my_disp_flush;
    disp_drv.draw_buf = &draw_buf;
    lv_disp_drv_register( &disp_drv );

    /*Initialize the (dummy) input device driver*/
    static lv_indev_drv_t indev_drv;
    lv_indev_drv_init( &indev_drv );
    indev_drv.type = LV_INDEV_TYPE_POINTER;
    indev_drv.read_cb = my_touchpad_read;
    lv_indev_drv_register( &indev_drv );

   
    ui_init();

    Serial.println( "Setup done" );
}

void loop()
{
    lv_timer_handler(); /* let the GUI do its work */
    delay(5);
    
}

ui.c file

// This file was generated by SquareLine Studio
// SquareLine Studio version: SquareLine Studio 1.2.3
// LVGL version: 8.2.0
// Project name: SquareLine_Project

#include "ui.h"
#include "ui_helpers.h"

///////////////////// VARIABLES ////////////////////
lv_obj_t * ui_Screen1;
lv_obj_t * ui_Label2;
lv_obj_t * ui_Button2;
lv_obj_t * ui____initial_actions0;

///////////////////// TEST LVGL SETTINGS ////////////////////
#if LV_COLOR_DEPTH != 16
    #error "LV_COLOR_DEPTH should be 16bit to match SquareLine Studio's settings"
#endif
#if LV_COLOR_16_SWAP !=0
    #error "LV_COLOR_16_SWAP should be 0 to match SquareLine Studio's settings"
#endif

///////////////////// ANIMATIONS ////////////////////

///////////////////// FUNCTIONS ////////////////////

///////////////////// SCREENS ////////////////////
void ui_Screen1_screen_init(void)
{
    ui_Screen1 = lv_obj_create(NULL);
    lv_obj_clear_flag(ui_Screen1, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_obj_set_style_bg_color(ui_Screen1, lv_color_hex(0x840D0D), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Screen1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    ui_Label2 = lv_label_create(ui_Screen1);
    lv_obj_set_width(ui_Label2, LV_SIZE_CONTENT);   /// 20
    lv_obj_set_height(ui_Label2, LV_SIZE_CONTENT);    /// 20
    lv_obj_set_x(ui_Label2, -12);
    lv_obj_set_y(ui_Label2, -38);
    lv_obj_set_align(ui_Label2, LV_ALIGN_CENTER);
    lv_label_set_text(ui_Label2, "Welcome");
    lv_obj_set_style_text_font(ui_Label2, &lv_font_montserrat_14, LV_PART_MAIN | LV_STATE_DEFAULT);

    ui_Button2 = lv_btn_create(ui_Screen1);
    lv_obj_set_width(ui_Button2, 100);
    lv_obj_set_height(ui_Button2, 50);
    lv_obj_set_x(ui_Button2, -10);
    lv_obj_set_y(ui_Button2, 48);
    lv_obj_set_align(ui_Button2, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_Button2, LV_OBJ_FLAG_SCROLL_ON_FOCUS);     /// Flags
    lv_obj_clear_flag(ui_Button2, LV_OBJ_FLAG_SCROLLABLE);      /// Flags

}

void ui_init(void)
{
    lv_disp_t * dispp = lv_disp_get_default();
    lv_theme_t * theme = lv_theme_default_init(dispp, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_RED),
                                               false, LV_FONT_DEFAULT);
    lv_disp_set_theme(dispp, theme);
    ui_Screen1_screen_init();
    ui____initial_actions0 = lv_obj_create(NULL);
    lv_disp_load_scr(ui_Screen1);
}

Hi Aleks

Not 100% sure what’s going wrong here, but as Volos’ code works correctly yet code from SLS doesn’t, might suggest a display driver issue somewhere. You’ve eliminated issues with the display not working, you’ve also eliminated specific issues with the TFT_eSPI.h library when used outside of SLS so this suggests a possible mismatch somewhere with the integration of SLS / T-Display and TFT_eSPI library.

My first observation from what you have written, is that you don’t need to have copied the lvgl folder from anywhere to your code, as I believe SLS does this automatically for you - so this would be the first thing to check. Create a new file in the same manner you have already but don’t copy the lvgl folder. See if that works.

If the code still doesn’t run then we need to check you are 100% using the correct TFT_eSPI library for your device. Now assuming you are using the LilyGo T-Display board, double check you have the correct TFT_eSPI.h library installed. In the file TFT_eSPI/User_Setup_Select.h you should see this entry round about line 131…

This is the correct display driver file for the T-Display boards. Then also ensure that the file referenced in that statement i.e. Setup206_LilyGo_T_Display_S3.h is present in the TFT_eSPI/USer_Setups folder, here’s mine and is dated 2 Mar 2023 (which is the date I uploaded the file I believe NOT the creation date of the file) …

If this still doesn’t work, we will cross that bridge when we get there!! Apologies, as I mentioned in my post, I am not a pro coder, just an enthusiastic self taught wannabe lol, but as and when time permits I am more than happy to try to help.

Let me know how you get on… :+1: :+1:

You were right the line “#include <User_Setups/Setup206_LilyGo_T_Display_S3.h>” was not there and after reloading tft_espi from the Arduino library i had to remove the // and now it displays.

The issue i have now is that the display seems offset and the colours are wrong.

I had a look and tried your below post with both variations of the code but that hasn’t fixed my issue i have closed and created a new project a couple of times seems to be the same issue every time, i also tried 2 different T-displays S3 units i have but no difference.

here is a bug in one of the lines in the SLS generated UI.ino file…

Look in the ui.ino file for…

TFT_eSPI tft = TFT_eSPI( screenWidth, screenHeight ); /* TFT instance */

Remove the variables contained inside the parenthesis…

TFT_eSPI tft = TFT_eSPI(); /* TFT instance */

… and it should then all work fine

Hi Aleks

I suspect this is still down to the wrong TFT_eSPI library being installed. If the line I showed earlier was not set by default and you had to remove the // from the line to un-comment that line, I would say you still have the wrong TFT_eSPI.h library installed. Simply removing those comments will not work because there are other changes in related files within that library that are needed for the specific display being used.

So… I suggest…

Download and extract the entire contents of the LilyGo T-Display GitHub from here: GitHub - Xinyuan-LilyGO/T-Display-S3

Then in your /Arduino/Libraries folder, rename the TFT_eSPI folder to TFT_eSPI_old and then copy the TFT_eSPI folder from the downloaded copy on your machine to your /Arduino/Libraries folder. Check the line I mentioned in my reply above is automatically selected, if it is then you have the correct TFT_eSPI library installed for the T-Display board you are using.

Let me know how you get on. I am home this evening so can check for replies.

Hi John

Thank you for your help reading your reply and having watched the video on youtube Export a Project | Basics Tutorial #6 | SquareLine Studio - YouTube
i realised i was altering the wrong tft_espi folder and lvl_confi file. i was trying to use your ui.ino in the template you had uploaded. i misunderstood the following steps.