chore(style): remove the trailing space from all source files (#3188)
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
This commit is contained in:
Xiang Xiao
faxe1008
parent
946c45afbd
commit
1cd164be54
|
|
@ -93,7 +93,7 @@ Basically, every modern controller (which is able to drive a display) is suitabl
|
|||
*Note that the memory usage might vary depending on the architecture, compiler and build options.*
|
||||
|
||||
### Supported platforms
|
||||
LVGL is completely platform independent and can be used with any MCU that fulfills the requirements.
|
||||
LVGL is completely platform independent and can be used with any MCU that fulfills the requirements.
|
||||
Just to mention some platforms:
|
||||
- NXP: Kinetis, LPC, iMX, iMX RT
|
||||
- STM32F1, STM32F3, STM32F4, STM32F7, STM32L4, STM32L5, STM32H7
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ LVGL是一个高度可裁剪、低资源占用、界面美观且易用的嵌入
|
|||
*注意：资源占用情况与具体硬件平台、编译器等因素有关，上表中仅给出参考值*
|
||||
|
||||
### 已经支持的平台
|
||||
LVGL本身并不依赖特定的硬件平台，任何满足LVGL硬件配置要求的微控制器均可运行LVGL。
|
||||
LVGL本身并不依赖特定的硬件平台，任何满足LVGL硬件配置要求的微控制器均可运行LVGL。
|
||||
如下仅列举其中一部分:
|
||||
|
||||
- NXP: Kinetis, LPC, iMX, iMX RT
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Demos for LVGL
|
||||
|
||||
## Add the examples to your projects
|
||||
1. demos can be found in the 'demos' folder once you clone the lvgl.
|
||||
1. demos can be found in the 'demos' folder once you clone the lvgl.
|
||||
|
||||
2. In the ***lv_conf.h*** or equivalent places, you can find demo related macros, change its value to enable or disable specified demos:
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
...
|
||||
```
|
||||
|
||||
3. If your development environment or toolchain does not add source files inside '***lvgl***' folder automatically, ensure the `demos` folder is included for compilation.
|
||||
3. If your development environment or toolchain does not add source files inside '***lvgl***' folder automatically, ensure the `demos` folder is included for compilation.
|
||||
4. Include "***demos/lv_demos.h***" in your application source file, for example:
|
||||
|
||||
```c
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
## Demos
|
||||
|
||||
### Widgets
|
||||
Shows how the widgets look like out of the box using the built-in material theme.
|
||||
Shows how the widgets look like out of the box using the built-in material theme.
|
||||
|
||||
See in [widgets](https://github.com/lvgl/lvgl/tree/master/demos/widgets) folder.
|
||||
|
||||
|
|
@ -68,14 +68,14 @@ For running this demo properly, please make sure **LV_MEM_SIZE** is at least **3
|
|||
|
||||
|
||||
### Music player
|
||||
The music player demo shows what kind of modern, smartphone-like user interfaces can be created on LVGL. It works the best with display with 480x272 or 272x480 resolution.
|
||||
The music player demo shows what kind of modern, smartphone-like user interfaces can be created on LVGL. It works the best with display with 480x272 or 272x480 resolution.
|
||||
|
||||
See in [music](https://github.com/lvgl/lvgl/tree/master/demos/music) folder.
|
||||
|
||||
<img src="https://github.com/lvgl/lvgl/tree/master/demos/music/screenshot1.gif?raw=true" width=600px alt="Music player demo with LVGL">
|
||||
|
||||
### Keypad and encoder
|
||||
LVGL allows you to control the widgets with a keypad and/or encoder without a touchpad. This demo shows how to handle buttons, drop-down lists, rollers, sliders, switches, and text inputs without touchpad.
|
||||
LVGL allows you to control the widgets with a keypad and/or encoder without a touchpad. This demo shows how to handle buttons, drop-down lists, rollers, sliders, switches, and text inputs without touchpad.
|
||||
Learn more about the touchpad-less usage of LVGL [here](https://docs.lvgl.io/master/overview/indev.html#keypad-and-encoder).
|
||||
|
||||
See in [keypad_encoder](https://github.com/lvgl/lvgl/tree/master/demos/keypad_encoder) folder.
|
||||
|
|
@ -83,12 +83,12 @@ See in [keypad_encoder](https://github.com/lvgl/lvgl/tree/master/demos/keypad_en
|
|||
<img src="https://github.com/lvgl/lvgl/tree/master/demos/keypad_encoder/screenshot1.png?raw=true" width=600px alt="Keypad and encoder navigation in LVGL embedded GUI library">
|
||||
|
||||
### Benchmark
|
||||
A demo to measure the performance of LVGL or to compare different settings.
|
||||
A demo to measure the performance of LVGL or to compare different settings.
|
||||
See in [benchmark](https://github.com/lvgl/lvgl/tree/master/demos/benchmark) folder.
|
||||
<img src="https://github.com/lvgl/lvgl/tree/master/demos/benchmark/screenshot1.png?raw=true" width=600px alt="Benchmark demo with LVGL embedded GUI library">
|
||||
|
||||
### Stress
|
||||
A stress test for LVGL. It contains a lot of object creation, deletion, animations, style usage, and so on. It can be used if there is any memory corruption during heavy usage or any memory leaks.
|
||||
A stress test for LVGL. It contains a lot of object creation, deletion, animations, style usage, and so on. It can be used if there is any memory corruption during heavy usage or any memory leaks.
|
||||
See in [stress](https://github.com/lvgl/lvgl/tree/master/demos/stress) folder.
|
||||
<img src="https://github.com/lvgl/lvgl/tree/master/demos/stress/screenshot1.png?raw=true" width=600px alt="Stress test for LVGL">
|
||||
|
||||
|
|
|
|||
|
|
@ -2,31 +2,31 @@
|
|||
|
||||
## Overview
|
||||
|
||||
The benchmark demo tests the performance in various cases.
|
||||
For example rectangle, border, shadow, text, image blending, image transformation, blending modes, etc.
|
||||
The benchmark demo tests the performance in various cases.
|
||||
For example rectangle, border, shadow, text, image blending, image transformation, blending modes, etc.
|
||||
All tests are repeated with 50% opacity.
|
||||
|
||||
The size and position of the objects during testing are set with a pseudo random number to make the benchmark repeatable.
|
||||
The size and position of the objects during testing are set with a pseudo random number to make the benchmark repeatable.
|
||||
|
||||
On to top of the screen the title of the current test step, and the result of the previous step is displayed.
|
||||
|
||||
## Run the benchmark
|
||||
- In `lv_conf.h` or equivalent places set `LV_USE_DEMO_BENCHMARK 1`
|
||||
- After `lv_init()` and initializing the drivers call `lv_demo_benchmark()`
|
||||
- If you only want to run a specific scene for any purpose (e.g. debug, performance optimization etc.), you can call `lv_demo_benchmark_run_scene()` instead of `lv_demo_benchmark()`and pass the scene number.
|
||||
- If you only want to run a specific scene for any purpose (e.g. debug, performance optimization etc.), you can call `lv_demo_benchmark_run_scene()` instead of `lv_demo_benchmark()`and pass the scene number.
|
||||
|
||||
|
||||
## Interpret the result
|
||||
|
||||
The FPS is measured like this:
|
||||
- load the next step
|
||||
- in the display driver's `monitor_cb` accumulate the time-to-render and the number of cycles
|
||||
- in the display driver's `monitor_cb` accumulate the time-to-render and the number of cycles
|
||||
- measure for 1 second
|
||||
- calculate `FPS = time_sum / render_cnt`
|
||||
|
||||
Note that it can result in very high FPS results for simple cases.
|
||||
E.g. if some simple rectangles are drawn in 5 ms, the benchmark will tell it's 200 FPS.
|
||||
So it ignores `LV_DISP_REFR_PERIOD` which tells LVGL how often it should refresh the screen.
|
||||
Note that it can result in very high FPS results for simple cases.
|
||||
E.g. if some simple rectangles are drawn in 5 ms, the benchmark will tell it's 200 FPS.
|
||||
So it ignores `LV_DISP_REFR_PERIOD` which tells LVGL how often it should refresh the screen.
|
||||
In other words, the benchmark shows the FPS from the pure rendering time.
|
||||
|
||||
By default, only the changed areas are refreshed. It means if only a few pixels are changed in 1 ms the benchmark will show 1000 FPS. To measure the performance with full screen refresh uncomment `lv_obj_invalidate(lv_scr_act())` in `monitor_cb()` in `lv_demo_benchmark.c`.
|
||||
|
|
@ -34,14 +34,14 @@ By default, only the changed areas are refreshed. It means if only a few pixels
|
|||
|
||||
|
||||
|
||||
## Result summary
|
||||
## Result summary
|
||||
In the end, a table is created to display measured FPS values.
|
||||
|
||||
On top of the summary screen, the "Weighted FPS" value is shown.
|
||||
In this, the result of the more common cases are taken into account with a higher weight.
|
||||
On top of the summary screen, the "Weighted FPS" value is shown.
|
||||
In this, the result of the more common cases are taken into account with a higher weight.
|
||||
|
||||
"Opa. speed" shows the speed of the measurements with opacity compared to full opacity.
|
||||
E.g. "Opa. speed = 90%" means that rendering with opacity is 10% slower.
|
||||
"Opa. speed" shows the speed of the measurements with opacity compared to full opacity.
|
||||
E.g. "Opa. speed = 90%" means that rendering with opacity is 10% slower.
|
||||
|
||||
In the first section of the table, "Slow but common cases", those cases are displayed which are considered common but were slower than 20 FPS.
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
## Overview
|
||||
|
||||
LVGL allows you to control the widgets with keypad and/or encoder without touchpad.
|
||||
This demo shows how to handle buttons, drop-down lists, rollers, sliders, switches and text inputs without touchpad.
|
||||
LVGL allows you to control the widgets with keypad and/or encoder without touchpad.
|
||||
This demo shows how to handle buttons, drop-down lists, rollers, sliders, switches and text inputs without touchpad.
|
||||
Learn more about the touchpad-less usage of LVGL [here](https://docs.lvgl.io/master/overview/indev.html#keypad-and-encoder).
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Music player demo
|
||||
|
||||
## Overview
|
||||
The music player demo shows what kind of modern, smartphone-like user interfaces can be created on LVGL. It works the best with display with 480x272 or 272x480 resolution.
|
||||
The music player demo shows what kind of modern, smartphone-like user interfaces can be created on LVGL. It works the best with display with 480x272 or 272x480 resolution.
|
||||
|
||||
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ The music player demo shows what kind of modern, smartphone-like user interfaces
|
|||
- `assets/spectrum.py` creates an array of spectrum values from a music. 4 band are created with 33 samples/sec: bass, bass-mid, mid, mid-treble.
|
||||
- The spectrum meter UI does the followings:
|
||||
- Zoom the album cover proportionality to the current bass value
|
||||
- Display the 4 bands on the left side of a circle by default at 0°, 45°, 90°, 135°
|
||||
- Display the 4 bands on the left side of a circle by default at 0°, 45°, 90°, 135°
|
||||
- Add extra bars next to the "main bars" with a cosine shape. Add more bars for the lower bands.
|
||||
- If there is a large enough bass, add a random offset to the position of the bars. E.g. start from 63° instead of 0°. (bars greater than 180° start again from 0°)
|
||||
- If there is no bass, add 1 to the offset of the bars (it creates a "walking" effect)
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ fs = int(len(S) / fn)
|
|||
fout.write("const uint16_t spectrum[][4] = {\n")
|
||||
for t in range(0,len(S[0]-1)):
|
||||
fout.write("{ ")
|
||||
f_prev = 0
|
||||
f_prev = 0
|
||||
for f in [8, 45, 300, 600]:
|
||||
v = 0
|
||||
for i in range(f_prev, f): v += S[i][t]
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
## Overview
|
||||
|
||||
A stress test for LVGL.
|
||||
It contains a lot of object creation, deletion, animations, styles usage, and so on. It can be used if there is any memory corruption during heavy usage or any memory leaks.
|
||||
A stress test for LVGL.
|
||||
It contains a lot of object creation, deletion, animations, styles usage, and so on. It can be used if there is any memory corruption during heavy usage or any memory leaks.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ LV_DPI =130
|
|||
LV_ANIM_REPEAT_INFINITE = -1
|
||||
|
||||
# Register SDL display driver.
|
||||
|
||||
|
||||
disp_buf1 = lv.disp_buf_t()
|
||||
buf1_1 = bytes(480 * 10)
|
||||
disp_buf1.init(buf1_1, None, len(buf1_1)//4)
|
||||
|
|
@ -32,7 +32,7 @@ disp_drv.register()
|
|||
# Register SDL mouse driver
|
||||
|
||||
indev_drv = lv.indev_drv_t()
|
||||
indev_drv.init()
|
||||
indev_drv.init()
|
||||
indev_drv.type = lv.INDEV_TYPE.POINTER
|
||||
indev_drv.read_cb = SDL.mouse_read
|
||||
indev_drv.register()
|
||||
|
|
@ -55,7 +55,7 @@ def LV_DPX(n):
|
|||
return tmp
|
||||
else:
|
||||
return 1
|
||||
|
||||
|
||||
def color_chg_event_cb(sw, e):
|
||||
if e == lv.EVENT.VALUE_CHANGED:
|
||||
flag = lv.THEME_MATERIAL_FLAG.LIGHT
|
||||
|
|
@ -63,7 +63,7 @@ def color_chg_event_cb(sw, e):
|
|||
flag=lv.THEME_MATERIAL_FLAG.DARK
|
||||
theme = lv.theme_material_init(LV_THEME_DEFAULT_COLOR_PRIMARY,LV_THEME_DEFAULT_COLOR_SECONDARY,flag,
|
||||
lv.theme_get_font_small(), lv.theme_get_font_normal(), lv.theme_get_font_subtitle(),
|
||||
lv.theme_get_font_title())
|
||||
lv.theme_get_font_title())
|
||||
def slider_event_cb(slider, e):
|
||||
if e == lv.EVENT.VALUE_CHANGED:
|
||||
if slider.get_type() == lv.slider.TYPE.NORMAL:
|
||||
|
|
@ -75,19 +75,19 @@ def slider_event_cb(slider, e):
|
|||
slider_string = str(slider_left) + '-' + str(slider_right)
|
||||
# print("slider left value: %d, slider right value: %d"%(slider_left,slider_right))
|
||||
slider.set_style_local_value_str(lv.slider.PART.INDIC, lv.STATE.DEFAULT, slider_string)
|
||||
|
||||
|
||||
def linemeter_anim(a,lmeter, value):
|
||||
lmeter.set_value(value)
|
||||
label = lmeter.get_child(None)
|
||||
label.set_text(str(value))
|
||||
label.align(lmeter, lv.ALIGN.CENTER, 0, 0)
|
||||
|
||||
|
||||
def gauge_anim(a,gauge,val):
|
||||
gauge.set_value(0,val)
|
||||
label=gauge.get_child(None)
|
||||
label.set_text(str(val))
|
||||
label.align(gauge, lv.ALIGN.CENTER, 0, 0)
|
||||
|
||||
|
||||
def bar_anim(task,bar):
|
||||
val = bar.get_value()
|
||||
# print("bar value: ",val)
|
||||
|
|
@ -95,11 +95,11 @@ def bar_anim(task,bar):
|
|||
val += 1
|
||||
if val > max_value:
|
||||
val=0
|
||||
bar.set_value(val,lv.ANIM.OFF)
|
||||
bar.set_value(val,lv.ANIM.OFF)
|
||||
cpy_string = "Copying %d/%d"% (val, max_value)
|
||||
# print(cpy_string)
|
||||
bar.set_style_local_value_str(lv.bar.PART.BG, lv.STATE.DEFAULT, cpy_string)
|
||||
|
||||
|
||||
def arc_phase1_ready_cb(a,arc):
|
||||
a_arc=lv.anim_t()
|
||||
a_arc.init()
|
||||
|
|
@ -117,19 +117,19 @@ def arc_phase2_ready_cb(a,arc):
|
|||
a_arc.set_values(0, 360)
|
||||
a_arc.set_ready_cb(lambda a: arc_phase1_ready_cb(a,arc))
|
||||
lv.anim_t.start(a_arc)
|
||||
|
||||
|
||||
def anim_phase1(a,arc,val):
|
||||
arc.set_end_angle(val)
|
||||
label = arc.get_child(None)
|
||||
label.set_text(str(val))
|
||||
label.align(arc, lv.ALIGN.CENTER, 0, 0)
|
||||
|
||||
|
||||
def anim_phase2(a,arc,val):
|
||||
arc.set_end_angle(val)
|
||||
label = arc.get_child(None)
|
||||
label.set_text(str(val))
|
||||
label.align(arc, lv.ALIGN.CENTER, 0, 0)
|
||||
|
||||
|
||||
def controls_create(parent):
|
||||
lv.page.set_scrl_layout(lv.page.__cast__(parent), lv.LAYOUT.PRETTY_TOP)
|
||||
if LV_DEMO_WIDGETS_SLIDESHOW == 0:
|
||||
|
|
@ -139,15 +139,15 @@ def controls_create(parent):
|
|||
btnm = lv.btnmatrix.__cast__(m.get_btnmatrix())
|
||||
# print("type(btnm): ",type(btnm))
|
||||
btnm.set_btn_ctrl(1, lv.btnmatrix.CTRL.CHECK_STATE)
|
||||
|
||||
|
||||
h = lv.cont(parent, None)
|
||||
h.set_layout(lv.LAYOUT.PRETTY_MID)
|
||||
h.add_style(lv.cont.PART.MAIN, style_box)
|
||||
h.set_drag_parent(True)
|
||||
|
||||
|
||||
h.set_style_local_value_str(lv.cont.PART.MAIN, lv.STATE.DEFAULT, "Basics")
|
||||
|
||||
disp_size = display.get_size_category()
|
||||
|
||||
disp_size = display.get_size_category()
|
||||
if disp_size <= lv.DISP_SIZE.SMALL:
|
||||
grid_w= lv.page.get_width_grid(lv.page.__cast__(parent),1,1)
|
||||
# print("grid_w: ",grid_w)
|
||||
|
|
@ -157,23 +157,23 @@ def controls_create(parent):
|
|||
|
||||
h.set_fit2(lv.FIT.NONE, lv.FIT.TIGHT)
|
||||
h.set_width(grid_w)
|
||||
btn = lv.btn(h,None)
|
||||
btn = lv.btn(h,None)
|
||||
btn.set_fit2(lv.FIT.NONE, lv.FIT.TIGHT)
|
||||
if disp_size <= lv.DISP_SIZE.SMALL:
|
||||
button_width=h.get_width_grid(1,1)
|
||||
else:
|
||||
button_width=h.get_width_grid(2,1)
|
||||
# print("button_width: %d"%button_width)
|
||||
|
||||
|
||||
btn.set_width(button_width)
|
||||
label = lv.label(btn, None)
|
||||
label.set_text("Button")
|
||||
|
||||
|
||||
btn = lv.btn(h, btn)
|
||||
btn.toggle()
|
||||
label = lv.label(btn, None)
|
||||
label.set_text("Button")
|
||||
|
||||
|
||||
lv.switch(h, None)
|
||||
|
||||
lv.checkbox(h, None)
|
||||
|
|
@ -184,7 +184,7 @@ def controls_create(parent):
|
|||
slider.set_value(40, lv.ANIM.OFF)
|
||||
slider.set_event_cb(slider_event_cb)
|
||||
slider.set_width_margin(fit_w);
|
||||
|
||||
|
||||
# Use the knobs style value the display the current value in focused state
|
||||
slider.set_style_local_margin_top(lv.slider.PART.BG, lv.STATE.DEFAULT, LV_DPX(25))
|
||||
slider.set_style_local_value_font(lv.slider.PART.KNOB, lv.STATE.DEFAULT, lv.theme_get_font_small())
|
||||
|
|
@ -194,7 +194,7 @@ def controls_create(parent):
|
|||
slider.set_style_local_transition_time(lv.slider.PART.KNOB, lv.STATE.DEFAULT, 300)
|
||||
slider.set_style_local_transition_prop_5(lv.slider.PART.KNOB, lv.STATE.DEFAULT, lv.STYLE.VALUE_OFS_Y)
|
||||
slider.set_style_local_transition_prop_6(lv.slider.PART.KNOB, lv.STATE.DEFAULT, lv.STYLE.VALUE_OPA)
|
||||
|
||||
|
||||
slider = lv.slider(h, None)
|
||||
slider.set_type(lv.slider.TYPE.RANGE)
|
||||
slider.set_value(70, lv.ANIM.OFF)
|
||||
|
|
@ -206,11 +206,11 @@ def controls_create(parent):
|
|||
lv.event_send(slider,lv.EVENT.VALUE_CHANGED, None) # To refresh the text
|
||||
if slider.get_width() > fit_w:
|
||||
slider.set_width(fit_w)
|
||||
|
||||
|
||||
h = lv.cont(parent, h)
|
||||
h.set_fit(lv.FIT.NONE)
|
||||
h.set_style_local_value_str(lv.cont.PART.MAIN, lv.STATE.DEFAULT, "Text input")
|
||||
|
||||
|
||||
ta = lv.textarea(h, None)
|
||||
lv.cont.set_fit2(h,lv.FIT.PARENT, lv.FIT.NONE)
|
||||
ta.set_text("")
|
||||
|
|
@ -258,7 +258,7 @@ def visuals_create(parent):
|
|||
chart.set_div_line_count(3, 0)
|
||||
chart.set_point_count(8)
|
||||
chart.set_type(lv.chart.TYPE.LINE)
|
||||
|
||||
|
||||
if disp_size > lv.DISP_SIZE.SMALL:
|
||||
chart.set_style_local_pad_left(lv.chart.PART.BG, lv.STATE.DEFAULT, 4 * (LV_DPI // 10))
|
||||
chart.set_style_local_pad_bottom(lv.chart.PART.BG, lv.STATE.DEFAULT, 3 * (LV_DPI // 10))
|
||||
|
|
@ -268,7 +268,7 @@ def visuals_create(parent):
|
|||
chart.set_x_tick_length(0, 0)
|
||||
chart.set_y_tick_texts("600\n500\n400\n300\n200", 0, lv.chart.AXIS.DRAW_LAST_TICK)
|
||||
chart.set_x_tick_texts("Jan\nFeb\nMar\nApr\nMay\nJun\nJul\nAug", 0, lv.chart.AXIS.DRAW_LAST_TICK)
|
||||
|
||||
|
||||
s1 = chart.add_series(LV_THEME_DEFAULT_COLOR_PRIMARY)
|
||||
s2 = chart.add_series(LV_THEME_DEFAULT_COLOR_SECONDARY)
|
||||
|
||||
|
|
@ -282,7 +282,7 @@ def visuals_create(parent):
|
|||
chart.set_next(s1, 60)
|
||||
chart.set_next(s1, 10)
|
||||
chart.set_next(s1, 90)
|
||||
|
||||
|
||||
chart.set_next(s2, 32)
|
||||
chart.set_next(s2, 66)
|
||||
chart.set_next(s2, 5)
|
||||
|
|
@ -333,7 +333,7 @@ def visuals_create(parent):
|
|||
grid_w_meter = lv.page.get_width_grid(page, 2, 1)
|
||||
else:
|
||||
grid_w_meter = lv.page.get_width_grid(page, 3, 1)
|
||||
|
||||
|
||||
meter_h = lv.page.get_height_fit(page)
|
||||
if grid_w_meter < meter_h:
|
||||
meter_size = grid_w_meter
|
||||
|
|
@ -359,7 +359,7 @@ def visuals_create(parent):
|
|||
a_lm.set_playback_time(1000)
|
||||
a_lm.set_repeat_count(LV_ANIM_REPEAT_INFINITE)
|
||||
lv.anim_t.start(a_lm)
|
||||
|
||||
|
||||
gauge = lv.gauge(parent, None)
|
||||
gauge.set_drag_parent(True)
|
||||
gauge.set_size(meter_size, meter_size)
|
||||
|
|
@ -378,7 +378,7 @@ def visuals_create(parent):
|
|||
a_ga.set_repeat_count(LV_ANIM_REPEAT_INFINITE)
|
||||
a_ga.set_custom_exec_cb(lambda a, val: gauge_anim(a,gauge,val))
|
||||
lv.anim_t.start(a_ga)
|
||||
|
||||
|
||||
arc = lv.arc(parent,None)
|
||||
arc.set_drag_parent(True)
|
||||
arc.set_bg_angles(0, 360)
|
||||
|
|
@ -412,7 +412,7 @@ def visuals_create(parent):
|
|||
bar_h.set_width(lv.page.get_width_grid(page, 2, 1))
|
||||
else:
|
||||
bar_h.set_width(lv.page.get_width_grid(parent, 3, 2))
|
||||
|
||||
|
||||
bar = lv.bar(bar_h,None)
|
||||
bar.set_width(lv.cont.get_width_fit(bar_h))
|
||||
bar.set_style_local_value_font(lv.bar.PART.BG, lv.STATE.DEFAULT, lv.theme_get_font_small())
|
||||
|
|
@ -421,7 +421,7 @@ def visuals_create(parent):
|
|||
bar.set_style_local_margin_bottom(lv.bar.PART.BG, lv.STATE.DEFAULT, LV_DPI // 7)
|
||||
bar.align(None, lv.ALIGN.CENTER, 0, 0)
|
||||
bar.set_value(30,lv.ANIM.OFF)
|
||||
|
||||
|
||||
led_h = lv.cont(parent, None)
|
||||
led_h.set_layout(lv.LAYOUT.PRETTY_MID)
|
||||
if disp_size <= lv.DISP_SIZE.SMALL:
|
||||
|
|
@ -459,9 +459,9 @@ def visuals_create(parent):
|
|||
def selectors_create(parent):
|
||||
page = lv.page.__cast__(parent)
|
||||
lv.page.set_scrl_layout(page, lv.LAYOUT.PRETTY_MID)
|
||||
|
||||
|
||||
grid_h = page.get_height_grid(1, 1)
|
||||
|
||||
|
||||
if disp_size <= lv.DISP_SIZE.SMALL:
|
||||
grid_w = page.get_width_grid(1, 1)
|
||||
else:
|
||||
|
|
@ -497,7 +497,7 @@ def selectors_create(parent):
|
|||
h.set_style_local_pad_top(lv.cont.PART_MAIN, LV_STATE_DEFAULT, 0);
|
||||
h.set_size(min(grid_h, grid_w), min(grid_h, grid_w))
|
||||
h.set_layout(lv.LAYOUT.PRETTY_TOP)
|
||||
|
||||
|
||||
roller = lv.roller(h, None)
|
||||
roller.add_style(lv.cont.PART.MAIN, style_box)
|
||||
roller.set_style_local_value_str(lv.cont.PART.MAIN, lv.STATE.DEFAULT, "Roller")
|
||||
|
|
@ -508,8 +508,8 @@ def selectors_create(parent):
|
|||
roller.set_width(lv.cont.get_width_grid(h, 1 , 1))
|
||||
else:
|
||||
roller.set_width(lv.cont.get_width_grid(h, 2 , 1))
|
||||
|
||||
|
||||
|
||||
|
||||
dd = lv.dropdown(h, None)
|
||||
dd.add_style(lv.cont.PART.MAIN, style_box)
|
||||
dd.set_style_local_value_str(lv.cont.PART.MAIN, lv.STATE.DEFAULT, "Dropdown")
|
||||
|
|
@ -517,20 +517,20 @@ def selectors_create(parent):
|
|||
dd.set_width(lv.cont.get_width_grid(h, 1 , 1))
|
||||
else:
|
||||
dd.set_width(lv.cont.get_width_grid(h, 2 , 1))
|
||||
|
||||
|
||||
dd.set_options("Alpha\nBravo\nCharlie\nDelta\nEcho\nFoxtrot\nGolf\nHotel\nIndia\nJuliette\nKilo\nLima\nMike\nNovember\n"
|
||||
"Oscar\nPapa\nQuebec\nRomeo\nSierra\nTango\nUniform\nVictor\nWhiskey\nXray\nYankee\nZulu")
|
||||
|
||||
|
||||
list = lv.list(parent, None)
|
||||
list.set_scroll_propagation(True)
|
||||
list.set_size(grid_w, grid_h)
|
||||
|
||||
|
||||
txts = [lv.SYMBOL.SAVE, "Save", lv.SYMBOL.CUT, "Cut", lv.SYMBOL.COPY, "Copy",
|
||||
lv.SYMBOL.OK, "This is a quite long text to scroll on the list", lv.SYMBOL.EDIT, "Edit", lv.SYMBOL.WIFI, "Wifi",
|
||||
lv.SYMBOL.BLUETOOTH, "Bluetooth", lv.SYMBOL.GPS, "GPS", lv.SYMBOL.USB, "USB",
|
||||
lv.SYMBOL.SD_CARD, "SD card", lv.SYMBOL.CLOSE, "Close"]
|
||||
|
||||
|
||||
|
||||
|
||||
for i in range(0,len(txts)//2,2):
|
||||
btn = list.add_btn(txts[i], txts[i + 1]);
|
||||
lv.btn.set_checkable(lv.btn.__cast__(btn),True)
|
||||
|
|
@ -538,9 +538,9 @@ def selectors_create(parent):
|
|||
# Make a button disabled
|
||||
if i == 4:
|
||||
btn.set_state(lv.btn.STATE.DISABLED)
|
||||
|
||||
|
||||
cal.set_highlighted_dates(hl, 2)
|
||||
|
||||
|
||||
tv = lv.tabview(lv.scr_act(), None)
|
||||
display = scr.get_disp()
|
||||
disp_size = display.get_size_category()
|
||||
|
|
@ -549,7 +549,7 @@ tv.set_style_local_pad_left(lv.tabview.PART.TAB_BG, lv.STATE.DEFAULT, disp_drv.h
|
|||
sw = lv.switch(lv.scr_act(), None)
|
||||
if lv.theme_get_flags() & lv.THEME_MATERIAL_FLAG.DARK:
|
||||
sw.on(LV_ANIM_OFF)
|
||||
sw.set_event_cb(color_chg_event_cb)
|
||||
sw.set_event_cb(color_chg_event_cb)
|
||||
sw.set_pos(LV_DPX(10), LV_DPX(10))
|
||||
sw.set_style_local_value_str(lv.switch.PART.BG, lv.STATE.DEFAULT, "Dark")
|
||||
sw.set_style_local_value_align(lv.switch.PART.BG, lv.STATE.DEFAULT, lv.ALIGN.OUT_RIGHT_MID)
|
||||
|
|
@ -567,6 +567,6 @@ style_box.set_value_ofs_y(lv.STATE.DEFAULT, - LV_DPX(10))
|
|||
style_box.set_margin_top(lv.STATE.DEFAULT, LV_DPX(30))
|
||||
|
||||
controls_create(t1)
|
||||
visuals_create(t2)
|
||||
visuals_create(t2)
|
||||
selectors_create(t3)
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
|
||||
### Overview
|
||||
|
||||
Among many fixes and minor updates these are the most important features in v8.2.0:
|
||||
Among many fixes and minor updates these are the most important features in v8.2.0:
|
||||
- Abstract render layer to make it easier to attach external draw engines
|
||||
- Add `LV_FLAD_OVERFLOW_VISIBLE`. If enabled the children of an object won't be clipped to the boundary of the object
|
||||
- Add ffmpeg decoder support to play videos and open a wide variety of image formats
|
||||
- Add font fallback support
|
||||
- Add font fallback support
|
||||
- Add gradient dithering support
|
||||
- Add "monkey test"
|
||||
- Add "monkey test"
|
||||
- Add cmsis-pack support
|
||||
- Add Grid navigation (`lv_gridnav`)
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ The GPU support for NXP microcontrollers is still not updated to the new draw ar
|
|||
- :warning: feat(fs): add caching option for lv_fs-read [`2979`](https://github.com/littlevgl/lvgl/pull/2979)
|
||||
- :warning: feat(span): lv_spangroup_get_expand_width() adds a parameter [`2968`](https://github.com/littlevgl/lvgl/pull/2968)
|
||||
- :warning: arch(draw): allow replacing the draw engine [`db53ea9`](https://github.com/littlevgl/lvgl/commit/db53ea925c9502b20f38db0fc30c4ef599bdfc33)
|
||||
- :warning: indexed images are not chroma keyed. Use the alpha chaneel instead.
|
||||
- :warning: indexed images are not chroma keyed. Use the alpha chaneel instead.
|
||||
|
||||
### Architectural
|
||||
|
||||
|
|
@ -275,12 +275,12 @@ The GPU support for NXP microcontrollers is still not updated to the new draw ar
|
|||
## [v8.1.0](https://github.com/lvgl/lvgl/compare/v8.0.2...v8.1.0) 10 November 2021
|
||||
|
||||
### Overview
|
||||
v8.1 is a minor release, so besides many fixes it contains a lot of new features too.
|
||||
v8.1 is a minor release, so besides many fixes it contains a lot of new features too.
|
||||
|
||||
Some of the most important features are
|
||||
- Built in support for SDL based GPU drawing
|
||||
- Much faster circle drawing in the software renderer
|
||||
- Several [3rd party libraries](https://docs.lvgl.io/master/libs/index.html) are merged directly into LVGL.
|
||||
- Several [3rd party libraries](https://docs.lvgl.io/master/libs/index.html) are merged directly into LVGL.
|
||||
- Add LVGL as an [RT-Thread](https://packages.rt-thread.org/en/detail.html?package=LVGL) and [ESP32](https://components.espressif.com/component/lvgl/lvgl) component
|
||||
|
||||
### Breaking Changes
|
||||
|
|
@ -885,104 +885,104 @@ Some of the most important features are
|
|||
- fix(imgbtn) use the correct src in LV_EVENT_GET_SELF_SIZE
|
||||
- fix(color) remove extraneous cast for 8-bit color
|
||||
- fix(obj style) fix children reposition if the parent's padding changes.
|
||||
- fix(color) remove extraneous _LV_COLOR_MAKE_TYPE_HELPER (#2372)
|
||||
- fix(spinner) should not be clickable (#2373)
|
||||
- fix(obj) improve how the focusing indev is determined
|
||||
- fix(template) update indev template for v8
|
||||
- fix(printf) skip defining attribute if pycparser is used
|
||||
- refactor(printf) add printf-like function attribute to _lv_txt_set_text_vfmt and lv_label_set_text_fmt (#2332)
|
||||
- fix(template) include lvgl.h in lv_port_*_template.c files
|
||||
- fix(obj) detecting which indev sent LV_EVENT_FOCUS
|
||||
- fix (span) fill LV_EVENT_GET_SELF_SIZE (#2360)
|
||||
- fix(arc) disable LV_OBJ_FLAG_SCROLL_CHAIN by default
|
||||
- fix (draw) fix arc bg image drawing with full arcs
|
||||
- fix(disp) fix memory leak in lv_disp_remove (#2355)
|
||||
- fix warnings introduced by 3fb8baf5
|
||||
- fix(widgets) use lv_obj_class for all the widgets
|
||||
- fix(color) remove extraneous _LV_COLOR_MAKE_TYPE_HELPER (#2372)
|
||||
- fix(spinner) should not be clickable (#2373)
|
||||
- fix(obj) improve how the focusing indev is determined
|
||||
- fix(template) update indev template for v8
|
||||
- fix(printf) skip defining attribute if pycparser is used
|
||||
- refactor(printf) add printf-like function attribute to _lv_txt_set_text_vfmt and lv_label_set_text_fmt (#2332)
|
||||
- fix(template) include lvgl.h in lv_port_*_template.c files
|
||||
- fix(obj) detecting which indev sent LV_EVENT_FOCUS
|
||||
- fix (span) fill LV_EVENT_GET_SELF_SIZE (#2360)
|
||||
- fix(arc) disable LV_OBJ_FLAG_SCROLL_CHAIN by default
|
||||
- fix (draw) fix arc bg image drawing with full arcs
|
||||
- fix(disp) fix memory leak in lv_disp_remove (#2355)
|
||||
- fix warnings introduced by 3fb8baf5
|
||||
- fix(widgets) use lv_obj_class for all the widgets
|
||||
- fix(obj) move clean ups from lv_obj_del to lv_obj_destructor
|
||||
- fix(roller) fix partial redraw of the selected area
|
||||
- fix(roller) adjust the size of the selected area correctly
|
||||
- fix(obj) delete useless type conversion (#2343)
|
||||
- fix(roller) fix partial redraw of the selected area
|
||||
- fix(roller) adjust the size of the selected area correctly
|
||||
- fix(obj) delete useless type conversion (#2343)
|
||||
- fix(lv_obj_scroll.h) typos (#2345)
|
||||
- fix(scroll) fire LV_EVENT_SCROLL_BEGIN in the same spot for both axes
|
||||
- fix(btnmatrix) fix button invalidation on focus change
|
||||
- fix(textarea) style update in oneline mode + improve scroll to cursor
|
||||
- fix(tlsf) do not use <assert.h>
|
||||
- fix(imgbtn) consider width==LV_SIZE_CONTENT if only mid. img is set
|
||||
- fix(refr) reduce the nesting level in lv_refr_area
|
||||
- fix(txt) enhance the function of break_chars (#2327)
|
||||
- fix(pxp): update RTOS macro for SDK 2.10
|
||||
- fix(vglite): update for v8
|
||||
- fix(pxp): update for v8
|
||||
- fix(flex) fix layout update and invalidation issues
|
||||
- fix(flex) fix NULL pointer dereference
|
||||
- fix(obj, switch) do not send LV_EVENT_VALUE_CHANGED twice
|
||||
- fix(color) overflow with 16-bit color depth
|
||||
- fix(coords) fix using large coordinates
|
||||
- fix(chart) fix crash if no series are added
|
||||
- fix(chart) invalidation with LV_CHART_UPDATE_MODE_SHIFT
|
||||
- fix(btnmatrix) fix button invalidation on focus change
|
||||
- fix(textarea) style update in oneline mode + improve scroll to cursor
|
||||
- fix(tlsf) do not use <assert.h>
|
||||
- fix(imgbtn) consider width==LV_SIZE_CONTENT if only mid. img is set
|
||||
- fix(refr) reduce the nesting level in lv_refr_area
|
||||
- fix(txt) enhance the function of break_chars (#2327)
|
||||
- fix(pxp): update RTOS macro for SDK 2.10
|
||||
- fix(vglite): update for v8
|
||||
- fix(pxp): update for v8
|
||||
- fix(flex) fix layout update and invalidation issues
|
||||
- fix(flex) fix NULL pointer dereference
|
||||
- fix(obj, switch) do not send LV_EVENT_VALUE_CHANGED twice
|
||||
- fix(color) overflow with 16-bit color depth
|
||||
- fix(coords) fix using large coordinates
|
||||
- fix(chart) fix crash if no series are added
|
||||
- fix(chart) invalidation with LV_CHART_UPDATE_MODE_SHIFT
|
||||
- fix(align) fix lv_obj_align_to G
|
||||
- fix(table) invalidate the table on cell value change
|
||||
- fix(label) remove duplicated lv_obj_refresh_self_size
|
||||
- fix(draw) underflow in subpixel font drawing
|
||||
- fix (scroll) do not send unnecessary scroll end events
|
||||
- fix(table) invalidate the table on cell value change
|
||||
- fix(label) remove duplicated lv_obj_refresh_self_size
|
||||
- fix(draw) underflow in subpixel font drawing
|
||||
- fix (scroll) do not send unnecessary scroll end events
|
||||
|
||||
|
||||
## v8.0.1 (14.06.2021)
|
||||
- docs(filesystem) update to v8 <a href="https://github.com/lvgl/lvgl/commit/7971ade4">7971ade4</a>
|
||||
- fix(msgbox) create modals on top layer instead of act screen <a href="https://github.com/lvgl/lvgl/commit/5cf6303e">5cf6303e</a>
|
||||
- fix(colorwheel) disable LV_OBJ_FLAG_SCROLL_CHAIN by default <a href="https://github.com/lvgl/lvgl/commit/48d1c292">48d1c292</a>
|
||||
- docs(grid) typo fix (#2310) <a href="https://github.com/lvgl/lvgl/commit/69d109d2">69d109d2</a>
|
||||
- fix(arduino) fix the prototype of my_touchpad_read in the LVGL_Arduino.ino <a href="https://github.com/lvgl/lvgl/commit/1a62f7a6">1a62f7a6</a>
|
||||
- fix(meter) fix needle image invalidation <a href="https://github.com/lvgl/lvgl/commit/54d8e817">54d8e817</a>
|
||||
- fix(mem) add lv_ prefix to tlsf functions and types <a href="https://github.com/lvgl/lvgl/commit/0d52b59c">0d52b59c</a>
|
||||
- fix(calendar) fix the position calculation today <a href="https://github.com/lvgl/lvgl/commit/ad05e196">ad05e196</a>
|
||||
- fix(typo) rename LV_OBJ_FLAG_SNAPABLE to LV_OBJ_FLAG_SNAPPABLE <a href="https://github.com/lvgl/lvgl/commit/e697807c">e697807c</a>
|
||||
- docs(color) language fixes (#2302) <a href="https://github.com/lvgl/lvgl/commit/07ecc9f1">07ecc9f1</a>
|
||||
- fix(tick) minor optimization on lv_tick_inc call test <a href="https://github.com/lvgl/lvgl/commit/b4305df5">b4305df5</a>
|
||||
- Spelling and other language fixes to documentation (#2293) <a href="https://github.com/lvgl/lvgl/commit/d0aaacaf">d0aaacaf</a>
|
||||
- fix(theme) show disabled state on buttons of btnmatrix, msgbox and keyboard <a href="https://github.com/lvgl/lvgl/commit/0be582b3">0be582b3</a>
|
||||
- fix(scroll) keep the scroll position on object deleted <a href="https://github.com/lvgl/lvgl/commit/52edbb46">52edbb46</a>
|
||||
- fix(msgbox) handle NULL btn map parameter <a href="https://github.com/lvgl/lvgl/commit/769c4a30">769c4a30</a>
|
||||
- fix(group) allow refocusing objects <a href="https://github.com/lvgl/lvgl/commit/1520208b">1520208b</a>
|
||||
- docs(overview) spelling fixes <a href="https://github.com/lvgl/lvgl/commit/d2efb8c6">d2efb8c6</a>
|
||||
- Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/45960838">45960838</a>
|
||||
- feat(timer) check if lv_tick_inc is called <a href="https://github.com/lvgl/lvgl/commit/aa6641a6">aa6641a6</a>
|
||||
- feat(docs) add view on GitHub link <a href="https://github.com/lvgl/lvgl/commit/a716ac6e">a716ac6e</a>
|
||||
- fix(theme) fix the switch style in the default theme <a href="https://github.com/lvgl/lvgl/commit/0c0dc8ea">0c0dc8ea</a>
|
||||
- docs fix typo <a href="https://github.com/lvgl/lvgl/commit/8ab80645">8ab80645</a>
|
||||
- Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/e796448f">e796448f</a>
|
||||
- feat(event) pass the scroll animation to LV_EVENT_SCROLL_BEGIN <a href="https://github.com/lvgl/lvgl/commit/ca54ecfe">ca54ecfe</a>
|
||||
- fix(tabview) fix with left and right tabs <a href="https://github.com/lvgl/lvgl/commit/17c57449">17c57449</a>
|
||||
- chore(docs) force docs rebuild <a href="https://github.com/lvgl/lvgl/commit/4a0f4139">4a0f4139</a>
|
||||
- chore(docs) always deploy master to docs/master as well <a href="https://github.com/lvgl/lvgl/commit/6d05692d">6d05692d</a>
|
||||
- fix(template) update lv_objx_template to v8 <a href="https://github.com/lvgl/lvgl/commit/38bb8afc">38bb8afc</a>
|
||||
- docs(extra) add extra/README.md <a href="https://github.com/lvgl/lvgl/commit/8cd504d5">8cd504d5</a>
|
||||
- Update CHANGELOG.md <a href="https://github.com/lvgl/lvgl/commit/48fd73d2">48fd73d2</a>
|
||||
- Update quick-overview.md (#2295) <a href="https://github.com/lvgl/lvgl/commit/5616471c">5616471c</a>
|
||||
- fix(pxp) change LV_COLOR_TRANSP to LV_COLOR_CHROMA_KEY to v8 compatibility <a href="https://github.com/lvgl/lvgl/commit/81f3068d">81f3068d</a>
|
||||
- adding micropython examples (#2286) <a href="https://github.com/lvgl/lvgl/commit/c60ed68e">c60ed68e</a>
|
||||
- docs(color) minor fix <a href="https://github.com/lvgl/lvgl/commit/ac8f4534">ac8f4534</a>
|
||||
- fix(example) revert test code <a href="https://github.com/lvgl/lvgl/commit/77e2c1ff">77e2c1ff</a>
|
||||
- fix(draw) with additive blending with 32-bit color depth <a href="https://github.com/lvgl/lvgl/commit/786db2af">786db2af</a>
|
||||
- docs(color) update colors' docs <a href="https://github.com/lvgl/lvgl/commit/9056b5ee">9056b5ee</a>
|
||||
- Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/a711a1dd">a711a1dd</a>
|
||||
- perf(refresh) optimize where to wait for lv_disp_flush_ready with 2 buffers <a href="https://github.com/lvgl/lvgl/commit/d0172f14">d0172f14</a>
|
||||
- docs(lv_obj_style) update add_style and remove_style function headers (#2287) <a href="https://github.com/lvgl/lvgl/commit/60f7bcbf">60f7bcbf</a>
|
||||
- fix memory leak of spangroup (#2285) <a href="https://github.com/lvgl/lvgl/commit/33e0926a">33e0926a</a>
|
||||
- fix make lv_img_cache.h public because cache invalidation is public <a href="https://github.com/lvgl/lvgl/commit/38ebcd81">38ebcd81</a>
|
||||
- Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/2b292495">2b292495</a>
|
||||
- fix(btnmatrix) fix focus event handling <a href="https://github.com/lvgl/lvgl/commit/3b58ef14">3b58ef14</a>
|
||||
- Merge pull request #2280 from lvgl/dependabot/pip/docs/urllib3-1.26.5 <a href="https://github.com/lvgl/lvgl/commit/a2f45b26">a2f45b26</a>
|
||||
- fix(label) calculating the clip area <a href="https://github.com/lvgl/lvgl/commit/57e211cc">57e211cc</a>
|
||||
- chore(deps): bump urllib3 from 1.26.4 to 1.26.5 in /docs <a href="https://github.com/lvgl/lvgl/commit/b2f77dfc">b2f77dfc</a>
|
||||
- fix(docs) add docs about the default group <a href="https://github.com/lvgl/lvgl/commit/29bfe604">29bfe604</a>
|
||||
- docs(filesystem) update to v8 <a href="https://github.com/lvgl/lvgl/commit/7971ade4">7971ade4</a>
|
||||
- fix(msgbox) create modals on top layer instead of act screen <a href="https://github.com/lvgl/lvgl/commit/5cf6303e">5cf6303e</a>
|
||||
- fix(colorwheel) disable LV_OBJ_FLAG_SCROLL_CHAIN by default <a href="https://github.com/lvgl/lvgl/commit/48d1c292">48d1c292</a>
|
||||
- docs(grid) typo fix (#2310) <a href="https://github.com/lvgl/lvgl/commit/69d109d2">69d109d2</a>
|
||||
- fix(arduino) fix the prototype of my_touchpad_read in the LVGL_Arduino.ino <a href="https://github.com/lvgl/lvgl/commit/1a62f7a6">1a62f7a6</a>
|
||||
- fix(meter) fix needle image invalidation <a href="https://github.com/lvgl/lvgl/commit/54d8e817">54d8e817</a>
|
||||
- fix(mem) add lv_ prefix to tlsf functions and types <a href="https://github.com/lvgl/lvgl/commit/0d52b59c">0d52b59c</a>
|
||||
- fix(calendar) fix the position calculation today <a href="https://github.com/lvgl/lvgl/commit/ad05e196">ad05e196</a>
|
||||
- fix(typo) rename LV_OBJ_FLAG_SNAPABLE to LV_OBJ_FLAG_SNAPPABLE <a href="https://github.com/lvgl/lvgl/commit/e697807c">e697807c</a>
|
||||
- docs(color) language fixes (#2302) <a href="https://github.com/lvgl/lvgl/commit/07ecc9f1">07ecc9f1</a>
|
||||
- fix(tick) minor optimization on lv_tick_inc call test <a href="https://github.com/lvgl/lvgl/commit/b4305df5">b4305df5</a>
|
||||
- Spelling and other language fixes to documentation (#2293) <a href="https://github.com/lvgl/lvgl/commit/d0aaacaf">d0aaacaf</a>
|
||||
- fix(theme) show disabled state on buttons of btnmatrix, msgbox and keyboard <a href="https://github.com/lvgl/lvgl/commit/0be582b3">0be582b3</a>
|
||||
- fix(scroll) keep the scroll position on object deleted <a href="https://github.com/lvgl/lvgl/commit/52edbb46">52edbb46</a>
|
||||
- fix(msgbox) handle NULL btn map parameter <a href="https://github.com/lvgl/lvgl/commit/769c4a30">769c4a30</a>
|
||||
- fix(group) allow refocusing objects <a href="https://github.com/lvgl/lvgl/commit/1520208b">1520208b</a>
|
||||
- docs(overview) spelling fixes <a href="https://github.com/lvgl/lvgl/commit/d2efb8c6">d2efb8c6</a>
|
||||
- Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/45960838">45960838</a>
|
||||
- feat(timer) check if lv_tick_inc is called <a href="https://github.com/lvgl/lvgl/commit/aa6641a6">aa6641a6</a>
|
||||
- feat(docs) add view on GitHub link <a href="https://github.com/lvgl/lvgl/commit/a716ac6e">a716ac6e</a>
|
||||
- fix(theme) fix the switch style in the default theme <a href="https://github.com/lvgl/lvgl/commit/0c0dc8ea">0c0dc8ea</a>
|
||||
- docs fix typo <a href="https://github.com/lvgl/lvgl/commit/8ab80645">8ab80645</a>
|
||||
- Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/e796448f">e796448f</a>
|
||||
- feat(event) pass the scroll animation to LV_EVENT_SCROLL_BEGIN <a href="https://github.com/lvgl/lvgl/commit/ca54ecfe">ca54ecfe</a>
|
||||
- fix(tabview) fix with left and right tabs <a href="https://github.com/lvgl/lvgl/commit/17c57449">17c57449</a>
|
||||
- chore(docs) force docs rebuild <a href="https://github.com/lvgl/lvgl/commit/4a0f4139">4a0f4139</a>
|
||||
- chore(docs) always deploy master to docs/master as well <a href="https://github.com/lvgl/lvgl/commit/6d05692d">6d05692d</a>
|
||||
- fix(template) update lv_objx_template to v8 <a href="https://github.com/lvgl/lvgl/commit/38bb8afc">38bb8afc</a>
|
||||
- docs(extra) add extra/README.md <a href="https://github.com/lvgl/lvgl/commit/8cd504d5">8cd504d5</a>
|
||||
- Update CHANGELOG.md <a href="https://github.com/lvgl/lvgl/commit/48fd73d2">48fd73d2</a>
|
||||
- Update quick-overview.md (#2295) <a href="https://github.com/lvgl/lvgl/commit/5616471c">5616471c</a>
|
||||
- fix(pxp) change LV_COLOR_TRANSP to LV_COLOR_CHROMA_KEY to v8 compatibility <a href="https://github.com/lvgl/lvgl/commit/81f3068d">81f3068d</a>
|
||||
- adding micropython examples (#2286) <a href="https://github.com/lvgl/lvgl/commit/c60ed68e">c60ed68e</a>
|
||||
- docs(color) minor fix <a href="https://github.com/lvgl/lvgl/commit/ac8f4534">ac8f4534</a>
|
||||
- fix(example) revert test code <a href="https://github.com/lvgl/lvgl/commit/77e2c1ff">77e2c1ff</a>
|
||||
- fix(draw) with additive blending with 32-bit color depth <a href="https://github.com/lvgl/lvgl/commit/786db2af">786db2af</a>
|
||||
- docs(color) update colors' docs <a href="https://github.com/lvgl/lvgl/commit/9056b5ee">9056b5ee</a>
|
||||
- Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/a711a1dd">a711a1dd</a>
|
||||
- perf(refresh) optimize where to wait for lv_disp_flush_ready with 2 buffers <a href="https://github.com/lvgl/lvgl/commit/d0172f14">d0172f14</a>
|
||||
- docs(lv_obj_style) update add_style and remove_style function headers (#2287) <a href="https://github.com/lvgl/lvgl/commit/60f7bcbf">60f7bcbf</a>
|
||||
- fix memory leak of spangroup (#2285) <a href="https://github.com/lvgl/lvgl/commit/33e0926a">33e0926a</a>
|
||||
- fix make lv_img_cache.h public because cache invalidation is public <a href="https://github.com/lvgl/lvgl/commit/38ebcd81">38ebcd81</a>
|
||||
- Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/2b292495">2b292495</a>
|
||||
- fix(btnmatrix) fix focus event handling <a href="https://github.com/lvgl/lvgl/commit/3b58ef14">3b58ef14</a>
|
||||
- Merge pull request #2280 from lvgl/dependabot/pip/docs/urllib3-1.26.5 <a href="https://github.com/lvgl/lvgl/commit/a2f45b26">a2f45b26</a>
|
||||
- fix(label) calculating the clip area <a href="https://github.com/lvgl/lvgl/commit/57e211cc">57e211cc</a>
|
||||
- chore(deps): bump urllib3 from 1.26.4 to 1.26.5 in /docs <a href="https://github.com/lvgl/lvgl/commit/b2f77dfc">b2f77dfc</a>
|
||||
- fix(docs) add docs about the default group <a href="https://github.com/lvgl/lvgl/commit/29bfe604">29bfe604</a>
|
||||
|
||||
## v8.0.0 (01.06.2021)
|
||||
|
||||
v8.0 brings many new features like simplified and more powerful scrolling, new layouts inspired by CSS Flexbox and Grid, simplified and improved widgets, more powerful events, hookable drawing, and more.
|
||||
|
||||
v8 is a major change and therefore it's not backward compatible with v7.
|
||||
v8 is a major change and therefore it's not backward compatible with v7.
|
||||
|
||||
### Directory structure
|
||||
- The `lv_` prefix is removed from the folder names
|
||||
|
|
@ -1026,7 +1026,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
|
|||
- `lv_disp_drv_t`, `lv_indev_drv_t`, `lv_fs_drv_t` needs to be `static`
|
||||
- `...disp_buf...` is renamed to `draw_buf`. See an initialization example [here](https://github.com/lvgl/lv_sim_eclipse_sdl/blob/release/v8.0/main.c#L128-L141).
|
||||
- No partial update if two screen sized buffers are set
|
||||
- `disp_drv->full_refresh = 1` makes always the whole display redraw.
|
||||
- `disp_drv->full_refresh = 1` makes always the whole display redraw.
|
||||
- `hor_res` and `ver_res` need to be set in `disp_drv`
|
||||
- `indev_read_cb` returns `void`. To indicate that there is more that to read set `data->continue_reading = 1` in the `read_cb`
|
||||
|
||||
|
|
@ -1055,7 +1055,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
|
|||
- Use the new layouts instead of `lv_cont` features
|
||||
- Use `lv_obj` instead of `lv_page`
|
||||
- See the changes in [Colors](https://docs.lvgl.io/8.0/overview/color.html)
|
||||
- The other parts are mainly minor renames and refactoring. See the functions' documentation for descriptions.
|
||||
- The other parts are mainly minor renames and refactoring. See the functions' documentation for descriptions.
|
||||
|
||||
## v7.11.0 (16.03.2021)
|
||||
|
||||
|
|
@ -1069,7 +1069,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
|
|||
|
||||
## v7.10.1 (16.02.2021)
|
||||
|
||||
### Bugfixes
|
||||
### Bugfixes
|
||||
- fix(draw) overlap outline with background to prevent aliasing artifacts
|
||||
- fix(indev) clear the indev's `act_obj` in `lv_indev_reset`
|
||||
- fix(text) fix out of bounds read in `_lv_txt_get_width`
|
||||
|
|
@ -1127,7 +1127,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
|
|||
## v7.8.0 (01.12.2020)
|
||||
|
||||
### New features
|
||||
- make DMA2D non blocking
|
||||
- make DMA2D non blocking
|
||||
- add unscii-16 built-in font
|
||||
- add KConfig
|
||||
- add lv_refr_get_fps_avg()
|
||||
|
|
@ -1144,7 +1144,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
|
|||
- fix(slider) adjusting the left knob too with encoder
|
||||
- fix reference to LV_DRAW_BUF_MAX_NUM in lv_mem.c
|
||||
- fix(polygon draw) join adjacent points if they are on the same coordinate
|
||||
- fix(linemeter) fix invalidation when setting new value
|
||||
- fix(linemeter) fix invalidation when setting new value
|
||||
- fix(table) add missing invalidation when changing cell type
|
||||
- refactor(roller) rename LV_ROLLER_MODE_INIFINITE -> LV_ROLLER_MODE_INFINITE
|
||||
|
||||
|
|
@ -1156,7 +1156,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
|
|||
- label: Repair calculate back `dot` character logical error which cause infinite loop.
|
||||
- fix(theme_material): remove the bottom border from tabview header
|
||||
- fix(imgbtn) guess the closest available state with valid src
|
||||
- fix(spinbox) update cursor position in lv_spinbox_set_step
|
||||
- fix(spinbox) update cursor position in lv_spinbox_set_step
|
||||
|
||||
## v7.7.1 (03.11.2020)
|
||||
### Bugfixes
|
||||
|
|
@ -1201,7 +1201,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
|
|||
- Check whether any style property has changed on a state change to decide if any redraw is required
|
||||
|
||||
### Bugfixes
|
||||
- Fix selection of options with non-ASCII letters in dropdown list
|
||||
- Fix selection of options with non-ASCII letters in dropdown list
|
||||
- Fix font loader to support LV_FONT_FMT_TXT_LARGE
|
||||
|
||||
## v7.5.0 (15.09.2020)
|
||||
|
|
@ -1248,7 +1248,7 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
|
|||
- Rename `lv_chart_clear_serie` to `lv_chart_clear_series` and `lv_obj_align_origo` to `lv_obj_align_mid`
|
||||
- Add linemeter's mirror feature again
|
||||
- Fix text decor (underline strikethrough) with older versions of font converter
|
||||
- Fix setting local style property multiple times
|
||||
- Fix setting local style property multiple times
|
||||
- Add missing background drawing and radius handling to image button
|
||||
- Allow adding extra label to list buttons
|
||||
- Fix crash if `lv_table_set_col_cnt` is called before `lv_table_set_row_cnt` for the first time
|
||||
|
|
@ -1300,7 +1300,7 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
|
|||
|
||||
### Bugfixes
|
||||
- `tileview` fix navigation when not screen sized
|
||||
- Use 14px font by default to for better compatibility with smaller displays
|
||||
- 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
|
||||
|
|
@ -1357,7 +1357,7 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
|
|||
|
||||
### Bugfixes
|
||||
- Make Micropython working by adding the required variables as GC_ROOT
|
||||
- Prefix some internal API functions with `_` to reduce the API of LVGL
|
||||
- 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
|
||||
|
|
@ -1382,12 +1382,12 @@ The name of the project is changed to LVGL and the new website is on https://lvg
|
|||
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.
|
||||
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.
|
||||
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
|
||||
|
|
@ -1397,12 +1397,12 @@ The API in this regard remained the same but some new functions were added:
|
|||
The new drawing engine brought new drawing features too. They are highlighted in the "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.
|
||||
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
|
||||
- gradient stop position to shift the gradient area and horizontal gradient
|
||||
- `LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE` blending modes
|
||||
- *clip corner*: crop the content on the rounded corners
|
||||
- *text underline* and *strikethrough*
|
||||
|
|
@ -1446,16 +1446,16 @@ The following object types are renamed:
|
|||
- `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
|
||||
- `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.
|
||||
- `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 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`
|
||||
|
|
@ -1472,4 +1472,4 @@ The following object types are renamed:
|
|||
- First and foremost, create a new `lv_conf.h` based on `lv_conf_template.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.
|
||||
- The other parts are mainly minor renames and refactoring as described above.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/CONTRIBUTING.md
|
||||
```
|
||||
|
||||
|
|
@ -9,22 +9,22 @@
|
|||
|
||||
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.
|
||||
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.
|
||||
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 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.
|
||||
- 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.
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ Before getting started here are some guidelines to make contribution smoother:
|
|||
|
||||
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.
|
||||
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
|
||||
|
|
@ -48,13 +48,13 @@ To add your changes you can edit files online on GitHub and send a new Pull requ
|
|||
### 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.
|
||||
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`
|
||||
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 both the fixes and new features go to `master` branch.
|
||||
7. Set the base branch. It means where you want to merge your update. In the `lvgl` repo both the fixes and new features go to `master` 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.
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ The following structure should be used:
|
|||
|
||||
Possible `<type>`s:
|
||||
- `fix` bugfix in the source code.
|
||||
- `feat` new feature
|
||||
- `feat` new feature
|
||||
- `arch` architectural changes
|
||||
- `perf` changes that affect the performance
|
||||
- `example` anything related to examples (even fixes and new examples)
|
||||
|
|
@ -91,8 +91,8 @@ For example `img`, `layout`, `txt`, `anim`. The scope can be omitted.
|
|||
|
||||
`<body>` optional and can be used to describe the details of this change.
|
||||
|
||||
`<footer>` shall contain
|
||||
- the words "BREAKING CHANGE" if the changes break the API
|
||||
`<footer>` shall contain
|
||||
- the words "BREAKING CHANGE" if the changes break the API
|
||||
- reference to the GitHub issue or Pull Request if applicable.
|
||||
|
||||
Some examples:
|
||||
|
|
@ -137,7 +137,7 @@ To make the DCO easier to digest, here are some practical guides about specific
|
|||
|
||||
#### Your own work
|
||||
|
||||
The simplest case is when the contribution is solely 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
|
||||
|
|
@ -161,14 +161,14 @@ As LVGL is MIT licensed, other MIT licensed code can be integrated without issue
|
|||
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.
|
||||
|
||||
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.
|
||||
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.
|
||||
Below we have collected some opportunities about the ways you can contribute to LVGL.
|
||||
|
||||
### Give LVGL a Star
|
||||
|
||||
|
|
@ -178,36 +178,36 @@ Show that you like LVGL by giving it star on GitHub!
|
|||
<!-- 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!
|
||||
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/platforms/pc-simulator), a development board, or on your custom hardware?
|
||||
Was it easy or were there some obstacles? Are you happy with the result?
|
||||
Have you already started using LVGL in a [Simulator](/get-started/platforms/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 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.
|
||||
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.
|
||||
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.
|
||||
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.
|
||||
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>`.
|
||||
|
|
@ -219,14 +219,14 @@ So all you need to do is send a [Pull request](#pull-request) to the [lvgl](http
|
|||
### 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.
|
||||
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).
|
||||
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).
|
||||
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.
|
||||
|
||||
|
|
@ -249,17 +249,17 @@ Just read the titles and if you are familiar with the topic don't hesitate to sh
|
|||
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.
|
||||
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.
|
||||
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 [lv_conf_template.h](https://github.com/lvgl/lvgl/blob/master/lv_conf_template.h)
|
||||
- Add description in the [docs](https://github.com/lvgl/lvgl/tree/master/docs)
|
||||
- Add description in the [docs](https://github.com/lvgl/lvgl/tree/master/docs)
|
||||
- Add [examples](https://github.com/lvgl/lvgl/tree/master/examples)
|
||||
- Update the [changelog](https://github.com/lvgl/lvgl/tree/master/docs/CHANGELOG.md)
|
||||
|
||||
|
|
@ -279,22 +279,22 @@ You can become a maintainer by invitation, however the following conditions need
|
|||
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.
|
||||
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.
|
||||
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!
|
||||
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.
|
||||
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
|
||||
- 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
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ class LvExample(Directive):
|
|||
env = self.state.document.settings.env
|
||||
|
||||
iframe_html = ""
|
||||
|
||||
|
||||
c_path = self.get_example_code_path(example_path, 'c')
|
||||
py_path = self.get_example_code_path(example_path, 'py')
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ class LvExample(Directive):
|
|||
'<i class="fa fa-play"></i> Simulator': f"https://sim.lvgl.io/v{env.config.version}/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/{env.config.repo_commit_hash}/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/{env.config.repo_commit_hash}/examples/{example_path}.py"
|
||||
})
|
||||
|
||||
if not 'c' in excluded_languages:
|
||||
if not 'c' in excluded_languages:
|
||||
if env.app.tags.has('html'):
|
||||
iframe_html = f"<div class='lv-example' data-real-src='/{env.config.version}/_static/built_lv_examples?example={example_name}&w=320&h=240'></div>"
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ td {
|
|||
text-align:center;
|
||||
}
|
||||
span.pre
|
||||
{
|
||||
{
|
||||
padding-right:8px;
|
||||
}
|
||||
|
||||
span.pre:first-child
|
||||
{
|
||||
{
|
||||
padding-right:0px;
|
||||
}
|
||||
|
||||
|
|
@ -26,18 +26,18 @@ code.sig-name
|
|||
display: block;
|
||||
clear: both;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toggle .header:before {
|
||||
font-family: FontAwesome, "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
|
||||
content: "\f0da \00a0 Show ";
|
||||
content: "\f0da \00a0 Show ";
|
||||
display: inline-block;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.toggle .header.open:before {
|
||||
content: "\f0d7 \00a0 Hide ";
|
||||
content: "\f0d7 \00a0 Hide ";
|
||||
}
|
||||
|
||||
.header p {
|
||||
|
|
@ -56,7 +56,7 @@ code.sig-name
|
|||
|
||||
|
||||
.home-img {
|
||||
width:32%;
|
||||
width:32%;
|
||||
transition: transform .3s ease-out;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ function add_version_selector()
|
|||
p.innerHTML = `
|
||||
<select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
|
||||
${versions.map(version => {
|
||||
let versionName = "";
|
||||
let versionName = "";
|
||||
if(version == "master") versionName = "master (latest)";
|
||||
else versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
|
||||
return `<option value="${version}">${versionName}</option>`;
|
||||
|
|
@ -49,7 +49,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
|
|||
var value = window.location.pathname.split('/')[1];
|
||||
document.getElementById("versions").value = value;
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
function onIntersection(entries) {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ def cmd(s):
|
|||
print(s)
|
||||
print("-------------------------------------")
|
||||
r = os.system(s)
|
||||
if r != 0:
|
||||
if r != 0:
|
||||
print("Exit build due to previous error")
|
||||
exit(-1)
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ br = re.sub('\* ', '', br)
|
|||
ex.exec()
|
||||
|
||||
urlpath = re.sub('release/', '', br)
|
||||
|
||||
|
||||
# Be sure the GitHub links point to the right branch
|
||||
f = open("header.rst", "w")
|
||||
f.write(".. |github_link_base| replace:: https://github.com/lvgl/lvgl/blob/" + gitcommit + "/docs")
|
||||
|
|
@ -48,7 +48,7 @@ args = sys.argv[1:]
|
|||
if len(args) >= 1:
|
||||
if "clean" in args: clean = 1
|
||||
if "skip_latex" in args: skip_latex = True
|
||||
|
||||
|
||||
lang = "en"
|
||||
print("")
|
||||
print("****************")
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ extensions = ['sphinx.ext.autodoc',
|
|||
# Add any paths that contain templates here, relative to this directory.
|
||||
templates_path = ['_templates']
|
||||
|
||||
# The default language to highlight source code in. The default is 'python'.
|
||||
# The default language to highlight source code in. The default is 'python'.
|
||||
# The value should be a valid Pygments lexer name, see Showing code examples for more details.
|
||||
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ language = None
|
|||
# List of patterns, relative to source directory, that match files and
|
||||
# directories to ignore when looking for source files.
|
||||
# This patterns also effect to html_static_path and html_extra_path
|
||||
exclude_patterns = ['_build', 'doxygen_html', 'Thumbs.db', '.DS_Store',
|
||||
exclude_patterns = ['_build', 'doxygen_html', 'Thumbs.db', '.DS_Store',
|
||||
'README.md', 'lv_examples', 'out_html' ]
|
||||
|
||||
# The name of the Pygments (syntax highlighting) style to use.
|
||||
|
|
@ -164,7 +164,7 @@ latex_elements = {
|
|||
# Latex figure (float) alignment
|
||||
#
|
||||
# 'figure_align': 'htbp',
|
||||
|
||||
|
||||
'inputenc': '',
|
||||
'utf8extra': '',
|
||||
'classoptions': ',openany,oneside',
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@ def process_index_rst(path):
|
|||
line = fp.readline()
|
||||
|
||||
return(d)
|
||||
|
||||
|
||||
h1= {
|
||||
"get_started":"Get started",
|
||||
"styles":"Styles",
|
||||
"anim":"Animations",
|
||||
"event":"Events",
|
||||
"layouts":"Layouts",
|
||||
"get_started":"Get started",
|
||||
"styles":"Styles",
|
||||
"anim":"Animations",
|
||||
"event":"Events",
|
||||
"layouts":"Layouts",
|
||||
"scroll":"Scrolling",
|
||||
"widgets":"Widgets"
|
||||
}
|
||||
|
|
@ -103,7 +103,7 @@ def exec():
|
|||
d_all.update(d_act)
|
||||
|
||||
fout.write("```eval_rst\n")
|
||||
fout.write(".. include:: /header.rst\n")
|
||||
fout.write(".. include:: /header.rst\n")
|
||||
fout.write(":github_url: |github_link_base|/examples.md\n")
|
||||
fout.write("```\n")
|
||||
fout.write("\n")
|
||||
|
|
@ -111,7 +111,7 @@ def exec():
|
|||
|
||||
for h in h1:
|
||||
fout.write("## " + h1[h] + "\n")
|
||||
|
||||
|
||||
if h == "widgets":
|
||||
for w in widgets:
|
||||
fout.write("### " + widgets[w] + "\n")
|
||||
|
|
@ -121,7 +121,7 @@ def exec():
|
|||
fout.write("### " + layouts[l] + "\n")
|
||||
print_item(h + "/" + l, 4, d_all, fout)
|
||||
else:
|
||||
print_item(h, 3, d_all, fout)
|
||||
|
||||
print_item(h, 3, d_all, fout)
|
||||
|
||||
fout.write("")
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/bindings/micropython.md
|
||||
```
|
||||
# Cpp
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/bindings/index.md
|
||||
```
|
||||
# Bindings
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/bindings/micropython.md
|
||||
```
|
||||
# Micropython
|
||||
|
||||
## What is Micropython?
|
||||
|
||||
[Micropython](http://micropython.org/) is Python for microcontrollers.
|
||||
[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
|
||||
|
|
@ -27,15 +27,15 @@ Currently, Micropython [does not have a good high-level GUI library](https://for
|
|||
### 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`**.
|
||||
- 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.
|
||||
- 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.
|
||||
- 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 inexperienced users to get started with embedded development.
|
||||
- Creating tools to work with LVGL at a higher level (e.g. drag-and-drop designer).
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ This goes well with [CircuitPython vision](https://learn.adafruit.com/welcome-to
|
|||
> TL;DR:
|
||||
> It's very much like the C API, but Object-Oriented for LVGL components.
|
||||
|
||||
Let's dive right into an example!
|
||||
Let's dive right into an example!
|
||||
|
||||
### A simple example
|
||||
|
||||
|
|
@ -65,7 +65,7 @@ lv.scr_load(scr)
|
|||
|
||||
### Online Simulator
|
||||
|
||||
If you want to experiment with LVGL + Micropython without downloading anything - you can use our 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/)
|
||||
|
|
@ -76,14 +76,14 @@ 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.)
|
||||
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.
|
||||
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!
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/index.md
|
||||
```
|
||||
# Get started
|
||||
|
|
@ -10,12 +10,12 @@ There are several ways to get your feet wet with LVGL. Here is one recommended o
|
|||
3. Read the [Quick overview](https://docs.lvgl.io/master/get-started/quick-overview.html) page of the documentation (15 minutes)
|
||||
4. Set up a [Simulator](https://docs.lvgl.io/master/get-started/platforms/pc-simulator.html) (10 minutes)
|
||||
5. Try out some [Examples](https://docs.lvgl.io/master/examples.html)
|
||||
6. Check out the Platform-specific tutorials. (in this section below). (10 minutes)
|
||||
6. Check out the Platform-specific tutorials. (in this section below). (10 minutes)
|
||||
7. 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_&type=&language=)
|
||||
8. Read the [Overview](https://docs.lvgl.io/master/overview/index.html) page to get a better understanding of the library. (2-3 hours)
|
||||
9. Check the documentation of the [Widgets](https://docs.lvgl.io/master/widgets/index.html) to see their features and usage
|
||||
10. If you have questions got to the [Forum](http://forum.lvgl.io/)
|
||||
11. Read the [Contributing](https://docs.lvgl.io/master/CONTRIBUTING.html) guide to see how you can help to improve LVGL (15 minutes)
|
||||
11. Read the [Contributing](https://docs.lvgl.io/master/CONTRIBUTING.html) guide to see how you can help to improve LVGL (15 minutes)
|
||||
|
||||
|
||||
```eval_rst
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/os/index.md
|
||||
```
|
||||
# (RT)OS
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/os/nuttx.md
|
||||
```
|
||||
# NuttX RTOS
|
||||
|
||||
## What is NuttX?
|
||||
|
||||
[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.
|
||||
[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.
|
||||
|
||||
|
|
@ -23,8 +23,8 @@ The best way to think about NuttX is to think of it as a small Unix/Linux for mi
|
|||
|
||||
## 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.
|
||||
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
|
||||
|
|
@ -80,7 +80,7 @@ $ make
|
|||
If everything went fine you should have now the file `nuttx.bin` to flash on your board:
|
||||
|
||||
```shell
|
||||
$ ls -l nuttx.bin
|
||||
$ ls -l nuttx.bin
|
||||
-rwxrwxr-x 1 alan alan 287144 Jun 27 09:26 nuttx.bin
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/platforms/arduino.md
|
||||
```
|
||||
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
The [LVGL library](https://github.com/lvgl/lvgl) is directly available as Arduino libraries.
|
||||
|
||||
Note that you need to choose a board powerful enough to run LVGL and your GUI. See the [requirements of LVGL](https://docs.lvgl.io/master/intro/index.html#requirements).
|
||||
Note that you need to choose a board powerful enough to run LVGL and your GUI. See the [requirements of LVGL](https://docs.lvgl.io/master/intro/index.html#requirements).
|
||||
|
||||
For example ESP32 is a good candidate to create UI's with LVGL.
|
||||
|
||||
|
|
@ -15,13 +15,13 @@ For example ESP32 is a good candidate to create UI's with LVGL.
|
|||
|
||||
LVGL can be installed via the Arduino IDE Library Manager or as a .ZIP library.
|
||||
|
||||
You can [Download](https://github.com/lvgl/lvgl/archive/refs/heads/master.zip) the latest version of LVGL from GitHub and simply copy it to Arduino's library folder.
|
||||
You can [Download](https://github.com/lvgl/lvgl/archive/refs/heads/master.zip) the latest version of LVGL from GitHub and simply copy it to Arduino's library folder.
|
||||
|
||||
## 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 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`
|
||||
- `User_Setup.h`
|
||||
- or by selecting a configuration in the `User_Setup_Select.h`
|
||||
|
||||
Both files are located in `TFT_eSPI` library's folder.
|
||||
|
|
@ -61,8 +61,8 @@ Due to some the limitations of Arduino's build system you need to copy `lvgl/exa
|
|||
|
||||
## 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.
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/platforms/cmake.md
|
||||
```
|
||||
|
||||
|
|
@ -46,14 +46,14 @@ This configuration declares a dependency between the two targets **MyFirmware**
|
|||
|
||||
### Additional CMake options
|
||||
Besides `LV_CONF_PATH` there are two additional CMake options to specify include paths.
|
||||
|
||||
`LV_LVGL_H_INCLUDE_SIMPLE` which specifies whether to `#include "lvgl.h"` absolut or relative
|
||||
|
||||
`LV_LVGL_H_INCLUDE_SIMPLE` which specifies whether to `#include "lvgl.h"` absolut or relative
|
||||
|
||||
| ON (default) | OFF |
|
||||
| ------------ | -------------- |
|
||||
| "lvgl.h" | "../../lvgl.h" |
|
||||
|
||||
`LV_CONF_INCLUDE_SIMPLE` which specifies whether to `#include "lv_conf.h"` and `"lv_drv_conf.h"` absolut or relative
|
||||
`LV_CONF_INCLUDE_SIMPLE` which specifies whether to `#include "lv_conf.h"` and `"lv_drv_conf.h"` absolut or relative
|
||||
|
||||
| ON (default) | OFF |
|
||||
| --------------- | --------------------- |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/platforms/espressif.md
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/index.md
|
||||
```
|
||||
# Platforms
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/platoforms/simulator.md
|
||||
```
|
||||
# Simulator on PC
|
||||
|
|
@ -9,7 +9,7 @@ You can try out LVGL **using only your PC** (i.e. without any development boards
|
|||
|
||||
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.
|
||||
- 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).
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ The following section describes the set-up guide of Eclipse CDT in more detail.
|
|||
|
||||
[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.
|
||||
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`
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ You can download Eclipse's CDT from: [https://www.eclipse.org/cdt/downloads.php]
|
|||
|
||||
### 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.
|
||||
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:
|
||||
|
|
@ -58,14 +58,14 @@ On **Linux** you can easily install SDL2 using a terminal:
|
|||
#### 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.
|
||||
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_workspace}/pc_simulator/Debug/_. Do it later when Eclipse is installed.
|
||||
5. Copy _..._mingw32/bin/SDL2.dll_ to _{eclipse_workspace}/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.
|
||||
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`
|
||||
|
|
@ -74,9 +74,9 @@ If something is not working, then please refer [this tutorial](http://lazyfoo.ne
|
|||
|
||||
### Pre-configured project
|
||||
|
||||
A pre-configured graphics library project (based on the latest release) is always available to get started easily.
|
||||
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).
|
||||
(Please note that, the project is configured for Eclipse CDT).
|
||||
|
||||
### Add the pre-configured project to Eclipse CDT
|
||||
|
||||
|
|
@ -86,7 +86,7 @@ Close the start-up window and go to **File->Import** and choose **General->
|
|||
|
||||
On **Windows** you have to do two additional things:
|
||||
|
||||
- Copy the **SDL2.dll** into the project's Debug folder
|
||||
- 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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/platforms/stm32.md
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/platforms/tasmota-berry.md
|
||||
```
|
||||
# Tasmota and berry
|
||||
|
|
@ -39,10 +39,10 @@ Versions supported: LVGL v8.0.2, LodePNG v20201017, Freetype 2.10.4
|
|||
|
||||
### Tasmota + Berry + LVGL could be used for:
|
||||
|
||||
- Fast prototyping GUI.
|
||||
- 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 Berry's language features such as Inheritance, Closures, Exception Handling...
|
||||
- Make LVGL accessible to a larger audience. No need to know C to create a nice GUI on an embedded system.
|
||||
- Make LVGL accessible to a larger audience. No need to know C to create a nice GUI on an embedded system.
|
||||
|
||||
A higher level interface compatible with [OpenHASP](https://github.com/HASwitchPlate/openHASP) is also under development.
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ A higher level interface compatible with [OpenHASP](https://github.com/HASwitchP
|
|||
> TL;DR:
|
||||
> Similar to MicroPython, it's very much like the C API, but Object-Oriented for LVGL components.
|
||||
|
||||
Let's dive right into an example!
|
||||
Let's dive right into an example!
|
||||
|
||||
### A simple example
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/get-started/quick-overview.md
|
||||
```
|
||||
|
||||
|
|
@ -10,11 +10,11 @@ You should read this first to get a general impression and read the detailed [Po
|
|||
|
||||
## 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.
|
||||
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.
|
||||
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:
|
||||
|
|
@ -23,11 +23,11 @@ If you would rather try LVGL on your own project follow these steps:
|
|||
- 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.
|
||||
- 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.
|
||||
- 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
|
||||
static lv_disp_draw_buf_t draw_buf;
|
||||
static lv_color_t buf1[DISP_HOR_RES * DISP_VER_RES / 10]; /*Declare a buffer for 1/10 screen size*/
|
||||
|
|
@ -76,7 +76,7 @@ void my_touchpad_read(lv_indev_t * indev, lv_indev_data_t * data)
|
|||
} 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.
|
||||
|
|
@ -90,13 +90,13 @@ For a more detailed guide go to the [Porting](/porting/index) section.
|
|||
|
||||
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.
|
||||
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.
|
||||
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.
|
||||
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)`.
|
||||
|
||||
|
|
@ -124,8 +124,8 @@ To see the full API visit the documentation of the widgets or the related header
|
|||
|
||||
|
||||
### 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.
|
||||
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:
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ void btn_event_cb(lv_event_t * e)
|
|||
}
|
||||
```
|
||||
|
||||
`LV_EVENT_ALL` can be used instead of `LV_EVENT_CLICKED` to invoke the callback for any event.
|
||||
`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
|
||||
|
|
@ -166,13 +166,13 @@ Read the widgets' documentation to learn which parts each uses.
|
|||
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_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
|
||||
- `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.
|
||||
|
||||
|
|
@ -219,8 +219,8 @@ 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:
|
||||
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);
|
||||
|
|
@ -229,23 +229,23 @@ 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.
|
||||
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:
|
||||
```c
|
||||
lv_obj_set_style_bg_color(slider1, lv_color_hex(0x2080bb), LV_PART_INDICATOR | LV_STATE_PRESSED);
|
||||
```
|
||||
```
|
||||
|
||||
To learn all the features of styles see the [Style overview](/overview/style) section.
|
||||
|
||||
|
||||
### Themes
|
||||
|
||||
Themes are the default styles for objects. Styles from a theme are applied automatically when objects are created.
|
||||
Themes are the default styles for objects. Styles from a theme are applied automatically when objects are created.
|
||||
|
||||
The theme for your application is a compile time configuration set in `lv_conf.h`.
|
||||
The theme for your application is a compile time configuration set in `lv_conf.h`.
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/index.md
|
||||
```
|
||||
|
||||
|
|
@ -13,20 +13,20 @@ PDF version: :download:`LVGL.pdf <LVGL.pdf>`
|
|||
<img src="_static/img/home_banner.jpg" style="width:100%">
|
||||
|
||||
|
||||
<div style="margin-bottom:48px">
|
||||
<div style="margin-bottom:48px">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
```eval_rst
|
||||
.. toctree::
|
||||
:maxdepth: 2
|
||||
|
||||
|
||||
intro/index
|
||||
examples
|
||||
get-started/index
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/intro/index.md
|
||||
```
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ Basically, every modern controller which is able to drive a display is suitable
|
|||
<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:
|
||||
<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>
|
||||
|
|
@ -43,22 +43,22 @@ Basically, every modern controller which is able to drive a display is suitable
|
|||
</ul>
|
||||
</li>
|
||||
<li> C99 or newer compiler</li>
|
||||
<li> Basic C (or C++) knowledge:
|
||||
<a href="https://www.tutorialspoint.com/cprogramming/c_pointers.htm">pointers</a>,
|
||||
<a href="https://www.tutorialspoint.com/cprogramming/c_structures.htm">structs</a>,
|
||||
<li> Basic C (or C++) knowledge:
|
||||
<a href="https://www.tutorialspoint.com/cprogramming/c_pointers.htm">pointers</a>,
|
||||
<a href="https://www.tutorialspoint.com/cprogramming/c_structures.htm">structs</a>,
|
||||
<a href="https://www.geeksforgeeks.org/callbacks-in-c/">callbacks</a>.</li>
|
||||
</ul>
|
||||
<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).
|
||||
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 in their free time.
|
||||
|
||||
To make the LVGL project sustainable, please consider [contributing](/CONTRIBUTING) to the project.
|
||||
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 using LVGL, fixing bugs, translating the documentation, or even becoming a maintainer.
|
||||
|
||||
## Repository layout
|
||||
|
|
@ -90,7 +90,7 @@ Tags like `vX.Y.Z` are created for every release.
|
|||
|
||||
### Branches
|
||||
The core repositories have at least the following branches:
|
||||
- `master` latest version, patches are merged directly here.
|
||||
- `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
|
||||
|
|
@ -119,8 +119,8 @@ Starting from v8, every minor release is supported for 1 year.
|
|||
### 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.
|
||||
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.
|
||||
|
||||
Before posting a question, please ready this FAQ section as you might find answer to your issue here too.
|
||||
|
||||
|
|
@ -128,17 +128,17 @@ Before posting a question, please ready this FAQ section as you might find answe
|
|||
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.
|
||||
- "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.
|
||||
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
|
||||
- TFTs with 16 or 24 bit color depth
|
||||
- Monitors with an HDMI port
|
||||
- Small monochrome displays
|
||||
- Gray-scale displays
|
||||
|
|
@ -162,8 +162,8 @@ Be sure you are calling `lv_tick_inc(x)` in an interrupt and `lv_timer_handler()
|
|||
|
||||
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 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.
|
||||
|
|
@ -191,16 +191,16 @@ a.y2 = a.y1 + BUF_H - 1;
|
|||
my_flush_cb(NULL, &a, buf);
|
||||
```
|
||||
|
||||
### Why do I see nonsense colors on the screen?
|
||||
### Why do I see nonsense colors on the screen?
|
||||
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*.
|
||||
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
|
||||
- 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 an 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
|
||||
|
|
@ -211,7 +211,7 @@ You can disable all the unused features (such as animations, file system, GPU et
|
|||
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*
|
||||
- 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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/layouts/flex.md
|
||||
```
|
||||
|
||||
|
|
@ -13,14 +13,14 @@ It can arrange items into rows or columns (tracks), handle wrapping, adjust the
|
|||
|
||||
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`.
|
||||
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.
|
||||
- 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
|
||||
|
||||
|
|
@ -54,8 +54,8 @@ The possible values are:
|
|||
- `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.
|
||||
- `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`.
|
||||
|
||||
|
|
@ -87,13 +87,13 @@ All the Flex-related values are style properties under the hood and you can use
|
|||
|
||||
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_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
|
||||
## 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.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/layouts/grid.md
|
||||
```
|
||||
|
||||
|
|
@ -14,11 +14,11 @@ The track's size can be set in pixel, to the largest item (`LV_GRID_CONTENT`) or
|
|||
|
||||
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`.
|
||||
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.
|
||||
- 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
|
||||
|
|
@ -42,7 +42,7 @@ Besides simple settings the size in pixel you can use two special values:
|
|||
- `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.
|
||||
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)`.
|
||||
|
||||
|
|
@ -51,9 +51,9 @@ To do this call `lv_obj_set_grid_cell(child, column_align, column_pos, column_sp
|
|||
- `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_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.
|
||||
`colum_span` and `row_span` means how many tracks should the item involve from the start cell. Must be > 1.
|
||||
|
||||
### Grid align
|
||||
|
||||
|
|
@ -62,8 +62,8 @@ If there are some empty space the track can be aligned several ways:
|
|||
- `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.
|
||||
- `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`.
|
||||
|
||||
|
|
@ -88,10 +88,10 @@ All the Grid related values are style properties under the hood and you can use
|
|||
|
||||
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_row` Sets the padding between the rows.
|
||||
- `pad_column` Sets the padding between the columns.
|
||||
|
||||
## Other features
|
||||
## 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.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/layouts/index.md
|
||||
```
|
||||
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
```eval_rst
|
||||
.. toctree::
|
||||
:maxdepth: 2
|
||||
|
||||
|
||||
flex
|
||||
grid
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/libs/bmp.md
|
||||
```
|
||||
|
||||
# BMP decoder
|
||||
# BMP decoder
|
||||
|
||||
This extension allows the use of BMP images in LVGL.
|
||||
This extension allows the use of BMP images in LVGL.
|
||||
This implementation uses [bmp-decoder](https://github.com/caj-johnson/bmp-decoder) library.
|
||||
The pixels are read on demand (not the whole image is loaded) so using BMP images requires very little RAM.
|
||||
The pixels 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_...`
|
||||
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.
|
||||
- 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`
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/libs/ffmpeg.md
|
||||
```
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ Enable `LV_USE_FFMPEG` in `lv_conf.h`.
|
|||
|
||||
See the examples below.
|
||||
|
||||
Note that, the FFmpeg extension doesn't use LVGL's file system.
|
||||
Note that, the FFmpeg extension doesn't use LVGL's file system.
|
||||
You can simply pass the path to the image or video as usual on your operating system or platform.
|
||||
|
||||
## Example
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/libs/freetype.md
|
||||
```
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ Font style supports bold and italic, you can use the following macros to set:
|
|||
|
||||
They can be combined.eg:`FT_FONT_STYLE_BOLD | FT_FONT_STYLE_ITALIC`.
|
||||
|
||||
Note that, the FreeType extension doesn't use LVGL's file system.
|
||||
Note that, the FreeType extension doesn't use LVGL's file system.
|
||||
You can simply pass the path to the font as usual on your operating system or platform.
|
||||
|
||||
## Example
|
||||
|
|
@ -44,7 +44,7 @@ You can simply pass the path to the font as usual on your operating system or pl
|
|||
|
||||
|
||||
## Learn more
|
||||
- FreeType [tutorial](https://www.freetype.org/freetype2/docs/tutorial/step1.html)
|
||||
- FreeType [tutorial](https://www.freetype.org/freetype2/docs/tutorial/step1.html)
|
||||
- LVGL's [font interface](https://docs.lvgl.io/v7/en/html/overview/font.html#add-a-new-font-engine)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/libs/fsdrv.md
|
||||
```
|
||||
|
||||
|
|
@ -20,6 +20,6 @@ You still need to provide the drivers and libraries, this extension provides onl
|
|||
In `lv_conf.h` enable `LV_USE_FS_...` and assign an upper cased letter to `LV_FS_..._LETTER` (e.g. `'S'`).
|
||||
After that you can access files using that driver letter. E.g. `"S:path/to/file.txt"`.
|
||||
|
||||
The work directory can be set with `LV_FS_..._PATH`. E.g. `"/home/joe/projects/"` The actual file/directory paths will be appended to it.
|
||||
The work directory can be set with `LV_FS_..._PATH`. E.g. `"/home/joe/projects/"` The actual file/directory paths will be appended to it.
|
||||
|
||||
Cached reading is also supported if `LV_FS_..._CACHE_SIZE` is set to not `0` value. `lv_fs_read` caches this size of data to lower the number of actual reads from the storage.
|
||||
Cached reading is also supported if `LV_FS_..._CACHE_SIZE` is set to not `0` value. `lv_fs_read` caches this size of data to lower the number of actual reads from the storage.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/libs/gif.md
|
||||
```
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ When enabled in `lv_conf.h` with `LV_USE_GIF` `lv_gif_create(parent)` can be use
|
|||
|
||||
## 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:
|
||||
|
|
@ -21,14 +21,14 @@ For example:
|
|||
lv_gif_set_src(obj, "S:path/to/example.gif");
|
||||
```
|
||||
|
||||
Note that, a file system driver needs to be 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_...`
|
||||
Note that, a file system driver needs to be 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_...`
|
||||
|
||||
|
||||
## 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
|
||||
- `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
|
||||
|
||||
## Example
|
||||
```eval_rst
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/libs/index.md
|
||||
```
|
||||
# 3rd party libraries
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
|
||||
|
||||
fsdrv
|
||||
bmp
|
||||
sjpg
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/libs/png.md
|
||||
```
|
||||
|
||||
|
|
@ -9,11 +9,11 @@ Allow the use of PNG images in LVGL. This implementation uses [lodepng](https://
|
|||
|
||||
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_...`
|
||||
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.
|
||||
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.
|
||||
|
||||
## Example
|
||||
```eval_rst
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/libs/qrcode.md
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ The default animation mode is **play forward with loop**.
|
|||
|
||||
If you don't enable looping, a `LV_EVENT_READY` is sent when the animation can not make more progress without looping.
|
||||
|
||||
To get the number of frames in an animation or the current frame index, you can cast the `lv_obj_t` instance to a `lv_rlottie_t` instance and inspect the `current_frame` and `total_frames` members.
|
||||
To get the number of frames in an animation or the current frame index, you can cast the `lv_obj_t` instance to a `lv_rlottie_t` instance and inspect the `current_frame` and `total_frames` members.
|
||||
|
||||
## Example
|
||||
```eval_rst
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/libs/sjpg.md
|
||||
```
|
||||
|
||||
|
|
@ -26,17 +26,17 @@ If enabled in `lv_conf.h` by `LV_USE_SJPG` LVGL will register a new image decode
|
|||
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_...`
|
||||
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
|
||||
- Use lvgl online tool https://lvgl.io/tools/imageconverter
|
||||
- Color format = RAW, output format = C Array
|
||||
|
||||
### Converting JPG to SJPG
|
||||
|
||||
### Converting JPG to SJPG
|
||||
python3 and the PIL library required. (PIL can be installed with `pip3 install pillow`)
|
||||
|
||||
To create SJPG from JPG:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/others/fragment.md
|
||||
```
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ to, the host’s view hierarchy.
|
|||
Such concept also has some similarities
|
||||
to [UiViewController on iOS](https://developer.apple.com/documentation/uikit/uiviewcontroller).
|
||||
|
||||
Fragment Manager is a manager holding references to fragments attached to it, and has an internal stack to achieve
|
||||
Fragment Manager is a manager holding references to fragments attached to it, and has an internal stack to achieve
|
||||
navigation. You can use fragment manager to build navigation stack, or multi pane application easily.
|
||||
|
||||
## Usage
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/others/gridnav.md
|
||||
```
|
||||
# Grid navigation
|
||||
|
|
@ -15,30 +15,30 @@ This means that gridnav works with manually positioned children, as well as [Fle
|
|||
Gridnav also works if the children are arranged into a single row or column.
|
||||
That makes it useful, for example, to simplify navigation on a [List widget](/widgets/extra/list).
|
||||
|
||||
Gridnav assumes that the object to which gridnav is added is part of a [group](/overview/indev.html#groups).
|
||||
Gridnav assumes that the object to which gridnav is added is part of a [group](/overview/indev.html#groups).
|
||||
This way, if the object with gridnav is focused, the arrow key presses are automatically forwarded to the object
|
||||
so that gridnav can process the arrow keys.
|
||||
|
||||
To move the focus to the next widget of the group use `LV_KEY_NEXT/PREV` or `lv_group_focus_next/prev()` or the `TAB` key on keyboard as usual.
|
||||
|
||||
To move the focus to the next widget of the group use `LV_KEY_NEXT/PREV` or `lv_group_focus_next/prev()` or the `TAB` key on keyboard as usual.
|
||||
|
||||
If the container is scrollable and the focused child is out of the view, gridnav will automatically scroll the child into view.
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
To add the gridnav feature to an object use `lv_gridnav_add(cont, flags)`.
|
||||
|
||||
`flags` control the behavior of gridnav:
|
||||
- `LV_GRIDNAV_CTRL_NONE` Default settings
|
||||
- `LV_GRIDNAV_CTRL_ROLLOVER` If there is no next/previous object in a direction,
|
||||
the focus goes to the object in the next/previous row (on left/right keys) or first/last row (on up/down keys
|
||||
- `LV_GRIDNAV_CTRL_NONE` Default settings
|
||||
- `LV_GRIDNAV_CTRL_ROLLOVER` If there is no next/previous object in a direction,
|
||||
the focus goes to the object in the next/previous row (on left/right keys) or first/last row (on up/down keys
|
||||
- `LV_GRIDNAV_CTRL_SCROLL_FIRST` If an arrow is pressed and the focused object can be scrolled in that direction
|
||||
then it will be scrolled instead of going to the next/previous object. If there is no more room for scrolling the next/previous object will be focused normally
|
||||
then it will be scrolled instead of going to the next/previous object. If there is no more room for scrolling the next/previous object will be focused normally
|
||||
|
||||
`lv_gridnav_remove(cont)` Removes gridnav from an object.
|
||||
|
||||
## Focusable objects
|
||||
|
||||
An object needs to be clickable or click focusable (`LV_OBJ_FLAG_CLICKABLE` or `LV_OBJ_FLAG_CLICK_FOCUSABLE`)
|
||||
An object needs to be clickable or click focusable (`LV_OBJ_FLAG_CLICKABLE` or `LV_OBJ_FLAG_CLICK_FOCUSABLE`)
|
||||
and not hidden (`LV_OBJ_FLAG_HIDDEN`) to be focusable by gridnav.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/others/imgfont.md
|
||||
```
|
||||
## Image font (imgfont)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/others/index.md
|
||||
```
|
||||
# Others
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
|
||||
|
||||
snapshot
|
||||
monkey
|
||||
gridnav
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/others/monkey.md
|
||||
```
|
||||
# Monkey
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/others/snapshot.md
|
||||
```
|
||||
# Snapshot
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/animation.md
|
||||
```
|
||||
# Animations
|
||||
|
|
@ -29,10 +29,10 @@ lv_anim_init(&a);
|
|||
*------------------*/
|
||||
|
||||
/*Set the "animator" function*/
|
||||
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x);
|
||||
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x);
|
||||
|
||||
/*Set target of the animation*/
|
||||
lv_anim_set_var(&a, obj);
|
||||
lv_anim_set_var(&a, obj);
|
||||
|
||||
/*Length of the animation [ms]*/
|
||||
lv_anim_set_time(&a, duration);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/color.md
|
||||
```
|
||||
# Colors
|
||||
|
|
@ -19,10 +19,10 @@ Create colors from Red, Green and Blue channel values:
|
|||
lv_color_t c = lv_color_make(red, green, blue);
|
||||
|
||||
//From hex code 0x000000..0xFFFFFF interpreted as RED + GREEN + BLUE
|
||||
lv_color_t c = lv_color_hex(0x123456);
|
||||
lv_color_t c = lv_color_hex(0x123456);
|
||||
|
||||
//From 3 digits. Same as lv_color_hex(0x112233)
|
||||
lv_color_t c = lv_color_hex3(0x123);
|
||||
lv_color_t c = lv_color_hex3(0x123);
|
||||
```
|
||||
|
||||
### HSV
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/coords.md
|
||||
```
|
||||
# Positions, sizes, and layouts
|
||||
|
|
@ -10,11 +10,11 @@ Similarly to many other parts of LVGL, the concept of setting the coordinates wa
|
|||
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
|
||||
- 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
|
||||
- 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))`
|
||||
|
|
@ -24,13 +24,13 @@ In short this means:
|
|||
LVGL follows CSS's [border-box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) model.
|
||||
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.
|
||||
- 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 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.
|
||||
|
||||
|
|
@ -38,19 +38,19 @@ The outline is drawn outside the bounding box.
|
|||
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.
|
||||
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.
|
||||
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.
|
||||
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
|
||||
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)
|
||||
```
|
||||
|
|
@ -83,20 +83,20 @@ 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.
|
||||
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.
|
||||
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.
|
||||
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);
|
||||
```
|
||||
```
|
||||
|
||||
To change the alignment and set new coordinates:
|
||||
```c
|
||||
|
|
@ -149,7 +149,7 @@ For example to align a label above a button and center the label horizontally:
|
|||
lv_obj_align_to(label, btn, LV_ALIGN_OUT_TOP_MID, 0, -10);
|
||||
```
|
||||
|
||||
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.
|
||||
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
|
||||
|
||||
|
|
@ -166,7 +166,7 @@ Percentage values are calculated based on the parent's content area size. For ex
|
|||
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.
|
||||
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.
|
||||
|
|
@ -186,15 +186,15 @@ lv_coord_t content_h = lv_obj_get_content_height(obj);
|
|||
```
|
||||
|
||||
## Using styles
|
||||
Under the hood the position, size and alignment properties are style properties.
|
||||
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 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.
|
||||
- Style transitions can be used to make the coordinate changes smooth.
|
||||
|
||||
|
||||
Here are some examples to set an object's size using a style:
|
||||
|
|
@ -207,13 +207,13 @@ 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.
|
||||
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.
|
||||
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:
|
||||
```c
|
||||
|
|
@ -255,7 +255,7 @@ lv_obj_add_style(btn3, &style_normal, LV_STATE_DEFAULT);
|
|||
lv_obj_add_style(btn3, &style_pressed, LV_STATE_PRESSED);
|
||||
```
|
||||
|
||||
Translation is applied from the current position of the object.
|
||||
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.
|
||||
|
||||
|
|
@ -265,11 +265,11 @@ The translation actually moves the object. That means it makes the scrollbars an
|
|||
|
||||
|
||||
## Transformation
|
||||
Similarly to position, an object's size can be changed relative to the current size as well.
|
||||
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.
|
||||
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.
|
||||
|
||||
This code enlarges a button when it's pressed:
|
||||
```c
|
||||
|
|
@ -282,7 +282,7 @@ lv_obj_add_style(btn, &style_pressed, LV_STATE_PRESSED);
|
|||
```
|
||||
|
||||
### Min and Max size
|
||||
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.
|
||||
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
|
||||
static lv_style_t style_max_height;
|
||||
|
|
@ -306,9 +306,9 @@ lv_obj_add_style(obj, &style_max_height, LV_STATE_DEFAULT); //Limit the height t
|
|||
## 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.
|
||||
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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/display.md
|
||||
```
|
||||
# Displays
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
## 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`).
|
||||
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.
|
||||
|
|
@ -61,12 +61,12 @@ Screens can be deleted with `lv_obj_del(scr)`, but ensure that you do not delete
|
|||
|
||||
### 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.
|
||||
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`.
|
||||
|
||||
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:
|
||||
|
|
@ -92,7 +92,7 @@ The background color is a simple color to fill the display. It can be adjusted w
|
|||
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 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/drawing.md
|
||||
```
|
||||
# Drawing
|
||||
|
|
@ -8,17 +8,17 @@ With LVGL, you don't need to draw anything manually. Just create objects (like b
|
|||
|
||||
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 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).
|
||||
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.
|
||||
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.
|
||||
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ LVGL refreshes the screen in the following steps:
|
|||
- 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*.
|
||||
- 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.
|
||||
|
|
@ -50,27 +50,27 @@ The difference between buffering modes regarding the drawing mechanism is the fo
|
|||
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.
|
||||
*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.
|
||||
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.
|
||||
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.
|
||||
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.
|
||||
- `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 circular 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
|
||||
- `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 circular 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.
|
||||
|
|
@ -91,18 +91,18 @@ Every mask type has a related parameter structure to describe the mask's data. 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).
|
||||
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.
|
||||
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.
|
||||
`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.
|
||||
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.
|
||||
|
|
@ -114,7 +114,7 @@ Each of these events is described in detail below.
|
|||
|
||||
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_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
|
||||
|
||||
|
|
@ -131,7 +131,7 @@ Called when the main drawing is finished. You can draw anything here as well and
|
|||
|
||||
### 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.
|
||||
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.
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ Called when post drawing has finished. If masks were not removed in `LV_EVENT_DR
|
|||
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.
|
||||
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:
|
||||
|
|
@ -170,14 +170,14 @@ lv_draw_line_dsc_t * line_dsc; // A draw descriptor that can be modified to
|
|||
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 parameters
|
||||
// Other parameters
|
||||
lv_area_t * draw_area; // The area of the part being drawn
|
||||
const lv_point_t * p1; // A point calculated during drawing. E.g. a point of a chart or the center of an arc.
|
||||
const lv_point_t * p2; // A point calculated during drawing. E.g. a point of a chart.
|
||||
char text[16]; // A text calculated during drawing. Can be modified. E.g. tick labels on a chart axis.
|
||||
lv_coord_t radius; // E.g. the radius of an arc (not the corner radius).
|
||||
int32_t value; // A value calculated during drawing. E.g. Chart's tick line value.
|
||||
const void * sub_part_ptr; // A pointer the identifies something in the part. E.g. chart series.
|
||||
const void * 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`.
|
||||
|
|
@ -185,16 +185,16 @@ const void * sub_part_ptr; // A pointer the identifies something in the
|
|||
#### 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
|
||||
#### LV_EVENT_COVER_CHECK
|
||||
|
||||
This event is used to check whether an object fully covers an area or not.
|
||||
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
|
||||
|
|
@ -207,19 +207,19 @@ Here are some reasons why an object would be unable to fully cover an area:
|
|||
- 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
|
||||
- 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.
|
||||
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.
|
||||
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)`.
|
||||
You can simply set the required draw area with `lv_event_set_ext_draw_size(e, size)`.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/event.md
|
||||
```
|
||||
# Events
|
||||
|
|
@ -42,7 +42,7 @@ lv_obj_add_event_cb(obj, increment_on_click, LV_EVENT_CLICKED, &num1);
|
|||
lv_obj_add_event_cb(obj, increment_on_click, LV_EVENT_CLICKED, &num2);
|
||||
```
|
||||
|
||||
The events will be called in the order as they were added.
|
||||
The events will be called in the order as they were added.
|
||||
|
||||
|
||||
Other objects can use the same *event callback*.
|
||||
|
|
@ -50,7 +50,7 @@ Other objects can use the same *event callback*.
|
|||
|
||||
## Remove event(s) from an object
|
||||
|
||||
Events can be removed from an object with the `lv_obj_remove_event_cb(obj, event_cb)` function or `lv_obj_remove_event_dsc(obj, event_dsc)`. `event_dsc` is a pointer returned by `lv_obj_add_event_cb`.
|
||||
Events can be removed from an object with the `lv_obj_remove_event_cb(obj, event_cb)` function or `lv_obj_remove_event_dsc(obj, event_dsc)`. `event_dsc` is a pointer returned by `lv_obj_add_event_cb`.
|
||||
|
||||
## Event codes
|
||||
|
||||
|
|
@ -61,9 +61,9 @@ The event codes can be grouped into these categories:
|
|||
- Special events
|
||||
- Custom events
|
||||
|
||||
All objects (such as Buttons/Labels/Sliders etc.) regardless their type receive the *Input device*, *Drawing* and *Other* events.
|
||||
All objects (such as Buttons/Labels/Sliders etc.) regardless their type receive the *Input device*, *Drawing* and *Other* events.
|
||||
|
||||
However, the *Special events* are specific to a particular widget type. See the [widgets' documentation](/widgets/index) to learn when they are sent,
|
||||
However, the *Special events* are specific to a particular widget type. See the [widgets' documentation](/widgets/index) to learn when they are sent,
|
||||
|
||||
*Custom events* are added by the user and are never sent by LVGL.
|
||||
|
||||
|
|
@ -72,21 +72,21 @@ The following event codes exist:
|
|||
### Input device events
|
||||
- `LV_EVENT_PRESSED` An object has been pressed
|
||||
- `LV_EVENT_PRESSING` An object is being pressed (called continuously while pressing)
|
||||
- `LV_EVENT_PRESS_LOST` An object is still being pressed but slid cursor/finger off of the object
|
||||
- `LV_EVENT_PRESS_LOST` An object is still being pressed but slid cursor/finger off of the object
|
||||
- `LV_EVENT_SHORT_CLICKED` An object was pressed for a short period of time, then released. Not called if scrolled.
|
||||
- `LV_EVENT_LONG_PRESSED` An object has been pressed for at least the `long_press_time` specified in the input device driver. Not called if scrolled.
|
||||
- `LV_EVENT_LONG_PRESSED_REPEAT` Called after `long_press_time` in every `long_press_repeat_time` ms. Not called if scrolled.
|
||||
- `LV_EVENT_CLICKED` Called on release if an object did not scroll (regardless of long press)
|
||||
- `LV_EVENT_RELEASED` Called in every case when an object has been released
|
||||
- `LV_EVENT_SCROLL_BEGIN` Scrolling begins. The event parameter is `NULL` or an `lv_anim_t *` with a scroll animation descriptor that can be modified if required.
|
||||
- `LV_EVENT_SCROLL_BEGIN` Scrolling begins. The event parameter is `NULL` or an `lv_anim_t *` with a scroll animation descriptor that can be modified if required.
|
||||
- `LV_EVENT_SCROLL_END` Scrolling ends.
|
||||
- `LV_EVENT_SCROLL` An object was scrolled
|
||||
- `LV_EVENT_GESTURE` A gesture is detected. Get the gesture with `lv_indev_get_gesture_dir(lv_indev_get_act());`
|
||||
- `LV_EVENT_KEY` A key is sent to an object. Get the key with `lv_indev_get_key(lv_indev_get_act());`
|
||||
- `LV_EVENT_FOCUSED` An object is focused
|
||||
- `LV_EVENT_FOCUSED` An object is focused
|
||||
- `LV_EVENT_DEFOCUSED` An object is unfocused
|
||||
- `LV_EVENT_LEAVE` An object is unfocused but still selected
|
||||
- `LV_EVENT_HIT_TEST` Perform advanced hit-testing. Use `lv_hit_test_info_t * a = lv_event_get_hit_test_info(e)` and check if `a->point` can click the object or not. If not set `a->res = false`
|
||||
- `LV_EVENT_HIT_TEST` Perform advanced hit-testing. Use `lv_hit_test_info_t * a = lv_event_get_hit_test_info(e)` and check if `a->point` can click the object or not. If not set `a->res = false`
|
||||
|
||||
|
||||
### Drawing events
|
||||
|
|
@ -102,7 +102,7 @@ The following event codes exist:
|
|||
- `LV_EVENT_DRAW_PART_END` Finishing to draw a part. The event parameter is `lv_obj_draw_dsc_t *`. Learn more [here](/overview/drawing).
|
||||
|
||||
In `LV_EVENT_DRAW_...` events it's not allowed to adjust the widgets' properties. E.g. you can not call `lv_obj_set_width()`.
|
||||
In other words only `get` functions can be called.
|
||||
In other words only `get` functions can be called.
|
||||
|
||||
### Other events
|
||||
- `LV_EVENT_DELETE` Object is being deleted
|
||||
|
|
@ -123,11 +123,11 @@ In other words only `get` functions can be called.
|
|||
- `LV_EVENT_INSERT` Text is being inserted into the object. The event data is `char *` being inserted.
|
||||
- `LV_EVENT_REFRESH` Notify the object to refresh something on it (for the user)
|
||||
- `LV_EVENT_READY` A process has finished
|
||||
- `LV_EVENT_CANCEL` A process has been canceled
|
||||
- `LV_EVENT_CANCEL` A process has been canceled
|
||||
|
||||
|
||||
### Custom events
|
||||
Any custom event codes can be registered by `uint32_t MY_EVENT_1 = lv_event_register_id();`
|
||||
Any custom event codes can be registered by `uint32_t MY_EVENT_1 = lv_event_register_id();`
|
||||
|
||||
They can be sent to any object with `lv_event_send(obj, MY_EVENT_1, &some_data)`
|
||||
|
||||
|
|
@ -157,14 +157,14 @@ lv_event_send(mbox, LV_EVENT_VALUE_CHANGED, &btn_id);
|
|||
- `lv_event_get_current_target(e)` get the object to which an event was sent. I.e. the object whose event handler is being called.
|
||||
- `lv_event_get_target(e)` get the object that originally triggered the event (different from `lv_event_get_target` if [event bubbling](#event-bubbling) is enabled)
|
||||
- `lv_event_get_user_data(e)` get the pointer passed as the last parameter of `lv_obj_add_event_cb`.
|
||||
- `lv_event_get_param(e)` get the parameter passed as the last parameter of `lv_event_send`
|
||||
- `lv_event_get_param(e)` get the parameter passed as the last parameter of `lv_event_send`
|
||||
|
||||
|
||||
## Event bubbling
|
||||
|
||||
If `lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE)` is enabled all events will be sent to an object's parent too. If the parent also has `LV_OBJ_FLAG_EVENT_BUBBLE` enabled the event will be sent to its parent and so on.
|
||||
If `lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE)` is enabled all events will be sent to an object's parent too. If the parent also has `LV_OBJ_FLAG_EVENT_BUBBLE` enabled the event will be sent to its parent and so on.
|
||||
|
||||
The *target* parameter of the event is always the current target object, not the original object. To get the original target call `lv_event_get_original_target(e)` in the event handler.
|
||||
The *target* parameter of the event is always the current target object, not the original object. To get the original target call `lv_event_get_original_target(e)` in the event handler.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/file-system.md
|
||||
```
|
||||
# File system
|
||||
|
|
@ -54,7 +54,7 @@ void * (*open_cb)(lv_fs_drv_t * drv, const char * path, lv_fs_mode_t mode);
|
|||
|
||||
`path` is the path after the drive letter (e.g. "S:path/to/file.txt" -> "path/to/file.txt"). `mode` can be `LV_FS_MODE_WR` or `LV_FS_MODE_RD` to open for writes or reads.
|
||||
|
||||
The return value is a pointer to a *file object* that describes the opened file or `NULL` if there were any issues (e.g. the file wasn't found).
|
||||
The return value is a pointer to a *file object* that describes the opened file or `NULL` if there were any issues (e.g. the file wasn't found).
|
||||
The returned file object will be passed to other file system related callbacks. (see below)
|
||||
|
||||
### Other callbacks
|
||||
|
|
@ -63,7 +63,7 @@ The other callbacks are quite similar. For example `write_cb` looks like this:
|
|||
lv_fs_res_t (*write_cb)(lv_fs_drv_t * drv, void * file_p, const void * buf, uint32_t btw, uint32_t * bw);
|
||||
```
|
||||
|
||||
For `file_p`, LVGL passes the return value of `open_cb`, `buf` is the data to write, `btw` is the Bytes To Write, `bw` is the actually written bytes.
|
||||
For `file_p`, LVGL passes the return value of `open_cb`, `buf` is the data to write, `btw` is the Bytes To Write, `bw` is the actually written bytes.
|
||||
|
||||
For a template of these callbacks see [lv_fs_template.c](https://github.com/lvgl/lvgl/blob/master/examples/porting/lv_port_fs_template.c).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/font.md
|
||||
```
|
||||
# Fonts
|
||||
|
||||
In LVGL fonts are collections of bitmaps and other information required to render images of individual letters (glyph).
|
||||
In LVGL fonts are collections of bitmaps and other information required to render images of individual letters (glyph).
|
||||
A font is stored in a `lv_font_t` variable and can be set in a style's *text_font* field. For example:
|
||||
```c
|
||||
lv_style_set_text_font(&my_style, &lv_font_montserrat_28); /*Set a larger font*/
|
||||
|
|
@ -13,7 +13,7 @@ lv_style_set_text_font(&my_style, &lv_font_montserrat_28); /*Set a larger font*
|
|||
Fonts have a **bpp (bits per pixel)** property. It shows how many bits are used to describe a pixel in a font. The value stored for a pixel determines the pixel's opacity.
|
||||
This way, with higher *bpp*, the edges of the letter can be smoother. The possible *bpp* values are 1, 2, 4 and 8 (higher values mean better quality).
|
||||
|
||||
The *bpp* property also affects the amount of memory needed to store a font. For example, *bpp = 4* makes a font nearly four times larger compared to *bpp = 1*.
|
||||
The *bpp* property also affects the amount of memory needed to store a font. For example, *bpp = 4* makes a font nearly four times larger compared to *bpp = 1*.
|
||||
|
||||
## Unicode support
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symb
|
|||
- `LV_FONT_MONTSERRAT_48` 48 px font
|
||||
|
||||
### Special fonts
|
||||
- `LV_FONT_MONTSERRAT_12_SUBPX` Same as normal 12 px font but with [subpixel rendering](#subpixel-rendering)
|
||||
- `LV_FONT_MONTSERRAT_12_SUBPX` Same as normal 12 px font but with [subpixel rendering](#subpixel-rendering)
|
||||
- `LV_FONT_MONTSERRAT_28_COMPRESSED` Same as normal 28 px font but stored as a [compressed font](#compress-fonts) with 3 bpp
|
||||
- `LV_FONT_DEJAVU_16_PERSIAN_HEBREW` 16 px font with normal range + Hebrew, Arabic, Persian letters and all their forms
|
||||
- `LV_FONT_SIMSUN_16_CJK`16 px font with normal range plus 1000 of the most common CJK radicals
|
||||
|
|
@ -88,7 +88,7 @@ lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
|
|||
## Special features
|
||||
|
||||
### Bidirectional support
|
||||
Most languages use a Left-to-Right (LTR for short) writing direction, however some languages (such as Hebrew, Persian or Arabic) use Right-to-Left (RTL for short) direction.
|
||||
Most languages use a Left-to-Right (LTR for short) writing direction, however some languages (such as Hebrew, Persian or Arabic) use Right-to-Left (RTL for short) direction.
|
||||
|
||||
LVGL not only supports RTL texts but supports mixed (a.k.a. bidirectional, BiDi) text rendering too. Some examples:
|
||||
|
||||
|
|
@ -97,8 +97,8 @@ LVGL not only supports RTL texts but supports mixed (a.k.a. bidirectional, BiDi)
|
|||
BiDi support is enabled by `LV_USE_BIDI` in *lv_conf.h*
|
||||
|
||||
All texts have a base direction (LTR or RTL) which determines some rendering rules and the default alignment of the text (Left or Right).
|
||||
However, in LVGL, the base direction is not only applied to labels. It's a general property which can be set for every object.
|
||||
If not set then it will be inherited from the parent.
|
||||
However, in LVGL, the base direction is not only applied to labels. It's a general property which can be set for every object.
|
||||
If not set then it will be inherited from the parent.
|
||||
This means it's enough to set the base direction of a screen and every object will inherit it.
|
||||
|
||||
The default base direction for screens can be set by `LV_BIDI_BASE_DIR_DEF` in *lv_conf.h* and other objects inherit the base direction from their parent.
|
||||
|
|
@ -119,7 +119,7 @@ This list summarizes the effect of RTL base direction on objects:
|
|||
- The texts in `lv_table`, `lv_btnmatrix`, `lv_keyboard`, `lv_tabview`, `lv_dropdown`, `lv_roller` are "BiDi processed" to be displayed correctly
|
||||
|
||||
### Arabic and Persian support
|
||||
There are some special rules to display Arabic and Persian characters: the *form* of a character depends on its position in the text.
|
||||
There are some special rules to display Arabic and Persian characters: the *form* of a character depends on its position in the text.
|
||||
A different form of the same letter needs to be used when it is isolated, at start, middle or end positions. Besides these, some conjunction rules should also be taken into account.
|
||||
|
||||
LVGL supports these rules if `LV_USE_ARABIC_PERSIAN_CHARS` is enabled.
|
||||
|
|
@ -133,21 +133,21 @@ However, there are some limitations:
|
|||
|
||||
Subpixel rendering allows for tripling the horizontal resolution by rendering anti-aliased edges on Red, Green and Blue channels instead of at pixel level granularity. This takes advantage of the position of physical color channels of each pixel, resulting in higher quality letter anti-aliasing. Learn more [here](https://en.wikipedia.org/wiki/Subpixel_rendering).
|
||||
|
||||
For subpixel rendering, the fonts need to be generated with special settings:
|
||||
For subpixel rendering, the fonts need to be generated with special settings:
|
||||
- In the online converter tick the `Subpixel` box
|
||||
- In the command line tool use `--lcd` flag. Note that the generated font needs about three times more memory.
|
||||
|
||||
Subpixel rendering works only if the color channels of the pixels have a horizontal layout. That is the R, G, B channels are next to each other and not above each other.
|
||||
Subpixel rendering works only if the color channels of the pixels have a horizontal layout. That is the R, G, B channels are next to each other and not above each other.
|
||||
The order of color channels also needs to match with the library settings. By default, LVGL assumes `RGB` order, however this can be swapped by setting `LV_SUBPX_BGR 1` in *lv_conf.h*.
|
||||
|
||||
### Compressed fonts
|
||||
The bitmaps of fonts can be compressed by
|
||||
The bitmaps of fonts can be compressed by
|
||||
- ticking the `Compressed` check box in the online converter
|
||||
- not passing the `--no-compress` flag to the offline converter (compression is applied by default)
|
||||
- not passing the `--no-compress` flag to the offline converter (compression is applied by default)
|
||||
|
||||
Compression is more effective with larger fonts and higher bpp. However, it's about 30% slower to render compressed fonts.
|
||||
Therefore, it's recommended to compress only the largest fonts of a user interface, because
|
||||
- they need the most memory
|
||||
- they need the most memory
|
||||
- they can be compressed better
|
||||
- and probably they are used less frequently then the medium-sized fonts, so the performance cost is smaller.
|
||||
|
||||
|
|
@ -164,10 +164,10 @@ To declare a font in a file, use `LV_FONT_DECLARE(my_font_name)`.
|
|||
To make fonts globally available (like the built-in fonts), add them to `LV_FONT_CUSTOM_DECLARE` in *lv_conf.h*.
|
||||
|
||||
## Add new symbols
|
||||
The built-in symbols are created from the [FontAwesome](https://fontawesome.com/) font.
|
||||
The built-in symbols are created from the [FontAwesome](https://fontawesome.com/) font.
|
||||
|
||||
1. Search for a symbol on [https://fontawesome.com](https://fontawesome.com). For example the [USB symbol](https://fontawesome.com/icons/usb?style=brands). Copy its Unicode ID which is `0xf287` in this case.
|
||||
2. Open the [Online font converter](https://lvgl.io/tools/fontconverter). Add [FontAwesome.woff](https://lvgl.io/assets/others/FontAwesome5-Solid+Brands+Regular.woff). .
|
||||
2. Open the [Online font converter](https://lvgl.io/tools/fontconverter). Add [FontAwesome.woff](https://lvgl.io/assets/others/FontAwesome5-Solid+Brands+Regular.woff). .
|
||||
3. Set the parameters such as Name, Size, BPP. You'll use this name to declare and use the font in your code.
|
||||
4. Add the Unicode ID of the symbol to the range field. E.g.` 0xf287` for the USB symbol. More symbols can be enumerated with `,`.
|
||||
5. Convert the font and copy the generated source code to your project. Make sure to compile the .c file of your font.
|
||||
|
|
@ -178,10 +178,10 @@ The built-in symbols are created from the [FontAwesome](https://fontawesome.com/
|
|||
2. Create a `define` string from the UTF8 values: `#define MY_USB_SYMBOL "\xEF\x8A\x87"`
|
||||
3. Create a label and set the text. Eg. `lv_label_set_text(label, MY_USB_SYMBOL)`
|
||||
|
||||
Note - `lv_label_set_text(label, MY_USB_SYMBOL)` searches for this symbol in the font defined in `style.text.font` properties. To use the symbol you may need to change it. Eg ` style.text.font = my_font_name`
|
||||
Note - `lv_label_set_text(label, MY_USB_SYMBOL)` searches for this symbol in the font defined in `style.text.font` properties. To use the symbol you may need to change it. Eg ` style.text.font = my_font_name`
|
||||
|
||||
## Load a font at run-time
|
||||
`lv_font_load` can be used to load a font from a file. The font needs to have a special binary format. (Not TTF or WOFF).
|
||||
`lv_font_load` can be used to load a font from a file. The font needs to have a special binary format. (Not TTF or WOFF).
|
||||
Use [lv_font_conv](https://github.com/lvgl/lv_font_conv/) with the `--format bin` option to generate an LVGL compatible font file.
|
||||
|
||||
Note that to load a font [LVGL's filesystem](/overview/file-system) needs to be enabled and a driver must be added.
|
||||
|
|
@ -254,7 +254,7 @@ const uint8_t * my_get_glyph_bitmap_cb(const lv_font_t * font, uint32_t unicode_
|
|||
|
||||
## Use font fallback
|
||||
|
||||
You can specify `fallback` in `lv_font_t` to provide fallback to the font. When the font
|
||||
You can specify `fallback` in `lv_font_t` to provide fallback to the font. When the font
|
||||
fails to find glyph to a letter, it will try to let font from `fallback` to handle.
|
||||
|
||||
`fallback` can be chained, so it will try to solve until there is no `fallback` set.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/image.md
|
||||
```
|
||||
# Images
|
||||
|
|
@ -267,8 +267,8 @@ To indicate that the *line read* function should be used, set `dsc->img_data = N
|
|||
|
||||
LVGL will use registered image decoders automatically if you try and draw a raw image (i.e. using the `lv_img` object) but you can use them manually too. Create an `lv_img_decoder_dsc_t` variable to describe the decoding session and call `lv_img_decoder_open()`.
|
||||
|
||||
The `color` parameter is used only with `LV_IMG_CF_ALPHA_1/2/4/8BIT` images to tell color of the image.
|
||||
`frame_id` can be used if the image to open is an animation.
|
||||
The `color` parameter is used only with `LV_IMG_CF_ALPHA_1/2/4/8BIT` images to tell color of the image.
|
||||
`frame_id` can be used if the image to open is an animation.
|
||||
|
||||
|
||||
```c
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/indev.md
|
||||
```
|
||||
# Input devices
|
||||
|
|
@ -124,9 +124,9 @@ Don't forget to assign one or more input devices to the default group with ` lv_
|
|||
|
||||
### Styling
|
||||
|
||||
If an object is focused either by clicking it via touchpad or focused via an encoder or keypad it goes to the `LV_STATE_FOCUSED` state. Hence, focused styles will be applied to it.
|
||||
If an object is focused either by clicking it via touchpad or focused via an encoder or keypad it goes to the `LV_STATE_FOCUSED` state. Hence, focused styles will be applied to it.
|
||||
|
||||
If an object switches to edit mode it enters the `LV_STATE_FOCUSED | LV_STATE_EDITED` states so these style properties will be shown.
|
||||
If an object switches to edit mode it enters the `LV_STATE_FOCUSED | LV_STATE_EDITED` states so these style properties will be shown.
|
||||
|
||||
For a more detailed description read the [Style](https://docs.lvgl.io/v7/en/html/overview/style.html) section.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/index.md
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/layer.md
|
||||
```
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ By default, LVGL draws new objects on top of old objects.
|
|||
For example, assume we add a button to a parent object named button1 and then another button named button2. Then button1 (along with its child object(s)) will be in the background and can be covered by button2 and its children.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```c
|
||||
/*Create a screen*/
|
||||
|
|
@ -42,7 +42,7 @@ lv_obj_del(label2);
|
|||
|
||||
There are four explicit ways to bring an object to the foreground:
|
||||
- Use `lv_obj_move_foreground(obj)` to bring an object to the foreground. Similarly, use `lv_obj_move_background(obj)` to move it to the background.
|
||||
- Use `lv_obj_move_up(obj)` to move an object one position up in the hierarchy, Similarly, use `lv_obj_move_down(obj)` to move an object one position down in the hierarchy.
|
||||
- Use `lv_obj_move_up(obj)` to move an object one position up in the hierarchy, Similarly, use `lv_obj_move_down(obj)` to move an object one position down in the hierarchy.
|
||||
- Use `lv_obj_swap(obj1, obj2)` to swap the relative layer position of two objects.
|
||||
- When `lv_obj_set_parent(obj, new_parent)` is used, `obj` will be on the foreground of the `new_parent`.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/new_widget.md
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/object.md
|
||||
```
|
||||
# Objects
|
||||
|
|
@ -73,7 +73,7 @@ lv_obj_set_pos(obj1, 10, 10); /*Set the position of the new
|
|||
|
||||
Modify the position of the parent:
|
||||
|
||||
|
||||
|
||||
|
||||
```c
|
||||
lv_obj_set_pos(parent, 50, 50); /*Move the parent. The child will move with it.*/
|
||||
|
|
@ -85,7 +85,7 @@ lv_obj_set_pos(parent, 50, 50); /*Move the parent. The child will move with it.*
|
|||
|
||||
If a child is partially or fully outside its parent then the parts outside will not be visible.
|
||||
|
||||
|
||||
|
||||
|
||||
```c
|
||||
lv_obj_set_x(obj1, -30); /*Move the child a little bit off the parent*/
|
||||
|
|
@ -101,7 +101,7 @@ In LVGL, objects can be created and deleted dynamically at run time. It means on
|
|||
This allows for the creation of a screen just when a button is clicked to open it, and for deletion of screens when a new screen is loaded.
|
||||
|
||||
UIs can be created based on the current environment of the device. For example one can create meters, charts, bars and sliders based on the currently attached sensors.
|
||||
|
||||
|
||||
Every widget has its own **create** function with a prototype like this:
|
||||
```c
|
||||
lv_obj_t * lv_<widget>_create(lv_obj_t * parent, <other parameters if any>);
|
||||
|
|
@ -124,7 +124,7 @@ This is useful e.g. if you want to delete the parent of an object in the child's
|
|||
|
||||
You can remove all the children of an object (but not the object itself) using `lv_obj_clean(obj)`.
|
||||
|
||||
You can use `lv_obj_del_delayed(obj, 1000)` to delete an object after some time. The delay is expressed in milliseconds.
|
||||
You can use `lv_obj_del_delayed(obj, 1000)` to delete an object after some time. The delay is expressed in milliseconds.
|
||||
|
||||
|
||||
## Screens
|
||||
|
|
@ -140,7 +140,7 @@ Screens can be created with any object type. For example, a [Base object](/widge
|
|||
### Get the active screen
|
||||
There is always an active screen on each display. By default, the library creates and loads a "Base object" as a screen for each display.
|
||||
|
||||
To get the currently active screen use the `lv_scr_act()` function.
|
||||
To get the currently active screen use the `lv_scr_act()` function.
|
||||
|
||||
### Load screens
|
||||
|
||||
|
|
@ -182,7 +182,7 @@ Visit [Multi-display support](/overview/display) to learn more.
|
|||
|
||||
## Parts
|
||||
|
||||
The widgets are built from multiple parts. For example a [Base object](/widgets/obj) uses the main and scrollbar parts but a [Slider](/widgets/core/slider) uses the main, indicator and knob parts.
|
||||
The widgets are built from multiple parts. For example a [Base object](/widgets/obj) uses the main and scrollbar parts but a [Slider](/widgets/core/slider) uses the main, indicator and knob parts.
|
||||
Parts are similar to *pseudo-elements* in CSS.
|
||||
|
||||
The following predefined parts exist in LVGL:
|
||||
|
|
@ -196,15 +196,15 @@ The following predefined parts exist in LVGL:
|
|||
- `LV_PART_CURSOR` Mark a specific place e.g. text area's or chart's cursor
|
||||
- `LV_PART_CUSTOM_FIRST` Custom parts can be added from here.
|
||||
|
||||
The main purpose of parts is to allow styling the "components" of the widgets.
|
||||
The main purpose of parts is to allow styling the "components" of the widgets.
|
||||
They are described in more detail in the [Style overview](/overview/style) section.
|
||||
|
||||
## States
|
||||
The object 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_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
|
||||
|
|
@ -215,8 +215,8 @@ The object can be in a combination of the following states:
|
|||
- `LV_STATE_USER_3` Custom state
|
||||
- `LV_STATE_USER_4` Custom state
|
||||
|
||||
The states are usually automatically changed by the library as the user interacts with an object (presses, releases, focuses, etc.).
|
||||
However, the states can be changed manually too.
|
||||
The states are usually automatically changed by the library as the user interacts with an object (presses, releases, focuses, etc.).
|
||||
However, the states can be changed manually too.
|
||||
To set or clear given state (but leave the other states untouched) use `lv_obj_add/clear_state(obj, LV_STATE_...)`
|
||||
In both cases OR-ed state values can be used as well. E.g. `lv_obj_add_state(obj, part, LV_STATE_PRESSED | LV_PRESSED_CHECKED)`.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/scroll.md
|
||||
```
|
||||
# Scroll
|
||||
|
|
@ -12,7 +12,7 @@ Any object can be scrollable including `lv_obj_t`, `lv_img`, `lv_btn`, `lv_meter
|
|||
The object can either be scrolled horizontally or vertically in one stroke; diagonal scrolling is not possible.
|
||||
|
||||
### Scrollbar
|
||||
|
||||
|
||||
#### Mode
|
||||
Scrollbars are displayed according to a configured `mode`. The following `mode`s exist:
|
||||
- `LV_SCROLLBAR_MODE_OFF` Never show the scrollbars
|
||||
|
|
@ -47,11 +47,11 @@ lv_style_set_bg_color(&style_blue, lv_color_blue());
|
|||
lv_obj_add_style(obj, &style_blue, LV_STATE_SCROLLED | LV_PART_SCROLLBAR);
|
||||
```
|
||||
|
||||
If the base direction of the `LV_PART_SCROLLBAR` is RTL (`LV_BASE_DIR_RTL`) the vertical scrollbar will be placed on the left.
|
||||
If the base direction of the `LV_PART_SCROLLBAR` is RTL (`LV_BASE_DIR_RTL`) the vertical scrollbar will be placed on the left.
|
||||
Note that, the `base_dir` style property is inherited. Therefore, it can be set directly on the `LV_PART_SCROLLBAR` part of an object
|
||||
or on the object's or any parent's main part to make a scrollbar inherit the base direction.
|
||||
or on the object's or any parent's main part to make a scrollbar inherit the base direction.
|
||||
|
||||
`pad_left/right/top/bottom` sets the spacing around the scrollbars and `width` sets the scrollbar's width.
|
||||
`pad_left/right/top/bottom` sets the spacing around the scrollbars and `width` sets the scrollbar's width.
|
||||
|
||||
### Events
|
||||
The following events are related to scrolling:
|
||||
|
|
@ -95,15 +95,15 @@ The propagation on scrolling is called "scroll chaining" and it can be enabled/d
|
|||
If chaining is disabled the propagation stops on the object and the parent(s) won't be scrolled.
|
||||
|
||||
### Scroll momentum
|
||||
When the user scrolls an object and releases it, LVGL can emulate inertial momentum for the scrolling. It's like the object was thrown and scrolling slows down smoothly.
|
||||
When the user scrolls an object and releases it, LVGL can emulate inertial momentum for the scrolling. It's like the object was thrown and scrolling slows down smoothly.
|
||||
|
||||
The scroll momentum can be enabled/disabled with the `LV_OBJ_FLAG_SCROLL_MOMENTUM` flag.
|
||||
The scroll momentum can be enabled/disabled with the `LV_OBJ_FLAG_SCROLL_MOMENTUM` flag.
|
||||
|
||||
### Elastic scroll
|
||||
Normally an object can't be scrolled past the extremeties of its content. That is the top side of the content can't be below the top side of the object.
|
||||
Normally an object can't be scrolled past the extremeties of its content. That is the top side of the content can't be below the top side of the object.
|
||||
|
||||
However, with `LV_OBJ_FLAG_SCROLL_ELASTIC` a fancy effect is added when the user "over-scrolls" the content. The scrolling slows down, and the content can be scrolled inside the object.
|
||||
When the object is released the content scrolled in it will be animated back to the valid position.
|
||||
However, with `LV_OBJ_FLAG_SCROLL_ELASTIC` a fancy effect is added when the user "over-scrolls" the content. The scrolling slows down, and the content can be scrolled inside the object.
|
||||
When the object is released the content scrolled in it will be animated back to the valid position.
|
||||
|
||||
### Snapping
|
||||
The children of an object can be snapped according to specific rules when scrolling ends. Children can be made snappable individually with the `LV_OBJ_FLAG_SNAPPABLE` flag.
|
||||
|
|
@ -113,26 +113,26 @@ An object can align snapped children in four ways:
|
|||
- `LV_SCROLL_SNAP_START` Align the children to the left/top side of a scrolled object
|
||||
- `LV_SCROLL_SNAP_END` Align the children to the right/bottom side of a scrolled object
|
||||
- `LV_SCROLL_SNAP_CENTER` Align the children to the center of a scrolled object
|
||||
|
||||
|
||||
Snap alignment is set with `lv_obj_set_scroll_snap_x/y(obj, LV_SCROLL_SNAP_...)`:
|
||||
|
||||
|
||||
Under the hood the following happens:
|
||||
1. User scrolls an object and releases the screen
|
||||
2. LVGL calculates where the scroll would end considering scroll momentum
|
||||
3. LVGL finds the nearest scroll point
|
||||
4. LVGL scrolls to the snap point with an animation
|
||||
|
||||
|
||||
### Scroll one
|
||||
The "scroll one" feature tells LVGL to allow scrolling only one snappable child at a time.
|
||||
The "scroll one" feature tells LVGL to allow scrolling only one snappable child at a time.
|
||||
This requires making the children snappable and setting a scroll snap alignment different from `LV_SCROLL_SNAP_NONE`.
|
||||
|
||||
This feature can be enabled by the `LV_OBJ_FLAG_SCROLL_ONE` flag.
|
||||
|
||||
### Scroll on focus
|
||||
Imagine that there a lot of objects in a group that are on a scrollable object. Pressing the "Tab" button focuses the next object but it might be outside the visible area of the scrollable object.
|
||||
If the "scroll on focus" feature is enabled LVGL will automatically scroll objects to bring their children into view.
|
||||
The scrolling happens recursively therefore even nested scrollable objects are handled properly.
|
||||
The object will be scrolled into view even if it's on a different page of a tabview.
|
||||
Imagine that there a lot of objects in a group that are on a scrollable object. Pressing the "Tab" button focuses the next object but it might be outside the visible area of the scrollable object.
|
||||
If the "scroll on focus" feature is enabled LVGL will automatically scroll objects to bring their children into view.
|
||||
The scrolling happens recursively therefore even nested scrollable objects are handled properly.
|
||||
The object will be scrolled into view even if it's on a different page of a tabview.
|
||||
|
||||
## Scroll manually
|
||||
The following API functions allow manual scrolling of objects:
|
||||
|
|
@ -168,8 +168,8 @@ Scrool coordinates can be retrieve from differents axes with these functions:
|
|||
|
||||
Self size is a property of an object. Normally, the user shouldn't use this parameter but if a custom widget is created it might be useful.
|
||||
|
||||
In short, self size establishes the size of an object's content. To understand it better take the example of a table.
|
||||
Let's say it has 10 rows each with 50 px height. So the total height of the content is 500 px. In other words the "self height" is 500 px.
|
||||
In short, self size establishes the size of an object's content. To understand it better take the example of a table.
|
||||
Let's say it has 10 rows each with 50 px height. So the total height of the content is 500 px. In other words the "self height" is 500 px.
|
||||
If the user sets only 200 px height for the table LVGL will see that the self size is larger and make the table scrollable.
|
||||
|
||||
This means not only the children can make an object scrollable but a larger self size will too.
|
||||
|
|
@ -178,12 +178,12 @@ LVGL uses the `LV_EVENT_GET_SELF_SIZE` event to get the self size of an object.
|
|||
```c
|
||||
if(event_code == LV_EVENT_GET_SELF_SIZE) {
|
||||
lv_point_t * p = lv_event_get_param(e);
|
||||
|
||||
|
||||
//If x or y < 0 then it doesn't neesd to be calculated now
|
||||
if(p->x >= 0) {
|
||||
p->x = 200; //Set or calculate the self width
|
||||
}
|
||||
|
||||
|
||||
if(p->y >= 0) {
|
||||
p->y = 50; //Set or calculate the self height
|
||||
}
|
||||
|
|
|
|||
|
|
@ -367,7 +367,7 @@ Sets whether the border should be drawn before or after the children are drawn.
|
|||
Properties to describe the outline. It's like a border but drawn outside of the rectangles.
|
||||
|
||||
### outline_width
|
||||
Set the width of the outline in pixels.
|
||||
Set the width of the outline in pixels.
|
||||
<ul>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
|
||||
|
|
@ -415,7 +415,7 @@ Set the width of the shadow in pixels. The value should be >= 0.
|
|||
</ul>
|
||||
|
||||
### shadow_ofs_x
|
||||
Set an offset on the shadow in pixels in X direction.
|
||||
Set an offset on the shadow in pixels in X direction.
|
||||
<ul>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
|
||||
|
|
@ -424,7 +424,7 @@ Set an offset on the shadow in pixels in X direction.
|
|||
</ul>
|
||||
|
||||
### shadow_ofs_y
|
||||
Set an offset on the shadow in pixels in Y direction.
|
||||
Set an offset on the shadow in pixels in Y direction.
|
||||
<ul>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
|
||||
|
|
@ -520,7 +520,7 @@ Set the gap between dashes in pixel. Note that dash works only on horizontal and
|
|||
</ul>
|
||||
|
||||
### line_rounded
|
||||
Make the end points of the lines rounded. `true`: rounded, `false`: perpendicular line ending
|
||||
Make the end points of the lines rounded. `true`: rounded, `false`: perpendicular line ending
|
||||
<ul>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
|
||||
|
|
@ -559,7 +559,7 @@ Set the width (thickness) of the arcs in pixel.
|
|||
</ul>
|
||||
|
||||
### arc_rounded
|
||||
Make the end points of the arcs rounded. `true`: rounded, `false`: perpendicular line ending
|
||||
Make the end points of the arcs rounded. `true`: rounded, `false`: perpendicular line ending
|
||||
<ul>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
|
||||
|
|
@ -616,7 +616,7 @@ Set the opacity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully
|
|||
</ul>
|
||||
|
||||
### text_font
|
||||
Set the font of the text (a pointer `lv_font_t *`).
|
||||
Set the font of the text (a pointer `lv_font_t *`).
|
||||
<ul>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_FONT_DEFAULT`</li>
|
||||
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/style.md
|
||||
```
|
||||
# Styles
|
||||
|
||||
*Styles* are used to set the appearance of objects. Styles in lvgl are heavily inspired by CSS. The concept in a nutshell is as follows:
|
||||
- A style is an `lv_style_t` variable which can hold properties like border width, text color and so on. It's similar to a `class` in CSS.
|
||||
- A style is an `lv_style_t` variable which can hold properties like border width, text color and so on. It's similar to a `class` in CSS.
|
||||
- Styles can be assigned to objects to change their appearance. Upon assignment, the target part (*pseudo-element* in CSS) and target state (*pseudo class*) can be specified.
|
||||
For example one can add `style_blue` to the knob of a slider when it's in pressed state.
|
||||
- The same style can be used by any number of objects.
|
||||
- Styles can be cascaded which means multiple styles may be assigned to an object and each style can have different properties.
|
||||
- Styles can be cascaded which means multiple styles may be assigned to an object and each style can have different properties.
|
||||
Therefore, not all properties have to be specified in a style. LVGL will search for a property until a style defines it or use a default if it's not specified by any of the styles.
|
||||
For example `style_btn` can result in a default gray button and `style_btn_red` can add only a `background-color=red` to overwrite the background color.
|
||||
- The most recently added style has higher precedence. This means if a property is specified in two styles the newest style in the object will be used.
|
||||
- Some properties (e.g. text color) can be inherited from a parent(s) if it's not specified in an object.
|
||||
- Some properties (e.g. text color) can be inherited from a parent(s) if it's not specified in an object.
|
||||
- Objects can also have local styles with higher precedence than "normal" styles.
|
||||
- Unlike CSS (where pseudo-classes describe different states, e.g. `:focus`), in LVGL a property is assigned to a given state.
|
||||
- Unlike CSS (where pseudo-classes describe different states, e.g. `:focus`), in LVGL a property is assigned to a given state.
|
||||
- Transitions can be applied when the object changes state.
|
||||
|
||||
|
||||
|
|
@ -23,8 +23,8 @@ For example `style_btn` can result in a default gray button and `style_btn_red`
|
|||
The objects can be in the combination of the following states:
|
||||
- `LV_STATE_DEFAULT` (0x0000) Normal, released state
|
||||
- `LV_STATE_CHECKED` (0x0001) Toggled or checked state
|
||||
- `LV_STATE_FOCUSED` (0x0002) Focused via keypad or encoder or clicked via touchpad/mouse
|
||||
- `LV_STATE_FOCUS_KEY` (0x0004) Focused via keypad or encoder but not via touchpad/mouse
|
||||
- `LV_STATE_FOCUSED` (0x0002) Focused via keypad or encoder or clicked via touchpad/mouse
|
||||
- `LV_STATE_FOCUS_KEY` (0x0004) Focused via keypad or encoder but not via touchpad/mouse
|
||||
- `LV_STATE_EDITED` (0x0008) Edit by an encoder
|
||||
- `LV_STATE_HOVERED` (0x0010) Hovered by mouse (not supported now)
|
||||
- `LV_STATE_PRESSED` (0x0020) Being pressed
|
||||
|
|
@ -34,15 +34,15 @@ The objects can be in the combination of the following states:
|
|||
- `LV_STATE_USER_2` (0x2000) Custom state
|
||||
- `LV_STATE_USER_3` (0x4000) Custom state
|
||||
- `LV_STATE_USER_4` (0x8000) Custom state
|
||||
|
||||
An object can be in a combination of states such as being focused and pressed at the same time. This is represented as `LV_STATE_FOCUSED | LV_STATE_PRESSED`.
|
||||
|
||||
A style can be added to any state or state combination.
|
||||
For example, setting a different background color for the default and pressed states.
|
||||
An object can be in a combination of states such as being focused and pressed at the same time. This is represented as `LV_STATE_FOCUSED | LV_STATE_PRESSED`.
|
||||
|
||||
A style can be added to any state or state combination.
|
||||
For example, setting a different background color for the default and pressed states.
|
||||
If a property is not defined in a state the best matching state's property will be used. Typically this means the property with `LV_STATE_DEFAULT` is used.˛
|
||||
If the property is not set even for the default state the default value will be used. (See later)
|
||||
|
||||
But what does the "best matching state's property" really mean?
|
||||
But what does the "best matching state's property" really mean?
|
||||
States have a precedence which is shown by their value (see in the above list). A higher value means higher precedence.
|
||||
To determine which state's property to use let's take an example. Imagine the background color is defined like this:
|
||||
- `LV_STATE_DEFAULT`: white
|
||||
|
|
@ -50,47 +50,47 @@ To determine which state's property to use let's take an example. Imagine the ba
|
|||
- `LV_STATE_FOCUSED`: red
|
||||
|
||||
1. Initially the object is in the default state, so it's a simple case: the property is perfectly defined in the object's current state as white.
|
||||
2. When the object is pressed there are 2 related properties: default with white (default is related to every state) and pressed with gray.
|
||||
2. When the object is pressed there are 2 related properties: default with white (default is related to every state) and pressed with gray.
|
||||
The pressed state has 0x0020 precedence which is higher than the default state's 0x0000 precedence, so gray color will be used.
|
||||
3. When the object is focused the same thing happens as in pressed state and red color will be used. (Focused state has higher precedence than default state).
|
||||
4. When the object is focused and pressed both gray and red would work, but the pressed state has higher precedence than focused so gray color will be used.
|
||||
5. It's possible to set e.g. rose color for `LV_STATE_PRESSED | LV_STATE_FOCUSED`.
|
||||
5. It's possible to set e.g. rose color for `LV_STATE_PRESSED | LV_STATE_FOCUSED`.
|
||||
In this case, this combined state has 0x0020 + 0x0002 = 0x0022 precedence, which is higher than the pressed state's precedence so rose color would be used.
|
||||
6. When the object is in the checked state there is no property to set the background color for this state. So for lack of a better option, the object remains white from the default state's property.
|
||||
|
||||
Some practical notes:
|
||||
- The precedence (value) of states is quite intuitive, and it's something the user would expect naturally. E.g. if an object is focused the user will still want to see if it's pressed, therefore the pressed state has a higher precedence.
|
||||
- The precedence (value) of states is quite intuitive, and it's something the user would expect naturally. E.g. if an object is focused the user will still want to see if it's pressed, therefore the pressed state has a higher precedence.
|
||||
If the focused state had a higher precedence it would overwrite the pressed color.
|
||||
- If you want to set a property for all states (e.g. red background color) just set it for the default state. If the object can't find a property for its current state it will fall back to the default state's property.
|
||||
- Use ORed states to describe the properties for complex cases. (E.g. pressed + checked + focused)
|
||||
- It might be a good idea to use different style elements for different states.
|
||||
For example, finding background colors for released, pressed, checked + pressed, focused, focused + pressed, focused + pressed + checked, etc. states is quite difficult.
|
||||
Instead, for example, use the background color for pressed and checked states and indicate the focused state with a different border color.
|
||||
- It might be a good idea to use different style elements for different states.
|
||||
For example, finding background colors for released, pressed, checked + pressed, focused, focused + pressed, focused + pressed + checked, etc. states is quite difficult.
|
||||
Instead, for example, use the background color for pressed and checked states and indicate the focused state with a different border color.
|
||||
|
||||
## Cascading styles
|
||||
It's not required to set all the properties in one style. It's possible to add more styles to an object and have the latter added style modify or extend appearance.
|
||||
For example, create a general gray button style and create a new one for red buttons where only the new background color is set.
|
||||
For example, create a general gray button style and create a new one for red buttons where only the new background color is set.
|
||||
|
||||
This is much like in CSS when used classes are listed like `<div class=".btn .btn-red">`.
|
||||
|
||||
Styles added later have precedence over ones set earlier. So in the gray/red button example above, the normal button style should be added first and the red style second.
|
||||
However, the precedence of the states are still taken into account.
|
||||
Styles added later have precedence over ones set earlier. So in the gray/red button example above, the normal button style should be added first and the red style second.
|
||||
However, the precedence of the states are still taken into account.
|
||||
So let's examine the following case:
|
||||
- the basic button style defines dark-gray color for the default state and light-gray color for the pressed state
|
||||
- the red button style defines the background color as red only in the default state
|
||||
|
||||
In this case, when the button is released (it's in default state) it will be red because a perfect match is found in the most recently added style (red).
|
||||
When the button is pressed the light-gray color is a better match because it describes the current state perfectly, so the button will be light-gray.
|
||||
In this case, when the button is released (it's in default state) it will be red because a perfect match is found in the most recently added style (red).
|
||||
When the button is pressed the light-gray color is a better match because it describes the current state perfectly, so the button will be light-gray.
|
||||
|
||||
## Inheritance
|
||||
Some properties (typically those related to text) can be inherited from the parent object's styles.
|
||||
Inheritance is applied only if the given property is not set in the object's styles (even in default state).
|
||||
In this case, if the property is inheritable, the property's value will be searched in the parents until an object specifies a value for the property. The parents will use their own state to determine the value.
|
||||
## Inheritance
|
||||
Some properties (typically those related to text) can be inherited from the parent object's styles.
|
||||
Inheritance is applied only if the given property is not set in the object's styles (even in default state).
|
||||
In this case, if the property is inheritable, the property's value will be searched in the parents until an object specifies a value for the property. The parents will use their own state to determine the value.
|
||||
So if a button is pressed, and the text color comes from here, the pressed text color will be used.
|
||||
|
||||
|
||||
## Parts
|
||||
Objects can be composed of *parts* which may each have their own styles.
|
||||
Objects can be composed of *parts* which may each have their own styles.
|
||||
|
||||
The following predefined parts exist in LVGL:
|
||||
- `LV_PART_MAIN` A background like rectangle
|
||||
|
|
@ -113,12 +113,12 @@ This means all three parts of the slider can have their own styles. See later ho
|
|||
|
||||
## Initialize styles and set/get properties
|
||||
|
||||
Styles are stored in `lv_style_t` variables. Style variables should be `static`, global or dynamically allocated.
|
||||
In other words they cannot be local variables in functions which are destroyed when the function exits.
|
||||
Before using a style it should be initialized with `lv_style_init(&my_style)`.
|
||||
Styles are stored in `lv_style_t` variables. Style variables should be `static`, global or dynamically allocated.
|
||||
In other words they cannot be local variables in functions which are destroyed when the function exits.
|
||||
Before using a style it should be initialized with `lv_style_init(&my_style)`.
|
||||
After initializing a style, properties can be added or changed.
|
||||
|
||||
Property set functions looks like this: `lv_style_set_<property_name>(&style, <value>);` For example:
|
||||
Property set functions looks like this: `lv_style_set_<property_name>(&style, <value>);` For example:
|
||||
```c
|
||||
static lv_style_t style_btn;
|
||||
lv_style_init(&style_btn);
|
||||
|
|
@ -165,7 +165,7 @@ const lv_style_const_prop_t style1_props[] = {
|
|||
LV_STYLE_CONST_HEIGHT(50),
|
||||
LV_STYLE_PROP_INV,
|
||||
};
|
||||
|
||||
|
||||
LV_STYLE_CONST_INIT(style1, style1_props);
|
||||
```
|
||||
|
||||
|
|
@ -181,10 +181,10 @@ To add a style to an object use `lv_obj_add_style(obj, &style, <selector>)`. `<s
|
|||
- `LV_STATE_PRESSED`: The main part in pressed state. `LV_PART_MAIN` can be omitted
|
||||
- `LV_PART_SCROLLBAR`: The scrollbar part in the default state. `LV_STATE_DEFAULT` can be omitted.
|
||||
- `LV_PART_SCROLLBAR | LV_STATE_SCROLLED`: The scrollbar part when the object is being scrolled
|
||||
- `0` Same as `LV_PART_MAIN | LV_STATE_DEFAULT`.
|
||||
- `0` Same as `LV_PART_MAIN | LV_STATE_DEFAULT`.
|
||||
- `LV_PART_INDICATOR | LV_STATE_PRESSED | LV_STATE_CHECKED` The indicator part when the object is pressed and checked at the same time.
|
||||
|
||||
Using `lv_obj_add_style`:
|
||||
Using `lv_obj_add_style`:
|
||||
```c
|
||||
lv_obj_add_style(btn, &style_btn, 0); /*Default button style*/
|
||||
lv_obj_add_style(btn, &btn_red, LV_STATE_PRESSED); /*Overwrite only some colors to red when pressed*/
|
||||
|
|
@ -193,20 +193,20 @@ lv_obj_add_style(btn, &btn_red, LV_STATE_PRESSED); /*Overwrite only some color
|
|||
### Remove styles
|
||||
To remove all styles from an object use `lv_obj_remove_style_all(obj)`.
|
||||
|
||||
To remove specific styles use `lv_obj_remove_style(obj, style, selector)`. This function will remove `style` only if the `selector` matches with the `selector` used in `lv_obj_add_style`.
|
||||
To remove specific styles use `lv_obj_remove_style(obj, style, selector)`. This function will remove `style` only if the `selector` matches with the `selector` used in `lv_obj_add_style`.
|
||||
`style` can be `NULL` to check only the `selector` and remove all matching styles. The `selector` can use the `LV_STATE_ANY` and `LV_PART_ANY` values to remove the style from any state or part.
|
||||
|
||||
|
||||
### Report style changes
|
||||
If a style which is already assigned to an object changes (i.e. a property is added or changed), the objects using that style should be notified. There are 3 options to do this:
|
||||
1. If you know that the changed properties can be applied by a simple redraw (e.g. color or opacity changes) just call `lv_obj_invalidate(obj)` or `lv_obj_invalidate(lv_scr_act())`.
|
||||
2. If more complex style properties were changed or added, and you know which object(s) are affected by that style call `lv_obj_refresh_style(obj, part, property)`.
|
||||
1. If you know that the changed properties can be applied by a simple redraw (e.g. color or opacity changes) just call `lv_obj_invalidate(obj)` or `lv_obj_invalidate(lv_scr_act())`.
|
||||
2. If more complex style properties were changed or added, and you know which object(s) are affected by that style call `lv_obj_refresh_style(obj, part, property)`.
|
||||
To refresh all parts and properties use `lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ANY)`.
|
||||
3. To make LVGL check all objects to see if they use a style and refresh them when needed, call `lv_obj_report_style_change(&style)`. If `style` is `NULL` all objects will be notified about a style change.
|
||||
|
||||
### Get a property's value on an object
|
||||
To get a final value of property - considering cascading, inheritance, local styles and transitions (see below) - property get functions like this can be used:
|
||||
`lv_obj_get_style_<property_name>(obj, <part>)`.
|
||||
To get a final value of property - considering cascading, inheritance, local styles and transitions (see below) - property get functions like this can be used:
|
||||
`lv_obj_get_style_<property_name>(obj, <part>)`.
|
||||
These functions use the object's current state and if no better candidate exists they return a default value.
|
||||
For example:
|
||||
```c
|
||||
|
|
@ -214,7 +214,7 @@ lv_color_t color = lv_obj_get_style_bg_color(btn, LV_PART_MAIN);
|
|||
```
|
||||
|
||||
## Local styles
|
||||
In addition to "normal" styles, objects can also store local styles. This concept is similar to inline styles in CSS (e.g. `<div style="color:red">`) with some modification.
|
||||
In addition to "normal" styles, objects can also store local styles. This concept is similar to inline styles in CSS (e.g. `<div style="color:red">`) with some modification.
|
||||
|
||||
Local styles are like normal styles, but they can't be shared among other objects. If used, local styles are allocated automatically, and freed when the object is deleted.
|
||||
They are useful to add local customization to an object.
|
||||
|
|
@ -244,15 +244,15 @@ In the documentation of the widgets you will see sentences like "The widget uses
|
|||
By default, when an object changes state (e.g. it's pressed) the new properties from the new state are set immediately. However, with transitions it's possible to play an animation on state change.
|
||||
For example, on pressing a button its background color can be animated to the pressed color over 300 ms.
|
||||
|
||||
The parameters of the transitions are stored in the styles. It's possible to set
|
||||
The parameters of the transitions are stored in the styles. It's possible to set
|
||||
- the time of the transition
|
||||
- the delay before starting the transition
|
||||
- the delay before starting the transition
|
||||
- the animation path (also known as the timing or easing function)
|
||||
- the properties to animate
|
||||
- the properties to animate
|
||||
|
||||
The transition properties can be defined for each state. For example, setting a 500 ms transition time in the default state means that when the object goes to the default state a 500 ms transition time is applied.
|
||||
The transition properties can be defined for each state. For example, setting a 500 ms transition time in the default state means that when the object goes to the default state a 500 ms transition time is applied.
|
||||
Setting a 100 ms transition time in the pressed state causes a 100 ms transition when going to the pressed state.
|
||||
This example configuration results in going to the pressed state quickly and then going back to default slowly.
|
||||
This example configuration results in going to the pressed state quickly and then going back to default slowly.
|
||||
|
||||
To describe a transition an `lv_transition_dsc_t` variable needs to be initialized and added to a style:
|
||||
```c
|
||||
|
|
@ -284,11 +284,11 @@ To set a theme for a display, two steps are required:
|
|||
|
||||
Theme initialization functions can have different prototypes. This example shows how to set the "default" theme:
|
||||
```c
|
||||
lv_theme_t * th = lv_theme_default_init(display, /*Use the DPI, size, etc from this display*/
|
||||
lv_theme_t * th = lv_theme_default_init(display, /*Use the DPI, size, etc from this display*/
|
||||
LV_COLOR_PALETTE_BLUE, LV_COLOR_PALETTE_CYAN, /*Primary and secondary palette*/
|
||||
false, /*Light or dark mode*/
|
||||
false, /*Light or dark mode*/
|
||||
&lv_font_montserrat_10, &lv_font_montserrat_14, &lv_font_montserrat_18); /*Small, normal, large fonts*/
|
||||
|
||||
|
||||
lv_disp_set_theme(display, th); /*Assign the theme to the display*/
|
||||
```
|
||||
|
||||
|
|
@ -297,8 +297,8 @@ The included themes are enabled in `lv_conf.h`. If the default theme is enabled
|
|||
|
||||
### Extending themes
|
||||
|
||||
Built-in themes can be extended.
|
||||
If a custom theme is created, a parent theme can be selected. The parent theme's styles will be added before the custom theme's styles.
|
||||
Built-in themes can be extended.
|
||||
If a custom theme is created, a parent theme can be selected. The parent theme's styles will be added before the custom theme's styles.
|
||||
Any number of themes can be chained this way. E.g. default theme -> custom theme -> dark theme.
|
||||
|
||||
`lv_theme_set_parent(new_theme, base_theme)` extends the `base_theme` with the `new_theme`.
|
||||
|
|
@ -324,9 +324,9 @@ There is an example for it below.
|
|||
|
||||
.. doxygenfile:: lv_obj_style_gen.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
.. doxygenfile:: lv_style_gen.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/overview/timer.md
|
||||
```
|
||||
# Timers
|
||||
|
|
@ -52,7 +52,7 @@ You can modify some timer parameters later:
|
|||
|
||||
## Repeat count
|
||||
|
||||
You can make a timer repeat only a given number of times with `lv_timer_set_repeat_count(timer, count)`. The timer will automatically be deleted after it's called the defined number of times. Set the count to `-1` to repeat indefinitely.
|
||||
You can make a timer repeat only a given number of times with `lv_timer_set_repeat_count(timer, count)`. The timer will automatically be deleted after it's called the defined number of times. Set the count to `-1` to repeat indefinitely.
|
||||
|
||||
|
||||
## Measure idle time
|
||||
|
|
@ -73,7 +73,7 @@ void my_screen_clean_up(void * scr)
|
|||
/*Free some resources related to `scr`*/
|
||||
|
||||
/*Finally delete the screen*/
|
||||
lv_obj_del(scr);
|
||||
lv_obj_del(scr);
|
||||
}
|
||||
|
||||
...
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/display.md
|
||||
```
|
||||
# Display interface
|
||||
|
|
@ -10,7 +10,7 @@ To register a display for LVGL, a `lv_disp_draw_buf_t` and a `lv_disp_drv_t` var
|
|||
|
||||
## Draw buffer
|
||||
|
||||
Draw buffer(s) are simple array(s) that LVGL uses to render the screen content.
|
||||
Draw buffer(s) are simple array(s) that LVGL uses to render the screen content.
|
||||
Once rendering is ready the content of the draw buffer is sent to the display using the `flush_cb` function set in the display driver (see below).
|
||||
|
||||
A draw buffer can be initialized via a `lv_disp_draw_buf_t` variable like this:
|
||||
|
|
@ -31,7 +31,7 @@ Note that `lv_disp_draw_buf_t` must be a static, global or dynamically allocated
|
|||
As you can see above, the draw buffer may be smaller than the screen. In this case, larger areas are redrawn in smaller segments that fit into the draw buffer(s).
|
||||
If only a small area changes (e.g. a button is pressed) then only that area will be refreshed.
|
||||
|
||||
A larger buffer results in better performance but above 1/10 screen sized buffer(s) there is no significant performance improvement.
|
||||
A larger buffer results in better performance but above 1/10 screen sized buffer(s) there is no significant performance improvement.
|
||||
Therefore it's recommended to choose the size of the draw buffer(s) to be at least 1/10 screen sized.
|
||||
|
||||
## Buffering modes
|
||||
|
|
@ -41,25 +41,25 @@ There are several settings to adjust the number draw buffers and buffering/refre
|
|||
You can measure the performance of different configurations using the [benchmark example](https://github.com/lvgl/lv_demos/tree/master/src/lv_demo_benchmark).
|
||||
|
||||
### One buffer
|
||||
If only one buffer is used LVGL draws the content of the screen into that draw buffer and sends it to the display.
|
||||
If only one buffer is used LVGL draws the content of the screen into that draw buffer and sends it to the display.
|
||||
LVGL then needs to wait until the content of the buffer is sent to the display before drawing something new in it.
|
||||
|
||||
### Two buffers
|
||||
If two buffers are used LVGL can draw into one buffer while the content of the other buffer is sent to the display in the background.
|
||||
If two buffers are used LVGL can draw into one buffer while the content of the other buffer is sent to the display in the background.
|
||||
DMA or other hardware should be used to transfer data to the display so the MCU can continue drawing.
|
||||
This way, the rendering and refreshing of the display become parallel operations.
|
||||
This way, the rendering and refreshing of the display become parallel operations.
|
||||
|
||||
### Full refresh
|
||||
In the display driver (`lv_disp_drv_t`) enabling the `full_refresh` bit will force LVGL to always redraw the whole screen. This works in both *one buffer* and *two buffers* modes.
|
||||
If `full_refresh` is enabled and two screen sized draw buffers are provided, LVGL's display handling works like "traditional" double buffering.
|
||||
If `full_refresh` is enabled and two screen sized draw buffers are provided, LVGL's display handling works like "traditional" double buffering.
|
||||
This means the `flush_cb` callback only has to update the address of the framebuffer (`color_p` parameter).
|
||||
This configuration should be used if the MCU has an LCD controller peripheral and not with an external display controller (e.g. ILI9341 or SSD1963) accessed via serial link. The latter will generally be too slow to maintain high frame rates with full screen redraws.
|
||||
|
||||
### Direct mode
|
||||
If the `direct_mode` flag is enabled in the display driver LVGL will draw directly into a **screen sized frame buffer**. That is the draw buffer(s) needs to be screen sized.
|
||||
If the `direct_mode` flag is enabled in the display driver LVGL will draw directly into a **screen sized frame buffer**. That is the draw buffer(s) needs to be screen sized.
|
||||
It this case `flush_cb` will be called only once when all dirty areas are redrawn.
|
||||
With `direct_mode` the frame buffer always contains the current frame as it should be displayed on the screen.
|
||||
If 2 frame buffers are provided as draw buffers LVGL will alter the buffers but always draw only the dirty areas.
|
||||
With `direct_mode` the frame buffer always contains the current frame as it should be displayed on the screen.
|
||||
If 2 frame buffers are provided as draw buffers LVGL will alter the buffers but always draw only the dirty areas.
|
||||
Therefore the 2 buffers needs to synchronized in `flush_cb` like this:
|
||||
1. Display the frame buffer pointed by `color_p`
|
||||
2. Copy the redrawn areas from `color_p` to the other buffer.
|
||||
|
|
@ -77,18 +77,18 @@ Once the buffer initialization is ready a `lv_disp_drv_t` display driver needs t
|
|||
2. its fields need to be set
|
||||
3. it needs to be registered in LVGL with `lv_disp_drv_register(&disp_drv)`
|
||||
|
||||
Note that `lv_disp_drv_t` also needs to be a static, global or dynamically allocated variable.
|
||||
Note that `lv_disp_drv_t` also needs to be a static, global or dynamically allocated variable.
|
||||
|
||||
### Mandatory fields
|
||||
In the most simple case only the following fields of `lv_disp_drv_t` need to be set:
|
||||
- `draw_buf` pointer to an initialized `lv_disp_draw_buf_t` variable.
|
||||
- `hor_res` horizontal resolution of the display in pixels.
|
||||
- `hor_res` horizontal resolution of the display in pixels.
|
||||
- `ver_res` vertical resolution of the display in pixels.
|
||||
- `flush_cb` a callback function to copy a buffer's content to a specific area of the display.
|
||||
`lv_disp_flush_ready(&disp_drv)` needs to be called when flushing is ready.
|
||||
- `flush_cb` a callback function to copy a buffer's content to a specific area of the display.
|
||||
`lv_disp_flush_ready(&disp_drv)` needs to be called when flushing is ready.
|
||||
LVGL might render the screen in multiple chunks and therefore call `flush_cb` multiple times. To see if the current one is the last chunk of rendering use `lv_disp_flush_is_last(&disp_drv)`.
|
||||
|
||||
### Optional fields
|
||||
### Optional fields
|
||||
There are some optional display driver data fields:
|
||||
- `physical_hor_res` horizontal resolution of the full / physical display in pixels. Only set this when _not_ using the full screen (defaults to -1 / same as `hor_res`).
|
||||
- `physical_ver_res` vertical resolution of the full / physical display in pixels. Only set this when _not_ using the full screen (defaults to -1 / same as `ver_res`).
|
||||
|
|
@ -107,7 +107,7 @@ Some other optional callbacks to make it easier and more optimal to work with mo
|
|||
It can be used if the display controller can refresh only areas with specific height or width (usually 8 px height with monochrome displays).
|
||||
- `set_px_cb` a custom function to write the draw buffer. It can be used to store the pixels more compactly in the draw buffer if the display has a special color format. (e.g. 1-bit monochrome, 2-bit grayscale etc.)
|
||||
This way the buffers used in `lv_disp_draw_buf_t` can be smaller to hold only the required number of bits for the given area size. Note that rendering with `set_px_cb` is slower than normal rendering.
|
||||
- `monitor_cb` A callback function that tells how many pixels were refreshed and in how much time. Called when the last chunk is rendered and sent to the display.
|
||||
- `monitor_cb` A callback function that tells how many pixels were refreshed and in how much time. Called when the last chunk is rendered and sent to the display.
|
||||
- `clean_dcache_cb` A callback for cleaning any caches related to the display.
|
||||
|
||||
LVGL has built-in support to several GPUs (see `lv_conf.h`) but if something else is required these functions can be used to make LVGL use a GPU:
|
||||
|
|
@ -199,7 +199,7 @@ LVGL supports rotation of the display in 90 degree increments. You can select wh
|
|||
|
||||
If you select software rotation (`sw_rotate` flag set to 1), LVGL will perform the rotation for you. Your driver can and should assume that the screen width and height have not changed. Simply flush pixels to the display as normal. Software rotation requires no additional logic in your `flush_cb` callback.
|
||||
|
||||
There is a noticeable amount of overhead to performing rotation in software. Hardware rotation is available to avoid unwanted slowdowns. In this mode, LVGL draws into the buffer as if your screen width and height were swapped. You are responsible for rotating the provided pixels yourself.
|
||||
There is a noticeable amount of overhead to performing rotation in software. Hardware rotation is available to avoid unwanted slowdowns. In this mode, LVGL draws into the buffer as if your screen width and height were swapped. You are responsible for rotating the provided pixels yourself.
|
||||
|
||||
The default rotation of your display when it is initialized can be set using the `rotated` flag. The available options are `LV_DISP_ROT_NONE`, `LV_DISP_ROT_90`, `LV_DISP_ROT_180`, or `LV_DISP_ROT_270`. The rotation values are relative to how you would rotate the physical display in the clockwise direction. Thus, `LV_DISP_ROT_90` means you rotate the hardware 90 degrees clockwise, and the display rotates 90 degrees counterclockwise to compensate.
|
||||
|
||||
|
|
@ -210,13 +210,13 @@ Display rotation can also be changed at runtime using the `lv_disp_set_rotation(
|
|||
Support for software rotation is a new feature, so there may be some glitches/bugs depending on your configuration. If you encounter a problem please open an issue on [GitHub](https://github.com/lvgl/lvgl/issues).
|
||||
|
||||
### Decoupling the display refresh timer
|
||||
Normally the dirty (a.k.a invalid) areas are checked and redrawn in every `LV_DISP_DEF_REFR_PERIOD` milliseconds (set in `lv_conf.h`).
|
||||
Normally the dirty (a.k.a invalid) areas are checked and redrawn in every `LV_DISP_DEF_REFR_PERIOD` milliseconds (set in `lv_conf.h`).
|
||||
However, in some cases you might need more control on when the display refreshing happen, for example to synchronize rendering with VSYNC or the TE signal.
|
||||
|
||||
You can do this in the following way:
|
||||
```c
|
||||
/*Delete the original display refresh timer*/
|
||||
lv_timer_del(disp->refr_timer);
|
||||
lv_timer_del(disp->refr_timer);
|
||||
disp->refr_timer = NULL;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/gpu.md
|
||||
```
|
||||
# Add custom GPU
|
||||
LVGL has a flexible and extendable draw pipeline. You can hook it to do some rendering with a GPU or even completely replace the built-in software renderer.
|
||||
|
||||
## Draw context
|
||||
The core structure of drawing is `lv_draw_ctx_t`.
|
||||
It contains a pointer to a buffer where drawing should happen and a couple of callbacks to draw rectangles, texts, and other primitives.
|
||||
The core structure of drawing is `lv_draw_ctx_t`.
|
||||
It contains a pointer to a buffer where drawing should happen and a couple of callbacks to draw rectangles, texts, and other primitives.
|
||||
|
||||
### Fields
|
||||
`lv_draw_ctx_t` has the following fields:
|
||||
- `void * buf` Pointer to a buffer to draw into
|
||||
- `lv_area_t * buf_area` The position and size of `buf` (absolute coordinates)
|
||||
- `const lv_area_t * clip_area` The current clip area with absolute coordinates, always the same or smaller than `buf_area`. All drawings should be clipped to this area.
|
||||
- `void (*draw_rect)()` Draw a rectangle with shadow, gradient, border, etc.
|
||||
- `void (*draw_rect)()` Draw a rectangle with shadow, gradient, border, etc.
|
||||
- `void (*draw_arc)()` Draw an arc
|
||||
- `void (*draw_img_decoded)()` Draw an (A)RGB image that is already decoded by LVGL.
|
||||
- `void (*draw_img_decoded)()` Draw an (A)RGB image that is already decoded by LVGL.
|
||||
- `lv_res_t (*draw_img)()` Draw an image before decoding it (it bypasses LVGL's internal image decoders)
|
||||
- `void (*draw_letter)()` Draw a letter
|
||||
- `void (*draw_line)()` Draw a line
|
||||
|
|
@ -28,22 +28,22 @@ It contains a pointer to a buffer where drawing should happen and a couple of ca
|
|||
(For the sake of simplicity the parameters of the callbacks are not shown here.)
|
||||
|
||||
All `draw_*` callbacks receive a pointer to the current `draw_ctx` as their first parameter. Among the other parameters there is a descriptor that tells what to draw,
|
||||
e.g. for `draw_rect` it's called [lv_draw_rect_dsc_t](https://github.com/lvgl/lvgl/blob/master/src/draw/lv_draw_rect.h),
|
||||
for `lv_draw_line` it's called [lv_draw_line_dsc_t](https://github.com/lvgl/lvgl/blob/master/src/draw/lv_draw_line.h), etc.
|
||||
e.g. for `draw_rect` it's called [lv_draw_rect_dsc_t](https://github.com/lvgl/lvgl/blob/master/src/draw/lv_draw_rect.h),
|
||||
for `lv_draw_line` it's called [lv_draw_line_dsc_t](https://github.com/lvgl/lvgl/blob/master/src/draw/lv_draw_line.h), etc.
|
||||
|
||||
To correctly render according to a `draw_dsc` you need to be familiar with the [Boxing model](https://docs.lvgl.io/master/overview/coords.html#boxing-model) of LVGL and the meanings of the fields. The name and meaning of the fields are identical to name and meaning of the [Style properties](https://docs.lvgl.io/master/overview/style-props.html).
|
||||
|
||||
### Initialization
|
||||
The `lv_disp_drv_t` has 4 fields related to the draw context:
|
||||
- `lv_draw_ctx_t * draw_ctx` Pointer to the `draw_ctx` of this display
|
||||
- `void (*draw_ctx_init)(struct _lv_disp_drv_t * disp_drv, lv_draw_ctx_t * draw_ctx)` Callback to initialize a `draw_ctx`
|
||||
- `lv_draw_ctx_t * draw_ctx` Pointer to the `draw_ctx` of this display
|
||||
- `void (*draw_ctx_init)(struct _lv_disp_drv_t * disp_drv, lv_draw_ctx_t * draw_ctx)` Callback to initialize a `draw_ctx`
|
||||
- `void (*draw_ctx_deinit)(struct _lv_disp_drv_t * disp_drv, lv_draw_ctx_t * draw_ctx)` Callback to de-initialize a `draw_ctx`
|
||||
- `size_t draw_ctx_size` Size of the draw context structure. E.g. `sizeof(lv_draw_sw_ctx_t)`
|
||||
|
||||
When you ignore these fields, LVGL will set default values for callbacks and size in `lv_disp_drv_init()` based on the configuration in `lv_conf.h`.
|
||||
`lv_disp_drv_register()` will allocate a `draw_ctx` based on `draw_ctx_size` and call `draw_ctx_init()` on it.
|
||||
|
||||
However, you can overwrite the callbacks and the size values before calling `lv_disp_drv_register()`.
|
||||
However, you can overwrite the callbacks and the size values before calling `lv_disp_drv_register()`.
|
||||
It makes it possible to use your own `draw_ctx` with your own callbacks.
|
||||
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ draw_sw_ctx->base_draw.draw_letter = lv_draw_sw_letter;
|
|||
```
|
||||
|
||||
### Blend callback
|
||||
As you saw above the software renderer adds the `blend` callback field. It's a special callback related to how the software renderer works.
|
||||
As you saw above the software renderer adds the `blend` callback field. It's a special callback related to how the software renderer works.
|
||||
All draw operations end up in the `blend` callback which can either fill an area or copy an image to an area by considering an optional mask.
|
||||
|
||||
The `lv_draw_sw_blend_dsc_t` parameter describes what and how to blend. It has the following fields:
|
||||
|
|
@ -81,11 +81,11 @@ The `lv_draw_sw_blend_dsc_t` parameter describes what and how to blend. It has t
|
|||
- `lv_blend_mode_t blend_mode` E.g. `LV_BLEND_MODE_ADDITIVE`
|
||||
|
||||
|
||||
## Extend the software renderer
|
||||
## Extend the software renderer
|
||||
|
||||
### New blend callback
|
||||
|
||||
Let's take a practical example: you would like to use your MCUs GPU for color fill operations only.
|
||||
Let's take a practical example: you would like to use your MCUs GPU for color fill operations only.
|
||||
|
||||
As all draw callbacks call `blend` callback to fill an area in the end only the `blend` callback needs to be overwritten.
|
||||
|
||||
|
|
@ -142,10 +142,10 @@ void my_draw_blend(lv_draw_ctx_t * draw_ctx, const lv_draw_sw_blend_dsc_t * dsc)
|
|||
|
||||
/*Make the blend area relative to the buffer*/
|
||||
lv_area_move(&blend_area, -draw_ctx->buf_area->x1, -draw_ctx->buf_area->y1);
|
||||
|
||||
|
||||
/*Call your custom gou fill function to fill blend_area, on dest_buf with dsc->color*/
|
||||
my_gpu_fill(dest_buf, dest_stride, &blend_area, dsc->color);
|
||||
}
|
||||
}
|
||||
/*Fallback: the GPU doesn't support these settings. Call the SW renderer.*/
|
||||
else {
|
||||
lv_draw_sw_blend_basic(draw_ctx, dsc);
|
||||
|
|
@ -158,7 +158,7 @@ The implementation of wait callback is much simpler:
|
|||
void my_gpu_wait(lv_draw_ctx_t * draw_ctx)
|
||||
{
|
||||
while(my_gpu_is_working());
|
||||
|
||||
|
||||
/*Call SW renderer's wait callback too*/
|
||||
lv_draw_sw_wait_for_finish(draw_ctx);
|
||||
}
|
||||
|
|
@ -171,21 +171,21 @@ A custom `draw_rect` callback might look like this:
|
|||
void my_draw_rect(lv_draw_ctx_t * draw_ctx, const lv_draw_rect_dsc_t * dsc, const lv_area_t * coords)
|
||||
{
|
||||
if(lv_draw_mask_is_any(coords) == false && dsc->grad == NULL && dsc->bg_img_src == NULL &&
|
||||
dsc->shadow_width == 0 && dsc->blend_mode = LV_BLEND_MODE_NORMAL)
|
||||
dsc->shadow_width == 0 && dsc->blend_mode = LV_BLEND_MODE_NORMAL)
|
||||
{
|
||||
/*Draw the background*/
|
||||
my_bg_drawer(draw_ctx, coords, dsc->bg_color, dsc->radius);
|
||||
|
||||
|
||||
/*Draw the border if any*/
|
||||
if(dsc->border_width) {
|
||||
my_border_drawer(draw_ctx, coords, dsc->border_width, dsc->border_color, dsc->border_opa)
|
||||
}
|
||||
|
||||
|
||||
/*Draw the outline if any*/
|
||||
if(dsc->outline_width) {
|
||||
my_outline_drawer(draw_ctx, coords, dsc->outline_width, dsc->outline_color, dsc->outline_opa, dsc->outline_pad)
|
||||
}
|
||||
}
|
||||
}
|
||||
/*Fallback*/
|
||||
else {
|
||||
lv_draw_sw_rect(draw_ctx, dsc, coords);
|
||||
|
|
@ -197,6 +197,6 @@ void my_draw_rect(lv_draw_ctx_t * draw_ctx, const lv_draw_rect_dsc_t * dsc, cons
|
|||
|
||||
## Fully custom draw engine
|
||||
|
||||
For example if your MCU/MPU supports a powerful vector graphics engine you might use only that instead of LVGL's SW renderer.
|
||||
For example if your MCU/MPU supports a powerful vector graphics engine you might use only that instead of LVGL's SW renderer.
|
||||
In this case, you need to base the renderer on the basic `lv_draw_ctx_t` (instead of `lv_draw_sw_ctx_t`) and extend/initialize it as you wish.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/indev.md
|
||||
```
|
||||
# Input device interface
|
||||
|
|
@ -45,7 +45,7 @@ void my_input_read(lv_indev_drv_t * drv, lv_indev_data_t*data)
|
|||
data->point.y = touchpad_y;
|
||||
data->state = LV_INDEV_STATE_PRESSED;
|
||||
} else {
|
||||
data->state = LV_INDEV_STATE_RELEASED;
|
||||
data->state = LV_INDEV_STATE_RELEASED;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -108,7 +108,7 @@ void encoder_read(lv_indev_drv_t * drv, lv_indev_data_t*data){
|
|||
```
|
||||
|
||||
#### Using buttons with Encoder logic
|
||||
In addition to standard encoder behavior, you can also utilize its logic to navigate(focus) and edit widgets using buttons.
|
||||
In addition to standard encoder behavior, you can also utilize its logic to navigate(focus) and edit widgets using buttons.
|
||||
This is especially handy if you have only few buttons available, or you want to use other buttons in addition to encoder wheel.
|
||||
|
||||
You need to have 3 buttons available:
|
||||
|
|
@ -141,7 +141,7 @@ void encoder_with_keys_read(lv_indev_drv_t * drv, lv_indev_data_t*data){
|
|||
*Buttons* mean external "hardware" buttons next to the screen which are assigned to specific coordinates of the screen.
|
||||
If a button is pressed it will simulate the pressing on the assigned coordinate. (Similarly to a touchpad)
|
||||
|
||||
To assign buttons to coordinates use `lv_indev_set_button_points(my_indev, points_array)`.
|
||||
To assign buttons to coordinates use `lv_indev_set_button_points(my_indev, points_array)`.
|
||||
`points_array` should look like `const lv_point_t points_array[] = { {12,30},{60,90}, ...}`
|
||||
|
||||
``` important:: The points_array can't go out of scope. Either declare it as a global variable or as a static variable inside a function.
|
||||
|
|
@ -189,9 +189,9 @@ Every input device is associated with a display. By default, a new input device
|
|||
The associated display is stored and can be changed in `disp` field of the driver.
|
||||
|
||||
### Buffered reading
|
||||
By default, LVGL calls `read_cb` periodically. Because of this intermittent polling there is a chance that some user gestures are missed.
|
||||
By default, LVGL calls `read_cb` periodically. Because of this intermittent polling there is a chance that some user gestures are missed.
|
||||
|
||||
To solve this you can write an event driven driver for your input device that buffers measured data. In `read_cb` you can report the buffered data instead of directly reading the input device.
|
||||
To solve this you can write an event driven driver for your input device that buffers measured data. In `read_cb` you can report the buffered data instead of directly reading the input device.
|
||||
Setting the `data->continue_reading` flag will tell LVGL there is more data to read and it should call `read_cb` again.
|
||||
|
||||
## Further reading
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/index.md
|
||||
```
|
||||
|
||||
|
|
@ -19,6 +19,6 @@
|
|||
os
|
||||
log
|
||||
gpu
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/log.md
|
||||
```
|
||||
# Logging
|
||||
|
|
@ -24,7 +24,7 @@ If your system supports `printf`, you just need to enable `LV_LOG_PRINTF` in `lv
|
|||
|
||||
|
||||
### Custom log function
|
||||
If you can't use `printf` or want to use a custom function to log, you can register a "logger" callback with `lv_log_register_print_cb()`.
|
||||
If you can't use `printf` or want to use a custom function to log, you can register a "logger" callback with `lv_log_register_print_cb()`.
|
||||
|
||||
For example:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/os.md
|
||||
```
|
||||
# Operating system and interrupts
|
||||
|
|
@ -37,7 +37,7 @@ void other_thread(void)
|
|||
mutex_lock(&lvgl_mutex);
|
||||
lv_obj_t *img = lv_img_create(lv_scr_act());
|
||||
mutex_unlock(&lvgl_mutex);
|
||||
|
||||
|
||||
while(1) {
|
||||
mutex_lock(&lvgl_mutex);
|
||||
/* change to the next image */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/project.md
|
||||
```
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ You can clone it or [Download](https://github.com/lvgl/lvgl/archive/refs/heads/m
|
|||
The graphics library itself is the `lvgl` directory. It contains a couple of folders but to use `lvgl` you only need `.c` and `.h` files from the `src` folder.
|
||||
|
||||
### Automatically add files
|
||||
If your IDE automatically adds the files from the folders copied to the project folder (as Eclipse or VSCode does), you can simply copy the `lvgl` folder as it is into your project.
|
||||
If your IDE automatically adds the files from the folders copied to the project folder (as Eclipse or VSCode does), you can simply copy the `lvgl` folder as it is into your project.
|
||||
|
||||
### Make and CMake
|
||||
LVGL also supports `make` and `CMake` build systems out of the box. To add LVGL to your Makefile based build system add these lines to your main Makefile:
|
||||
|
|
@ -48,7 +48,7 @@ To get `lv_conf.h` **copy lvgl/lv_conf_template.h** next to the `lvgl` directory
|
|||
|
||||
Comments in the config file explain the meaning of the options. Be sure to set at least `LV_COLOR_DEPTH` according to your display's color depth. Note that, the examples and demos explicitly need to be enabled in `lv_conf.h`.
|
||||
|
||||
Alternatively, `lv_conf.h` can be copied to another place but then you should add the `LV_CONF_INCLUDE_SIMPLE` define to your compiler options (e.g. `-DLV_CONF_INCLUDE_SIMPLE` for GCC compiler) and set the include path manually (e.g. `-I../include/gui`).
|
||||
Alternatively, `lv_conf.h` can be copied to another place but then you should add the `LV_CONF_INCLUDE_SIMPLE` define to your compiler options (e.g. `-DLV_CONF_INCLUDE_SIMPLE` for GCC compiler) and set the include path manually (e.g. `-I../include/gui`).
|
||||
In this case LVGL will attempt to include `lv_conf.h` simply with `#include "lv_conf.h"`.
|
||||
|
||||
You can even use a different name for `lv_conf.h`. The custom path can be set via the `LV_CONF_PATH` define.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/sleep.md
|
||||
```
|
||||
# Sleep management
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/task-handler.md
|
||||
```
|
||||
# Task Handler
|
||||
|
||||
To handle the tasks of LVGL you need to call `lv_timer_handler()` periodically in one of the following:
|
||||
- *while(1)* of *main()* function
|
||||
- *while(1)* of *main()* function
|
||||
- timer interrupt periodically (lower priority than `lv_tick_inc()`)
|
||||
- an OS task periodically
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ while(1) {
|
|||
while (1) {
|
||||
lv_timer_handler_run_in_period(5); /* run lv_timer_handler() every 5ms */
|
||||
my_delay_ms(5); /* delay 5ms to avoid unnecessary polling */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
To learn more about timers visit the [Timer](/overview/timer) section.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/porting/tick.md
|
||||
```
|
||||
# Tick interface
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/arc.md
|
||||
```
|
||||
# Arc (lv_arc)
|
||||
|
|
@ -10,20 +10,20 @@ The Arc consists of a background and a foreground arc. The foreground (indicator
|
|||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` Draws a background using the typical background style properties and an arc using the arc style properties. The arc's size and position will respect the *padding* style properties.
|
||||
- `LV_PART_INDICATOR` Draws another arc using the *arc* style properties. Its padding values are interpreted relative to the background arc.
|
||||
- `LV_PART_KNOB` Draws a handle on the end of the indicator using all background properties and padding values. With zero padding the knob size is the same as the indicator's width.
|
||||
Larger padding makes it larger, smaller padding makes it smaller.
|
||||
- `LV_PART_INDICATOR` Draws another arc using the *arc* style properties. Its padding values are interpreted relative to the background arc.
|
||||
- `LV_PART_KNOB` Draws a handle on the end of the indicator using all background properties and padding values. With zero padding the knob size is the same as the indicator's width.
|
||||
Larger padding makes it larger, smaller padding makes it smaller.
|
||||
|
||||
## Usage
|
||||
|
||||
### Value and range
|
||||
|
||||
A new value can be set using `lv_arc_set_value(arc, new_value)`.
|
||||
A new value can be set using `lv_arc_set_value(arc, new_value)`.
|
||||
The value is interpreted in a range (minimum and maximum values) which can be modified with `lv_arc_set_range(arc, min, max)`.
|
||||
The default range is 0..100.
|
||||
|
||||
The indicator arc is drawn on the main part's arc. This if the value is set to maximum the indicator arc will cover the entire "background" arc.
|
||||
To set the start and end angle of the background arc use the `lv_arc_set_bg_angles(arc, start_angle, end_angle)` functions or `lv_arc_set_bg_start/end_angle(arc, angle)`.
|
||||
To set the start and end angle of the background arc use the `lv_arc_set_bg_angles(arc, start_angle, end_angle)` functions or `lv_arc_set_bg_start/end_angle(arc, angle)`.
|
||||
|
||||
Zero degrees is at the middle right (3 o'clock) of the object and the degrees are increasing in clockwise direction.
|
||||
The angles should be in the [0;360] range.
|
||||
|
|
@ -42,7 +42,7 @@ The arc can be one of the following modes:
|
|||
The mode can be set by `lv_arc_set_mode(arc, LV_ARC_MODE_...)` and used only if the angle is set by `lv_arc_set_value()` or the arc is adjusted by finger.
|
||||
|
||||
### Change rate
|
||||
If the arc is pressed the current value will set with a limited speed according to the set *change rate*.
|
||||
If the arc is pressed the current value will set with a limited speed according to the set *change rate*.
|
||||
The change rate is defined in degree/second unit and can be set with `lv_arc_set_change_rage(arc, rate)`
|
||||
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);
|
|||
|
||||
### Advanced hit test
|
||||
|
||||
If the `LV_OBJ_FLAG_ADV_HITTEST` flag is enabled the arc can be clicked through in the middle. Clicks are recognized only on the ring of the background arc. `lv_obj_set_ext_click_size()` makes the sensitive area larger inside and outside with the given number of pixels.
|
||||
If the `LV_OBJ_FLAG_ADV_HITTEST` flag is enabled the arc can be clicked through in the middle. Clicks are recognized only on the ring of the background arc. `lv_obj_set_ext_click_size()` makes the sensitive area larger inside and outside with the given number of pixels.
|
||||
|
||||
|
||||
|
||||
|
|
@ -68,12 +68,12 @@ If the `LV_OBJ_FLAG_ADV_HITTEST` flag is enabled the arc can be clicked through
|
|||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` sent when the arc is pressed/dragged to set a new value.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent with the following types:
|
||||
- `LV_ARC_DRAW_PART_BACKGROUND` The background arc.
|
||||
- `LV_ARC_DRAW_PART_BACKGROUND` The background arc.
|
||||
- `part`: `LV_PART_MAIN`
|
||||
- `p1`: center of the arc
|
||||
- `radius`: radius of the arc
|
||||
- `arc_dsc`
|
||||
- `LV_ARC_DRAW_PART_FOREGROUND` The foreground arc.
|
||||
- `LV_ARC_DRAW_PART_FOREGROUND` The foreground arc.
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `p1`: center of the arc
|
||||
- `radius`: radius of the arc
|
||||
|
|
@ -82,9 +82,9 @@ If the `LV_OBJ_FLAG_ADV_HITTEST` flag is enabled the arc can be clicked through
|
|||
- `part`: `LV_PART_KNOB`
|
||||
- `draw_area`: the area of the knob
|
||||
- `rect_dsc`:
|
||||
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
## Keys
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/bar.md
|
||||
```
|
||||
# Bar (lv_bar)
|
||||
|
||||
## Overview
|
||||
|
||||
The bar object has a background and an indicator on it. The width of the indicator is set according to the current value of the bar.
|
||||
The bar object has a background and an indicator on it. The width of the indicator is set according to the current value of the bar.
|
||||
|
||||
Vertical bars can be created if the width of the object is smaller than its height.
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ Not only the end, but also the start value of the bar can be set, which changes
|
|||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the bar and it uses the typical background style properties. Adding padding makes the indicator smaller or larger. The `anim_time` style property sets the animation time if the values set with `LV_ANIM_ON`.
|
||||
- `LV_PART_INDICATOR` The indicator itself; also uses all the typical background properties.
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Value and range
|
||||
|
|
@ -35,10 +35,10 @@ The bar can be one of the following modes:
|
|||
## Events
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following parts:
|
||||
- `LV_BAR_DRAW_PART_INDICATOR` The indicator of the bar
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `draw_area`: area of the indicator
|
||||
- `rect_dsc`
|
||||
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/btn.md
|
||||
```
|
||||
# Button (lv_btn)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/btnmatrix.md
|
||||
```
|
||||
# Button matrix (lv_btnmatrix)
|
||||
|
|
@ -12,7 +12,7 @@ The Button matrix is added to the default group (if one is set). Besides the But
|
|||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the button matrix, uses the typical background style properties. `pad_row` and `pad_column` sets the space between the buttons.
|
||||
- `LV_PART_ITEMS` The buttons all use the text and typical background style properties except translations and transformations.
|
||||
- `LV_PART_ITEMS` The buttons all use the text and typical background style properties except translations and transformations.
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ So in the example the first row will have 2 buttons each with 50% width and a se
|
|||
|
||||
### Control buttons
|
||||
The buttons' width can be set relative to the other button in the same row with `lv_btnmatrix_set_btn_width(btnm, btn_id, width)`
|
||||
E.g. in a line with two buttons: *btnA, width = 1* and *btnB, width = 2*, *btnA* will have 33 % width and *btnB* will have 66 % width.
|
||||
E.g. in a line with two buttons: *btnA, width = 1* and *btnB, width = 2*, *btnA* will have 33 % width and *btnB* will have 66 % width.
|
||||
It's similar to how the [`flex-grow`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) property works in CSS.
|
||||
The width must be in the \[1..7\] range and the default width is 1.
|
||||
|
||||
|
|
@ -45,14 +45,14 @@ In addition to the width, each button can be customized with the following param
|
|||
|
||||
By default, all flags are disabled.
|
||||
|
||||
To set or clear a button's control attribute, use `lv_btnmatrix_set_btn_ctrl(btnm, btn_id, LV_BTNM_CTRL_...)` and
|
||||
To set or clear a button's control attribute, use `lv_btnmatrix_set_btn_ctrl(btnm, btn_id, LV_BTNM_CTRL_...)` and
|
||||
`lv_btnmatrix_clear_btn_ctrl(btnm, btn_id, LV_BTNMATRIX_CTRL_...)` respectively. More `LV_BTNM_CTRL_...` values can be OR-ed
|
||||
|
||||
To set/clear the same control attribute for all buttons of a button matrix, use `lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNM_CTRL_...)` and
|
||||
To set/clear the same control attribute for all buttons of a button matrix, use `lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNM_CTRL_...)` and
|
||||
`lv_btnmatrix_clear_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_...)`.
|
||||
|
||||
The set a control map for a button matrix (similarly to the map for the text), use `lv_btnmatrix_set_ctrl_map(btnm, ctrl_map)`.
|
||||
An element of `ctrl_map` should look like `ctrl_map[0] = width | LV_BTNM_CTRL_NO_REPEAT | LV_BTNM_CTRL_CHECHKABLE`.
|
||||
An element of `ctrl_map` should look like `ctrl_map[0] = width | LV_BTNM_CTRL_NO_REPEAT | LV_BTNM_CTRL_CHECHKABLE`.
|
||||
The number of elements should be equal to the number of buttons (excluding newlines characters).
|
||||
|
||||
### One check
|
||||
|
|
@ -63,7 +63,7 @@ The "One check" feature can be enabled with `lv_btnmatrix_set_one_checked(btnm,
|
|||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following types:
|
||||
- `LV_BTNMATRIX_DRAW_PART_BTN` The individual buttons.
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `id`:index of the button being drawn
|
||||
- `id`:index of the button being drawn
|
||||
- `draw_area`: the area of teh button
|
||||
- `rect_dsc`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/canvas.md
|
||||
```
|
||||
# Canvas (lv_canvas)
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
|
||||
## Overview
|
||||
|
||||
A Canvas inherits from [Image](/widgets/core/img) where the user can draw anything.
|
||||
Rectangles, texts, images, lines, arcs can be drawn here using lvgl's drawing engine.
|
||||
A Canvas inherits from [Image](/widgets/core/img) where the user can draw anything.
|
||||
Rectangles, texts, images, lines, arcs can be drawn here using lvgl's drawing engine.
|
||||
Additionally "effects" can be applied, such as rotation, zoom and blur.
|
||||
|
||||
|
||||
|
|
@ -19,31 +19,31 @@ Additionally "effects" can be applied, such as rotation, zoom and blur.
|
|||
|
||||
### Buffer
|
||||
The Canvas needs a buffer in which stores the drawn image.
|
||||
To assign a buffer to a Canvas, use `lv_canvas_set_buffer(canvas, buffer, width, height, LV_IMG_CF_...)`.
|
||||
To assign a buffer to a Canvas, use `lv_canvas_set_buffer(canvas, buffer, width, height, LV_IMG_CF_...)`.
|
||||
Where `buffer` is a static buffer (not just a local variable) to hold the image of the canvas.
|
||||
For example,
|
||||
`static lv_color_t buffer[LV_CANVAS_BUF_SIZE_TRUE_COLOR(width, height)]`.
|
||||
`static lv_color_t buffer[LV_CANVAS_BUF_SIZE_TRUE_COLOR(width, height)]`.
|
||||
`LV_CANVAS_BUF_SIZE_...` macros help to determine the size of the buffer with different color formats.
|
||||
|
||||
The canvas supports all the built-in color formats like `LV_IMG_CF_TRUE_COLOR` or `LV_IMG_CF_INDEXED_2BIT`.
|
||||
The canvas supports all the built-in color formats like `LV_IMG_CF_TRUE_COLOR` or `LV_IMG_CF_INDEXED_2BIT`.
|
||||
See the full list in the [Color formats](/overview/image.html#color-formats) section.
|
||||
|
||||
### Indexed colors
|
||||
For `LV_IMG_CF_INDEXED_1/2/4/8` color formats a palette needs to be
|
||||
For `LV_IMG_CF_INDEXED_1/2/4/8` color formats a palette needs to be
|
||||
initialized with `lv_canvas_set_palette(canvas, 3, LV_COLOR_RED)`. It sets pixels with *index=3* to red.
|
||||
|
||||
### Drawing
|
||||
To set a pixel's color on the canvas, use `lv_canvas_set_px_color(canvas, x, y, LV_COLOR_RED)`.
|
||||
With `LV_IMG_CF_INDEXED_...` the index of the color needs to be passed as color.
|
||||
With `LV_IMG_CF_INDEXED_...` the index of the color needs to be passed as color.
|
||||
E.g. `lv_color_t c; c.full = 3;`
|
||||
|
||||
To set a pixel's opacity with `LV_IMG_CF_TRUE_COLOR_ALPHA` or `LV_IMG_CF_ALPHA_...` format on the canvas, use `lv_canvas_set_px_opa(canvas, x, y, opa)`.
|
||||
|
||||
|
||||
`lv_canvas_fill_bg(canvas, LV_COLOR_BLUE, LV_OPA_50)` fills the whole canvas to blue with 50% opacity. Note that if the current color format doesn't support colors (e.g. `LV_IMG_CF_ALPHA_2BIT`) the color will be ignored.
|
||||
`lv_canvas_fill_bg(canvas, LV_COLOR_BLUE, LV_OPA_50)` fills the whole canvas to blue with 50% opacity. Note that if the current color format doesn't support colors (e.g. `LV_IMG_CF_ALPHA_2BIT`) the color will be ignored.
|
||||
Similarly, if opacity is not supported (e.g. `LV_IMG_CF_TRUE_COLOR`) it will be ignored.
|
||||
|
||||
An array of pixels can be copied to the canvas with `lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height)`.
|
||||
An array of pixels can be copied to the canvas with `lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height)`.
|
||||
The color format of the buffer and the canvas need to match.
|
||||
|
||||
To draw something to the canvas use
|
||||
|
|
@ -59,7 +59,7 @@ To draw something to the canvas use
|
|||
The draw function can draw to any color format. For example, it's possible to draw a text to an `LV_IMG_VF_ALPHA_8BIT` canvas and use the result image as a [draw mask](/overview/drawing) later.
|
||||
|
||||
### Transformations
|
||||
`lv_canvas_transform()` can be used to rotate and/or scale the image of an image and store the result on the canvas.
|
||||
`lv_canvas_transform()` can be used to rotate and/or scale the image of an image and store the result on the canvas.
|
||||
The function needs the following parameters:
|
||||
- `canvas` pointer to a canvas object to store the result of the transformation.
|
||||
- `img pointer` to an image descriptor to transform. Can be the image descriptor of another canvas too (`lv_canvas_get_img()`).
|
||||
|
|
@ -70,16 +70,16 @@ The function needs the following parameters:
|
|||
- `pivot_x` pivot X of rotation. Relative to the source canvas. Set to `source width / 2` to rotate around the center
|
||||
- `pivot_y` pivot Y of rotation. Relative to the source canvas. Set to `source height / 2` to rotate around the center
|
||||
- `antialias` true: apply anti-aliasing during the transformation. Looks better but slower.
|
||||
|
||||
|
||||
Note that a canvas can't be rotated on itself. You need a source and destination canvas or image.
|
||||
|
||||
### Blur
|
||||
A given area of the canvas can be blurred horizontally with `lv_canvas_blur_hor(canvas, &area, r)` or vertically with `lv_canvas_blur_ver(canvas, &area, r)`.
|
||||
A given area of the canvas can be blurred horizontally with `lv_canvas_blur_hor(canvas, &area, r)` or vertically with `lv_canvas_blur_ver(canvas, &area, r)`.
|
||||
`r` is the radius of the blur (greater value means more intensive burring). `area` is the area where the blur should be applied (interpreted relative to the canvas).
|
||||
|
||||
## Events
|
||||
No special events are sent by canvas objects.
|
||||
The same events are sent as for the
|
||||
The same events are sent as for the
|
||||
|
||||
See the events of the [Images](/widgets/core/img) too.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/checkbox.md
|
||||
```
|
||||
# Checkbox (lv_checkbox)
|
||||
|
|
@ -10,12 +10,12 @@
|
|||
The Checkbox object is created from a "tick box" and a label. When the Checkbox is clicked the tick box is toggled.
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The is the background of the Checkbox and it uses the text and all the typical background style properties.
|
||||
- `LV_PART_MAIN` The is the background of the Checkbox and it uses the text and all the typical background style properties.
|
||||
`pad_column` adjusts the spacing between the tickbox and the label
|
||||
- `LV_PART_INDICATOR` The "tick box" is a square that uses all the typical background style properties.
|
||||
- `LV_PART_INDICATOR` The "tick box" is a square that uses all the typical background style properties.
|
||||
By default, its size is equal to the height of the main part's font. Padding properties make the tick box larger in the respective directions.
|
||||
|
||||
The Checkbox is added to the default group (if it is set).
|
||||
The Checkbox is added to the default group (if it is set).
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ The Checkbox is added to the default group (if it is set).
|
|||
### Text
|
||||
The text can be modified with the `lv_checkbox_set_text(cb, "New text")` function and will be dynamically allocated.
|
||||
|
||||
To set a static text,
|
||||
To set a static text,
|
||||
use `lv_checkbox_set_static_text(cb, txt)`. This way, only a pointer to `txt` will be stored. The text then shouldn't be deallocated while the checkbox exists.
|
||||
|
||||
### Check, uncheck, disable
|
||||
|
|
@ -38,7 +38,7 @@ lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); /*Make the checkbox
|
|||
- `LV_EVENT_VALUE_CHANGED` Sent when the checkbox is toggled.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following types:
|
||||
- `LV_CHECKBOX_DRAW_PART_BOX` The tickbox of the checkbox
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `draw_area`: the area of the tickbox
|
||||
- `rect_dsc`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/dropdown.md
|
||||
```
|
||||
# Drop-down list (lv_dropdown)
|
||||
|
|
@ -7,10 +7,10 @@
|
|||
|
||||
## Overview
|
||||
|
||||
The drop-down list allows the user to select one value from a list.
|
||||
The drop-down list allows the user to select one value from a list.
|
||||
|
||||
The drop-down list is closed by default and displays a single value or a predefined text.
|
||||
When activated (by click on the drop-down list), a list is created from which the user may select one option.
|
||||
The drop-down list is closed by default and displays a single value or a predefined text.
|
||||
When activated (by click on the drop-down list), a list is created from which the user may select one option.
|
||||
When the user selects a new value, the list is deleted again.
|
||||
|
||||
The Drop-down list is added to the default group (if it is set). Besides the Drop-down list is an editable object to allow selecting an option with encoder navigation too.
|
||||
|
|
@ -25,9 +25,9 @@ The Dropdown widget is built from the elements: "button" and "list" (both not re
|
|||
The button goes to `LV_STATE_CHECKED` when it's opened.
|
||||
|
||||
### List
|
||||
- `LV_PART_MAIN` The list itself. Uses the typical background properties. `max_height` can be used to limit the height of the list.
|
||||
- `LV_PART_MAIN` The list itself. Uses the typical background properties. `max_height` can be used to limit the height of the list.
|
||||
- `LV_PART_SCROLLBAR` The scrollbar background, border, shadow properties and width (for its own width) and right padding for the spacing on the right.
|
||||
- `LV_PART_SELECTED` Refers to the currently pressed, checked or pressed+checked option. Also uses the typical background properties.
|
||||
- `LV_PART_SELECTED` Refers to the currently pressed, checked or pressed+checked option. Also uses the typical background properties.
|
||||
|
||||
The list is hidden/shown on open/close. To add styles to it use `lv_dropdown_get_list(dropdown)` to get the list object. For example:
|
||||
|
||||
|
|
@ -36,8 +36,8 @@ lv_obj_t * list = lv_dropdown_get_list(dropdown) /*Get the list*/
|
|||
lv_obj_add_style(list, &my_style, ...) /*Add the styles to the list*/}`
|
||||
```
|
||||
|
||||
Alternatively the theme can be extended with the new styles.
|
||||
|
||||
Alternatively the theme can be extended with the new styles.
|
||||
|
||||
## Usage
|
||||
|
||||
## Overview
|
||||
|
|
@ -47,7 +47,7 @@ Options are passed to the drop-down list as a string with `lv_dropdown_set_optio
|
|||
|
||||
The `lv_dropdown_add_option(dropdown, "New option", pos)` function inserts a new option to `pos` index.
|
||||
|
||||
To save memory the options can set from a static(constant) string too with `lv_dropdown_set_static_options(dropdown, options)`.
|
||||
To save memory the options can set from a static(constant) string too with `lv_dropdown_set_static_options(dropdown, options)`.
|
||||
In this case the options string should be alive while the drop-down list exists and `lv_dropdown_add_option` can't be used
|
||||
|
||||
You can select an option manually with `lv_dropdown_set_selected(dropdown, id)`, where `id` is the index of an option.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/img.md
|
||||
```
|
||||
# Image (lv_img)
|
||||
|
|
@ -35,7 +35,7 @@ To set an image sourced from a file, use `lv_img_set_src(img, "S:folder1/my_img.
|
|||
You can also set a symbol similarly to [Labels](/widgets/core/label). In this case, the image will be rendered as text according to the *font* specified in the style. It enables to use of light-weight monochrome "letters" instead of real images. You can set symbol like `lv_img_set_src(img1, LV_SYMBOL_OK)`.
|
||||
|
||||
### Label as an image
|
||||
Images and labels are sometimes used to convey the same thing. For example, to describe what a button does.
|
||||
Images and labels are sometimes used to convey the same thing. For example, to describe what a button does.
|
||||
Therefore, images and labels are somewhat interchangeable, that is the images can display texts by using `LV_SYMBOL_DUMMY` as the prefix of the text. For example, `lv_img_set_src(img, LV_SYMBOL_DUMMY "Some text")`.
|
||||
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ Using the offset parameter a [Texture atlas](https://en.wikipedia.org/wiki/Textu
|
|||
|
||||
## Transformations
|
||||
|
||||
Using the `lv_img_set_zoom(img, factor)` the images will be zoomed. Set `factor` to `256` or `LV_IMG_ZOOM_NONE` to disable zooming.
|
||||
Using the `lv_img_set_zoom(img, factor)` the images will be zoomed. Set `factor` to `256` or `LV_IMG_ZOOM_NONE` to disable zooming.
|
||||
A larger value enlarges the images (e.g. `512` double size), a smaller value shrinks it (e.g. `128` half size).
|
||||
Fractional scale works as well. E.g. `281` for 10% enlargement.
|
||||
|
||||
|
|
@ -87,16 +87,16 @@ By default, the pivot point of the rotation is the center of the image. It can b
|
|||
|
||||
The quality of the transformation can be adjusted with `lv_img_set_antialias(img, true/false)`. With enabled anti-aliasing the transformations are higher quality but slower.
|
||||
|
||||
The transformations require the whole image to be available. Therefore indexed images (`LV_IMG_CF_INDEXED_...`), alpha only images (`LV_IMG_CF_ALPHA_...`) or images from files can not be transformed.
|
||||
The transformations require the whole image to be available. Therefore indexed images (`LV_IMG_CF_INDEXED_...`), alpha only images (`LV_IMG_CF_ALPHA_...`) or images from files can not be transformed.
|
||||
In other words transformations work only on true color images stored as C array, or if a custom [Image decoder](/overview/images#image-edecoder) returns the whole image.
|
||||
|
||||
Note that the real coordinates of image objects won't change during transformation. That is `lv_obj_get_width/height/x/y()` will return the original, non-zoomed coordinates.
|
||||
|
||||
### Size mode
|
||||
|
||||
By default, when the image is zoomed or rotated the real coordinates of the image object are not changed.
|
||||
The larger content simply overflows the object's boundaries.
|
||||
It also means the layouts are not affected the by the transformations.
|
||||
By default, when the image is zoomed or rotated the real coordinates of the image object are not changed.
|
||||
The larger content simply overflows the object's boundaries.
|
||||
It also means the layouts are not affected the by the transformations.
|
||||
|
||||
If you need the object size to be updated to the transformed size set `lv_img_set_size_mode(img, LV_IMG_SIZE_MODE_REAL)`. (The previous mode is the default and called `LV_IMG_SIZE_MODE_VIRTUAL`).
|
||||
In this case if the width/height of the object is set to `LV_SIZE_CONTENT` the object's size will be set to the zoomed and rotated size.
|
||||
|
|
@ -104,8 +104,8 @@ If an explicit size is set then the overflowing content will be cropped.
|
|||
|
||||
### Rounded image
|
||||
|
||||
You can use `lv_obj_set_style_radius` to set radius to an image, and enable `lv_obj_set_style_clip_corner` to clip the
|
||||
content to rounded rectangle or circular shape. Please note this will have some negative performance impact to CPU
|
||||
You can use `lv_obj_set_style_radius` to set radius to an image, and enable `lv_obj_set_style_clip_corner` to clip the
|
||||
content to rounded rectangle or circular shape. Please note this will have some negative performance impact to CPU
|
||||
based renderers.
|
||||
|
||||
## Events
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/object-types/index.md
|
||||
```
|
||||
# Core widgets
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
|
||||
|
||||
arc
|
||||
bar
|
||||
btn
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
switch
|
||||
table
|
||||
textarea
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/line.md
|
||||
```
|
||||
# Line (lv_line)
|
||||
|
|
@ -12,14 +12,14 @@ The Line object is capable of drawing straight lines between a set of points.
|
|||
|
||||
## Usage
|
||||
|
||||
### Set points
|
||||
The points have to be stored in an `lv_point_t` array and passed to the object by the `lv_line_set_points(lines, point_array, point_cnt)` function.
|
||||
### Set points
|
||||
The points have to be stored in an `lv_point_t` array and passed to the object by the `lv_line_set_points(lines, point_array, point_cnt)` function.
|
||||
|
||||
### Auto-size
|
||||
By default, the Line's width and height are set to `LV_SIZE_CONTENT`. This means it will automatically set its size to fit all the points. If the size is set explicitly, parts on the line may not be visible.
|
||||
|
||||
### Invert y
|
||||
By default, the *y == 0* point is in the top of the object. It might be counter-intuitive in some cases so the y coordinates can be inverted with `lv_line_set_y_invert(line, true)`. In this case, *y == 0* will be the bottom of the object.
|
||||
By default, the *y == 0* point is in the top of the object. It might be counter-intuitive in some cases so the y coordinates can be inverted with `lv_line_set_y_invert(line, true)`. In this case, *y == 0* will be the bottom of the object.
|
||||
*y invert* is disabled by default.
|
||||
|
||||
## Events
|
||||
|
|
@ -42,11 +42,11 @@ Learn more about [Keys](/overview/indev).
|
|||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_line.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/roller.md
|
||||
```
|
||||
# Roller (lv_roller)
|
||||
|
||||
## Overview
|
||||
|
||||
Roller allows you to simply select one option from a list by scrolling.
|
||||
Roller allows you to simply select one option from a list by scrolling.
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the roller uses all the typical background properties and text style properties. `style_text_line_space` adjusts the space between the options.
|
||||
- `LV_PART_MAIN` The background of the roller uses all the typical background properties and text style properties. `style_text_line_space` adjusts the space between the options.
|
||||
When the Roller is scrolled and doesn't stop exactly on an option it will scroll to the nearest valid option automatically in `anim_time` milliseconds as specified in the style.
|
||||
- `LV_PART_SELECTED` The selected option in the middle. Besides the typical background properties it uses the text style properties to change the appearance of the text in the selected area.
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ To get the *index* of the currently selected option use `lv_roller_get_selected(
|
|||
### Visible rows
|
||||
The number of visible rows can be adjusted with `lv_roller_set_visible_row_count(roller, num)`.
|
||||
|
||||
This function calculates the height with the current style. If the font, line space, border width, etc. of the roller changes this function needs to be called again.
|
||||
This function calculates the height with the current style. If the font, line space, border width, etc. of the roller changes this function needs to be called again.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when a new option is selected.
|
||||
|
|
@ -42,7 +42,7 @@ Learn more about [Events](/overview/event).
|
|||
## Keys
|
||||
- `LV_KEY_RIGHT/DOWN` Select the next option
|
||||
- `LV_KEY_LEFT/UP` Select the previous option
|
||||
- `LY_KEY_ENTER` Apply the selected option (Send `LV_EVENT_VALUE_CHANGED` event)
|
||||
- `LY_KEY_ENTER` Apply the selected option (Send `LV_EVENT_VALUE_CHANGED` event)
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -52,11 +52,11 @@ Learn more about [Events](/overview/event).
|
|||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_roller.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/slider.md
|
||||
```
|
||||
# Slider (lv_slider)
|
||||
|
|
@ -9,10 +9,10 @@
|
|||
The Slider object looks like a [Bar](/widgets/core/bar) supplemented with a knob. The knob can be dragged to set a value. Just like Bar, Slider can be vertical or horizontal.
|
||||
|
||||
|
||||
## Parts and Styles
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the slider. Uses all the typical background style properties. `padding` makes the indicator smaller in the respective direction.
|
||||
- `LV_PART_INDICATOR` The indicator that shows the current state of the slider. Also uses all the typical background style properties.
|
||||
- `LV_PART_KNOB` A rectangle (or circle) drawn at the current value. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too.
|
||||
- `LV_PART_KNOB` A rectangle (or circle) drawn at the current value. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too.
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -30,22 +30,22 @@ The slider can be one of the following modes:
|
|||
The mode can be changed with `lv_slider_set_mode(slider, LV_SLIDER_MODE_...)`
|
||||
|
||||
### Knob-only mode
|
||||
Normally, the slider can be adjusted either by dragging the knob, or by clicking on the slider bar.
|
||||
Normally, the slider can be adjusted either by dragging the knob, or by clicking on the slider bar.
|
||||
In the latter case the knob moves to the point clicked and slider value changes accordingly. In some cases it is desirable to set the slider to react on dragging the knob only. This feature is enabled by adding the `LV_OBJ_FLAG_ADV_HITTEST`: `lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST)`.
|
||||
|
||||
The extended click area (set by `lv_obj_set_ext_click_area(slider, value)`) increases to knob's click area.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent while the slider is being dragged or changed with keys.
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent while the slider is being dragged or changed with keys.
|
||||
The event is sent continuously while the slider is dragged and once when released. Use `lv_slider_is_dragged` to determine whether the Slider is still being dragged or has just been released.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following parts.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following parts.
|
||||
- `LV_SLIDER_DRAW_PART_KNOB` The main (right) knob of the slider
|
||||
- `part`: `LV_PART_KNOB`
|
||||
- `part`: `LV_PART_KNOB`
|
||||
- `draw_area`: area of the indicator
|
||||
- `rect_dsc`
|
||||
- `id`: 0
|
||||
- `LV_SLIDER_DRAW_PART_KNOB` The left knob of the slider
|
||||
- `part`: `LV_PART_KNOB`
|
||||
- `part`: `LV_PART_KNOB`
|
||||
- `draw_area`: area of the indicator
|
||||
- `rect_dsc`
|
||||
- `id`: 1
|
||||
|
|
@ -68,11 +68,11 @@ Learn more about [Keys](/overview/indev).
|
|||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_slider.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/switch.md
|
||||
```
|
||||
|
||||
|
|
@ -7,20 +7,20 @@
|
|||
|
||||
## Overview
|
||||
|
||||
The Switch looks like a little slider and can be used to turn something on and off.
|
||||
The Switch looks like a little slider and can be used to turn something on and off.
|
||||
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the switch uses all the typical background style properties. `padding` makes the indicator smaller in the respective direction.
|
||||
- `LV_PART_INDICATOR` The indicator that shows the current state of the switch. Also uses all the typical background style properties.
|
||||
- `LV_PART_KNOB` A rectangle (or circle) drawn at left or right side of the indicator. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too.
|
||||
- `LV_PART_KNOB` A rectangle (or circle) drawn at left or right side of the indicator. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too.
|
||||
|
||||
## Usage
|
||||
|
||||
### Change state
|
||||
The switch uses the standard `LV_STATE_CHECKED` state.
|
||||
|
||||
To get the current state of the switch (with `true` being on), use `lv_obj_has_state(switch, LV_STATE_CHECKED)`.
|
||||
To get the current state of the switch (with `true` being on), use `lv_obj_has_state(switch, LV_STATE_CHECKED)`.
|
||||
|
||||
Call `lv_obj_add_state(switch, LV_STATE_CHECKED)` to turn it on, or `lv_obj_clear_state(switch, LV_STATE_CHECKED)` to turn it off.
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ Learn more about [Events](/overview/event).
|
|||
## Keys
|
||||
- `LV_KEY_UP/RIGHT` Turns on the slider
|
||||
- `LV_KEY_DOWN/LEFT` Turns off the slider
|
||||
- `LV_KEY_ENTER` Toggles the switch
|
||||
- `LV_KEY_ENTER` Toggles the switch
|
||||
|
||||
Learn more about [Keys](/overview/indev).
|
||||
|
||||
|
|
@ -47,11 +47,11 @@ Learn more about [Keys](/overview/indev).
|
|||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_switch.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/table.md
|
||||
```
|
||||
# Table (lv_table)
|
||||
|
|
@ -27,7 +27,7 @@ The cells can store only text so numbers need to be converted to text before dis
|
|||
|
||||
Line breaks can be used in the text like `"Value\n60.3"`.
|
||||
|
||||
New rows and columns are automatically added is required
|
||||
New rows and columns are automatically added is required
|
||||
|
||||
### Rows and Columns
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ The height is calculated automatically from the cell styles (font, padding etc)
|
|||
Cells can be merged horizontally with `lv_table_add_cell_ctrl(table, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT)`. To merge more adjacent cells call this function for each cell.
|
||||
|
||||
### Scroll
|
||||
If the label's width or height is set to `LV_SIZE_CONTENT` that size will be used to show the whole table in the respective direction.
|
||||
If the label's width or height is set to `LV_SIZE_CONTENT` that size will be used to show the whole table in the respective direction.
|
||||
E.g. `lv_obj_set_size(table, LV_SIZE_CONTENT, LV_SIZE_CONTENT)` automatically sets the table size to show all the columns and rows.
|
||||
|
||||
If the width or height is set to a smaller number than the "intrinsic" size then the table becomes scrollable.
|
||||
|
|
@ -53,11 +53,11 @@ If the width or height is set to a smaller number than the "intrinsic" size then
|
|||
- `LV_EVENT_VALUE_CHANGED` Sent when a new cell is selected with keys.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following types:
|
||||
- `LV_TABLE_DRAW_PART_CELL` The individual cells of the table
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `draw_area`: area of the indicator
|
||||
- `rect_dsc`
|
||||
- `label_dsc`
|
||||
- `id`: current row × col count + current column
|
||||
- `id`: current row × col count + current column
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
|
|
@ -85,11 +85,11 @@ Learn more about [Keys](/overview/indev).
|
|||
### MicroPython
|
||||
No examples yet.
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_table.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/textarea.md
|
||||
```
|
||||
# Text area (lv_textarea)
|
||||
|
||||
## Overview
|
||||
|
||||
The Text Area is a [Base object](widgets/obj) with a [Label](/widgets/core/label) and a cursor on it.
|
||||
Texts or characters can be added to it.
|
||||
The Text Area is a [Base object](widgets/obj) with a [Label](/widgets/core/label) and a cursor on it.
|
||||
Texts or characters can be added to it.
|
||||
Long lines are wrapped and when the text becomes long enough the Text area can be scrolled.
|
||||
|
||||
One line mode and password modes are supported.
|
||||
|
|
@ -16,9 +16,9 @@ One line mode and password modes are supported.
|
|||
- `LV_PART_MAIN` The background of the text area. Uses all the typical background style properties and the text related style properties including `text_align` to align the text to the left, right or center.
|
||||
- `LV_PART_SCROLLBAR` The scrollbar that is shown when the text is too long.
|
||||
- `LV_PART_SELECTED` Determines the style of the [selected text](/widgets/core/label.html#text-selection). Only `text_color` and `bg_color` style properties can be used. `bg_color` should be set directly on the label of the text area.
|
||||
- `LV_PART_CURSOR` Marks the position where the characters are inserted. The cursor's area is always the bounding box of the current character.
|
||||
A block cursor can be created by adding a background color and background opacity to `LV_PART_CURSOR`'s style. The create line cursor leave the cursor transparent and set a left border.
|
||||
The `anim_time` style property sets the cursor's blink time.
|
||||
- `LV_PART_CURSOR` Marks the position where the characters are inserted. The cursor's area is always the bounding box of the current character.
|
||||
A block cursor can be created by adding a background color and background opacity to `LV_PART_CURSOR`'s style. The create line cursor leave the cursor transparent and set a left border.
|
||||
The `anim_time` style property sets the cursor's blink time.
|
||||
- `LV_PART_TEXTAREA_PLACEHOLDER` Unique to Text Area, allows styling the placeholder text.
|
||||
|
||||
## Usage
|
||||
|
|
@ -40,13 +40,13 @@ A placeholder text can be specified - which is displayed when the Text area is e
|
|||
|
||||
### Delete character
|
||||
|
||||
To delete a character from the left of the current cursor position use `lv_textarea_del_char(textarea)`.
|
||||
To delete a character from the left of the current cursor position use `lv_textarea_del_char(textarea)`.
|
||||
To delete from the right use `lv_textarea_del_char_forward(textarea)`
|
||||
|
||||
### Move the cursor
|
||||
|
||||
The cursor position can be modified directly like `lv_textarea_set_cursor_pos(textarea, 10)`.
|
||||
The `0` position means "before the first characters",
|
||||
The cursor position can be modified directly like `lv_textarea_set_cursor_pos(textarea, 10)`.
|
||||
The `0` position means "before the first characters",
|
||||
`LV_TA_CURSOR_LAST` means "after the last character"
|
||||
|
||||
You can step the cursor with
|
||||
|
|
@ -58,16 +58,16 @@ You can step the cursor with
|
|||
If `lv_textarea_set_cursor_click_pos(textarea, true)` is applied the cursor will jump to the position where the Text area was clicked.
|
||||
|
||||
### Hide the cursor
|
||||
The cursor is always visible, however it can be a good idea to style it to be visible only in `LV_STATE_FOCUSED` state.
|
||||
The cursor is always visible, however it can be a good idea to style it to be visible only in `LV_STATE_FOCUSED` state.
|
||||
|
||||
### One line mode
|
||||
The Text area can be configured to be on a single line with `lv_textarea_set_one_line(textarea, true)`.
|
||||
In this mode the height is set automatically to show only one line, line break characters are ignored, and word wrap is disabled.
|
||||
The Text area can be configured to be on a single line with `lv_textarea_set_one_line(textarea, true)`.
|
||||
In this mode the height is set automatically to show only one line, line break characters are ignored, and word wrap is disabled.
|
||||
|
||||
### Password mode
|
||||
The text area supports password mode which can be enabled with `lv_textarea_set_password_mode(textarea, true)`.
|
||||
The text area supports password mode which can be enabled with `lv_textarea_set_password_mode(textarea, true)`.
|
||||
|
||||
If the `•` ([Bullet, U+2022](http://www.fileformat.info/info/unicode/char/2022/index.htm)) character exists in the font, the entered characters are converted to it after some time or when a new character is entered.
|
||||
If the `•` ([Bullet, U+2022](http://www.fileformat.info/info/unicode/char/2022/index.htm)) character exists in the font, the entered characters are converted to it after some time or when a new character is entered.
|
||||
If `•` not exists, `*` will be used.
|
||||
|
||||
In password mode `lv_textarea_get_text(textarea)` returns the actual text entered, not the bullet characters.
|
||||
|
|
@ -75,28 +75,28 @@ In password mode `lv_textarea_get_text(textarea)` returns the actual text entere
|
|||
The visibility time can be adjusted with `LV_TEXTAREA_DEF_PWD_SHOW_TIME)` in `lv_conf.h`.
|
||||
|
||||
### Accepted characters
|
||||
You can set a list of accepted characters with `lv_textarea_set_accepted_chars(textarea, "0123456789.+-")`.
|
||||
Other characters will be ignored.
|
||||
You can set a list of accepted characters with `lv_textarea_set_accepted_chars(textarea, "0123456789.+-")`.
|
||||
Other characters will be ignored.
|
||||
|
||||
### Max text length
|
||||
The maximum number of characters can be limited with `lv_textarea_set_max_length(textarea, max_char_num)`
|
||||
|
||||
|
||||
### Very long texts
|
||||
If there is a very long text in the Text area (e.g. > 20k characters), scrolling and drawing might be slow.
|
||||
However, by enabling `LV_LABEL_LONG_TXT_HINT 1` in `lv_conf.h` the performance can be hugely improved.
|
||||
This will save some additional information about the label to speed up its drawing.
|
||||
If there is a very long text in the Text area (e.g. > 20k characters), scrolling and drawing might be slow.
|
||||
However, by enabling `LV_LABEL_LONG_TXT_HINT 1` in `lv_conf.h` the performance can be hugely improved.
|
||||
This will save some additional information about the label to speed up its drawing.
|
||||
Using `LV_LABEL_LONG_TXT_HINT` the scrolling and drawing will as fast as with "normal" short texts.
|
||||
|
||||
### Select text
|
||||
Any part of the text can be selected if enabled with `lv_textarea_set_text_selection(textarea, true)`.
|
||||
This works much like when you select text on your PC with your mouse.
|
||||
Any part of the text can be selected if enabled with `lv_textarea_set_text_selection(textarea, true)`.
|
||||
This works much like when you select text on your PC with your mouse.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_INSERT` Sent right before a character or text is inserted.
|
||||
The event parameter is the text about to be inserted. `lv_textarea_set_insert_replace(textarea, "New text")` replaces the text to insert.
|
||||
- `LV_EVENT_INSERT` Sent right before a character or text is inserted.
|
||||
The event parameter is the text about to be inserted. `lv_textarea_set_insert_replace(textarea, "New text")` replaces the text to insert.
|
||||
The new text cannot be in a local variable which is destroyed when the event callback exists. `""` means do not insert anything.
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when the content of the text area has been changed.
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when the content of the text area has been changed.
|
||||
- `LV_EVENT_READY` Sent when `LV_KEY_ENTER` is pressed (or sent) to a one line text area.
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
|
@ -117,11 +117,11 @@ Learn more about [Keys](/overview/indev).
|
|||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_textarea.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/animimg.md
|
||||
```
|
||||
# Animation Image (lv_animimg)
|
||||
|
|
@ -13,13 +13,13 @@ You can specify a duration and repeat count.
|
|||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` A background rectangle that uses the typical background style properties and the image itself using the image style properties.
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Image sources
|
||||
To set the image in a state, use the `lv_animimg_set_src(imgbtn, dsc[], num)`.
|
||||
|
||||
|
||||
|
||||
## Events
|
||||
No special events are sent by image objects.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/calendar.md
|
||||
```
|
||||
# Calendar (lv_calendar)
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
## Overview
|
||||
|
||||
The Calendar object is a classic calendar which can:
|
||||
- show the days of any month in a 7x7 matrix
|
||||
- Show the name of the days
|
||||
- show the days of any month in a 7x7 matrix
|
||||
- Show the name of the days
|
||||
- highlight the current day (today)
|
||||
- highlight any user-defined dates
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ The name of the days can be adjusted with `lv_calendar_set_day_names(calendar, d
|
|||
Only the pointer of the day names is saved so the elements should be static, global or constant variables.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent if a date is clicked. `lv_calendar_get_pressed_date(calendar, &date)` set `date` to the date currently being pressed. Returns `LV_RES_OK` if there is a valid pressed date, else `LV_RES_INV`.
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent if a date is clicked. `lv_calendar_get_pressed_date(calendar, &date)` set `date` to the date currently being pressed. Returns `LV_RES_OK` if there is a valid pressed date, else `LV_RES_INV`.
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ Learn more about [Keys](/overview/indev).
|
|||
|
||||
### Drop-down
|
||||
`lv_calendar_header_dropdown_create(calendar)` creates a header that contains 2 drop-drown lists: one for the year and another for the month.
|
||||
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/chart.md
|
||||
```
|
||||
# Chart (lv_chart)
|
||||
|
|
@ -20,7 +20,7 @@ Charts can have:
|
|||
- `LV_PART_SCROLLBAR` The scrollbar used if the chart is zoomed. See the [Base object](/widgets/obj)'s documentation for details.
|
||||
- `LV_PART_ITEMS` Refers to the line or bar series.
|
||||
- Line chart: The *line* properties are used by the lines. `width`, `height`, `bg_color` and `radius` is used to set the appearance of points.
|
||||
- Bar chart: The typical background properties are used to style the bars.
|
||||
- Bar chart: The typical background properties are used to style the bars.
|
||||
- `LV_PART_INDICATOR` Refers to the points on line and scatter chart (small circles or squares).
|
||||
- `LV_PART_CURSOR` *Line* properties are used to style the cursors. `width`, `height`, `bg_color` and `radius` are used to set the appearance of points.
|
||||
- `LV_PART_TICKS` *Line* and *Text* style properties are used to style the ticks
|
||||
|
|
@ -35,7 +35,7 @@ The following data display types exist:
|
|||
- `LV_CHART_TYPE_BAR` - Draw bars.
|
||||
- `LV_CHART_TYPE_SCATTER` - X/Y chart drawing point's and lines between the points. .
|
||||
|
||||
You can specify the display type with `lv_chart_set_type(chart, LV_CHART_TYPE_...)`.
|
||||
You can specify the display type with `lv_chart_set_type(chart, LV_CHART_TYPE_...)`.
|
||||
|
||||
|
||||
### Data series
|
||||
|
|
@ -49,9 +49,9 @@ You can add any number of series to the charts by `lv_chart_add_series(chart, co
|
|||
|
||||
`axis` tells which axis's range should be used te scale the values.
|
||||
|
||||
`lv_chart_set_ext_y_array(chart, ser, value_array)` makes the chart use an external array for the given series.
|
||||
`lv_chart_set_ext_y_array(chart, ser, value_array)` makes the chart use an external array for the given series.
|
||||
`value_array` should look like this: `lv_coord_t * value_array[num_points]`. The array size needs to be large enough to hold all the points of that series.
|
||||
The array's pointer will be saved in the chart so it needs to be global, static or dynamically allocated.
|
||||
The array's pointer will be saved in the chart so it needs to be global, static or dynamically allocated.
|
||||
Note: you should call `lv_chart_refresh(chart)` after the external data source has been updated to update the chart.
|
||||
|
||||
The value array of a series can be obtained with `lv_chart_get_y_array(chart, ser)`, which can be used with `ext_array` or *normal array*s.
|
||||
|
|
@ -79,22 +79,22 @@ The update mode can be changed with `lv_chart_set_update_mode(chart, LV_CHART_UP
|
|||
|
||||
### Number of points
|
||||
The number of points in the series can be modified by `lv_chart_set_point_count(chart, point_num)`. The default value is 10.
|
||||
Note: this also affects the number of points processed when an external buffer is assigned to a series, so you need to be sure the external array is large enough.
|
||||
Note: this also affects the number of points processed when an external buffer is assigned to a series, so you need to be sure the external array is large enough.
|
||||
|
||||
#### Handling large number of points
|
||||
On line charts, if the number of points is greater than the pixels horizontally, the Chart will draw only vertical lines to make the drawing of large amount of data effective.
|
||||
On line charts, if the number of points is greater than the pixels horizontally, the Chart will draw only vertical lines to make the drawing of large amount of data effective.
|
||||
If there are, let's say, 10 points to a pixel, LVGL searches the smallest and the largest value and draws a vertical lines between them to ensure no peaks are missed.
|
||||
|
||||
### Vertical range
|
||||
You can specify the minimum and maximum values in y-direction with `lv_chart_set_range(chart, axis, min, max)`.
|
||||
You can specify the minimum and maximum values in y-direction with `lv_chart_set_range(chart, axis, min, max)`.
|
||||
`axis` can be `LV_CHART_AXIS_PRIMARY` (left axis) or `LV_CHART_AXIS_SECONDARY` (right axis).
|
||||
|
||||
The value of the points will be scaled proportionally. The default range is: 0..100.
|
||||
|
||||
### Division lines
|
||||
The number of horizontal and vertical division lines can be modified by `lv_chart_set_div_line_count(chart, hdiv_num, vdiv_num)`.
|
||||
The default settings are 3 horizontal and 5 vertical division lines.
|
||||
If there is a visible border on a side and no padding on that side, the division line would be drawn on top of the border and therefore it won't be drawn.
|
||||
The number of horizontal and vertical division lines can be modified by `lv_chart_set_div_line_count(chart, hdiv_num, vdiv_num)`.
|
||||
The default settings are 3 horizontal and 5 vertical division lines.
|
||||
If there is a visible border on a side and no padding on that side, the division line would be drawn on top of the border and therefore it won't be drawn.
|
||||
|
||||
### Override default start point for series
|
||||
If you want a plot to start from a point other than the default which is `point[0]` of the series, you can set an alternative
|
||||
|
|
@ -119,15 +119,15 @@ If `factor` is 256 there is no zoom. 512 means double zoom, etc. Fractional valu
|
|||
|
||||
### Cursor
|
||||
|
||||
A cursor can be added with `lv_chart_cursor_t * c1 = lv_chart_add_cursor(chart, color, dir);`.
|
||||
The possible values of `dir` `LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL` or their OR-ed values to tell in which direction(s) should the cursor be drawn.
|
||||
A cursor can be added with `lv_chart_cursor_t * c1 = lv_chart_add_cursor(chart, color, dir);`.
|
||||
The possible values of `dir` `LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL` or their OR-ed values to tell in which direction(s) should the cursor be drawn.
|
||||
|
||||
`lv_chart_set_cursor_pos(chart, cursor, &point)` sets the position of the cursor.
|
||||
`lv_chart_set_cursor_pos(chart, cursor, &point)` sets the position of the cursor.
|
||||
`pos` is a pointer to an `lv_point_t` variable. E.g. `lv_point_t point = {10, 20};`. If the chart is scrolled the cursor will remain in the same place.
|
||||
|
||||
`lv_chart_get_point_pos_by_id(chart, series, id, &point_out)` gets the coordinate of a given point. It's useful to place the cursor at a given point.
|
||||
|
||||
`lv_chart_set_cursor_point(chart, cursor, series, point_id)` sticks the cursor at a point. If the point's position changes (new value or scrolling) the cursor will move with the point.
|
||||
`lv_chart_set_cursor_point(chart, cursor, series, point_id)` sticks the cursor at a point. If the point's position changes (new value or scrolling) the cursor will move with the point.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when a new point is clicked pressed. `lv_chart_get_pressed_point(chart)` returns the zero-based index of the pressed point.
|
||||
|
|
@ -135,12 +135,12 @@ The possible values of `dir` `LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL` or th
|
|||
- `LV_CHART_DRAW_PART_DIV_LINE_INIT` Used before/after drawn the div lines to add masks to any extra drawings. The following fields are set:
|
||||
- `part`: `LV_PART_MAIN`
|
||||
- `line_dsc`
|
||||
- `LV_CHART_DRAW_PART_DIV_LINE_HOR`, `LV_CHART_DRAW_PART_DIV_LINE_VER` Used for each horizontal and vertical division lines.
|
||||
- `part`: `LV_PART_MAIN`
|
||||
- `LV_CHART_DRAW_PART_DIV_LINE_HOR`, `LV_CHART_DRAW_PART_DIV_LINE_VER` Used for each horizontal and vertical division lines.
|
||||
- `part`: `LV_PART_MAIN`
|
||||
- `id`: index of the line
|
||||
- `p1`, `p2`: points of the line
|
||||
- `line_dsc`
|
||||
- `LV_CHART_DRAW_PART_LINE_AND_POINT` Used on line and scatter charts for lines and points.
|
||||
- `LV_CHART_DRAW_PART_LINE_AND_POINT` Used on line and scatter charts for lines and points.
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `id`: index of the point
|
||||
- `value`: value of `id`th point
|
||||
|
|
@ -149,29 +149,29 @@ The possible values of `dir` `LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL` or th
|
|||
- `line_dsc`
|
||||
- `rect_dsc`
|
||||
- `sub_part_ptr`: pointer to the series
|
||||
- `LV_CHART_DRAW_PART_BAR` Used on bar charts for the rectangles.
|
||||
- `LV_CHART_DRAW_PART_BAR` Used on bar charts for the rectangles.
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `id`: index of the point
|
||||
- `value`: value of `id`th point
|
||||
- `value`: value of `id`th point
|
||||
- `draw_area`: area of the point
|
||||
- `rect_dsc`:
|
||||
- `sub_part_ptr`: pointer to the series
|
||||
- `LV_CHART_DRAW_PART_CURSOR` Used on cursor lines and points.
|
||||
- `part`: `LV_PART_CURSOR`
|
||||
- `part`: `LV_PART_CURSOR`
|
||||
- `p1`, `p2`: points of the line
|
||||
- `line_dsc`
|
||||
- `rect_dsc`
|
||||
- `draw_area`: area of the points
|
||||
- `LV_CHART_DRAW_PART_TICK_LABEL` Used on tick lines and labels.
|
||||
- `part`: `LV_PART_TICKS`
|
||||
- `part`: `LV_PART_TICKS`
|
||||
- `id`: axis
|
||||
- `value`: value of the tick
|
||||
- `text`: `value` converted to decimal or `NULL` for minor ticks
|
||||
- `line_dsc`,
|
||||
- `label_dsc`,
|
||||
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
## Keys
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/colorwheel.md
|
||||
```
|
||||
# Color wheel (lv_colorwheel)
|
||||
|
||||
## Overview
|
||||
As its name implies *Color wheel* allows the user to select a color. The Hue, Saturation and Value of the color can be selected separately.
|
||||
As its name implies *Color wheel* allows the user to select a color. The Hue, Saturation and Value of the color can be selected separately.
|
||||
|
||||
Long pressing the object, the color wheel will change to the next parameter of the color (hue, saturation or value). A double click will reset the current parameter.
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ Long pressing the object, the color wheel will change to the next parameter of t
|
|||
|
||||
### Create a color wheel
|
||||
|
||||
`lv_colorwheel_create(parent, knob_recolor)` creates a new color wheel. With `knob_recolor=true` the knob's background color will be set to the current color.
|
||||
`lv_colorwheel_create(parent, knob_recolor)` creates a new color wheel. With `knob_recolor=true` the knob's background color will be set to the current color.
|
||||
|
||||
### Set color
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/imgbtn.md
|
||||
```
|
||||
# Image button (lv_imgbtn)
|
||||
|
|
@ -19,7 +19,7 @@ You can set a left, right and center image, and the center image will be repeate
|
|||
|
||||
### Image sources
|
||||
To set the image in a state, use the `lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_..., src_left, src_center, src_right)`.
|
||||
|
||||
|
||||
The image sources work the same as described in the [Image object](/widgets/core/img) except that "Symbols" are not supported by the Image button.
|
||||
Any of the sources can `NULL`.
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ The possible states are:
|
|||
- `LV_IMGBTN_STATE_CHECKED_PRESSED`
|
||||
- `LV_IMGBTN_STATE_CHECKED_DISABLED`
|
||||
|
||||
If you set sources only in `LV_IMGBTN_STATE_RELEASED`, these sources will be used in other states too.
|
||||
If you set sources only in `LV_IMGBTN_STATE_RELEASED`, these sources will be used in other states too.
|
||||
If you set e.g. `LV_IMGBTN_STATE_PRESSED` they will be used in pressed state instead of the released images.
|
||||
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue