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

ฟังก์ชัน	หน้าที่
lv_button_create()	สร้าง Button widget
lv_obj_add_event_cb()	ผูก Event callback function
lv_event_get_code()	ดึง event code ภายใน callback
lv_event_get_target()	ดึง object ที่ถูกกด
lv_event_get_user_data()	ดึง user data ที่ส่งมากับ event
LV_EVENT_CLICKED	Event เมื่อกดและปล่อยปุ่ม

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

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

---

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

2.1 Event-Driven Model

2.2 Button Creation Pattern (LVGL Official)

WARNING:

ห้ามใช้คำสั่ง lv_obj_set_size() ก่อนที่จะสร้าง label เพราะอาจจะทำให้ text ถูกตัด (clip) ออกไป

2.3 Program Flowchart

---

3. ฟังก์ชันสำคัญ (API Reference)

3.1 Button Creation & Style

ฟังก์ชัน	พารามิเตอร์	คำอธิบาย
lv_button_create(parent)	parent object	สร้าง Button ใหม่
lv_obj_set_style_pad_hor(btn, px, part)	btn, pixels, 0	padding ซ้าย-ขวา (ทำให้ปุ่มกว้าง)
lv_obj_set_style_pad_ver(btn, px, part)	btn, pixels, 0	padding บน-ล่าง (ทำให้ปุ่มสูง)
lv_obj_set_style_bg_color(btn, color, part)	btn, lv_color_t, 0	สีพื้นหลังปุ่ม
lv_obj_set_style_radius(btn, r, part)	btn, pixels, 0	มุมมนของปุ่ม

3.2 Event Functions

ฟังก์ชัน	พารามิเตอร์	คำอธิบาย
lv_obj_add_event_cb(obj, cb, filter, data)	obj, callback_fn, LV_EVENT_*, user_data	ลงทะเบียน event callback
lv_event_get_code(e)	lv_event_t *	ดึง event code
lv_event_get_target(e)	lv_event_t *	ดึง object ที่เกิด event
lv_event_get_user_data(e)	lv_event_t *	ดึง user data ที่ส่งมา

3.3 Common Event Codes

Event Code	เมื่อไหร่	ใช้เมื่อ
LV_EVENT_CLICKED	กดแล้วปล่อย (tap สมบูรณ์)	ใช้บ่อยที่สุด - สำหรับ action ทั่วไป
LV_EVENT_PRESSED	นิ้วแตะลง	ตอบสนองทันที ไม่รอปล่อย
LV_EVENT_RELEASED	ยกนิ้วขึ้น	ใช้คู่กับ PRESSED
LV_EVENT_LONG_PRESSED	กดค้างนาน (400ms)	สำหรับ action พิเศษ
LV_EVENT_VALUE_CHANGED	ค่าเปลี่ยน	สำหรับ Slider, Switch, Dropdown

3.4 Label Functions ใน Button

ฟังก์ชัน	คำอธิบาย
lv_label_create(btn)	สร้าง Label เป็น child ของ Button
lv_obj_center(label)	วาง Label ตรงกลาง Button
lv_obj_get_child(btn, 0)	ดึง child แรก (Label) จาก Button
lv_label_set_text_fmt(label, fmt, ...)	อัปเดตข้อความของ Label

---

4. โค้ดตัวอย่าง (Code Examples)

4.1 โค้ดอ้างอิง: part1_ex2_button_counter()

จากไฟล์ part1_examples.c:

/* Callback function - ประกาศ static นอก main function */
static void ex2_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);

    if(code == LV_EVENT_CLICKED) {
        static uint32_t cnt = 0;
        cnt++;

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

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

void part1_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, "Part 1 - 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 pattern */
    lv_obj_t * btn = lv_button_create(lv_screen_active());
    lv_obj_add_event_cb(btn, ex2_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);
    lv_obj_set_style_pad_ver(btn, 15, 0);

    /* Add label to button */
    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);
}

วิเคราะห์จุดสำคัญ:

จุด	โค้ด	ทำไม
Event filter	LV_EVENT_CLICKED ใน add_event_cb	ลงทะเบียนเฉพาะ CLICKED
Static counter	static uint32_t cnt = 0	เก็บค่าข้าม function call
Get child label	lv_obj_get_child(btn, 0)	ดึง Label จาก Button
Update text	lv_label_set_text_fmt()	อัปเดตข้อความแบบ dynamic
Padding	pad_hor(30), pad_ver(15)	ใช้แทน set_size()
user_data	NULL	ไม่ส่ง data เพราะมีปุ่มเดียว

4.2 Button กับ User Data

/* Callback ที่ใช้ user_data แยกการทำงาน */
static lv_obj_t * count_label;
static int32_t counter = 0;

static void inc_dec_cb(lv_event_t * e)
{
    int32_t * step = (int32_t *)lv_event_get_user_data(e);
    counter += *step;
    lv_label_set_text_fmt(count_label, "Count: %d", (int)counter);
}

void example_two_buttons(void)
{
    static int32_t step_up = 1;     /* ต้อง static เพราะ user_data เก็บ pointer */
    static int32_t step_down = -1;

    /* Display label */
    count_label = lv_label_create(lv_screen_active());
    lv_label_set_text(count_label, "Count: 0");
    lv_obj_set_style_text_color(count_label, lv_color_hex(0xFFFFFF), 0);
    lv_obj_set_style_text_font(count_label, &lv_font_montserrat_24, 0);
    lv_obj_align(count_label, LV_ALIGN_CENTER, 0, -40);

    /* UP Button */
    lv_obj_t * btn_up = lv_button_create(lv_screen_active());
    lv_obj_add_event_cb(btn_up, inc_dec_cb, LV_EVENT_CLICKED, &step_up);
    lv_obj_align(btn_up, LV_ALIGN_CENTER, -70, 30);
    lv_obj_set_style_pad_hor(btn_up, 25, 0);
    lv_obj_set_style_pad_ver(btn_up, 12, 0);
    lv_obj_set_style_bg_color(btn_up, lv_palette_main(LV_PALETTE_GREEN), 0);

    lv_obj_t * lbl_up = lv_label_create(btn_up);
    lv_label_set_text(lbl_up, "+1");
    lv_obj_center(lbl_up);

    /* DOWN Button */
    lv_obj_t * btn_down = lv_button_create(lv_screen_active());
    lv_obj_add_event_cb(btn_down, inc_dec_cb, LV_EVENT_CLICKED, &step_down);
    lv_obj_align(btn_down, LV_ALIGN_CENTER, 70, 30);
    lv_obj_set_style_pad_hor(btn_down, 25, 0);
    lv_obj_set_style_pad_ver(btn_down, 12, 0);
    lv_obj_set_style_bg_color(btn_down, lv_palette_main(LV_PALETTE_RED), 0);

    lv_obj_t * lbl_down = lv_label_create(btn_down);
    lv_label_set_text(lbl_down, "-1");
    lv_obj_center(lbl_down);
}

4.3 Multiple Callbacks กับ Multiple Buttons

/* แต่ละปุ่มมี callback แยก */
static void start_cb(lv_event_t * e) {
    (void)e;
    printf("Process STARTED\r\n");
    /* สั่งเริ่ม data collection, motor, etc. */
}

static void stop_cb(lv_event_t * e) {
    (void)e;
    printf("Process STOPPED\r\n");
    /* สั่งหยุดทำงาน */
}

/* ลงทะเบียนแยก callback */
lv_obj_add_event_cb(btn_start, start_cb, LV_EVENT_CLICKED, NULL);
lv_obj_add_event_cb(btn_stop, stop_cb, LV_EVENT_CLICKED, NULL);

4.4 Button Style Customization

/* ปุ่มแบบ Danger (สีแดง, มุมมน) */
lv_obj_t * btn_danger = lv_button_create(lv_screen_active());
lv_obj_set_style_bg_color(btn_danger, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_color(btn_danger,
lv_palette_darken(LV_PALETTE_RED, 2), LV_STATE_PRESSED);  /* สีเข้มเมื่อกด */
lv_obj_set_style_radius(btn_danger, 10, 0);  /* มุมมน */
lv_obj_set_style_pad_hor(btn_danger, 40, 0);
lv_obj_set_style_pad_ver(btn_danger, 20, 0);
lv_obj_set_style_shadow_width(btn_danger, 10, 0);  /* เงา */
lv_obj_set_style_shadow_color(btn_danger,
lv_palette_main(LV_PALETTE_RED), 0);

---

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

5.1 Event Filter: ทำไมต้อง Filter?

/* วิธีผิด: ลงทะเบียน LV_EVENT_ALL แล้ว filter ภายใน */
lv_obj_add_event_cb(btn, cb, LV_EVENT_ALL, NULL);  /* ไม่แนะนำ! */

/* วิธีถูก: ลงทะเบียนเฉพาะ event ที่ต้องการ */
lv_obj_add_event_cb(btn, cb, LV_EVENT_CLICKED, NULL);  /* ดีกว่า */

เหตุผล: LV_EVENT_ALL จะเรียก callback ทุกครั้งที่มี event ใดๆ เกิดขึ้น (หลายสิบครั้งต่อ touch เดียว) ทำให้สิ้นเปลือง CPU และอาจเกิดปัญหาที่ไม่คาดคิด

5.2 ข้อผิดพลาดที่พบบ่อย

ข้อผิดพลาด	สาเหตุ	วิธีแก้
ปุ่มเล็กเกินไป	ใช้ lv_obj_set_size() กับ Button	ใช้ lv_obj_set_style_pad_hor/ver() แทน
Label หายจากปุ่ม	สร้าง Label ก่อน set_size	สร้าง Label หลังสุด แล้ว lv_obj_center()
Callback ไม่ทำงาน	ลืม add_event_cb หรือ event code ผิด	ตรวจสอบ filter event
Counter กลับเป็น 0	ตัวแปร local ไม่ใช่ static	ประกาศ static
user_data เป็น garbage	ส่ง address ของ local variable	ใช้ static variable หรือ global
กด 1 ครั้ง callback เรียกหลายครั้ง	ใช้ LV_EVENT_ALL	ใช้ LV_EVENT_CLICKED

5.3 ขนาดปุ่มที่แนะนำสำหรับ Touch Screen

    Minimum touch target: 40x40 pixels
    Recommended padding:  hor=25-40, ver=12-20

    +-----------------------+
    |  pad_ver = 15         |
    |  +---------------+    |
    |  |  "Click Me!"  |    |   <-- Label ถูก center อัตโนมัติ
    |  +---------------+    |
    |  pad_hor = 30         |
    +-----------------------+

    ขนาดปุ่มโดยประมาณ:
    - เล็ก:   pad_hor=20, pad_ver=10  (~80x34 px)
    - กลาง:  pad_hor=30, pad_ver=15  (~120x44 px)
    - ใหญ่:   pad_hor=40, pad_ver=20  (~160x54 px)

5.4 Static Variables vs. Global Variables

/* วิธี 1: Static ภายใน Callback (เรียบง่าย, ใช้กับ counter) */
static void cb(lv_event_t * e) {
    static int count = 0;   /* เห็นได้เฉพาะใน function นี้ */
    count++;
}

/* วิธี 2: Static Global (ใช้เมื่อ callback ต้องอัปเดต widget อื่น) */
static lv_obj_t * my_label;     /* เข้าถึงได้ทั้งไฟล์ */
static void cb(lv_event_t * e) {
    lv_label_set_text(my_label, "Updated!");
}

/* วิธี 3: User Data (ใช้เมื่อ callback ถูก reuse) */
static void cb(lv_event_t * e) {
    lv_obj_t * label = (lv_obj_t *)lv_event_get_user_data(e);
    lv_label_set_text(label, "Updated!");
}
lv_obj_add_event_cb(btn, cb, LV_EVENT_CLICKED, my_label);

---

6. แบบฝึกหัด (Exercises)

Exercise 1: Increment/Decrement Counter - 10-15 นาที

โจทย์: สร้าง Counter ที่มีปุ่ม 2 ตัว สำหรับเพิ่ม (+1) และลด (-1) ค่า

ข้อกำหนด:

1. Background สี 0x1a1a2e

2. Title "Production Counter" (font_24, สีขาว, TOP_MID)

3. Label แสดงค่า counter เริ่มที่ 0 (font_24, สีขาว, CENTER, y=-30)

4. ปุ่ม "+" สีเขียว อยู่ทางซ้าย (CENTER, x=-80, y=+40)

5. ปุ่ม "-" สีแดง อยู่ทางขวา (CENTER, x=+80, y=+40)

6. ค่า counter ไม่ต่ำกว่า 0 (ถ้า counter == 0 แล้วกด "-" ไม่ลด)

7. แสดง format "Count: XX"

Expected Output:

Hints:

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

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

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

---

Exercise 2: Toggle Button (Medium)

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

Expected Output:

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