diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_anim_2.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_anim_2.be new file mode 100644 index 000000000..7b7a0e201 --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_anim_2.be @@ -0,0 +1,43 @@ +def anim_x_cb(obj, v) + obj.set_x(v) +end + +def anim_size_cb(obj, v) + obj.set_size(v, v) +end + + +# +# Create a playback animation +# +obj = lv.obj(lv.scr_act()) +obj.set_style_bg_color(lv.palette_main(lv.PALETTE_RED), 0) +obj.set_style_radius(lv.RADIUS_CIRCLE, 0) + +obj.align(lv.ALIGN_LEFT_MID, 10, 0) + +a1 = lv.anim() +a1.init() +a1.set_var(obj) +a1.set_values(10, 50) +a1.set_time(1000) +a1.set_playback_delay(100) +a1.set_playback_time(300) +a1.set_repeat_delay(500) +a1.set_repeat_count(lv.ANIM_REPEAT_INFINITE) +a1.set_path_cb(lv.anim_path_ease_in_out) +a1.set_custom_exec_cb(cb.gen_cb(/ a1,val -> anim_size_cb(obj,val))) +a1.start() + +a2 = lv.anim() +a2.init() +a2.set_var(obj) +a2.set_values(10, 240) +a2.set_time(1000) +a2.set_playback_delay(100) +a2.set_playback_time(300) +a2.set_repeat_delay(500) +a2.set_repeat_count(lv.ANIM_REPEAT_INFINITE) +a2.set_path_cb(lv.anim_path_ease_in_out) +a2.set_custom_exec_cb(cb.gen_cb(/ a1,val -> anim_x_cb(obj,val))) +a2.start() diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_arc_1.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_arc_1.be new file mode 100644 index 000000000..f908f7b24 --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_arc_1.be @@ -0,0 +1,5 @@ +# Create an Arc +arc = lv.arc(lv.scr_act()) +arc.set_end_angle(200) +arc.set_size(150, 150) +arc.center() diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_arc_2.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_arc_2.be new file mode 100644 index 000000000..3626dcefe --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_arc_2.be @@ -0,0 +1,40 @@ +# +# An `lv_timer` to call periodically to set the angles of the arc +# +class ArcLoader + var a + def init() + self.a = 270 + end + + def arc_loader_cb(tim,arc) + # print(tim,arc) + self.a += 5 + + arc.set_end_angle(self.a) + + if self.a >= 270 + 360 + tim.del() + end + end +end + + +# +# Create an arc which acts as a loader. +# + +# Create an Arc +arc = lv.arc(lv.scr_act()) +arc.set_bg_angles(0, 360) +arc.set_angles(270, 270) +arc.center() + +# create the loader +arc_loader = ArcLoader() + +# Create an `lv_timer` to update the arc. + +timer = lv.timer_create_basic() +timer.set_period(20) +timer.set_cb(/ src -> arc_loader.arc_loader_cb(timer,arc)) diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_bar_1.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_bar_1.be new file mode 100644 index 000000000..2428db5cf --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_bar_1.be @@ -0,0 +1,4 @@ +bar1 = lv.bar(lv.scr_act()) +bar1.set_size(200, 20) +bar1.center() +bar1.set_value(70, lv.ANIM_OFF) diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_bar_2.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_bar_2.be new file mode 100644 index 000000000..af77c2bd3 --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_bar_2.be @@ -0,0 +1,26 @@ +# +# Example of styling the bar +# +style_bg = lv.style() +style_indic = lv.style() + +style_bg.init() +style_bg.set_border_color(lv.palette_main(lv.PALETTE_BLUE)) +style_bg.set_border_width(2) +style_bg.set_pad_all(6) # To make the indicator smaller +style_bg.set_radius(6) +style_bg.set_anim_time(1000) + +style_indic.init() +style_indic.set_bg_opa(lv.OPA_COVER) +style_indic.set_bg_color(lv.palette_main(lv.PALETTE_BLUE)) +style_indic.set_radius(3) + +bar = lv.bar(lv.scr_act()) +bar.remove_style_all() # To have a clean start +bar.add_style(style_bg, 0) +bar.add_style(style_indic, lv.PART_INDICATOR) + +bar.set_size(200, 20) +bar.center() +bar.set_value(100, lv.ANIM_ON) diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_bar_3.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_bar_3.be new file mode 100644 index 000000000..1a0832bca --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_bar_3.be @@ -0,0 +1,32 @@ +def set_temp(bar, temp) + bar.set_value(temp, lv.ANIM_ON) +end + +# +# A temperature meter example +# + + +style_indic = lv.style() + +style_indic.init() +style_indic.set_bg_opa(lv.OPA_COVER) +style_indic.set_bg_color(lv.palette_main(lv.PALETTE_RED)) +style_indic.set_bg_grad_color(lv.palette_main(lv.PALETTE_BLUE)) +style_indic.set_bg_grad_dir(lv.GRAD_DIR_VER) + +bar = lv.bar(lv.scr_act()) +bar.add_style(style_indic, lv.PART_INDICATOR) +bar.set_size(20, 200) +bar.center() +bar.set_range(-20, 40) + +a = lv.anim() +a.init() +a.set_time(3000) +a.set_playback_time(3000) +a.set_var(bar) +a.set_values(-20, 40) +a.set_repeat_count(lv.ANIM_REPEAT_INFINITE) +a.set_custom_exec_cb(cb.gen_cb(/ a, val -> set_temp(bar,val))) +a.start() diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_btn_1.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_btn_1.be new file mode 100644 index 000000000..b1f838f45 --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_btn_1.be @@ -0,0 +1,34 @@ +def event_handler(obj, evt) + var code = evt.code + + if code == lv.EVENT_CLICKED + print("Clicked event seen") + elif code == lv.EVENT_VALUE_CHANGED + print("Value changed seen") + end +end + +# create a simple button +btn1 = lv.btn(lv.scr_act()) + +# attach the callback +btn1.add_event_cb(event_handler,lv.EVENT_ALL, nil) + +btn1.align(lv.ALIGN_CENTER,0,-40) +label=lv.label(btn1) +label.set_text("Button") + +# create a toggle button +btn2 = lv.btn(lv.scr_act()) + +# attach the callback +#btn2.add_event_cb(event_handler,lv.EVENT.VALUE_CHANGED,None) +btn2.add_event_cb(event_handler,lv.EVENT_ALL, nil) + +btn2.align(lv.ALIGN_CENTER,0,40) +btn2.add_flag(lv.OBJ_FLAG_CHECKABLE) +btn2.set_height(lv.SIZE_CONTENT) + +label=lv.label(btn2) +label.set_text("Toggle") +label.center() diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_btn_2.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_btn_2.be new file mode 100644 index 000000000..483f4d38d --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_btn_2.be @@ -0,0 +1,59 @@ +# +# Style a button from scratch +# + +# Init the style for the default state +style = lv.style() +style.init() + +style.set_radius(3) + +style.set_bg_opa(lv.OPA_COVER) +style.set_bg_color(lv.palette_main(lv.PALETTE_BLUE)) +style.set_bg_grad_color(lv.palette_darken(lv.PALETTE_BLUE, 2)) +style.set_bg_grad_dir(lv.GRAD_DIR_VER) + +style.set_border_opa(lv.OPA_40) +style.set_border_width(2) +style.set_border_color(lv.palette_main(lv.PALETTE_GREY)) + +style.set_shadow_width(8) +style.set_shadow_color(lv.palette_main(lv.PALETTE_GREY)) +style.set_shadow_ofs_y(8) + +style.set_outline_opa(lv.OPA_COVER) +style.set_outline_color(lv.palette_main(lv.PALETTE_BLUE)) + +style.set_text_color(lv.color_white()) +style.set_pad_all(10) + +# Init the pressed style +style_pr = lv.style() +style_pr.init() + +# Add a large outline when pressed +style_pr.set_outline_width(30) +style_pr.set_outline_opa(lv.OPA_TRANSP) + +style_pr.set_translate_y(5) +style_pr.set_shadow_ofs_y(3) +style_pr.set_bg_color(lv.palette_darken(lv.PALETTE_BLUE, 2)) +style_pr.set_bg_grad_color(lv.palette_darken(lv.PALETTE_BLUE, 4)) + +# Add a transition to the outline +trans = lv.style_transition_dsc() +props = lv.style_prop_arr([lv.STYLE_OUTLINE_WIDTH, lv.STYLE_OUTLINE_OPA, 0]) +trans.init(props, lv.anim_path_linear, 300, 0, nil) + +style_pr.set_transition(trans) + +btn1 = lv.btn(lv.scr_act()) +btn1.remove_style_all() # Remove the style coming from the theme +btn1.add_style(style, 0) +btn1.add_style(style_pr, lv.STATE_PRESSED) +btn1.set_size(lv.SIZE_CONTENT, lv.SIZE_CONTENT) +btn1.center() + +label = lv.label(btn1) +label.set_text("Button") +label.center() diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_btn_3.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_btn_3.be new file mode 100644 index 000000000..ceecc4cc6 --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_btn_3.be @@ -0,0 +1,38 @@ +# +# Create a style transition on a button to act like a gum when clicked +# + +# Properties to transition +props = lv.style_prop_arr([lv.STYLE_TRANSFORM_WIDTH, lv.STYLE_TRANSFORM_HEIGHT, lv.STYLE_TEXT_LETTER_SPACE, 0]) + +# Transition descriptor when going back to the default state. +# Add some delay to be sure the press transition is visible even if the press was very short*/ +transition_dsc_def = lv.style_transition_dsc() +transition_dsc_def.init(props, lv.anim_path_overshoot, 250, 100, nil) + +# Transition descriptor when going to pressed state. +# No delay, go to pressed state immediately +transition_dsc_pr = lv.style_transition_dsc() +transition_dsc_pr.init(props, lv.anim_path_ease_in_out, 250, 0, nil) + +# Add only the new transition to the default state +style_def = lv.style() +style_def.init() +style_def.set_transition(transition_dsc_def) + +# Add the transition and some transformation to the presses state. +style_pr = lv.style() +style_pr.init() +style_pr.set_transform_width(10) +style_pr.set_transform_height(-10) +style_pr.set_text_letter_space(10) +style_pr.set_transition(transition_dsc_pr) + +btn1 = lv.btn(lv.scr_act()) +btn1.align(lv.ALIGN_CENTER, 0, -80) +btn1.add_style(style_pr, lv.STATE_PRESSED) +btn1.add_style(style_def, 0) + +label = lv.label(btn1) +label.set_text("Gum") + diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_chart_1.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_chart_1.be new file mode 100644 index 000000000..a84146227 --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_chart_1.be @@ -0,0 +1,36 @@ +# Create a chart +chart = lv.chart(lv.scr_act()) +chart.set_size(200, 150) +chart.center() +chart.set_type(lv.CHART_TYPE_LINE) # Show lines and points too + +# Add two data series +ser1 = chart.add_series(lv.palette_main(lv.PALETTE_RED), lv.CHART_AXIS_PRIMARY_Y) +ser2 = chart.add_series(lv.palette_main(lv.PALETTE_GREEN), lv.CHART_AXIS_SECONDARY_Y) + +# Set next points on ser1 +chart.set_next_value(ser1,10) +chart.set_next_value(ser1,10) +chart.set_next_value(ser1,10) +chart.set_next_value(ser1,10) +chart.set_next_value(ser1,10) +chart.set_next_value(ser1,10) +chart.set_next_value(ser1,10) +chart.set_next_value(ser1,30) +chart.set_next_value(ser1,70) +chart.set_next_value(ser1,90) + +# Directly set points on 'ser2' +y2 = lv.coord_arr(ser2.y_points, 10) +y2[0] = 90 +y2[1] = 70 +y2[2] = 65 +y2[3] = 65 +y2[4] = 65 +y2[5] = 65 +y2[6] = 65 +y2[7] = 65 +y2[8] = 65 +y2[9] = 65 +chart.refresh() # Required after direct set + diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_get_started_1.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_get_started_1.be new file mode 100644 index 000000000..747d4a0d2 --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_get_started_1.be @@ -0,0 +1,35 @@ +class CounterBtn + var cnt + var btn + var label + def init() + self.cnt = 0 + # + # Create a button with a label and react on click event. + # + + var 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(/ obj, evt -> self.btn_event_cb(evt), lv.EVENT_CLICKED, nil) # Assign a callback to the button + var label = lv.label(btn) # Add a label to the button + label.set_text("Button") # Set the labels text + label.center() + + self.btn = btn + self.label = label + end + + def btn_event_cb(evt) + var code = evt.code + if code == lv.EVENT_CLICKED + self.cnt += 1 + end + + # Get the first child of the button which is the label and change its text + self.label.set_text("Button: " + str(self.cnt)) + end +end + +counterBtn = CounterBtn() diff --git a/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_get_started_2.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_get_started_2.be new file mode 100644 index 000000000..08452c0e2 --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_get_started_2.be @@ -0,0 +1,61 @@ +# +# Create styles from scratch for buttons. +# +style_btn = lv.style() +style_btn_red = lv.style() +style_btn_pressed = lv.style() + +# 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) + +# 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/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_get_started_3.be b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_get_started_3.be new file mode 100644 index 000000000..fa2b60cbf --- /dev/null +++ b/tasmota/berry/lvgl_examples/lvgl_examples_from_doc/lv_example_get_started_3.be @@ -0,0 +1,23 @@ +var label # Berry needs the global to be defined before the function + +def slider_event_cb(obj,evt) + var slider = obj + + # Refresh the text + label.set_text(str(slider.get_value())) +end + +# +# 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 below 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