8.4
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 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
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
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
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 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
Espressif (ESP32 chip series)
LVGL demo project for ESP32
Using LVGL in your ESP-IDF project
Using lvgl_esp32_drivers in ESP-IDF project
Renesas
Creating new project with LVGL
HW acceleration for Renesas RA6M3 platforms
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 examples with CMake
Building LVGL drivers and demos with CMake
Build shared libraries with CMake
(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?
Cpp
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
Draw buffer
Buffering modes
One buffer
Two buffers
Full refresh
Direct mode
Display driver
Mandatory fields
Optional fields
Examples
Other options
Rotation
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
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
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
opa_layered
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
Input devices
Pointers
Cursor
Gestures
Keypad and encoder
Groups
Styling
API
Input device
Groups
Displays
Multiple display support
Using only one display
Mirror 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
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
Core widgets
Arc (lv_arc)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Bar (lv_bar)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Button (lv_btn)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Button matrix (lv_btnmatrix)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Canvas (lv_canvas)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Checkbox (lv_checkbox)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Drop-down list (lv_dropdown)
Overview
Parts and Styles
Usage
Overview
Events
Keys
Example
API
Image (lv_img)
Overview
Parts and Styles
Usage
Transformations
Events
Keys
Example
API
Label (lv_label)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Line (lv_line)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Roller (lv_roller)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Slider (lv_slider)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Switch (lv_switch)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Table (lv_table)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Text area (lv_textarea)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Extra widgets
Animation Image (lv_animimg)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Calendar (lv_calendar)
Overview
Parts and Styles
Usage
Events
Keys
Headers
Example
API
Chart (lv_chart)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Color wheel (lv_colorwheel)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Image button (lv_imgbtn)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Keyboard (lv_keyboard)
Overview
Parts and Styles
Usage
Events
Keys
Examples
API
LED (lv_led)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
List (lv_list)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Menu (lv_menu)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Meter (lv_meter)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Message box (lv_msgbox)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Span (lv_span)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Spinbox (lv_spinbox)
Overview
Parts and Styles
Events
Keys
Example
API
Example
Spinner (lv_spinner)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Tabview (lv_tabview)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Tile view (lv_tileview)
Overview
Parts and Styles
Usage
Events
Keys
Example
API
Window (lv_win)
Overview
Parts and Styles
Usage
Get the parts
Events
Keys
Example
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
Built in wrappers
FATFS
LittleFS
STDIO
POSIX
WIN32
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
Install FreeType
Add FreeType to your project
Usage
Example
Open a front with FreeType
Learn more
API
Tiny TTF font engine
Usage
API
QR code
Get started
Notes
Example
Create a QR Code
API
Lottie player
Build Rlottie
Usage
Use Rlottie from file
Use Rlottie from raw string data
Getting animations
Controlling animations
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
Fragment
Usage
Create Fragment Class
Use
lv_fragment_manager
Fragment Based Navigation
Example
Basic fragment usage
Stack navigation example
API
Messaging
IDs
Send message
Subscribe to a message
Subscribe with an lv_obj
Unsubscribe
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
Input 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.4.0 19 March 2024
Breaking Changes
Architectural
New Features
Performance
Fixes
Docs
Others
Roadmap
v8.2
Ideas
LVGL
»
Overview
»
Renderers and GPUs
»
SDL renderer
Edit on GitHub
SDL renderer
ΒΆ
TODO