mirror of
https://github.com/lvgl/lvgl.git
synced 2025-01-14 06:42:58 +08:00
docs(README): add more examples
This commit is contained in:
Gabor Kiss-Vamosi
GitHub
parent
0d9ab4ee0e
commit
f0d90a65a6
244
README.md
244
README.md
@ -121,12 +121,16 @@ LVGL is available as:
|
||||
|
||||
See how to create a button with a click event in C and MicroPython. For more examples see the [Examples](https://github.com/lvgl/lvgl/tree/master/examples) folder.
|
||||
|
||||
|
||||
### Button with Click Event
|
||||
|
||||
|
||||
|
||||
<details>
|
||||
<summary>C code</summary>
|
||||
|
||||
### C
|
||||
```c
|
||||
lv_obj_t * btn = lv_btn_create(lv_scr_act()); /*Add a button to the current screen*/
|
||||
lv_obj_set_pos(btn, 10, 10); /*Set its position*/
|
||||
lv_obj_center(btn); /*Set its position*/
|
||||
lv_obj_set_size(btn, 100, 50); /*Set its size*/
|
||||
lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/
|
||||
|
||||
@ -140,14 +144,18 @@ void btn_event_cb(lv_event_t * e)
|
||||
printf("Clicked\n");
|
||||
}
|
||||
```
|
||||
### Micropython
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>MicroPython code | <a href="https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/widgets/slider/lv_example_slider_2.py&script_direct=926bde43ec7af0146c486de470c53f11f167491e">Online Simulator</a></summary>
|
||||
|
||||
```python
|
||||
def btn_event_cb(e):
|
||||
print("Clicked")
|
||||
|
||||
# Create a Button and a Label
|
||||
btn = lv.btn(lv.scr_act())
|
||||
btn.set_pos(10, 10)
|
||||
btn.center()
|
||||
btn.set_size(100, 50)
|
||||
btn.add_event_cb(btn_event_cb, lv.EVENT.CLICKED, None)
|
||||
|
||||
@ -155,8 +163,232 @@ label = lv.label(btn)
|
||||
label.set_text("Button")
|
||||
label.center()
|
||||
```
|
||||
</details>
|
||||
<br>
|
||||
|
||||
Learn more about [Micropython](https://docs.lvgl.io/master/get-started/bindings/micropython.html).
|
||||
### Checkboxes with Layout
|
||||
|
||||
|
||||
<details>
|
||||
<summary>C code</summary>
|
||||
|
||||
```c
|
||||
|
||||
lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);
|
||||
lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
|
||||
|
||||
lv_obj_t * cb;
|
||||
cb = lv_checkbox_create(lv_scr_act());
|
||||
lv_checkbox_set_text(cb, "Apple");
|
||||
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
|
||||
|
||||
cb = lv_checkbox_create(lv_scr_act());
|
||||
lv_checkbox_set_text(cb, "Banana");
|
||||
lv_obj_add_state(cb, LV_STATE_CHECKED);
|
||||
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
|
||||
|
||||
cb = lv_checkbox_create(lv_scr_act());
|
||||
lv_checkbox_set_text(cb, "Lemon");
|
||||
lv_obj_add_state(cb, LV_STATE_DISABLED);
|
||||
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
|
||||
|
||||
cb = lv_checkbox_create(lv_scr_act());
|
||||
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
|
||||
lv_checkbox_set_text(cb, "Melon\nand a new line");
|
||||
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>MicroPython code | <a href="https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/widgets/slider/lv_example_slider_2.py&script_direct=311d37e5f70daf1cb0d2cad24c7f72751b5f1792">Online Simulator</a></summary>
|
||||
|
||||
```python
|
||||
def event_handler(e):
|
||||
code = e.get_code()
|
||||
obj = e.get_target()
|
||||
if code == lv.EVENT.VALUE_CHANGED:
|
||||
txt = obj.get_text()
|
||||
if obj.get_state() & lv.STATE.CHECKED:
|
||||
state = "Checked"
|
||||
else:
|
||||
state = "Unchecked"
|
||||
print(txt + ":" + state)
|
||||
|
||||
|
||||
lv.scr_act().set_flex_flow(lv.FLEX_FLOW.COLUMN)
|
||||
lv.scr_act().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER)
|
||||
|
||||
cb = lv.checkbox(lv.scr_act())
|
||||
cb.set_text("Apple")
|
||||
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
|
||||
|
||||
cb = lv.checkbox(lv.scr_act())
|
||||
cb.set_text("Banana")
|
||||
cb.add_state(lv.STATE.CHECKED)
|
||||
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
|
||||
|
||||
cb = lv.checkbox(lv.scr_act())
|
||||
cb.set_text("Lemon")
|
||||
cb.add_state(lv.STATE.DISABLED)
|
||||
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
|
||||
|
||||
cb = lv.checkbox(lv.scr_act())
|
||||
cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
|
||||
cb.set_text("Melon")
|
||||
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
|
||||
```
|
||||
|
||||
</details>
|
||||
<br>
|
||||
|
||||
### Styling a Slider
|
||||
|
||||
|
||||
|
||||
<details>
|
||||
<summary>C code</summary>
|
||||
|
||||
```c
|
||||
lv_obj_t * slider = lv_slider_create(lv_scr_act());
|
||||
lv_slider_set_value(slider, 70, LV_ANIM_OFF);
|
||||
lv_obj_set_size(slider, 300, 20);
|
||||
lv_obj_center(slider);
|
||||
|
||||
/*Add local styles to MAIN part (background rectangle)*/
|
||||
lv_obj_set_style_bg_color(slider, lv_color_hex(0x0F1215), LV_PART_MAIN);
|
||||
lv_obj_set_style_bg_opa(slider, 255, LV_PART_MAIN);
|
||||
lv_obj_set_style_border_color(slider, lv_color_hex(0x333943), LV_PART_MAIN);
|
||||
lv_obj_set_style_border_width(slider, 5, LV_PART_MAIN);
|
||||
lv_obj_set_style_pad_all(slider, 5, LV_PART_MAIN);
|
||||
|
||||
/*Create a reusable style sheet for the INDICATOR part*/
|
||||
static lv_style_t style_indicator;
|
||||
lv_style_init(&style_indicator);
|
||||
lv_style_set_bg_color(&style_indicator, lv_color_hex(0x37B9F5));
|
||||
lv_style_set_bg_grad_color(&style_indicator, lv_color_hex(0x1464F0));
|
||||
lv_style_set_bg_grad_dir(&style_indicator, LV_GRAD_DIR_HOR);
|
||||
lv_style_set_shadow_color(&style_indicator, lv_color_hex(0x37B9F5));
|
||||
lv_style_set_shadow_width(&style_indicator, 15);
|
||||
lv_style_set_shadow_spread(&style_indicator, 5);
|
||||
|
||||
/*Add the style sheet to the slider's INDICATOR part*/
|
||||
lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);
|
||||
|
||||
/*Add the same style to the KNOB part too and locally overwrite some properties*/
|
||||
lv_obj_add_style(slider, &style_indicator, LV_PART_KNOB);
|
||||
|
||||
lv_obj_set_style_outline_color(slider, lv_color_hex(0x0096FF), LV_PART_KNOB);
|
||||
lv_obj_set_style_outline_width(slider, 3, LV_PART_KNOB);
|
||||
lv_obj_set_style_outline_pad(slider, -5, LV_PART_KNOB);
|
||||
lv_obj_set_style_shadow_spread(slider, 2, LV_PART_KNOB);
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>MicroPython code |
|
||||
<a href="https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/widgets/slider/lv_example_slider_2.py&script_direct=c431c7b4dfd2cc0dd9c392b74365d5af6ea986f0">Online Simulator</a>
|
||||
</summary>
|
||||
|
||||
|
||||
```python
|
||||
# Create a slider and add the style
|
||||
slider = lv.slider(lv.scr_act())
|
||||
slider.set_value(70, lv.ANIM.OFF)
|
||||
slider.set_size(300, 20)
|
||||
slider.center()
|
||||
|
||||
# Add local styles to MAIN part (background rectangle)
|
||||
slider.set_style_bg_color(lv.color_hex(0x0F1215), lv.PART.MAIN)
|
||||
slider.set_style_bg_opa(255, lv.PART.MAIN)
|
||||
slider.set_style_border_color(lv.color_hex(0x333943), lv.PART.MAIN)
|
||||
slider.set_style_border_width(5, lv.PART.MAIN)
|
||||
slider.set_style_pad_all(5, lv.PART.MAIN)
|
||||
|
||||
# Create a reusable style sheet for the INDICATOR part
|
||||
style_indicator = lv.style_t()
|
||||
style_indicator.init()
|
||||
style_indicator.set_bg_color(lv.color_hex(0x37B9F5))
|
||||
style_indicator.set_bg_grad_color(lv.color_hex(0x1464F0))
|
||||
style_indicator.set_bg_grad_dir(lv.GRAD_DIR.HOR)
|
||||
style_indicator.set_shadow_color(lv.color_hex(0x37B9F5))
|
||||
style_indicator.set_shadow_width(15)
|
||||
style_indicator.set_shadow_spread(5)
|
||||
|
||||
# Add the style sheet to the slider's INDICATOR part
|
||||
slider.add_style(style_indicator, lv.PART.INDICATOR)
|
||||
slider.add_style(style_indicator, lv.PART.KNOB)
|
||||
|
||||
# Add the same style to the KNOB part too and locally overwrite some properties
|
||||
slider.set_style_outline_color(lv.color_hex(0x0096FF), lv.PART.KNOB)
|
||||
slider.set_style_outline_width(3, lv.PART.KNOB)
|
||||
slider.set_style_outline_pad(-5, lv.PART.KNOB)
|
||||
slider.set_style_shadow_spread(2, lv.PART.KNOB)
|
||||
```
|
||||
</details>
|
||||
<br>
|
||||
|
||||
### English, Hebrew (mixed LRT-RTL) and Chinese texts
|
||||
|
||||
|
||||
|
||||
<details>
|
||||
<summary>C code</summary>
|
||||
|
||||
```c
|
||||
lv_obj_t * ltr_label = lv_label_create(lv_scr_act());
|
||||
lv_label_set_text(ltr_label, "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");
|
||||
lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
|
||||
lv_obj_set_width(ltr_label, 310);
|
||||
lv_obj_align(ltr_label, LV_ALIGN_TOP_LEFT, 5, 5);
|
||||
|
||||
lv_obj_t * rtl_label = lv_label_create(lv_scr_act());
|
||||
lv_label_set_text(rtl_label,"מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).");
|
||||
lv_obj_set_style_base_dir(rtl_label, LV_BASE_DIR_RTL, 0);
|
||||
lv_obj_set_style_text_font(rtl_label, &lv_font_dejavu_16_persian_hebrew, 0);
|
||||
lv_obj_set_width(rtl_label, 310);
|
||||
lv_obj_align(rtl_label, LV_ALIGN_LEFT_MID, 5, 0);
|
||||
|
||||
lv_obj_t * cz_label = lv_label_create(lv_scr_act());
|
||||
lv_label_set_text(cz_label,
|
||||
"嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
|
||||
lv_obj_set_style_text_font(cz_label, &lv_font_simsun_16_cjk, 0);
|
||||
lv_obj_set_width(cz_label, 310);
|
||||
lv_obj_align(cz_label, LV_ALIGN_BOTTOM_LEFT, 5, -5);
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
<details>
|
||||
<summary>MicroPython code | <a href="https://sim.lvgl.io/v8.3/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/widgets/slider/lv_example_slider_2.py&script_direct=18bb38200a64e10ead1aa17a65c977fc18131842">Online Simulator</a></summary>
|
||||
|
||||
```python
|
||||
ltr_label = lv.label(lv.scr_act())
|
||||
ltr_label.set_text("In modern terminology, a microcontroller is similar to a system on a chip (SoC).")
|
||||
ltr_label.set_style_text_font(lv.font_montserrat_16, 0);
|
||||
|
||||
ltr_label.set_width(310)
|
||||
ltr_label.align(lv.ALIGN.TOP_LEFT, 5, 5)
|
||||
|
||||
rtl_label = lv.label(lv.scr_act())
|
||||
rtl_label.set_text("מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).")
|
||||
rtl_label.set_style_base_dir(lv.BASE_DIR.RTL, 0)
|
||||
rtl_label.set_style_text_font(lv.font_dejavu_16_persian_hebrew, 0)
|
||||
rtl_label.set_width(310)
|
||||
rtl_label.align(lv.ALIGN.LEFT_MID, 5, 0)
|
||||
|
||||
font_simsun_16_cjk = lv.font_load("S:../../assets/font/lv_font_simsun_16_cjk.fnt")
|
||||
|
||||
cz_label = lv.label(lv.scr_act())
|
||||
cz_label.set_style_text_font(font_simsun_16_cjk, 0)
|
||||
cz_label.set_text("嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。")
|
||||
cz_label.set_width(310)
|
||||
cz_label.align(lv.ALIGN.BOTTOM_LEFT, 5, -5)
|
||||
|
||||
```
|
||||
</details>
|
||||
|
||||
## :handshake: Services
|
||||
LVGL LLC was established to provide a solid background for LVGL library and to offer several type of services to help you in UI development. With 15+ years of experience in the user interface and graphics industry we can help you the bring your UI to the next level.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user