example(keyboard): add draw event example to customize each button (#8172)

docs/src/details/widgets/keyboard.rst

@@ -94,6 +94,12 @@ with the original map:
 - ``"abc"`` Load lower-case map.
 - ``"1#"`` Load number map.
 
+Key customization
+-----------------
+
+Each key can be customized by using draw events such as :cpp:enumerator:`LV_EVENT_DRAW_TASK_ADDED`.
+
+Check out the examples to see how it can be used in the practice.
 
 
 .. _lv_keyboard_events:

examples/widgets/buttonmatrix/lv_example_buttonmatrix_2.c

@@ -41,6 +41,11 @@ static void event_cb(lv_event_t * e)
                 if(pressed) fill_draw_dsc->color = lv_palette_darken(LV_PALETTE_RED, 3);
                 else fill_draw_dsc->color = lv_palette_main(LV_PALETTE_RED);
             }
+
+            lv_draw_box_shadow_dsc_t * box_shadow_draw_dsc = lv_draw_task_get_box_shadow_dsc(draw_task);
+            if(box_shadow_draw_dsc) {
+                box_shadow_draw_dsc->radius = LV_RADIUS_CIRCLE;
+            }
         }
         else if(base_dsc->id1 == 3) {
             lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);

examples/widgets/keyboard/index.rst

@@ -12,3 +12,10 @@ Keyboard with custom map
 .. lv_example:: widgets/keyboard/lv_example_keyboard_2
   :language: c
 
+
+Keyboard with drawing
+---------------------
+
+.. lv_example:: widgets/keyboard/lv_example_keyboard_3
+  :language: c
+

examples/widgets/keyboard/lv_example_keyboard_3.c

@@ -0,0 +1,64 @@
+#include "../../lv_examples.h"
+#if LV_USE_BUTTONMATRIX && LV_BUILD_EXAMPLES
+
+static void event_cb(lv_event_t * e)
+{
+    lv_obj_t * obj = lv_event_get_target_obj(e);
+    lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
+    lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
+    bool pressed = false;
+    if(lv_keyboard_get_selected_button(obj) == base_dsc->id1 && lv_obj_has_state(obj, LV_STATE_PRESSED)) {
+        pressed = true;
+    }
+
+    /*When the keyboard draws the buttons...*/
+    if(base_dsc->part == LV_PART_ITEMS) {
+        /*Get a color based on the button's index*/
+        lv_palette_t palette = base_dsc->id1 % LV_PALETTE_LAST;
+        lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);
+        if(fill_draw_dsc) {
+            fill_draw_dsc->color = pressed ? lv_palette_darken(palette, 3) : lv_palette_main(palette);
+        }
+        lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);
+        if(label_draw_dsc) {
+            /*For the OK symbol, draw a star instead*/
+            if(lv_strcmp(label_draw_dsc->text, LV_SYMBOL_OK) == 0) {
+                label_draw_dsc->opa = 0;    /*Hide the label*/
+
+                LV_IMAGE_DECLARE(img_star);
+                lv_image_header_t header;
+                lv_result_t res = lv_image_decoder_get_info(&img_star, &header);
+                if(res != LV_RESULT_OK) return;
+
+                lv_area_t a;
+                lv_area_set(&a, 0, 0, header.w - 1, header.h - 1);
+                lv_area_t draw_task_area;
+                lv_draw_task_get_area(draw_task, &draw_task_area);
+                lv_area_align(&draw_task_area, &a, LV_ALIGN_CENTER, 0, 0);
+
+                lv_draw_image_dsc_t img_draw_dsc;
+                lv_draw_image_dsc_init(&img_draw_dsc);
+                img_draw_dsc.src = &img_star;
+                lv_draw_image(base_dsc->layer, &img_draw_dsc, &a);
+            }
+            else {
+                /*For the other labels just pick an lighter color*/
+                label_draw_dsc->color = lv_palette_lighten(palette, 4);
+            }
+        }
+
+    }
+}
+
+/**
+ * Add custom drawer to the keyboard to customize the buttons one by one
+ */
+void lv_example_keyboard_3(void)
+{
+    lv_obj_t * kb = lv_keyboard_create(lv_screen_active());
+    lv_obj_add_event_cb(kb, event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
+    lv_obj_add_flag(kb, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
+    lv_obj_center(kb);
+}
+
+#endif

examples/widgets/lv_example_widgets.h

@@ -87,6 +87,7 @@ void lv_example_imagebutton_1(void);
 
 void lv_example_keyboard_1(void);
 void lv_example_keyboard_2(void);
+void lv_example_keyboard_3(void);
 
 void lv_example_label_1(void);
 void lv_example_label_2(void);