init lvgl code

LVGL.Simulator/lvgl/examples/widgets/btn/index.rst

@@ -0,0 +1,20 @@
+
+Simple Buttons
+""""""""""""""""
+
+.. lv_example:: widgets/btn/lv_example_btn_1
+  :language: c
+
+
+Styling buttons
+""""""""""""""""
+
+.. lv_example:: widgets/btn/lv_example_btn_2
+  :language: c
+
+Gummy button
+""""""""""""""""
+
+.. lv_example:: widgets/btn/lv_example_btn_3
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_1.c

@@ -0,0 +1,38 @@
+#include "../../lv_examples.h"
+#if LV_USE_BTN && LV_BUILD_EXAMPLES
+
+static void event_handler(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+
+    if(code == LV_EVENT_CLICKED) {
+        LV_LOG_USER("Clicked");
+    }
+    else if(code == LV_EVENT_VALUE_CHANGED) {
+        LV_LOG_USER("Toggled");
+    }
+}
+
+void lv_example_btn_1(void)
+{
+    lv_obj_t * label;
+
+    lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
+    lv_obj_add_event_cb(btn1, event_handler, LV_EVENT_ALL, NULL);
+    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40);
+
+    label = lv_label_create(btn1);
+    lv_label_set_text(label, "Button");
+    lv_obj_center(label);
+
+    lv_obj_t * btn2 = lv_btn_create(lv_scr_act());
+    lv_obj_add_event_cb(btn2, event_handler, LV_EVENT_ALL, NULL);
+    lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 40);
+    lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
+    lv_obj_set_height(btn2, LV_SIZE_CONTENT);
+
+    label = lv_label_create(btn2);
+    lv_label_set_text(label, "Toggle");
+    lv_obj_center(label);
+}
+#endif

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_1.py

@@ -0,0 +1,32 @@
+def event_handler(evt):
+    code = evt.get_code()
+
+    if code == lv.EVENT.CLICKED:
+            print("Clicked event seen")
+    elif code == lv.EVENT.VALUE_CHANGED:
+        print("Value changed seen")
+
+# create a simple button
+btn1 = lv.btn(lv.scr_act())
+
+# attach the callback
+btn1.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
+btn1.align(lv.ALIGN.CENTER,0,-40)
+label=lv.label(btn1)
+label.set_text("Button")
+
+# create a toggle button
+btn2 = lv.btn(lv.scr_act())
+
+# attach the callback
+#btn2.add_event_cb(event_handler,lv.EVENT.VALUE_CHANGED,None)
+btn2.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
+btn2.align(lv.ALIGN.CENTER,0,40)
+btn2.add_flag(lv.obj.FLAG.CHECKABLE)
+btn2.set_height(lv.SIZE.CONTENT)
+
+label=lv.label(btn2)
+label.set_text("Toggle")
+label.center()

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_2.c

@@ -0,0 +1,65 @@
+#include "../../lv_examples.h"
+#if LV_USE_BTN && LV_BUILD_EXAMPLES
+
+/**
+ * Style a button from scratch
+ */
+void lv_example_btn_2(void)
+{
+    /*Init the style for the default state*/
+    static lv_style_t style;
+    lv_style_init(&style);
+
+    lv_style_set_radius(&style, 3);
+
+    lv_style_set_bg_opa(&style, LV_OPA_100);
+    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_bg_grad_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 2));
+    lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);
+
+    lv_style_set_border_opa(&style, LV_OPA_40);
+    lv_style_set_border_width(&style, 2);
+    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_GREY));
+
+    lv_style_set_shadow_width(&style, 8);
+    lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_GREY));
+    lv_style_set_shadow_ofs_y(&style, 8);
+
+    lv_style_set_outline_opa(&style, LV_OPA_COVER);
+    lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));
+
+    lv_style_set_text_color(&style, lv_color_white());
+    lv_style_set_pad_all(&style, 10);
+
+    /*Init the pressed style*/
+    static lv_style_t style_pr;
+    lv_style_init(&style_pr);
+
+    /*Add a large outline when pressed*/
+    lv_style_set_outline_width(&style_pr, 30);
+    lv_style_set_outline_opa(&style_pr, LV_OPA_TRANSP);
+
+    lv_style_set_translate_y(&style_pr, 5);
+    lv_style_set_shadow_ofs_y(&style_pr, 3);
+    lv_style_set_bg_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 2));
+    lv_style_set_bg_grad_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 4));
+
+    /*Add a transition to the outline*/
+    static lv_style_transition_dsc_t trans;
+    static lv_style_prop_t props[] = {LV_STYLE_OUTLINE_WIDTH, LV_STYLE_OUTLINE_OPA, 0};
+    lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 300, 0, NULL);
+
+    lv_style_set_transition(&style_pr, &trans);
+
+    lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
+    lv_obj_remove_style_all(btn1);                          /*Remove the style coming from the theme*/
+    lv_obj_add_style(btn1, &style, 0);
+    lv_obj_add_style(btn1, &style_pr, LV_STATE_PRESSED);
+    lv_obj_set_size(btn1, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+    lv_obj_center(btn1);
+
+    lv_obj_t * label = lv_label_create(btn1);
+    lv_label_set_text(label, "Button");
+    lv_obj_center(label);
+}
+#endif

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_2.py

@@ -0,0 +1,60 @@
+#
+# Style a button from scratch
+#
+
+# Init the style for the default state
+style = lv.style_t()
+style.init()
+
+style.set_radius(3)
+
+style.set_bg_opa(lv.OPA.COVER)
+style.set_bg_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_bg_grad_color(lv.palette_darken(lv.PALETTE.BLUE, 2))
+style.set_bg_grad_dir(lv.GRAD_DIR.VER)
+
+style.set_border_opa(lv.OPA._40)
+style.set_border_width(2)
+style.set_border_color(lv.palette_main(lv.PALETTE.GREY))
+
+style.set_shadow_width(8)
+style.set_shadow_color(lv.palette_main(lv.PALETTE.GREY))
+style.set_shadow_ofs_y(8)
+
+style.set_outline_opa(lv.OPA.COVER)
+style.set_outline_color(lv.palette_main(lv.PALETTE.BLUE))
+
+style.set_text_color(lv.color_white())
+style.set_pad_all(10)
+
+# Init the pressed style
+style_pr = lv.style_t()
+style_pr.init()
+
+# Add a large outline when pressed
+style_pr.set_outline_width(30)
+style_pr.set_outline_opa(lv.OPA.TRANSP)
+
+style_pr.set_translate_y(5)
+style_pr.set_shadow_ofs_y(3)
+style_pr.set_bg_color(lv.palette_darken(lv.PALETTE.BLUE, 2))
+style_pr.set_bg_grad_color(lv.palette_darken(lv.PALETTE.BLUE, 4))
+
+# Add a transition to the outline
+trans = lv.style_transition_dsc_t()
+props = [lv.STYLE.OUTLINE_WIDTH, lv.STYLE.OUTLINE_OPA, 0]
+trans.init(props, lv.anim_t.path_linear, 300, 0, None)
+
+style_pr.set_transition(trans)
+
+btn1 = lv.btn(lv.scr_act())
+btn1.remove_style_all()                          # Remove the style coming from the theme
+btn1.add_style(style, 0)
+btn1.add_style(style_pr, lv.STATE.PRESSED)
+btn1.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+btn1.center()
+
+label = lv.label(btn1)
+label.set_text("Button")
+label.center()
+

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_3.c

@@ -0,0 +1,45 @@
+#include "../../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_BTN
+
+/**
+ * Create a style transition on a button to act like a gum when clicked
+ */
+void lv_example_btn_3(void)
+{
+    /*Properties to transition*/
+    static lv_style_prop_t props[] = {
+        LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_TRANSFORM_HEIGHT, LV_STYLE_TEXT_LETTER_SPACE, 0
+    };
+
+    /*Transition descriptor when going back to the default state.
+     *Add some delay to be sure the press transition is visible even if the press was very short*/
+    static lv_style_transition_dsc_t transition_dsc_def;
+    lv_style_transition_dsc_init(&transition_dsc_def, props, lv_anim_path_overshoot, 250, 100, NULL);
+
+    /*Transition descriptor when going to pressed state.
+     *No delay, go to presses state immediately*/
+    static lv_style_transition_dsc_t transition_dsc_pr;
+    lv_style_transition_dsc_init(&transition_dsc_pr, props, lv_anim_path_ease_in_out, 250, 0, NULL);
+
+    /*Add only the new transition to he default state*/
+    static lv_style_t style_def;
+    lv_style_init(&style_def);
+    lv_style_set_transition(&style_def, &transition_dsc_def);
+
+    /*Add the transition and some transformation to the presses state.*/
+    static lv_style_t style_pr;
+    lv_style_init(&style_pr);
+    lv_style_set_transform_width(&style_pr, 10);
+    lv_style_set_transform_height(&style_pr, -10);
+    lv_style_set_text_letter_space(&style_pr, 10);
+    lv_style_set_transition(&style_pr, &transition_dsc_pr);
+
+    lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
+    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -80);
+    lv_obj_add_style(btn1, &style_pr, LV_STATE_PRESSED);
+    lv_obj_add_style(btn1, &style_def, 0);
+
+    lv_obj_t * label = lv_label_create(btn1);
+    lv_label_set_text(label, "Gum");
+}
+#endif

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_3.py

@@ -0,0 +1,38 @@
+#
+# Create a style transition on a button to act like a gum when clicked
+#
+
+# Properties to transition
+props = [lv.STYLE.TRANSFORM_WIDTH, lv.STYLE.TRANSFORM_HEIGHT, lv.STYLE.TEXT_LETTER_SPACE, 0]
+
+# Transition descriptor when going back to the default state.
+# Add some delay to be sure the press transition is visible even if the press was very short*/
+transition_dsc_def = lv.style_transition_dsc_t()
+transition_dsc_def.init(props, lv.anim_t.path_overshoot, 250, 100, None)
+
+# Transition descriptor when going to pressed state.
+# No delay, go to pressed state immediately
+transition_dsc_pr = lv.style_transition_dsc_t()
+transition_dsc_pr.init(props, lv.anim_t.path_ease_in_out, 250, 0, None)
+
+# Add only the new transition to the default state
+style_def = lv.style_t()
+style_def.init()
+style_def.set_transition(transition_dsc_def)
+
+# Add the transition and some transformation to the presses state.
+style_pr = lv.style_t()
+style_pr.init()
+style_pr.set_transform_width(10)
+style_pr.set_transform_height(-10)
+style_pr.set_text_letter_space(10)
+style_pr.set_transition(transition_dsc_pr)
+
+btn1 = lv.btn(lv.scr_act())
+btn1.align(lv.ALIGN.CENTER, 0, -80)
+btn1.add_style(style_pr, lv.STATE.PRESSED)
+btn1.add_style(style_def, 0)
+
+label = lv.label(btn1)
+label.set_text("Gum")
+