Merge pull request #15079 from s-hadinger/lvgl_ex_1

Add LVGL examples

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()

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()

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))

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)

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)

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()

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()

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()

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")
+

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
+

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()

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()

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