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

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.

No problem. Glad you’ve now got it sorted.

Thanks for the work on this!

I have an issue. I’ve replaced the TFT_eSPI and lv_conf.h files with those from the LilyGo repository, selected the project home directory in the Arduino IDE, but I’m getting compile errors:
SquareLine_Project\ui/ui.c:72: undefined reference to `ui_Screen2_screen_init’

It actually errors on ui_Screen1_screen init, too. I’ve set the SLS project to use .cpp for the call functions export, but I get the same error if I choose .c.

It compiles and works with a single screen exported from SLS, but not with 2.

Hi.

Iam trying do get this work with the TTGO T-Display Touch Version. Did it work automatically with the Touch driver?
My actual workaround is to read the touch coordinates and then activate for example the Switch Object when it is in the center of the coordinates.

Hi, did you ever get anything back from LilyGo on this one? I have several boards I would like to configure but ideally the Lilygo T-HMI.

Thanks!

Hi,
I followed your instructions and installed the plug-in for T-Display touch from Lilygo.
I have difficulty with the compilation
I am getting the following error message:
c:/users/ariel/appdata/local/arduino15/packages/esp32/tools/xtensa-esp32s3-elf-gcc/esp-2021r2-patch5-8.4.0/bin/…/lib/gcc/xtensa-esp32s3-elf/8.4.0/…/…/…/…/xtensa-esp32s3-elf/bin/ld.exe: sketch\ui.c.o:(.literal.ui_init+0x0): undefined reference to LV_EVENT_GET_COMP_CHILD' c:/users/ariel/appdata/local/arduino15/packages/esp32/tools/xtensa-esp32s3-elf-gcc/esp-2021r2-patch5-8.4.0/bin/../lib/gcc/xtensa-esp32s3-elf/8.4.0/../../../../xtensa-esp32s3-elf/bin/ld.exe: sketch\ui.c.o:(.literal.ui_init+0x10): undefined reference to ui_Screen1_screen_init’
c:/users/ariel/appdata/local/arduino15/packages/esp32/tools/xtensa-esp32s3-elf-gcc/esp-2021r2-patch5-8.4.0/bin/…/lib/gcc/xtensa-esp32s3-elf/8.4.0/…/…/…/…/xtensa-esp32s3-elf/bin/ld.exe: sketch\ui.c.o: in function ui_init': C:\Users\ariel\Desktop\test1\SquareLine_Project\ui/ui.c:36: undefined reference to ui_Screen1_screen_init’
collect2.exe: error: ld returned 1 exit status

exit status 1

Compilation error: exit status 1

Can you help me understand where is the problem?

thanks.

What worked for me is to change the CMakeLists.txt file in the main directory

idf_component_register(SRCS
main.c
…/ui/ui.c
…/ui/ui_helpers.c
…/ui/screens/ui_Screen1.c)

kmacriver, thanks!
I am working with Arduino IDE. I followed your suggestion and all looks fine with the CMakeList file. I will try fiddling with it some more but so far it’s not working.

This might be even better.

idf_component_register( SRC_DIRS
“.”
“${CMAKE_SOURCE_DIR}/ui”
“${CMAKE_SOURCE_DIR}/ui/screens”
“${CMAKE_SOURCE_DIR}/ui/components”
“${CMAKE_SOURCE_DIR}/ui/images”
“${CMAKE_SOURCE_DIR}/ui/fonts”
INCLUDE_DIRS
“.”
“${CMAKE_SOURCE_DIR}/ui”
“${CMAKE_SOURCE_DIR}/ui/screens”
“${CMAKE_SOURCE_DIR}/ui/components”
“${CMAKE_SOURCE_DIR}/ui/images”
“${CMAKE_SOURCE_DIR}/ui/fonts”
)

Many thanks :slight_smile:

yes, definitely!

Good job, thanks for template. But i spent more time to understood why my images from ui loose colors after compilation. I use VS Code + PlatformIO to compile project for t3-display-s3 board. And as i found is very important right value for LV_COLOR_16_SWAP. It must to be = 1. Parameter “color_depth” in template must to be = 16 sw. In this case SquarLine Studio will generate right c code for images arrays