9.0
Introduction
Key features
Requirements
License
Repository layout
Release policy
Release cycle
Branches
Changelog
Version support
FAQ
Where can I ask questions?
Is my MCU/hardware supported?
Is my display supported?
LVGL doesn't start, randomly crashes or nothing is drawn on the display. What can be the problem?
My display driver is not called. What have I missed?
Why is the display driver called only once? Only the upper part of the display is refreshed.
Why do I see only garbage on the screen?
Why do I see nonsense colors on the screen?
How to speed up my UI?
How to reduce flash/ROM usage?
How to reduce the RAM usage
How to work with an operating system?
Examples
Get started
A very simple "hello world" label
A button with a label and react on click event
Create styles from scratch for buttons
Create a slider and write its value on a label
Styles
Size styles
Background styles
Border styles
Outline styles
Shadow styles
Image styles
Text styles
Line styles
Transition
Using multiple styles
Local styles
Add styles to parts and states
Extending the current theme
Opacity and Transformations
Animations
Start animation on an event
Playback animation
Animation timeline
Events
Button click event
Handle multiple events
Event bubbling
Draw event
Layouts
Flex
A simple row and a column layout with flexbox
Arrange items in rows with wrap and even spacing
Demonstrate flex grow
Demonstrate flex grow.
Demonstrate column and row gap style properties
RTL base direction changes order of the items
Grid
A simple grid
Demonstrate cell placement and span
Demonstrate grid's "free unit"
Demonstrate track placement
Demonstrate column and row gap
Demonstrate RTL direction on grid
Scrolling
Nested scrolling
Snapping
Floating button
Styling the scrollbars
Right to left scrolling
Translate on scroll
Widgets
Base object
Base objects with custom styles
Make an object draggable
Arc
Simple Arc
Loader with Arc
Bar
Simple Bar
Styling a bar
Temperature meter
Stripe pattern and range value
Bar with LTR and RTL base direction
Custom drawer to show the current value
Button
Simple Buttons
Styling buttons
Gummy button
Button matrix
Simple Button matrix
Custom buttons
Pagination
Calendar
Calendar with header
Canvas
Drawing on the Canvas and rotate
Transparent Canvas with chroma keying
Draw a rectangle to the canvas
Draw a label to the canvas
Draw an arc to the canvas
Draw an image to the canvas
Draw a line to the canvas
Chart
Line Chart
Faded area line chart with custom division lines
Axis ticks and labels with scrolling
Show the value of the pressed points
Display 1000 data points with zooming and scrolling
Show cursor on the clicked point
Scatter chart
Stacked area chart
Checkbox
Simple Checkboxes
Checkboxes as radio buttons
Colorwheel
Simple Colorwheel
Dropdown
Simple Drop down list
Drop down in four directions
Menu
Image
Image from variable and symbol
Image recoloring
Rotate and zoom
Image offset and styling
Image button
Simple Image button
Keyboard
Keyboard with text area
Keyboard with custom map
Label
Line wrap, recoloring and scrolling
Text shadow
Show LTR, RTL and Chinese texts
Draw label with gradient color
Customize circular scrolling animation
LED
LED with custom style
Line
Simple Line
List
Simple List
Sorting a List using up and down buttons
Menu
Simple Menu
Simple Menu with root btn
Simple Menu with custom header
Simple Menu with floating btn to add new menu page
Complex Menu
Meter
Simple meter
A meter with multiple arcs
A clock from a meter
Pie chart
Message box
Simple Message box
Roller
Simple Roller
Styling the roller
add fade mask to roller
Slider
Simple Slider
Slider with custom style
Slider with extended drawer
Span
Span with custom styles
Spinbox
Simple Spinbox
Spinner
Simple spinner
Switch
Simple Switch
Table
Simple table
Lightweighted list from table
Tabview
Simple Tabview
Tabs on the left, styling and no scrolling
Textarea
Simple Text area
Text area with password field
Text auto-formatting
Tabview
Tileview with content
Window
Simple window
Get started
Quick overview
Get started in a simulator
Add LVGL into your project
Learn the basics
Widgets
Events
Parts
States
Styles
Themes
Examples
A very simple "hello world" label
A button with a label and react on click event
Create styles from scratch for buttons
Create a slider and write its value on a label
Micropython
Platforms
Simulator on PC
Select an IDE
Set-up Eclipse CDT
NXP
Creating new project with LVGL
HW acceleration for NXP iMX RT platforms
STM32
Including LVGL in a Project
Bare Metal Example
FreeRTOS Example
Espressif (ESP32 chip series)
LVGL demo project for ESP32
Using LVGL in your ESP-IDF project
Using lvgl_esp32_drivers in ESP-IDF project
Arduino
Get the LVGL Arduino library
Set up drivers
Configure LVGL
Initialize and run LVGL
Use the examples and demos
Debugging and logging
Tasmota and berry
What is Tasmota?
What is Berry?
Why LVGL + Tasmota + Berry?
So what does it look like?
How can I use it?
Where can I find more information?
CMake
Espressif (ESP32)
MicroPython
Zephyr
Prerequisites
Building LVGL with CMake
Building LVGL drivers
Build shared libraries with CMake
MDK
(RT)OS
NuttX RTOS
What is NuttX?
Why NuttX + LVGL?
How to get started with NuttX and LVGL?
Where can I find more information?
RT-Thread RTOS
What is RT-Thread?
How to run LVGL on RT-Thread?
FreeRTOS
Zephyr
Bindings
Micropython
What is Micropython?
Why Micropython + LVGL?
So what does it look like?
How can I use it?
Where can I find more information?
The Micropython Binding is auto generated!
Cpp
PikaScript
What is PikaScript ?
Why PikaScript + LVGL ?
So how does it look like?
How does it work?
How can I use it?
JavaScript
Table of Contents
Features
Demo
Building
Components
Font
Animation
Style
JSAPI
Thanks
Porting
Set up a project
Get the library
Add lvgl to your project
Automatically add files
Make and CMake
Other platforms and tools
Demos and Examples
Configuration file
Initialization
Display interface
Basic setup
flush_cb
Draw buffers
Advanced options
Resolution
Rotation
Color format
Antialiasing
User data
Events
Other options
Decoupling the display refresh timer
Further reading
API
Input device interface
Types of input devices
Touchpad, mouse or any pointer
Keypad or keyboard
Encoder
Button
Other features
Parameters
Feedback
Associating with a display
Buffered reading
Further reading
API
Tick interface
API
Timer Handler
Sleep management
Operating system and interrupts
Tasks and threads
Interrupts
Logging
Log level
Printing logs
Logging with printf
Custom log function
Add logs
Add custom GPU
Draw context
Fields
Initialization
Software renderer
Blend callback
Extend the software renderer
New blend callback
New rectangle drawer
Fully custom draw engine
Overview
Objects
Attributes
Basic attributes
Specific attributes
Working mechanisms
Parent-child structure
Moving together
Visibility only on the parent
Create and delete objects
Screens
Create screens
Get the active screen
Load screens
Layers
Handling multiple displays
Parts
States
Snapshot
Positions, sizes, and layouts
Overview
Units
Boxing model
Important notes
Position
Simple way
Align
Size
Simple way
Using styles
Translation
Transformation
Min and Max size
Layout
Overview
Built-in layout
Flags
Adding new layouts
Examples
Styles
States
Cascading styles
Inheritance
Forced value inheritance/default value
Parts
Initialize styles and set/get properties
Add and remove styles to a widget
Add styles
Replace styles
Remove styles
Report style changes
Get a property's value on an object
Local styles
Properties
Typical background properties
Transitions
Opacity, Blend modes and Transformations
Color filter
Themes
Extending themes
Examples
Size styles
Background styles
Border styles
Outline styles
Shadow styles
Image styles
Arc styles
Text styles
Line styles
Transition
Using multiple styles
Local styles
Add styles to parts and states
Extending the current theme
Opacity and Transformations
API
Style properties
Size and position
width
min_width
max_width
height
min_height
max_height
x
y
align
transform_width
transform_height
translate_x
translate_y
transform_zoom
transform_angle
transform_pivot_x
transform_pivot_y
Padding
pad_top
pad_bottom
pad_left
pad_right
pad_row
pad_column
Margin
margin_top
margin_bottom
margin_left
margin_right
Background
bg_color
bg_opa
bg_grad_color
bg_grad_dir
bg_main_stop
bg_grad_stop
bg_grad
bg_dither_mode
bg_img_src
bg_img_opa
bg_img_recolor
bg_img_recolor_opa
bg_img_tiled
Border
border_color
border_opa
border_width
border_side
border_post
Outline
outline_width
outline_color
outline_opa
outline_pad
Shadow
shadow_width
shadow_ofs_x
shadow_ofs_y
shadow_spread
shadow_color
shadow_opa
Image
img_opa
img_recolor
img_recolor_opa
Line
line_width
line_dash_width
line_dash_gap
line_rounded
line_color
line_opa
Arc
arc_width
arc_rounded
arc_color
arc_opa
arc_img_src
Text
text_color
text_opa
text_font
text_letter_space
text_line_space
text_decor
text_align
Miscellaneous
radius
clip_corner
opa
color_filter_dsc
color_filter_opa
anim
anim_time
anim_speed
transition
blend_mode
layout
base_dir
Scroll
Overview
Scrollbar
Events
Basic example
Features of scrolling
Scrollable
Scroll chain
Scroll momentum
Elastic scroll
Snapping
Scroll one
Scroll on focus
Scroll manually
Self size
Examples
Nested scrolling
Snapping
Floating button
Styling the scrollbars
Right to left scrolling
Translate on scroll
Layers
Order of creation
Change order
Top and sys layers
Events
Add events to the object
Remove event(s) from an object
Event codes
Input device events
Drawing events
Other events
Special events
Custom events
Sending events
Refresh event
Fields of lv_event_t
Event bubbling
Examples
Button click event
Handle multiple events
Event bubbling
Draw event
API
Input devices
Pointers
Cursor
Gestures
Keypad and encoder
Groups
Styling
API
Input device
Groups
Displays
Multiple display support
Using only one display
Duplicate display
Split image
Screens
Transparent screens
Features of displays
Inactivity
Background
API
Colors
Creating colors
RGB
HSV
Palette
Modify and mix colors
Built-in colors
Opacity
Color types
Convert color
API
Fonts
Unicode support
Built-in fonts
Normal fonts
Special fonts
Special features
Bidirectional support
Arabic and Persian support
Subpixel rendering
Compressed fonts
Add a new font
Add new symbols
Load a font at run-time
Add a new font engine
Use font fallback
Images
Store images
Variables
Files
Color formats
Add and use images
Online converter
Manually create an image
Use images
Image decoder
Custom image formats
Register an image decoder
Manually use an image decoder
Image caching
Cache size
Value of images
Memory usage
Clean the cache
Custom cache algorithm
API
Image buffer
File system
Ready to use drivers
Adding a driver
Registering a driver
Implementing the callbacks
Other callbacks
Usage example
Use drives for images
API
Animations
Create an animation
Animation path
Speed vs time
Delete animations
Timeline
Examples
Start animation on an event
Playback animation
Animation timeline
API
Timers
Create a timer
Ready and Reset
Set parameters
Repeat count
Measure idle time
Asynchronous calls
API
Drawing
Mechanism of screen refreshing
Masking
Using masks
Hook drawing
Main drawing
Post drawing
Part drawing
Others
Renderers and GPUs
Software renderer
SDL renderer
Arm-2D GPU
How to Use
Design Considerations
Examples
NXP PXP and VGLite GPU
DMA2D GPU
New widget
Widgets
Base object (lv_obj)
Overview
Coordinates
Parents and children
Display and Screens
Events
Styles
Flags
Groups
Extended click area
Events
Keys
Example
Base objects with custom styles
Make an object draggable
API
Arc (lv_arc)
Overview
Parts and Styles
Usage
Value and range
Rotation
Mode
Change rate
Knob offset
Setting the indicator manually
Advanced hit test
Place another object to the knob
Events
Keys
Example
Simple Arc
Loader with Arc
API
Animation Image (lv_animimg)
Overview
Parts and Styles
Usage
Image sources
Events
Keys
Example
Simple Animation Image
API
Bar (lv_bar)
Overview
Parts and Styles
Usage
Value and range
Modes
Events
Keys
Example
Simple Bar
Styling a bar
Temperature meter
Stripe pattern and range value
Bar with LTR and RTL base direction
Custom drawer to show the current value
API
Button (lv_btn)
Overview
Parts and Styles
Usage
Events
Keys
Example
Simple Buttons
Styling buttons
Gummy button
API
Button matrix (lv_btnmatrix)
Overview
Parts and Styles
Usage
Button's text
Control buttons
One check
Events
Keys
Example
Simple Button matrix
Custom buttons
Pagination
API
Calendar (lv_calendar)
Overview
Parts and Styles
Usage
Current date
Shown date
Highlighted days
Name of the days
Events
Keys
Headers
Arrow buttons
Drop-down
Example
Calendar with header
API
Chart (lv_chart)
Overview
Parts and Styles
Usage
Chart type
Data series
Modify the data
Update modes
Number of points
Vertical range
Division lines
Override default start point for series
Tick marks and labels
Zoom
Cursor
Events
Keys
Example
Line Chart
Faded area line chart with custom division lines
Axis ticks and labels with scrolling
Show the value of the pressed points
Display 1000 data points with zooming and scrolling
Show cursor on the clicked point
Scatter chart
Stacked area chart
API
Color wheel (lv_colorwheel)
Overview
Parts and Styles
Usage
Create a color wheel
Set color
Color mode
Events
Keys
Example
Simple Colorwheel
API
Canvas (lv_canvas)
Overview
Parts and Styles
Usage
Buffer
Indexed colors
Drawing
Transformations
Blur
Events
Keys
Example
Drawing on the Canvas and rotate
Transparent Canvas with chroma keying
Draw a rectangle to the canvas
Draw a label to the canvas
Draw an arc to the canvas
Draw an image to the canvas
Draw a line to the canvas
API
Checkbox (lv_checkbox)
Overview
Parts and Styles
Usage
Text
Check, uncheck, disable
Events
Keys
Example
Simple Checkboxes
Checkboxes as radio buttons
API
Drop-down list (lv_dropdown)
Overview
Parts and Styles
Button
List
Usage
Overview
Set options
Get selected option
Direction
Symbol
Show selected
Manually open/close
Events
Keys
Example
Simple Drop down list
Drop down in four directions
Menu
API
Image (lv_img)
Overview
Parts and Styles
Usage
Image source
Label as an image
Transparency
Palette and Alpha index
Recolor
Auto-size
Mosaic
Offset
Transformations
Size mode
Rounded image
Events
Keys
Example
Image from variable and symbol
Image recoloring
Rotate and zoom
Image offset and styling
API
Image button (lv_imgbtn)
Overview
Parts and Styles
Usage
Image sources
States
Events
Keys
Example
Simple Image button
API
Keyboard (lv_keyboard)
Overview
Parts and Styles
Usage
Modes
Assign Text area
Key Popovers
New Keymap
Events
Keys
Examples
Keyboard with text area
Keyboard with custom map
API
Label (lv_label)
Overview
Parts and Styles
Usage
Set text
Newline
Long modes
Text recolor
Text selection
Very long texts
Custom scrolling animations
Symbols
Events
Keys
Example
Line wrap, recoloring and scrolling
Text shadow
Show LTR, RTL and Chinese texts
Draw label with gradient color
Customize circular scrolling animation
API
LED (lv_led)
Overview
Parts and Styles
Usage
Color
Brightness
Toggle
Events
Keys
Example
LED with custom style
API
Line (lv_line)
Overview
Parts and Styles
Usage
Set points
Auto-size
Invert y
Events
Keys
Example
Simple Line
API
List (lv_list)
Overview
Parts and Styles
Usage
Buttons
Texts
Events
Keys
Example
Simple List
Sorting a List using up and down buttons
API
Menu (lv_menu)
Overview
Parts and Styles
Usage
Create a menu
Header mode
Root back button mode
Create a menu page
Set a menu page in the main area
Set a menu page in the sidebar
Linking between menu pages
Create a menu container, section, separator
Events
Keys
Example
Simple Menu
Simple Menu with root btn
Simple Menu with custom header
Simple Menu with floating btn to add new menu page
Complex Menu
API
Meter (lv_meter)
Overview
Parts and Styles
Usage
Scale
Add indicators
Events
Keys
Example
Simple meter
A meter with multiple arcs
A clock from a meter
Pie chart
API
Message box (lv_msgbox)
Overview
Parts and Styles
Usage
Create a message box
Get the parts
Close the message box
Events
Keys
Example
Simple Message box
API
Roller (lv_roller)
Overview
Parts and Styles
Usage
Set options
Get selected option
Visible rows
Events
Keys
Example
Simple Roller
Styling the roller
add fade mask to roller
API
Slider (lv_slider)
Overview
Parts and Styles
Usage
Value and range
Modes
Knob-only mode
Events
Keys
Example
Simple Slider
Slider with custom style
Slider with extended drawer
API
Span (lv_span)
Overview
Parts and Styles
Usage
Set text and style
Retrieving a span child
Child Count
Text align
Modes
Overflow
first line indent
lines
Events
Keys
Example
Span with custom styles
API
Spinbox (lv_spinbox)
Overview
Parts and Styles
Value, range and step
Format
Rollover
Events
Keys
Example
Simple Spinbox
API
Example
Spinner (lv_spinner)
Overview
Parts and Styles
Usage
Create a spinner
Events
Keys
Example
Simple spinner
API
Switch (lv_switch)
Overview
Parts and Styles
Usage
Change state
Events
Keys
Example
Simple Switch
API
Table (lv_table)
Overview
Parts and Styles
Usage
Set cell value
Rows and Columns
Width and Height
Merge cells
Scroll
Events
Keys
Example
Simple table
Lightweighted list from table
MicroPython
API
Tabview (lv_tabview)
Overview
Parts and Styles
Usage
Create a Tab view
Add tabs
Rename tabs
Change tab
Get the parts
Events
Keys
Example
Simple Tabview
Tabs on the left, styling and no scrolling
API
Text area (lv_textarea)
Overview
Parts and Styles
Usage
Add text
Placeholder
Delete character
Move the cursor
Hide the cursor
One line mode
Password mode
Accepted characters
Max text length
Very long texts
Select text
Events
Keys
Example
Simple Text area
Text area with password field
Text auto-formatting
API
Tile view (lv_tileview)
Overview
Parts and Styles
Usage
Add a tile
Change tile
Events
Keys
Example
Tileview with content
API
Window (lv_win)
Overview
Parts and Styles
Usage
Create a Window
Title and buttons
Get the parts
Events
Keys
Example
Simple window
API
Layouts
Flex
Overview
Terms
Simple interface
Flex flow
Flex align
Flex grow
Style interface
Internal padding
Other features
RTL
New track
Example
A simple row and a column layout with flexbox
Arrange items in rows with wrap and even spacing
Demonstrate flex grow
Demonstrate flex grow.
Demonstrate column and row gap style properties
RTL base direction changes order of the items
API
Grid
Overview
Terms
Simple interface
Grid descriptors
Grid items
Grid align
Style interface
Internal padding
Other features
RTL
Example
A simple grid
Demonstrate cell placement and span
Demonstrate grid's "free unit"
Demonstrate track placement
Demonstrate column and row gap
Demonstrate RTL direction on grid
API
3rd party libraries
File System Interfaces
Usage
BMP decoder
Limitations
Example
Open a BMP image from file
API
JPG decoder
Overview
Usage
Converter
Converting JPG to C array
Converting JPG to SJPG
Example
Load an SJPG image
API
PNG decoder
Example
Open a PNG image from file and variable
API
GIF decoder
Convert GIF files to C array
Use GIF images from file
Memory requirements
Example
Open a GIF image from file and variable
API
FreeType support
Add FreeType to your project
For UNIX
For Embedded Devices
Usage
Example
Open a front with FreeType
Learn more
API
Tiny TTF font engine
Usage
Example
Open a front with Tiny TTF from data array
Load a font with Tiny_TTF from file
API
QR code
Usage
Notes
Example
Create a QR Code
API
Barcode
Usage
Notes
Example
Create a Barcode
API
Lottie player
Build Rlottie
ESP-IDF example at bottom
Usage
Use Rlottie from file
Use Rlottie from raw string data
Getting animations
Controlling animations
ESP-IDF Example
Background
IDF Setup
Rlottie patch file
CMakeLists for IDF
Additional Rlottie considerations in ESP-IDF
Additional changes to make use of SPIRAM
Example
Load a Lottie animation from raw data
Load a Lottie animation from a file
API
FFmpeg support
Install FFmpeg
Add FFmpeg to your project
Usage
Example
Decode image
Decode video
API
Others
Snapshot
Usage
Free the Image
Use Existing Buffer
Example
Simple snapshot example
API
Monkey
Usage
Example
Touchpad monkey example
Encoder monkey example
Button monkey example
API
Grid navigation
Usage
Focusable objects
Example
Basic grid navigation
Grid navigation on a list
Nested grid navigations
Simple navigation on a list widget
API
File Explorer
Usage
Quick access
Sort
Event
Example
Simple File Explorer
Control File Explorer
Custom sort
API
Fragment
Usage
Create Fragment Class
Use
lv_fragment_manager
Fragment Based Navigation
Example
Basic fragment usage
Stack navigation example
API
Messaging
IDs
Subscribe to a message
Subscribe with an lv_obj
Unsubscribe
Send message
Example
Slider to label messaging
Handling login and its states
Setting the same value from many sources
API
Image font (imgfont)
Usage
Example
Use emojis in a text.
API
Pinyin IME
Usage
Custom dictionary
Dictionary format
Apply new dictionary
Modes
Example
Pinyin IME 26 key input
Pinyin IME 9 key input
API
Contributing
Introduction
Pull request
From GitHub
From command line
Commit message format
Developer Certification of Origin (DCO)
Overview
Accepted licenses and copyright notices
Your own work
Use code from online source
Use MIT licensed code
Use GPL licensed code
Ways to contribute
Give LVGL a Star
Tell what you have achieved
Write examples
Improve the docs
Report bugs
Send fixes
Join the conversations in the Forum
Add features
Become a maintainer
Move your project repository under LVGL organization
Changelog
v8.3.5 7 February 2023
Performance
Fixes
Examples
Docs
CI and tests
Others
v8.3.4 15 December 2022
New Features
Fixes
v8.3.3 06 October 2022
v8.3.2 27 September 2022
Fixes
Docs
CI and tests
Others
v8.3.1 25 July 2022
Fixes
Examples
Docs
v8.3.0 6 July 2022
Overview
New Features
Performance
Fixes
Examples
Docs
CI and tests
v8.2.0 31 January 2022
Overview
Breaking Changes
Architectural
New Features
Performance
Fixes
Examples
Docs
CI and tests
v8.1.0 10 November 2021
Overview
Breaking Changes
Architectural
New Features
Performance
Fixes
Examples
Docs
CI and tests
Others
v8.0.2 (16.07.2021)
v8.0.1 (14.06.2021)
v8.0.0 (01.06.2021)
Directory structure
Widget changes
New scrolling
New layouts
Styles
Events
Driver changes
Other changes
New release policy
Migrating from v7 to v8
v7.11.0 (16.03.2021)
New features
Bugfixes
v7.10.1 (16.02.2021)
Bugfixes
v7.10.0 (02.02.2021)
New features
Bugfixes
v7.9.1 (19.01.2021)
Bugfixes
v7.9.0 (05.01.2021)
New features
Bugfixes
v7.8.1 (15.12.2020)
Bugfixes
v7.8.0 (01.12.2020)
New features
Bugfixes
v7.7.2 (17.11.2020)
Bugfixes
v7.7.1 (03.11.2020)
Bugfixes
v7.7.0 (20.10.2020)
New features
Bugfixes
v7.6.1 (06.10.2020)
Bugfixes
v7.6.0 (22.09.2020)
New features
Bugfixes
v7.5.0 (15.09.2020)
New features
Bugfixes
v7.4.0 (01.09.2020)
New features
Bugfixes
v7.3.1 (18.08.2020)
Bugfixes
v7.3.0 (04.08.2020)
New features
Bugfixes
v7.2.0 (21.07.2020)
New features
Bugfixes
v7.1.0 (07.07.2020)
New features
Bugfixes
v7.0.2 (16.06.2020)
Bugfixes
v7.0.1 (01.06.2020)
Bugfixes
v7.0.0 (18.05.2020)
Documentation
Legal changes
New drawing system
New style system
GPU integration
Renames
Reworked and improved object
New object types
Others
Demos
New release policy
Migrating from v6 to v7
Roadmap
Planned for v9
Naming and API
Architecture
Styles
Widgets
Drawing and rendering
Animations
Planned in general
CI
Architecture
Styles
Drawing and rendering
Widgets
Others
Ideas
LVGL
»
Get started
»
Platforms
»
MDK
Edit on GitHub
MDK
ΒΆ
TODO