adding micropython examples (lvgl#2286)

* adding micropython examples

* adding micropython examples

examples/anim/lv_example_anim_1.py

@@ -0,0 +1,41 @@
+def anim_x_cb(label, v):
+    label.set_x(v)
+
+def sw_event_cb(e,label):
+    sw = e.get_target()
+
+    if sw.has_state(lv.STATE.CHECKED): 
+        a = lv.anim_t()
+        a.init()
+        a.set_var(label)
+        a.set_values(label.get_x(), 100)
+        a.set_time(500)
+        a.set_path_cb(lv.anim_t.path_overshoot)
+        a.set_custom_exec_cb(lambda a,val: anim_x_cb(label,val))
+        lv.anim_t.start(a)
+    else:
+        a = lv.anim_t()
+        a.init()
+        a.set_var(label)
+        a.set_values(label.get_x(), -label.get_width())
+        a.set_time(500)
+        a.set_path_cb(lv.anim_t.path_ease_in)
+        a.set_custom_exec_cb(lambda a,val: anim_x_cb(label,val))
+        lv.anim_t.start(a)
+
+#
+# Start animation on an event
+#
+
+label = lv.label(lv.scr_act())
+label.set_text("Hello animations!")
+label.set_pos(100, 10)
+
+
+sw = lv.switch(lv.scr_act())
+sw.center()
+sw.add_state(lv.STATE.CHECKED)
+sw.add_event_cb(lambda e: sw_event_cb(e,label), lv.EVENT.VALUE_CHANGED, None)
+
+
+

examples/anim/lv_example_anim_2.py

@@ -0,0 +1,41 @@
+def anim_x_cb(obj, v):
+    obj.set_x(v)
+
+def anim_size_cb(obj, v):
+    obj.set_size(v, v)
+
+
+#
+# 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_t()
+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_t.path_ease_in_out)
+a1.set_custom_exec_cb(lambda a1,val: anim_size_cb(obj,val))
+lv.anim_t.start(a1)
+
+a2 = lv.anim_t()
+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_t.path_ease_in_out)
+a2.set_custom_exec_cb(lambda a1,val: anim_x_cb(obj,val))
+lv.anim_t.start(a2)

examples/assets/img_star.png

@@ -0,0 +1 @@
+star.png

examples/assets/img_strip.png

@@ -0,0 +1 @@
+skew_strip.png

examples/event/lv_example_event_1.py

@@ -0,0 +1,25 @@
+class Event_1():
+    def __init__(self):
+        self.cnt = 1
+        #
+        # Add click event to a button
+        #
+
+        btn = lv.btn(lv.scr_act())
+        btn.set_size(100, 50)
+        btn.center()
+        btn.add_event_cb(self.event_cb, lv.EVENT.CLICKED, None)
+
+        label = lv.label(btn)
+        label.set_text("Click me!");
+        label.center()
+
+    def event_cb(self,e):
+        print("Clicked");
+
+        btn = lv.btn.__cast__(e.get_target())
+        label = btn.get_child(0)
+        label.set_text(str(self.cnt))
+        self.cnt += 1
+
+evt1 = Event_1()

examples/event/lv_example_event_2.py

@@ -0,0 +1,22 @@
+def event_cb(e,label):
+    code = e.get_code()
+    if code == lv.EVENT.PRESSED:
+        label.set_text("The last button event:\nLV_EVENT_PRESSED")
+    elif code == lv.EVENT.CLICKED:
+        label.set_text("The last button event:\nLV_EVENT_CLICKED")
+    elif code ==  lv.EVENT.LONG_PRESSED:
+        label.set_text("The last button event:\nLV_EVENT_LONG_PRESSED")
+    elif code == lv.EVENT.LONG_PRESSED_REPEAT:
+        label.set_text("The last button event:\nLV_EVENT_LONG_PRESSED_REPEAT")        
+btn = lv.btn(lv.scr_act())
+btn.set_size(100, 50)
+btn.center()
+
+btn_label = lv.label(btn)
+btn_label.set_text("Click me!")
+btn_label.center()
+
+info_label = lv.label(lv.scr_act())
+info_label.set_text("The last button event:\nNone");
+
+btn.add_event_cb(lambda e: event_cb(e,info_label), lv.EVENT.ALL, None)

examples/event/lv_example_event_3.py

@@ -0,0 +1,31 @@
+def event_cb(e):
+
+    # The original target of the event. Can be the buttons or the container
+    target = e.get_target()
+    # print(type(target))
+
+    # If container was clicked do nothing
+    if type(target) != type(lv.btn()):
+        return
+
+    # Make the clicked buttons red
+    target.set_style_bg_color(lv.palette_main(lv.PALETTE.RED), 0)
+
+#
+# Demonstrate event bubbling
+#
+
+cont = lv.obj(lv.scr_act())
+cont.set_size(320, 200)
+cont.center()
+cont.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)
+
+for i in range(30):
+    btn = lv.btn(cont)
+    btn.set_size(80, 50)
+    btn.add_flag(lv.obj.FLAG.EVENT_BUBBLE)
+
+    label = lv.label(btn)
+    label.set_text(str(i))
+    label.center()
+    cont.add_event_cb(event_cb, lv.EVENT.CLICKED, None)

examples/get_started/lv_example_get_started_1.py

@@ -0,0 +1,29 @@
+class CounterBtn():
+    def __init__(self):
+        self.cnt = 0
+        #
+        # Create a button with a label and react on click event.
+        #
+
+        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 = lv.label.__cast__(btn.get_child(0))
+        label.set_text("Button: " + str(self.cnt))
+
+
+counterBtn = CounterBtn()
+

examples/get_started/lv_example_get_started_2.py

@@ -0,0 +1,62 @@
+#
+# 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 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 an other 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()
+

examples/get_started/lv_example_get_started_3.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 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
+
+

examples/header.py

@@ -0,0 +1,3 @@
+#!/opt/bin/lv_micropython -i
+import lvgl as lv
+import display_driver

examples/layouts/flex/lv_example_flex_1.py

@@ -0,0 +1,33 @@
+#
+# A simple row and a column layout with flexbox
+#
+
+# Create a container with ROW flex direction
+cont_row = lv.obj(lv.scr_act())
+cont_row.set_size(300, 75)
+cont_row.align(lv.ALIGN.TOP_MID, 0, 5)
+cont_row.set_flex_flow(lv.FLEX_FLOW.ROW)
+
+# Create a container with COLUMN flex direction
+cont_col = lv.obj(lv.scr_act())
+cont_col.set_size(200, 150)
+cont_col.align_to(cont_row, lv.ALIGN.OUT_BOTTOM_MID, 0, 5)
+cont_col.set_flex_flow(lv.FLEX_FLOW.COLUMN)
+
+for i in range(10):
+    # Add items to the row
+    obj = lv.btn(cont_row)
+    obj.set_size(100, lv.pct(100))
+
+    label = lv.label(obj)
+    label.set_text("Item: {:d}".format(i))
+    label.center()
+
+    # Add items to the column
+    obj = lv.btn(cont_col)
+    obj.set_size(lv.pct(100), lv.SIZE.CONTENT)
+
+    label = lv.label(obj)
+    label.set_text("Item: {:d}".format(i))
+    label.center()
+

examples/layouts/flex/lv_example_flex_2.py

@@ -0,0 +1,22 @@
+#
+# Arrange items in rows with wrap and place the items to get even space around them.
+#
+style = lv.style_t()
+style.init()
+style.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)
+style.set_flex_main_place(lv.FLEX_ALIGN.SPACE_EVENLY)
+style.set_layout(lv.LAYOUT_FLEX.value)
+
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.add_style(style, 0)
+
+for i in range(8):
+    obj = lv.obj(cont)
+    obj.set_size(70, lv.SIZE.CONTENT)
+
+    label = lv.label(obj)
+    label.set_text("{:d}".format(i))
+    label.center()
+

examples/layouts/flex/lv_example_flex_3.py

@@ -0,0 +1,23 @@
+#
+# Demonstrate flex grow.
+#
+
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.set_flex_flow(lv.FLEX_FLOW.ROW)
+
+obj = lv.obj(cont)
+obj.set_size(40, 40)           # Fix size
+
+obj = lv.obj(cont)
+obj.set_height(40)
+obj.set_flex_grow(1)           # 1 portion from the free space
+
+obj = lv.obj(cont)
+obj.set_height(40)
+obj.set_flex_grow(2)           # 2 portion from the free space
+
+obj = lv.obj(cont)
+obj.set_size(40, 40)           # Fix size. It is flushed to the right by the "grow" items
+

examples/layouts/flex/lv_example_flex_4.py

@@ -0,0 +1,16 @@
+#
+# Reverse the order of flex items
+#
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.set_flex_flow(lv.FLEX_FLOW.COLUMN_REVERSE)
+
+for i  in range(6):
+    obj = lv.obj(cont)
+    obj.set_size(100, 50)
+
+    label = lv.label(obj)
+    label.set_text("Item: " + str(i))
+    label.center()
+