* fix some errors in bidi algorithm when displaying arabic
* fix some errors in bidi algorithm when displaying arabic
* fix format error
Co-authored-by: liuxinh <liuxinh@landicorp.com>
Some platforms define uint32_t as "unsigned long" rather than "unsigned int".
The %d format specifier is mismatched and the C99 format macros are the only
portable way to handle these types.
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
* fix(config): check macro equal one correctly
1.remove all tabs from lv_conf_internal_gen.py
2.make the generated code align each other
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(conf): Make LV_COLOR_MIX_ROUND_OFS configurable
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(color): move LV_UDIV255 to lv_math.h
since lv_math.h is better place for the computation function
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(color): replace the inifite loop with LV_ASSERT
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(anim): fix the callback type error of lv_anim_set_start_cb
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* feat(anim): add lv_anim_custom_get which paired with lv_anim_get
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
In v8.0 the header was a detached object which made it difficult to move the header and the calendar
together. Besides there were no way to notifi the header of the calendar's shown date has changed.
BREAKING CHANGE: API of cleander headers, the appearence of the calendars
related to #2573"
* fix(format): remove LV_FORMAT_ATTRIBUTE from the function body
since it's enough to append LV_FORMAT_ATTRIBUTE to function declaration
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(format): add LV_FORMAT_ATTRIBUTE to lv_snprintf and lv_log
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(format): fix the format specifier warning
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* Fixes for MP support for LVGL 3rd party libraries
Add missing lv_qrcode_class
Remove 'struct JDEC' from public API. This struct is needed intenally on tjpgd.c and lv_sjpg.c, but doesn't need to be exposed in the public API. When exposed, it increases Micropython binding program size and some fields are not supported today (uint8_t* huffbits[2][2]). To overcome this, moved it to a new H file which is not included in public API, only in sjpg C files
Related: https://github.com/lvgl/lv_binding_micropython/issues/180
* lv_qrcode: add lv_class_qrcode
Must define a distinct class for every widget, to allow Micropython bindings convert lv_obj_t into the specific class
* gifdec.c: fix uninitialized
ESP32 reports some potentially uninitialized variables. Initialize them to prevent the errors
* src/extra/libs/sjpg: smaller public header
Only keep lv_split_jpeg_init in public header, since JPEG is used with image decoder
* Remove tjdec.h
* fix(fs): replace all tab to space and other minor style fix
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(extra/fs): rename lv_fs_libs.h to lv_fsdrv.h
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(extra/fs/stdio): fix the wrong directory path in fs_dir_open
and remove the duplicated or platform specific code
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(extra/fs/posix): implement in fs_dir_read
and fix the wrong directory path in fs_dir_open
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(extra/fs/posix): return file handle directly to avoid malloc
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* test(txt): Add test for identifying empty text when trying to get next line
* test(txt): Rename next line empty string handling test
* test(txt): Add tests for _lv_txt_is_cmd
* test(txt): Add initial tests for _lv_txt_ins
* fix(txt): Check for NULL before using strlen
Passing NULL to strlen is not defined, so we should avoid it
* txt: Update docs
Remove docs from source file and add comment about pointers to NULL terminated arrays where necessary
* txt: Misc update in encoded_size
* test(txt): first tests for _lv_txt_cut
* tests: Remove -Wmissing-prototype flag from compilation
This will allow us to have cleaner test cases files.
* test(txt): Remove test (funtion) prototypes as they're no longer necessary
* Update src/misc/lv_txt.h
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
* Update src/misc/lv_txt.h
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
* Revert "tests: Remove -Wmissing-prototype flag from compilation"
This reverts commit 8b3217de8d9210eb2e6da5e94c0735beb2735be7.
* test(txt): Use pragma to disable missing-prototype warning
* test: use extended set of compile options for test cases
* Revert "test(txt): Use pragma to disable missing-prototype warning"
This reverts commit 64909e30ed124ca1e8ca390ca0639479c3e34f44.
* test(txt): Add assert to test_txt_cut_len_longer_than_string test
* test(txt): Add test for _lv_txt_encoded_next on valid ascii input
* test(txt): Add tests for _lv_txt_encoded_next with 2 byte long inputs
* test(txt): Add tests for _lv_txt_encoded_next with 3 byte long inputs
* test(txt): Add tests for _lv_txt_encoded_next with 4 byte long inputs
* cleanup(txt): Add helper macros to identify ASCII and UTF8 codes
* cleanup(txt): Add missing LV_ prefix to helper macros
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
Co-authored-by: embeddedt <42941056+embeddedt@users.noreply.github.com>
* fix(conf): correct LV_USE_EXTERNAL_RENDERER and LV_USE_GPU_SDL related setting
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(Kconfig): typo error in the font and theme related setting
and correct the default value and sequence
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(Kconfig): Add the missing misc config
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(Kconfig): sync widget and theme in Kconfig with lv_conf_template.h
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(Kconfig): add the option for 3rd party library and examples
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(log): change fwrite to puts since not all platform support fwrite
This reverts commit 539388a66f.
* fix(log): don't call printf and custom_print_cb at the same time
* fix(log): remove 768B temp buffer if LV_LOG_PRINTF == 1
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* feat(printf): support %pV format specifier
to support the recursive print:
https://www.kernel.org/doc/html/latest/core-api/printk-formats.html
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(log): save 256B temp buffer if LV_LOG_PRINTF == 0
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* Update lv_spinbox.c
* Added support for moving the Spinbox digit position from right-to-left when clicking the button on an encoder. The default behaviour is when clicking the encoder button, the digit is moved from left-to-right (MSB to LSB).
* Added a check to see if the spinbox digit-count is just one. In that case it is pointless to check the buttonclick
* See also the spinbox.h file
* Update lv_spinbox.c
* Forgot the implementation of the setter function
* forgot a ;
* Update lv_spinbox.h
Adding Spinbox support for moving the digitposition both from left-to-right and right-to-left when editing a spinbox and clicking the encoder button. The current behaviour is clicking the encoder button only moves the digitposition from right to left (from MSB to LSB)
* Update lv_spinbox.c
Added brief / comment to new function
* Update lv_spinbox.h
More clear Brief / Comment
* Update lv_spinbox.c
nested function replaced by lv_pow fiunction
* Update lv_spinbox.h
removed spaces
* Update lv_spinbox.h
Replaced type used for direction of digit step when clicking an encoder with existing LVGL lv_dir_t
* Update lv_spinbox.c
Replaced type used for direction of digit step when clicking an encoder with existing LVGL lv_dir_t
* Update spinbox.md
Added comment for the new function 'lv_spinbox_set_digit_step_direction'
* Update src/extra/widgets/spinbox/lv_spinbox.h
Co-authored-by: embeddedt <42941056+embeddedt@users.noreply.github.com>
* Update src/extra/widgets/spinbox/lv_spinbox.h
Co-authored-by: embeddedt <42941056+embeddedt@users.noreply.github.com>
* Update lv_spinbox.c
bug: old definition LV_SPINBOX_DIGIT_DIR_TO_RIGHT changed to LV_DIR_RIGHT
* Update lv_spinbox.h
Extra linefeed removed
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
Co-authored-by: embeddedt <42941056+embeddedt@users.noreply.github.com>
This change introduces new fields on `lv_disp_drv_t` that allow to
specify the size of the full display and the offset of the display
subsection that is being rendered to. The values are used to transform
the drawing area before calling `flush_cb` so that only the desired part
of the full display is being rendered to.
Relates to: lvgl/lv_drivers#166
If a child has pct width and the parent has LV_SIZE_CONTENT width, it results in a circular reference.
With fix zero content width is assumed for children in such case.
Besides if a child is center or right aligned the calculation of LV_SIZE_CONTENT might give in conter intuitive result.
To solve this center and right aligned children are not considered in LV_SIZE_CONTENT calculations.
The same applies for height.
* test(arc): Add test for valid creation
* test(arc): Add test for max value truncation
* test(arc): Add test for min value truncation
* test(arc): Add test for value adjustment after updating range
* test(arc): Update test for min value truncation
* test(arc): Add test for angle updating after changing to symmetrical mode
* test(arc): Add test for angle updating after changing to symmetrical mode and value is greater than middle range
* test(arc): Use unity setUp function
* remove API comments from lv_arc.c
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
* Create lv_example_chart_9.py
lv_example_chart_9.c was exactly what i needed, thanks for that one!
the only thing is, i needed it in MicroPython :-)
Here it is
* Update lv_example_chart_9.py
removed duplicate (... = lv.CHAR_POINT.NONE) lines
* Update lv_example_chart_9.py
restored gap
allocate_btn_areas_and_controls() returned very early if the same number buttuns were set
the the number fo rows can be different and is wasn't updated
fixes#2619
* feat(theme) add getter function for default theme
* fix(disp) set default theme also for non-default displays
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
* docs(animimg) Add missing animation image page
Skeleton page for the new `animimg` object.
It needs more review and updating, but this can serve as a start.
* docs(examples) Add index.rst for animation image
Add index.rst for animation image to include the example in the documentation of the widget.
* Update animimg.md
* fix(chart) draw line chart indicator (bullet)
There was a missing bullet if the previous point was LV_CHART_POINT_NONE
* feat(example) add chart example with gap in circular mode
* add missing prototype
* fix(snapshot) image is affected by parent's style because of wrong coordinates
Signed-off-by: Neo Xu <neo.xu1990@gmail.com>
* fix(snapshot): take ext_draw_size into account and set disp res to obj size.
Signed-off-by: Neo Xu <neo.xu1990@gmail.com>
Change-Id: Iae0d37fa1b2cdf20220087ced51857a36e83bb6d
This commit replaces the current `actual & expected` check in
`lv_btnmatrix_has_btn_ctrl` with `(actual & expected) == expected`. This
is required to make the function work with ORed control flags because
otherwise a parity in *any* bit will result in a return value of `true`
even if not all expected bits are set.
* test(checkbox): Add initial test for checkbox
* test(checkbox): Add test_checkbox_should_have_default_text_when_created
* test(checkbox): Add test_checkbox_should_return_dinamically_allocated_text
* test(checkbox): Add initial tests for static text
Tests are failing tho
* test(arc): Rename bugfix test to arc
Also adds reference to issue in a comment
* test(checkbox): Tests for static text passes
* test(checkbox): Remove test for memory freeing when static text is refreshed
NULL isn't a valid parameter in lv_checkbox_set_text_static
It was used to position the text in one line text areas where the label is shorter then the text area itself.
However, setting min_width=100% in case of one line text area ensures that the label is at least as wide as
the text area. This way the normal text_align style property can be used too.
Fixes https://forum.lvgl.io/t/spinbox-text-centering-not-working-as-intended-expected/6762/4
* feat add stacked area chart example
The example shows how to use a line chart and masking to create a stacked area chart.
* feat stacked area chart example
Updated index.rst to contain the stacked area chart example
* feat stacked area chart example
Coding style changes
* Update changelog
* feat(example) stacked area chart
Added axis ticks
* feat(example) stacked area chart
Responses to PR comments
- Changed to fixed point maths
- Renamed variables and filenames
* feat(example) stacked area chart
Made shift amount a variable.
* feat(example) stacked area chart
Fixed typo in changelog
Co-authored-by: Tom Hepworth <Tom_Hepworth@mentor.com>
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
Prior to this commit, when the title string was empty and the close
button disabled, an extra empty line showed at the top of the message
box. This commit prevents adding the title label unless it has content
or is needed as a spacer for the close button.
As a positive side effect, this also prevents the default "text" from
displaying when NULL is passed as the title.
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
This adds a new function lv_msgbox_get_active_btn that works analogously
to lv_msgbox_get_active_btn_text but returns the button index instead of
its text.
The index is more convenient for comparison in localized applications as
it doesn't depend on the current language.
* - renamed lv_obj_get_id(obj) to lv_obj_get_index(obj).
- added lv_obj_move_to_index(obj, index).
* automatic review comment fixed
* removed unused variable
* review issue
* restored deprecated function in header, otherwise Build Micropython with LVGL submodule / build (pull_request) failes
* moved deprecated lv_obj_get_child_id() back to lv_obj_tree.h, otherwise Micropython will not build
* inline function did not work
* made deprecated function 'static inline'
* and now also inline
* move static inline function to lv_api_map.h again
* removed lv_obj_move_up/down
* changed log to warning for deprecated function
* redefined lv_obj_move_foreground(obj) and lv_obj_move_background(obj) as inline functions now calling lv_obj_move_to_index(obj, index).
- lv_obj_swap(obj1, obj2) added. (#2461)
* fixes for rp2 port (only format strings: int/int32_t mismatch, %d -> %ld)
* use portable PRId32 printf format, #include <inttypes.h> via lv_printf.h
* define LV_PRId32 macro (for int)
* figure out good way to build inside Micropython (plus indentation)
* re-add examples (lost on the way)
* hopefully fix PRI32d
* Revert off CMakeLists.txt changes so that this is about printf only
Create one GitHub workflow job for each build option build
or test execution. This allows each of the five builds to
be executed in parallel as well as making it easier to
navigate to the test output as it now resides in its own
job.
This change **does** change the command-line arguments to
the test execution script. This is required to allow the
build options name to be passed in.
New `tests/main.py` command-line help:
```
usage: main.py [-h] [--build-options BUILD_OPTIONS] [--clean]
[--report]
[{build,test} [{build,test} ...]]
Build and/or run LVGL tests.
positional arguments:
{build,test} build: compile build tests, test:
compile/run executable tests.
optional arguments:
-h, --help show this help message and exit
--build-options BUILD_OPTIONS
the build option name to build or run.
When omitted all build configurations
are used.
--clean clean existing build artifacts before
operation.
--report generate code coverage report for
tests.
This program builds and optionally runs the LVGL test programs.
There are two types of LVGL tests: "build", and "test". The
build-only tests, as their name suggests, only verify that the
program successfully compiles and links (with various build
options). There are also a set of tests that execute to verify
correct LVGL library behavior.
```
* refactor(img) the function name spelling error
* fix(imgbtn) imgbtn display incorrect when the coordinate is negative
* imgbtn is ok now
* fix the potential bug that maybe it can not run into the "for" loop correctly
Simplifies `tests/main.py` as it no longer needs to invoke
tests individually or keep track of and report their pass/fail
status.
Also enables the ability to run tests in parallel, support timeouts,
and re-run flaky tests.
https://cmake.org/cmake/help/latest/manual/ctest.1.html
Simplified workflow and documentation, by moving the
development package prerequisites into a new build script
`scripts/install-prerequisites.sh`.
Also, moved prerequisite installation into its own CI step and
removed explicit working directory change as it is no longer
needed (`main.py` does it).
* Convert tests/Makefile to a cmake project file.
This change switches the building of LVGL tests to use cmake
which is more portable than make. Additionally, whenever
cmake can be used, instead of the Python script (`main.py`),
the former is preferred.
The interface to `main.py` is unchanged, and tests are built
and executated the same as before.
This closes https://github.com/lvgl/lvgl/issues/2474.
* Installing `gcovr` in GitHub workflow.
* Documented steps to install libpng-dev.
* Added missing stdout flush when running tests.
* Grammar tweak in README.
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
line 32 of lv_example_scroll_6.c, if LV_USE_LARGE_COORD not configured,
x_sqr will overflow when r is greater than 256.
Signed-off-by: liushuai25 <liushuai25@xiaomi.com>
Co-authored-by: liushuai25 <liushuai25@xiaomi.com>
* Refactor unit test scripts.
Does the following:
1. Remove as many dependencies on the operating system shell as possible.
For example, use of shutil.rmtree(...) instead of os.system('rm -r ...').
This brings this script a bit closer to being able to run on Windows.
2. Switch from os.system() to subprocess.check_call().
* This is a bit more secure as check_call() directly invokes the subprocess
without evaluation the arguments on a command-line.
* Removes the need to evaluate the return code as check_call() does this.
* Can directly set environment variables (e.g. env=cmd_env) instead of
including with subprocess invocation (e.g. BIN=test.bin).
3. Minor cleanup to main.py sys.argv parsing.
4. PEP8 formatting.
* Ignore FileNotFoundError for rmtree('report').
* Back to os.system for gcovr.
* Removed unused shutil import.
* - small with unneeded lv_obj_invalidate() fix in lv_obj_move_foreground() and lv_obj_move_background()
- added lv_obj_move_up() and lv_obj_move_down()
- used new functions in sample 2
- used lv_obj_swap() to shuffle (turn around) list
* solved build error
* added top and bottom buttons in sample
* fix(buf) correct the name error
* fix(format) make the indent become 4 space
* fix(print) use lv_version_xxx to serial for debug
* fix(arduino) optimize the code
* fix(arduino) use lv_version_xxx to serial
* docs(overview) fix draw_buf fieldname
Change display driver buffer field to the new v8 field name: draw_buf.
* docs(overview) fix lv_img_create parameters
lv_img_create only has 1 parameter in v8.
* docs(get-started) fix draw_buf fieldname
Display driver `buffer` field changed to the new v8 field name: `draw_buf`.
Commit f2c2393b30 (#2420) breaks lv_micropython esp32 port. Apparently main dependency is require for LVGL when building Micropython, otherwise GC related code breaks
This commit adds 'main' dependency to LVGL conditionally only if building inside lv_micropython.
We do not use clang-format anymore, so the directive has been removed from most headers.
lv_conf_template.h is untouched as a convenience for downstream projects which still use the tool.
Fixes#2441
This reverts commit 76a8293375.
Revert because it breaks the drop down list.
If the dropdown list is opened and the parent is scrolled
the dropdown is not defocused and not closed.
Fixes#2417
Changes the name of the CONFIG variable from
LV_THEME_DEFAULT_PALETTE_LIGHT to LV_THEME_DEFAULT_DARK.
Most likely it should have been included in
4f46336a54
* perf(draw) reimplement circle drawing algorithms
Imporve the speed of circle drawing
Add circle draw caching
Various other speed improvements
* docs describe how to use masks
* fix(draw) add missing GC root usage
* animation:add demo to use cubic-bezier
* fix minor fixes on layout and chart
Co-authored-by: guoweilkd <guowei15@xioami.com>
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
While it's possible to try initialize LVGL after it is already initialized, it warns 'lv_init: already inited' in such case. Therefore it is useful to be able to check on runtime whether LVGL was initialized or not before calling lv_init().
* Fix image zooming causes unexpected object size.
Signed-off-by: Xu Xingliang <xuxingliang@xiaomi.com>
* add lv_snapshot_take API.
* fix(img) invalidate size and layout on zoom and angle change
* fix(img) not self-repeating under some zoom level.
* fix(snapshot) fix to keep the original position
* Move various set_px_cb_xx functions to lv_hal_disp.c
* add snapshot API to store image to provided buffer
* minor fixes and refactoring
* Move snapshot source to extra/others/snapshot.
1. Update parameter buff to buf.
2. Add macro to disable lv_snapshot, enabled by default.
* docs(others) add the others folder with snapshot.md
* docs(snapshot) added doc and example for snapshot.
1. Update doc snapshot.md
2. Add example lv_example_snapshot_1 to folder examples/others/snapshot
3. Update lv_conf_template.h and lv_conf_internal.h
4. Remove lv_snapshot.c from lv_misc.mk
5. Add others to index.md
Signed-off-by: Xu Xingliang <xuxingliang@xiaomi.com>
* add micropython example for snapshot
Co-authored-by: Xu Xingliang <xuxingliang@xiaomi.com>
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
If a style properties with LV_STYLE_PROP_LAYOUT_REFR is applied
on a not MAIN part it might effect the size if the size is LV_SIZE_CONTENT.
So check it in lv_obj_refresh_style()
Previously if the obejct were pressed and scrolled the parent by scroll chaining
focus event were sent. If the focusing is moved to the release phase we can detect if there were scroll.
Small improvements:
- Remove cast from get_pressed_date
- Check return value of get_pressed_date
- Call set_today_date on clicked date
- Compact highlighted_days
- Added a switch to show different header type
Add lv_<widget>_draw_part_type_t to widgets to precisly describe the hooked drawings.
Also add class_p element to lv_obj_draw_part_dsc_t to show what widgets lv_<widget>_draw_part_type_t needs to be used.
Related to: https://forum.lvgl.io/t/how-to-add-minor-division-lines-to-a-chart/5366/
* Fixes to micropython examples
Added missing images and fonts under 'assets'. Since .bin is in gitignore, renamed fonts to .fnt
* Update build_micropython workflow
Build the unix port dev variant and run tests.
See: https://github.com/lvgl/lv_binding_micropython/issues/151
replace FSL_RTOS_FREE_RTOS by SDK_OS_FREE_RTOS in order to be aligned
with MCU SDK 2.10.
See MCUX-41577.
Signed-off-by: Seb Fagard <sebastien.fagard@nxp.com>
includes updates coming from NXP MCU SDK 2.10 with adaptation for lvgl v8:
Fixed BLIT offset computation
Previous implementation didn't take into account a possibility of
non-zero offset in source image, so output was wrong if offset was used.
With this fix, CPU and VG-Lite output is the same even with offsets.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
gpu: vglite: Buffer sync with BLITs
Added buffer synchronisation with BLITs instead of memcpy for VG-Lite.
In LVGL v8, buffer synchronisation acceleration is moved to littlevgl_support.c.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
gpu: vglite: Fixed BLIT boundary
Fixed artifact issue revealed by buffer sync with BLIT feature. Caused
by wrong BLIT boundary.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
gpu: vglite: BLIT quality degradation workaround for RT595
Limitation in RT595 causes BLIT image quality degradation when
coordinates are above 368 px. This patch implements workaround that will
break the BLIT into multiple smaller BLITs, so the quality is not
affected for higher resolutions.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
gpu: vglite: Fix address alignment and stride requirements
Fixed multiple issues:
- The VGLite alignment requirement checks for the pixel destination
buffer are not applicable in our case of Linear (non-tiled) format.
- Some VGLite stride requirement requirement should be expressed in bytes,
not in pixels.
- Fix the Y alignment function to ensure that line starts at an address
that the respects the alignment requirement of VG-Lite.
Such mistakes do not break application,
but cause a fallback to non-accelerated Blit by CPU.
See MGG-741.
Signed-off-by: Seb Fagard <sebastien.fagard@nxp.com>
gpu: vglite: fix some MISRA C 2012 violations
fixed 56 violations: mainly implicit format casts
and unchecked returned values.
see JIRA MCUX-43327
Signed-off-by: Seb Fagard <sebastien.fagard@nxp.com>
gpu: vglite: fix stride requirement in _init_vg_buf()
fix unit: need to convert the alignment requirement into bytes when checking
stride parameter.
fix condition: stride requirement applies only on source buffers.
Signed-off-by: Seb Fagard <sebastien.fagard@nxp.com>
gpu: vglite: updates for v8
cache callback type changed in display driver struct
Signed-off-by: Seb Fagard <sebastien.fagard@nxp.com>
gpu: vglite: update parameter type for v8
display driver is now a pointer in structure.
Signed-off-by: Seb Fagard <sebastien.fagard@nxp.com>
includes updates from NXP MCU SDK 2.10 with adaptation for lvgl v8:
Updated cache handling
- range limited cache flushing changed to complete cache flush, which is
faster and shold be safe
- flushing done via callback system, so OS specific code is removed
from LVGL
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
gpu: pxp: Buffer sync with BLITs
Added buffer synchronisation with BLITs instead of memcpy for PXP.
In LVGL v8, buffer synchronisation acceleration is moved to littlevgl_support.c.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
gpu: pxp: updates for v8
cache callback type changed in display driver struct
chroma key name changed
Signed-off-by: Seb Fagard <sebastien.fagard@nxp.com>
gpu: pxp: new log header file for v8
Signed-off-by: Seb Fagard <sebastien.fagard@nxp.com>
core: init PXP accelerator
Signed-off-by: Seb Fagard <sebastien.fagard@nxp.com>
* Spinbox set cursor to specific position (funct.)
* changed exp10 to lv_pow(10
* Update lv_spinbox.c
resolved indentation
* Update spinbox.md
Added lv_spinbox_set_pos description
Co-authored-by: Sebastian Dyker <sebastian.dyker@walther-systemtechnik.com>
- Changed all text based instances of LVGL to uppercase (Only instances referring to LVGL the project, not instances referring to the ‘lvgl’ directory structure in the repository, or in URL links)
- Standardized bulleted/numbered list capitalization and punctuation
- Fixed several typos and spelling errors
- Changed minor grammatical errors and structure for clarity.
Instead of returning bool to indicate that there is more data to read
set data->continue_reading = true.
It's less error porne because if the user doesn't set the flag the indev will be read once
which is usually the inteded behaviour.
* Extra: widgets: add a new widget animation image
This widget is a combination of img and animation,
could achieve animation effects by
constantly switching a series imgs.
Signed-off-by: Qiang Zhao <qiang.zhao@nxp.com>
Signed-off-by: Hui Song <hui.song_1@nxp.com>
Signed-off-by: Xiaolin He <xiaolin.he@nxp.com>
* example: add animimg example
Signed-off-by: Qiang Zhao <qiang.zhao@nxp.com>
* feat(theme_default) improvements to dark mode
* fix(theme_default) adjust scrollbar opacity in dark mode so it's visually similar to light mode
* fix(theme_default) improve contrast in dark mode
* fix(obj) Add missing getter and setter for user_data
This is needed for Micropython bindings, which stores a reference to the Python object which wraps the LVGL object.
* Added comments to lv_obj_[get/set]_user_data
This way the MicroPython won't allow manually setting this field.
And it can't be set manually becasue the user data needs to be set too.
So lv_style_transition_dsc_init() should be used to initialize the fields of lv_style_transition_dsc_t
lv_anim_path_t was required for the MicroPython binding becase the callback couldn't attached dircetly to the styles
However, in v8, path_cb is used in the style transitons which has user_data and that user data is passed to the transition animation. Hence the path_cb sees the the same user data during the animaton as when it was registered to the transiton.
To maintain uniformity of comment formatting, but primarily to work around a deficiency in the rust library bindgen (0.58 and earlier), comments should be separated by a newline.
* fix(class): correct the typo error in comment
* fix(class): return directly if the memory allocation fail
* fix(class): remove the unused code
* fix(class): remove parent argument from lv_obj_construct
since this argumnet is really used
* fix(class): replace stddef.h with stdint.h
since uint32_t is defined in stdint.h
When a display is registered the act_screen, top_layer and sys_layer are created with the default theme.
If a new theme is set immediatelly after the driver regsitration (with lv_theme_set_act) the created screens should use the styles from the new theme.
If there are more obejct do not add the theme becasue it's possibelt that the user already added styles to the screens and applying the theme would clear these styles.
follow up the commit:
commit e9cc1c2d46
Author: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
Date: Wed Mar 10 13:07:15 2021 +0100
feat(driver): raname lv_disp_buf_t to lv_disp_draw_buf_t + save only the drv's pointer in lv_disp_t
* fix(disp): correct the typo error in comment
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
* fix(disp): fix the field definition
1.change rotated from 3bits to 2bits since lv_disp_rot_t has only four value
2.change inv_p from 10bits to uint16_t to avoid the bit operation
3.reorder bg_opa to save the memory space
* fix(disp): remove the unnecessary field zero
since lv_memset_00 is already done for the main struct
* fix(disp): handle the out of memmory gracefully
* fix(disp): delete the refresh timer in lv_disp_remove
* fix(disp): handle NULL pointer correctly in lv_disp_[g|s]et_rotation
like other similar(allow NULL disp) functions
* fix(disp): call lv_area_set_[width|height] in lv_disp_drv_update
to remove one extra row and column
follow up the commit:
commit e9cc1c2d46
Author: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
Date: Wed Mar 10 13:07:15 2021 +0100
feat(driver): raname lv_disp_buf_t to lv_disp_draw_buf_t + save only the drv's pointer in lv_disp_t
* feat(mem): add initial version of tlsf
from : https://github.com/mattconte/tlsf
commit: deff9ab509341f264addbd3c8ada533678591905
* feat(mem): switch the default allocator to tlsf
* fix(mem): remove the preserved small buffer
since the builtin allocator(tlsf) is fast enough now
* fix(mem): change LV_MEM_ADD_JUNK to 0
to speed up the normal operation
Remove dead code in lv_label and lv_spinbox, there is already lv_obj_handle_get_type_signal() call higher up.
Change lv_led to use lv_obj_handle_get_type_signal() like other widgets do.
* fix(hal indev): correct the typo and adjust the alignment
* fix(hal indev): remove the unnecessary forward declaration
* fix(hal indev): relayout the bitfiled to save space
* fix(hal indev): remove the unnecessary memory zero
* fix(hal indev): remove the initial hardcode value for scroll_throw
* fix(style): remove the wrong first break statement from lv_style_prop_get_default
and correct the comment and style
* fix(style): handle the out of memory gracefully in lv_style_[set|remove]_prop
* fix(fs): don't allocate lv_fs_file_t in lv_fs_open
avoid the unnecessary allocation
* fix(fs): apply the similar file open/close change to dir open/close
avoid the unnecessary allocation
commit 06917a6ec3
* fix(image decoder): fix memory leak when no decoder can be used
and handle the out of memory gracefully
* fix(image decoder): zero the output fields after each iteration
to clean the stale info saved by try failed decoder and remove img_data
zero from lv_img_decoder_built_in_open since it has be done in the loop
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
* fix(gc): remove the unused variables from gc
* fix(gc): correct typo(from _lv_img_defoder_ll to _lv_img_decoder_ll)
* fix(gc): change _lv_drv_ll to _lv_fsdrv_ll
since only instances fo lv_fs_drv_t can be added to this list
* fix(gc): Iterate the root variables only when they are really used
to save the memory space
* fix(image cache): move cache_temp to gc.h
and rename it to _lv_img_cache_single
* fix(mem): reutrn NULL in lv_mem_buf_get if allocation fail
* fix(mem): refine the loop in alloc_core to simplify the logic
* fix(mem): remove the lv_mem_buf declaration from lv_mem.h
since it already declared in gc.h
* fix(timer): remove LV_GC_INCLUDE inclusion since it doesn't need anymore
please see commit d6ca15a749 for more info
* fix(timer): implement lv_timer_create directly
and call it in lv_timer_create_basic
* fix(timer): exclude the return value computing from the idle time
and change handler_start and time_till_next to local variables
* fix(timer): restart the timer process loop correctly
* fix(timer): skip the count pause timer into next timeout
it's wrong to check repeat_count since the timer is always
removed from the list once the repeat_count change to zero
* fix(timer): remove zero task_deleted and task_created in lv_task_exec
since the loop in lv_task_handler already do the same thing
* fix(image cache): don't need zero dec_dsc field individually
since the next _lv_memset_00 cover this field too and
* fix(image cache): shouldn't call lv_img_decoder_close when lv_img_decoder_open fail
* fix(image cache): fix the cache match algo
1.check cache entry is LV_IMG_SRC_FILE before invoke strcmp
2.ensure lv_img_cache_invalidate_src use the same algo
* fix(style): correct the comment and alignment
* fix(style): remove the unused macro and inclusion
* fix(style): correct _lv_style_get_xxx with the right pointer type
* fix(style): handle the out of memory gracefully
* fix(style): unify the term usage(class->style)
* fix(style): remove the unnecessary mask in _lv_style_get_xxx
since get_property_index ensure the returned state is a subset of required
* fix(style): centralize the style validation in one place
* fix(style): reuse the new_prop_size in _lv_style_set_xxx
* fix(style): correct the return value of get_style_prop in big endian machine
* fix(image decoder): replace lv_style.h with lv_color.h
since image decoder doesn't depends on style subsystem
and correct the related comment and some error handling
* fix(image decoder): fix memory leak when no decoder can be used
and handle the out of memory gracefully
* fix(image decoder): zero the output fields after each iteration
to clean the stale info saved by try failed decoder and remove img_data
zero from lv_img_decoder_built_in_open since it has be done in the loop
* fix(image decoder): check .bin suffix in lv_img_decoder_built_in_info
align with what has done in lv_img_decoder_built_in_open
* fix(image decoder): embed lv_fs_file_t directly to save the memory
and handle the abnormal case gracefully(avoid crash or leak)
* fix(image decoder): simplify decode builtin alpha/index bitmap
* fix(anim): relayout lv_anim_t to save 4 bytes
and fix the minor comment issue
* fix(anim): unify the type of time and animation to int32_t or uint32_t
since lv_anim_t use these types internally
* fix(anim): Don't need initialize last_task_run
since lv_anim_start will do this if the list is empty
and remove -1 to improve the accuracy
* fix(anim): remove the return value from anim_ready_handler
since no caller really use the return value
* fix(math): _lv_map check x >= max_in first
_lv_map return max_out when min_in equals max_in,
since the animation module require this behaviour
* fix(anim): normalize the time elapse by lv_map
* fix(anim): avoid iterate the list twice in anim_task
* fix(theme): the minor typo error
* fix(style): make lv_style_reset work with zerod memory
* fix(theme): fix the memory leak when lv_theme_xxx_init is called twice
due to inited variable forget to set to 1
* fix(theme): empty theme should call lv_obj_refresh_style too
and remove lv_obj_clean_style_list since the same thing is
already done in the common code(clear_styles)
* fix(lv_conf_internal.h): remove esp specific inclusion
since the same thing is already included in lv_conf_kconfig.h
* fix(library.json): change space to tab
* fix(anim): relayout lv_anim_t to save 4 bytes
and fix the minor comment issue
* fix(anim): unify the type of time and animation to int32_t or uint32_t
since lv_anim_t use these types internally
* fix(anim): Don't need initialize last_task_run
since lv_anim_start will do this if the list is empty
and remove -1 to improve the accuracy
* fix(anim): remove the return value from anim_ready_handler
since no caller really use the return value
* fix(anim): normalize the time elapse by lv_map
* fix(anim): avoid iterate the list twice in anim_task
* Add component.mk file for esp-idf make commands
* component.mk: Check for IDF_VER
Checks for IDF_VER when adding COMPONENT_SRCDIRS and COMPONENT_ADD_INCLUDEDIRS
to avoid definig them when not using LVGL as ESP-IDF component.
* component.mk: Remove info messages
* fix(font): Remove the unnecessary and duplicated inclusion
and correct some wrong comment too
* fix(font): Handle the out of memory gracefully in decompression case
and remove the check of gdsc since it is impossible to become null
* fix(font): Use the correct type to avoid the cast and shift
* fix(font): Change the bit field width to occupy the whole byte
* fix(font): Correct _LV_STR_SYMBOL_ generation command
and add _LV_STR_SYMBOL_BULLET to the list
* fix(font): lv_font_load shouldn't call lv_fs_close if lv_fs_open fail
* fix(font): read_bits should return 0 not -1 in error case
to avoid read_bits_signed waste time to extend the sign bit
* fix(font): Correct the return type of read_bits to unsgined int
and extend the sign bit more efficient and correct
* fix(font): Sync LV_FONT_FMT_TXT_CMAP_ value to binary font spec
and then remove the hard code value from source code:
https://github.com/lvgl/lv_font_conv/blame/master/doc/font_spec.md#L96
remove zero fields statement too since font_dsc->cmaps already zero at line 334.
* fix(font): Improve the performance by reading cmap table by once
* fix(font): Improve the loading performance if the header is multipled by 8bits
* fix(font): Read loca table in batch if the size is 32bits
* fix(font): Load the underline related attributes
spec here:
https://github.com/lvgl/lv_font_conv/blame/master/doc/font_spec.md#L55-L56
* fix(task): Remove the unnecessary cast and init
and correct the comment too
* fix(task): Implement lv_task_create directly
to avoid lv_task_set_prio which is a time consuming operation.
* fix(task): Exclude the return value computing from the idle time
and change handler_start and time_till_next to local variables
* fix(task): Remove zero task_deleted and task_created in lv_task_exec
since the loop in lv_task_handler already do the same thing
* fix(color): Return the opposite value in lv_color_premult when LV_COLOR_DEPTH equals 1
and correct the comment too
* fix(color): Correct the comment and alignment issue
* fix(color): Remove LV_COLOR_[SET|GET]_G16_SWAP
to simplify LV_COLOR_16_SWAP process
* fix(color): Correct the cast usage
* fix(color): Remove LV_MATH_ABS in lv_color_rgb_to_hsv
since delta can never become a negative number
* fix(color): Align LV_COLOR_[SET|GET]_A1 with other similar macro
* fix(area): Correct r_sqrd and dist(int32_t to uint32_t)
since these two variables never become negative
* fix(area): Return early in _lv_area_is_in if pointer outside area
The origin code always does the full check if radius != 0, but it
is unnecessary when is_in equals true.
* fix(mem): Utilize ALIGN_MASK as much as possible
to avoid check LV_ARCH_64 again and again and
correct the comment about MEM_UNIT
* fix(mem): Simplify _lv_memset implementation by SET8/SET32/REPEAT8 macro
* fix(mem): Handle the out of memory gracefully in _lv_mem_buf_get
don't modify the state in the failure
* fix(mem): Remove the unnecessary memset, memcpy and assignment
* Move LV_GC_INCLUDE to the common place(gc.h)
to avoid the duplication in many source files
* fix(theme template): Always initialize _lv_theme_material_styles
just like what other theme do
* fix(fs): Check driver ready in lv_fs_dir_open and lv_fs_free_space
* fix(fs): Avoid the memory leak in lv_fs_open and lv_fs_dir_open
* fix(fs): Fix typo error in lv_fs_trunc(tell_cb should be trunc_cb)
* fix(fs): Make lv_fs_dir_close same as lv_fs_close when dir_close_cb equals NULL
* fix(fs): Handle the struct cleanup correctly
* improve(fs): Don't allocate memory when file_size or rddir_size equal zero
pass the address of file_d or dir_d to open_cb or dir_open_cb instead, so
implementor can point file_d/dir_d to other location. In many cases(POSIX),
file system will allocate the context for us, this improvement could avoid
we allocate the 4/8 bytes intermediate space.
* fix(async): Move lv_async_info_t from lv_async.h to lv_async.c
since the user don't need know the implementation detail
* fix(async): Don't set user_data again
since lv_task_create already save it for us
1.all argument of _lv_bezier3 should be uint32_t since the input and output are unsigned
2.the return type of _lv_map should be int32_t since the type of output range is int32_t
3.remove the unnecessary cast
* Trim trailing whitespace from Kconfig
* Replace all tab to space in Kconfig
* Add more dependence between opions to Kconfig
* Add LV_USE_FONT_SUBPX for LV_FONT_SUBPX_BGR in Kconfig
* Fix typo error(LV_USE_DROPBOX->LV_USE_DROPDOWN) in Kconfig
* Remove LV_THEME_MATERIAL dependence from the child of LV_THEME_DEFAULT_FLAG
since LV_THEME_DEFAULT_FLAG already depends on LV_THEME_MATERIAL
* Rename LV_MEM_SIZE_BYTES to LV_MEM_SIZE_KILOBYTES
since this opion use KiB as the unit
* Release v7.7.0
* Fix(indev): Don't leave edit mode if there is only
one object in the group
* Remove unnecessary judgment conditions
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
* Removed src/lv_conf_zephyr.h
Removed src/lv_conf_zephyr.h as it is maintained in the Zephyr build it self.
* CMakeLists.txt: Added support for Zephyr RTOS
Added support to build LVGL as library for Zephyr RTOS
* Added support to use LVGL repo as Zephyr module
Added support to use the LVGL repository as a Zephyr module repository
* quote string defaults for Kconfig values to eliminate warnings
* don't add \ in default for LV_TICK_CUSTOM_SYS_TIME_EXPR
(tho its needed on linux and MacOS) as I can't test on Windows
* Fix division by zero issue when all points are equal
As the title says, when all the points are equal, it attempts division by zero, and in some cases it can result in funny behavior.
Slightly kludgy fix, but not a significant performance impact.
* Actually fix the division by zero issue both ways
Previous commit was slightly broken and only worked one way
* Fix range setting instead of drawing
* Missing y_tmp
* Removed LV_CONF_SKIP definition from CMake to avoid redefinition warnings; added more Kconfig options
* Bumped up version and removed unnecessary default values
* Added user data configuration to KConfig
* Moved user data options to "Feature Usage" menu
* Add option to align title text in window
I found that i really needed a basic way to align the title text in a window, and therefore i did a bit of tinkering and came up with this solution. Mind you that I'm very new to this so it might not be the most optimal way. I have tested a bit and it pretty looked promising,
I have of course written the alignments as I felt was most suitable, but I shouldn't be the judge of that.
Current alignment:
LV_TXT_FLAG_CENTER makes the text align in the center of the header but ensures it can’t overextend into to header button area;
LV_TXT_FLAG_RIGHT makes the text align at the right side, but takes the right side header buttons into account
LV_TXT_FLAG_FIT & LV_TXT_FLAG_EXPAND I wasn’t too sure about what to do so as of now it just aligns them as normal
LV_TXT_FLAG_NONE Is equal to no flag set by the user and therefore I have just set it to the default coords, like normal. The text then align at the left side.
* Update lv_win.h
* Added functions
Added function to set and get alignment of the header title as requested
* Added functions
Added setter and getter functions for the header title alignment as requested
* Kconfig: Add missing _HEX to LV_COLOR_TRANSP option.
* lv_conf_checker: Define LV_CONF_SKIP if CONFIG_LV_CONF_SKIP is defined.
* fix(indev): disabled object shouldn't absorb clicks but let the parent to be clicked
* Update README.md
* fix(arabic): support processing again alraedy processed texts with _lv_txt_ap_proc
* fix(textarea): support Arabic letter connections
fixes#1888
* Fix#1924: incorrect date on changelog
December 1st is two weeks from 7.7.2 release.
* Kconfig: Fix LV_CONF_MINIMAL related options.
* fix(arabic): support Arabic letter connections
fixes#1920
* fix(arabic): support Arabic letter connections in value string property
* Update CHANGELOG.md
* Update CHANGELOG.md
* Kconfig: Add Zephyr specific code.
* fix: fix double include in lv_obj.c
fix#1926
* Removed trailing semi-colon from macros (#1928)
* Removed commented out test definition
Removed commented out test definition LV_BUILD_TEST
* Remove blank line
* Fix comment spelling
* Added blank line
* Removed trailing semi-colon in macros
* fix(indev): in LV_INDEV_TYPE_BUTTON recognize 1 cycle long presses too
Fixes https://forum.lvgl.io/t/bug-in-indev-button-proc-misses-buttons-that-are-pressed-for-a-single-callback/3699
* fix(arc): make arc work with encoder
fixes https://forum.lvgl.io/t/lv-arc-with-encoder-lv-group/3769
* fix(slider): adjusting the left knob too with encoder
https://forum.lvgl.io/t/slider-with-2-knobs-and-encoder-functionality/3770
* fix(arc_draw): remove statments that do nothing
fix#1930
* Change LV_DRAW_BUF_MAX_NUM to LV_MEM_BUF_MAX_NUM (#1931)
* Update CHANGELOG.md
* fix(draw polygon): join adjacent points if they are on the same coordinate
* fix(draw polygon): fix memory leak and vertex joining
* fix(style): invalidate cache on every PART
Inherited properties on parts other than MAIN needs to be recached on property change beacuse they
are inherted from MAIN
fixes#1933
* fix(anim): fix bounce path
* fix(slider): do not let edit left knob in non-range mode
* Update ROADMAP.md
* Fix hardfault when DCache is disabled with no callback (#1935)
* fix(linemeter): fix invalidation when setting new value
The old complex but more optimal invalidation was buggy in some cases
fixes#1904
* fix(linemeter): fix invalidation when setting new value
The old complex but more optimal invalidation was buggy in some cases
fixes#1904
* fix(table): add missing invalidation when changeing cell type
fixes https://forum.lvgl.io/t/bug-of-table-click-to-change-style/3842
* CMakeLists.txt: Let the user configure whether LV_ATTRIBUTE_FAST_MEM is IRAM_ATTR (#1939)
* fix(slider): fix left/right knob control with encoder
* fix(img): increase the size of invalidated area in lv_img_set_zoom
Becasue of the pivot placement there can be some rounding errors
* feat(perf_monitor): add lv_refr_get_fps_avg()
* Add 8px and 10px montserrat fonts to build (#1941)
* Fix#1942: lv_textarea_set_pwd_mode not changing to bullets
Thanks to @fvanroie for investigating.
* fix(material): make button pressed color darker (#1940)
* simplify touch handling in the Arduino example
* Update ROADMAP.md
* Update ROADMAP.md
* feat(lv_conf_kconfig): add LV_CONF_KCONFIG_EXTERNAL_INCLUDE
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
Co-authored-by: embeddedt <42941056+embeddedt@users.noreply.github.com>
Co-authored-by: xennex22 <25083624+xennex22@users.noreply.github.com>
Co-authored-by: incity <610455681@qq.com>
Co-authored-by: Andrey <spirit@spirit.re>
Co-authored-by: defogprog <22955033+defogprog@users.noreply.github.com>
* Removed commented out test definition
Removed commented out test definition LV_BUILD_TEST
* Remove blank line
* Fix comment spelling
* Added blank line
* Removed trailing semi-colon in macros
It was difficult to handle the pressed angle on the arc when it crossed the 360 degree boundery.
The solution is to handle the angle relative to the bg_start_angle. This way no angle can be larger than 360.
The other issue was the case when a smaller than min. or larger than max. angle was pressed.
It is handled by introducing 'min_close' flag which stores which end is closer on the last valid press
and prefer this end in uncleary situation.
Fixes a compiler warning in lv_font_fmt_txt.c when compressed fonts are
disabled (LV_USE_FONT_COMPRESSED=0):
/home/maureen/zephyrproject/modules/lib/gui/lvgl/src/lv_font/lv_font_fmt_txt.c:349:13: warning: 'decompress' defined but not used [-Wunused-function]
349 | static void decompress(const uint8_t * in, uint8_t * out, lv_coord_t w, lv_coord_t h, uint8_t bpp, bool prefilter)
| ^~~~~~~~~~
This was found after upgrading Zephyr to use LVGL v7.6.1, building with
the Zephyr SDK 0.11.3 toolchain.
Signed-off-by: Maureen Helm <maureen.helm@nxp.com>
* create the fmt version of setting text for msgbox.
* define _lv_txt_set_text_vfmt and change the body of lv_msgbox_set_text_fmt.
* make lv_label_refr_text out of static.
* fix a bug in _lv_txt_set_text_vfmt
* lv_conf_checker: Update lv_conf_checker so it is ESP-IDF aware.
Include ESP-IDF headers and lv_conf_kconfig.h when using the ESP-IDF framework.
Also remove the CONFIG_LV_CONF_SKIP as it is not generated by the Kconfig file.
* lv_conf_checker: Always include lv_conf_kconfig.h.
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
* update lv_obj_refresh_style describtion.
* cursor added.
* refresh chart after setting the cursor
* add new direction and a bug fixed.
* fixed the wrong changes for header file.
* rename lv_cursor_direction_t enum members.
* add lv_chart_get_x_from_index and lv_chart_get_y_from_index
* lv_chart_get_x_from_index supports column chart type too.
* fix the error of no lv_coord_t value return.
* fix a bug based on the coord is with respect to the series area.
* make get_series_area function global.
* fix the name of get_series_area function.
* add the description of the added functions.
* chart cursor minor fixes
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
* PXP: Updated area threshold, fixed symbol names, minor fixes
- Area threshold of 1 left from debugging, changed to 32 for performance
reasons.
- Fixed naming convention of symbols (prefix LV_GPU_)
- Fixed include paths (no need to add src folder into include paths)
- Comments changed to doxygen
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* PXP: Code formatting
Applied code-format.sh script.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* Corrected bug in styles of labels with selections
Text selection color (text_selection_color) property was incorrectly
being applied to the text color if there was a selection. The sel_color
property in the label descriptor was initialized to blue. This property
was intended to be the label background color under a selection.
* Add new property for the color of selected text
New property for labels: text_sel_font_color
This property will change the color of the font within selected text.
* Rename text selection color properties
Per feedback from issue #1820, sel_color is now sel_bg_color and
sel_font_color is now sel_color. This results in clearer naming.
Co-authored-by: Ryan Powers <ryan.powers@envision-tek.com>
* Allow inclusion of local lv_conf_internal.h
A wrapper library cna contain an lv_conf.h file and it would be automatically picked up by the buildsystem
* Guard __has_include and simplify code
* Make number sign indentation consistent
Co-authored-by: embeddedt <42941056+embeddedt@users.noreply.github.com>
VG-Lite accelerated features:
- fill (+ transparency)
- BLIT (+ transparency)
Limitation:
Image width must be aligned to 16 for VG-Lite to process the buffer.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* update lv_obj_refresh_style describtion.
* fmt version of lv_table_set_cell_value added.
* fix a bug.
* add include lv_printf.h
* fix a bug for LV_USE_BIDI in lv_table_set_cell_value_fmt
* fix a missed part for arabic_persian chars in lv_table_set_cell_value
* PXP: Added basic PXP acceleration
PXP accelerated features:
- fill (+ opacity)
- BLIT (+ opacity)
- recoloring (+ opacity)
- color keying (+ opacity)
Recoloring + color keying simultaneously not supported.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* PXP: Added abstraction for interrupt handling
Previous imlpementation used IRQ polling on PXP, which doesn't allow
real CPU offload. Therefore added set of callbacks for interrupt
handling that should be implemented by user, with possible RTOS
integration.
Default/example implementation of callbacks for bare metal and FreeRTOS
provided (lv_gpu_nxp_pxp_osa.c), enabled by
LV_USE_GPU_NXP_PXP_DEFAULT_OSA switch, accesible via pxp_default_cfg
structure.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* PXP: Optimized cache flushing
Previous implementation flushed areas of (LCD width * object height)
size. Cache flush is expensive operation and flushing line by line,
smallest possible area, boost performance by shortening time spent on
cache flushes.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* PXP: Added documentation for NXP PXP accelerator
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* PXP: added missing extern c in header files
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* PXP: Fixed ifdefs - Removed LV_USE_GPU, fixed internal config
LV_USE_GPU is not intended as a global GPU enable switch. It's used only
for gpu_blend_cb and gpu_fill_cb callbacks, which are obsolete. This
patch removes LV_USE_GPU dependency for PXP code, so it's enabled only
with LV_USE_GPU_NXP_PXP symbol.
Added missing symbols to internal conf, so automatic testd can pass
build step.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* PXP: Default OSA changed to PXP auto-initialization
Auto init feature added so if user run FreeRTOS or bare-metal, no PXP
Init code is required. Renamed symbol to be more clear.
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* PXP: Documentation moved to docs repo
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
* PXP: Fixed alpha configuration
- Coverity issue: AS blend config used uninitialized structure. No
impact on functionality, as blend module is not used (porter-duff blends
in this case)
- Alpha config fixed - swapped alpha values produced different result
from SW render
Signed-off-by: Jozef Bastek <jozef.bastek@nxp.com>
Fetch both head and merge commits of "pull" refs. This would allow the CI script to first try checkout the merge commit (which is `github.sha` on PR) and only if that fails, default to checking out the PR head.
* Fixed infinite loop during calculation size of lv_list
* Fixed msvc 2019 compiler error C4576 when using the LVGL inside C++ code
* Refactoring to make autocomplete less noisy
* Improve compatibility with ARM Compiler V6 with C++98 mode
* Replaced non-ascii symbol
* Fixed CI build error
* Refactoring, added ability to override _LV_COLOR_HAS_MODERN_CPP
> # Important: issues that don't use this template will be ignored/closed.
<!--
IMPORTANT
Issues that don't use this template will be ignored and closed.
-->
**Describe the bug**
### Perform all steps below and tick them with [x]
- [ ] Check the related part of the [Documentation](https://docs.lvgl.io/)
- [ ] Update lvgl to the latest version
- [ ] Reproduce the issue in a [Simulator](https://docs.lvgl.io/latest/en/html/get-started/pc-simulator.html)
### Describe the bug
<!--
A clear and concise description of what the bug is.
-->
**To Reproduce**
Please provide a small, independent code sample that can be used to reproduce the issue. Ideally this should work in the PC simulator unless the problem is specific to one platform.
**Expected behavior**
### To Reproduce
<!--
Provide a small, independent code sample that can be used to reproduce the issue.
Ideally this should work in the PC simulator unless the problem is specific to a platform.
Format the code like this:
```c
yourcodehere
```
-->
### Expected behavior
<!--
A clear and concise description of what you expected to happen.
-->
**Screenshots**
### Screenshots or video
<!--
If applicable, add screenshots to help explain your problem.
To ensure that all licensing criteria is met all repositories of the LVGL project apply a process called DCO (Developer's Certificate of Origin).
To ensure that all licensing criteria is met all repositories of the LVGL project apply a process called DCO (Developer's Certificate of Origin).
The text of DCO can be read here: https://developercertificate.org/
For a more detailed description see the [Documentation](https://docs.lvgl.io/latest/en/html/contributing/index.html#developer-certification-of-origin-dco) site.
By contributing to any repositories of the LVGL project you state that your contribution corresponds with the DCO.
No further action is required if your contribution fulfills the DCO. If you are not sure about it feel free to ask us in a comment.
No further action is required if your contribution fulfills the DCO. If you are not sure about it feel free to ask us in a comment.
stale-issue-message:'This issue is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 7 days.'
stale-pr-message:'This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 7 days.'
close-issue-message:'This issue was closed because it has been stalled for 7 days with no activity.'
- name:Automatically close issues that don't follow the issue template
uses:lucasbento/auto-close-issues@v1.0.2
with:
github-token:${{ secrets.GITHUB_TOKEN }}
issue-close-message:"@${issue.user.login}: hello! :wave:\n\nThis issue is being automatically closed because it does not follow the issue template."# optional property
- Add `lv_event_send_refresh`, `lv_event_send_refresh_recursive` to easily send `LV_EVENT_REFRESH` to object
- Add `lv_tabview_set_tab_name()` function - used to change a tab's name
- Add `LV_THEME_MATERIAL_FLAG_NO_TRANSITION` and `LV_THEME_MATERIAL_FLAG_NO_FOCUS` flags
- Reduce code size by adding: `LV_USE_FONT_COMPRESSED`, `LV_FONT_USE_SUBPX`, `LV_USE_OUTLINE`, `LV_USE_PATTERN`, `LV_USE_VALUE_STR` and applying some optimization
- Add `LV_MEMCPY_MEMSET_STD` to use standard `memcpy` and `memset`
### Bugfixes
- Do not print warning for missing glyph if its height OR width is zero.
- Prevent duplicated sending of `LV_EVENT_INSERT` from text area
- Tidy outer edges of cpicker widget.
- Remove duplicated lines from `lv_tabview_add_tab`
- btnmatrix: hadle combined states of buttons (e.g. chacked + disabled)
- textarea: fix typo in lv_textarea_set_sscrollbar_mode
- gauge: fix image needle drawing
- fix using freed memory in _lv_style_list_remove_style
## v7.2.0 (21.07.2020)
### New features
- Add screen transitions with `lv_scr_load_anim()`
- Add display background color, wallpaper and opacity. Shown when the screen is transparent. Can be used with `lv_disp_set_bg_opa/color/image()`.
- Add `LV_CALENDAR_WEEK_STARTS_MONDAY`
- Add `lv_chart_set_x_start_point()` function - Set the index of the x-axis start point in the data array
- Add `lv_chart_set_ext_array()` function - Set an external array of data points to use for the chart
- Add `lv_chart_set_point_id()` function - Set an individual point value in the chart series directly based on index
- Add `lv_chart_get_x_start_point()` function - Get the current index of the x-axis start point in the data array
- Add `lv_chart_get_point_id()` function - Get an individual point value in the chart series directly based on index
- Add `ext_buf_assigned` bit field to `lv_chart_series_t` structure - it's true if external buffer is assigned to series
- Add `lv_chart_set_series_axis()` to assign series to primary or secondary axis
- Add `lv_chart_set_y_range()` to allow setting range of secondary y axis (based on `lv_chart_set_range` but extended with an axis parameter)
- Allow setting different font for the selected text in `lv_roller`
- Add `theme->apply_cb` to replace `theme->apply_xcb` to make it compatible with the MicroPython binding
- Add `lv_theme_set_base()` to allow easy extension of built-in (or any) themes
- Add `lv_obj_align_x()` and `lv_obj_align_y()` functions
- Add `lv_obj_align_origo_x()` and `lv_obj_align_origo_y()` functions
### Bugfixes
-`tileview` fix navigation when not screen sized
- Use 14px font by default to for better compatibility with smaller displays
-`linemeter` fix conversation of current value to "level"
- Fix drawing on right border
- Set the cursor image non clickable by default
- Improve mono theme when used with keyboard or encoder
## v7.1.0 (07.07.2020)
### New features
- Add `focus_parent` attribute to `lv_obj`
- Allow using buttons in encoder input device
- Add lv_btnmatrix_set/get_align capability
- DMA2D: Remove dependency on ST CubeMX HAL
- Added `max_used` propriety to `lv_mem_monitor_t` struct
- In `lv_init` test if the the strings are UTF-8 encoded.
- Add `user_data` to themes
- Add LV_BIG_ENDIAN_SYSTEM flag to lv_conf.h in order to fix displaying images on big endian systems.
- Add inline function lv_checkbox_get_state(const lv_obj_t * cb) to extend the checkbox functionality.
- Add inline function lv_checkbox_set_state(const lv_obj_t * cb, lv_btn_state_t state ) to extend the checkbox functionality.
### Bugfixes
-`lv_img` fix invalidation area when angle or zoom changes
- Update the style handling to support Big endian MCUs
- Change some methods to support big endian hardware.
- remove use of c++ keyword 'new' in parameter of function lv_theme_set_base().
- Add LV_BIG_ENDIAN_SYSTEM flag to lv_conf.h in order to fix displaying images on big endian systems.
- Fix inserting chars in text area in big endian hardware.
## v7.0.2 (16.06.2020)
### Bugfixes
-`lv_textarea` fix wrong cursor position when clicked after the last character
- Change all text related indices from 16-bit to 32-bit integers throughout whole library. #1545
- Fix gestures
- Do not call `set_px_cb` for transparent pixel
- Fix list button focus in material theme
- Fix crash when the a text area is cleared with the backspace of a keyboard
- Add version number to `lv_conf_template.h`
- Add log in true double buffering mode with `set_px_cb`
-`lv_dropdown`: fix missing `LV_EVENT_VALUE_CHANGED` event when used with encoder
-`lv_tileview`: fix if not the {0;0} tile is created first
-`lv_debug`: restructure to allow asserting in from `lv_misc` too
- add assert if `_lv_mem_buf_get()` fails
-`lv_textarea`: fix character delete in password mode
- Update `LV_OPA_MIN` and `LV_OPA_MAX` to widen the opacity processed range
-`lv_btnm` fix sending events for hidden buttons
-`lv_gaguge` make `lv_gauge_set_angle_offset` offset the labels and needles too
- Fix typo in the API `scrllable` -> `scrollable`
-`tabview` by default allow auto expanding the page only to right and bottom (#1573)
- fix crash when drawing gradient to the same color
- chart: fix memory leak
-`img`: improve hit test for transformed images
## v7.0.1 (01.06.2020)
### Bugfixes
- Make the Microptyhon working by adding the required variables as GC_ROOT
- Prefix some internal API functions with `_` to reduce the API of LVGL
- Fix built-in SimSun CJK font
- Fix UTF-8 encoding when `LV_USE_ARABIC_PERSIAN_CHARS` is enabled
- Fix DMA2D usage when 32 bit images directly blended
- Fix lv_roller in infinite mode when used with encoder
- Add `lv_theme_get_color_secondary()`
- Add `LV_COLOR_MIX_ROUND_OFS` to adjust color mixing to make it compatible with the GPU
- Improve DMA2D blending
- Remove memcpy from `lv_ll` (caused issues with some optimization settings)
-`lv_chart` fix X tick drawing
- Fix vertical dashed line drawing
- Some additonal minor fixes and formattings
## v7.0.0 (18.05.2020)
### Documentation
The docs for v7 is available at https://docs.littlevgl.com/v7/en/html/index.html
### Legal changes
The name of the project is changed to LVGL and the new website is on https://lvgl.io
LVGL remains free under the same conditions (MIT license) and a company is created to manage LVGL and offer services.
### New drawing system
Complete rework of LVGL's draw engine to use "masks" for more advanced and higher quality graphical effects.
A possible use-case of this system is to remove the overflowing content from the rounded edges.
It also allows drawing perfectly anti-aliased circles, lines, and arcs.
Internally, the drawings happen by defining masks (such as rounded rectangle, line, angle).
When something is drawn the currently active masks can make some pixels transparent.
For example, rectangle borders are drawn by using 2 rectangle masks: one mask removes the inner part and another the outer part.
The API in this regard remained the same but some new functions were added:
-`lv_img_set_zoom`: set image object's zoom factor
-`lv_img_set_angle`: set image object's angle without using canvas
-`lv_img_set_pivot`: set the pivot point of rotation
The new drawing engine brought new drawing features too. They are highlighted inthe "style" section.
### New style system
The old style system is replaced with a new more flexible and lightweighted one.
It uses an approach similar to CSS: support cascading styles, inheriting properties and local style properties per object.
As part of these updates, a lot of objects were reworked and the APIs have been changed.
- more shadows options: *offset* and *spread*
- gradient stop position to shift the gradient area and horizontal gradient
- *clip corner*: crop the content on the rounded corners
- *text underline* and *strikethrough*
- dashed vertical and horizontal lines (*dash gap*, *dash_width*)
- *outline*: a border-like part drawn out of the background. Can have spacing to the background.
- *pattern*: display and image in the middle of the background or repeat it
- *value* display a text which is stored in the style. It can be used e.g. as a lighweighted text on buttons too.
- *margin*: similar to *padding* but used to keep space outside of the object
Read the [Style](https://docs.littlevgl.com/v7/en/html/overview/style.html) section of the documentation to learn how the new styles system works.
### GPU integration
To better utilize GPUs, from this version GPU usage can be integrated into LVGL. In `lv_conf.h` any supported GPUs can be enabled with a single configuration option.
Right now, only ST's DMA2D (Chrom-ART) is integrated. More will in the upcoming releases.
-`dropdown`: Completely reworked. Now creates a separate list when opened and can be dropped to down/up/left/right.
-`label`: `body_draw` is removed, instead, if its style has a visible background/border/shadow etc it will be drawn. Padding really makes the object larger (not just virtually as before)
-`arc`: can draw bacground too.
-`btn`: doesn't store styles for each state because it's done naturally in the new style system.
-`calendar`: highlight the pressed datum. The used styles are changed: use `LV_CALENDAR_PART_DATE` normal for normal dates, checked for highlighted, focused for today, pressed for the being pressed. (checked+pressed, focused+pressed also work)
-`chart`: only has `LINE` and `COLUMN` types because with new styles all the others can be described. LV_CHART_PART_SERIES sets the style of the series. bg_opa > 0 draws an area in LINE mode. `LV_CHART_PART_SERIES_BG` also added to set a different style for the series area. Padding in `LV_CHART_PART_BG` makes the series area smaller, and it ensures space for axis labels/numbers.
-`linemeter`, `gauge`: can have background if the related style properties are set. Padding makes the scale/lines smaller. scale_border_width and scale_end_border_width allow to draw an arc on the outer part of the scale lines.
-`gauge`: `lv_gauge_set_needle_img` allows use image as needle
-`canvas`: allow drawing to true color alpha and alpha only canvas, add `lv_canvas_blur_hor/ver` and rename `lv_canvas_rotate` to `lv_canvas_transform`
-`textarea`: If available in the font use bullet (`U+2022`) character in text area password
### New object types
-`lv_objmask`: masks can be added to it. The children will be masked accordingly.
### Others
- Change the built-in fonts to [Montserrat](https://fonts.google.com/specimen/Montserrat) and add built-in fonts from 12 px to 48 px for every 2nd size.
- Add example CJK and Arabic/Persian/Hebrew built-in font
- Add ° and "bullet" to the built-in fonts
- Add Arabic/Persian script support: change the character according to its position in the text.
- Add `playback_time` to animations.
- Add `repeat_count` to animations instead of the current "repeat forever".
- Replace `LV_LAYOUT_PRETTY` with `LV_LAYOUT_PRETTY_TOP/MID/BOTTOM`
### Demos
- [lv_examples](https://github.com/littlevgl/lv_examples) was reworked and new examples and demos were added
### New release policy
- Maintain this Changelog for every release
- Save old major version in new branches. E.g. `release/v6`
- Merge new features and fixes directly into `master` and release a patch or minor releases every 2 weeks.
### Migrating from v6 to v7
- First and foremost, create a new `lv_conf.h` based on `lv_conf_templ.h`.
- To try the new version it suggested using a simulator project and see the examples.
- If you have a running project, the most difficult part of the migration is updating to the new style system. Unfortunately, there is no better way than manually updating to the new format.
- The other parts are mainly minor renames and refactoring as described above.
# with micropython, build lvgl as interface library
# link chain is: lvgl_interface [lvgl] → usermod_lvgl_bindings [lv_bindings] → usermod [micropython] → firmware [micropython]
add_library(lvgl_interfaceINTERFACE)
# ${SOURCES} must NOT be given to add_library directly for some reason (won't be built)
target_sources(lvgl_interfaceINTERFACE${SOURCES})
# Micropython builds with -Werror; we need to suppress some warnings, such as:
#
# /home/test/build/lv_micropython/ports/rp2/build-PICO/lv_mp.c:29316:16: error: 'lv_style_transition_dsc_t_path_xcb_callback' defined but not used [-Werror=unused-function]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
This list shows the recommended way of learning the library:
1. Check the [Online demos](https://lvgl.io/demos) to see LVGL in action (3 minutes)
2. Read the [Introduction](https://docs.lvgl.io/latest/en/html/intro/index.html) page of the documentation (5 minutes)
3. Get familiar with the basics on the [Quick overview](https://docs.lvgl.io/latest/en/html/get-started/quick-overview.html) page (15 minutes)
4. Set up a [Simulator](https://docs.lvgl.io/latest/en/html/get-started/pc-simulator.html) (10 minutes)
5. Try out some [Examples](https://github.com/lvgl/lv_examples/)
6. Port LVGL to a board. See the [Porting](https://docs.lvgl.io/latest/en/html/porting/index.html) guide or check the ready to use [Projects](https://github.com/lvgl?q=lv_port_&type=&language=)
7. Read the [Overview](https://docs.lvgl.io/latest/en/html/overview/index.html) page to get a better understanding of the library (2-3 hours)
8. Check the documentation of the [Widgets](https://docs.lvgl.io/latest/en/html/widgets/index.html) to see their features and usage
2. Read the [Introduction](https://docs.lvgl.io/master/intro/index.html) page of the documentation (5 minutes)
3. Get familiar with the basics on the [Quick overview](https://docs.lvgl.io/master/get-started/quick-overview.html) page (15 minutes)
4. Set up a [Simulator](https://docs.lvgl.io/master/get-started/pc-simulator.html) (10 minutes)
5. Try out some [Examples](https://github.com/lvgl/lvgl/tree/master/examples)
6. Port LVGL to a board. See the [Porting](https://docs.lvgl.io/master/porting/index.html) guide or check the ready to use [Projects](https://github.com/lvgl?q=lv_port_)
7. Read the [Overview](https://docs.lvgl.io/master/overview/index.html) page to get a better understanding of the library (2-3 hours)
8. Check the documentation of the [Widgets](https://docs.lvgl.io/master/widgets/index.html) to see their features and usage
9. If you have questions go to the [Forum](http://forum.lvgl.io/)
10. Read the [Contributing](https://docs.lvgl.io/latest/en/html/contributing/index.html) guide to see how you can help to improve LVGL (15 minutes)
10. Read the [Contributing](https://docs.lvgl.io/master/CONTRIBUTING.html) guide to see how you can help to improve LVGL (15 minutes)
## Examples
## Examples
For more examples see the [lv_examples](https://github.com/lvgl/lv_examples) repository.
For more examples see the [examples](https://github.com/lvgl/lvgl/tree/master/examples) folder.
### Button with label

### C
```c
lv_obj_t*btn=lv_btn_create(lv_scr_act(),NULL);/*Add a button the current screen*/
lv_obj_set_pos(btn,10,10);/*Set its position*/
lv_obj_set_size(btn,100,50);/*Set its size*/
lv_obj_set_event_cb(btn,btn_event_cb);/*Assign a callback to the button*/
lv_obj_t*label=lv_label_create(btn,NULL);/*Add a label to the button*/
lv_label_set_text(label,"Button");/*Set the labels text*/
lv_obj_t*btn=lv_btn_create(lv_scr_act());/*Add a button to the current screen*/
lv_obj_set_pos(btn,10,10);/*Set its position*/
lv_obj_set_size(btn,100,50);/*Set its size*/
lv_obj_add_event_cb(btn,btn_event_cb,LV_EVENT_CLICKED,NULL);/*Assign a callback to the button*/
lv_obj_t*label=lv_label_create(btn);/*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*/
...
voidbtn_event_cb(lv_obj_t*btn,lv_event_tevent)
voidbtn_event_cb(lv_event_t*e)
{
if(event==LV_EVENT_CLICKED){
printf("Clicked\n");
}
printf("Clicked\n");
}
```

### LVGL from Micropython
Learn more about [Micropython](https://docs.lvgl.io/latest/en/html/get-started/micropython.html).
### Micropython
Learn more about [Micropython](https://docs.lvgl.io/master/get-started/micropython.html).
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 to hosing your own project under in LVGL.
## Services
LVGL Kft was established to provide a solid background for LVGL library. We offer several type of services to help you in UI development:
- Graphics design
- UI implementation
- Consulting/Support
For a detailed description of contribution opportunities visit the [Contributing](https://docs.lvgl.io/latest/en/html/contributing/index.html) section of the documentation.
For more information see https://lvgl.io/services
Feel free to contact us if you have any questions.
## 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 to hosting your own project under the LVGL organization.
For a detailed description of contribution opportunities visit the [Contributing](https://docs.lvgl.io/master/CONTRIBUTING.html) section of the documentation.
@@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [atom@github.com](mailto:atom@github.com). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team using the [contact form](https://lvgl.io/about). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
Use [lv_misc/lv_templ.c](https://github.com/lvgl/lvgl/blob/master/src/lv_misc/lv_templ.c) and [lv_misc/lv_templ.h](https://github.com/lvgl/lvgl/blob/master/src/lv_misc/lv_templ.h)
Use [misc/lv_templ.c](https://github.com/lvgl/lvgl/blob/master/src/misc/lv_templ.c) and [misc/lv_templ.h](https://github.com/lvgl/lvgl/blob/master/src/misc/lv_templ.h)
## Naming conventions
* Words are separated by '_'
* In variable and function names use only lower case letters (e.g. *height_tmp*)
* In enums and defines use only upper case letters (e.g. *e.g. MAX_LINE_NUM*)
* Global names (API):
* starts with *lv*
* start with *lv*
* followed by module name: *btn*, *label*, *style* etc.
* followed by the action (for functions): *set*, *get*, *refr* etc.
* closed with the subject: *name*, *size*, *state* etc.
* closed with the subject: *name*, *size*, *state* etc.
* Typedefs
* prefer `typedef struct` and `typedef enum` instead of `struct name` and `enum name`
* always end `typedef struct` and `typedef enum` type names with `_t`
* Abbreviations:
* Only words longer or equal than 6 characters can be abbreviated.
* Only words longer or equal than 6 characters can be abbreviated.
* Abbreviate only if it makes the word at least half as long
* Use only very straightforward and well-known abbreviations (e.g. pos: position, def: default, btn: button)
* Use only very straightforward and well-known abbreviations (e.g. pos: position, def: default, btn: button)
## Coding guide
* Functions:
* Try to write function shorter than is 50 lines
* Always shorter than 200 lines (except very straightforwards)
* Try to write function shorter than is 50 lines
* Always shorter than 200 lines (except very straightforwards)
* Variables:
* One line, one declaration (BAD: char x, y;)
* Use `<stdint.h>` (*uint8_t*, *int32_t* etc)
@@ -41,17 +41,17 @@ Before every function have a comment like this:
* @param obj pointer to an object
* @return pointer to a screen
*/
lv_obj_t*lv_obj_get_scr(lv_obj_t*obj);
lv_obj_t*lv_obj_get_scr(lv_obj_t*obj);
```
Always use `/*Something*/` format and NOT `//Something`
Always use `/*Something*/` format and NOT `//Something`
Write readable code to avoid descriptive comments like:
`x++; /*Add 1 to x*/`.
Write readable code to avoid descriptive comments like:
`x++; /*Add 1 to x*/`.
The code should show clearly what you are doing.
You should write **why** have you done this:
`x++; /*Because of closing '\0' of the string*/`
You should write **why** have you done this:
`x++; /*Because of closing '\0' of the string*/`
Short "code summaries" of a few lines are accepted. E.g. `/*Calculate the new coordinates*/`
@@ -66,20 +66,20 @@ Here is example to show bracket placing and using of white spaces:
* @param text '\0' terminated character string. NULL to refresh with the current text.
For a detailed description of contribution opportunities, please visit the [Contributing](https://docs.lvgl.io/latest/en/html/contributing/index.html) section of the documentation.
## Introduction
Join LVGL's community and leave your footprint in the library!
There are a lot of ways to contribute to LVGL even if you are new to the library or even new to programming.
It might be scary to make the first step but you have nothing to be afraid of.
A friendly and helpful community is waiting for you. Get to know like-minded people and make something great together.
So let's find which contribution option fits you the best and help you join the development of LVGL!
Before getting started here are some guidelines to make contribution smoother:
- Be kind and friendly.
- Be sure to read the relevant part of the documentation before posting a question.
- Ask questions in the [Forum](https://forum.lvgl.io/) and use [GitHub](https://github.com/lvgl/) for development-related discussions.
- Always fill out the post or issue templates in the Forum or GitHub (or at least provide equivalent information). It makes understanding your contribution or issue easier and you will get a useful response faster.
- If possible send an absolute minimal but buildable code example in order to reproduce the issue. Be sure it contains all the required variable declarations, constants, and assets (images, fonts).
- Use [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) to format your posts. You can learn it in 10 minutes.
- Speak about one thing in one issue or topic. It makes your post easier to find later for someone with the same question.
- Give feedback and close the issue or mark the topic as solved if your question is answered.
- For non-trivial fixes and features, it's better to open an issue first to discuss the details instead of sending a pull request directly.
- Please read and follow the <a href="https://github.com/lvgl/lvgl/blob/master/docs/CODING_STYLE.md">Coding style</a> guide.
## Pull request
Merging new code into the lvgl, documentation, blog, examples, and other repositories happen via *Pull requests* (PR for short).
A PR is a notification like "Hey, I made some updates to your project. Here are the changes, you can add them if you want."
To do this you need a copy (called fork) of the original project under your account, make some changes there, and notify the original repository about your updates.
You can see what it looks like on GitHub for LVGL here: [https://github.com/lvgl/lvgl/pulls](https://github.com/lvgl/lvgl/pulls).
To add your changes you can edit files online on GitHub and send a new Pull request from there (recommended for small changes) or
add the updates in your favorite editor/IDE and use git to publish the changes (recommended for more complex updates).
### From GitHub
1. Navigate to the file you want to edit.
2. Click the Edit button in the top right-hand corner.
3. Add your changes to the file.
4. Add a commit message on the bottom of the page.
5. Click the *Propose changes* button.
### From command line
The instructions describe the main `lvgl` repository but it works the same way for the other repositories.
1. Fork the [lvgl repository](https://github.com/lvgl/lvgl). To do this click the "Fork" button in the top right corner.
It will "copy" the `lvgl` repository to your GitHub account (`https://github.com/<YOUR_NAME>?tab=repositories`)
2. Clone your forked repository.
3. Add your changes. You can create a *feature branch* from *master* for the updates: `git checkout -b the-new-feature`
4. Commit and push your changes to the forked `lvgl` repository.
5. Create a PR on GitHub from the page of your `lvgl` repository (`https://github.com/<YOUR_NAME>/lvgl`) by clicking the *"New pull request"* button. Don't forget to select the branch where you added your changes.
7. Set the base branch. It means where you want to merge your update. In the `lvgl` repo fixes go to `master`, new features to `dev` branch.
8. Describe what is in the update. An example code is welcome if applicable.
9. If you need to make more changes, just update your forked `lvgl` repo with new commits. They will automatically appear in the PR.
### Commit message format
In commit messages please follow the [Angular Commit Format](https://gist.github.com/brianclements/841ea7bffdb01346392c).
Some examples:
```
fix(img) update size if a new source is set
```
```
fix(bar) fix memory leak
The animations weren't deleted in the destructor.
Fixes: #1234
```
```
feat add span widget
The span widget allows mixing different font sizes, colors and styles.
It's similar to HTML <span>
```
```
docs(porting) fix typo
```
## Developer Certification of Origin (DCO)
### Overview
To ensure all licensing criteria are met for every repository of the LVGL project, we apply a process called DCO (Developer's Certificate of Origin).
The text of DCO can be read here: [https://developercertificate.org/](https://developercertificate.org/).
By contributing to any repositories of the LVGL project you agree that your contribution complies with the DCO.
If your contribution fulfills the requirements of the DCO no further action is needed. If you are unsure feel free to ask us in a comment.
### Accepted licenses and copyright notices
To make the DCO easier to digest, here are some practical guides about specific cases:
#### Your own work
The simplest case is when the contribution is solely your own work.
In this case you can just send a Pull Request without worrying about any licensing issues.
#### Use code from online source
If the code you would like to add is based on an article, post or comment on a website (e.g. StackOverflow) the license and/or rules of that site should be followed.
For example in case of StackOwerflow a notice like this can be used:
```
/* The original version of this code-snippet was published on StackOverflow.
* The following parts of the snippet were changed:
* - Check this or that
* - Optimize performance here and there
*/
... code snippet here ...
```
#### Use MIT licensed code
As LVGL is MIT licensed, other MIT licensed code can be integrated without issues.
The MIT license requires a copyright notice be added to the derived work. Any derivative work based on MIT licensed code must copy the original work's license file or text.
#### Use GPL licensed code
The GPL license is not compatible with the MIT license. Therefore, LVGL can not accept GPL licensed code.
## Ways to contribute
Even if you're just getting started with LVGL there are plenty of ways to get your feet wet.
Most of these options don't even require knowing a single line of LVGL code.
Below we have collected some opportunities about the ways you can contribute to LVGL.
### Give LVGL a Star
Show that you like LVGL by giving it star on GitHub!
<!-- Place this tag in your head or just before your close body tag. -->
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/lvgl/lvgl" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star lvgl/lvgl on GitHub">Star</a>
This simple click makes LVGL more visible on GitHub and makes it more attractive to other people.
So with this, you already helped a lot!
### Tell what you have achieved
Have you already started using LVGL in a [Simulator](/get-started/pc-simulator), a development board, or on your custom hardware?
Was it easy or were there some obstacles? Are you happy with the result?
Showing your project to others is a win-win situation because it increases your and LVGL's reputation at the same time.
You can post about your project on Twitter, Facebook, LinkedIn, create a YouTube video, and so on.
Only one thing: On social media don't forget to add a link to `https://lvgl.io` or `https://github.com/lvgl` and use the hashtag `#lvgl`. Thank you! :)
You can also open a new topic in the [My projects](https://forum.lvgl.io/c/my-projects/10) category of the Forum.
The [LVGL Blog](https://blog.lvgl.io) welcomes posts from anyone.
It's a good place to talk about a project you created with LVGL, write a tutorial, or share some nice tricks.
The latest blog posts are shown on the [homepage of LVGL](https://lvgl.io) to make your work more visible.
The blog is hosted on GitHub. If you add a post GitHub automatically turns it into a website.
See the [README](https://github.com/lvgl/blog) of the blog repo to see how to add your post.
Any of these help to spread the word and familiarize new developers with LVGL.
If you don't want to speak about your project publicly, feel free to use [Contact form](https://lvgl.io/#contact) on lvgl.io to private message to us.
### Write examples
As you learn LVGL you will probably play with the features of widgets. Why not publish your experiments?
Each widgets' documentation contains examples. For instance, here are the examples of the [Drop-down list](/widgets/core/dropdown#examples) widget.
The examples are directly loaded from the [lvgl/examples](https://github.com/lvgl/lvgl/tree/master/examples) folder.
So all you need to do is send a [Pull request](#pull-request) to the [lvgl](https://github.com/lvgl/lvgl) repository and follow some conventions:
- Name the examples like `lv_example_<widget_name>_<index>`.
- Make the example as short and simple as possible.
- Add comments to explain what the example does.
- Use 320x240 resolution.
- Update `index.rst` in the example's folder with your new example. To see how other examples are added, look in the [lvgl/examples/widgets](https://github.com/lvgl/lvgl/tree/master/examples/widgets) folder.
### Improve the docs
As you read the documentation you might see some typos or unclear sentences. All the documentation is located in the [lvgl/docs](https://github.com/lvgl/lvgl/tree/master/docs) folder.
For typos and straightforward fixes, you can simply edit the file on GitHub.
Note that the documentation is also formatted in [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).
### Report bugs
As you use LVGL you might find bugs. Before reporting them be sure to check the relevant parts of the documentation.
If it really seems like a bug feel free to open an [issue on GitHub](https://github.com/lvgl/lvgl/issues).
When filing the issue be sure to fill out the template. It helps find the root of the problem while avoiding extensive questions and exchanges with other developers.
### Send fixes
The beauty of open-source software is you can easily dig in to it to understand how it works. You can also fix or adjust it as you wish.
If you found and fixed a bug don't hesitate to send a [Pull request](#pull-request) with the fix.
In your Pull request please also add a line to [`CHANGELOG.md`](https://github.com/lvgl/lvgl/blob/master/CHANGELOG.md).
### Join the conversations in the Forum
It feels great to know you are not alone if something is not working. It's even better to help others when they struggle with something.
While you were learning LVGL you might have had questions and used the Forum to get answers. As a result, you probably have more knowledge about how LVGL works.
One of the best ways to give back is to use the Forum and answer the questions of newcomers - like you were once.
Just read the titles and if you are familiar with the topic don't hesitate to share your thoughts and suggestions.
Participating in the discussions is one of the best ways to become part of the project and get to know like-minded people!
### Add features
If you have created a cool widget, or added useful feature to LVGL feel free to open a new PR for it.
We collect the optional features (a.k.a. plugins) in [lvgl/src/extra](https://github.com/lvgl/lvgl/tree/master/src/extra) folder so if you are interested in adding a new features please use this folder.
The [README](https://github.com/lvgl/lvgl/blob/master/src/extra/README.md) file describes the basics rules of contribution and also lists some ideas.
For further ideas take a look at the [Roadmap](/ROADMAP) page. If you are interested in any of them feel free to share your opinion and/or participate in the implementation.
Other features which are (still) not on the road map are listed in the [Feature request](https://forum.lvgl.io/c/feature-request/9) category of the Forum.
When adding a new features the followings also needs to be updated:
- Update the [changelog](https://github.com/lvgl/lvgl/tree/master/docs/CHANGELOG.md)
### Become a maintainer
If you want to become part of the core development team, you can become a maintainer of a repository.
By becoming a maintainer:
- You get write access to that repo:
- Add code directly without sending a pull request
- Accept pull requests
- Close/reopen/edit issues
- Your input has higher impact when we are making decisions
You can become a maintainer by invitation, however the following conditions need to met
1. Have > 50 replies in the Forum. You can look at your stats [here](https://forum.lvgl.io/u?period=all)
2. Send > 5 non-trivial pull requests to the repo where you would like to be a maintainer
If you are interested, just send a message (e.g. from the Forum) to the current maintainers of the repository. They will check if the prerequisites are met.
Note that meeting the prerequisites is not a guarantee of acceptance, i.e. if the conditions are met you won't automatically become a maintainer.
It's up to the current maintainers to make the decision.
### Move your project repository under LVGL organization
Besides the core `lvgl` repository there are other repos for ports to development boards, IDEs or other environment.
If you ported LVGL to a new platform we can host it under the LVGL organization among the other repos.
This way your project will become part of the whole LVGL project and can get more visibility.
If you are interested in this opportunity just open an [issue in lvgl repo](https://github.com/lvgl/lvgl/issues) and tell what you have!
If we agree that your port fit well into the LVGL organization, we will open a repository for your project where you will have admin rights.
To make this concept sustainable there a few rules to follow:
- You need to add a README to your repo.
- We expect to maintain the repo to some extent:
- Follow at least the major versions of LVGL
- Respond to the issues (in a reasonable time)
- If there is no activity in a repo for 1 year it will be archived
This is a summary for thenew fatures of the major releases and a collection of ideas.
This is a summary for planned new features and a collection of ideas.
This list indicates only the current intention and it can be changed.
This list indicates only the current intention and can be changed.
## v8.1
### Features
- [x] Unit testing (gtest?). See #1658
- [ ] Benchmarking (gem5 or qemu?). See #1660
- [ ] lv_snapshot: buffer a widget and all of its children into an image. The source widget can be on a different screen too. The resulting image can be transformed.
- [ ] High level GPU support. See #2058
#### New features
- [x] merge MicroPython examples
- [x] add a "Try out yourself" button to the Micropython examples
### Discuss
- [ ] CPP binding
- [ ] Plugins. In v8 core and extra widgets are separated. With the new flexible events, the behavior of the widgets can be modified in a modular way. E.g. a plugin to add faded area to a line chart (as in the widgets demo)
### Docs
- [x] Display the Micropytohn examples too.
- [x] Add a link to the example C and py files
- [x] List of all examples on a page. All in iframes grouped by category (e.g. flex, style, button)
### Others
- [ ] Add automatic rebuild to get binary directly. Similarly to [STM32F746 project](https://github.com/lvgl/lv_port_stm32f746_disco#try-it-with-just-a-few-clicks).
- [ ] Implement release scripts. I've added a basic specification [here](https://github.com/lvgl/lvgl/tree/master/scripts/release), but we should discuss it.
- [ ] Unit test for the core widgets
## v8.2
- [ ] Optimize line and circle drawing and masking
- [ ] Handle stride. See [#1858](https://github.com/lvgl/lvgl/issues/1858)
- [ ] Support LV_STATE_HOVERED
## Ideas
- Reconsider color format management for run time color format setting, and custom color format usage. (Also [RGB888](https://github.com/lvgl/lvgl/issues/1722))
- Make gradients more versatile
- Make image transformations more versatile
- Switch to RGBA colors in styles
- Consider direct binary font format support
- Simplify `group`s. Discussion is [here](https://forum.lvgl.io/t/lv-group-tabindex/2927/3).
- Use [generate-changelog](https://github.com/lob/generate-changelog) to automatically generate changelog
- lv_mem_alloc_aligned(size, align)
- Text node. See [#1701](https://github.com/lvgl/lvgl/issues/1701#issuecomment-699479408)
- CPP binding. See [Forum](https://forum.lvgl.io/t/is-it-possible-to-officially-support-optional-cpp-api/2736)
- Optimize font decompression
- Need coverage report for tests
- Need static analyze (via coverity.io or somehing else)
- Support dot_begin and dot_middle long modes for labels
- Add new label alignment modes. [#1656](https://github.com/lvgl/lvgl/issues/1656)
- Support larger images: [#1892](https://github.com/lvgl/lvgl/issues/1892)
---
## v8
Planned to September/October 2020
- Create an `extra` folder for complex widgets
- It makes the core LVGL leaner
- In `extra` we can have a lot and specific widgets
- Good place for contributions
- New scrolling:
- See [feat/new-scroll](https://github.com/lvgl/lvgl/tree/feat/new-scroll) branch and [#1614](https://github.com/lvgl/lvgl/issues/1614)) issue.
- Remove `lv_page` and support scrolling on `lv_obj`
- Support "elastic" scrolling when scrolled in
- Support scroll chaining among any objects types (not only `lv_pages`s)
- Remove `lv_drag`. Similar effect can be achieved by setting the position in `LV_EVENT_PRESSING`
- Add snapping?
- Add snapping
- Add snap stop to scroll max 1 snap point
- Already working
- New layouts:
- See [#1615](https://github.com/lvgl/lvgl/issues/1615) issue
- [CSS Grid](https://css-tricks.com/snippets/css/a-guide-to-grid/)-like layout support
- [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)-like layout support
-Besides setting width/height in `px` add support to `partent percentage` and `screen percentage`.
- Work in progress
-Remove `lv_cont` and support layouts on `lv_obj`
- Simplified File system interface ([feat/new_fs_api](https://github.com/lvgl/lvgl/tree/feat/new-fs-api) branch) to make porting easier
The [core LVGL library](https://github.com/lvgl/lvgl) and the [demos](https://github.com/lvgl/lv_demos) are directly available as Arduino libraries.
Note that you need to choose a powerful enough board to run LVGL and your GUI. See the [requirements of LVGL](https://docs.lvgl.io/latest/en/html/intro/index.html#requirements).
For example ESP32 is a good candidate to create your UI with LVGL.
## Get the LVGL Arduino library
LVGL can be installed via the Arduino IDE Library Manager or as a .ZIP library.
## Set up drivers
To get started it's recommended to use [TFT_eSPI](https://github.com/Bodmer/TFT_eSPI) library as a TFT driver to simplify testing.
To make it work, setup `TFT_eSPI` according to your TFT display type via editing either
-`User_Setup.h`
- or by selecting a configuration in the `User_Setup_Select.h`
Both files are located in `TFT_eSPI` library's folder.
## Configure LVGL
LVGL has its own configuration file called `lv_conf.h`. When LVGL is installed, follow these configuration steps:
1. Go to directory of the installed Arduino libraries
2. Go to `lvgl` and copy `lv_conf_template.h` as `lv_conf.h` into the Arduino Libraries directory next to the `lvgl` library folder.
3. Open `lv_conf.h` and change the first `#if 0` to `#if 1`
4. Set the color depth of you display in `LV_COLOR_DEPTH`
5. Set `LV_TICK_CUSTOM 1`
## Initialize LVGL and run an example
Take a look at [LVGL_Arduino.ino](https://github.com/lvgl/lvgl/blob/master/examples/arduino/LVGL_Arduino/LVGL_Arduino.ino) to see how to initialize LVGL.
TFT_eSPI is used as the display driver.
In the INO file you can see how to register a display and a touchpad for LVGL and call an example.
Note that, there is no dedicated INO file for every example, but you can open the examples in `lvgl/examples` folder and copy-paste them to your INO file.
You can NOT call the examples like `lv_example_btn_1()` because the Arduino doesn't compile the examples.
You can the [lv_demos](https://github.com/lvgl/lv_demos) library which needs to be installed and configured separately.
## Debugging and logging
LVGL can display debug information in case of trouble.
In the `LVGL_Arduino.ino` example there is a `my_print` method, which sends this debug information to the serial interface.
To enable this feature you have to edit the `lv_conf.h` file and enable logging in the section `log settings`:
```c
/*Log settings*/
#define USE_LV_LOG 1 /*Enable/disable the log module*/
#if LV_USE_LOG
/* How important log should be added:
* LV_LOG_LEVEL_TRACE A lot of logs to give detailed information
* LV_LOG_LEVEL_INFO Log important events
* LV_LOG_LEVEL_WARN Log if something unwanted happened but didn't cause a problem
* LV_LOG_LEVEL_ERROR Only critical issue, when the system may fail
* LV_LOG_LEVEL_NONE Do not log anything
*/
# define LV_LOG_LEVEL LV_LOG_LEVEL_WARN
```
After enabling the log module and setting LV_LOG_LEVEL accordingly, the output log is sent to the `Serial` port @ 115200 bps.
Since v7.7.1 LVGL includes a Kconfig file, so LVGL can be used as an ESP-IDF v4 component.
## Get the LVGL demo project for ESP32
We've created [lv_port_esp32](https://github.com/lvgl/lv_port_esp32), a project using ESP-IDF and LVGL to show one of the demos from [lv_examples](https://github.com/lvgl/lv_examples).
You are able to configure the project to use one of the many supported display controllers, see [lvgl_esp32_drivers](https://github.com/lvgl/lvgl_esp32_drivers) for a complete list
of supported display and indev (touch) controllers.
## Use LVGL in your ESP32 project
### Prerequisites
ESP-IDF v4 framework is the suggested version to use.
### Get LVGL
It is suggested that you add LVGL as a "component" to your project. This component can be located inside a directory named "components" in the project root directory.
When your project is a git repository you can include LVGL as a git submodule:
The above command will clone LVGL's main repository into the `components/lvgl` directory. LVGL includes a `CMakeLists.txt` file that sets some configuration options so you can use LVGL right away.
When you are ready to configure LVGL, launch the configuration menu with `idf.py menuconfig` on your project root directory, go to `Component config` and then `LVGL configuration`.
## Use lvgl_esp32_drivers in your project
You can also add `lvgl_esp32_drivers` as a "component". This component can be located inside a directory named "components" on your project root directory.
When your project is a git repository you can include `lvgl_esp32_drivers` as a git submodule:
There are several ways to get your feet wet with LVGL. Here is one recommended order of documents to read and things to play with when you are learning to use LVGL:
1. Check the [Online demos](https://lvgl.io/demos) to see LVGL in action (3 minutes)
2. Read the [Introduction](https://docs.lvgl.io/latest/en/html/intro/index.html) page of the documentation (5 minutes)
3. Read the [Quick overview](https://docs.lvgl.io/latest/en/html/get-started/quick-overview.html) page of the documentation (15 minutes)
4. Set up a [Simulator](https://docs.lvgl.io/latest/en/html/get-started/pc-simulator.html) (10 minutes)
5. Try out some [Examples](https://github.com/lvgl/lv_examples/)
6. Port LVGL to a board. See the [Porting](https://docs.lvgl.io/latest/en/html/porting/index.html) guide or check the ready to use [Projects](https://github.com/lvgl?q=lv_port_&type=&language=)
7. Read the [Overview](https://docs.lvgl.io/latest/en/html/overview/index.html) page to get a better understanding of the library. (2-3 hours)
8. Check the documentation of the [Widgets](https://docs.lvgl.io/latest/en/html/widgets/index.html) to see their features and usage
9. If you have questions got to the [Forum](http://forum.lvgl.io/)
10. Read the [Contributing](https://docs.lvgl.io/latest/en/html/contributing/index.html) guide to see how you can help to improve LVGL (15 minutes)
[Micropython](http://micropython.org/) is Python for microcontrollers.
Using Micropython, you can write Python3 code and run it even on a bare metal architecture with limited resources.
### Highlights of Micropython
- **Compact** - Fits and runs within just 256k of code space and 16k of RAM. No OS is needed, although you can also run it with an OS, if you want.
- **Compatible** - Strives to be as compatible as possible with normal Python (known as CPython).
- **Versatile** - Supports many architectures (x86, x86-64, ARM, ARM Thumb, Xtensa).
- **Interactive** - No need for the compile-flash-boot cycle. With the REPL (interactive prompt) you can type commands and execute them immediately, run scripts, etc.
- **Popular** - Many platforms are supported. The user base is growing bigger. Notable forks: [MicroPython](https://github.com/micropython/micropython), [CircuitPython](https://github.com/adafruit/circuitpython), [MicroPython_ESP32_psRAM_LoBo](https://github.com/loboris/MicroPython_ESP32_psRAM_LoBo)
- **Embedded Oriented** - Comes with modules specifically for embedded systems, such as the [machine module](https://docs.micropython.org/en/latest/library/machine.html#classes) for accessing low-level hardware (I/O pins, ADC, UART, SPI, I2C, RTC, Timers etc.)
---
## Why Micropython + LVGL?
Currently, Micropython [does not have a good high-level GUI library](https://forum.micropython.org/viewtopic.php?f=18&t=5543) by default. LVGL is an [Object Oriented Component Based](https://blog.lvgl.io/2018-12-13/extend-lvgl-objects) high-level GUI library, which seems to be a natural candidate to map into a higher level language, such as Python. LVGL is implemented in C and its APIs are in C.
### Here are some advantages of using LVGL in Micropython:
- Develop GUI in Python, a very popular high level language. Use paradigms such as Object-Oriented Programming.
- Usually, GUI development requires multiple iterations to get things right. With C, each iteration consists of **`Change code` > `Build` > `Flash` > `Run`**.
In Micropython it's just **`Change code` > `Run`** ! You can even run commands interactively using the [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) (the interactive prompt)
### Micropython + LVGL could be used for:
- Fast prototyping GUI.
- Shortening the cycle of changing and fine-tuning the GUI.
- Modelling the GUI in a more abstract way by defining reusable composite objects, taking advantage of Python's language features such as Inheritance, Closures, List Comprehension, Generators, Exception Handling, Arbitrary Precision Integers and others.
- Make LVGL accessible to a larger audience. No need to know C to create a nice GUI on an embedded system.
This goes well with [CircuitPython vision](https://learn.adafruit.com/welcome-to-circuitpython/what-is-circuitpython). CircuitPython was designed with education in mind, to make it easier for new or unexperienced users to get started with embedded development.
- Creating tools to work with LVGL at a higher level (e.g. drag-and-drop designer).
---
## So what does it look like?
> TL;DR:
> It's very much like the C API, but Object-Oriented for LVGL components.
Let's dive right into an example!
### A simple example
```python
importlvglaslv
lv.init()
scr=lv.obj()
btn=lv.btn(scr)
btn.align(lv.scr_act(),lv.ALIGN.CENTER,0,0)
label=lv.label(btn)
label.set_text("Button")
lv.scr_load(scr)
```
## How can I use it?
### Online Simulator
If you want to experiment with LVGL + Micropython without downloading anything - you can use our online simulator!
It's a fully functional LVGL + Micropython that runs entirely in the browser and allows you to edit a python script and run it.
[Click here to experiment on the online simulator](https://sim.lvgl.io/)
Note: the online simulator is available for lvgl v6 and v7.
### PC Simulator
Micropython is ported to many platforms. One notable port is "unix", which allows you to build and run Micropython (+LVGL) on a Linux machine. (On a Windows machine you might need Virtual Box or WSL or MinGW or Cygwin etc.)
[Click here to know more information about building and running the unix port](https://github.com/lvgl/lv_micropython)
### Embedded platform
In the end, the goal is to run it all on an embedded platform.
Both Micropython and LVGL can be used on many embedded architectures, such as stm32, ESP32 etc.
You would also need display and input drivers. We have some sample drivers (ESP32+ILI9341, as well as some other examples), but chances are you would want to create your own input/display drivers for your specific hardware.
Drivers can be implemented either in C as a Micropython module, or in pure Micropython!
## Where can I find more information?
- In this [Blog Post](https://blog.lvgl.io/2019-02-20/micropython-bindings)
[NuttX](https://nuttx.apache.org/) is a mature and secure real-time operating system (RTOS) with an emphasis on technical standards compliance and small size.
It is scalable from 8-bit to 64-bit microcontrollers and microprocessors and compliant with the Portable Operating System Interface (POSIX) and the American National Standards Institute (ANSI) standards and with many Linux-like subsystems.
The best way to think about NuttX is to think of it as a small Unix/Linux for microcontrollers.
### Highlights of NuttX
- **Small** - Fits and runs in microcontrollers as small as 32 kB Flash and 8 kB of RAM.
- **Compliant** - Strives to be as compatible as possible with POSIX and Linux.
- **Versatile** - Supports many architectures (ARM, ARM Thumb, AVR, MIPS, OpenRISC, RISC-V 32-bit and 64-bit, RX65N, x86-64, Xtensa, Z80/Z180, etc.).
- **Modular** - Its modular design allows developers to select only what really matters and use modules to include new features.
- **Popular** - NuttX is used by many companies around the world. Probably you already used a product with NuttX without knowing it was running NuttX.
- **Predictable** - NuttX is a preemptible Realtime kernel, so you can use it to create predictable applications for realtime control.
---
## Why NuttX + LVGL?
Although NuttX has its own graphic library called [NX](https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=139629474), LVGL is a good alternative because users could find more eye-candy demos and they can reuse code from previous projects.
LVGL is an [Object Oriented Component Based](https://blog.lvgl.io/2018-12-13/extend-lvgl-objects) high-level GUI library, that could fit very well for a RTOS with advanced features like NuttX.
LVGL is implemented in C and its APIs are in C.
### Here are some advantages of using LVGL in NuttX
- Develop GUI in Linux first and when it is done just compile it for NuttX. Nothing more, no wasting of time.
- Usually, GUI development for low level RTOS requires multiple iterations to get things right, where each iteration consists of **`Change code` > `Build` > `Flash` > `Run`**.
Using LVGL, Linux and NuttX you can reduce this process and just test everything on your computer and when it is done, compile it on NuttX and that is it.
### NuttX + LVGL could be used for
- GUI demos to demonstrate your board graphics capacities.
- Fast prototyping GUI for MVP (Minimum Viable Product) presentation.
- visualize sensor data directly and easily on the board without using a computer.
- Final products with a GUI without a touchscreen (i.e. 3D Printer Interface using Rotary Encoder to Input data).
- Final products with a touchscreen (and all sorts of bells and whistles).
---
## How to get started with NuttX and LVGL?
There are many boards in the [NuttX mainline](https://github.com/apache/incubator-nuttx) with support for LVGL.
Let's use the [STM32F429IDISCOVERY](https://www.st.com/en/evaluation-tools/32f429idiscovery.html) as an example because it is a very popular board.
### First you need to install the pre-requisites on your system
Let's use the [Windows Subsystem for Linux](https://acassis.wordpress.com/2018/01/10/how-to-build-nuttx-on-windows-10/)
NXP has integrated LVGL into the MCUXpresso SDK packages for several of their general
purpose and crossover microcontrollers, allowing easy evaluation and migration into your
product design. [Download an SDK for a supported board](https://www.nxp.com/design/software/embedded-software/littlevgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY?&tid=vanLITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY)
today and get started with your next GUI application.
## Creating new project with LVGL
Downloading the MCU SDK example project is recommended as a starting point. It comes fully
configured with LVGL (and with PXP support if module is present), no additional integration
work is required.
## Adding HW acceleration for NXP iMX RT platforms using PXP (PiXel Pipeline) engine for existing projects
Several drawing features in LVGL can be offloaded to the PXP engine. The CPU is available for other operations while the PXP is running. An RTOS is required to block the LVGL drawing thread and switch to another task or suspend the CPU for power savings.
You can try out LVGL **using only your PC** (i.e. without any development boards). LVGL will run on a simulator environment on the PC where anyone can write and experiment with real LVGL applications.
Using the simulator on a PC has the following advantages:
- Hardware independent - Write code, run it on the PC and see the result on a monitor.
- Cross-platform - Any Windows, Linux or macOS system can run the PC simulator.
- Portability - The written code is portable, which means you can simply copy it when migrating to embedded hardware.
- Easy Validation - The simulator is also very useful to report bugs because it provides a common platform for every user. So it's a good idea to reproduce a bug in the simulator and use that code snippet in the [Forum](https://forum.lvgl.io).
## Select an IDE
The simulator is ported to various IDEs (Integrated Development Environments). Choose your favorite IDE, read its README on GitHub, download the project, and load it to the IDE.
- [Eclipse with SDL driver](https://github.com/lvgl/lv_sim_eclipse_sdl): Recommended on Linux and Mac
- [CodeBlocks](https://github.com/lvgl/lv_sim_codeblocks_win): Recommended on Windows
- [VisualStudio with SDL driver](https://github.com/lvgl/lv_sim_visual_studio_sdl): For Windows
- [VSCode with SDL driver](https://github.com/lvgl/lv_sim_vscode_sdl): Recommended on Linux and Mac
- [PlatformIO with SDL driver](https://github.com/lvgl/lv_platformio): Recommended on Linux and Mac
You can use any IDE for development but, for simplicity, the configuration for Eclipse CDT is what we'll focus on in this tutorial.
The following section describes the set-up guide of Eclipse CDT in more detail.
**Note: If you are on Windows, it's usually better to use the Visual Studio or CodeBlocks projects instead. They work out of the box without requiring extra steps.**
## Set-up Eclipse CDT
### Install Eclipse CDT
[Eclipse CDT](https://eclipse.org/cdt/) is a C/C++ IDE.
Eclipse is a Java-based tool so be sure **Java Runtime Environment** is installed on your system.
On Debian-based distros (e.g. Ubuntu): `sudo apt-get install default-jre`
Note: If you are using other distros, then please install a 'Java Runtime Environment' suitable to your distro.
Note: If you are using macOS and get a "Failed to create the Java Virtual Machine" error, uninstall any other Java JDK installs and install Java JDK 8u. This should fix the problem.
You can download Eclipse's CDT from: [https://www.eclipse.org/cdt/downloads.php](https://www.eclipse.org/cdt/downloads.php). Start the installer and choose *Eclipse CDT* from the list.
### Install SDL 2
The PC simulator uses the [SDL 2](https://www.libsdl.org/download-2.0.php) cross-platform library to simulate a TFT display and a touchpad.
#### Linux
On **Linux** you can easily install SDL2 using a terminal:
1. Find the current version of SDL2: `apt-cache search libsdl2 (e.g. libsdl2-2.0-0)`
2. Install SDL2: `sudo apt-get install libsdl2-2.0-0` (replace with the found version)
3. Install SDL2 development package: `sudo apt-get install libsdl2-dev`
4. If build essentials are not installed yet: `sudo apt-get install build-essential`
#### Windows
If you are using **Windows** firstly you need to install MinGW ([64 bit version](http://mingw-w64.org/doku.php/download)). After installing MinGW, do the following steps to add SDL2:
1. Download the development libraries of SDL.
Go to [https://www.libsdl.org/download-2.0.php](https://www.libsdl.org/download-2.0.php) and download _Development Libraries: SDL2-devel-2.0.5-mingw.tar.gz_
2. Decompress the file and go to _x86_64-w64-mingw32_ directory (for 64 bit MinGW) or to _i686-w64-mingw32_ (for 32 bit MinGW)
3. Copy _..._mingw32/include/SDL2_ folder to _C:/MinGW/.../x86_64-w64-mingw32/include_
4. Copy _..._mingw32/lib/_ content to _C:/MinGW/.../x86_64-w64-mingw32/lib_
5. Copy _..._mingw32/bin/SDL2.dll_ to _{eclipse_worksapce}/pc_simulator/Debug/_. Do it later when Eclipse is installed.
Note: If you are using **Microsoft Visual Studio** instead of Eclipse then you don't have to install MinGW.
#### OSX
On **OSX** you can easily install SDL2 with brew: `brew install sdl2`
If something is not working, then please refer [this tutorial](http://lazyfoo.net/tutorials/SDL/01_hello_SDL/index.php) to get started with SDL.
### Pre-configured project
A pre-configured graphics library project (based on the latest release) is always available to get started easily.
You can find the latest one on [GitHub](https://github.com/lvgl/lv_sim_eclipse_sdl).
(Please note that, the project is configured for Eclipse CDT).
### Add the pre-configured project to Eclipse CDT
Run Eclipse CDT. It will show a dialogue about the **workspace path**. Before accepting the path, check that path and copy (and unzip) the downloaded pre-configured project there. After that, you can accept the workspace path. Of course you can modify this path but in that case copy the project to the corresponding location.
Close the start-up window and go to **File->Import** and choose **General->Existing project into Workspace**. **Browse the root directory** of the project and click **Finish**
On **Windows** you have to do two additional things:
- Copy the **SDL2.dll** into the project's Debug folder
- Right-click on the project -> Project properties -> C/C++ Build -> Settings -> Libraries -> Add ... and add _mingw32_ above SDLmain and SDL. (The order is important: mingw32, SDLmain, SDL)
### Compile and Run
Now you are ready to run LVGL on your PC. Click on the Hammer Icon on the top menu bar to Build the project. If you have done everything right, then you will not get any errors. Note that on some systems additional steps might be required to "see" SDL 2 from Eclipse but in most cases the configuration in the downloaded project is enough.
After a successful build, click on the Play button on the top menu bar to run the project. Now a window should appear in the middle of your screen.
Now you are ready to use LVGL and begin development on your PC.
Here you can learn the most important things about LVGL.
You should read this first to get a general impression and read the detailed [Porting](/porting/index) and [Overview](/overview/index) sections after that.
## Get started in a simulator
Instead of porting LVGL to embedded hardware straight away, it's highly recommended to get started in a simulator first.
LVGL is ported to many IDEs to be sure you will find your favorite one.
Go to the [Simulators](/get-started/pc-simulator) section to get ready-to-use projects that can be run on your PC.
This way you can save the time of porting for now and get some experience with LVGL immediately.
## Add LVGL into your project
If you would rather try LVGL on your own project follow these steps:
- [Download](https://github.com/lvgl/lvgl/archive/master.zip) or clone the library from GitHub with `git clone https://github.com/lvgl/lvgl.git`.
- Copy the `lvgl` folder into your project.
- Copy `lvgl/lv_conf_template.h` as `lv_conf.h` next to the `lvgl` folder, change the first `#if 0` to `1` to enable the file's content and set the `LV_COLOR_DEPTH` defines.
- Include `lvgl/lvgl.h` in files where you need to use LVGL related functions.
- Call `lv_tick_inc(x)` every `x` milliseconds in a Timer or Task (`x` should be between 1 and 10). It is required for the internal timing of LVGL.
Alternatively, configure `LV_TICK_CUSTOM` (see `lv_conf.h`) so that LVGL can retrieve the current time directly.
- Call `lv_init()`
- Create a draw buffer: LVGL will render the graphics here first, and send the rendered image to the display.
The buffer size can be set freely but 1/10 screen size is a good starting point.
```c
staticlv_disp_draw_buf_tdraw_buf;
staticlv_color_tbuf1[DISP_HOR_RES*DISP_VER_RES/10];/*Declare a buffer for 1/10 screen size*/
lv_disp_draw_buf_init(&draw_buf,buf1,NULL,MY_DISP_HOR_RES*MY_DISP_VER_SER/10);/*Initialize the display buffer.*/
```
- Implement and register a function which can copy the rendered image to an area of your display:
```c
staticlv_disp_drv_tdisp_drv;/*Descriptor of a display driver*/
/*`touchpad_is_pressed` and `touchpad_get_xy` needs to be implemented by you*/
if(touchpad_is_pressed()){
data->state=LV_INDEV_STATE_PRESSED;
touchpad_get_xy(&data->point.x,&data->point.y);
}else{
data->state=LV_INDEV_STATE_RELEASED;
}
}
```
- Call `lv_timer_handler()` periodically every few milliseconds in the main `while(1)` loop or in an operating system task.
It will redraw the screen if required, handle input devices, animation etc.
For a more detailed guide go to the [Porting](/porting/index) section.
## Learn the basics
### Widgets
The graphical elements like Buttons, Labels, Sliders, Charts etc. are called objects or widgets. Go to [Widgets](/widgets/index) to see the full list of available widgets.
Every object has a parent object where it is created. For example, if a label is created on a button, the button is the parent of label.
The child object moves with the parent and if the parent is deleted the children will be deleted too.
Children can be visible only within their parent's bounding area. In other words, the parts of the children outside the parent are clipped.
A Screen is the "root" parent. You can have any number of screens.
To get the current screen call `lv_scr_act()`, and to load a screen use `lv_scr_load(scr1)`.
You can create a new object with `lv_<type>_create(parent)`. It will return an `lv_obj_t *` variable that can be used as a reference to the object to set its parameters.
For example:
```c
lv_obj_t*slider1=lv_slider_create(lv_scr_act());
```
To set some basic attributes `lv_obj_set_<parameter_name>(obj, <value>)` functions can be used. For example:
```c
lv_obj_set_x(btn1,30);
lv_obj_set_y(btn1,10);
lv_obj_set_size(btn1,200,50);
```
Along with the basic attributes, widgets can have type specific parameters which are set by `lv_<widget_type>_set_<parameter_name>(obj, <value>)` functions. For example:
```c
lv_slider_set_value(slider1,70,LV_ANIM_ON);
```
To see the full API visit the documentation of the widgets or the related header file (e.g. [lvgl/src/widgets/lv_slider.h](https://github.com/lvgl/lvgl/blob/master/src/widgets/lv_slider.h)).
### Events
Events are used to inform the user that something has happened with an object.
You can assign one or more callbacks to an object which will be called if the object is clicked, released, dragged, being deleted, etc.
A callback is assigned like this:
```c
lv_obj_add_event_cb(btn,btn_event_cb,LV_EVENT_CLICKED,NULL);/*Assign a callback to the button*/
...
voidbtn_event_cb(lv_event_t*e)
{
printf("Clicked\n");
}
```
`LV_EVENT_ALL` can be used instead of `LV_EVENT_CLICKED` to invoke the callback for any event.
From `lv_event_t * e` the current event code can be retrieved with:
```c
lv_event_code_tcode=lv_event_get_code(e);
```
The object that triggered the event can be retrieved with:
```c
lv_obj_t*obj=lv_event_get_target(e);
```
To learn all features of the events go to the [Event overview](/overview/event) section.
### Parts
Widgets might be built from one or more *parts*. For example, a button has only one part called `LV_PART_MAIN`.
However, a [Slider](/widgets/core/slider) has `LV_PART_MAIN`, `LV_PART_INDICATOR` and `LV_PART_KNOB`.
By using parts you can apply different styles to sub-elements of a widget. (See below)
Read the widgets' documentation to learn which parts each uses.
### States
LVGL objects can be in a combination of the following states:
-`LV_STATE_DEFAULT` Normal, released state
-`LV_STATE_CHECKED` Toggled or checked state
-`LV_STATE_FOCUSED` Focused via keypad or encoder or clicked via touchpad/mouse
-`LV_STATE_FOCUS_KEY` Focused via keypad or encoder but not via touchpad/mouse
-`LV_STATE_EDITED` Edit by an encoder
-`LV_STATE_HOVERED` Hovered by mouse (not supported now)
-`LV_STATE_PRESSED` Being pressed
-`LV_STATE_SCROLLED` Being scrolled
-`LV_STATE_DISABLED` Disabled
For example, if you press an object it will automatically go to the `LV_STATE_FOCUSED` and `LV_STATE_PRESSED` states and when you release it the `LV_STATE_PRESSED` state will be removed while focus remains active.
To check if an object is in a given state use `lv_obj_has_state(obj, LV_STATE_...)`. It will return `true` if the object is currently in that state.
To manually add or remove states use:
```c
lv_obj_add_state(obj,LV_STATE_...);
lv_obj_clear_state(obj,LV_STATE_...);
```
### Styles
A style instance contains properties such as background color, border width, font, etc. that describe the appearance of objects.
Styles are represented with `lv_style_t` variables. Only their pointer is saved in the objects so they need to be defined as static or global.
Before using a style it needs to be initialized with `lv_style_init(&style1)`. After that, properties can be added to configure the style. For example:
See the full list of properties [here](/overview/style.html#properties).
Styles are assigned using the ORed combination of an object's part and state. For example to use this style on the slider's indicator when the slider is pressed:
If the *part* is `LV_PART_MAIN` it can be omitted:
```c
lv_obj_add_style(btn1,&style1,LV_STATE_PRESSED);/*Equal to LV_PART_MAIN | LV_STATE_PRESSED*/
```
Similarly, `LV_STATE_DEFAULT` can be omitted too:
```c
lv_obj_add_style(slider1,&style1,LV_PART_INDICATOR);/*Equal to LV_PART_INDICATOR | LV_STATE_DEFAULT*/
```
For `LV_STATE_DEFAULT` and `LV_PART_MAIN` simply write `0`:
```c
lv_obj_add_style(btn1,&style1,0);/*Equal to LV_PART_MAIN | LV_STATE_DEFAULT*/
```
Styles can be cascaded (similarly to CSS). It means you can add more styles to a part of an object.
For example `style_btn` can set a default button appearance, and `style_btn_red` can overwrite the background color to make the button red:
```c
lv_obj_add_style(btn1,&style_btn,0);
lv_obj_add_style(btn1,&style1_btn_red,0);
```
If a property is not set on for the current state, the style with `LV_STATE_DEFAULT` will be used. A default value is used if the property is not defined in the default state.
Some properties (typically the text-related ones) can be inherited. This means if a property is not set in an object it will be searched for in its parents too.
For example, you can set the font once in the screen's style and all text on that screen will inherit it by default.
Local style properties also can be added to objects. This creates a style which resides inside the object and is used only by the object:
<a href="intro/index.html"><img class="home-img" src="_static/img/home_1.png" alt="Get familiar with the LVGL project"></a>
<a href="get-started/index.html"><img class="home-img" src="_static/img/home_2.png" alt="Learn the basic of LVGL and its usage on various platforms"></a>
<a href="porting/index.html"><img class="home-img" src="_static/img/home_3.png" alt="See how to port LVGL to any platform"></a>
<a href="overview/index.html"><img class="home-img" src="_static/img/home_4.png" alt="Learn the how LVGL works in more detail"></a>
<a href="widgets/index.html"><img class="home-img" src="_static/img/home_5.png" alt="Take a look at the description of the available widgets"></a>
<a href="CONTRIBUTING.html"><img class="home-img" src="_static/img/home_6.png" alt="Be part of the development of LVGL"></a>
LVGL (Light and Versatile Graphics Library) is a free and open-source graphics library providing everything you need to create an embedded GUI with easy-to-use graphical elements, beautiful visual effects and a low memory footprint.
## Key features
- Powerful building blocks such as buttons, charts, lists, sliders, images, etc.
- Advanced graphics with animations, anti-aliasing, opacity, smooth scrolling
- Various input devices such as touchpad, mouse, keyboard, encoder, etc.
- Multi-language support with UTF-8 encoding
- Multi-display support, i.e. use multiple TFT, monochrome displays simultaneously
- Fully customizable graphic elements with CSS-like styles
- Hardware independent: use with any microcontroller or display
- Scalable: able to operate with little memory (64 kB Flash, 16 kB RAM)
- OS, external memory and GPU are supported but not required
- Single frame buffer operation even with advanced graphic effects
- Written in C for maximal compatibility (C++ compatible)
- Simulator to start embedded GUI design on a PC without embedded hardware
- Binding to MicroPython
- Tutorials, examples, themes for rapid GUI design
- Documentation is available online and as PDF
- Free and open-source under MIT license
## Requirements
Basically, every modern controller which is able to drive a display is suitable to run LVGL. The minimal requirements are:
<ul>
<li> 16, 32 or 64 bit microcontroller or processor</li>
<li>> 16 MHz clock speed is recommended</li>
<li> Flash/ROM: > 64 kB for the very essential components (> 180 kB is recommended)</li>
<li> RAM:
<ul>
<li> Static RAM usage: ~2 kB depending on the used features and object types</li>
<li> Stack: > 2kB (> 8 kB is recommended)</li>
<li> Dynamic data (heap): > 4 KB (> 32 kB is recommended if using several objects).
Set by <em>LV_MEM_SIZE</em> in <em>lv_conf.h</em>. </li>
<em>Note that memory usage may vary depending on architecture, compiler and build options.</em>
## License
The LVGL project (including all repositories) is licensed under [MIT license](https://github.com/lvgl/lvgl/blob/master/LICENCE.txt).
This means you can use it even in commercial projects.
It's not mandatory but we highly appreciate it if you write a few words about your project in the [My projects](https://forum.lvgl.io/c/my-projects/10) category of the forum or a private message to [lvgl.io](https://lvgl.io/#contact).
Although you can get LVGL for free there is a massive amount of work behind it. It's created by a group of volunteers who made it available for you intheir free time.
To make the LVGL project sustainable, please consider [contributing](/CONTRIBUTING) to the project.
You can choose from [many different ways of contributing](/CONTRIBUTING) such as simply writing a tweet about you are using LVGL, fixing bugs, translating the documentation, or even becoming a maintainer.
## Repository layout
All repositories of the LVGL project are hosted on GitHub: https://github.com/lvgl
You will find these repositories there:
- [lvgl](https://github.com/lvgl/lvgl) The library itself with many [examples](https://github.com/lvgl/lvgl/blob/master/examples/).
- [lv_demos](https://github.com/lvgl/lv_demos) Demos created with LVGL.
- [lv_drivers](https://github.com/lvgl/lv_drivers) Display and input device drivers
- [blog](https://github.com/lvgl/blog) Source of the blog's site (https://blog.lvgl.io)
- [sim](https://github.com/lvgl/sim) Source of the online simulator's site (https://sim.lvgl.io)
- [lv_sim_...](https://github.com/lvgl?q=lv_sim&type=&language=) Simulator projects for various IDEs and platforms
- [lv_port_...](https://github.com/lvgl?q=lv_port&type=&language=) LVGL ports to development boards
- [lv_binding_..](https://github.com/lvgl?q=lv_binding&type=&language=l) Bindings to other languages
- [lv_...](https://github.com/lvgl?q=lv_&type=&language=) Ports to other platforms
## Release policy
The core repositories follow the rules of [Semantic versioning](https://semver.org/):
- Major versions for incompatible API changes. E.g. v5.0.0, v6.0.0
- Minor version for new but backward-compatible functionalities. E.g. v6.1.0, v6.2.0
- Patch version for backward-compatible bug fixes. E.g. v6.1.1, v6.1.2
Tags like `vX.Y.Z` are createdfor every release.
### Release cycle
- Bug fixes: Released on demand even weekly
- Minor releases: Every 3-4 months
- Major releases: Approximately yearly
### Branches
The core repositories have at least the following branches:
-`master` latest version, patches are merged directly here.
-`release/vX.Y` stable versions of the minor releases
-`fix/some-description` temporary branches for bug fixes
-`feat/some-description` temporary branches for features
### Changelog
The changes are recorded in [CHANGELOG.md](/CHANGELOG).
### Version support
Before v8 every minor release of major releases is supported for 1 year.
Starting from v8, every minor release is supported for 1 year.
| Version | Release date | Support end | Active |
|---------|--------------|-------------|--------|
| v5.3 | Feb 1, 2019 |Feb 1, 2020 | No |
| v6.1 | Nov 26, 2019 |Nov 26, 2020 | No |
| v7.11 | Mar 16, 2021 |Mar 16, 2022 | Yes |
| v8.0 | 1 Jun, 2021 |1 Jun, 2022 | Yes |
| v8.1 | In progress | | |
## FAQ
### Where can I ask questions?
You can ask questions in the forum: [https://forum.lvgl.io/](https://forum.lvgl.io/).
We use [GitHub issues](https://github.com/lvgl/lvgl/issues) for development related discussion.
You should use them only if your question or issue is tightly related to the development of the library.
### Is my MCU/hardware supported?
Every MCU which is capable of driving a display via parallel port, SPI, RGB interface or anything else and fulfills the [Requirements](#requirements) is supported by LVGL.
This includes:
- "Common" MCUs like STM32F, STM32H, NXP Kinetis, LPC, iMX, dsPIC33, PIC32 etc.
- Bluetooth, GSM, Wi-Fi modules like Nordic NRF and Espressif ESP32
- Linux with frame buffer device such as /dev/fb0. This includes Single-board computers like the Raspberry Pi
- Anything else with a strong enough MCU and a peripheral to drive a display
### Is my display supported?
LVGL needs just one simple driver function to copy an array of pixels into a given area of the display.
If you can do this with your display then you can use it with LVGL.
Some examples of the supported display types:
- TFTs with 16 or 24 bit color depth
- Monitors with an HDMI port
- Small monochrome displays
- Gray-scale displays
- even LED matrices
- or any other display where you can control the color/state of the pixels
See the [Porting](/porting/display) section to learn more.
### Nothing happens, my display driver is not called. What have I missed?
Be sure you are calling `lv_tick_inc(x)` in an interrupt and `lv_timer_handler()` in your main `while(1)`.
Learn more in the [Tick](/porting/tick) and [Task handler](/porting/task-handler) sections.
### Why is the display driver called only once? Only the upper part of the display is refreshed.
Be sure you are calling `lv_disp_flush_ready(drv)` at the end of your "*display flush callback*".
### Why do I see only garbage on the screen?
Probably there a bug in your display driver. Try the following code without using LVGL. You should see a square with red-blue gradient.
Probably LVGL's color format is not compatible with your display's color format. Check `LV_COLOR_DEPTH` in *lv_conf.h*.
If you are using 16-bit colors with SPI (or another byte-oriented interface) you probably need to set `LV_COLOR_16_SWAP 1` in *lv_conf.h*.
It swaps the upper and lower bytes of the pixels.
### How to speed up my UI?
- Turn on compiler optimization and enable cache if your MCU has it
- Increase the size of the display buffer
- Use two display buffers and flush the buffer with DMA (or similar peripheral) in the background
- Increase the clock speed of the SPI or parallel port if you use them to drive the display
- If your display has a SPI port consider changing to a model with a parallel interface because it has much higher throughput
- Keep the display buffer in internal RAM (not in external SRAM) because LVGL uses it a lot and it should have a fast access time
### How to reduce flash/ROM usage?
You can disable all the unused features (such as animations, file system, GPU etc.) and object types in *lv_conf.h*.
If you are using GCC you can add `-fdata-sections -ffunction-sections` compiler flags and `--gc-sections` linker flag to remove unused functions and variables from the final binary.
### How to reduce the RAM usage
- Lower the size of the *Display buffer*
- Reduce `LV_MEM_SIZE` in *lv_conf.h*. This memory is used when you create objects like buttons, labels, etc.
- To work with lower `LV_MEM_SIZE` you can create objects only when required and delete them when they are not needed anymore
### How to work with an operating system?
To work with an operating system where tasks can interrupt each other (preemptively) you should protect LVGL related function calls with a mutex.
See the [Operating system and interrupts](/porting/os) section to learn more.
The Flexbox (or Flex for short) is a subset of [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
It can arrange items into rows or columns (tracks), handle wrapping, adjust the spacing between the items and tracks, handle *grow* to make the item(s) fill the remaining space with respect to min/max width and height.
To make an object flex container call `lv_obj_set_layout(obj, LV_LAYOUT_FLEX)`.
Note that the flex layout feature of LVGL needs to be globally enabled with `LV_USE_FLEX` in `lv_conf.h`.
## Terms
- tracks: the rows or columns
- main direction: row or column, the direction in which the items are placed
- cross direction: perpendicular to the main direction
- wrap: if there is no more space in the track a new track is started
- grow: if set on an item it will grow to fill the remaining space on the track.
The available space will be distributed among items respective to their grow value (larger value means more space)
- gap: the space between the rows and columns or the items on a track
## Simple interface
With the following functions you can set a Flex layout on any parent.
### Flex flow
`lv_obj_set_flex_flow(obj, flex_flow)`
The possible values for `flex_flow` are:
-`LV_FLEX_FLOW_ROW` Place the children in a row without wrapping
-`LV_FLEX_FLOW_COLUMN` Place the children in a column without wrapping
-`LV_FLEX_FLOW_ROW_WRAP` Place the children in a row with wrapping
-`LV_FLEX_FLOW_COLUMN_WRAP` Place the children in a column with wrapping
-`LV_FLEX_FLOW_ROW_REVERSE` Place the children in a row without wrapping but in reversed order
-`LV_FLEX_FLOW_COLUMN_REVERSE` Place the children in a column without wrapping but in reversed order
-`LV_FLEX_FLOW_ROW_WRAP_REVERSE` Place the children in a row with wrapping but in reversed order
-`LV_FLEX_FLOW_COLUMN_WRAP_REVERSE` Place the children in a column with wrapping but in reversed order
### Flex align
To manage the placement of the children use `lv_obj_set_flex_align(obj, main_place, cross_place, track_cross_place)`
-`main_place` determines how to distribute the items in their track on the main axis. E.g. flush the items to the right on `LV_FLEX_FLOW_ROW_WRAP`. (It's called `justify-content` in CSS)
-`cross_place` determines how to distribute the items in their track on the cross axis. E.g. if the items have different height place them to the bottom of the track. (It's called `align-items` in CSS)
-`track_cross_place` determines how to distribute the tracks (It's called `align-content` in CSS)
The possible values are:
-`LV_FLEX_ALIGN_START` means left on a horizontally and top vertically. (default)
-`LV_FLEX_ALIGN_END` means right on a horizontally and bottom vertically
-`LV_FLEX_ALIGN_CENTER` simply center
-`LV_FLEX_ALIGN_SPACE_EVENLY` items are distributed so that the spacing between any two items (and the space to the edges) is equal. Does not apply to `track_cross_place`.
-`LV_FLEX_ALIGN_SPACE_AROUND` items are evenly distributed in the track with equal space around them.
Note that visually the spaces aren’t equal, since all the items have equal space on both sides.
The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. Not applies to `track_cross_place`.
-`LV_FLEX_ALIGN_SPACE_BETWEEN` items are evenly distributed in the track: first item is on the start line, last item on the end line. Not applies to `track_cross_place`.
### Flex grow
Flex grow can be used to make one or more children fill the available space on the track. When more children have grow parameters, the available space will be distributed proportionally to the grow values.
For example, there is 400 px remaining space and 4 objects with grow:
-`A` with grow = 1
-`B` with grow = 1
-`C` with grow = 2
`A` and `B` will have 100 px size, and `C` will have 200 px size.
Flex grow can be set on a child with `lv_obj_set_flex_grow(child, value)`. `value` needs to be > 1 or 0 to disable grow on the child.
## Style interface
All the Flex-related values are style properties under the hood and you can use them similarly to any other style property. The following flex related style properties exist:
-`FLEX_FLOW`
-`FLEX_MAIN_PLACE`
-`FLEX_CROSS_PLACE`
-`FLEX_TRACK_PLACE`
-`FLEX_GROW`
### Internal padding
To modify the minimum space flexbox inserts between objects, the following properties can be set on the flex container style:
-`pad_row` Sets the padding between the rows.
-`pad_column` Sets the padding between the columns.
These can for example be used if you don't want any padding between your objects: `lv_style_set_pad_column(&row_container_style,0)`
## Other features
### RTL
If the base direction of the container is set the `LV_BASE_DIR_RTL` the meaning of `LV_FLEX_ALIGN_START` and `LV_FLEX_ALIGN_END` is swapped on `ROW` layouts. I.e. `START` will mean right.
The items on `ROW` layouts, and tracks of `COLUMN` layouts will be placed from right to left.
### New track
You can force Flex to put an item into a new line with `lv_obj_add_flag(child, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK)`.
The Grid layout is a subset of [CSS Flexbox](https://css-tricks.com/snippets/css/complete-guide-grid/).
It can arrange items into a 2D "table" that has rows or columns (tracks). The item can span through multiple columns or rows.
The track's size can be set in pixel, to the largest item (`LV_GRID_CONTENT`) or in "Free unit" (FR) to distribute the free space proportionally.
To make an object a grid container call `lv_obj_set_layout(obj, LV_LAYOUT_GRID)`.
Note that the grid layout feature of LVGL needs to be globally enabled with `LV_USE_GRID` in `lv_conf.h`.
## Terms
- tracks: the rows or columns
- free unit (FR): if set on track's size is set in `FR` it will grow to fill the remaining space on the parent.
- gap: the space between the rows and columns or the items on a track
## Simple interface
With the following functions you can easily set a Grid layout on any parent.
### Grid descriptors
First you need to describe the size of rows and columns. It can be done by declaring 2 arrays and the track sizes in them. The last element must be `LV_GRID_TEMPLATE_LAST`.
For example:
```
static lv_coord_t column_dsc[] = {100, 400, LV_GRID_TEMPLATE_LAST}; /*2 columns with 100 and 400 ps width*/
To set the descriptors on a parent use `lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)`.
Besides simple settings the size in pixel you can use two special values:
-`LV_GRID_CONTENT` set the width to the largest children on this track
-`LV_GRID_FR(X)` tell what portion of the remaining space should be used by this track. Larger value means larger space.
### Grid items
By default, the children are not added to the grid. They need to be added manually to a cell.
To do this call `lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)`.
`column_align` and `row_align` determine how to align the children in its cell. The possible values are:
-`LV_GRID_ALIGN_START` means left on a horizontally and top vertically. (default)
-`LV_GRID_ALIGN_END` means right on a horizontally and bottom vertically
-`LV_GRID_ALIGN_CENTER` simply center
`colum_pos` and `row_pos` means the zero based index of the cell into the item should be placed.
`colum_span` and `row_span` means how many tracks should the item involve from the start cell. Must be > 1.
### Grid align
If there are some empty space the track can be aligned several ways:
-`LV_GRID_ALIGN_START` means left on a horizontally and top vertically. (default)
-`LV_GRID_ALIGN_END` means right on a horizontally and bottom vertically
-`LV_GRID_ALIGN_CENTER` simply center
-`LV_GRID_ALIGN_SPACE_EVENLY` items are distributed so that the spacing between any two items (and the space to the edges) is equal. Not applies to `track_cross_place`.
-`LV_GRID_ALIGN_SPACE_AROUND` items are evenly distributed in the track with equal space around them.
Note that visually the spaces aren’t equal, since all the items have equal space on both sides.
The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. Not applies to `track_cross_place`.
-`LV_GRID_ALIGN_SPACE_BETWEEN` items are evenly distributed in the track: first item is on the start line, last item on the end line. Not applies to `track_cross_place`.
To set the track's alignment use `lv_obj_set_grid_align(obj, column_align, row_align)`.
## Style interface
All the Grid related values are style properties under the hood and you can use them similarly to any other style properties. The following Grid related style properties exist:
-`GRID_COLUMN_DSC_ARRAY`
-`GRID_ROW_DSC_ARRAY`
-`GRID_COLUMN_ALIGN`
-`GRID_ROW_ALIGN`
-`GRID_CELL_X_ALIGN`
-`GRID_CELL_COLUMN_POS`
-`GRID_CELL_COLUMN_SPAN`
-`GRID_CELL_Y_ALIGN`
-`GRID_CELL_ROW_POS`
-`GRID_CELL_ROW_SPAN`
### Internal padding
To modify the minimum space Grid inserts between objects, the following properties can be set on the Grid container style:
-`pad_row` Sets the padding between the rows.
-`pad_column` Sets the padding between the columns.
## Other features
### RTL
If the base direction of the container is set to `LV_BASE_DIR_RTL`, the meaning of `LV_GRID_ALIGN_START` and `LV_GRID_ALIGN_END` is swapped. I.e. `START` will mean right-most.
This extension allows the use of BMP images in LVGL.
This implementation uses [bmp-decoder](https://github.com/caj-johnson/bmp-decoder) library.
The pixel are read on demand (not the whole image is loaded) so using BMP images requires very little RAM.
If enabled in `lv_conf.h` by `LV_USE_BMP` LVGL will register a new image decoder automatically so BMP files can be directly used as image sources. For example:
```
lv_img_set_src(my_img, "S:path/to/picture.bmp");
```
Note that, a file system driver needs to registered to open images from files. Read more about it [here](https://docs.lvgl.io/master/overview/file-system.html) or just enable one in `lv_conf.h` with `LV_USE_FS_...`
## Limitations
- Only BMP files are supported and BMP images as C array (`lv_img_dsc_t`) are not. It's because there is no practical differences between how the BMP files and LVGL's image format stores the image data.
- BMP files can be loaded only from file. If you want to store them in flash it's better to convert them to C array with [LVGL's image converter](https://lvgl.io/tools/imageconverter).
- The BMP files color format needs to match with `LV_COLOR_DEPTH`. Use GIMP to save the image in the required format.
Both RGB888 and ARGB888 works with `LV_COLOR_DEPTH 32`
- Palette is not supported.
- Because not the whole image is read in can not be zoomed or rotated.
LVGL has a [File system](https://docs.lvgl.io/master/overview/file-system.html) module to provides an abstraction layer for various file system drivers.
- STDIO (Linux and Windows using C standard function .e.g fopen, fread)
- POSIX (Linux and Windows using POSIX function .e.g open, read)
- WIN32 (Windows using Win32 API function .e.g CreateFileA, ReadFile)
You still need to provide the drivers and libraries, this extensions provide only the bridge between FATFS, STDIO, POSIX, WIN32 and LVGL.
## Usage
In `lv_conf.h` set a driver letter for one or more `LV_FS_USE_...` define(s). After that you can access files using that driver letter. Setting `'\0'` will disable use of that interface.
Allow to use of GIF images in LVGL. Based on https://github.com/lecram/gifdec
When enabled in `lv_conf.h` with `LV_USE_GIF``lv_gif_create(parent)` can be used to create a gif widget.
`lv_gif_set_src(obj, src)` works very similarly to `lv_img_set_src`. As source It also accepts images as variables (`lv_img_dsc_t`) or files.
## Convert GIF files to C array
To convert a GIF file to byte values array use [LVGL's online converter](https://lvgl.io/tools/imageconverter). Select "Raw" color format and "C array" Output format.
## Use GIF images from file
For example:
```c
lv_gif_set_src(obj,"S:path/to/example.gif");
```
Note that, a file system driver needs to regsitered to open images from files. Read more about it [here](https://docs.lvgl.io/master/overview/file-system.html) or just enable one in `lv_conf.h` with `LV_USE_FS_...`
## Memory requirements
To decode and display a GIF animation the following amount of RAM is required:
-`LV_COLOR_DEPTH 8`: 3 x image width x image height
-`LV_COLOR_DEPTH 16`: 4 x image width x image height
-`LV_COLOR_DEPTH 32`: 5 x image width x image height
Allow the use of PNG images in LVGL. This implementation uses [lodepng](https://github.com/lvandeve/lodepng) library.
If enabled in `lv_conf.h` by `LV_USE_PNG` LVGL will register a new image decoder automatically so PNG files can be directly used as any other image sources.
Note that, a file system driver needs to registered to open images from files. Read more about it [here](https://docs.lvgl.io/master/overview/file-system.html) or just enable one in `lv_conf.h` with `LV_USE_FS_...`
The whole PNG image is decoded so during decoding RAM equals to `image width x image height x 4` bytes are required.
As it might take significant time to decode PNG images LVGL's [images caching](https://docs.lvgl.io/master/overview/image.html#image-caching) feature can be useful.
Allows to use Lottie animations in LVGL. Taken from this [base repository](https://github.com/ValentiWorkLearning/lv_rlottie)
LVGL provides the interface to [Samsung/rlottie](https://github.com/Samsung/rlottie) library's C API. That is the actual Lottie player is not part of LVGL, it needs to be built separately.
## Build Rlottie
To build Samsung's Rlottie C++14-compatible compiler and optionally CMake 3.14 or higher is required.
To build on desktop you can follow the instrutions from Rlottie's [README](https://github.com/Samsung/rlottie/blob/master/README.md). In the most basic case it looks like this:
```
mkdir rlottie_workdir
cd rlottie_workdir
git clone https://github.com/Samsung/rlottie.git
mkdir build
cd build
cmake ../rlottie
make -j
sudo make install
```
And finally add the `-lrlottie` flag to your linker.
On embedded systems you need to take care of integrating Rlottie to the given build system.
## Usage
You can use animation from files or raw data (text). In either case first you need to enable `LV_USE_RLOTTIE` in `lv_conf.h`.
The `width` and `height` of the object be set in the *create* function and the animation will be scaled accordingly.
Note that, Rlottie uses the standard STDIO C file API, so you can use the path "normally" and no LVGL specific driver letter is required.
### Use Rlottie from raw string data
`lv_example_rlottie_approve.c` contains an example animation in raw format. Instead storing the JSON string a hex array is stored for the following reasons:
- avoid escaping `"` in the JSON file
- some compilers don't support very long strings
`lvgl/scripts/filetohex.py` can be used to convert a Lottie file a hex array. E.g.:
Allow the use of JPG images in LVGL. Besides that it also allows the use of a custom format, called Split JPG (SJPG), which can be decided in more optimal way on embedded systems.
## Overview
- Supports both normal JPG and the custom SJPG formats.
- Decoding normal JPG consumes RAM with the size fo the whole uncompressed image (recommended only for devices with more RAM)
- SJPG is a custom format based on "normal" JPG and specially made for LVGL.
- SJPG is 'split-jpeg' which is a bundle of small jpeg fragments with an sjpg header.
- SJPG size will be almost comparable to the jpg file or might be a slightly larger.
- File read from file and c-array are implemented.
- SJPEG frame fragment cache enables fast fetching of lines if availble in cache.
- By default the sjpg image cache will be image width * 2 * 16 bytes (can be modified)
- Currently only 16 bit image format is supported (TODO)
- Only the required partion of the JPG and SJPG images are decoded, therefore they can't be zoomed or rotated.
## Usage
If enabled in `lv_conf.h` by `LV_USE_SJPG` LVGL will register a new image decoder automatically so JPG and SJPG files can be directly used as image sources. For example:
```
lv_img_set_src(my_img, "S:path/to/picture.jpg");
```
Note that, a file system driver needs to registered to open images from files. Read more about it [here](https://docs.lvgl.io/master/overview/file-system.html) or just enable one in `lv_conf.h` with `LV_USE_FS_...`
## Converter
### Converting JPG to C array
- Use lvgl online tool https://lvgl.io/tools/imageconverter
- Color format = RAW, output format = C Array
### Converting JPG to SJPG
python3 and the PIL library required. (PIL can be installed with `pip3 install pillow`)
To create SJPG from JPG:
- Copy the image to convert into `lvgl/scripts`
-`cd lvgl/scripts`
-`python3 jpg_to_sjpg.py image_to_convert.jpg`. It creates both a C files and an SJPG image.
Snapshot provides APIs to take snapshot image for LVGL object together with its children. The image will look exactly like the object.
## Usage
Simply call API `lv_snapshot_take` to generate the image descriptor which can be set as image object src using `lv_img_set_src`.
Note, only below color formats are supported for now:
- LV_IMG_CF_TRUE_COLOR_ALPHA
- LV_IMG_CF_ALPHA_1BIT
- LV_IMG_CF_ALPHA_2BIT
- LV_IMG_CF_ALPHA_4BIT
- LV_IMG_CF_ALPHA_8BIT
### Free the Image
The memory `lv_snapshot_take` uses are dynamically allocated using `lv_mem_alloc`. Use API `lv_snapshot_free` to free the memory it takes. This will firstly free memory the image data takes, then the image descriptor.
Take caution to free the snapshot but not delete the image object. Before free the memory, be sure to firstly unlink it from image object, using `lv_img_set_src(NULL)` and `lv_img_cache_invalidate_src(src)`.
If the snapshot needs update now and then, or simply caller provides memory, use API `lv_res_t lv_snapshot_take_to_buf(lv_obj_t * obj, lv_img_cf_t cf, lv_img_dsc_t * dsc, void * buf, uint32_t buff_size);` for this case. It's caller's responsibility to alloc/free the memory.
If snapshot is generated successfully, the image descriptor is updated and image data will be stored to provided `buf`.
Note that snapshot may fail if provided buffer is not enough, which may happen when object size changes. It's recommended to use API `lv_snapshot_buf_size_needed` to check the needed buffer size in byte firstly and resize the buffer accordingly.
You can automatically change the value of a variable between a start and an end value using animations.
Animation will happen by periodically calling an "animator" function with the corresponding value parameter.
The *animator* functions have the following prototype:
```c
voidfunc(void*var,lv_anim_var_tvalue);
```
This prototype is compatible with the majority of the property *set* functions in LVGL. For example `lv_obj_set_x(obj, value)` or `lv_obj_set_width(obj, value)`
## Create an animation
To create an animation an `lv_anim_t` variable has to be initialized and configured with `lv_anim_set_...()` functions.
/*Time to wait before starting the animation [ms]*/
lv_anim_set_delay(&a,delay);
/*Set path (curve). Default is linear*/
lv_anim_set_path(&a,lv_anim_path_ease_in);
/*Set a callback to indicate when the animation is ready (idle).*/
lv_anim_set_ready_cb(&a,ready_cb);
/*Set a callback to indicate when the animation is started (after delay).*/
lv_anim_set_start_cb(&a,start_cb);
/*When ready, play the animation backward with this duration. Default is 0 (disabled) [ms]*/
lv_anim_set_playback_time(&a,time);
/*Delay before playback. Default is 0 (disabled) [ms]*/
lv_anim_set_playback_delay(&a,delay);
/*Number of repetitions. Default is 1. LV_ANIM_REPEAT_INFINITE for infinite repetition*/
lv_anim_set_repeat_count(&a,cnt);
/*Delay before repeat. Default is 0 (disabled) [ms]*/
lv_anim_set_repeat_delay(&a,delay);
/*true (default): apply the start value immediately, false: apply start value after delay when the anim. really starts. */
lv_anim_set_early_apply(&a,true/false);
/* START THE ANIMATION
*------------------*/
lv_anim_start(&a);/*Start the animation*/
```
You can apply multiple different animations on the same variable at the same time.
For example, animate the x and y coordinates with `lv_obj_set_x` and `lv_obj_set_y`. However, only one animation can exist with a given variable and function pair and `lv_anim_start()` will remove any existing animations for such a pair.
## Animation path
You can control the path of an animation. The most simple case is linear, meaning the current value between *start* and *end* is changed with fixed steps.
A *path* is a function which calculates the next value to set based on the current state of the animation. Currently, there are the following built-in path functions:
-`lv_anim_path_linear` linear animation
-`lv_anim_path_step` change in one step at the end
-`lv_anim_path_ease_in` slow at the beginning
-`lv_anim_path_ease_out` slow at the end
-`lv_anim_path_ease_in_out` slow at the beginning and end
-`lv_anim_path_overshoot` overshoot the end value
-`lv_anim_path_bounce` bounce back a little from the end value (like hitting a wall)
## Speed vs time
By default, you set the animation time directly. But in some cases, setting the animation speed is more practical.
The `lv_anim_speed_to_time(speed, start, end)` function calculates the required time in milliseconds to reach the end value from a start value with the given speed.
The speed is interpreted in _unit/sec_ dimension. For example, `lv_anim_speed_to_time(20,0,100)` will yield 5000 milliseconds. For example, in the case of `lv_obj_set_x`*unit* is pixels so *20* means *20 px/sec* speed.
## Delete animations
You can delete an animation with `lv_anim_del(var, func)` if you provide the animated variable and its animator function.
## Timeline
A timeline is a collection of multiple animations which makes it easy to create complex composite animations.
Firstly, create an animation element but don’t call `lv_anim_start()`.
Secondly, create an animation timeline object by calling `lv_anim_timeline_create()`.
Thirdly, add animation elements to the animation timeline by calling `lv_anim_timeline_add(at, start_time, &a)`. `start_time` is the start time of the animation on the timeline. Note that `start_time` will override the value of `delay`.
Finally, call `lv_anim_timeline_start(at)` to start the animation timeline.
It supports forward and backward playback of the entire animation group, using `lv_anim_timeline_set_reverse(at, reverse)`.
Call `lv_anim_timeline_stop(at)` to stop the animation timeline.
Call `lv_anim_timeline_set_progress(at, progress)` function to set the state of the object corresponding to the progress of the timeline.
Call `lv_anim_timeline_get_playtime(at)` function to get the total duration of the entire animation timeline.
Call `lv_anim_timeline_get_reverse(at)` function to get whether to reverse the animation timeline.
Call `lv_anim_timeline_del(at)` function to delete the animation timeline.
The color module handles all color-related functions like changing color depth, creating colors from hex code, converting between color depths, mixing colors, etc.
The type `lv_color_t` is used to store a color. Its fields are set according to `LV_COLOR_DEPTH` in `lv_conf.h`. (See below)
You may set `LV_COLOR_16_SWAP` in `lv_conf.h` to swap bytes of *RGB565* colors. You may need this when sending 16-bit colors via a byte-oriented interface like SPI. As 16-bit numbers are stored in little-endian format (lower byte at the lower address), the interface will send the lower byte first. However, displays usually need the higher byte first. A mismatch in the byte order will result in highly distorted colors.
## Creating colors
### RGB
Create colors from Red, Green and Blue channel values:
```c
//All channels are 0-255
lv_color_tc=lv_color_make(red,green,blue);
//From hex code 0x000000..0xFFFFFF interpreted as RED + GREEN + BLUE
lv_color_tc=lv_color_hex(0x123456);
//From 3 digits. Same as lv_color_hex(0x112233)
lv_color_tc=lv_color_hex3(0x123);
```
### HSV
Create colors from Hue, Saturation and Value values:
```c
//h = 0..359, s = 0..100, v = 0..100
lv_color_tc=lv_color_hsv_to_rgb(h,s,v);
//All channels are 0-255
lv_color_hsv_tc_hsv=lv_color_rgb_to_hsv(r,g,b);
//From lv_color_t variable
lv_color_hsv_tc_hsv=lv_color_to_hsv(color);
```
### Palette
LVGL includes [Material Design's palette](https://vuetifyjs.com/en/styles/colors/#material-colors) of colors. In this system all named colors have a nominal main color as well as four darker and five lighter variants.
The names of the colors are as follows:
-`LV_PALETTE_RED`
-`LV_PALETTE_PINK`
-`LV_PALETTE_PURPLE`
-`LV_PALETTE_DEEP_PURPLE`
-`LV_PALETTE_INDIGO`
-`LV_PALETTE_BLUE`
-`LV_PALETTE_LIGHT_BLUE`
-`LV_PALETTE_CYAN`
-`LV_PALETTE_TEAL`
-`LV_PALETTE_GREEN`
-`LV_PALETTE_LIGHT_GREEN`
-`LV_PALETTE_LIME`
-`LV_PALETTE_YELLOW`
-`LV_PALETTE_AMBER`
-`LV_PALETTE_ORANGE`
-`LV_PALETTE_DEEP_ORANGE`
-`LV_PALETTE_BROWN`
-`LV_PALETTE_BLUE_GREY`
-`LV_PALETTE_GREY`
To get the main color use `lv_color_t c = lv_palette_main(LV_PALETTE_...)`.
For the lighter variants of a palette color use `lv_color_t c = lv_palette_lighten(LV_PALETTE_..., v)`. `v` can be 1..5.
For the darker variants of a palette color use `lv_color_t c = lv_palette_darken(LV_PALETTE_..., v)`. `v` can be 1..4.
// Mix two colors with a given ratio 0: full c2, 255: full c1, 128: half c1 and half c2
lv_color_tc=lv_color_mix(c1,c2,ratio);
```
### Built-in colors
`lv_color_white()` and `lv_color_black()` return `0xFFFFFF` and `0x000000` respectively.
## Opacity
To describe opacity the `lv_opa_t` type is created from `uint8_t`. Some special purpose defines are also introduced:
-`LV_OPA_TRANSP` Value: 0, means no opacity making the color completely transparent
-`LV_OPA_10` Value: 25, means the color covers only a little
-`LV_OPA_20 ... OPA_80` follow logically
-`LV_OPA_90` Value: 229, means the color near completely covers
-`LV_OPA_COVER` Value: 255, means the color completely covers (full opacity)
You can also use the `LV_OPA_*` defines in `lv_color_mix()` as a mixing *ratio*.
## Color types
The following variable types are defined by the color module:
-`lv_color1_t` Monochrome color. Also has R, G, B fields for compatibility but they are always the same value (1 byte)
-`lv_color8_t` A structure to store R (3 bit),G (3 bit),B (2 bit) components for 8-bit colors (1 byte)
-`lv_color16_t` A structure to store R (5 bit),G (6 bit),B (5 bit) components for 16-bit colors (2 byte)
-`lv_color32_t` A structure to store R (8 bit),G (8 bit), B (8 bit) components for 24-bit colors (4 byte)
-`lv_color_t` Equal to `lv_color1/8/16/24_t` depending on the configured color depth setting
-`lv_color_int_t``uint8_t`, `uint16_t` or `uint32_t` depending on the color depth setting. Used to build color arrays from plain numbers.
-`lv_opa_t` A simple `uint8_t` type to describe opacity.
The `lv_color_t`, `lv_color1_t`, `lv_color8_t`, `lv_color16_t` and `lv_color32_t` types have four fields:
-`ch.red` red channel
-`ch.green` green channel
-`ch.blue` blue channel
-`full*` red + green + blue as one number
You can set the current color depth in *lv_conf.h*, by setting the `LV_COLOR_DEPTH` define to 1 (monochrome), 8, 16 or 32.
### Convert color
You can convert a color from the current color depth to another. The converter functions return with a number, so you have to use the `full` field to map a converted color back into a structure:
```c
lv_color_tc;
c.red=0x38;
c.green=0x70;
c.blue=0xCC;
lv_color1_tc1;
c1.full=lv_color_to1(c);/*Return 1 for light colors, 0 for dark colors*/
lv_color8_tc8;
c8.full=lv_color_to8(c);/*Give a 8 bit number with the converted color*/
lv_color16_tc16;
c16.full=lv_color_to16(c);/*Give a 16 bit number with the converted color*/
lv_color32_tc24;
c32.full=lv_color_to32(c);/*Give a 32 bit number with the converted color*/
Similarly to many other parts of LVGL, the concept of setting the coordinates was inspired by CSS. LVGL has by no means a complete implementation of CSS but a comparable subset is implemented (sometimes with minor adjustments).
In short this means:
- Explicitly set coordinates are stored in styles (size, position, layouts, etc.)
- support min-width, max-width, min-height, max-height
- have pixel, percentage, and "content" units
- x=0; y=0 coordinate means the top-left corner of the parent plus the left/top padding plus border width
- width/height means the full size, the "content area" is smaller with padding and border width
- a subset of flexbox and grid layouts are supported
### Units
- pixel: Simply a position in pixels. An integer always means pixels. E.g. `lv_obj_set_x(btn, 10)`
- percentage: The percentage of the size of the object or its parent (depending on the property). `lv_pct(value)` converts a value to percentage. E.g. `lv_obj_set_width(btn, lv_pct(50))`
-`LV_SIZE_CONTENT`: Special value to set the width/height of an object to involve all the children. It's similar to `auto` in CSS. E.g. `lv_obj_set_width(btn, LV_SIZE_CONTENT)`.
An object's "box" is built from the following parts:
- bounding box: the width/height of the elements.
- border width: the width of the border.
- padding: space between the sides of the object and its children.
- content: the content area which is the size of the bounding box reduced by the border width and padding.

The border is drawn inside the bounding box. Inside the border LVGL keeps a "padding margin" when placing an object's children.
The outline is drawn outside the bounding box.
### Important notes
This section describes special cases in which LVGL's behavior might be unexpected.
#### Postponed coordinate calculation
LVGL doesn't recalculate all the coordinate changes immediately. This is done to improve performance.
Instead, the objects are marked as "dirty" and before redrawing the screen LVGL checks if there are any "dirty" objects. If so it refreshes their position, size and layout.
In other words, if you need to get the coordinate of an object and the coordinates were just changed, LVGL needs to be forced to recalculate the coordinates.
To do this call `lv_obj_update_layout(obj)`.
The size and position might depend on the parent or layout. Therefore `lv_obj_update_layout` recalculates the coordinates of all objects on the screen of `obj`.
#### Removing styles
As it's described in the [Using styles](#using-styles) section, coordinates can also be set via style properties.
To be more precise, under the hood every style coordinate related property is stored as a style property. If you use `lv_obj_set_x(obj, 20)` LVGL saves `x=20` in the local style of the object.
This is an internal mechanism and doesn't matter much as you use LVGL. However, there is one case in which you need to be aware of the implementation. If the style(s) of an object are removed by
```c
lv_obj_remove_style_all(obj)
```
or
```c
lv_obj_remove_style(obj,NULL,LV_PART_MAIN);
```
the earlier set coordinates will be removed as well.
For example:
```c
/*The size of obj1 will be set back to the default in the end*/
lv_obj_set_size(obj1,200,100);/*Now obj1 has 200;100 size*/
lv_obj_remove_style_all(obj1);/*It removes the set sizes*/
/*obj2 will have 200;100 size in the end */
lv_obj_remove_style_all(obj2);
lv_obj_set_size(obj2,200,100);
```
## Position
### Simple way
To simply set the x and y coordinates of an object use:
```c
lv_obj_set_x(obj,10);//Separate...
lv_obj_set_y(obj,20);
lv_obj_set_pos(obj,10,20);//Or in one function
```
By default, the x and y coordinates are measured from the top left corner of the parent's content area.
For example if the parent has five pixels of padding on every side the above code will place `obj` at (15, 25) because the content area starts after the padding.
Percentage values are calculated from the parent's content area size.
```c
lv_obj_set_x(btn,lv_pct(10));//x = 10 % of parent content area width
```
### Align
In some cases it's convenient to change the origin of the positioning from the default top left. If the origin is changed e.g. to bottom-right, the (0,0) position means: align to the bottom-right corner.
To change the origin use:
```c
lv_obj_set_align(obj,align);
```
Tochangethealignmentandsetnewcoordinates:
```c
lv_obj_align(obj,align,x,y);
```
The following alignment options can be used:
-`LV_ALIGN_TOP_LEFT`
-`LV_ALIGN_TOP_MID`
-`LV_ALIGN_TOP_RIGHT`
-`LV_ALIGN_BOTTOM_LEFT`
-`LV_ALIGN_BOTTOM_MID`
-`LV_ALIGN_BOTTOM_RIGHT`
-`LV_ALIGN_LEFT_MID`
-`LV_ALIGN_RIGHT_MID`
-`LV_ALIGN_CENTER`
It's quite common to align a child to the center of its parent, therefore a dedicated function exists:
```c
lv_obj_center(obj);
//Has the same effect
lv_obj_align(obj,LV_ALIGN_CENTER,0,0);
```
If the parent's size changes, the set alignment and position of the children is updated automatically.
The functions introduced above align the object to its parent. However, it's also possible to align an object to an arbitrary reference object.
Note that, unlike with `lv_obj_align()`, `lv_obj_align_to()` can not realign the object if its coordinates or the reference object's coordinates change.
## Size
### Simple way
The width and the height of an object can be set easily as well:
```c
lv_obj_set_width(obj,200);//Separate...
lv_obj_set_height(obj,100);
lv_obj_set_size(obj,200,100);//Or in one function
```
Percentage values are calculated based on the parent's content area size. For example to set the object's height to the screen height:
```c
lv_obj_set_height(obj,lv_pct(100));
```
The size settings support a special value: `LV_SIZE_CONTENT`. It means the object's size in the respective direction will be set to the size of its children.
Note that only children on the right and bottom sides will be considered and children on the top and left remain cropped. This limitation makes the behavior more predictable.
Objects with `LV_OBJ_FLAG_HIDDEN` or `LV_OBJ_FLAG_FLOATING` will be ignored by the `LV_SIZE_CONTENT` calculation.
The above functions set the size of an object's bounding box but the size of the content area can be set as well. This means an object's bounding box will be enlarged with the addition of padding.
```c
lv_obj_set_content_width(obj,50);//The actual width: padding left + 50 + padding right
lv_obj_set_content_height(obj,30);//The actual width: padding top + 30 + padding bottom
```
The size of the bounding box and the content area can be retrieved with the following functions:
Under the hood the position, size and alignment properties are style properties.
The above described "simple functions" hide the style related code for the sake of simplicity and set the position, size, and alignment properties in the local styles of the object.
However, using styles to set the coordinates has some great advantages:
- It makes it easy to set the width/height/etc. for several objects together. E.g. make all the sliders 100x10 pixels sized.
- It also makes possible to modify the values in one place.
- The values can be partially overwritten by other styles. For example `style_btn` makes the object `100x50` by default but adding `style_full_width` overwrites only the width of the object.
- The object can have different position or size depending on state. E.g. 100 px wide in `LV_STATE_DEFAULT` but 120 px in `LV_STATE_PRESSED`.
- Style transitions can be used to make the coordinate changes smooth.
Here are some examples to set an object's size using a style:
```c
staticlv_style_tstyle;
lv_style_init(&style);
lv_style_set_width(&style,100);
lv_obj_t*btn=lv_btn_create(lv_scr_act());
lv_obj_add_style(btn,&style,LV_PART_MAIN);
```
As you will see below there are some other great features of size and position setting.
However, to keep the LVGL API lean, only the most common coordinate setting features have a "simple" version and the more complex features can be used via styles.
## Translation
Let's say the there are 3 buttons next to each other. Their position is set as described above.
Now you want to move a button up a little when it's pressed.
One way to achieve this is by setting a new Y coordinate for the pressed state:
This works, but it's not really flexible because the pressed coordinate is hard-coded. If the buttons are not at y=100, `style_pressed` won't work as expected. Translations can be used to solve this:
Translation is applied from the current position of the object.
Percentage values can be used in translations as well. The percentage is relative to the size of the object (and not to the size of the parent). For example `lv_pct(50)` will move the object with half of its width/height.
The translation is applied after the layouts are calculated. Therefore, even laid out objects' position can be translated.
The translation actually moves the object. That means it makes the scrollbars and `LV_SIZE_CONTENT` sized objects react to the position change.
## Transformation
Similarly to position, an object's size can be changed relative to the current size as well.
The transformed width and height are added on both sides of the object. This means a 10 px transformed width makes the object 2x10 pixels wider.
Unlike position translation, the size transformation doesn't make the object "really" larger. In other words scrollbars, layouts, and `LV_SIZE_CONTENT` will not react to the transformed size.
Hence, size transformation is "only" a visual effect.
Similarly to CSS, LVGL also supports `min-width`, `max-width`, `min-height` and `max-height`. These are limits preventing an object's size from becoming smaller/larger than these values.
They are especially useful if the size is set by percentage or `LV_SIZE_CONTENT`.
```c
staticlv_style_tstyle_max_height;
lv_style_init(&style_max_height);
lv_style_set_y(&style_max_height,200);
lv_obj_set_height(obj,lv_pct(100));
lv_obj_add_style(obj,&style_max_height,LV_STATE_DEFAULT);//Limit the height to 200 px
```
Percentage values can be used as well which are relative to the size of the parent's content area.
```c
staticlv_style_tstyle_max_height;
lv_style_init(&style_max_height);
lv_style_set_y(&style_max_height,lv_pct(50));
lv_obj_set_height(obj,lv_pct(100));
lv_obj_add_style(obj,&style_max_height,LV_STATE_DEFAULT);//Limit the height to half parent height
```
## Layout
### Overview
Layouts can update the position and size of an object's children. They can be used to automatically arrange the children into a line or column, or in much more complicated forms.
The position and size set by the layout overwrites the "normal" x, y, width, and height settings.
There is only one function that is the same for every layout: `lv_obj_set_layout(obj, <LAYOUT_NAME>)` sets the layout on an object.
For further settings of the parent and children see the documentation of the given layout.
### Built-in layout
LVGL comes with two very powerful layouts:
- Flexbox
- Grid
Both are heavily inspired by the CSS layouts with the same name.
### Flags
There are some flags that can be used on objects to affect how they behave with layouts:
-`LV_OBJ_FLAG_HIDDEN` Hidden objects are ignored in layout calculations.
-`LV_OBJ_FLAG_IGNORE_LAYOUT` The object is simply ignored by the layouts. Its coordinates can be set as usual.
-`LV_OBJ_FLAG_FLOATING` Same as `LV_OBJ_FLAG_IGNORE_LAYOUT` but the object with `LV_OBJ_FLAG_FLOATING` will be ignored in `LV_SIZE_CONTENT` calculations.
These flags can be added/removed with `lv_obj_add/clear_flag(obj, FLAG);`
### Adding new layouts
LVGL can be freely extended by a custom layout like this:
``` important:: The basic concept of a *display* in LVGL is explained in the [Porting](/porting/display) section. So before reading further, please read the [Porting](/porting/display) section first.
```
## Multiple display support
In LVGL you can have multiple displays, each with their own driver and objects. The only limitation is that every display needs to have the same color depth (as defined in `LV_COLOR_DEPTH`).
If the displays are different in this regard the rendered image can be converted to the correct format in the drivers `flush_cb`.
Creating more displays is easy: just initialize more display buffers and register another driver for every display.
When you create the UI, use `lv_disp_set_default(disp)` to tell the library on which display to create objects.
Why would you want multi-display support? Here are some examples:
- Have a "normal" TFT display with local UI and create "virtual" screens on VNC on demand. (You need to add your VNC driver).
- Have a large TFT display and a small monochrome display.
- Have some smaller and simple displays in a large instrument or technology.
- Have two large TFT displays: one for a customer and one for the shop assistant.
### Using only one display
Using more displays can be useful but in most cases it's not required. Therefore, the whole concept of multi-display handling is completely hidden if you register only one display.
By default, the last created (and only) display is used.
`lv_scr_act()`, `lv_scr_load(scr)`, `lv_layer_top()`, `lv_layer_sys()`, `LV_HOR_RES` and `LV_VER_RES` are always applied on the most recently created (default) display.
If you pass `NULL` as `disp` parameter to display related functions the default display will usually be used.
E.g. `lv_disp_trig_activity(NULL)` will trigger a user activity on the default display. (See below in [Inactivity](#Inactivity)).
### Mirror display
To mirror the image of a display to another display, you don't need to use multi-display support. Just transfer the buffer received in `drv.flush_cb` to the other display too.
### Split image
You can create a larger virtual display from an array of smaller ones. You can create it as below:
1. Set the resolution of the displays to the large display's resolution.
2. In `drv.flush_cb`, truncate and modify the `area` parameter for each display.
3. Send the buffer's content to each real display with the truncated area.
## Screens
Every display has its own set of [screens](overview/object#screen-the-most-basic-parent) and the objects on each screen.
Be sure not to confuse displays and screens:
* **Displays** are the physical hardware drawing the pixels.
* **Screens** are the high-level root objects associated with a particular display. One display can have multiple screens associated with it, but not vice versa.
Screens can be considered the highest level containers which have no parent.
A screen's size is always equal to its display and their origin is (0;0). Therefore, a screen's coordinates can't be changed, i.e. `lv_obj_set_pos()`, `lv_obj_set_size()` or similar functions can't be used on screens.
A screen can be created from any object type but the two most typical types are [Base object](/widgets/obj) and [Image](/widgets/core/img) (to create a wallpaper).
To create a screen, use `lv_obj_t * scr = lv_<type>_create(NULL, copy)`. `copy` can be an existing screen copied into the new screen.
To load a screen, use `lv_scr_load(scr)`. To get the active screen, use `lv_scr_act()`. These functions work on the default display. If you want to specify which display to work on, use `lv_disp_get_scr_act(disp)` and `lv_disp_load_scr(disp, scr)`. A screen can be loaded with animations too. Read more [here](object.html#load-screens).
Screens can be deleted with `lv_obj_del(scr)`, but ensure that you do not delete the currently loaded screen.
### Transparent screens
Usually, the opacity of the screen is `LV_OPA_COVER` to provide a solid background for its children. If this is not the case (opacity < 100%) the display's background color or image will be visible.
See the [Display background](#display-background) section for more details. If the display's background opacity is also not `LV_OPA_COVER` LVGL has no solid background to draw.
This configuration (transparent screen and display) could be used to create for example OSD menus where a video is played on a lower layer, and a menu is overlayed on an upper layer.
To handle transparent displays, special (slower) color mixing algorithms need to be used by LVGL so this feature needs to enabled with `LV_COLOR_SCREEN_TRANSP` in `lv_conf.h`.
As this mode operates on the Alpha channel of the pixels `LV_COLOR_DEPTH = 32` is also required. The Alpha channel of 32-bit colors will be 0 where there are no objects and 255 where there are solid objects.
In summary, to enable transparent screens and displays for OSD menu-like UIs:
- Enable `LV_COLOR_SCREEN_TRANSP` in `lv_conf.h`
- Be sure to use `LV_COLOR_DEPTH 32`
- Set the screen's opacity to `LV_OPA_TRANSP` e.g. with `lv_obj_set_style_local_bg_opa(lv_scr_act(), LV_OBJMASK_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP)`
- Set the display opacity to `LV_OPA_TRANSP` with `lv_disp_set_bg_opa(NULL, LV_OPA_TRANSP);`
## Features of displays
### Inactivity
A user's inactivity time is measured on each display. Every use of an [Input device](/overview/indev) (if [associated with the display](/porting/indev#other-features)) counts as an activity.
To get time elapsed since the last activity, use `lv_disp_get_inactive_time(disp)`. If `NULL` is passed, the lowest inactivity time among all displays will be returned (**NULL isn't just the default display**).
You can manually trigger an activity using `lv_disp_trig_activity(disp)`. If `disp` is `NULL`, the default screen will be used (**and not all displays**).
### Background
Every display has a background color, background image and background opacity properties. They become visible when the current screen is transparent or not positioned to cover the whole display.
The background color is a simple color to fill the display. It can be adjusted with `lv_disp_set_bg_color(disp, color)`;
The display background image is a path to a file or a pointer to an `lv_img_dsc_t` variable (converted image data) to be used as wallpaper. It can be set with `lv_disp_set_bg_image(disp, &my_img)`;
If a background image is configured the background won't be filled with `bg_color`.
The opacity of the background color or image can be adjusted with `lv_disp_set_bg_opa(disp, opa)`.
The `disp` parameter of these functions can be `NULL` to select the default display.
With LVGL, you don't need to draw anything manually. Just create objects (like buttons, labels, arc, etc.), move and change them, and LVGL will refresh and redraw what is required.
However, it can be useful to have a basic understanding of how drawing happens in LVGL to add customization, make it easier to find bugs or just out of curiosity.
The basic concept is to not draw directly onto the display but rather to first draw on an internal draw buffer. When a drawing (rendering) is ready that buffer is copied to the display.
The draw buffer can be smaller than a display's size. LVGL will simply render in "tiles" that fit into the given draw buffer.
This approach has two main advantages compared to directly drawing to the display:
1. It avoids flickering while the layers of the UI are drawn. For example, if LVGL drew directly onto the display, when drawing a *background + button + text*, each "stage" would be visible for a short time.
2. It's faster to modify a buffer in internal RAM and finally write one pixel only once than reading/writing the display directly on each pixel access.
(e.g. via a display controller with SPI interface).
Note that this concept is different from "traditional" double buffering where there are two display sized frame buffers:
one holds the current image to show on the display, and rendering happens to the other (inactive) frame buffer, and they are swapped when the rendering is finished.
The main difference is that with LVGL you don't have to store two frame buffers (which usually requires external RAM) but only smaller draw buffer(s) that can easily fit into internal RAM.
## Mechanism of screen refreshing
Be sure to get familiar with the [Buffering modes of LVGL](/porting/display) first.
LVGL refreshes the screen in the following steps:
1. Something happens in the UI which requires redrawing. For example, a button is pressed, a chart is changed, an animation happened, etc.
2. LVGL saves the changed object's old and new area into a buffer, called an *Invalid area buffer*. For optimization, in some cases, objects are not added to the buffer:
- Hidden objects are not added.
- Objects completely out of their parent are not added.
- Areas partially out of the parent are cropped to the parent's area.
- Objects on other screens are not added.
3. In every `LV_DISP_DEF_REFR_PERIOD` (set in `lv_conf.h`) the following happens:
- LVGL checks the invalid areas and joins those that are adjacent or intersecting.
- Takes the first joined area, if it's smaller than the *draw buffer*, then simply renders the area's content into the *draw buffer*.
If the area doesn't fit into the buffer, draw as many lines as possible to the *draw buffer*.
- When the area is rendered, call `flush_cb` from the display driver to refresh the display.
- If the area was larger than the buffer, render the remaining parts too.
- Repeat the same with remaining joined areas.
When an area is redrawn the library searches the top-most object which covers that area and starts drawing from that object.
For example, if a button's label has changed, the library will see that it's enough to draw the button under the text and it's not necessary to redraw the display under the rest of the button too.
The difference between buffering modes regarding the drawing mechanism is the following:
1.**One buffer** - LVGL needs to wait for `lv_disp_flush_ready()` (called from `flush_cb`) before starting to redraw the next part.
2.**Two buffers** - LVGL can immediately draw to the second buffer when the first is sent to `flush_cb` because the flushing should be done by DMA (or similar hardware) in the background.
3.**Double buffering** - `flush_cb` should only swap the addresses of the frame buffers.
## Masking
*Masking* is the basic concept of LVGL's draw engine.
To use LVGL it's not required to know about the mechanisms described here but you might find interesting to know how drawing works under hood.
Knowing about masking comes in handy if you want to customize drawing.
To learn about masking let's see the steps of drawing first.
LVGL performs the following steps to render any shape, image or text. It can be considered as a drawing pipeline.
1.**Prepare the draw descriptors** Create a draw descriptor from an object's styles (e.g. `lv_draw_rect_dsc_t`). This gives us the parameters for drawing, for example colors, widths, opacity, fonts, radius, etc.
2.**Call the draw function** Call the draw function with the draw descriptor and some other parameters (e.g. `lv_draw_rect()`). It will render the primitive shape to the current draw buffer.
3.**Create masks** If the shape is very simple and doesn't require masks, go to #5. Otherwise, create the required masks in the draw function. (e.g. a rounded rectangle mask)
4.**Calculate all the added mask** It composites opacity values into a *mask buffer* with the "shape" of the created masks.
E.g. in case of a "line mask" according to the parameters of the mask, keep one side of the buffer as it is (255 by default) and set the rest to 0 to indicate that this side should be removed.
5.**Blend a color or image** During blending, masking (make some pixels transparent or opaque), blending modes (additive, subtractive, etc.) and color/image opacity are handled.
LVGL has the following built-in mask types which can be calculated and applied real-time:
-`LV_DRAW_MASK_TYPE_LINE` Removes a side from a line (top, bottom, left or right). `lv_draw_line` uses four instances of it.
Essentially, every (skew) line is bounded with four line masks forming a rectangle.
-`LV_DRAW_MASK_TYPE_RADIUS` Removes the inner or outer corners of a rectangle with a radiused transition. It's also used to create circles by setting the radius to large value (`LV_RADIUS_CIRCLE`)
-`LV_DRAW_MASK_TYPE_ANGLE` Removes a circlular sector. It is used by `lv_draw_arc` to remove the "empty" sector.
-`LV_DRAW_MASK_TYPE_FADE` Create a vertical fade (change opacity)
-`LV_DRAW_MASK_TYPE_MAP` The mask is stored in a bitmap array and the necessary parts are applied
Masks are used to create almost every basic primitive:
- **letters** Create a mask from the letter and draw a rectangle with the letter's color using the mask.
- **line** Created from four "line masks" to mask out the left, right, top and bottom part of the line to get a perfectly perpendicular perimeter.
- **rounded rectangle** A mask is created real-time to add a radius to the corners.
- **clip corner** To clip overflowing content (usually children) on rounded corners, a rounded rectangle mask is also applied.
- **rectangle border** Same as a rounded rectangle but the inner part is masked out too.
- **arc drawing** A circular border is drawn but an arc mask is applied too.
- **ARGB images** The alpha channel is separated into a mask and the image is drawn as a normal RGB image.
### Using masks
Every mask type has a related parameter structure to describe the mask's data. The following parameter types exist:
-`lv_draw_mask_line_param_t`
-`lv_draw_mask_radius_param_t`
-`lv_draw_mask_angle_param_t`
-`lv_draw_mask_fade_param_t`
-`lv_draw_mask_map_param_t`
1. Initialize a mask parameter with `lv_draw_mask_<type>_init`. See `lv_draw_mask.h` for the whole API.
2. Add the mask parameter to the draw engine with `int16_t mask_id = lv_draw_mask_add(¶m, ptr)`. `ptr` can be any pointer to identify the mask, (`NULL` if unused).
3. Call the draw functions
4. Remove the mask from the draw engine with `lv_draw_mask_remove_id(mask_id)` or `lv_draw_mask_remove_custom(ptr)`.
5. Free the parameter with `lv_draw_mask_free_param(¶m)`.
A parameter can be added and removed any number of times, but it needs to be freed when not required anymore.
`lv_draw_mask_add` saves only the pointer of the mask so the parameter needs to be valid while in use.
## Hook drawing
Although widgets can be easily customized by styles there might be cases when something more custom is required.
To ensure a great level of flexibility LVGL sends a lot of events during drawing with parameters that tell what LVGL is about to draw.
Some fields of these parameters can be modified to draw something else or any custom drawing operations can be added manually.
A good use case for this is the [Button matrix](/widgets/core/btnmatrix) widget. By default, its buttons can be styled in different states, but you can't style the buttons one by one.
However, an event is sent for every button and you can, for example, tell LVGL to use different colors on a specific button or to manually draw an image on some buttons.
Each of these events is described in detail below.
### Main drawing
These events are related to the actual drawing of an object. E.g. the drawing of buttons, texts, etc. happens here.
`lv_event_get_clip_area(event)` can be used to get the current clip area. The clip area is required in draw functions to make them draw only on a limited area.
#### LV_EVENT_DRAW_MAIN_BEGIN
Sent before starting to draw an object. This is a good place to add masks manually. E.g. add a line mask that "removes" the right side of an object.
#### LV_EVENT_DRAW_MAIN
The actual drawing of an object happens in this event. E.g. a rectangle for a button is drawn here. First, the widgets' internal events are called to perform drawing and after that you can draw anything on top of them.
For example you can add a custom text or an image.
#### LV_EVENT_DRAW_MAIN_END
Called when the main drawing is finished. You can draw anything here as well and it's also a good place to remove any masks created in `LV_EVENT_DRAW_MAIN_BEGIN`.
### Post drawing
Post drawing events are called when all the children of an object are drawn. For example LVGL use the post drawing phase to draw scrollbars because they should be above all of the children.
`lv_event_get_clip_area(event)` can be used to get the current clip area.
#### LV_EVENT_DRAW_POST_BEGIN
Sent before starting the post draw phase. Masks can be added here too to mask out the post drawn content.
#### LV_EVENT_DRAW_POST
The actual drawing should happen here.
#### LV_EVENT_DRAW_POST_END
Called when post drawing has finished. If masks were not removed in `LV_EVENT_DRAW_MAIN_END` they should be removed here.
### Part drawing
When LVGL draws a part of an object (e.g. a slider's indicator, a table's cell or a button matrix's button) it sends events before and after drawing that part with some context of the drawing.
This allows changing the parts on a very low level with masks, extra drawing, or changing the parameters that LVGL is planning to use for drawing.
In these events an `lv_obj_draw_part_t` structure is used to describe the context of the drawing. Not all fields are set for every part and widget.
To see which fields are set for a widget refer to the widget's documentation.
`lv_obj_draw_part_t` has the following fields:
```c
// Always set
constlv_area_t*clip_area;// The current clip area, required if you need to draw something in the event
uint32_tpart;// The current part for which the event is sent
uint32_tid;// The index of the part. E.g. a button's index on button matrix or table cell index.
// Draw desciptors, set only if related
lv_draw_rect_dsc_t*rect_dsc;// A draw descriptor that can be modified to changed what LVGL will draw. Set only for rectangle-like parts
lv_draw_label_dsc_t*label_dsc;// A draw descriptor that can be modified to changed what LVGL will draw. Set only for text-like parts
lv_draw_line_dsc_t*line_dsc;// A draw descriptor that can be modified to changed what LVGL will draw. Set only for line-like parts
lv_draw_img_dsc_t*img_dsc;// A draw descriptor that can be modified to changed what LVGL will draw. Set only for image-like parts
lv_draw_arc_dsc_t*arc_dsc;// A draw descriptor that can be modified to changed what LVGL will draw. Set only for arc-like parts
// Other paramters
lv_area_t*draw_area;// The area of the part being drawn
constlv_point_t*p1;// A point calculated during drawing. E.g. a point of a chart or the center of an arc.
constlv_point_t*p2;// A point calculated during drawing. E.g. a point of a chart.
chartext[16];// A text calculated during drawing. Can be modified. E.g. tick labels on a chart axis.
lv_coord_tradius;// E.g. the radius of an arc (not the corner radius).
int32_tvalue;// A value calculated during drawing. E.g. Chart's tick line value.
constvoid*sub_part_ptr;// A pointer the identifies something in the part. E.g. chart series.
```
`lv_event_get_draw_part_dsc(event)` can be used to get a pointer to `lv_obj_draw_part_t`.
#### LV_EVENT_DRAW_PART_BEGIN
Start the drawing of a part. This is a good place to modify the draw descriptors (e.g. `rect_dsc`), or add masks.
#### LV_EVENT_DRAW_PART_END
Finish the drawing of a part. This is a good place to draw extra content on the part or remove masks added in `LV_EVENT_DRAW_PART_BEGIN`.
### Others
#### LV_EVENT_COVER_CHECK
This event is used to check whether an object fully covers an area or not.
`lv_event_get_cover_area(event)` returns a pointer to an area to check and `lv_event_set_cover_res(event, res)` can be used to set one of these results:
-`LV_COVER_RES_COVER` the area is fully covered by the object
-`LV_COVER_RES_NOT_COVER` the area is not covered by the object
-`LV_COVER_RES_MASKED` there is a mask on the object, so it does not fully cover the area
Here are some reasons why an object would be unable to fully cover an area:
- It's simply not fully in area
- It has a radius
- It doesn't have 100% background opacity
- It's an ARGB or chroma keyed image
- It does not have normal blending mode. In this case LVGL needs to know the colors under the object to apply blending properly
- It's a text, etc
In short if for any reason the area below an object is visible than the object doesn't cover that area.
Before sending this event LVGL checks if at least the widget's coordinates fully cover the area or not. If not the event is not called.
You need to check only the drawing you have added. The existing properties known by a widget are handled in its internal events.
E.g. if a widget has > 0 radius it might not cover an area, but you need to handle `radius` only if you will modify it and the widget won't know about it.
#### LV_EVENT_REFR_EXT_DRAW_SIZE
If you need to draw outside a widget, LVGL needs to know about it to provide extra space for drawing.
Let's say you create an event which writes the current value of a slider above its knob. In this case LVGL needs to know that the slider's draw area should be larger with the size required for the text.
You can simply set the required draw area with `lv_event_set_ext_draw_size(e, size)`.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.