ESP32

ESP32-S3 AMOLED Touch Display Unboxing & Setup with LVGL + SquareLine Studio

Engr. Shahzada Fahad

108

Table of Contents

ESP32-S3 AMOLED Display:

ESP32-S3 AMOLED Touch Display Unboxing & Setup with LVGL + SquareLine Studio-

Today, I am unboxing something truly exciting; the MaTouch ESP32-S3 AMOLED with Touch 1.8″ FT3168.

Let’s dive into the box and see what’s inside.

Inside the box, we get:

USB-C Type Cable – A high-quality data and power cable, ensuring fast upload speeds and stable connection with modern laptops.
The Star of the Show – the 1.8″ AMOLED Touch Display – This is no ordinary display. It comes with rich, vibrant colors, capacitive touch powered by the FT3168 controller, and of course, the ESP32-S3 microcontroller.
GPIO Connector Ribbon Cable – This flat ribbon cable breaks out the GPIOs, making it incredibly easy to connect to sensors, modules, or any custom circuits. It’s a great touch that opens up a lot of prototyping options. We will use it to connect sensors and relays to control different types of loads.

Features:

It’s packed with an ESP32-S3 (R8) chip at its core, this board features Wi-Fi and Bluetooth 5.0, making it ready for IoT applications right out of the box. The 1.8-inch high-resolution AMOLED screen (368×448) delivers rich visuals with 16.7 million colors, driven by the SH8601 IC and supporting both SPI and QSPI interfaces. It also features FT3168 touch driver IC and let me tell you the touch interface is I2C.

Power options are flexible too; you can run it using a 3.7V Li-ion battery or through USB Type-C (5V input).

It also features Reset, Boot, and User buttons, a WS2812 RGB LED, and supports both Arduino and LVGL, so developers can dive straight into GUI development with high precision.

On the output side, you get a 2×12 1.27mm header, making it easy to connect peripherals and expansion modules. All the pins are labeled, but I can’t read them with the naked eye, so I am going to use my Andonstar digital microscope. But don’t worry if you don’t have a microscope—Makerfabs has got you covered.

This board is ideal for:

Creating mini dashboards
Building wearable or portable IoT devices
Custom UI development
Smart home controllers and
Prototyping touchscreen-based applications

On the product page, you will also find details related to Wi-Fi, hardware, display, pin descriptions, and physical dimensions.

Amazon Links:

ESP32-S3 AMOLED Touch Display

Other Tools and Components:

ESP32 WiFi + Bluetooth Module (Recommended)

Arduino Nano USB C type (Recommended)

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

First of all, you need to go to the Resources section on the product’s wiki page. From there, head over to the GitHub page.

Then, download the entire Zip folder.

As you can see, I have already downloaded the folder.

Inside this folder, you will find datasheets, examples, circuit diagrams, libraries, and a lot of useful content related to the LVGL project.

Now first, go into the lib folder and copy all the libraries; After that, go to your Documents folder, open the Arduino folder, then open the libraries folder, and paste all the copied libraries.

Download Project Template:

You can download the complete project template from my Patreon page if you need it.on page

Arduino IDE Setup:

I currently have Arduino IDE version 2.3.4 installed.

Next, go to the Boards Manager and type ESP32, make sure to install version 2.0.11. Simply click on the dropdown menu, select version 2.0.11, and install it.

After that, head over to the Library Manager and type LVGL; you need to install version 8.3.11.

Now, the final step, open the lv_conf.h file and change all the fonts from 0 to 1, and also change the LV_FONT_FMT_TXT_LARGE from 0 to 1. And that’s it.

Alright, let’s turn it ON and check it out.

It’s so smooth to the touch, it feels like I am touching water. The colors are incredibly bright—there’s absolutely no distortion. I have used some displays before that slightly ruin the colors, but looking at this one, I am really impressed.

Now let’s move on to the programming part. From this point on, you need to follow each step very carefully.

For the step by step demonstration, watch the video tutorial given at the end of this article.

LVGL Template Folder:

To make things easier for you, I have created a template folder. Inside it, you will find two subfolders; one is specifically for storing the SquareLine Studio project files, and the other is for saving the UI files.

LVGL Template Code:

#include <lvgl.h>
#include "Arduino_GFX_Library.h"
#include "Arduino_DriveBus_Library.h"
#include "pin_config.h"
#include "ui.h"


static const uint16_t screenWidth  = 368;
static const uint16_t screenHeight = 448;

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

Arduino_DataBus *bus = new Arduino_ESP32QSPI(
    LCD_CS /* CS */, LCD_SCLK /* SCK */, LCD_SDIO0 /* SDIO0 */, LCD_SDIO1 /* SDIO1 */,
    LCD_SDIO2 /* SDIO2 */, LCD_SDIO3 /* SDIO3 */);

Arduino_GFX *gfx = new Arduino_SH8601(bus, LCD_RST /* RST */,
                                      0 /* rotation */, false /* IPS */, LCD_WIDTH, LCD_HEIGHT);

std::shared_ptr<Arduino_IIC_DriveBus> IIC_Bus =
    std::make_shared<Arduino_HWIIC>(IIC_SDA, IIC_SCL, &Wire);

void Arduino_IIC_Touch_Interrupt(void);

std::unique_ptr<Arduino_IIC> FT3168(new Arduino_FT3x68(IIC_Bus, FT3168_DEVICE_ADDRESS,
                                                       DRIVEBUS_DEFAULT_VALUE, TP_INT, Arduino_IIC_Touch_Interrupt));

void Arduino_IIC_Touch_Interrupt(void)
{
    FT3168->IIC_Interrupt_Flag = true;
}

#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 );

    #if (LV_COLOR_16_SWAP != 0)
    gfx->draw16bitBeRGBBitmap(area->x1, area->y1, (uint16_t *)&color_p->full, w, h);
    #else
    gfx->draw16bitRGBBitmap(area->x1, area->y1, (uint16_t *)&color_p->full, w, h);
    #endif

    lv_disp_flush_ready( disp );
}

/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
{
    int32_t touchX = FT3168->IIC_Read_Device_Value(FT3168->Arduino_IIC_Touch::Value_Information::TOUCH_COORDINATE_X);
    int32_t touchY = FT3168->IIC_Read_Device_Value(FT3168->Arduino_IIC_Touch::Value_Information::TOUCH_COORDINATE_Y);
    
    if( FT3168->IIC_Interrupt_Flag == true)
    {
      FT3168->IIC_Interrupt_Flag = false;
      data->state = LV_INDEV_STATE_PR;
      
      /*Set the coordinates*/
      data->point.x = touchX;
      data->point.y = touchY;

      USBSerial.print( "Data x " );
      USBSerial.print( touchX );

      USBSerial.print( "Data y " );
      USBSerial.println( touchY );
      char s[40];
      sprintf(s, "%d", touchX);
 
    }
    else
    {   
      data->state = LV_INDEV_STATE_REL;
    }
}

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

    pinMode(LCD_EN, OUTPUT);
    digitalWrite(LCD_EN, HIGH);

    while (FT3168->begin() == false)
    {
        USBSerial.println("FT3168 initialization fail");
        delay(2000);
    }
    USBSerial.println("FT3168 initialization successfully");

    gfx->begin();
    gfx->Display_Brightness(200);

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

    USBSerial.println( LVGL_Arduino );
    USBSerial.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

    FT3168->IIC_Write_Device_State(FT3168->Arduino_IIC_Touch::Device::TOUCH_POWER_MODE,
                                FT3168->Arduino_IIC_Touch::Device_Mode::TOUCH_POWER_MONITOR);


    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();

    USBSerial.println( "Setup done" );
}

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

#include <lvgl.h>

#include "Arduino_GFX_Library.h"

#include "Arduino_DriveBus_Library.h"

#include "pin_config.h"

#include "ui.h"

static const uint16_t screenWidth = 368;

static const uint16_t screenHeight = 448;

static lv_disp_draw_buf_t draw_buf;

static lv_color_t buf[ screenWidth * screenHeight / 10 ];

Arduino_DataBus *bus = new Arduino_ESP32QSPI(

LCD_CS /* CS */, LCD_SCLK /* SCK */, LCD_SDIO0 /* SDIO0 */, LCD_SDIO1 /* SDIO1 */,

LCD_SDIO2 /* SDIO2 */, LCD_SDIO3 /* SDIO3 */);

Arduino_GFX *gfx = new Arduino_SH8601(bus, LCD_RST /* RST */,

0 /* rotation */, false /* IPS */, LCD_WIDTH, LCD_HEIGHT);

std::shared_ptr<Arduino_IIC_DriveBus> IIC_Bus =

std::make_shared<Arduino_HWIIC>(IIC_SDA, IIC_SCL, &Wire);

void Arduino_IIC_Touch_Interrupt(void);

std::unique_ptr<Arduino_IIC> FT3168(new Arduino_FT3x68(IIC_Bus, FT3168_DEVICE_ADDRESS,

DRIVEBUS_DEFAULT_VALUE, TP_INT, Arduino_IIC_Touch_Interrupt));

void Arduino_IIC_Touch_Interrupt(void)

{

FT3168->IIC_Interrupt_Flag = true;

}

#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 );

#if (LV_COLOR_16_SWAP != 0)

gfx->draw16bitBeRGBBitmap(area->x1, area->y1, (uint16_t *)&color_p->full, w, h);

#else

gfx->draw16bitRGBBitmap(area->x1, area->y1, (uint16_t *)&color_p->full, w, h);

#endif

lv_disp_flush_ready( disp );

}

/*Read the touchpad*/

void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )

{

int32_t touchX = FT3168->IIC_Read_Device_Value(FT3168->Arduino_IIC_Touch::Value_Information::TOUCH_COORDINATE_X);

int32_t touchY = FT3168->IIC_Read_Device_Value(FT3168->Arduino_IIC_Touch::Value_Information::TOUCH_COORDINATE_Y);

if( FT3168->IIC_Interrupt_Flag == true)

{

FT3168->IIC_Interrupt_Flag = false;

data->state = LV_INDEV_STATE_PR;

/*Set the coordinates*/

data->point.x = touchX;

data->point.y = touchY;

USBSerial.print( "Data x " );

USBSerial.print( touchX );

USBSerial.print( "Data y " );

USBSerial.println( touchY );

char s[40];

sprintf(s, "%d", touchX);

}

else

{

data->state = LV_INDEV_STATE_REL;

}

void setup()

{

USBSerial.begin( 115200 ); /* prepare for possible serial debug */

pinMode(LCD_EN, OUTPUT);

digitalWrite(LCD_EN, HIGH);

while (FT3168->begin() == false)

{

USBSerial.println("FT3168 initialization fail");

delay(2000);

}

USBSerial.println("FT3168 initialization successfully");

gfx->begin();

gfx->Display_Brightness(200);

String LVGL_Arduino = "Hello Arduino! ";

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

USBSerial.println( LVGL_Arduino );

USBSerial.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

FT3168->IIC_Write_Device_State(FT3168->Arduino_IIC_Touch::Device::TOUCH_POWER_MODE,

FT3168->Arduino_IIC_Touch::Device_Mode::TOUCH_POWER_MONITOR);

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();

USBSerial.println( "Setup done" );

}

void loop()

{

lv_timer_handler(); /* let the GUI do its work */

delay(5);

}

This template code serves as the foundation for this display using the ESP32-S3 with the SH8601 display and FT3168 touch controller. It’s carefully structured to include all essential configurations, so you don’t need to repeat setup steps in every new project. From initializing the LVGL graphics library, setting up the display and touch drivers, and configuring SPI/QSPI communication; everything is handled here. It also includes the logic to read touch inputs and flush the display buffer. With this template, you get a fully functional and responsive GUI-ready environment. All you need to do for new projects is focus on building your interface and logic; if you need the complete template folder, it’s available on my Patreon page along with all the other resources.

Now, let’s create a folder for our first project and name it “My First Project.”. Next, copy the lvgl_template folder, and paste it inside the newly created project folder.

Once that’s done, go ahead and open the Arduino lvgl_template.ino file.

After that, launch SquareLine Studio and we will continue from there.

First, click on the Create button, then navigate to the Makerfabs tab, Scroll down, and select “MTEA18FT – MaTouch 1.9-inch AMOLED 368×448 IPS TFT with Touch – Arduino IDE” On the right side, under Project Settings, you will notice that all the parameters are already pre-configured; you don’t need to change anything. However, if you wish, you can modify the theme. For now, we will keep it set to Light. You can also enable Multilanguage support, but since we don’t need it at the moment, we will leave it at its default setting.

Before clicking the Create button, make sure to select a folder where your SquareLine Studio project files will be saved. If you recall, we already created a folder for this purpose. so let’s go ahead and select that folder.

Now, go ahead and click the CREATE button.

Now, go to the File menu and click on Project Settings.

Under the FILE EXPORT settings, select the folders for the SquareLine Studio project files and the UI files.

For the LVGL include path, simply type lvgl.h.

Scroll down and make sure to check the option “Flat export (exports all files to one folder).”

Finally, click the Apply Changes button.

By default, you will see Screen1 in the workspace.

On the left side, you will find four categories: Basic Widgets, Controller Widgets, Visualizer Widgets, and SCREEN.

If you click on the screen, it will add a second screen for you. Click again, and it will add a third screen, and so on.

For now, let’s keep it simple and continue with a single screen—since our first goal is to get the display up and running.

So let’s start by adding a simple Label. As you can see, the text has appeared on Screen1.

While the text is selected, you can adjust its various parameters from the Inspector tab on the right side. I don’t think I need to explain all of these. But one thing I definitely want to highlight is the importance of naming your widgets properly; this will help you easily identify and access them on the Arduino side.

Let’s say you have used multiple screens and added over 20 labels like label1, label2, all the way to label20. In that case, it can become quite confusing to remember which label was used for what purpose. That’s why I highly recommend assigning meaningful names to each widget. So, I named it lblelectroniclinic.

Now, let’s change the text to electronic clinic. On the right side, you can see a Box where text is written, simply go ahead; delete that text and typing you want to display. In my case, I am going to type Electronic Clinic.

Finally, we can start working on the text styling. At this point, you have complete freedom to experiment with different fonts, sizes, alignments, colors, and other styling options. The more time you spend here exploring these settings, the better understanding you’ll develop of how styling works in SquareLine Studio. This is where you can get creative—design your labels to match your project’s theme or make important information stand out visually. Take your time and play around with the styling parameters to see what works best for your design.

Our text is now ready.

Next, you need to save the project, After this, go to the Export menu and click on Export UI Files.

Now, navigate to the UI Files folder, copy all the exported files, and paste them into the same folder where your main Arduino .ino file is located.

Now, if I open the Arduino code “lvgl_template” you will see that all the .c and .h files are automatically loaded.

If I open the ui.c file, you will notice that Screen1 and lblelectroniclinic are already present.

And if we navigate to ui_screen1.c, you can see how much code SquareLine Studio has automatically generated just for the text styling.

If we were to do all of this manually, it could easily take hours.

At this point, we don’t need to make any changes to the main code; it’s completely ready for the upload.

ESP32-S3 AMOLED Display Uploading the Code:

To upload the code, go to the Tools menu, then navigate to Board > ESP32, and select ESP32S3 Dev Module.

Again go to the Tools Menu and select the communication port.

Again go to the Tools Menu then go to the Flash Size and select “16MB(128MB)”.

Then go to the Partition Scheme and select “16M Flash (3MB APP/9.9MB FATFS)”

Then go to the PSRAM and select OPI PSRAM.

And then finally, click on the upload button.

You can see how easily we have displayed the text on the screen. Once your display is working, the rest of the work becomes quite easy.

There are two more methods of starting a new SquareLine Studio project. I have explained these methods in the video.

ESP32-S3 AMOLED Display Troubleshooting:

At the end, let’s also talk a little about troubleshooting. If the code doesn’t upload, hold down the Boot button and then connect the USB cable; keep the Boot button pressed and start uploading the code. Don’t release the button until the code is fully uploaded. Once the upload is complete, release the button, then disconnect and reconnect the USB cable.

So, that’s all for now.

Support me on Patreon for more videos and articles.