haas_lib_bundles/python/docs/examples/ui_collection/airpressure.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+
+class Airpressure:
+    scr = None
+    iconImg = None
+    airpressureLable = None
+    unityLabel = None
+    tipLabel = None
+
+    def __init__(self, screen):
+        self.scr = screen
+        self.createAirpressureItem(self.scr, RESOURCES_ROOT + "airpressure.png", "Air pressure")
+
+    def createAirpressureItem(self, parent, iconPath, tips):
+        self.iconImg = lv.img(parent)
+        self.iconImg.set_src(iconPath)
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, 0, 0)
+
+        self.airpressureLable = lv.label(parent)
+        self.airpressureLable.set_text("None")
+        self.airpressureLable.set_style_text_color(lv.color_white(), 0)
+        self.airpressureLable.set_style_text_font(lv.font_montserrat_48, 0)
+        self.airpressureLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+
+        self.unityLabel = lv.label(parent)
+        self.unityLabel.set_text(" HPA")
+        self.unityLabel.set_style_text_color(lv.color_white(), 0)
+        self.unityLabel.set_style_text_font(lv.font_montserrat_18, 0)
+        self.unityLabel.align_to(self.airpressureLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+
+        self.tipLabel = lv.label(parent)
+        self.tipLabel.set_text(tips)
+        self.tipLabel.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        self.tipLabel.set_style_text_font(lv.font_montserrat_14, 0)
+        self.tipLabel.align_to(self.airpressureLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setValue(self, humidity):
+        self.airpressureLable.set_text(str(int(humidity)))
+
+    def setXY(self, x, y):
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, x, y)
+        self.airpressureLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+        self.unityLabel.align_to(self.airpressureLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+        self.tipLabel.align_to(self.airpressureLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setScale(self, scale):
+        print("To be done")
+

haas_lib_bundles/python/docs/examples/ui_collection/angle.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+
+class Angle:
+    scr = None
+    iconImg = None
+    angleLable = None
+    unityLabel = None
+    tipLabel = None
+
+    def __init__(self, screen):
+        self.scr = screen
+        self.createAngleItem(self.scr, RESOURCES_ROOT + "angle.png", "Angle")
+
+    def createAngleItem(self, parent, iconPath, tips):
+        self.iconImg = lv.img(parent)
+        self.iconImg.set_src(iconPath)
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, 0, 0)
+
+        self.angleLable = lv.label(parent)
+        self.angleLable.set_text("None")
+        self.angleLable.set_style_text_color(lv.color_white(), 0)
+        self.angleLable.set_style_text_font(lv.font_montserrat_48, 0)
+        self.angleLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+
+        self.unityLabel = lv.label(parent)
+        self.unityLabel.set_text(" o")
+        self.unityLabel.set_style_text_color(lv.color_white(), 0)
+        self.unityLabel.set_style_text_font(lv.font_montserrat_18, 0)
+        self.unityLabel.align_to(self.angleLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+
+        self.tipLabel = lv.label(parent)
+        self.tipLabel.set_text(tips)
+        self.tipLabel.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        self.tipLabel.set_style_text_font(lv.font_montserrat_14, 0)
+        self.tipLabel.align_to(self.angleLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setValue(self, humidity):
+        self.angleLable.set_text(str(int(humidity)))
+
+    def setXY(self, x, y):
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, x, y)
+        self.angleLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+        self.unityLabel.align_to(self.angleLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+        self.tipLabel.align_to(self.angleLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setScale(self, scale):
+        print("To be done")
+

haas_lib_bundles/python/docs/examples/ui_collection/compass.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/"
+
+compass_ttf_alive = False
+
+def compass_back_click_callback(e, win):
+    global compass_ttf_alive
+    if (compass_ttf_alive):
+        from smart_panel import load_smart_panel
+        load_smart_panel()
+        compass_ttf_alive = False
+
+def compass_back_press_callback(e, image):
+    image.set_zoom(280)
+
+def compass_back_release_callback(e, image):
+    image.set_zoom(250)
+
+value = 0
+
+class Compass:
+    def createPage(self):
+        global value
+        global compass_ttf_alive
+
+        print("Enter Compass")
+
+        # init scr
+        scr = lv.obj()
+
+        win = lv.obj(scr)
+        win.set_size(scr.get_width(), scr.get_height())
+        win.set_style_border_opa(0, 0)
+        win.set_style_radius(0, 0)
+        win.set_style_bg_color(lv.color_black(), 0)
+        win.clear_flag(lv.obj.FLAG.SCROLLABLE)
+
+        backImg=lv.img(win)
+        backImg.set_src(RESOURCES_ROOT + "images/back.png")
+        backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+        backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+        backImg.add_event_cb(lambda e: compass_back_click_callback(e, win), lv.EVENT.CLICKED, None)
+        backImg.add_event_cb(lambda e: compass_back_press_callback(e, backImg), lv.EVENT.PRESSED, None)
+        backImg.add_event_cb(lambda e: compass_back_release_callback(e, backImg), lv.EVENT.RELEASED, None)
+        backImg.set_ext_click_area(30)
+
+        # -------------- compass image ----------------
+        compass_dial = lv.img(win)
+        compass_dial.set_src(RESOURCES_ROOT + "images/compass_dial.png")
+        compass_dial.set_style_max_height(scr.get_height(), 0)
+        compass_dial.set_angle(value * 10)
+        compass_dial.center()
+
+        # -------------- indicator --------------------
+        compass_indicator = lv.img(win)
+        compass_indicator.set_src(RESOURCES_ROOT + "images/compass_indicator.png")
+        # compass_indicator.set_style_max_height(scr.get_height(), 0)
+        compass_indicator.set_angle(value * 10)
+        compass_indicator.center()
+
+        col_dsc = [35, 10, 25, lv.GRID_TEMPLATE.LAST]
+        row_dsc = [20, 35, 20, lv.GRID_TEMPLATE.LAST]
+        degreeArea = lv.obj(win)
+        degreeArea.set_size(95, 100)
+        degreeArea.set_style_bg_opa(0, 0)
+        degreeArea.set_style_border_opa(0, 0)
+        degreeArea.set_style_pad_all(0, 0)
+        degreeArea.set_layout(lv.LAYOUT_GRID.value)
+        degreeArea.set_grid_dsc_array(col_dsc, row_dsc)
+        degreeArea.center()
+        # degreeArea.set_style_pad_left(5, 0)
+        degreeArea.clear_flag(lv.obj.FLAG.SCROLLABLE)
+
+        red = lv.img(degreeArea)
+        red.set_src(RESOURCES_ROOT + "images/angle_red.png")
+        red.set_grid_cell(lv.GRID_ALIGN.CENTER, 0, 3, lv.GRID_ALIGN.CENTER, 0, 1)
+
+        degreeLable = lv.label(degreeArea)
+        degreeLable.set_text(str(value))
+        degreeLable.set_style_text_color(lv.color_white(), 0)
+        degreeLable.set_style_text_font(lv.font_montserrat_36, 0)
+        degreeLable.set_grid_cell(lv.GRID_ALIGN.CENTER, 0, 1, lv.GRID_ALIGN.CENTER, 1, 1)
+
+        degreeIcon = lv.img(degreeArea)
+        degreeIcon.set_src(RESOURCES_ROOT + "images/degree.png")
+        degreeIcon.set_style_pad_top(5, 0)
+        degreeIcon.set_grid_cell(lv.GRID_ALIGN.START, 1, 1, lv.GRID_ALIGN.START, 1, 1)
+
+        directionLable = lv.label(degreeArea)
+        directionLable.set_text("N")
+        directionLable.set_style_text_color(lv.color_white(), 0)
+        directionLable.set_style_text_font(lv.font_montserrat_36, 0)
+        directionLable.set_grid_cell(lv.GRID_ALIGN.START, 2, 1, lv.GRID_ALIGN.CENTER, 1, 1)
+
+        tips = lv.label(degreeArea)
+        tips.set_text("Compass")
+        tips.set_style_text_color(lv.color_white(), 0)
+        tips.set_style_text_font(lv.font_montserrat_12, 0)
+        tips.set_grid_cell(lv.GRID_ALIGN.CENTER, 0, 3, lv.GRID_ALIGN.CENTER, 2, 1)
+
+        from smart_panel import needAnimation
+        if (needAnimation):
+            lv.scr_load_anim(scr, lv.SCR_LOAD_ANIM.MOVE_LEFT, 500, 0, True)
+        else:
+            lv.scr_load_anim(scr, lv.SCR_LOAD_ANIM.NONE, 0, 0, True)
+
+        compass_ttf_alive = True

haas_lib_bundles/python/docs/examples/ui_collection/distance.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+
+class Distance:
+    scr = None
+    iconImg = None
+    distanceLable = None
+    unityLabel = None
+    tipLabel = None
+
+    def __init__(self, screen):
+        self.scr = screen
+        self.createDistanceItem(self.scr, RESOURCES_ROOT + "distance.png", "DST")
+
+    def createDistanceItem(self, parent, iconPath, tips):
+        self.iconImg = lv.img(parent)
+        self.iconImg.set_src(iconPath)
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, 0, 0)
+
+        self.distanceLable = lv.label(parent)
+        self.distanceLable.set_text("None")
+        self.distanceLable.set_style_text_color(lv.color_white(), 0)
+        self.distanceLable.set_style_text_font(lv.font_montserrat_48, 0)
+        self.distanceLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+
+        self.unityLabel = lv.label(parent)
+        self.unityLabel.set_text(" M")
+        self.unityLabel.set_style_text_color(lv.color_white(), 0)
+        self.unityLabel.set_style_text_font(lv.font_montserrat_18, 0)
+        self.unityLabel.align_to(self.distanceLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+
+        self.tipLabel = lv.label(parent)
+        self.tipLabel.set_text(tips)
+        self.tipLabel.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        self.tipLabel.set_style_text_font(lv.font_montserrat_14, 0)
+        self.tipLabel.align_to(self.distanceLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setValue(self, humidity):
+        self.distanceLable.set_text(str(int(humidity)))
+
+    def setXY(self, x, y):
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, x, y)
+        self.distanceLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+        self.unityLabel.align_to(self.distanceLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+        self.tipLabel.align_to(self.distanceLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setScale(self, scale):
+        print("To be done")
+

haas_lib_bundles/python/docs/examples/ui_collection/environment.py

+import lvgl as lv
+import utime
+
+RESOURCES_ROOT = "S:/data/pyamp/"
+
+def drawOver(e):
+    global g_clickTime
+
+    if (g_clickTime != 0):
+        currentTime = utime.ticks_ms()
+        print("create Environment page use: %dms" % int((currentTime - g_clickTime)))
+        g_clickTime = 0
+
+environment_alive = False
+
+def environment_back_click_callback(e, win):
+    global environment_alive
+
+    if (environment_alive):
+        from smart_panel import load_smart_panel
+        load_smart_panel()
+        environment_alive = False
+
+def environment_back_press_callback(e, back_image):
+    back_image.set_zoom(280)
+
+def environment_back_release_callback(e, back_image):
+    back_image.set_zoom(250)
+
+class Environment:
+    def createPage(self):
+        global environment_alive
+        global g_clickTime
+
+        g_clickTime = utime.ticks_ms()
+
+        # init scr
+        scr = lv.obj()
+
+        win = lv.obj(scr)
+        win.set_size(scr.get_width(), scr.get_height())
+        win.set_style_border_opa(0, 0)
+        win.set_style_bg_color(lv.color_black(), 0)
+        win.set_style_radius(0, 0)
+        win.clear_flag(lv.obj.FLAG.SCROLLABLE)
+        win.add_event_cb(drawOver, lv.EVENT.DRAW_POST_END, None)
+
+        backImg=lv.img(win)
+        backImg.set_src(RESOURCES_ROOT + "images/back.png")
+        backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+        backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+        backImg.add_event_cb(lambda e: environment_back_click_callback(e, win), lv.EVENT.CLICKED, None)
+        backImg.add_event_cb(lambda e: environment_back_press_callback(e, backImg), lv.EVENT.PRESSED, None)
+        backImg.add_event_cb(lambda e: environment_back_release_callback(e, backImg), lv.EVENT.RELEASED, None)
+        backImg.set_ext_click_area(20)
+
+        container = lv.obj(win)
+        container.set_style_bg_opa(0, 0)
+        container.set_style_border_opa(0, 0)
+        container.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+        container.set_flex_flow(lv.FLEX_FLOW.COLUMN)
+        container.set_style_align(lv.ALIGN.CENTER, 0)
+        container.set_style_pad_left(0, 0)
+
+        self.createItem(container, RESOURCES_ROOT + "images/temperature.png", "25",
+                RESOURCES_ROOT + "images/centigrade_l.png", "Temperature")
+        self.createInterval(container, 25)
+        self.createItem(container, RESOURCES_ROOT + "images/humidity.png", "41 %", "", "Humidity")
+
+        from smart_panel import needAnimation
+        if (needAnimation):
+            lv.scr_load_anim(scr, lv.SCR_LOAD_ANIM.MOVE_LEFT, 500, 0, True)
+        else:
+            lv.scr_load_anim(scr, lv.SCR_LOAD_ANIM.NONE, 0, 0, True)
+
+        environment_alive = True
+        currentTime = utime.ticks_ms()
+        print("run python code use: %dms" % int((currentTime - g_clickTime)))
+
+    def createItem(self, parent, iconPath, value, unityPath, tips):
+        col_dsc = [lv.GRID.CONTENT, 5, lv.GRID.CONTENT, lv.GRID.CONTENT, lv.GRID_TEMPLATE.LAST]
+        row_dsc = [lv.GRID.CONTENT, lv.GRID.CONTENT, lv.GRID_TEMPLATE.LAST]
+
+        cont = lv.obj(parent)
+        cont.set_style_bg_opa(0, 0)
+        cont.set_style_border_opa(0, 0)
+        cont.set_style_pad_all(0, 0)
+        cont.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+        cont.set_style_grid_column_dsc_array(col_dsc, 0)
+        cont.set_style_grid_row_dsc_array(row_dsc, 0)
+        cont.set_layout(lv.LAYOUT_GRID.value)
+
+        img = lv.img(cont)
+        img.set_src(iconPath)
+        img.set_grid_cell(lv.GRID_ALIGN.START, 0, 1, lv.GRID_ALIGN.CENTER, 0, 2)
+
+        label = lv.label(cont)
+        label.set_text(value)
+        label.set_style_text_color(lv.color_white(), 0)
+        label.set_style_text_font(lv.font_montserrat_48, 0)
+        label.set_style_pad_all(0, 0)
+        label.set_grid_cell(lv.GRID_ALIGN.START, 2, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+
+        if (unityPath.strip()):
+            iconImg = lv.img(cont)
+            iconImg.set_src(unityPath)
+            iconImg.set_zoom(205)
+            iconImg.set_style_pad_bottom(0, 0)
+            iconImg.set_grid_cell(lv.GRID_ALIGN.START, 3, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+
+        tip = lv.label(cont)
+        tip.set_text(tips)
+        tip.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        tip.set_grid_cell(lv.GRID_ALIGN.START, 2, 2, lv.GRID_ALIGN.START, 1, 1)
+
+
+    def createInterval(self, parent, size):
+        interval = lv.obj(parent)
+        interval.set_style_bg_opa(0, 0)
+        interval.set_style_border_opa(0, 0)
+        interval.set_height(size)
+        interval.set_width(0)

haas_lib_bundles/python/docs/examples/ui_collection/fm.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+
+class Fm:
+    scr = None
+    iconImg = None
+    fmLable = None
+    unityLabel = None
+    tipLabel = None
+
+    def __init__(self, screen):
+        self.scr = screen
+        self.createFmItem(self.scr, RESOURCES_ROOT + "FM.png", "FM")
+
+    def createFmItem(self, parent, iconPath, tips):
+        self.iconImg = lv.img(parent)
+        self.iconImg.set_src(iconPath)
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, 0, 0)
+
+        self.fmLable = lv.label(parent)
+        self.fmLable.set_text("None")
+        self.fmLable.set_style_text_color(lv.color_white(), 0)
+        self.fmLable.set_style_text_font(lv.font_montserrat_48, 0)
+        self.fmLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+
+        self.unityLabel = lv.label(parent)
+        self.unityLabel.set_text(" MHz")
+        self.unityLabel.set_style_text_color(lv.color_white(), 0)
+        self.unityLabel.set_style_text_font(lv.font_montserrat_18, 0)
+        self.unityLabel.align_to(self.fmLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+
+        self.tipLabel = lv.label(parent)
+        self.tipLabel.set_text(tips)
+        self.tipLabel.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        self.tipLabel.set_style_text_font(lv.font_montserrat_14, 0)
+        self.tipLabel.align_to(self.fmLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setValue(self, humidity):
+        self.fmLable.set_text(str(int(humidity)))
+
+    def setXY(self, x, y):
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, x, y)
+        self.fmLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+        self.unityLabel.align_to(self.fmLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+        self.tipLabel.align_to(self.fmLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setScale(self, scale):
+        print("To be done")
+

haas_lib_bundles/python/docs/examples/ui_collection/font_Alibaba_PuHuiTi.py

+import lvgl as lv
+
+font_not_load_16 = True
+info_16 = None
+style_16 = None
+
+def set_text_size_16(parent):
+    global font_not_load_16
+    global info_16
+    global style_16
+    if (font_not_load_16):
+        info_16 = lv.ft_info_t()
+        info_16.name ="/data/pyamp/font/AlibabaPuHuiTiM_16.ttf"
+        info_16.weight = 16
+        info_16.style = lv.FT_FONT_STYLE.NORMAL
+        info_16.font_init()
+
+        style_16 = lv.style_t()
+        style_16.init()
+        style_16.set_text_font(info_16.font)
+        font_not_load_16 = False
+    parent.add_style(style_16, 0)
+
+font_not_load_20 = True
+info_20 = None
+style_20 = None
+def set_text_size_20(parent):
+    global font_not_load_20
+    global info_20
+    global style_20
+    if (font_not_load_20):
+        info_20 = lv.ft_info_t()
+        info_20.name ="/data/pyamp/font/AlibabaPuHuiTiM_20.ttf"
+        info_20.weight = 20
+        info_20.style = lv.FT_FONT_STYLE.NORMAL
+        info_20.font_init()
+
+        style_20 = lv.style_t()
+        style_20.init()
+        style_20.set_text_font(info_20.font)
+        font_not_load_20 = False
+    parent.add_style(style_20, 0)
+
+font_not_load_22 = True
+info_22 = None
+style_22 = None
+def set_text_size_22(parent):
+    global font_not_load_22
+    global info_22
+    global style_22
+    if (font_not_load_22):
+        info_22 = lv.ft_info_t()
+        info_22.name ="/data/pyamp/font/AlibabaPuHuiTiM_22.ttf"
+        info_22.weight = 22
+        info_22.style = lv.FT_FONT_STYLE.NORMAL
+        info_22.font_init()
+
+        style_22 = lv.style_t()
+        style_22.init()
+        style_22.set_text_font(info_22.font)
+        font_not_load_22 = False
+    parent.add_style(style_22, 0)
+
+font_not_load_38 = True
+info_38 = None
+style_38 = None
+def set_text_size_38(parent):
+    global font_not_load_38
+    global info_38
+    global style_38
+    if (font_not_load_38):
+        info_38 = lv.ft_info_t()
+        info_38.name ="/data/pyamp/font/AlibabaPuHuiTiM_38.ttf"
+        info_38.weight = 38
+        info_38.style = lv.FT_FONT_STYLE.NORMAL
+        info_38.font_init()
+
+        style_38 = lv.style_t()
+        style_38.init()
+        style_38.set_text_font(info_38.font)
+        font_not_load_38 = False
+    parent.add_style(style_38, 0)
+
+def set_text_size(parent, size):
+    if (size == 38):
+        set_text_size_38(parent)
+    elif (size == 22):
+        set_text_size_22(parent)
+    elif (size == 20):
+        set_text_size_20(parent)
+    else:
+        set_text_size_16(parent)
+

haas_lib_bundles/python/docs/examples/ui_collection/gas.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+
+class Gas:
+    scr = None
+    iconImg = None
+    gasLable = None
+    unityLabel = None
+    tipLabel = None
+
+    def __init__(self, screen):
+        self.scr = screen
+        self.createGasItem(self.scr, RESOURCES_ROOT + "gas.png", "Nature Gas")
+
+    def createGasItem(self, parent, iconPath, tips):
+        self.iconImg = lv.img(parent)
+        self.iconImg.set_src(iconPath)
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, 0, 0)
+
+        self.gasLable = lv.label(parent)
+        self.gasLable.set_text("None")
+        self.gasLable.set_style_text_color(lv.color_white(), 0)
+        self.gasLable.set_style_text_font(lv.font_montserrat_48, 0)
+        self.gasLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+
+        self.unityLabel = lv.label(parent)
+        self.unityLabel.set_text(" %LEL")
+        self.unityLabel.set_style_text_color(lv.color_white(), 0)
+        self.unityLabel.set_style_text_font(lv.font_montserrat_18, 0)
+        self.unityLabel.align_to(self.gasLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+
+        self.tipLabel = lv.label(parent)
+        self.tipLabel.set_text(tips)
+        self.tipLabel.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        self.tipLabel.set_style_text_font(lv.font_montserrat_14, 0)
+        self.tipLabel.align_to(self.gasLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setValue(self, humidity):
+        self.gasLable.set_text(str(int(humidity)))
+
+    def setXY(self, x, y):
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, x, y)
+        self.gasLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+        self.unityLabel.align_to(self.gasLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+        self.tipLabel.align_to(self.gasLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setScale(self, scale):
+        print("To be done")
+

haas_lib_bundles/python/docs/examples/ui_collection/hcho.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+
+class Hcho:
+    scr = None
+    iconImg = None
+    hchoLable = None
+    unityLabel = None
+    tipLabel = None
+
+    def __init__(self, screen):
+        self.scr = screen
+        self.createHchoItem(self.scr, RESOURCES_ROOT + "hcho.png", "PA")
+
+    def createHchoItem(self, parent, iconPath, tips):
+        self.iconImg = lv.img(parent)
+        self.iconImg.set_src(iconPath)
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, 0, 0)
+
+        self.hchoLable = lv.label(parent)
+        self.hchoLable.set_text("None")
+        self.hchoLable.set_style_text_color(lv.color_white(), 0)
+        self.hchoLable.set_style_text_font(lv.font_montserrat_48, 0)
+        self.hchoLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+
+        self.unityLabel = lv.label(parent)
+        self.unityLabel.set_text(" mg/m3")
+        self.unityLabel.set_style_text_color(lv.color_white(), 0)
+        self.unityLabel.set_style_text_font(lv.font_montserrat_18, 0)
+        self.unityLabel.align_to(self.hchoLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+
+        self.tipLabel = lv.label(parent)
+        self.tipLabel.set_text(tips)
+        self.tipLabel.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        self.tipLabel.set_style_text_font(lv.font_montserrat_14, 0)
+        self.tipLabel.align_to(self.hchoLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setValue(self, humidity):
+        self.hchoLable.set_text(str(int(humidity)))
+
+    def setXY(self, x, y):
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, x, y)
+        self.hchoLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+        self.unityLabel.align_to(self.hchoLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+        self.tipLabel.align_to(self.hchoLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setScale(self, scale):
+        print("To be done")
+

haas_lib_bundles/python/docs/examples/ui_collection/heartrate.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+
+class Heartrate:
+    scr = None
+    iconImg = None
+    heartrateLable = None
+    unityLabel = None
+    tipLabel = None
+
+    def __init__(self, screen):
+        self.scr = screen
+        self.createHeartrateItem(self.scr, RESOURCES_ROOT + "heartrate.png", "HR")
+
+    def createHeartrateItem(self, parent, iconPath, tips):
+        self.iconImg = lv.img(parent)
+        self.iconImg.set_src(iconPath)
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, 0, 0)
+
+        self.heartrateLable = lv.label(parent)
+        self.heartrateLable.set_text("None")
+        self.heartrateLable.set_style_text_color(lv.color_white(), 0)
+        self.heartrateLable.set_style_text_font(lv.font_montserrat_48, 0)
+        self.heartrateLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+
+        self.unityLabel = lv.label(parent)
+        self.unityLabel.set_text(" BPM")
+        self.unityLabel.set_style_text_color(lv.color_white(), 0)
+        self.unityLabel.set_style_text_font(lv.font_montserrat_18, 0)
+        self.unityLabel.align_to(self.heartrateLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+
+        self.tipLabel = lv.label(parent)
+        self.tipLabel.set_text(tips)
+        self.tipLabel.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        self.tipLabel.set_style_text_font(lv.font_montserrat_14, 0)
+        self.tipLabel.align_to(self.heartrateLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setValue(self, humidity):
+        self.heartrateLable.set_text(str(int(humidity)))
+
+    def setXY(self, x, y):
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, x, y)
+        self.heartrateLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+        self.unityLabel.align_to(self.heartrateLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+        self.tipLabel.align_to(self.heartrateLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setScale(self, scale):
+        print("To be done")
+

haas_lib_bundles/python/docs/examples/ui_collection/humidity.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+
+class Humidity:
+    scr = None
+    iconImg = None
+    humidityLable = None
+    unityLabel = None
+    tipLabel = None
+
+    def __init__(self, screen):
+        self.scr = screen
+        self.createHumidityItem(self.scr, RESOURCES_ROOT + "humidity.png", "TDS")
+
+    def createHumidityItem(self, parent, iconPath, tips):
+        self.iconImg = lv.img(parent)
+        self.iconImg.set_src(iconPath)
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, 0, 0)
+
+        self.humidityLable = lv.label(parent)
+        self.humidityLable.set_text("None")
+        self.humidityLable.set_style_text_color(lv.color_white(), 0)
+        self.humidityLable.set_style_text_font(lv.font_montserrat_48, 0)
+        self.humidityLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+
+        self.unityLabel = lv.label(parent)
+        self.unityLabel.set_text(" PPM")
+        self.unityLabel.set_style_text_color(lv.color_white(), 0)
+        self.unityLabel.set_style_text_font(lv.font_montserrat_18, 0)
+        self.unityLabel.align_to(self.humidityLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+
+        self.tipLabel = lv.label(parent)
+        self.tipLabel.set_text(tips)
+        self.tipLabel.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        self.tipLabel.set_style_text_font(lv.font_montserrat_14, 0)
+        self.tipLabel.align_to(self.humidityLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setValue(self, humidity):
+        self.humidityLable.set_text(str(int(humidity)))
+
+    def setXY(self, x, y):
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, x, y)
+        self.humidityLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+        self.unityLabel.align_to(self.humidityLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+        self.tipLabel.align_to(self.humidityLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setScale(self, scale):
+        print("To be done")
+

haas_lib_bundles/python/docs/examples/ui_collection/hvac.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/"
+
+environment_alive = False
+
+functionImage = [
+        RESOURCES_ROOT + "images/refrigeration.png",
+        RESOURCES_ROOT + "images/heating.png",
+        RESOURCES_ROOT + "images/dehumidification.png",
+        RESOURCES_ROOT + "images/ventilation.png"]
+
+functionImageSelected = [
+        RESOURCES_ROOT + "images/refrigeration_selected.png",
+        RESOURCES_ROOT + "images/heating_selected.png",
+        RESOURCES_ROOT + "images/dehumidification_selected.png",
+        RESOURCES_ROOT + "images/ventilation_selected.png"]
+
+currentFunc = 0
+currentSelected = None
+
+hvac_alive = False
+
+def hvac_back_click_callback(e, win):
+    global hvac_alive
+
+    if (hvac_alive):
+        from smart_panel import load_smart_panel
+        load_smart_panel()
+        hvac_alive = False
+
+def hvac_back_press_callback(e, image):
+    image.set_zoom(280)
+
+def hvac_back_release_callback(e, image):
+    image.set_zoom(250)
+
+def sub_pressed_cb(e, self):
+    print("sub")
+
+    if (self.value > 16):
+        self.value -= 1
+        print("value %d" % (self.value))
+        self.label.set_text(str(self.value))
+
+def add_pressed_cb(e, self):
+    print("add")
+
+    if (self.value < 30):
+        self.value += 1
+        print("value %d" % (self.value))
+        self.label.set_text(str(self.value))
+
+def func_pressed_cb(e, index):
+    global currentFunc
+    global currentSelected
+
+    print(index)
+
+    if (index != currentFunc):
+        currentSelected.set_src(functionImage[currentFunc])
+        selectedImage = e.get_target()
+        currentFunc = index
+        selectedImage.set_src(functionImageSelected[currentFunc])
+        currentSelected = selectedImage
+
+
+class Hvac:
+    value = 25
+
+    def createPage(self):
+        global currentFunc
+        global currentSelected
+        global hvac_alive
+
+        print("Enter Hvac")
+
+        # init scr
+        scr = lv.obj()
+
+        win = lv.obj(scr)
+        win.set_size(scr.get_width(), scr.get_height())
+        win.set_style_border_opa(0, 0)
+        win.set_style_radius(0, 0)
+        win.set_style_bg_color(lv.color_black(), 0)
+        win.clear_flag(lv.obj.FLAG.SCROLLABLE)
+
+        # --------- value container ---------
+        col_dsc = [60, 65, 40, 60, lv.GRID_TEMPLATE.LAST]
+        row_dsc = [48, lv.GRID_TEMPLATE.LAST]
+        valueLayout = lv.obj(win)
+        valueLayout.set_layout(lv.LAYOUT_GRID.value)
+        valueLayout.set_style_bg_opa(0, 0)
+        valueLayout.set_style_border_opa(0, 0)
+        valueLayout.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+        valueLayout.set_grid_align(lv.GRID_ALIGN.SPACE_BETWEEN, lv.GRID_ALIGN.SPACE_BETWEEN)
+        valueLayout.set_style_grid_column_dsc_array(col_dsc, 0)
+        valueLayout.set_style_grid_row_dsc_array(row_dsc, 0)
+        valueLayout.set_style_pad_top(20, 0)
+        valueLayout.set_style_align(lv.ALIGN.TOP_MID, 0)
+        # -----------  -  --------------
+        subImage = lv.img(valueLayout)
+        subImage.set_src(RESOURCES_ROOT + "images/subtraction.png")
+        subImage.set_grid_cell(lv.GRID_ALIGN.START, 0, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+        subImage.add_flag(lv.obj.FLAG.CLICKABLE)
+        subImage.add_event_cb(lambda e: sub_pressed_cb(e, self), lv.EVENT.PRESSED, None)
+        # subImage.add_event_cb(lambda e: hvac_back_press_callback(e, subImage), lv.EVENT.PRESSED, None)
+        # subImage.add_event_cb(lambda e: hvac_back_release_callback(e, subImage), lv.EVENT.RELEASED, None)
+        subImage.set_ext_click_area(40)
+
+        # ----------- value -----------
+        self.label = lv.label(valueLayout)
+        self.label.set_text(str(self.value))
+        self.label.set_style_text_color(lv.color_white(), 0)
+        self.label.set_style_text_font(lv.font_montserrat_48, 0)
+        self.label.set_grid_cell(lv.GRID_ALIGN.CENTER, 1, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+        # ----------- ºC ------------
+        centigradeImage = lv.img(valueLayout)
+        centigradeImage.set_src(RESOURCES_ROOT + "images/centigrade_s.png")
+        centigradeImage.set_style_pad_bottom(8, 0)
+        centigradeImage.set_grid_cell(lv.GRID_ALIGN.START, 2, 1, lv.GRID_ALIGN.END, 0, 1)
+
+        # ----------- + ----------------
+        addImage = lv.img(valueLayout)
+        addImage.set_src(RESOURCES_ROOT + "images/addition.png")
+        addImage.set_grid_cell(lv.GRID_ALIGN.CENTER, 3, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+        addImage.add_flag(lv.obj.FLAG.CLICKABLE)
+        addImage.add_event_cb(lambda e: add_pressed_cb(e, self), lv.EVENT.PRESSED, None)
+        # addImage.add_event_cb(lambda e: hvac_back_press_callback(e, addImage), lv.EVENT.PRESSED, None)
+        # addImage.add_event_cb(lambda e: hvac_back_release_callback(e, addImage), lv.EVENT.RELEASED, None)
+        addImage.set_ext_click_area(40)
+
+        # ----------- tips ----------
+        tips = lv.label(win)
+        tips.set_text("Temperature")
+        tips.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        tips.set_style_pad_bottom(20, 0)
+        tips.set_align(lv.ALIGN.CENTER)
+
+        # ----------- function ----------
+        func_col_dsc = [70, 70, 70, 70, lv.GRID_TEMPLATE.LAST]
+        func_row_dsc = [40, lv.GRID_TEMPLATE.LAST]
+
+        funcContainer = lv.obj(win)
+        funcContainer.set_style_bg_opa(0, 0)
+        funcContainer.set_style_border_opa(0, 0)
+        funcContainer.set_grid_dsc_array(func_col_dsc, func_row_dsc)
+        funcContainer.set_width(300)
+        funcContainer.set_height(90)
+        funcContainer.set_layout(lv.LAYOUT_GRID.value)
+        funcContainer.set_align(lv.ALIGN.BOTTOM_MID)
+        funcContainer.set_grid_align(lv.GRID_ALIGN.SPACE_BETWEEN, lv.GRID_ALIGN.SPACE_BETWEEN)
+
+        image = lv.img(funcContainer)
+        image.set_src(functionImage[0])
+        image.add_flag(lv.obj.FLAG.CLICKABLE)
+        image.set_ext_click_area(20)
+        image.add_event_cb(lambda e: func_pressed_cb(e, 0), lv.EVENT.PRESSED, None)
+        image.set_grid_cell(lv.GRID_ALIGN.CENTER, 0, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+        currentSelected = image
+        currentSelected.set_src(functionImageSelected[0])
+
+        image1 = lv.img(funcContainer)
+        image1.set_src(functionImage[1])
+        image1.add_flag(lv.obj.FLAG.CLICKABLE)
+        image1.set_ext_click_area(20)
+        image1.add_event_cb(lambda e: func_pressed_cb(e, 1), lv.EVENT.PRESSED, None)
+        image1.set_grid_cell(lv.GRID_ALIGN.CENTER, 1, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+
+        image2 = lv.img(funcContainer)
+        image2.set_src(functionImage[2])
+        image2.add_flag(lv.obj.FLAG.CLICKABLE)
+        image2.set_ext_click_area(20)
+        image2.add_event_cb(lambda e: func_pressed_cb(e, 2), lv.EVENT.PRESSED, None)
+        image2.set_grid_cell(lv.GRID_ALIGN.CENTER, 2, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+
+        image3 = lv.img(funcContainer)
+        image3.set_src(functionImage[3])
+        image3.add_flag(lv.obj.FLAG.CLICKABLE)
+        image3.set_ext_click_area(20)
+        image3.add_event_cb(lambda e: func_pressed_cb(e, 3), lv.EVENT.PRESSED, None)
+        image3.set_grid_cell(lv.GRID_ALIGN.CENTER, 3, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+
+        # for i in range(4):
+        #     image = lv.img(funcContainer)
+        #     image.set_src(functionImage[i])
+        #     image.add_flag(lv.obj.FLAG.CLICKABLE)
+        #     image.set_ext_click_area(20)
+        #     image.add_event_cb(lambda e: func_pressed_cb(e, i), lv.EVENT.PRESSED, None)
+        #     image.set_grid_cell(lv.GRID_ALIGN.CENTER, i, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+
+        #     if (currentFunc == i):
+        #         currentSelected = image
+        #         currentSelected.set_src(functionImageSelected[i])
+
+        backImg=lv.img(win)
+        backImg.set_src(RESOURCES_ROOT + "images/back.png")
+        backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+        backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+        backImg.add_event_cb(lambda e: hvac_back_click_callback(e, win), lv.EVENT.CLICKED, None)
+        backImg.add_event_cb(lambda e: hvac_back_press_callback(e, backImg), lv.EVENT.PRESSED, None)
+        backImg.add_event_cb(lambda e: hvac_back_release_callback(e, backImg), lv.EVENT.RELEASED, None)
+        backImg.set_ext_click_area(20)
+
+        from smart_panel import needAnimation
+        if (needAnimation):
+            lv.scr_load_anim(scr, lv.SCR_LOAD_ANIM.MOVE_LEFT, 500, 0, True)
+        else:
+            lv.scr_load_anim(scr, lv.SCR_LOAD_ANIM.NONE, 0, 0, True)
+
+        hvac_alive = True

haas_lib_bundles/python/docs/examples/ui_collection/lux.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+
+class Lux:
+    scr = None
+    iconImg = None
+    luxLable = None
+    unityLabel = None
+    tipLabel = None
+
+    def __init__(self, screen):
+        self.scr = screen
+        self.createLuxItem(self.scr, RESOURCES_ROOT + "lux.png", "Brightness")
+
+    def createLuxItem(self, parent, iconPath, tips):
+        self.iconImg = lv.img(parent)
+        self.iconImg.set_src(iconPath)
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, 0, 0)
+
+        self.luxLable = lv.label(parent)
+        self.luxLable.set_text("None")
+        self.luxLable.set_style_text_color(lv.color_white(), 0)
+        self.luxLable.set_style_text_font(lv.font_montserrat_48, 0)
+        self.luxLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+
+        self.unityLabel = lv.label(parent)
+        self.unityLabel.set_text(" %LEL")
+        self.unityLabel.set_style_text_color(lv.color_white(), 0)
+        self.unityLabel.set_style_text_font(lv.font_montserrat_18, 0)
+        self.unityLabel.align_to(self.luxLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+
+        self.tipLabel = lv.label(parent)
+        self.tipLabel.set_text(tips)
+        self.tipLabel.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        self.tipLabel.set_style_text_font(lv.font_montserrat_14, 0)
+        self.tipLabel.align_to(self.luxLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setValue(self, humidity):
+        self.luxLable.set_text(str(int(humidity)))
+
+    def setXY(self, x, y):
+        self.iconImg.align(lv.ALIGN.TOP_LEFT, x, y)
+        self.luxLable.align_to(self.iconImg, lv.ALIGN.OUT_RIGHT_TOP, 0, 0)
+        self.unityLabel.align_to(self.luxLable, lv.ALIGN.OUT_RIGHT_BOTTOM, 0, -5)
+        self.tipLabel.align_to(self.luxLable, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 0)
+
+    def setScale(self, scale):
+        print("To be done")
+

haas_lib_bundles/python/docs/examples/ui_collection/main.py

+import display_driver
+
+import page_welcome
+page_welcome.load_page()

haas_lib_bundles/python/docs/examples/ui_collection/music.py

+import lvgl as lv
+
+from audio import Player
+
+RESOURCES_ROOT = "S:/data/pyamp/"
+
+functionImage = [
+        RESOURCES_ROOT + "images/prev.png",
+        RESOURCES_ROOT + "images/play.png",
+        RESOURCES_ROOT + "images/next.png",
+        RESOURCES_ROOT + "images/favorite.png"]
+
+
+currentMusic = 0
+
+musicData = [
+    {
+        "title":"Counting Stars",
+        "album":"OneRepublic",
+        "album_url": RESOURCES_ROOT + "images/album_one_republic.jpg",
+        "url":"file://data/pyamp/audio/test_long.mp3",
+        "duration":11,
+        "favorite": False
+    },
+    {
+        "title":"Aube",
+        "album":"Darius",
+        "album_url": RESOURCES_ROOT + "images/album_darius.jpg",
+        "url":"file://data/pyamp/audio/test_long.mp3",
+        "duration":155,
+        "favorite": False
+    },
+]
+
+
+start = False
+anim = None
+playedTime = None
+slider = None
+anim_timeline = None
+player = None
+durationTime = 0
+currentValue = 0
+image = [None, None, None, None]
+albumCover = None
+songTitle = None
+albumTitle = None
+totalTime = None
+
+music_alive = False
+
+def music_back_click_callback(e, win):
+    global anim_timeline
+    global start
+    global player
+    global music_alive
+
+    start = False
+
+    # stop animation
+    if (anim_timeline != None):
+        lv.anim_timeline_stop(anim_timeline)
+        lv.anim_timeline_del(anim_timeline)
+        anim_timeline = None
+
+    if (player != None):
+        player.pause()
+        player.close()
+        player = None
+
+    # load smart panel desktop
+    if (music_alive):
+        from smart_panel import load_smart_panel
+        load_smart_panel()
+        music_alive = False
+
+def music_back_press_callback(e, image):
+    image.set_zoom(280)
+
+def music_back_release_callback(e, image):
+    image.set_zoom(250)
+
+def setLabelValue(label, value):
+    global slider
+    global anim
+    global start
+    global anim_timeline
+    global durationTime
+
+    minute = value / 60
+    second = value  % 60
+
+    # if (slider.is_dragged() == True):
+    #     print("drag: %d" % value)
+    #     start = False
+    #
+    #     lv.anim_timeline_stop(anim_timeline)
+    #     lv.anim_timeline_del(anim_timeline)
+    #     anim_timeline = None
+    #
+    #     slider.set_value(value, lv.ANIM.ON)
+    #     anim.set_time((durationTime - currentValue) * 1000)
+    #     anim.set_values(currentValue, durationTime)
+    #     anim_timeline = lv.anim_timeline_create()
+    #     lv.anim_timeline_add(anim_timeline, 0, anim)
+
+    label.set_text('%02d:%02d'%(minute, second))
+
+def setSpentTime(slider, value):
+    global playedTime
+    global currentValue
+    global durationTime
+    global image
+    global start
+    global anim_timeline
+    global player
+    global albumCover
+    global songTitle
+    global albumTitle
+    global totalTime
+    global currentMusic
+    global musicData
+
+    if (value >= durationTime):
+        # currentMusic += 1
+        # if (len(musicData) == currentMusic):
+        #     currentMusic = 0
+        start = False
+        reset_music()
+    else:
+        currentValue = value
+        setLabelValue(playedTime, value)
+        slider.set_value(value, lv.ANIM.ON)
+
+def cb(data):
+    print(data)
+
+def reset_music():
+    global albumCover
+    global songTitle
+    global albumTitle
+    global totalTime
+    global musicData
+    global currentMusic
+    global durationTime
+    global slider
+    global anim
+    global image
+    global start
+    global currentValue
+    global anim_timeline
+    global playedTime
+    global player
+
+    if (anim_timeline != None):
+        lv.anim_timeline_stop(anim_timeline)
+        lv.anim_timeline_del(anim_timeline)
+        anim_timeline = None
+
+    albumCover.set_src(musicData[currentMusic]["album_url"])
+    songTitle.set_text(musicData[currentMusic]["title"])
+    albumTitle.set_text(musicData[currentMusic]["album"])
+    durationTime = musicData[currentMusic]["duration"]
+
+    currentValue = 0
+
+    slider.set_range(0, durationTime)
+    slider.set_value(0, lv.ANIM.ON)
+    anim.set_time(durationTime * 1000)
+    anim.set_values(0, durationTime)
+    anim_timeline = lv.anim_timeline_create()
+    lv.anim_timeline_add(anim_timeline, 0, anim)
+
+    setLabelValue(totalTime, durationTime)
+    setLabelValue(playedTime, 0)
+
+    if (player != None):
+        player.pause()
+        player.close()
+        player = None
+
+    if (start == False):
+        image[1].set_src(RESOURCES_ROOT + "images/play.png")
+    else:
+        image[1].set_src(RESOURCES_ROOT + "images/pause.png")
+        lv.anim_timeline_start(anim_timeline)
+        player = Player()
+        player.open()
+        # player.play(musicData[currentMusic]["url"], sync=False)
+        player.on(cb)
+
+    if (musicData[currentMusic]["favorite"] == False):
+        image[3].set_src(RESOURCES_ROOT + "images/favorite.png")
+    else:
+        image[3].set_src(RESOURCES_ROOT + "images/favorited.png")
+
+def controller_click_cb(e, func):
+    global anim
+    global start
+    global anim_timeline
+    global durationTime
+    global player
+    global image
+    global currentValue
+    global musicData
+    global currentMusic
+
+    print(func, anim_timeline)
+    if (func == "play"):
+        if (start == False):
+            start = True
+
+            if (currentValue == durationTime):
+                currentValue = 0
+                anim.set_time((durationTime - currentValue) * 1000)
+                anim.set_values(currentValue, durationTime)
+                anim_timeline = lv.anim_timeline_create()
+                lv.anim_timeline_add(anim_timeline, 0, anim)
+
+            lv.anim_timeline_start(anim_timeline)
+            image[1].set_src(RESOURCES_ROOT + "images/pause.png")
+
+            if (player == None):
+                player = Player()
+                player.open()
+                # player.play(musicData[currentMusic]["url"], sync=False)
+                player.on(cb)
+
+            else:
+                player.resume()
+                # state = player.getState()
+                # print(state)
+                # if (state == 2):
+                #     player.resume()
+                #     image[1].set_src(RESOURCES_ROOT + "images/pause.png")
+                # else:
+                #     player.pause()
+                #     image[1].set_src(RESOURCES_ROOT + "images/play.png")
+        else:
+            start = False
+
+            image[1].set_src(RESOURCES_ROOT + "images/play.png")
+
+            lv.anim_timeline_stop(anim_timeline)
+            lv.anim_timeline_del(anim_timeline)
+            anim_timeline = None
+
+            anim.set_time((durationTime - currentValue) * 1000)
+            anim.set_values(currentValue, durationTime)
+            anim_timeline = lv.anim_timeline_create()
+            lv.anim_timeline_add(anim_timeline, 0, anim)
+            player.pause()
+    elif (func == "fav"):
+        if (musicData[currentMusic]["favorite"] == False):
+            image[3].set_src(RESOURCES_ROOT + "images/favorited.png")
+            musicData[currentMusic]["favorite"] = True
+        else:
+            musicData[currentMusic]["favorite"] = False
+            image[3].set_src(RESOURCES_ROOT + "images/favorite.png")
+
+    elif (func == "next"):
+        currentMusic += 1
+        if (len(musicData) == currentMusic):
+            currentMusic = 0
+
+        reset_music()
+
+
+    elif (func == "prev"):
+        currentMusic -= 1
+        if (currentMusic < 0):
+            currentMusic = len(musicData) - 1
+
+        reset_music()
+
+class Music:
+    def createPage(self):
+        global anim
+        global playedTime
+        global durationTime
+        global slider
+        global audio_src
+        global player
+        global image
+        global music_alive
+        global currentMusic
+        global albumCover
+        global songTitle
+        global albumTitle
+        global totalTime
+        global anim_timeline
+        global scr
+
+        print("Enter Music")
+
+        # init scr
+        scr = lv.obj()
+
+        win = lv.obj(scr)
+        win.set_size(scr.get_width(), scr.get_height())
+        win.set_style_border_opa(0, 0)
+        win.set_style_radius(0, 0)
+        win.set_style_bg_color(lv.color_black(), 0)
+        win.clear_flag(lv.obj.FLAG.SCROLLABLE)
+
+        backImg=lv.img(win)
+        backImg.set_src(RESOURCES_ROOT + "images/back.png")
+        backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+        backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+        backImg.add_event_cb(lambda e: music_back_click_callback(e, win), lv.EVENT.CLICKED, None)
+        backImg.add_event_cb(lambda e: music_back_press_callback(e, backImg), lv.EVENT.PRESSED, None)
+        backImg.add_event_cb(lambda e: music_back_release_callback(e, backImg), lv.EVENT.RELEASED, None)
+        backImg.set_ext_click_area(30)
+
+        albumCover = lv.img(win)
+        albumCover.set_style_pad_left(12, 0)
+        albumCover.set_style_pad_top(10, 0)
+
+        songTitle = lv.label(win)
+        songTitle.set_style_text_font(lv.font_montserrat_20, 0)
+        songTitle.set_style_text_color(lv.color_white(), 0)
+        songTitle.align_to(albumCover, lv.ALIGN.TOP_LEFT, 130, 3)
+
+        albumTitle = lv.label(win)
+        albumTitle.set_style_text_font(lv.font_montserrat_16, 0)
+        albumTitle.set_style_text_color(lv.color_make(0xCC, 0xCC, 0xCC), 0)
+        albumTitle.align_to(songTitle, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 12)
+
+        props = [lv.STYLE.BG_COLOR, 0]
+        transition_dsc = lv.style_transition_dsc_t()
+        transition_dsc.init(props, lv.anim_t.path_linear, 300, 0, None)
+
+        style_main = lv.style_t()
+        style_indicator =  lv.style_t()
+        style_pressed_color = lv.style_t()
+        style_main.init()
+        style_main.set_bg_opa(lv.OPA.COVER)
+        style_main.set_bg_color(lv.color_make(0x66, 0x66, 0x66))
+        style_main.set_radius(lv.RADIUS.CIRCLE)
+        style_main.set_line_dash_width(1)
+
+        style_indicator.init()
+        style_indicator.set_bg_opa(lv.OPA.COVER)
+        style_indicator.set_bg_color(lv.color_white())
+        style_indicator.set_radius(lv.RADIUS.CIRCLE)
+        style_indicator.set_transition(transition_dsc)
+
+        style_pressed_color.init()
+        style_pressed_color.set_bg_color(lv.color_white())
+
+        # Create a slider and add the style
+        slider = lv.slider(win)
+        slider.remove_style_all()                   # Remove the styles coming from the theme
+
+        slider.add_style(style_main, lv.PART.MAIN)
+        slider.add_style(style_indicator, lv.PART.INDICATOR)
+        slider.add_style(style_pressed_color, lv.PART.INDICATOR | lv.STATE.PRESSED)
+        slider.align_to(albumTitle, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 25)
+        slider.set_size(140, 1)
+
+        anim = lv.anim_t()
+        anim.init()
+        anim.set_var(slider)
+
+        playedTime = lv.label(win)
+        setLabelValue(playedTime, 0)
+        playedTime.set_style_text_font(lv.font_montserrat_16, 0)
+        playedTime.set_style_text_color(lv.color_white(), 0)
+        playedTime.align_to(slider, lv.ALIGN.OUT_BOTTOM_LEFT, 0, 15)
+
+        totalTime = lv.label(win)
+        totalTime.set_style_text_font(lv.font_montserrat_16, 0)
+        totalTime.set_style_text_color(lv.color_white(), 0)
+        totalTime.align_to(slider, lv.ALIGN.OUT_BOTTOM_RIGHT, 0, 15)
+
+        func_col_dsc = [80, 80, 80, 80, lv.GRID_TEMPLATE.LAST]
+        func_row_dsc = [40, lv.GRID_TEMPLATE.LAST]
+
+        funcContainer = lv.obj(win)
+        funcContainer.set_style_bg_opa(0x00, 0)
+        funcContainer.set_style_border_opa(0x00, 0)
+        funcContainer.set_layout(lv.LAYOUT_GRID.value)
+        funcContainer.set_grid_dsc_array(func_col_dsc, func_row_dsc)
+        funcContainer.set_grid_align(lv.GRID_ALIGN.SPACE_BETWEEN, lv.GRID_ALIGN.SPACE_BETWEEN)
+        funcContainer.set_align(lv.ALIGN.BOTTOM_MID)
+        funcContainer.set_size(320, 70)
+
+        for i in range(4):
+            image[i] = lv.img(funcContainer)
+            image[i].set_src(functionImage[i])
+            image[i].add_flag(lv.obj.FLAG.CLICKABLE)
+            image[i].set_ext_click_area(20)
+            image[i].set_grid_cell(lv.GRID_ALIGN.CENTER, i, 1, lv.GRID_ALIGN.CENTER, 0, 1)
+
+            if (i == 0):
+                image[i].add_event_cb(lambda e: controller_click_cb(e, "prev"), lv.EVENT.CLICKED, None)
+            elif (i == 1):
+                image[i].add_event_cb(lambda e: controller_click_cb(e, "play"), lv.EVENT.CLICKED, None)
+            elif (i == 2):
+                image[i].add_event_cb(lambda e: controller_click_cb(e, "next"), lv.EVENT.CLICKED, None)
+            elif (i == 3):
+                image[i].add_event_cb(lambda e: controller_click_cb(e, "fav"), lv.EVENT.CLICKED, None)
+
+        anim.set_custom_exec_cb(lambda a1, val: setSpentTime(slider, val))
+        reset_music()
+
+        from smart_panel import needAnimation
+        if (needAnimation):
+            lv.scr_load_anim(scr, lv.SCR_LOAD_ANIM.MOVE_LEFT, 500, 0, True)
+        else:
+            lv.scr_load_anim(scr, lv.SCR_LOAD_ANIM.NONE, 0, 0, True)
+
+        music_alive = True

haas_lib_bundles/python/docs/examples/ui_collection/page_about.py

+import lvgl as lv
+import uos
+import font_Alibaba_PuHuiTi
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+def environment_back_click_callback(e, win):
+    import page_settings
+    page_settings.load_page()
+
+def environment_back_press_callback(e, back_image):
+    back_image.set_zoom(280)
+
+def environment_back_release_callback(e, back_image):
+    back_image.set_zoom(250)
+
+def load_page():
+    scr = lv.obj()
+    scr.set_style_bg_color(lv.color_black(), 0)
+
+    backImg=lv.img(scr)
+    backImg.set_src(RESOURCES_ROOT + "back.png")
+    backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+    backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+    backImg.add_event_cb(lambda e: environment_back_click_callback(e, scr), lv.EVENT.CLICKED, None)
+    backImg.add_event_cb(lambda e: environment_back_press_callback(e, backImg), lv.EVENT.PRESSED, None)
+    backImg.add_event_cb(lambda e: environment_back_release_callback(e, backImg), lv.EVENT.RELEASED, None)
+    backImg.set_ext_click_area(30)
+
+    #bg_color = lv.palette_lighten(lv.PALETTE.LIGHT_BLUE, 5)
+    #fg_color = lv.palette_darken(lv.PALETTE.BLUE, 4)
+
+    #qr1 = lv.qrcode(scr, 130, fg_color, bg_color)
+    #data1 = "https://haas.iot.aliyun.com/solution"
+    #qr1.update(data1,len(data1))
+    #qr1.align(lv.ALIGN.CENTTER, -10, -20)
+    #qr1.set_style_border_color(bg_color, 0)
+    #qr1.set_style_border_width(5, 0)
+
+    label1 = lv.label(scr)
+    font_Alibaba_PuHuiTi.set_text_size(label1, 16)
+    label1.set_text("更多趣味案例")
+    label1.set_style_text_color(lv.color_make(0xcc, 0xcc, 0xcc), 0)
+    label1.align(lv.ALIGN.BOTTOM_MID, -70, -50)
+
+    label2 = lv.label(scr)
+    font_Alibaba_PuHuiTi.set_text_size(label2, 16)
+    label2.set_text("扫码进入钉群")
+    label2.set_style_text_color(lv.color_make(0xcc, 0xcc, 0xcc), 0)
+    label2.align(lv.ALIGN.BOTTOM_MID, 70, -50)
+
+    label3 = lv.label(scr)
+    font_Alibaba_PuHuiTi.set_text_size(label3, 16)
+    label3.set_style_text_color(lv.color_make(0, 0, 0xFF), 0)
+    label3.set_text("固件: ")
+    label3.align(lv.ALIGN.BOTTOM_LEFT, 20, -20)
+
+    label33 = lv.label(scr)
+    label33.set_long_mode(lv.label.LONG.SCROLL_CIRCULAR) # Circular scroll
+    label33.set_width(230)
+    label33.set_style_text_color(lv.color_make(0, 0, 0xFF), 0)
+    font_Alibaba_PuHuiTi.set_text_size(label33, 16)
+    label33.set_text(uos.version_info())
+    label33.align_to(label3, lv.ALIGN.OUT_RIGHT_MID, 5, 0)
+
+    lv.scr_load(scr)

haas_lib_bundles/python/docs/examples/ui_collection/page_airpressure.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+def environment_back_click_callback(e, win):
+    import page_sensors2
+    page_sensors2.load_page()
+
+def environment_back_press_callback(e, back_image):
+    back_image.set_zoom(280)
+
+def environment_back_release_callback(e, back_image):
+    back_image.set_zoom(250)
+
+def set_xy(obj, v):
+    obj.setXY(v, v)
+
+def set_scale(obj, v):
+    obj.setScale(v)
+
+def load_page():
+    scr = lv.obj()
+    scr.set_style_bg_color(lv.color_black(), 0)
+    from airpressure import Airpressure
+    airpressure = Airpressure(scr)
+    airpressure.setValue(1050)
+    airpressure.setXY(0, 0)
+
+    a1 = lv.anim_t()
+    a1.init()
+    a1.set_var(airpressure)
+    a1.set_custom_exec_cb(lambda a,val: set_xy(airpressure, val))
+    a1.set_values(0, 130)
+    a1.set_time(5000)
+    a1.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+    lv.anim_t.start(a1)
+
+    backImg=lv.img(scr)
+    backImg.set_src(RESOURCES_ROOT + "back.png")
+    backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+    backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+    backImg.add_event_cb(lambda e: environment_back_click_callback(e, scr), lv.EVENT.CLICKED, None)
+    backImg.add_event_cb(lambda e: environment_back_press_callback(e, backImg), lv.EVENT.PRESSED, None)
+    backImg.add_event_cb(lambda e: environment_back_release_callback(e, backImg), lv.EVENT.RELEASED, None)
+    backImg.set_ext_click_area(20)
+    lv.scr_load(scr)

haas_lib_bundles/python/docs/examples/ui_collection/page_angle.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+def environment_back_click_callback(e, win):
+    import page_sensors1
+    page_sensors1.load_page()
+
+def environment_back_press_callback(e, back_image):
+    back_image.set_zoom(280)
+
+def environment_back_release_callback(e, back_image):
+    back_image.set_zoom(250)
+
+def set_xy(obj, v):
+    obj.setXY(v, v)
+
+def set_scale(obj, v):
+    obj.setScale(v)
+
+def load_page():
+    scr = lv.obj()
+    scr.set_style_bg_color(lv.color_black(), 0)
+    from angle import Angle
+    angle = Angle(scr)
+    angle.setValue(56)
+    angle.setXY(0, 0)
+
+    a1 = lv.anim_t()
+    a1.init()
+    a1.set_var(angle)
+    a1.set_custom_exec_cb(lambda a,val: set_xy(angle, val))
+    a1.set_values(0, 130)
+    a1.set_time(5000)
+    a1.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+    lv.anim_t.start(a1)
+
+    backImg=lv.img(scr)
+    backImg.set_src(RESOURCES_ROOT + "back.png")
+    backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+    backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+    backImg.add_event_cb(lambda e: environment_back_click_callback(e, scr), lv.EVENT.CLICKED, None)
+    backImg.add_event_cb(lambda e: environment_back_press_callback(e, backImg), lv.EVENT.PRESSED, None)
+    backImg.add_event_cb(lambda e: environment_back_release_callback(e, backImg), lv.EVENT.RELEASED, None)
+    backImg.set_ext_click_area(20)
+    lv.scr_load(scr)

haas_lib_bundles/python/docs/examples/ui_collection/page_arc.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+def back_click_callback(e, win):
+    import page_basic
+    page_basic.load_page()
+
+def load_page():
+    scr = lv.obj()
+    scr.set_style_bg_color(lv.color_black(), 0)
+
+    backImg=lv.img(scr)
+    backImg.set_src(RESOURCES_ROOT + "back.png")
+    backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+    backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+    backImg.add_event_cb(lambda e: back_click_callback(e, scr), lv.EVENT.CLICKED, None)
+    backImg.set_ext_click_area(20)
+
+    # 创建Arc对象，设置其末端的角度、尺寸及位置
+    arc = lv.arc(scr)
+    arc.set_end_angle(200)
+    arc.set_size(150, 150)
+    arc.center()
+
+    # 将控件显示在屏幕上
+    lv.scr_load(scr)

haas_lib_bundles/python/docs/examples/ui_collection/page_bar.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+def back_click_callback(e, win):
+    import page_basic
+    page_basic.load_page()
+
+def load_page():
+    scr = lv.obj()
+    scr.set_style_bg_color(lv.color_black(), 0)
+
+    backImg=lv.img(scr)
+    backImg.set_src(RESOURCES_ROOT + "back.png")
+    backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+    backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+    backImg.add_event_cb(lambda e: back_click_callback(e, scr), lv.EVENT.CLICKED, None)
+    backImg.set_ext_click_area(20)
+
+    # 创建bar, 设置其大小、摆放位置和进度位置
+    bar1 = lv.bar(scr)
+    bar1.set_size(200, 20)
+    bar1.center()
+    bar1.set_value(70, lv.ANIM.OFF)
+
+    # 将控件显示在屏幕上
+    lv.scr_load(scr)

haas_lib_bundles/python/docs/examples/ui_collection/page_basic.py

+import lvgl as lv
+import font_Alibaba_PuHuiTi
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+titles = ["line", "label", "image",
+          "button", "bar", "arc",
+          "btnmatrix", "checkbox", "dropdown",
+          "roller", "slider", "switch",
+          "table", "keyboard", "calendar",
+          "led", "list", "meter",
+          "msgbox", "spans", "tabview"]
+
+def element_pressed_cb(e):
+    print('pressed')
+    ele = e.get_target()
+    ele.set_style_bg_color(lv.color_make(0x39, 0x39, 0x39), 0)
+
+def element_released_cb(e):
+    print('released')
+    ele = e.get_target()
+    ele.set_style_bg_color(lv.color_make(0xf, 0xf, 0xf), 0)
+
+def element_click_cb(e, name):
+    print("click: ", name)
+    if (name == "line"):
+        import page_line
+        page_line.load_page()
+    if (name == "label"):
+        import page_label
+        page_label.load_page()
+    if (name == "image"):
+        import page_image
+        page_image.load_page()
+    if (name == "button"):
+        import page_button
+        page_button.load_page()
+    if (name == "bar"):
+        import page_bar
+        page_bar.load_page()
+    if (name == "arc"):
+        import page_arc
+        page_arc.load_page()
+    if (name == "btnmatrix"):
+        import page_btnmatrix
+        page_btnmatrix.load_page()
+    if (name == "checkbox"):
+        import page_checkbox
+        page_checkbox.load_page()
+    if (name == "dropdown"):
+        import page_dropdown
+        page_dropdown.load_page()
+    if (name == "roller"):
+        import page_roller
+        page_roller.load_page()
+    if (name == "slider"):
+        import page_slider
+        page_slider.load_page()
+    if (name == "switch"):
+        import page_switch
+        page_switch.load_page()
+    if (name == "table"):
+        import page_table
+        page_table.load_page()
+    if (name == "keyboard"):
+        import page_keyboard
+        page_keyboard.load_page()
+    if (name == "calendar"):
+        import page_calendar
+        page_calendar.load_page()
+    if (name == "led"):
+        import page_led
+        page_led.load_page()
+    if (name == "list"):
+        import page_list
+        page_list.load_page()
+    if (name == "meter"):
+        import page_meter
+        page_meter.load_page()
+    if (name == "msgbox"):
+        import page_msgbox
+        page_msgbox.load_page()
+    if (name == "spans"):
+        import page_spans
+        page_spans.load_page()
+    if (name == "tabview"):
+        import page_tabview
+        page_tabview.load_page()
+
+def backImg_click_callback(e, win):
+    import page_haas
+    page_haas.load_page()
+
+def nextImg_click_callback(e, win):
+    import page_sensors2
+    page_sensors2.load_page()
+
+def load_page():
+    scr = lv.obj()
+    scr.set_style_bg_color(lv.color_black(), 0)
+
+    backImg=lv.img(scr)
+    backImg.set_src(RESOURCES_ROOT + "back.png")
+    backImg.align(lv.ALIGN.LEFT_MID, 0, 0)
+    backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+    backImg.add_event_cb(lambda e: backImg_click_callback(e, scr), lv.EVENT.CLICKED, None)
+    backImg.set_ext_click_area(20)
+
+    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(scr)
+    cont.set_size(290, 220)
+    cont.align_to(backImg, lv.ALIGN.OUT_RIGHT_MID, -5, 0)
+    cont.add_style(style, 0)
+    cont.set_style_bg_opa(0, 0)
+    cont.set_style_border_opa(0, 0)
+    cont.set_style_pad_left(5, 0)
+    cont.set_style_pad_right(5, 0)
+    cont.set_style_pad_top(9, 0)
+    cont.set_style_pad_bottom(9, 0)
+
+    for i in range(21):
+        obj = lv.obj(cont)
+        obj.set_size(85, 60)
+        obj.set_scrollbar_mode(lv.SCROLLBAR_MODE.OFF)
+        obj.clear_flag(lv.obj.FLAG.SCROLLABLE)
+        obj.set_style_bg_color(lv.color_make(0xf, 0xf, 0xf), 0)
+        obj.set_style_border_color(lv.color_make(0xf, 0xf, 0xf), 0)
+        obj.set_style_radius(0, 0)
+        obj.add_event_cb(element_pressed_cb, lv.EVENT.PRESSED, None)
+        obj.add_event_cb(element_released_cb, lv.EVENT.RELEASED, None)
+        if (i == 0):
+            obj.add_event_cb(lambda e: element_click_cb(e, "line"), lv.EVENT.CLICKED, None)
+        elif (i == 1):
+            obj.add_event_cb(lambda e: element_click_cb(e, "label"), lv.EVENT.CLICKED, None)
+        elif (i == 2):
+            obj.add_event_cb(lambda e: element_click_cb(e, "image"), lv.EVENT.CLICKED, None)
+        elif (i == 3):
+            obj.add_event_cb(lambda e: element_click_cb(e, "button"), lv.EVENT.CLICKED, None)
+        elif (i == 4):
+            obj.add_event_cb(lambda e: element_click_cb(e, "bar"), lv.EVENT.CLICKED, None)
+        elif (i == 5):
+            obj.add_event_cb(lambda e: element_click_cb(e, "arc"), lv.EVENT.CLICKED, None)
+        elif (i == 6):
+            obj.add_event_cb(lambda e: element_click_cb(e, "btnmatrix"), lv.EVENT.CLICKED, None)
+        elif (i == 7):
+            obj.add_event_cb(lambda e: element_click_cb(e, "checkbox"), lv.EVENT.CLICKED, None)
+        elif (i == 8):
+            obj.add_event_cb(lambda e: element_click_cb(e, "dropdown"), lv.EVENT.CLICKED, None)
+        elif (i == 9):
+            obj.add_event_cb(lambda e: element_click_cb(e, "roller"), lv.EVENT.CLICKED, None)
+        elif (i == 10):
+            obj.add_event_cb(lambda e: element_click_cb(e, "slider"), lv.EVENT.CLICKED, None)
+        elif (i == 11):
+            obj.add_event_cb(lambda e: element_click_cb(e, "switch"), lv.EVENT.CLICKED, None)
+        elif (i == 12):
+            obj.add_event_cb(lambda e: element_click_cb(e, "table"), lv.EVENT.CLICKED, None)
+        elif (i == 13):
+            obj.add_event_cb(lambda e: element_click_cb(e, "keyboard"), lv.EVENT.CLICKED, None)
+        elif (i == 14):
+            obj.add_event_cb(lambda e: element_click_cb(e, "calendar"), lv.EVENT.CLICKED, None)
+        elif (i == 15):
+            obj.add_event_cb(lambda e: element_click_cb(e, "led"), lv.EVENT.CLICKED, None)
+        elif (i == 16):
+            obj.add_event_cb(lambda e: element_click_cb(e, "list"), lv.EVENT.CLICKED, None)
+        elif (i == 17):
+            obj.add_event_cb(lambda e: element_click_cb(e, "meter"), lv.EVENT.CLICKED, None)
+        elif (i == 18):
+            obj.add_event_cb(lambda e: element_click_cb(e, "msgbox"), lv.EVENT.CLICKED, None)
+        elif (i == 19):
+            obj.add_event_cb(lambda e: element_click_cb(e, "spans"), lv.EVENT.CLICKED, None)
+        elif (i == 20):
+            obj.add_event_cb(lambda e: element_click_cb(e, "tabview"), lv.EVENT.CLICKED, None)
+
+        label = lv.label(obj)
+        label.set_text(titles[i])
+        label.set_style_text_color(lv.color_make(0xcc, 0xcc, 0xcc), 0)
+        label.center()
+
+    lv.scr_load(scr)

haas_lib_bundles/python/docs/examples/ui_collection/page_btnmatrix.py

+import lvgl as lv
+
+RESOURCES_ROOT = "S:/data/pyamp/images/"
+
+def back_click_callback(e, win):
+    import page_basic
+    page_basic.load_page()
+
+def event_handler(evt):
+    code = evt.get_code()
+    obj  = evt.get_target()
+
+    if code == lv.EVENT.VALUE_CHANGED :
+        id = obj.get_selected_btn()
+        txt = obj.get_btn_text(id)
+
+        print("%s was pressed"%txt)
+
+def load_page():
+    scr = lv.obj()
+    scr.set_style_bg_color(lv.color_black(), 0)
+
+    backImg=lv.img(scr)
+    backImg.set_src(RESOURCES_ROOT + "back.png")
+    backImg.set_style_align(lv.ALIGN.LEFT_MID, 0)
+    backImg.add_flag(lv.obj.FLAG.CLICKABLE)
+    backImg.add_event_cb(lambda e: back_click_callback(e, scr), lv.EVENT.CLICKED, None)
+    backImg.set_ext_click_area(20)
+
+    btnm_map = ["1", "2", "3", "4", "5", "\n",
+            "6", "7", "8", "9", "0", "\n",
+            "Action1", "Action2", ""]
+
+    # 创建组合按钮，设置按钮大小，按钮上要显示的文字及按钮属性、按钮动作回调函数等
+    btnm1 = lv.btnmatrix(scr)
+    btnm1.set_map(btnm_map)
+    btnm1.set_btn_width(10, 2)        # Make "Action1" twice as wide as "Action2"
+    btnm1.set_btn_ctrl(10, lv.btnmatrix.CTRL.CHECKABLE)
+    btnm1.set_btn_ctrl(11, lv.btnmatrix.CTRL.CHECKED)
+    btnm1.align(lv.ALIGN.CENTER, 0, 0)
+    btnm1.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+    # 将控件显示在屏幕上
+    lv.scr_load(scr)