diff --git a/examples/get_started/index.rst b/examples/get_started/index.rst index f1faccbf5..80815bf02 100644 --- a/examples/get_started/index.rst +++ b/examples/get_started/index.rst @@ -1,18 +1,24 @@ -A button with a label and react on click event +A very simple "hello world" label """"""""""""""""""""""""""""""""""""""""""""""""" .. lv_example:: get_started/lv_example_get_started_1 :language: c +A button with a label and react on click event +""""""""""""""""""""""""""""""""""""""""""""""""" + +.. lv_example:: get_started/lv_example_get_started_2 + :language: c + Create styles from scratch for buttons """"""""""""""""""""""""""""""""""""""" -.. lv_example:: get_started/lv_example_get_started_2 +.. lv_example:: get_started/lv_example_get_started_3 :language: c Create a slider and write its value on a label """"""""""""""""""""""""""""""""""""""""""""""" -.. lv_example:: get_started/lv_example_get_started_3 +.. lv_example:: get_started/lv_example_get_started_4 :language: c diff --git a/examples/get_started/lv_example_get_started.h b/examples/get_started/lv_example_get_started.h index 02a998c86..1eb6faada 100644 --- a/examples/get_started/lv_example_get_started.h +++ b/examples/get_started/lv_example_get_started.h @@ -28,6 +28,7 @@ extern "C" { void lv_example_get_started_1(void); void lv_example_get_started_2(void); void lv_example_get_started_3(void); +void lv_example_get_started_4(void); /********************** * MACROS diff --git a/examples/get_started/lv_example_get_started_1.c b/examples/get_started/lv_example_get_started_1.c index c63e94d06..553520d3f 100644 --- a/examples/get_started/lv_example_get_started_1.c +++ b/examples/get_started/lv_example_get_started_1.c @@ -1,34 +1,19 @@ #include "../lv_examples.h" -#if LV_BUILD_EXAMPLES && LV_USE_BTN - -static void btn_event_cb(lv_event_t * e) -{ - lv_event_code_t code = lv_event_get_code(e); - lv_obj_t * btn = lv_event_get_target(e); - if(code == LV_EVENT_CLICKED) { - static uint8_t cnt = 0; - cnt++; - - /*Get the first child of the button which is the label and change its text*/ - lv_obj_t * label = lv_obj_get_child(btn, 0); - lv_label_set_text_fmt(label, "Button: %d", cnt); - } -} +#if LV_BUILD_EXAMPLES && LV_USE_LABEL /** - * Create a button with a label and react on click event. + * Basic example to create a "Hello world" label */ void lv_example_get_started_1(void) { - lv_obj_t * btn = lv_btn_create(lv_scr_act()); /*Add a button the current screen*/ - lv_obj_set_pos(btn, 10, 10); /*Set its position*/ - lv_obj_set_size(btn, 120, 50); /*Set its size*/ - lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_ALL, NULL); /*Assign a callback to the button*/ + /*Change the active screen's background color*/ + lv_obj_set_style_bg_color(lv_scr_act(), lv_color_hex(0x003a57), LV_PART_MAIN); - lv_obj_t * label = lv_label_create(btn); /*Add a label to the button*/ - lv_label_set_text(label, "Button"); /*Set the labels text*/ - lv_obj_center(label); + /*Create a white label, set its text and align it to the center*/ + lv_obj_t * label = lv_label_create(lv_scr_act()); + lv_label_set_text(label, "Hello world"); + lv_obj_set_style_text_color(lv_scr_act(), lv_color_hex(0xffffff), LV_PART_MAIN); + lv_obj_align(label, LV_ALIGN_CENTER, 0, 0); } #endif - diff --git a/examples/get_started/lv_example_get_started_1.py b/examples/get_started/lv_example_get_started_1.py index 8adfbdd0d..7e9d6c618 100644 --- a/examples/get_started/lv_example_get_started_1.py +++ b/examples/get_started/lv_example_get_started_1.py @@ -1,29 +1,10 @@ -class CounterBtn(): - def __init__(self): - self.cnt = 0 - # - # Create a button with a label and react on click event. - # +# Change the active screen's background color +scr = lv.scr_act() +scr.set_style_bg_color(lv.color_hex(0x003a57), lv.PART.MAIN) - btn = lv.btn(lv.scr_act()) # Add a button the current screen - btn.set_pos(10, 10) # Set its position - btn.set_size(120, 50) # Set its size - btn.align(lv.ALIGN.CENTER,0,0) - btn.add_event_cb(self.btn_event_cb, lv.EVENT.ALL, None) # Assign a callback to the button - label = lv.label(btn) # Add a label to the button - label.set_text("Button") # Set the labels text - label.center() - - def btn_event_cb(self,evt): - code = evt.get_code() - btn = evt.get_target() - if code == lv.EVENT.CLICKED: - self.cnt += 1 - - # Get the first child of the button which is the label and change its text - label = btn.get_child(0) - label.set_text("Button: " + str(self.cnt)) - - -counterBtn = CounterBtn() +# Create a white label, set its text and align it to the center +label = lv.label(lv.scr_act()) +label.set_text("Hello world") +label.set_style_text_color(lv.color_hex(0xffffff), lv.PART.MAIN) +label.align(lv.ALIGN.CENTER, 0, 0) diff --git a/examples/get_started/lv_example_get_started_2.c b/examples/get_started/lv_example_get_started_2.c index 66f2cc486..02acaae9f 100644 --- a/examples/get_started/lv_example_get_started_2.c +++ b/examples/get_started/lv_example_get_started_2.c @@ -1,83 +1,34 @@ #include "../lv_examples.h" -#if LV_USE_BTN && LV_BUILD_EXAMPLES +#if LV_BUILD_EXAMPLES && LV_USE_BTN -static lv_style_t style_btn; -static lv_style_t style_btn_pressed; -static lv_style_t style_btn_red; - -static lv_color_t darken(const lv_color_filter_dsc_t * dsc, lv_color_t color, lv_opa_t opa) +static void btn_event_cb(lv_event_t * e) { - LV_UNUSED(dsc); - return lv_color_darken(color, opa); -} + lv_event_code_t code = lv_event_get_code(e); + lv_obj_t * btn = lv_event_get_target(e); + if(code == LV_EVENT_CLICKED) { + static uint8_t cnt = 0; + cnt++; -static void style_init(void) -{ - /*Create a simple button style*/ - lv_style_init(&style_btn); - lv_style_set_radius(&style_btn, 10); - lv_style_set_bg_opa(&style_btn, LV_OPA_COVER); - lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3)); - lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY)); - lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER); - - lv_style_set_border_color(&style_btn, lv_color_black()); - lv_style_set_border_opa(&style_btn, LV_OPA_20); - lv_style_set_border_width(&style_btn, 2); - - lv_style_set_text_color(&style_btn, lv_color_black()); - - /*Create a style for the pressed state. - *Use a color filter to simply modify all colors in this state*/ - static lv_color_filter_dsc_t color_filter; - lv_color_filter_dsc_init(&color_filter, darken); - lv_style_init(&style_btn_pressed); - lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter); - lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20); - - /*Create a red style. Change only some colors.*/ - lv_style_init(&style_btn_red); - lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED)); - lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3)); + /*Get the first child of the button which is the label and change its text*/ + lv_obj_t * label = lv_obj_get_child(btn, 0); + lv_label_set_text_fmt(label, "Button: %d", cnt); + } } /** - * Create styles from scratch for buttons. + * Create a button with a label and react on click event. */ void lv_example_get_started_2(void) { - /*Initialize the style*/ - style_init(); + lv_obj_t * btn = lv_btn_create(lv_scr_act()); /*Add a button the current screen*/ + lv_obj_set_pos(btn, 10, 10); /*Set its position*/ + lv_obj_set_size(btn, 120, 50); /*Set its size*/ + lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_ALL, NULL); /*Assign a callback to the button*/ - /*Create a button and use the new styles*/ - lv_obj_t * btn = lv_btn_create(lv_scr_act()); - /* Remove the styles coming from the theme - * Note that size and position are also stored as style properties - * so lv_obj_remove_style_all will remove the set size and position too */ - lv_obj_remove_style_all(btn); - lv_obj_set_pos(btn, 10, 10); - lv_obj_set_size(btn, 120, 50); - lv_obj_add_style(btn, &style_btn, 0); - lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED); - - /*Add a label to the button*/ - lv_obj_t * label = lv_label_create(btn); - lv_label_set_text(label, "Button"); - lv_obj_center(label); - - /*Create another button and use the red style too*/ - lv_obj_t * btn2 = lv_btn_create(lv_scr_act()); - lv_obj_remove_style_all(btn2); /*Remove the styles coming from the theme*/ - lv_obj_set_pos(btn2, 10, 80); - lv_obj_set_size(btn2, 120, 50); - lv_obj_add_style(btn2, &style_btn, 0); - lv_obj_add_style(btn2, &style_btn_red, 0); - lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED); - lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0); /*Add a local style too*/ - - label = lv_label_create(btn2); - lv_label_set_text(label, "Button 2"); + lv_obj_t * label = lv_label_create(btn); /*Add a label to the button*/ + lv_label_set_text(label, "Button"); /*Set the labels text*/ lv_obj_center(label); } #endif + diff --git a/examples/get_started/lv_example_get_started_2.py b/examples/get_started/lv_example_get_started_2.py index c05020052..8adfbdd0d 100644 --- a/examples/get_started/lv_example_get_started_2.py +++ b/examples/get_started/lv_example_get_started_2.py @@ -1,62 +1,29 @@ -# -# Create styles from scratch for buttons. -# -style_btn = lv.style_t() -style_btn_red = lv.style_t() -style_btn_pressed = lv.style_t() +class CounterBtn(): + def __init__(self): + self.cnt = 0 + # + # Create a button with a label and react on click event. + # -# Create a simple button style -style_btn.init() -style_btn.set_radius(10) -style_btn.set_bg_opa(lv.OPA.COVER) -style_btn.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 3)) -style_btn.set_bg_grad_color(lv.palette_main(lv.PALETTE.GREY)) -style_btn.set_bg_grad_dir(lv.GRAD_DIR.VER) + btn = lv.btn(lv.scr_act()) # Add a button the current screen + btn.set_pos(10, 10) # Set its position + btn.set_size(120, 50) # Set its size + btn.align(lv.ALIGN.CENTER,0,0) + btn.add_event_cb(self.btn_event_cb, lv.EVENT.ALL, None) # Assign a callback to the button + label = lv.label(btn) # Add a label to the button + label.set_text("Button") # Set the labels text + label.center() -# Add a border -style_btn.set_border_color(lv.color_white()) -style_btn.set_border_opa(lv.OPA._70) -style_btn.set_border_width(2) + def btn_event_cb(self,evt): + code = evt.get_code() + btn = evt.get_target() + if code == lv.EVENT.CLICKED: + self.cnt += 1 -# Set the text style -style_btn.set_text_color(lv.color_white()) + # Get the first child of the button which is the label and change its text + label = btn.get_child(0) + label.set_text("Button: " + str(self.cnt)) -# Create a red style. Change only some colors. -style_btn_red.init() -style_btn_red.set_bg_color(lv.palette_main(lv.PALETTE.RED)) -style_btn_red.set_bg_grad_color(lv.palette_lighten(lv.PALETTE.RED, 2)) -# Create a style for the pressed state. -style_btn_pressed.init() -style_btn_pressed.set_bg_color(lv.palette_main(lv.PALETTE.BLUE)) -style_btn_pressed.set_bg_grad_color(lv.palette_darken(lv.PALETTE.RED, 3)) - -# Create a button and use the new styles -btn = lv.btn(lv.scr_act()) # Add a button the current screen -# Remove the styles coming from the theme -# Note that size and position are also stored as style properties -# so lv_obj_remove_style_all will remove the set size and position too -btn.remove_style_all() # Remove the styles coming from the theme -btn.set_pos(10, 10) # Set its position -btn.set_size(120, 50) # Set its size -btn.add_style(style_btn, 0) -btn.add_style(style_btn_pressed, lv.STATE.PRESSED) - -label = lv.label(btn) # Add a label to the button -label.set_text("Button") # Set the labels text -label.center() - -# Create another button and use the red style too -btn2 = lv.btn(lv.scr_act()) -btn2.remove_style_all() # Remove the styles coming from the theme -btn2.set_pos(10, 80) # Set its position -btn2.set_size(120, 50) # Set its size -btn2.add_style(style_btn, 0) -btn2.add_style(style_btn_red, 0) -btn2.add_style(style_btn_pressed, lv.STATE.PRESSED) -btn2.set_style_radius(lv.RADIUS_CIRCLE, 0) # Add a local style - -label = lv.label(btn2) # Add a label to the button -label.set_text("Button 2") # Set the labels text -label.center() +counterBtn = CounterBtn() diff --git a/examples/get_started/lv_example_get_started_3.c b/examples/get_started/lv_example_get_started_3.c index 2f6d61674..05b5c81e6 100644 --- a/examples/get_started/lv_example_get_started_3.c +++ b/examples/get_started/lv_example_get_started_3.c @@ -1,33 +1,83 @@ #include "../lv_examples.h" -#if LV_BUILD_EXAMPLES && LV_USE_SLIDER +#if LV_USE_BTN && LV_BUILD_EXAMPLES -static lv_obj_t * label; +static lv_style_t style_btn; +static lv_style_t style_btn_pressed; +static lv_style_t style_btn_red; -static void slider_event_cb(lv_event_t * e) +static lv_color_t darken(const lv_color_filter_dsc_t * dsc, lv_color_t color, lv_opa_t opa) { - lv_obj_t * slider = lv_event_get_target(e); + LV_UNUSED(dsc); + return lv_color_darken(color, opa); +} - /*Refresh the text*/ - lv_label_set_text_fmt(label, "%"LV_PRId32, lv_slider_get_value(slider)); - lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align top of the slider*/ +static void style_init(void) +{ + /*Create a simple button style*/ + lv_style_init(&style_btn); + lv_style_set_radius(&style_btn, 10); + lv_style_set_bg_opa(&style_btn, LV_OPA_COVER); + lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3)); + lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY)); + lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER); + + lv_style_set_border_color(&style_btn, lv_color_black()); + lv_style_set_border_opa(&style_btn, LV_OPA_20); + lv_style_set_border_width(&style_btn, 2); + + lv_style_set_text_color(&style_btn, lv_color_black()); + + /*Create a style for the pressed state. + *Use a color filter to simply modify all colors in this state*/ + static lv_color_filter_dsc_t color_filter; + lv_color_filter_dsc_init(&color_filter, darken); + lv_style_init(&style_btn_pressed); + lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter); + lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20); + + /*Create a red style. Change only some colors.*/ + lv_style_init(&style_btn_red); + lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED)); + lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3)); } /** - * Create a slider and write its value on a label. + * Create styles from scratch for buttons. */ void lv_example_get_started_3(void) { - /*Create a slider in the center of the display*/ - lv_obj_t * slider = lv_slider_create(lv_scr_act()); - lv_obj_set_width(slider, 200); /*Set the width*/ - lv_obj_center(slider); /*Align to the center of the parent (screen)*/ - lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); /*Assign an event function*/ + /*Initialize the style*/ + style_init(); - /*Create a label above the slider*/ - label = lv_label_create(lv_scr_act()); - lv_label_set_text(label, "0"); - lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align top of the slider*/ + /*Create a button and use the new styles*/ + lv_obj_t * btn = lv_btn_create(lv_scr_act()); + /* Remove the styles coming from the theme + * Note that size and position are also stored as style properties + * so lv_obj_remove_style_all will remove the set size and position too */ + lv_obj_remove_style_all(btn); + lv_obj_set_pos(btn, 10, 10); + lv_obj_set_size(btn, 120, 50); + lv_obj_add_style(btn, &style_btn, 0); + lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED); + + /*Add a label to the button*/ + lv_obj_t * label = lv_label_create(btn); + lv_label_set_text(label, "Button"); + lv_obj_center(label); + + /*Create another button and use the red style too*/ + lv_obj_t * btn2 = lv_btn_create(lv_scr_act()); + lv_obj_remove_style_all(btn2); /*Remove the styles coming from the theme*/ + lv_obj_set_pos(btn2, 10, 80); + lv_obj_set_size(btn2, 120, 50); + lv_obj_add_style(btn2, &style_btn, 0); + lv_obj_add_style(btn2, &style_btn_red, 0); + lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED); + lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0); /*Add a local style too*/ + + label = lv_label_create(btn2); + lv_label_set_text(label, "Button 2"); + lv_obj_center(label); } #endif - diff --git a/examples/get_started/lv_example_get_started_3.py b/examples/get_started/lv_example_get_started_3.py index b41a1c06e..c05020052 100644 --- a/examples/get_started/lv_example_get_started_3.py +++ b/examples/get_started/lv_example_get_started_3.py @@ -1,22 +1,62 @@ -def slider_event_cb(evt): - slider = evt.get_target() - - # Refresh the text - label.set_text(str(slider.get_value())) - # -# Create a slider and write its value on a label. +# Create styles from scratch for buttons. # +style_btn = lv.style_t() +style_btn_red = lv.style_t() +style_btn_pressed = lv.style_t() -# Create a slider in the center of the display -slider = lv.slider(lv.scr_act()) -slider.set_width(200) # Set the width -slider.center() # Align to the center of the parent (screen) -slider.add_event_cb(slider_event_cb, lv.EVENT.VALUE_CHANGED, None) # Assign an event function +# Create a simple button style +style_btn.init() +style_btn.set_radius(10) +style_btn.set_bg_opa(lv.OPA.COVER) +style_btn.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 3)) +style_btn.set_bg_grad_color(lv.palette_main(lv.PALETTE.GREY)) +style_btn.set_bg_grad_dir(lv.GRAD_DIR.VER) -# Create a label above the slider -label = lv.label(lv.scr_act()) -label.set_text("0") -label.align_to(slider, lv.ALIGN.OUT_TOP_MID, 0, -15) # Align below the slider +# Add a border +style_btn.set_border_color(lv.color_white()) +style_btn.set_border_opa(lv.OPA._70) +style_btn.set_border_width(2) +# Set the text style +style_btn.set_text_color(lv.color_white()) + +# Create a red style. Change only some colors. +style_btn_red.init() +style_btn_red.set_bg_color(lv.palette_main(lv.PALETTE.RED)) +style_btn_red.set_bg_grad_color(lv.palette_lighten(lv.PALETTE.RED, 2)) + +# Create a style for the pressed state. +style_btn_pressed.init() +style_btn_pressed.set_bg_color(lv.palette_main(lv.PALETTE.BLUE)) +style_btn_pressed.set_bg_grad_color(lv.palette_darken(lv.PALETTE.RED, 3)) + +# Create a button and use the new styles +btn = lv.btn(lv.scr_act()) # Add a button the current screen +# Remove the styles coming from the theme +# Note that size and position are also stored as style properties +# so lv_obj_remove_style_all will remove the set size and position too +btn.remove_style_all() # Remove the styles coming from the theme +btn.set_pos(10, 10) # Set its position +btn.set_size(120, 50) # Set its size +btn.add_style(style_btn, 0) +btn.add_style(style_btn_pressed, lv.STATE.PRESSED) + +label = lv.label(btn) # Add a label to the button +label.set_text("Button") # Set the labels text +label.center() + +# Create another button and use the red style too +btn2 = lv.btn(lv.scr_act()) +btn2.remove_style_all() # Remove the styles coming from the theme +btn2.set_pos(10, 80) # Set its position +btn2.set_size(120, 50) # Set its size +btn2.add_style(style_btn, 0) +btn2.add_style(style_btn_red, 0) +btn2.add_style(style_btn_pressed, lv.STATE.PRESSED) +btn2.set_style_radius(lv.RADIUS_CIRCLE, 0) # Add a local style + +label = lv.label(btn2) # Add a label to the button +label.set_text("Button 2") # Set the labels text +label.center() diff --git a/examples/get_started/lv_example_get_started_4.c b/examples/get_started/lv_example_get_started_4.c new file mode 100644 index 000000000..265b7a8af --- /dev/null +++ b/examples/get_started/lv_example_get_started_4.c @@ -0,0 +1,33 @@ +#include "../lv_examples.h" +#if LV_BUILD_EXAMPLES && LV_USE_SLIDER + +static lv_obj_t * label; + +static void slider_event_cb(lv_event_t * e) +{ + lv_obj_t * slider = lv_event_get_target(e); + + /*Refresh the text*/ + lv_label_set_text_fmt(label, "%"LV_PRId32, lv_slider_get_value(slider)); + lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align top of the slider*/ +} + +/** + * Create a slider and write its value on a label. + */ +void lv_example_get_started_4(void) +{ + /*Create a slider in the center of the display*/ + lv_obj_t * slider = lv_slider_create(lv_scr_act()); + lv_obj_set_width(slider, 200); /*Set the width*/ + lv_obj_center(slider); /*Align to the center of the parent (screen)*/ + lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); /*Assign an event function*/ + + /*Create a label above the slider*/ + label = lv_label_create(lv_scr_act()); + lv_label_set_text(label, "0"); + lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align top of the slider*/ +} + +#endif + diff --git a/examples/get_started/lv_example_get_started_4.py b/examples/get_started/lv_example_get_started_4.py new file mode 100644 index 000000000..b41a1c06e --- /dev/null +++ b/examples/get_started/lv_example_get_started_4.py @@ -0,0 +1,22 @@ +def slider_event_cb(evt): + slider = evt.get_target() + + # Refresh the text + label.set_text(str(slider.get_value())) + +# +# Create a slider and write its value on a label. +# + +# Create a slider in the center of the display +slider = lv.slider(lv.scr_act()) +slider.set_width(200) # Set the width +slider.center() # Align to the center of the parent (screen) +slider.add_event_cb(slider_event_cb, lv.EVENT.VALUE_CHANGED, None) # Assign an event function + +# Create a label above the slider +label = lv.label(lv.scr_act()) +label.set_text("0") +label.align_to(slider, lv.ALIGN.OUT_TOP_MID, 0, -15) # Align below the slider + +