diff --git a/docs/src/getting_started/examples.mdx b/docs/src/getting_started/examples.mdx index 37cc0a94e9..2dfdb34b47 100644 --- a/docs/src/getting_started/examples.mdx +++ b/docs/src/getting_started/examples.mdx @@ -10,16 +10,16 @@ was created and therefore has an [Active Screen](/common-widget-features/screens ### A very simple *hello world* label - + ### A button with a label and react on click event - + ### Create styles from scratch for buttons - + ### Create a slider and write its value on a label - + diff --git a/docs/src/getting_started/porting.mdx b/docs/src/getting_started/porting.mdx index 5628f67b30..6f1eeb1f6c 100644 --- a/docs/src/getting_started/porting.mdx +++ b/docs/src/getting_started/porting.mdx @@ -12,11 +12,29 @@ A more detailed description is available at [Overview](/integration/overview). The main steps are the following: -1. **Driver Initialization**: It is the user's responsibility to set up the clock, timers, peripherals, etc. -2. **Call **: Initialize LVGL itself. -3. **Create display and input devices and set up the tick**: Create display(s) () and input device(s) () and set up their callbacks. -4. **Create the UI**: Call LVGL functions to create screens, widgets, styles, animations, events, etc. -5. **Call in a loop**: This handles all the LVGL-related tasks, such as refreshing display(s), reading input devices, firing events based on user input, running animations, and running user-created timers. + + + +**Driver Initialization**: It is the user's responsibility to set up the clock, timers, peripherals, etc. + + + +**Call **: Initialize LVGL itself. + + + +**Create display and input devices and set up the tick**: Create display(s) () and input device(s) () and set up their callbacks. + + + +**Create the UI**: Call LVGL functions to create screens, widgets, styles, animations, events, etc. + + + +**Call in a loop**: This handles all the LVGL-related tasks, such as refreshing display(s), reading input devices, firing events based on user input, running animations, and running user-created timers. + + + This is just a brief example of how to add LVGL to a new project. diff --git a/examples/get_started/get_started_hello_world/lv_example_get_started_hello_world.c b/examples/get_started/get_started_hello_world/lv_example_get_started_hello_world.c new file mode 100644 index 0000000000..229b3ff82c --- /dev/null +++ b/examples/get_started/get_started_hello_world/lv_example_get_started_hello_world.c @@ -0,0 +1,26 @@ +/** + * @file lv_example_get_started_hello_world.c + */ + +#include "../../lv_examples.h" +#if LV_BUILD_EXAMPLES + +/** + * @title Hello world label + * @brief Paint the screen background and center a label on it. + * + * The view sets its own `style_bg_color` to a dark teal and `style_text_color` + * to white. The label sets no color of its own — it inherits white from the + * view — and `align="center"` places it in the middle of the display. + */ +void lv_example_get_started_hello_world(void) +{ + lv_obj_t * screen = lv_screen_active(); + lv_obj_set_style_bg_color(screen, lv_color_hex(0x003a57), 0); + lv_obj_set_style_text_color(screen, lv_color_hex(0xffffff), 0); + + lv_obj_t * label = lv_label_create(screen); + lv_obj_set_align(label, LV_ALIGN_CENTER); + lv_label_set_text(label, "Hello world"); +} +#endif diff --git a/examples/get_started/get_started_hello_world/lv_example_get_started_hello_world.xml b/examples/get_started/get_started_hello_world/lv_example_get_started_hello_world.xml new file mode 100644 index 0000000000..5c74d0a2e9 --- /dev/null +++ b/examples/get_started/get_started_hello_world/lv_example_get_started_hello_world.xml @@ -0,0 +1,13 @@ + + + + + + diff --git a/examples/get_started/get_started_slider/lv_example_get_started_slider.c b/examples/get_started/get_started_slider/lv_example_get_started_slider.c new file mode 100644 index 0000000000..da0e784ce4 --- /dev/null +++ b/examples/get_started/get_started_slider/lv_example_get_started_slider.c @@ -0,0 +1,44 @@ +/** + * @file lv_example_get_started_slider.c + */ + +#include "../../lv_examples.h" +#if LV_BUILD_EXAMPLES + +/** + * @title Slider with live value + * @brief Mirror a slider's value into a label through a shared subject. + * + * The slider writes its position to `subject_value` with `bind_value`, and the + * label reads the same subject with `bind_text` + `bind_text-fmt="%d"`. Because + * both refer to one subject, dragging the slider updates the label with no event + * callback — the binding keeps the two in sync. + */ +void lv_example_get_started_slider(void) +{ + static lv_subject_t subject_value; + + static bool inited = false; + + if(!inited) { + lv_subject_init_int(&subject_value, 50); + lv_subject_set_min_value_int(&subject_value, 0); + lv_subject_set_max_value_int(&subject_value, 100); + inited = true; + } + + lv_obj_t * screen = lv_screen_active(); + + /* 💡 Drag the slider; the label tracks it because both share `subject_value`. */ + lv_obj_t * label = lv_label_create(screen); + lv_obj_set_align(label, LV_ALIGN_CENTER); + lv_obj_set_y(label, -20); + lv_label_bind_text(label, &subject_value, "%d"); + + lv_obj_t * slider = lv_slider_create(screen); + lv_obj_set_align(slider, LV_ALIGN_CENTER); + lv_obj_set_y(slider, 20); + lv_obj_set_width(slider, lv_pct(90)); + lv_slider_bind_value(slider, &subject_value); +} +#endif diff --git a/examples/get_started/get_started_slider/lv_example_get_started_slider.xml b/examples/get_started/get_started_slider/lv_example_get_started_slider.xml new file mode 100644 index 0000000000..d0f175da38 --- /dev/null +++ b/examples/get_started/get_started_slider/lv_example_get_started_slider.xml @@ -0,0 +1,16 @@ + + + + + + + + diff --git a/examples/get_started/get_started_styles/lv_example_get_started_styles.c b/examples/get_started/get_started_styles/lv_example_get_started_styles.c new file mode 100644 index 0000000000..0d1d84d132 --- /dev/null +++ b/examples/get_started/get_started_styles/lv_example_get_started_styles.c @@ -0,0 +1,75 @@ +/** + * @file lv_example_get_started_styles.c + */ + +#include "../../lv_examples.h" +#if LV_BUILD_EXAMPLES + +/** + * @title Styles from scratch for buttons + * @brief Build named button styles, then add a pressed state and an accent variant. + * + * `style_button` is the shared base: a rounded vertical grey gradient with a thin + * translucent border. The first button adds `style_button_pressed` on the + * `pressed` selector so its gradient darkens while held. The second stacks + * `style_button_red` to repaint only the gradient and sets a local circular + * radius, showing how a small style plus one local property re-skins a button + * without redefining the base. + */ +void lv_example_get_started_styles(void) +{ + static lv_style_t style_button; + static lv_style_t style_button_pressed; + static lv_style_t style_button_red; + + static bool inited = false; + + if(!inited) { + lv_style_init(&style_button); + lv_style_set_radius(&style_button, 10); + lv_style_set_bg_opa(&style_button, (255 * 100 / 100)); + lv_style_set_bg_color(&style_button, lv_color_hex(0xeeeeee)); + lv_style_set_bg_grad_color(&style_button, lv_color_hex(0x9e9e9e)); + lv_style_set_bg_grad_dir(&style_button, LV_GRAD_DIR_VER); + lv_style_set_border_color(&style_button, lv_color_hex(0x000000)); + lv_style_set_border_opa(&style_button, (255 * 20 / 100)); + lv_style_set_border_width(&style_button, 2); + lv_style_set_text_color(&style_button, lv_color_hex(0x000000)); + + lv_style_init(&style_button_pressed); + lv_style_set_bg_color(&style_button_pressed, lv_color_hex(0xbdbdbd)); + lv_style_set_bg_grad_color(&style_button_pressed, lv_color_hex(0x757575)); + + lv_style_init(&style_button_red); + lv_style_set_bg_color(&style_button_red, lv_color_hex(0xf44336)); + lv_style_set_bg_grad_color(&style_button_red, lv_color_hex(0xffcdd2)); + + inited = true; + } + + lv_obj_t * screen = lv_screen_active(); + + /* Base style + a pressed-state override */ + lv_obj_t * button_1 = lv_button_create(screen); + lv_obj_set_align(button_1, LV_ALIGN_CENTER); + lv_obj_set_y(button_1, -35); + lv_obj_set_size(button_1, 120, 50); + lv_obj_add_style(button_1, &style_button, 0); + lv_obj_add_style(button_1, &style_button_pressed, LV_STATE_PRESSED); + lv_obj_t * label_1 = lv_label_create(button_1); + lv_obj_set_align(label_1, LV_ALIGN_CENTER); + lv_label_set_text(label_1, "Button"); + + /* Base + accent variant + a local circular radius */ + lv_obj_t * button_2 = lv_button_create(screen); + lv_obj_set_align(button_2, LV_ALIGN_CENTER); + lv_obj_set_y(button_2, 35); + lv_obj_set_size(button_2, 120, 50); + lv_obj_set_style_radius(button_2, 25, 0); + lv_obj_add_style(button_2, &style_button, 0); + lv_obj_add_style(button_2, &style_button_red, 0); + lv_obj_t * label_2 = lv_label_create(button_2); + lv_obj_set_align(label_2, LV_ALIGN_CENTER); + lv_label_set_text(label_2, "Button 2"); +} +#endif diff --git a/examples/get_started/get_started_styles/lv_example_get_started_styles.xml b/examples/get_started/get_started_styles/lv_example_get_started_styles.xml new file mode 100644 index 0000000000..17c7b35c84 --- /dev/null +++ b/examples/get_started/get_started_styles/lv_example_get_started_styles.xml @@ -0,0 +1,51 @@ + + + + +