[ESP32][Arduino] WT32SC01 LVGL8 Squareline Project Template

Arduino 22 Th07 2024

About ArduinoGFX Library

Arduino_GFX is a powerful graphics library for Arduino-compatible microcontrollers, especially designed for use with various display types. It provides a unified interface for different display controllers and is particularly useful for projects involving graphical user interfaces on embedded systems.

Author: Moon On Our Nation
Maintainer: Moon On Our Nation

Key features of Arduino_GFX include:

Support for a wide range of display controllers
Hardware-accelerated drawing functions
Compatibility with various microcontrollers, including ESP32
Efficient memory usage
Easy integration with other libraries like LVGL

Arduino_GFX is supporting various displays with various data bus interfaces. This library start rewrite from Adafruit_GFX, LovyanGFX, TFT_eSPI, Ucglib, and more...

In this code, Arduino_GFX is used to manage the display hardware. Here are the relevant declarations and their explanations:

1. Including the library:

#include <Arduino_GFX_Library.h>

This line includes the Arduino_GFX library, making its functions and classes available to the program.

2. Display object declaration:

Arduino_GFX *gfx;

This declares a pointer to an Arduino_GFX object, which will be used to control the display throughout the program.

3. Display initialization:

#if defined(DISPLAY_DEV_KIT)
    Arduino_GFX *gfx = create_default_Arduino_GFX();
#else
    // Custom display configuration
    Arduino_DataBus *bus = new Arduino_ESP32SPI(
        21 /* DC */, 
        15 /* CS */, 
        14 /* SCK */, 
        13 /* MOSI */, 
        GFX_NOT_DEFINED /* MISO */, 
        HSPI /* spi_num */
    );
    Arduino_GFX *gfx = new Arduino_ST7796(
        bus, 
        22 /* RST */, 
        3 /* rotation */, 
        false /* IPS */
    );
#endif

This code block initializes the display. It either uses a default configuration if DISPLAY_DEV_KIT is defined, or sets up a custom configuration for an ST7796 display controller using the ESP32's SPI interface.

4. Display functions:

The gfx object is used throughout the code to interact with the display. For example:

gfx->begin()
gfx->fillScreen(BLACK)
gfx->draw16bitRGBBitmap(...)

These functions initialize the display, fill the screen with a color, and draw bitmaps, respectively.

5. Backlight control:

#define GFX_BL 23 // Default backlight pin

This defines the pin used for controlling the display's backlight.

6. Screen dimensions:

static const uint32_t SCREEN_WIDTH = 480;
static const uint32_t SCREEN_HEIGHT = 320;

These constants define the dimensions of the display, which are used in various parts of the program for proper rendering and memory allocation.
The Arduino_GFX library simplifies the process of working with displays on microcontrollers, providing a consistent interface regardless of the specific display hardware being used. This abstraction allows developers to focus on creating the GUI rather than dealing with low-level display driver details.

Other explanation

Below is the explanation of the program's operation in detail, citing the relevant code sections. Check the related code on Github repo at the end of the post.

Initialization:
The program starts by initializing serial communication for debugging:

void initSerial() {
    Serial.begin(115200);
    Serial.setDebugOutput(true);
    // ...
}

It then initializes the display hardware and touch screen:

void initDisplay() {
    if (!gfx->begin()) {
        Serial.println("gfx->begin() failed!");
        return;
    }
    gfx->fillScreen(BLACK);
    // ...
    touch_init(gfx->width(), gfx->height(), gfx->getRotation());
}

Setup:
In the setup() function, the program calls the initialization functions:

void setup() {
    initSerial();
    initDisplay();
    initLVGL();
    
    Serial.println("Setup done");
}

Main Loop:
The loop() function continuously updates the GUI and display:

void loop() {
    updateLVGL();
    updateDisplay();
    
    delay(5);
}

Display Management:
The program uses two modes for display management, controlled by the DIRECT_MODE flag:

#ifdef DIRECT_MODE
  static const bool DIRECT_MODE = true;
#else
  static const bool DIRECT_MODE = false;
#endif

Touch Input Handling:
Touch input is handled by the my_touchpad_read() function:

void my_touchpad_read(lv_indev_drv_t *indev_drv, lv_indev_data_t *data) {
    if (touch_has_signal()) {
        if (touch_touched()) {
            data->state = LV_INDEV_STATE_PR;
            data->point.x = touch_last_x;
            data->point.y = touch_last_y;
        } else if (touch_released()) {
            data->state = LV_INDEV_STATE_REL;
        }
    } else {
        data->state = LV_INDEV_STATE_REL;
    }
}

Display Flushing:
The my_disp_flush() function is responsible for drawing content to the screen:

void my_disp_flush(lv_disp_drv_t *disp_drv, const lv_area_t *area, lv_color_t *color_p) {
#ifndef DIRECT_MODE
    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
#endif

    lv_disp_flush_ready(disp_drv);
}

LVGL Integration:
LVGL is initialized and configured in the initLVGL() function:

void initLVGL() {
    lv_init();
    
    setupLVGLBuffer();
    setupLVGLDriver();
    createSimpleLabel();
    
    ui_init();
}

Memory Management:
Careful memory allocation is used, especially for the display buffer:

void setupLVGLBuffer() {
    uint32_t bufSize = DIRECT_MODE ? (SCREEN_WIDTH * SCREEN_HEIGHT) : (SCREEN_WIDTH * 40);
    disp_draw_buf = (lv_color_t *)heap_caps_malloc(bufSize * 2, MALLOC_CAP_INTERNAL | MALLOC_CAP_8BIT);
    if (!disp_draw_buf) {
        disp_draw_buf = (lv_color_t *)heap_caps_malloc(bufSize * 2, MALLOC_CAP_8BIT);
    }
    // ...
}

Error Handling:
Basic error checking is included, such as verifying display initialization:

void initDisplay() {
    if (!gfx->begin()) {
        Serial.println("gfx->begin() failed!");
        return;
    }
    // ...
}

Flexibility:
The code allows for different display configurations:

#if defined(DISPLAY_DEV_KIT)
    Arduino_GFX *gfx = create_default_Arduino_GFX();
#else
    // Custom display configuration
    Arduino_DataBus *bus = new Arduino_ESP32SPI(/* ... */);
    Arduino_GFX *gfx = new Arduino_ST7796(/* ... */);
#endif

Performance Optimization:
The use of direct mode and efficient bitmap drawing functions optimizes performance:

void updateDisplay() {
#ifdef DIRECT_MODE
    #if defined(CANVAS) || defined(RGB_PANEL)
        gfx->flush();
    #else
        drawBitmap();
    #endif
#else
    #ifdef CANVAS
        gfx->flush();
    #endif
#endif
}

This program creates a comprehensive framework for GUI applications on ESP32 devices with touch screens, handling display management, touch input, and GUI rendering efficiently.

Hope this template will help you quickly start a GUI Project on WT32SC01 Board with LVGL 8.