Light and Versatile Graphics Library (LVGL) with Arduino – Complete Beginner’s Guide
Learn how to use LVGL with Arduino to build fast, modern GUIs for TFT displays. Step-by-step setup, examples, wiring, and performance tips included.
Introduction
If you want to build beautiful graphical user interfaces (GUI) on small embedded devices, LVGL (Light and Versatile Graphics Library) is one of the best open-source solutions available today. It works on many platforms such as STM32, ESP32, and Arduino, making it extremely popular for hobbyists and professionals developing displays, smart panels, dashboards, and IoT devices.
In this guide, we’ll explore what LVGL is, why it’s useful, and how you can easily get started using LVGL with Arduino.
⭐ What is LVGL?
LVGL (Light and Versatile Graphics Library) is a powerful, open-source graphics library designed for embedded systems with limited RAM and low-power CPUs. Despite being optimized for microcontrollers, LVGL delivers modern UI features similar to mobile applications.
⭐ Key Features of LVGL
- ✔️ Lightweight – Runs on devices with as little as 16 KB RAM.
- ✔️ Hardware Independent – Works on Arduino, STM32, ESP32, NXP, and more.
- ✔️ Rich UI Widgets – Buttons, sliders, charts, images, keyboards, tabs, switches.
- ✔️ Smooth Animations – Highly optimized to run smoothly on small CPUs.
- ✔️ Touch Support – Works with resistive and capacitive touchscreens.
- ✔️ Open Source (MIT License) – Free for commercial and personal use.
⭐ Why Use LVGL with Arduino?
Arduino is simple, accessible, and widely used. However, building advanced GUIs on Arduino used to be difficult. LVGL solves this problem by providing:
- A modern, smartphone-like interface
- Works with many TFT LCD modules (ILI9341, ST7789, etc.)
- Compatible with Arduino boards like: Arduino UNO R4,Arduino Mega,Arduino Due..
Pairing LVGL with Arduino allows you to create user interfaces that look professional, even on budget hardware.
⭐ Requirements:
To run LVGL on Arduino, you will typically need:
- Arduino Board (ESP32 recommended for speed)
- TFT Display Module, such as:
- ILI9341 (3.2” / 2.8” TFT)
- ST7789 (1.3” / 1.54” TFT)
- TFT_eSPI supported displays
- (Optional) Touch Controller
- XPT2046 (Resistive)
- GT911 (Capacitive)
⭐ Installing LVGL in Arduino IDE
1Install LVGL Library
Open Arduino IDE
Type LVGL , will see below screen.
OR
DownloadLVGL can be installed via the Arduino IDE Library Manager or as a .ZIP library. It will also install lv_exmaples which contains a lot of examples and demos to try LVGL.
2Install TFT Display Library
Arduino boards, the recommended display library is:
- TFT_eSPI (for ESP32)
- Or vendor-specific libraries for ILI9341, ST7789, etc.
Configure the display pins in the User_Setup.h file.
Configure LVGL :
Confugure File
LVGL has its own configuration file called lv_conf.h. When LVGL is installed the followings needs to be done to configure it:
- Go to directory of the installed Arduino libraries
- Go to lvgl and copy lv_conf_template.h as lv_conf.h into the Arduino Libraries directory next to the lvgl library folder.
- Open lv_conf.h and change the first #if 0 to #if 1
- Set the resolution of your display in LV_HOR_RES_MAX and LV_VER_RES_MAX
- Set the color depth of you display in LV_COLOR_DEPTH
- Set LV_TICK_CUSTOM 1
Set up Graphics drivers :
LVGL stores drawing data into a buffer before flushing it to the screen.
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[320 * 10]; // Small buffer (10 lines)
Initialize the buffer:
lv_disp_draw_buf_init(&draw_buf, buf, NULL, 320 * 10);
This function “flushes” LVGL’s buffer into the display driver.This is the key part of integrating LVGL.
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); // VERY IMPORTANT
}
Tell LVGL the screen resolution and attach your flush function.
static lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.hor_res = 320;
disp_drv.ver_res = 240;
disp_drv.flush_cb = my_disp_flush;
disp_drv.draw_buf = &draw_buf;
lv_disp_drv_register(&disp_drv);
Debugging and logging :
In case of trouble there are debug information inside LVGL. In the LVGL_Arduino.ino example there is my_print method, which allow to send this debug information to the serial interface. To enable this feature you have to edit lv_conf.h file and enable logging in section log settings:
/*Log settings*/
#define USE_LV_LOG 1 /*Enable/disable the log module*/
#if LV_USE_LOG
/* How important log should be added:
* LV_LOG_LEVEL_TRACE A lot of logs to give detailed information
* LV_LOG_LEVEL_INFO Log important events
* LV_LOG_LEVEL_WARN Log if something unwanted happened but didn't cause a problem
* LV_LOG_LEVEL_ERROR Only critical issue, when the system may fail
* LV_LOG_LEVEL_NONE Do not log anything
*/
# define LV_LOG_LEVEL LV_LOG_LEVEL_WARN
After enabling log module and setting LV_LOG_LEVEL accordingly the output log is sent to the Serial port @ 115200 Baud rate.
⭐ Basic Example – Create a Simple Button
Once LVGL is installed, try this sample code to display a button:
#include "lvgl.h"
#include "TFT_eSPI.h"
TFT_eSPI tft = TFT_eSPI();
static void btn_event_cb(lv_event_t * e)
{
LV_LOG_USER("Button Pressed!");
}
void setup() {
lv_init();
tft.begin();
tft.setRotation(1);
lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[320 * 10];
lv_disp_draw_buf_init(&draw_buf, buf, NULL, 320 * 10);
static lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.flush_cb = my_disp_flush;
disp_drv.draw_buf = &draw_buf;
disp_drv.hor_res = 320;
disp_drv.ver_res = 240;
lv_disp_drv_register(&disp_drv);
lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_set_size(btn, 120, 50);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);
lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, "Click Me!");
lv_obj_center(label);
}
void loop() {
lv_timer_handler();
delay(5);
}
Conclusion
LVGL brings professional-grade GUI capability to Arduino, making it ideal for hobby projects, prototypes, and commercial embedded systems. Its small footprint and powerful features allow you to build elegant user interfaces—even on low-cost microcontrollers.
If you're working with displays on Arduino, LVGL is one of the best libraries you can explore.
Happy Coding!
0 comments:
Post a Comment