init Files

libraries/lvgl/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
+
+

libraries/lvgl/examples/widgets/image/lv_example_image_1.c

@@ -0,0 +1,16 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMAGE && 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_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);
+}
+
+#endif

libraries/lvgl/examples/widgets/image/lv_example_image_2.c

@@ -0,0 +1,63 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMAGE && 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

libraries/lvgl/examples/widgets/image/lv_example_image_3.c

@@ -0,0 +1,42 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMAGE && LV_BUILD_EXAMPLES
+
+static void set_angle(void * img, int32_t v)
+{
+    lv_image_set_rotation(img, v);
+}
+
+static void set_scale(void * img, int32_t v)
+{
+    lv_image_set_scale(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_scale);
+    lv_anim_set_values(&a, 128, 256);
+    lv_anim_set_playback_duration(&a, 3000);
+    lv_anim_start(&a);
+}
+
+#endif

libraries/lvgl/examples/widgets/image/lv_example_image_4.c

@@ -0,0 +1,41 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMAGE && 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_duration(&a, 500);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_start(&a);
+
+}
+
+#endif