Lab 2 – GUI Fun

Need to add:

Improved wiring guide

config

better touchscreen code

ui.ino setup (on git)

The TFT_eSPI library is a widely adopted tool in the embedded systems world, especially among developers working with 32-bit microcontrollers like the ESP32. This lab will introduce you to core concepts in UI rendering, event-driven design, and SPI-based hardware control. You will also use EEZ Studio, a modern UI prototyping environment, and LVGL (Light and Versatile Graphics Library) to design interactive components.

All materials from previous lab are required!

Part 1 – Wiring

Begin by physically wiring your ESP32 to the TFT+Touch combo module. Here’s the suggested pinout for a ILI9341 and XPT2046 combination:

🏆 Challenge

Explain why MISO/MOSI/SCLK are shared between the display and touch controller. Include a short paragraph in your lab report about SPI multiplexing and its implications.

You should now have a blank white screen powered and ready.

Part 2 – UI Fun

1. Download this Github repository as a ZIP
2. Configure the IDE
   • Open Arduino IDE, and go to File > Preferences, then set the Sketchbook Location to the root of the unzipped folder (where /ui/ and /libraries/ are located).
3. Install dependencies:
   • Install LVGL 8.3.11 (Manage Libraries)
   • Install TFT_eSPI (latest version)
   • Reinstall ESP32 Board version 2.0.11
4. Download and set up EEZ Studio:
   • Download here
   • LVGL Version: 8.x
   • Export Output Path: /libraries/ui/
   • Change Build includes settings from lvgl/lvgl.h to lvgl.h

These Tutorials May Help:

Part 3 – Build & Flash

Compile the EEZ project and generate the output files.

Overwrite the ui.ino in /ui/ with the new one generated by EEZ Studio.

Open ui.ino in Arduino IDE and upload it to your ESP32.

You should now see your home screen on the display.

With this make a home screen with a button that leads to a “Hello, World!” page.

Part 4 – Touchscreen

In your ui.ino, add the following code to enable touch input. This is not plug-and-play—read it carefully and understand each function; you will figure out where to place this code.

❗ Hint

The display must be calibrated

TFT_eSPI.begin();
TFT_eSPI.setRotation(0);

uint16_t calData[5] = {uint16_t, uint16_t, uint16_t, uint16_t, uint16_t};
TFT_eSPI.setTouch(calData);

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

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

    if (!touched)
    {
        data->state = LV_INDEV_STATE_REL;
    }
    else
    {
        data->state = LV_INDEV_STATE_PR;
        data->point.x = touchX;
        data->point.y = touchY;
    }
}

Part 5 – Speeeed!

Research other methods to wire a display to an ESP32 other than single-way SPI (1 Paragraph).

Choose one method and compare & contrast it with single-way SPI (1 Paragraph).

Grading (100 Points)

• Working Display with LED Backlight (20 Points)
• Working Home Page (20 Points)
• Working Hello, World! Page (20 Points)
• Two Paragraphs on other Display Methods (20 Points)
• Uploaded Lab Report Video (20 Points)