v1.0.3

packages/artinchip/lvgl-ui/lvgl/examples/widgets/img/index.rst

@@ -0,0 +1,28 @@
+
+Image from variable and symbol
+"""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/img/lv_example_img_1
+  :language: c
+
+
+Image recoloring
+""""""""""""""""
+
+.. lv_example:: widgets/img/lv_example_img_2
+  :language: c
+
+
+Rotate and zoom
+""""""""""""""""
+
+.. lv_example:: widgets/img/lv_example_img_3
+  :language: c
+
+Image offset and styling
+""""""""""""""""""""""""
+
+.. lv_example:: widgets/img/lv_example_img_4
+  :language: c
+
+

packages/artinchip/lvgl-ui/lvgl/examples/widgets/img/lv_example_img_1.c

@@ -0,0 +1,18 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_BUILD_EXAMPLES
+
+
+void lv_example_img_1(void)
+{
+    LV_IMG_DECLARE(img_cogwheel_argb);
+    lv_obj_t * img1 = lv_img_create(lv_scr_act());
+    lv_img_set_src(img1, &img_cogwheel_argb);
+    lv_obj_align(img1, LV_ALIGN_CENTER, 0, -20);
+    lv_obj_set_size(img1, 200, 200);
+
+    lv_obj_t * img2 = lv_img_create(lv_scr_act());
+    lv_img_set_src(img2, LV_SYMBOL_OK "Accept");
+    lv_obj_align_to(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
+}
+
+#endif

packages/artinchip/lvgl-ui/lvgl/examples/widgets/img/lv_example_img_1.py

@@ -0,0 +1,32 @@
+#!/opt/bin/lv_micropython -i
+import usys as sys
+import lvgl as lv
+import display_driver
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+img1 = lv.img(lv.scr_act())
+img1.set_src(img_cogwheel_argb)
+img1.align(lv.ALIGN.CENTER, 0, -20)
+img1.set_size(200, 200)
+
+img2 = lv.img(lv.scr_act())
+img2.set_src(lv.SYMBOL.OK + "Accept")
+img2.align_to(img1, lv.ALIGN.OUT_BOTTOM_MID, 0, 20)

packages/artinchip/lvgl-ui/lvgl/examples/widgets/img/lv_example_img_2.c

@@ -0,0 +1,64 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_USE_SLIDER && LV_BUILD_EXAMPLES
+
+static lv_obj_t * create_slider(lv_color_t color);
+static void slider_event_cb(lv_event_t * e);
+
+static lv_obj_t * red_slider, * green_slider, * blue_slider, * intense_slider;
+static lv_obj_t * img1;
+
+
+/**
+ * Demonstrate runtime image re-coloring
+ */
+void lv_example_img_2(void)
+{
+    /*Create 4 sliders to adjust RGB color and re-color intensity*/
+    red_slider = create_slider(lv_palette_main(LV_PALETTE_RED));
+    green_slider = create_slider(lv_palette_main(LV_PALETTE_GREEN));
+    blue_slider = create_slider(lv_palette_main(LV_PALETTE_BLUE));
+    intense_slider = create_slider(lv_palette_main(LV_PALETTE_GREY));
+
+    lv_slider_set_value(red_slider, LV_OPA_20, LV_ANIM_OFF);
+    lv_slider_set_value(green_slider, LV_OPA_90, LV_ANIM_OFF);
+    lv_slider_set_value(blue_slider, LV_OPA_60, LV_ANIM_OFF);
+    lv_slider_set_value(intense_slider, LV_OPA_50, LV_ANIM_OFF);
+
+    lv_obj_align(red_slider, LV_ALIGN_LEFT_MID, 25, 0);
+    lv_obj_align_to(green_slider, red_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);
+    lv_obj_align_to(blue_slider, green_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);
+    lv_obj_align_to(intense_slider, blue_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);
+
+    /*Now create the actual image*/
+    LV_IMG_DECLARE(img_cogwheel_argb)
+    img1 = lv_img_create(lv_scr_act());
+    lv_img_set_src(img1, &img_cogwheel_argb);
+    lv_obj_align(img1, LV_ALIGN_RIGHT_MID, -20, 0);
+
+    lv_event_send(intense_slider, LV_EVENT_VALUE_CHANGED, NULL);
+}
+
+static void slider_event_cb(lv_event_t * e)
+{
+    LV_UNUSED(e);
+
+    /*Recolor the image based on the sliders' values*/
+    lv_color_t color  = lv_color_make(lv_slider_get_value(red_slider), lv_slider_get_value(green_slider),
+                                      lv_slider_get_value(blue_slider));
+    lv_opa_t intense = lv_slider_get_value(intense_slider);
+    lv_obj_set_style_img_recolor_opa(img1, intense, 0);
+    lv_obj_set_style_img_recolor(img1, color, 0);
+}
+
+static lv_obj_t * create_slider(lv_color_t color)
+{
+    lv_obj_t * slider = lv_slider_create(lv_scr_act());
+    lv_slider_set_range(slider, 0, 255);
+    lv_obj_set_size(slider, 10, 200);
+    lv_obj_set_style_bg_color(slider, color, LV_PART_KNOB);
+    lv_obj_set_style_bg_color(slider, lv_color_darken(color, LV_OPA_40), LV_PART_INDICATOR);
+    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+    return slider;
+}
+
+#endif

packages/artinchip/lvgl-ui/lvgl/examples/widgets/img/lv_example_img_2.py

@@ -0,0 +1,70 @@
+#!/opt/bin/lv_micropython -i
+import usys as sys
+import lvgl as lv
+import display_driver
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+def create_slider(color):
+    slider = lv.slider(lv.scr_act())
+    slider.set_range(0, 255)
+    slider.set_size(10, 200)
+    slider.set_style_bg_color(color, lv.PART.KNOB)
+    slider.set_style_bg_color(color.color_darken(lv.OPA._40), lv.PART.INDICATOR)
+    slider.add_event_cb(slider_event_cb, lv.EVENT.VALUE_CHANGED, None)
+    return slider
+
+def slider_event_cb(e):
+    # Recolor the image based on the sliders' values
+    color  = lv.color_make(red_slider.get_value(), green_slider.get_value(), blue_slider.get_value())
+    intense = intense_slider.get_value()
+    img1.set_style_img_recolor_opa(intense, 0)
+    img1.set_style_img_recolor(color, 0)
+
+#
+# Demonstrate runtime image re-coloring
+#
+# Create 4 sliders to adjust RGB color and re-color intensity
+red_slider = create_slider(lv.palette_main(lv.PALETTE.RED))
+green_slider = create_slider(lv.palette_main(lv.PALETTE.GREEN))
+blue_slider = create_slider(lv.palette_main(lv.PALETTE.BLUE))
+intense_slider = create_slider(lv.palette_main(lv.PALETTE.GREY))
+
+red_slider.set_value(lv.OPA._20, lv.ANIM.OFF)
+green_slider.set_value(lv.OPA._90, lv.ANIM.OFF)
+blue_slider.set_value(lv.OPA._60, lv.ANIM.OFF)
+intense_slider.set_value(lv.OPA._50, lv.ANIM.OFF)
+
+red_slider.align(lv.ALIGN.LEFT_MID, 25, 0)
+green_slider.align_to(red_slider, lv.ALIGN.OUT_RIGHT_MID, 25, 0)
+blue_slider.align_to(green_slider, lv.ALIGN.OUT_RIGHT_MID, 25, 0)
+intense_slider.align_to(blue_slider, lv.ALIGN.OUT_RIGHT_MID, 25, 0)
+
+# Now create the actual image
+img1 = lv.img(lv.scr_act())
+img1.set_src(img_cogwheel_argb)
+img1.align(lv.ALIGN.RIGHT_MID, -20, 0)
+
+lv.event_send(intense_slider, lv.EVENT.VALUE_CHANGED, None)
+
+
+
+
+

packages/artinchip/lvgl-ui/lvgl/examples/widgets/img/lv_example_img_3.c

@@ -0,0 +1,43 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_BUILD_EXAMPLES
+
+static void set_angle(void * img, int32_t v)
+{
+    lv_img_set_angle(img, v);
+}
+
+static void set_zoom(void * img, int32_t v)
+{
+    lv_img_set_zoom(img, v);
+}
+
+
+/**
+ * Show transformations (zoom and rotation) using a pivot point.
+ */
+void lv_example_img_3(void)
+{
+    LV_IMG_DECLARE(img_cogwheel_argb);
+
+    /*Now create the actual image*/
+    lv_obj_t * img = lv_img_create(lv_scr_act());
+    lv_img_set_src(img, &img_cogwheel_argb);
+    lv_obj_align(img, LV_ALIGN_CENTER, 50, 50);
+    lv_img_set_pivot(img, 0, 0);    /*Rotate around the top left corner*/
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_var(&a, img);
+    lv_anim_set_exec_cb(&a, set_angle);
+    lv_anim_set_values(&a, 0, 3600);
+    lv_anim_set_time(&a, 5000);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_start(&a);
+
+    lv_anim_set_exec_cb(&a, set_zoom);
+    lv_anim_set_values(&a, 128, 256);
+    lv_anim_set_playback_time(&a, 3000);
+    lv_anim_start(&a);
+}
+
+#endif

packages/artinchip/lvgl-ui/lvgl/examples/widgets/img/lv_example_img_3.py

@@ -0,0 +1,61 @@
+#!/opt/bin/lv_micropython -i
+import usys as sys
+import lvgl as lv
+import display_driver
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+def set_angle(img, v):
+    img.set_angle(v)
+
+def set_zoom(img, v):
+    img.set_zoom(v)
+
+
+#
+# Show transformations (zoom and rotation) using a pivot point.
+#
+
+# Now create the actual image
+img = lv.img(lv.scr_act())
+img.set_src(img_cogwheel_argb)
+img.align(lv.ALIGN.CENTER, 50, 50)
+img.set_pivot(0, 0)               # Rotate around the top left corner
+
+a1 = lv.anim_t()
+a1.init()
+a1.set_var(img)
+a1.set_custom_exec_cb(lambda a,val: set_angle(img,val))
+a1.set_values(0, 3600)
+a1.set_time(5000)
+a1.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+lv.anim_t.start(a1)
+
+a2 = lv.anim_t()
+a2.init()
+a2.set_var(img)
+a2.set_custom_exec_cb(lambda a,val: set_zoom(img,val))
+a2.set_values(128, 256)
+a2.set_time(5000)
+a2.set_playback_time(3000)
+a2.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+lv.anim_t.start(a2)
+
+

packages/artinchip/lvgl-ui/lvgl/examples/widgets/img/lv_example_img_4.c

@@ -0,0 +1,41 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_BUILD_EXAMPLES
+
+static void ofs_y_anim(void * img, int32_t v)
+{
+    lv_img_set_offset_y(img, v);
+}
+
+/**
+ * Image styling and offset
+ */
+void lv_example_img_4(void)
+{
+    LV_IMG_DECLARE(img_skew_strip);
+
+    static lv_style_t style;
+    lv_style_init(&style);
+    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_YELLOW));
+    lv_style_set_bg_opa(&style, LV_OPA_COVER);
+    lv_style_set_img_recolor_opa(&style, LV_OPA_COVER);
+    lv_style_set_img_recolor(&style, lv_color_black());
+
+    lv_obj_t * img = lv_img_create(lv_scr_act());
+    lv_obj_add_style(img, &style, 0);
+    lv_img_set_src(img, &img_skew_strip);
+    lv_obj_set_size(img, 150, 100);
+    lv_obj_center(img);
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_var(&a, img);
+    lv_anim_set_exec_cb(&a, ofs_y_anim);
+    lv_anim_set_values(&a, 0, 100);
+    lv_anim_set_time(&a, 3000);
+    lv_anim_set_playback_time(&a, 500);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_start(&a);
+
+}
+
+#endif

packages/artinchip/lvgl-ui/lvgl/examples/widgets/img/lv_example_img_4.py

@@ -0,0 +1,51 @@
+from imagetools import get_png_info, open_png
+
+def ofs_y_anim(img, v):
+    img.set_offset_y(v)
+    # print(img,v)
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_skew_strip.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_skew_strip.png")
+    sys.exit()
+
+img_skew_strip = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+#
+# Image styling and offset
+#
+
+style = lv.style_t()
+style.init()
+style.set_bg_color(lv.palette_main(lv.PALETTE.YELLOW))
+style.set_bg_opa(lv.OPA.COVER)
+style.set_img_recolor_opa(lv.OPA.COVER)
+style.set_img_recolor(lv.color_black())
+
+img = lv.img(lv.scr_act())
+img.add_style(style, 0)
+img.set_src(img_skew_strip)
+img.set_size(150, 100)
+img.center()
+
+a = lv.anim_t()
+a.init()
+a.set_var(img)
+a.set_values(0, 100)
+a.set_time(3000)
+a.set_playback_time(500)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a.set_custom_exec_cb(lambda a,val: ofs_y_anim(img,val))
+lv.anim_t.start(a)
+