Lvgl
Embedded graphics library to create beautiful UIs for any MCU, MPU and display type.
Install / Use
/learn @lvgl/LvglREADME
Table of Contents
<p> <a href="#ledger-overview">Overview</a> <br/> <a href="#-features">Features</a> <br/> <a href="#%EF%B8%8F-platform-support">Platform Support</a> <br/> <a href="#-lvgl-pro-editor">LVGL Pro Editor</a> <br/> <a href="#-commercial-services">Commercial Services</a> <br/> <a href="#%E2%80%8D-integrating-lvgl">Integrating LVGL</a> <br/> <a href="#-examples">Examples</a> <br/> <a href="#-contributing">Contributing</a> </p> <br/>📒 Overview
LVGL is a free and open-source UI library that enables you to create graphical user interfaces for any MCUs and MPUs from any vendor on any platform.
Requirements: LVGL has no external dependencies, which makes it easy to compile for any modern target, from small MCUs to multi-core Linux-based MPUs with 3D support. For a simple UI, you need only ~100kB RAM, ~200–300kB flash, and a buffer size of 1/10 of the screen for rendering.
To get started, pick a ready-to-use VSCode, Eclipse, or any other project and try out LVGL on your PC. The LVGL UI code is fully platform-independent, so you can use the same UI code on embedded targets too.
LVGL Pro is a complete toolkit to help you build, test, share, and ship UIs faster. It comes with an XML Editor where you can quickly create and test reusable components, export C code, or load the XMLs at runtime. Learn more here.
💡 Features
Free and Portable
- A fully portable C (C++ compatible) library with no external dependencies.
- Can be compiled for any MCU or MPU, with any (RT)OS. Make, CMake, and simple globbing are all supported.
- Supports monochrome, ePaper, OLED, or TFT displays, or even monitors. Displays
- Distributed under the MIT license, so you can easily use it in commercial projects too.
- Needs only 32kB RAM and 128kB Flash, a frame buffer, and at least a 1/10 screen-sized buffer for rendering.
- OS, external memory, and GPU are supported but not required.
Widgets, Styles, Layouts, and More
- 30+ built-in Widgets: Button, Label, Slider, Chart, Keyboard, Meter, Arc, Table, and many more.
- Flexible Style system with ~100 style properties to customize any part of the widgets in any state.
- Flexbox and Grid-like layout engines to automatically size and position the widgets responsively.
- Text is rendered with UTF-8 encoding, supporting CJK, Thai, Hindi, Arabic, and Persian writing systems.
- Data bindings to easily connect the UI with the application.
- Rendering engine supports animations, anti-aliasing, opacity, smooth scrolling, shadows, image transformation, etc.
- Powerful 3D rendering engine to show glTF models with OpenGL.
- Supports Mouse, Touchpad, Keypad, Keyboard, External buttons, Encoder Input devices.
- Multiple display support.
📦️ Platform Support
LVGL has no external dependencies, so it can be easily compiled for any devices and it's also available in many package managers and RTOSes:
- Arduino library
- PlatformIO package
- Zephyr library
- ESP-IDF(ESP32) component
- NXP MCUXpresso component
- NuttX library
- RT-Thread RTOS
- CMSIS-Pack
- RIOT OS package
🚀 LVGL Pro Editor
LVGL Pro is a complete toolkit to build, test, share, and ship embedded UIs efficiently.
It consists of four tightly related tools:
- XML Editor: The heart of LVGL Pro. A desktop app to build components and screens in XML, manage data bindings, translations, animations, tests, and more. Learn more about the XML Format and the Editor.
- Online Viewer: Run the Editor in your browser, open GitHub projects, and share easily without setting up a developer environment. Visit https://viewer.lvgl.io.
- CLI Tool: Generate C code and run tests in CI/CD. See the details here.
- Figma Plugin: Sync and extract styles directly from Figma. See how it works here.
Together, these tools let developers build UIs efficiently, test them reliably, and collaborate with team members and customers.
Learn more at https://pro.lvgl.io
🤝 Commercial Services
LVGL LLC provides several types of commercial services to help you with UI development. With 15+ years of experience in the user interface and graphics industry, we can help bring your UI to the next level.
- Graphics design: Our in-house graphic designers are experts in creating beautiful modern designs that fit your product and the capabilities of your hardware.
- UI implementation: We can implement your UI based on the design you or we have created. You can be sure that we will make the most of your hardware and LVGL. If a feature or widget is missing from LVGL, don't worry, we will implement it for you.
- Consulting and Support: We also offer consulting to help you avoid costly and time-consuming mistakes during UI development.
- Board certification: For companies offering development boards or production-ready kits, we provide board certification to show how the board can run LVGL.
Check out our Demos as references. For more information, take a look at the Services page.
Contact us and tell us how we can help.
🧑💻 Integrating LVGL
Integrating LVGL is very simple. Just drop it into any project and compile it as you would compile other files.
To configure LVGL, copy lv_conf_template.h as lv_conf.h, enable the first #if 0, and adjust the configs as needed.
(The default config is usually fine.) If available, LVGL can also be used with Kconfig.
Once in the project, you can initialize LVGL and create display and input devices as follows:
#include "lvgl/lvgl.h" /*Define LV_LVGL_H_INCLUDE_SIMPLE to include as "lvgl.h"*/
#define TFT_HOR_RES 320
#define TFT_VER_RES 240
static uint32_t my_tick_cb(void)
{
return my_get_millisec();
}
static void my_flush_cb(lv_display_t * disp, const lv_area_t * area, uint8_t * px_map)
{
/*Write px_map to the area->x1, area->x2, area->y1, area->y2 area of the
*frame buffer or external display controller. */
/* signal LVGL that we're done */
lv_display_flush_ready(disp);
}
static void my_touch_read_cb(lv_indev_t * indev, lv_indev_data_t * data)
{
if(my_touch_is_pressed()) {
data->point.x = touchpad_x;
data->point.y = touchpad_y;
data->state = LV_INDEV_STATE_PRESSED;
} else {
data->state = LV_INDEV_STATE_RELEASED;
}
}
void main(void)
{
my_hardware_init();
/*Initialize LVGL*/
lv_init();
/*Set millisecond-based tick source for LVGL so that it can track time.*/
lv_tick_set_cb(my_tick_cb);
/*Create a display where screens and widgets can be added*/
lv_display_t * display = lv_display_create(TFT_HOR_RES, TFT_VER_RES);
/*Add rendering buffers to the screen.
*Here adding a smaller partial buffer assuming 16-bit (RGB565 color format)*/
static uint8_t buf[TFT_HOR_RES * TFT_VER_RES / 10 * 2]; /* x2 because of 16-bit color depth */
lv_display_set_buffers(display, buf, NULL, sizeof(buf), LV_DISPLAY_RENDER_MODE_PARTIAL);
/*Add a callback that can flush the content from `buf` when it has been rendered*/
lv_display_set_flush_cb(display, my_flush_cb);
/*Create an input device for touch handling*/
lv_indev_t * indev = lv_indev_create();
lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
lv_indev_set_read_cb(indev, my_touch_read_cb);
/*The drivers are in place; now we can create the UI*/
lv_obj_t * label = lv_label_create(lv_screen_
