• Stars
    star
    16,168
  • Rank 1,768 (Top 0.04 %)
  • Language
    C
  • License
    MIT License
  • Created over 8 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Embedded graphics library to create beautiful UIs for any MCU, MPU and display type.

English | 中文 | Português do Brasil | 日本語


 

 

Light and Versatile Graphics Library

 

   

Website | Docs | Forum | Demos | Services


📒 Overview

Mature and Well-known
LVGL is the most popular free and open source embedded graphics library to create beautiful UIs for any MCU, MPU and display type. It's supported by industry leading vendors and projects like  Arm, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit and many more.

Feature Rich
It has all the features to create modern and beautiful GUIs: 30+ built-in widgets, a powerful style system, web inspired layout managers, and a typography system supporting many languages. To integrate LVGL into your platform, all you need is at least 32kB RAM and 128 kB Flash, a C compiler, a frame buffer, and at least an 1/10 screen sized buffer for rendering.

Services
Our team is ready to help you with graphics design, UI implementation and consulting services. Contact us if you need some support during the development of your next GUI project.

🚀 Features

Free and Portable

  • A fully portable C (C++ compatible) library with no external dependencies.
  • Can be compiled to any MCU or MPU, with any (RT)OS.
  • Supports monochrome, ePaper, OLED or TFT displays, or even monitors. Porting Guide
  • Distributed under the MIT license, so you can easily use it in commercial projects too.
  • Needs only 32kB RAM and 128 kB Flash, a frame buffer, and at least an 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 layouts engines to automatically size and position the widgets in a responsive way.
  • Texts are rendered with UTF-8 encoding supporting CJK, Thai, Hindi, Arabic, Persian writing systems.
  • Word wrapping, kerning, text scrolling, sub-pixel rendering, Pinyin-IME Chinese input, Emojis in texts.
  • Rendering engine supporting animations, anti-aliasing, opacity, smooth scrolling, shadows, image transformation, etc  
  • Supports Mouse, Touchpad, Keypad, Keyboard, External buttons, Encoder Input devices.
  • Multiple display support.

Binding and Build Support

  • Micropython Binding exposes LVGL API
  • PikaScript Binding python on MCU lighter and easier.
  • No custom build system is used. You can build LVGL as you build the other files of your project.
  • Support for Make and CMake is included out of the box.
  • Develop on PC and use the same UI code on embedded hardware.
  • Convert the C UI code to HTML file with our Emscripten port.

Docs, Tools, and Services

❤️ Sponsor

If LVGL saved you a lot of time and money or you just had fun using it, consider Supporting its Development.

How do we spend the donations?
Our goal is to provide financial compensation for people who do the most for LVGL. It means not only the maintainers but anyone who implements a great feature should get a payment from the accumulated money. We use the donations to cover our operational costs like servers and related services.

How to donate?
We use GitHub Sponsors where you can easily send one time or recurring donations. You can also see all of our expenses in a transparent way.

How to get paid for your contribution?
If someone implements or fixes an issue labeled as Sponsored he or she will get a payment for that work. We estimate the required time, complexity and importance of the issue and set a price accordingly. To jump in just comment on a Sponsored issue saying "Hi, I'd like to deal with it. This is how I'm planning to fix/implement it...". A work is considered ready when it's approved and merged by a maintainer. After that you can submit and expense at opencollective.com and you will receive the payment in a few days.

Organizations supporting LVGL
Sponsors of LVGL

Individuals supporting LVGL
Backers of LVGL

📦 Packages

LVGL is available as:

🤖 Examples

See some examples of creating widgets, using layouts and applying styles. You will find C and MicroPython code, and links to try out or edit the examples in an online MicroPython editor.

For more examples check out the Examples folder.

Hello world label

Simple Hello world label example in LVGL

C code
/*Change the active screen's background color*/
lv_obj_set_style_bg_color(lv_screen_active(), lv_color_hex(0x003a57), LV_PART_MAIN);

/*Create a white label, set its text and align it to the center*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Hello world");
lv_obj_set_style_text_color(lv_screen_active(), lv_color_hex(0xffffff), LV_PART_MAIN);
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
MicroPython code | Online Simulator
# Change the active screen's background color
scr = lv.screen_active()
scr.set_style_bg_color(lv.color_hex(0x003a57), lv.PART.MAIN)

# Create a white label, set its text and align it to the center
label = lv.label(lv.screen_active())
label.set_text("Hello world")
label.set_style_text_color(lv.color_hex(0xffffff), lv.PART.MAIN)
label.align(lv.ALIGN.CENTER, 0, 0)

Button with Click Event

LVGL button with label example

C code
lv_obj_t * button = lv_button_create(lv_screen_active());                   /*Add a button to the current screen*/
lv_obj_center(button);                                             /*Set its position*/
lv_obj_set_size(button, 100, 50);                                  /*Set its size*/
lv_obj_add_event_cb(button, button_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/

lv_obj_t * label = lv_label_create(button);                        /*Add a label to the button*/
lv_label_set_text(label, "Button");                             /*Set the labels text*/
lv_obj_center(label);                                           /*Align the label to the center*/
...

void button_event_cb(lv_event_t * e)
{
  printf("Clicked\n");
}
MicroPython code | Online Simulator
def button_event_cb(e):
  print("Clicked")

# Create a Button and a Label
button = lv.button(lv.screen_active())
button.center()
button.set_size(100, 50)
button.add_event_cb(button_event_cb, lv.EVENT.CLICKED, None)

label = lv.label(button)
label.set_text("Button")
label.center()

Checkboxes with Layout

Checkboxes with layout in LVGL

C code
lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);

lv_obj_t * cb;
cb = lv_checkbox_create(lv_screen_active());
lv_checkbox_set_text(cb, "Apple");
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

cb = lv_checkbox_create(lv_screen_active());
lv_checkbox_set_text(cb, "Banana");
lv_obj_add_state(cb, LV_STATE_CHECKED);
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

cb = lv_checkbox_create(lv_screen_active());
lv_checkbox_set_text(cb, "Lemon");
lv_obj_add_state(cb, LV_STATE_DISABLED);
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

cb = lv_checkbox_create(lv_screen_active());
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
lv_checkbox_set_text(cb, "Melon\nand a new line");
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
MicroPython code | Online Simulator
def event_handler(e):
    code = e.get_code()
    obj = e.get_target_obj()
    if code == lv.EVENT.VALUE_CHANGED:
        txt = obj.get_text()
        if obj.get_state() & lv.STATE.CHECKED:
            state = "Checked"
        else:
            state = "Unchecked"
        print(txt + ":" + state)


lv.screen_active().set_flex_flow(lv.FLEX_FLOW.COLUMN)
lv.screen_active().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER)

cb = lv.checkbox(lv.screen_active())
cb.set_text("Apple")
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.screen_active())
cb.set_text("Banana")
cb.add_state(lv.STATE.CHECKED)
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.screen_active())
cb.set_text("Lemon")
cb.add_state(lv.STATE.DISABLED)
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.screen_active())
cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
cb.set_text("Melon")
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

Styling a Slider

Styling a slider with LVGL

C code
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_slider_set_value(slider, 70, LV_ANIM_OFF);
lv_obj_set_size(slider, 300, 20);
lv_obj_center(slider);

/*Add local styles to MAIN part (background rectangle)*/
lv_obj_set_style_bg_color(slider, lv_color_hex(0x0F1215), LV_PART_MAIN);
lv_obj_set_style_bg_opa(slider, 255, LV_PART_MAIN);
lv_obj_set_style_border_color(slider, lv_color_hex(0x333943), LV_PART_MAIN);
lv_obj_set_style_border_width(slider, 5, LV_PART_MAIN);
lv_obj_set_style_pad_all(slider, 5, LV_PART_MAIN);

/*Create a reusable style sheet for the INDICATOR part*/
static lv_style_t style_indicator;
lv_style_init(&style_indicator);
lv_style_set_bg_color(&style_indicator, lv_color_hex(0x37B9F5));
lv_style_set_bg_grad_color(&style_indicator, lv_color_hex(0x1464F0));
lv_style_set_bg_grad_dir(&style_indicator, LV_GRAD_DIR_HOR);
lv_style_set_shadow_color(&style_indicator, lv_color_hex(0x37B9F5));
lv_style_set_shadow_width(&style_indicator, 15);
lv_style_set_shadow_spread(&style_indicator, 5);
4
/*Add the style sheet to the slider's INDICATOR part*/
lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);

/*Add the same style to the KNOB part too and locally overwrite some properties*/
lv_obj_add_style(slider, &style_indicator, LV_PART_KNOB);

lv_obj_set_style_outline_color(slider, lv_color_hex(0x0096FF), LV_PART_KNOB);
lv_obj_set_style_outline_width(slider, 3, LV_PART_KNOB);
lv_obj_set_style_outline_pad(slider, -5, LV_PART_KNOB);
lv_obj_set_style_shadow_spread(slider, 2, LV_PART_KNOB);
MicroPython code | Online Simulator
# Create a slider and add the style
slider = lv.slider(lv.screen_active())
slider.set_value(70, lv.ANIM.OFF)
slider.set_size(300, 20)
slider.center()

# Add local styles to MAIN part (background rectangle)
slider.set_style_bg_color(lv.color_hex(0x0F1215), lv.PART.MAIN)
slider.set_style_bg_opa(255, lv.PART.MAIN)
slider.set_style_border_color(lv.color_hex(0x333943), lv.PART.MAIN)
slider.set_style_border_width(5, lv.PART.MAIN)
slider.set_style_pad_all(5, lv.PART.MAIN)

# Create a reusable style sheet for the INDICATOR part
style_indicator = lv.style_t()
style_indicator.init()
style_indicator.set_bg_color(lv.color_hex(0x37B9F5))
style_indicator.set_bg_grad_color(lv.color_hex(0x1464F0))
style_indicator.set_bg_grad_dir(lv.GRAD_DIR.HOR)
style_indicator.set_shadow_color(lv.color_hex(0x37B9F5))
style_indicator.set_shadow_width(15)
style_indicator.set_shadow_spread(5)

# Add the style sheet to the slider's INDICATOR part
slider.add_style(style_indicator, lv.PART.INDICATOR)
slider.add_style(style_indicator, lv.PART.KNOB)

# Add the same style to the KNOB part too and locally overwrite some properties
slider.set_style_outline_color(lv.color_hex(0x0096FF), lv.PART.KNOB)
slider.set_style_outline_width(3, lv.PART.KNOB)
slider.set_style_outline_pad(-5, lv.PART.KNOB)
slider.set_style_shadow_spread(2, lv.PART.KNOB)

English, Hebrew (mixed LTR-RTL) and Chinese texts

English, Hebrew and Chinese texts with LVGL

C code
lv_obj_t * ltr_label = lv_label_create(lv_screen_active());
lv_label_set_text(ltr_label, "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");
lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
lv_obj_set_width(ltr_label, 310);
lv_obj_align(ltr_label, LV_ALIGN_TOP_LEFT, 5, 5);

lv_obj_t * rtl_label = lv_label_create(lv_screen_active());
lv_label_set_text(rtl_label,"מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).");
lv_obj_set_style_base_dir(rtl_label, LV_BASE_DIR_RTL, 0);
lv_obj_set_style_text_font(rtl_label, &lv_font_dejavu_16_persian_hebrew, 0);
lv_obj_set_width(rtl_label, 310);
lv_obj_align(rtl_label, LV_ALIGN_LEFT_MID, 5, 0);

lv_obj_t * cz_label = lv_label_create(lv_screen_active());
lv_label_set_text(cz_label,
                  "嵌入式系统(Embedded System),\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
lv_obj_set_style_text_font(cz_label, &lv_font_simsun_16_cjk, 0);
lv_obj_set_width(cz_label, 310);
lv_obj_align(cz_label, LV_ALIGN_BOTTOM_LEFT, 5, -5);
MicroPython code | Online Simulator
ltr_label = lv.label(lv.screen_active())
ltr_label.set_text("In modern terminology, a microcontroller is similar to a system on a chip (SoC).")
ltr_label.set_style_text_font(lv.font_montserrat_16, 0);

ltr_label.set_width(310)
ltr_label.align(lv.ALIGN.TOP_LEFT, 5, 5)

rtl_label = lv.label(lv.screen_active())
rtl_label.set_text("מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).")
rtl_label.set_style_base_dir(lv.BASE_DIR.RTL, 0)
rtl_label.set_style_text_font(lv.font_dejavu_16_persian_hebrew, 0)
rtl_label.set_width(310)
rtl_label.align(lv.ALIGN.LEFT_MID, 5, 0)

font_simsun_16_cjk = lv.font_load("S:../../assets/font/lv_font_simsun_16_cjk.fnt")

cz_label = lv.label(lv.screen_active())
cz_label.set_style_text_font(font_simsun_16_cjk, 0)
cz_label.set_text("嵌入式系统(Embedded System),\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。")
cz_label.set_width(310)
cz_label.align(lv.ALIGN.BOTTOM_LEFT, 5, -5)

▶️ Get started

This list will guide you to get started with LVGL step-by-step.

Get Familiar with LVGL

  1. Check the Online demos to see LVGL in action (3 minutes)
  2. Read the Introduction page of the documentation (5 minutes)
  3. Get familiar with the basics on the Quick overview page (15 minutes)

Start to Use LVGL

  1. Set up a Simulator (10 minutes)
  2. Try out some Examples
  3. Port LVGL to a board. See the Porting guide or check the ready to use Projects

Become a Pro

  1. Read the Overview page to get a better understanding of the library (2-3 hours)
  2. Check the documentation of the Widgets to see their features and usage

Get Help and Help Others

  1. If you have questions go to the Forum
  2. Read the Contributing guide to see how you can help to improve LVGL (15 minutes)

🤝 Services

LVGL LLC was established to provide a solid background for LVGL library and to offer several type of services to help you in UI development. With 15+ years of experience in the user interface and graphics industry we can help you the bring your UI to the next level.

  • Graphics design Our in-house graphics designers are experts in creating beautiful modern designs which fit to your product and the resources of your hardware.
  • UI implementation We can also implement your UI based on the design you or we have created. You can be sure that we will make the most out 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 can support you with consulting as well to avoid pricey and time consuming mistakes during the UI development.
  • Board certification For companies who are offering development boards, or production ready kits we do board certification which shows how board can run LVGL.

Check out our Demos as reference. For more information take look at the Services page.

Contact us and tell how we can help.

🌟 Contributing

LVGL is an open project and contribution is very welcome. There are many ways to contribute from simply speaking about your project, through writing examples, improving the documentation, fixing bugs or even hosting your own project under the LVGL organization.

For a detailed description of contribution opportunities visit the Contributing section of the documentation.

More than 300 people already left their fingerprint in LVGL. Be one them! See you here! 🙂

... and many other.

More Repositories

1

lv_port_esp32

LVGL ported to ESP32 including various display and touchpad drivers
C
1,011
star
2

lv_binding_rust

LVGL bindings for Rust. A powerful and easy-to-use embedded GUI with many widgets, advanced visual effects (opacity, antialiasing, animations) and low memory requirements (16K RAM, 64K Flash).
Rust
676
star
3

lv_port_pc_visual_studio

Visual Studio projects for LVGL embedded graphics library. Recommended on Windows. Linux support with Wayland is work in progress.
C
572
star
4

lv_demos

Examples, tutorials and applications for the LVGL embedded GUI library
C
480
star
5

lvgl_esp32_drivers

Drivers for ESP32 to be used with LVGL
C
321
star
6

lv_drivers

TFT and touch pad drivers for LVGL embedded GUI library
C
295
star
7

lv_binding_micropython

LVGL binding for MicroPython
C
250
star
8

lv_port_pc_vscode

C
244
star
9

lv_platformio

PlatformIO project example for LVGL
C
241
star
10

lv_port_linux

LVGL configured to work with a standard Linux framebuffer
C
237
star
11

lv_port_pc_eclipse

PC simulator project for LVGL embedded GUI Library. Recommended on Linux and Mac.
C
235
star
12

lv_font_conv

Converts TTF/WOFF fonts to compact bitmap format
JavaScript
175
star
13

lv_arduino

LVGL as Arduino Library + example sketch
C
147
star
14

lv_port_win_codeblocks

Windows PC simulator project for LVGL embedded GUI Library
C
145
star
15

lv_binding_js

React bindings for LVGL ⚛️
C++
141
star
16

lv_port_windows

LVGL ported to Windows
C
83
star
17

lv_img_conv

Image converter for LVGL, written in JS
TypeScript
72
star
18

lv_port_stm32f429_disco

LVGL ported to STM32F429I-DISC1 using SW4STM32 (Ac6) IDE
C
71
star
19

lv_lib_png

PNG decoder for LVGL
C
60
star
20

lv_i18n

Internationalization (i18n) for LVGL
JavaScript
58
star
21

lv_web_emscripten

LVGL ported to Emscripten to be converted to JavaScript
C
55
star
22

lv_port_stm32f746_disco

LVGL ported to STM32F746G-DISCO using STM32CubeIDE
C
50
star
23

lv_lib_qrcode

QR code generation with LVGL
C
50
star
24

lv_utils

Convert images or system fonts to C arrays. Written for LVGL embedded GUI library
PHP
49
star
25

lv_lib_freetype

Interface to FreeType to generate font bitmaps run time
C
47
star
26

lv_binding_cpp

[WIP] C++ binding for LVGL
C++
45
star
27

docs_old

DEPRECATED: Documentation for LVGL is now located in the main repository: https://github.com/lvgl/lvgl
HTML
42
star
28

lv_fs_if

LVGL interfaces to various file systems (PC, FatFS)
C
40
star
29

lv_lib_split_jpg

JPG decoder for LVGL
C
32
star
30

lv_lib_gif

GIF library for LVGL
C
32
star
31

lv_lib_rlottie

Lottie animation support for LVGL
C
29
star
32

lv_port_stm32f769_disco

LVGL ported to STM32F769 Discovery using CubeIDE
C
26
star
33

lv_gui_builder

[WIP] Drag end drop GUI designer for LVGL
24
star
34

lv_lib_tinygl

EXPERIMENTAL - 3D extension for lvgl using TinyGL
C
21
star
35

lv_port_raspberry_pi_pico_mdk

An MDK template for Raspberry Pi Pico + LVGL
C
19
star
36

blog

Post, News and Tutorials about LVGL embedded GUI library
C
19
star
37

lv_port_stm32f469_disco

LVGL ported to STM32F469 Discovery using SWSTM32 (Ac6) IDE
C
14
star
38

lv_lib_bmp

BMP decoder library for LVGL
C
12
star
39

lv_binding_pikascript

C
11
star
40

lv_port_stm32h7b3i_disco

This repository contains the Light and Versatile Graphics Library (LVGL) port for the STM32H7B3I-DK development board.
C
11
star
41

lv_port_stm32h745i_disco

LVGL ported to STM32H745I DISCO
C
11
star
42

lv_apps

Ready to use UIs and high level components for applications
C
10
star
43

lv_port_maixduino

Maixduino GUI project with LVGL
C
10
star
44

docs

Meta repository for compiled documentation. Do not send PRs here - they will be closed. The Markdown files are now located in the main repository: https://github.com/lvgl/lvgl
HTML
10
star
45

lvgl-project-creator

Create LVGL projects quickly and easily
Python
9
star
46

sim

Meta repository for online LVGL simulators
JavaScript
8
star
47

lv_port_xilinx_zedboard_vitis

This repository contains a template AMP project for the Zedboard using VGA, FreeRTOS, LVGL and USB peripherals
C
8
star
48

lv_port_aurix

LVGL ported to Aurix TFT board
C
7
star
49

lv_port_an547_cm55_sim

A LVGL porting for Cortex-M55 running on an Arm official FPGA prototyping development board called MPS3 (AN547), see Figure 1. It is also possible to run the project template on an emulator called Corstone-300-FVP, which is free. Topics Resources
C
7
star
50

lv_port_stm_nucleo_g071rb

LVGL ported to ST's NUCLEO G071RB board
C
3
star
51

lv_binding_berry

Binding to Berry language
C
3
star
52

lv_port_stm32f746_disco_atollic

DEPRECATED: LittlevGL ported to STM32F746G-DISCO using Atollic IDE
C
2
star
53

template

Template repo with README and CI settings
2
star
54

markup_temporary

Temporary repository to evaluate the markup language support
1
star
55

pic32mx_r61581_no_os

LittlevGL ported to PIC32MX with R61581 display controller
C
1
star