Button

Lab 2: Button with Click Counter

1. โครงสร้างภาพรวมของ Lab

Why?: วัตถุประสงค์การเรียนรู้

Button เป็น Widget พื้นฐานที่สำคัญที่สุดสำหรับการรับ Input จากผู้ใช้:

• User Interaction: Button เป็นวิธีหลักที่ผู้ใช้โต้ตอบกับ GUI

• GPIO Control: ใช้ควบคุม GPIO เช่น เปิด/ปิด LED, Motor

• Action Trigger: ใช้สั่งเริ่ม/หยุดการทำงานต่างๆ

• Event-Driven: เรียนรู้แนวคิด Event-driven Programming

What?: จะได้เรียนรู้อะไร

1. Button Widget: สร้างปุ่มกดด้วย lv_button_create()

2. Event Callback: ผูก callback function กับ event

3. Event Filtering: กรอง event ที่ต้องการด้วย LV_EVENT_CLICKED

4. Static Variable: เก็บค่า counter ข้าม function calls

5. Child Widget: เพิ่ม Label ลงใน Button

How? - ทำอย่างไร

• สร้างปุ่มที่นับจำนวนครั้งที่กด และแสดงผลบน Label ภายในปุ่ม

---

2. หลักการทำงานและ Flowchart

2.1 Event-Driven Model

┌─────────────────────────────────────────────────────────┐
│                    EVENT FLOW                           │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   User Touch    Event Queue     Callback      Update    │
│      │              │              │            │       │
│      ▼              ▼              ▼            ▼       │
│   ┌─────┐      ┌────────┐    ┌─────────┐   ┌────────┐   │
│   │Touch│─────>│  LVGL  │───>│ Your    │──>│ Update │   │
│   │Press│      │ Event  │    │ Callback│   │  UI    │   │
│   └─────┘      │ System │    │ Function│   └────────┘   │
│                └────────┘    └─────────┘                │
│                                                         │
│   Events Generated:                                     │
│   ├── LV_EVENT_PRESSED      (finger down)               │
│   ├── LV_EVENT_PRESSING     (holding)                   │
│   ├── LV_EVENT_RELEASED     (finger up)                 │
│   └── LV_EVENT_CLICKED      (complete tap) ◄── Use!     │
│                                                         │
└─────────────────────────────────────────────────────────┘

2.2 Button Creation Pattern (LVGL Official)

┌─────────────────────────────────────────────────────────┐
│         BUTTON CREATION ORDER (IMPORTANT!)              │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   Step 1: Create Button                                 │
│   ┌──────────────────────────────────┐                  │
│   │ btn = lv_button_create(parent)   │                  │
│   └──────────────────────────────────┘                  │
│                    │                                    │
│                    ▼                                    │
│   Step 2: Add Event Callback                            │
│   ┌──────────────────────────────────┐                  │
│   │ lv_obj_add_event_cb(btn, cb,     │                  │
│   │     LV_EVENT_CLICKED, NULL)      │                  │
│   └──────────────────────────────────┘                  │
│                    │                                    │
│                    ▼                                    │
│   Step 3: Position/Align                                │
│   ┌──────────────────────────────────┐                  │
│   │ lv_obj_align(btn, LV_ALIGN_...,  │                  │
│   │     x_offset, y_offset)          │                  │
│   └──────────────────────────────────┘                  │
│                    │                                    │
│                    ▼                                    │
│   Step 4: Set Padding (for size)                        │
│   ┌──────────────────────────────────┐                  │
│   │ lv_obj_set_style_pad_hor(btn,..) │                  │
│   │ lv_obj_set_style_pad_ver(btn,..) │                  │
│   └──────────────────────────────────┘                  │
│                    │                                    │
│                    ▼                                    │
│   Step 5: Create Label Child (LAST)                     │
│   ┌──────────────────────────────────┐                  │
│   │ label = lv_label_create(btn)     │                  │
│   │ lv_label_set_text(label, "...")  │                  │
│   │ lv_obj_center(label)             │                  │
│   └──────────────────────────────────┘                  │
│                                                         │
│   ⚠️ WARNING: Do NOT use lv_obj_set_size() before       │
│              creating label - causes text clipping!     │
│                                                         │
└─────────────────────────────────────────────────────────┘

2.3 Program Flowchart

┌─────────────────────────────────────────────────────────┐
│                  PROGRAM FLOW                           │
├─────────────────────────────────────────────────────────┤
│                                                         │
│                    ┌─────────┐                          │
│                    │  Start  │                          │
│                    └────┬────┘                          │
│                         │                               │
│                         ▼                               │
│              ┌─────────────────────┐                    │
│              │ Set Background      │                    │
│              │ Color               │                    │
│              └──────────┬──────────┘                    │
│                         │                               │
│                         ▼                               │
│              ┌─────────────────────┐                    │
│              │ Create Title Label  │                    │
│              └──────────┬──────────┘                    │
│                         │                               │
│                         ▼                               │
│              ┌─────────────────────┐                    │
│              │ Create Button       │                    │  
│              │ + Register Callback │                    │ 
│              │ + Set Padding       │                    │
│              │ + Add Label Child   │                    │
│              └──────────┬──────────┘                    │
│                         │                               │
│                         ▼                               │
│              ┌─────────────────────┐                    │
│              │ Create Description  │                    │
│              │ Label               │                    │
│              └──────────┬──────────┘                    │
│                         │                               │
│                         ▼                               │
│              ┌─────────────────────┐                    │
│              │ LVGL Main Loop      │◄──────────┐        │
│              │ (wait for events)   │           │        │
│              └──────────┬──────────┘           │        │
│                         │                      │        │
│                    User clicks                 │        │
│                         │                      │        │
│                         ▼                      │        │
│              ┌─────────────────────┐           │        │
│              │ Callback Function   │           │        │
│              │ 1. Check event code │           │        │
│              │ 2. Increment cnt    │           │        │
│              │ 3. Update label     │           │        │
│              └──────────┬──────────┘           │        │
│                         │                      │        │
│                         └──────────────────────┘        │
│                                                         │
└─────────────────────────────────────────────────────────┘

---

3. ฟังก์ชันสำคัญ

3.1 Button Functions

Function	Description	Parameters
lv_button_create(parent)	สร้าง Button widget	parent: object หลัก
lv_obj_add_event_cb()	เพิ่ม event callback	obj, callback, event_type, user_data
lv_obj_set_style_pad_hor()	กำหนด padding แนวนอน	obj, value, selector
lv_obj_set_style_pad_ver()	กำหนด padding แนวตั้ง	obj, value, selector

3.2 Event Functions

Function	Description	Returns
lv_event_get_code(e)	ดึงรหัส event	lv_event_code_t
lv_event_get_target(e)	ดึง object ที่เกิด event	lv_obj_t *
lv_event_get_user_data(e)	ดึง user data ที่ส่งมา	void *

3.3 Child Access Functions

Function	Description	Returns
lv_obj_get_child(obj, idx)	ดึง child ตาม index	lv_obj_t *
lv_obj_center(obj)	จัดให้อยู่กึ่งกลาง parent	-

3.4 Event Types ที่ใช้บ่อย

// Button Events
LV_EVENT_CLICKED       // Click (กดแล้วปล่อย) ← ใช้บ่อยที่สุด
LV_EVENT_PRESSED       // กดลง (finger down)
LV_EVENT_RELEASED      // ปล่อย (finger up)
LV_EVENT_LONG_PRESSED  // กดค้างนาน

// Value Change Events (for Slider, Switch, etc.)
LV_EVENT_VALUE_CHANGED // ค่าเปลี่ยน

// Focus Events
LV_EVENT_FOCUSED       // ได้รับ focus
LV_EVENT_DEFOCUSED     // สูญเสีย focus

---

4. Code Example

4.1 Complete Code

/*******************************************************************************
 * Example 2: Button with Click Counter
 *
 * Official Reference: https://docs.lvgl.io/9.2/widgets/button.html
 * Example Code: https://github.com/lvgl/lvgl/blob/release/v9.2/examples/widgets/button/lv_example_button_1.c
 ******************************************************************************/

/* Event callback function */
static void btn_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * btn = lv_event_get_target(e);

    /* Filter: Only respond to CLICKED event */
    if(code == LV_EVENT_CLICKED) {
        /* Static counter - retains value between calls */
        static uint32_t cnt = 0;
        cnt++;

        /* Get the label child (index 0) and update text */
        lv_obj_t * label = lv_obj_get_child(btn, 0);
        lv_label_set_text_fmt(label, "Clicked: %u", (unsigned int)cnt);

        /* Debug output */
        printf("Button clicked %u times\r\n", (unsigned int)cnt);
    }
}

void week3_ex2_button_counter(void)
{
    /* Set background */
    lv_obj_set_style_bg_color(lv_screen_active(),
                              lv_color_hex(0x1a1a2e),
                              LV_PART_MAIN);

    /* Title */
    lv_obj_t * title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "Week 3 - Example 2: Button Counter");
    lv_obj_set_style_text_color(title, lv_color_hex(0xFFFFFF), 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);

    /* Create button - following official LVGL example pattern */
    lv_obj_t * btn = lv_button_create(lv_screen_active());
    lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);
    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_style_pad_hor(btn, 30, 0);   /* Horizontal padding */
    lv_obj_set_style_pad_ver(btn, 15, 0);   /* Vertical padding */

    /* Add label to button (MUST be last step) */
    lv_obj_t * btn_label = lv_label_create(btn);
    lv_label_set_text(btn_label, "Click Me!");
    lv_obj_center(btn_label);

    /* Description */
    lv_obj_t * desc = lv_label_create(lv_screen_active());
    lv_label_set_text(desc, "Learning: lv_button_create, lv_obj_add_event_cb\n"
                           "Pattern: Event callback with LV_EVENT_CLICKED");
    lv_obj_set_style_text_color(desc, lv_color_hex(0xAAAAAA), 0);
    lv_obj_set_style_text_align(desc, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(desc, LV_ALIGN_BOTTOM_MID, 0, -50);
}

4.2 Code Breakdown

Part 1: Event Callback

static void btn_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);    // [1] Get event type
    lv_obj_t * btn = lv_event_get_target(e);        // [2] Get button object

    if(code == LV_EVENT_CLICKED) {                  // [3] Filter events!
        static uint32_t cnt = 0;                    // [4] Static = persistent
        cnt++;

        lv_obj_t * label = lv_obj_get_child(btn, 0); // [5] Get label child
        lv_label_set_text_fmt(label, "Clicked: %u", (unsigned int)cnt);
    }
}

ทำไมต้อง Filter Event?

• Callback ถูกเรียกกับทุก event type

• ถ้าไม่กรอง อาจนับซ้ำ (PRESSED, RELEASED, CLICKED)

Part 2: Static Variable

static uint32_t cnt = 0;  // Static local variable

ประเภท	Lifetime	Visibility	ค่าเริ่มต้น
Regular local	Function call	Local	ไม่แน่นอน
Static local	Program lifetime	Local	0
Global	Program lifetime	Global	0

---

5. องค์ความรู้และเทคนิค

5.1 Event Callback Pattern

/* Standard callback signature */
static void my_callback(lv_event_t * e)
{
    /* 1. Get event info */
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * target = lv_event_get_target(e);
    void * user_data = lv_event_get_user_data(e);

    /* 2. Filter specific event */
    if(code == LV_EVENT_CLICKED) {
        /* 3. Do your work */
    }
}

5.2 Passing User Data

/* Example: Pass custom data to callback */
typedef struct {
    int id;
    const char *name;
} button_info_t;

static button_info_t info = {.id = 42, .name = "MyButton"};

/* Register with user_data */
lv_obj_add_event_cb(btn, my_callback, LV_EVENT_CLICKED, &info);

/* In callback */
static void my_callback(lv_event_t * e)
{
    button_info_t * info = (button_info_t *)lv_event_get_user_data(e);
    printf("Button %d: %s\n", info->id, info->name);
}

5.3 Multiple Events on Same Object

/* Register multiple events */
lv_obj_add_event_cb(btn, click_cb, LV_EVENT_CLICKED, NULL);
lv_obj_add_event_cb(btn, long_press_cb, LV_EVENT_LONG_PRESSED, NULL);

/* Or use ALL events and filter in callback */
lv_obj_add_event_cb(btn, multi_cb, LV_EVENT_ALL, NULL);

static void multi_cb(lv_event_t * e)
{
    switch(lv_event_get_code(e)) {
        case LV_EVENT_CLICKED:
            /* Short click action */
            break;
        case LV_EVENT_LONG_PRESSED:
            /* Long press action */
            break;
    }
}

5.4 Button Styling

/* Change button colors */
lv_obj_set_style_bg_color(btn, lv_palette_main(LV_PALETTE_GREEN), 0);

/* Pressed state color */
lv_obj_set_style_bg_color(btn, lv_palette_main(LV_PALETTE_GREEN), LV_STATE_PRESSED);

/* Rounded corners */
lv_obj_set_style_radius(btn, 10, 0);

/* Shadow */
lv_obj_set_style_shadow_width(btn, 10, 0);
lv_obj_set_style_shadow_color(btn, lv_color_hex(0x000000), 0);

---

6. แบบฝึกหัด

Exercise 1: Double Counter (Easy)

สร้าง 2 ปุ่ม: "Increment" และ "Decrement" ที่เพิ่ม/ลดค่า counter

Expected Output:

┌──────────────────────────┐
│   Counter: 5             │
│                          │
│  [  -  ]    [  +  ]      │
│                          │
└──────────────────────────┘

Hints:

• ใช้ static int สำหรับ counter

• สร้าง global label pointer สำหรับแสดงค่า

• ใช้ user_data ส่ง direction (+1 หรือ -1)

---

Exercise 2: Toggle Button (Medium)

สร้างปุ่มที่สลับระหว่าง "ON" และ "OFF" เมื่อกด พร้อมเปลี่ยนสีปุ่ม

Expected Output:

State OFF:                 State ON:
┌──────────────────┐      ┌──────────────────┐
│   [   OFF  ]     │ ──>  │   [   ON   ]     │
│   (สีแดง)         │      │   (สีเขียว)        │
└──────────────────┘      └──────────────────┘

Hints:

• ใช้ static bool state = false;

• lv_obj_set_style_bg_color() เปลี่ยนสีปุ่ม

---

Exercise 3: Long Press Detection (Advanced)

สร้างปุ่มที่แยกการกดสั้นและกดค้าง:

• กดสั้น: แสดง "Short Press"

• กดค้าง 1 วินาที: แสดง "Long Press"

Hints:

• ใช้ LV_EVENT_CLICKED และ LV_EVENT_LONG_PRESSED

• สามารถ register หลาย callback ได้

---

7. References

• LVGL Button Documentation

• LVGL Button Example

• LVGL Events Guide

---

Next Lab: Lab 3: LED Widget Control