From f0d90a65a6e5e0582d8072841c6a26d7638826c1 Mon Sep 17 00:00:00 2001 From: Gabor Kiss-Vamosi Date: Thu, 14 Jul 2022 12:27:20 +0200 Subject: [PATCH] docs(README): add more examples --- README.md | 244 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 238 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 67e2fec6c..337ddd41f 100644 --- a/README.md +++ b/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. -![LVGL button with label example](https://github.com/lvgl/lvgl/raw/master/docs/misc/btn_example.png) +### Button with Click Event + +![LVGL button with label example](https://github.com/kisvegabor/test/raw/master/readme_example_1.gif) + +
+ C code -### 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 +
+ +
+ MicroPython code | Online Simulator + ```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() ``` +
+
-Learn more about [Micropython](https://docs.lvgl.io/master/get-started/bindings/micropython.html). +### Checkboxes with Layout +![Checkboxes with layout in LVGL](https://github.com/kisvegabor/test/raw/master/readme_example_2.gif) + +
+ C code + +```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); +``` + +
+ +
+ MicroPython code | Online Simulator + +```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) +``` + +
+
+ +### Styling a Slider +![Styling a slider with LVGL](https://github.com/kisvegabor/test/raw/master/readme_example_3.gif) + + +
+ C code + +```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); +``` + +
+ +
+ MicroPython code | +Online Simulator + + + +```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) +``` +
+
+ +### English, Hebrew (mixed LRT-RTL) and Chinese texts + +![English, Hebrew and Chinese texts with LVGL](https://github.com/kisvegabor/test/raw/master/readme_example_4.png) + +
+ C code + +```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); +``` + +
+ + +
+ MicroPython code | Online Simulator + +```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) + +``` +
## :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.