Logo
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
  • »
  • 3rd party libraries
  • Edit on GitHub

3rd party librariesΒΆ

  • File System Interfaces
  • BMP decoder
  • JPG decoder
  • PNG decoder
  • GIF decoder
  • FreeType support
  • Tiny TTF font engine
  • QR code
  • Lottie player
  • FFmpeg support
Next Previous

© Copyright 2021, LVGL Kft. Last updated on Dec 22, 2024.

Built with Sphinx using a theme provided by Read the Docs.