Build Professional GUIs on ESP32 CYD with LVGL: Complete Setup & Project Guide

/*  Rui Santos & Sara Santos - Random Nerd Tutorials
    Complete LVGL example for ESP32 Cheap Yellow Display (CYD)
    Hardware: ESP32-2432S028R
    Libraries: LVGL 9.2, TFT_eSPI, XPT2046_Touchscreen
*/

#include <lvgl.h>
#include <TFT_eSPI.h>
#include <XPT2046_Touchscreen.h>

// Touchscreen pin definitions for CYD
#define XPT2046_IRQ 36
#define XPT2046_MOSI 32
#define XPT2046_MISO 39
#define XPT2046_CLK 25
#define XPT2046_CS 33

SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);

#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 320

int touchX, touchY, touchZ;

// LVGL draw buffer
#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT / 10 * (LV_COLOR_DEPTH / 8))
uint32_t draw_buf[DRAW_BUF_SIZE / 4];

// LVGL logging
void log_print(lv_log_level_t level, const char * buf) {
  LV_UNUSED(level);
  Serial.println(buf);
  Serial.flush();
}

// Read touchscreen input for LVGL
void touchscreen_read(lv_indev_t * indev, lv_indev_data_t * data) {
  if(touchscreen.tirqTouched() && touchscreen.touched()) {
    TS_Point p = touchscreen.getPoint();
    touchX = map(p.x, 200, 3700, 1, SCREEN_WIDTH);
    touchY = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);
    touchZ = p.z;

    data->state = LV_INDEV_STATE_PRESSED;
    data->point.x = touchX;
    data->point.y = touchY;
  } else {
    data->state = LV_INDEV_STATE_RELEASED;
  }
}

// Button 1 event handler
static void event_handler_btn1(lv_event_t * e) {
  static int count = 0;
  if(lv_event_get_code(e) == LV_EVENT_CLICKED) {
    count++;
    LV_LOG_USER("Button 1 clicked %d times", count);
  }
}

// Button 2 (toggle) event handler
static void event_handler_btn2(lv_event_t * e) {
  lv_obj_t * btn = (lv_obj_t*) lv_event_get_target(e);
  if(lv_event_get_code(e) == LV_EVENT_VALUE_CHANGED) {
    LV_LOG_USER("Toggle: %s", lv_obj_has_state(btn, LV_STATE_CHECKED) ? "ON" : "OFF");
  }
}

// Slider event handler
static lv_obj_t * slider_label;
static void slider_event_callback(lv_event_t * e) {
  lv_obj_t * slider = (lv_obj_t*) lv_event_get_target(e);
  char buf[8];
  lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
  lv_label_set_text(slider_label, buf);
  lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
  LV_LOG_USER("Slider value: %d%%", (int)lv_slider_get_value(slider));
}

// Create the main GUI
void lv_create_main_gui(void) {
  // Title label
  lv_obj_t * title = lv_label_create(lv_scr_act());
  lv_label_set_text(title, "ESP32 CYD + LVGL");
  lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 10);

  // Button 1 - Standard button
  lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
  lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -50);
  lv_obj_add_event_cb(btn1, event_handler_btn1, LV_EVENT_ALL, NULL);

  lv_obj_t * btn1_label = lv_label_create(btn1);
  lv_label_set_text(btn1_label, "Click Me");

  // Button 2 - Toggle button
  lv_obj_t * btn2 = lv_btn_create(lv_scr_act());
  lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 10);
  lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
  lv_obj_add_event_cb(btn2, event_handler_btn2, LV_EVENT_VALUE_CHANGED, NULL);

  lv_obj_t * btn2_label = lv_label_create(btn2);
  lv_label_set_text(btn2_label, "Toggle");

  // Slider with value display
  lv_obj_t * slider = lv_slider_create(lv_scr_act());
  lv_obj_align(slider, LV_ALIGN_CENTER, 0, 70);
  lv_obj_set_width(slider, 150);
  lv_obj_add_event_cb(slider, slider_event_callback, LV_EVENT_VALUE_CHANGED, NULL);

  slider_label = lv_label_create(lv_scr_act());
  lv_label_set_text(slider_label, "0%");
  lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

void setup() {
  Serial.begin(115200);
  Serial.println("Starting LVGL on ESP32 CYD...");

  // Initialize touchscreen
  touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
  touchscreen.begin(touchscreenSPI);
  touchscreen.setRotation(1);  // Landscape orientation

  // Initialize LVGL
  lv_init();
  lv_log_register_print_cb(log_print);

  // Initialize display
  lv_display_t * disp;
  disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));
  lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);

  // Initialize touch input device
  lv_indev_t * indev = lv_indev_create();
  lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
  lv_indev_set_read_cb(indev, touchscreen_read);

  // Create GUI
  lv_create_main_gui();

  Serial.println("Setup complete!");
}

void loop() {
  lv_task_handler();  // Let LVGL handle GUI tasks
  lv_tick_inc(5);     // Tell LVGL time passed
  delay(5);           // Small delay
}