refactor: minor refactoring and widget docs update

examples/widgets/image/index.rst

@@ -0,0 +1,28 @@
+
+Image from variable and symbol
+------------------------------
+
+.. lv_example:: widgets/image/lv_example_image_1
+  :language: c
+
+
+Image recoloring
+----------------
+
+.. lv_example:: widgets/image/lv_example_image_2
+  :language: c
+
+
+Rotate and zoom
+---------------
+
+.. lv_example:: widgets/image/lv_example_image_3
+  :language: c
+
+Image offset and styling
+------------------------
+
+.. lv_example:: widgets/image/lv_example_image_4
+  :language: c
+
+

examples/widgets/image/lv_example_image_1.c

@@ -0,0 +1,21 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_BUILD_EXAMPLES
+
+void lv_example_image_1(void)
+{
+    LV_IMAGE_DECLARE(img_cogwheel_argb);
+    lv_obj_t * img1 = lv_image_create(lv_screen_active());
+    lv_image_set_src(img1, &img_cogwheel_argb);
+    lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);
+    lv_image_set_scale_x(img1, 512);
+    lv_image_set_scale_y(img1, 128);
+    lv_image_set_rotation(img1, 10);
+
+    lv_obj_t * img2 = lv_image_create(lv_screen_active());
+    lv_image_set_src(img2, LV_SYMBOL_OK "Accept");
+    lv_obj_align_to(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
+
+    lv_obj_set_style_bg_opa(img1, 100, 0);
+}
+
+#endif

examples/widgets/image/lv_example_image_1.py

@@ -0,0 +1,26 @@
+#!/opt/bin/lv_micropython -i
+import usys as sys
+import lvgl as lv
+import display_driver
+
+# Create an image from the png file
+try:
+    with open('../../assets/image_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find image_cogwheel_argb.png")
+    sys.exit()
+
+image_cogwheel_argb = lv.image_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+image1 = lv.image(lv.screen_active())
+image1.set_src(image_cogwheel_argb)
+image1.align(lv.ALIGN.CENTER, 0, -20)
+image1.set_size(200, 200)
+
+image2 = lv.image(lv.screen_active())
+image2.set_src(lv.SYMBOL.OK + "Accept")
+image2.align_to(image1, lv.ALIGN.OUT_BOTTOM_MID, 0, 20)

examples/widgets/image/lv_example_image_2.c

@@ -0,0 +1,63 @@
+#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_image_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_IMAGE_DECLARE(img_cogwheel_argb);
+    img1 = lv_image_create(lv_screen_active());
+    lv_image_set_src(img1, &img_cogwheel_argb);
+    lv_obj_align(img1, LV_ALIGN_RIGHT_MID, -20, 0);
+
+    lv_obj_send_event(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_image_recolor_opa(img1, intense, 0);
+    lv_obj_set_style_image_recolor(img1, color, 0);
+}
+
+static lv_obj_t * create_slider(lv_color_t color)
+{
+    lv_obj_t * slider = lv_slider_create(lv_screen_active());
+    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

examples/widgets/image/lv_example_image_2.py

@@ -0,0 +1,64 @@
+#!/opt/bin/lv_micropython -i
+import usys as sys
+import lvgl as lv
+import display_driver
+
+# Create an image from the png file
+try:
+    with open('../../assets/image_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find image_cogwheel_argb.png")
+    sys.exit()
+
+image_cogwheel_argb = lv.image_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+def create_slider(color):
+    slider = lv.slider(lv.screen_active())
+    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.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()
+    image1.set_style_image_recolor_opa(intense, 0)
+    image1.set_style_image_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
+image1 = lv.image(lv.screen_active())
+image1.set_src(image_cogwheel_argb)
+image1.align(lv.ALIGN.RIGHT_MID, -20, 0)
+
+intense_slider.send_event(lv.EVENT.VALUE_CHANGED, None)
+
+
+
+
+

examples/widgets/image/lv_example_image_3.c

@@ -0,0 +1,42 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_BUILD_EXAMPLES
+
+static void set_angle(void * img, int32_t v)
+{
+    lv_image_set_rotation(img, v);
+}
+
+static void set_zoom(void * img, int32_t v)
+{
+    lv_image_set_zoom(img, v);
+}
+
+/**
+ * Show transformations (zoom and rotation) using a pivot point.
+ */
+void lv_example_image_3(void)
+{
+    LV_IMAGE_DECLARE(img_cogwheel_argb);
+
+    /*Now create the actual image*/
+    lv_obj_t * img = lv_image_create(lv_screen_active());
+    lv_image_set_src(img, &img_cogwheel_argb);
+    lv_obj_align(img, LV_ALIGN_CENTER, 50, 50);
+    lv_image_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_duration(&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

examples/widgets/image/lv_example_image_3.py

@@ -0,0 +1,55 @@
+#!/opt/bin/lv_micropython -i
+import usys as sys
+import lvgl as lv
+import display_driver
+
+# Create an image from the png file
+try:
+    with open('../../assets/image_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find image_cogwheel_argb.png")
+    sys.exit()
+
+image_cogwheel_argb = lv.image_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+def set_angle(image, v):
+    image.set_angle(v)
+
+def set_zoom(image, v):
+    image.set_zoom(v)
+
+
+#
+# Show transformations (zoom and rotation) using a pivot point.
+#
+
+# Now create the actual image
+image = lv.image(lv.screen_active())
+image.set_src(image_cogwheel_argb)
+image.align(lv.ALIGN.CENTER, 50, 50)
+image.set_pivot(0, 0)               # Rotate around the top left corner
+
+a1 = lv.anim_t()
+a1.init()
+a1.set_var(image)
+a1.set_custom_exec_cb(lambda a,val: set_angle(image,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(image)
+a2.set_custom_exec_cb(lambda a,val: set_zoom(image,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)
+
+

examples/widgets/image/lv_example_image_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_image_set_offset_y(img, v);
+}
+
+/**
+ * Image styling and offset
+ */
+void lv_example_image_4(void)
+{
+    LV_IMAGE_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_image_recolor_opa(&style, LV_OPA_COVER);
+    lv_style_set_image_recolor(&style, lv_color_black());
+
+    lv_obj_t * img = lv_image_create(lv_screen_active());
+    lv_obj_add_style(img, &style, 0);
+    lv_image_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_duration(&a, 3000);
+    lv_anim_set_playback_time(&a, 500);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_start(&a);
+
+}
+
+#endif

examples/widgets/image/lv_example_image_4.py

@@ -0,0 +1,45 @@
+
+def ofs_y_anim(image, v):
+    image.set_offset_y(v)
+    # print(image,v)
+
+# 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()
+
+image_skew_strip = lv.image_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_image_recolor_opa(lv.OPA.COVER)
+style.set_image_recolor(lv.color_black())
+
+image = lv.image(lv.screen_active())
+image.add_style(style, 0)
+image.set_src(image_skew_strip)
+image.set_size(150, 100)
+image.center()
+
+a = lv.anim_t()
+a.init()
+a.set_var(image)
+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(image,val))
+lv.anim_t.start(a)
+