# Event

## Event-driven

เป็นการเขียนโปรแกรมให้ object แสดงผลเมื่อเกิดเหตุการต่างๆเกิดขึ้นกับตัว object เช่น ถูกคลิก ถูกลาก มีการเปลี่ยนค่า โดยเราสามารถกำหนดให้ object อื่นแสดงผลต่อเนื่องได้ด้วย นอกเหนือจาก object ที่เราไป

เราสามารถเรียกให้ object เรียกใช้ event ได้ด้วยคำสั่งดังนี้

```cpp
lv_obj_set_event_cb(object,event_fuction,input_event,interact_object);
```

### Button event

เราสามารถสร้าง event ต่างๆ ให้เกิดขึ้นเมื่อมีการกดปุ่มได้โดยตัวอย่างที่ยกมาจะเป็นการเป็นการแสดงผลผ่านทาง terminal และ แสดงผลบน Label โดยเราสามารถเริ่มต้นได้โดยสร้างปุ่มกดขึ้นมา

{% tabs %}
{% tab title="Normal button" %}

```cpp
  lv_obj_t * btn = lv_btn_create(lv_scr_act());
  lv_obj_set_size(btn, 100, 50);
  lv_obj_center(btn);
  lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);

  lv_obj_t * label = lv_label_create(btn);
  lv_label_set_text(label, "Click me!");
  lv_obj_center(label);
```

{% endtab %}

{% tab title="Button with label" %}

```cpp
lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_set_size(btn, 100, 50);
lv_obj_center(btn);

lv_obj_t * btn_label = lv_label_create(btn);
lv_label_set_text(btn_label, "Click me!");
lv_obj_center(btn_label);

lv_obj_t * info_label = lv_label_create(lv_scr_act());
lv_label_set_text(info_label, "The last button event:\nNone");

lv_obj_add_event_cb(btn, event_cb, LV_EVENT_ALL, info_label);
```

{% endtab %}
{% endtabs %}

สร้างฟังก์ชั่น Event ที่จะให้แสดงผลขึ้น

* Event แสดงผลบน Terminal เมื่อมีการกดเกิดขึ้น

{% tabs %}
{% tab title="Click count button" %}

```cpp
static void event_cb(lv_event_t * e)
{
    LV_LOG_USER("Clicked");

    static uint32_t cnt = 1;
    lv_obj_t * btn = lv_event_get_target(e);
    lv_obj_t * label = lv_obj_get_child(btn, 0);
    lv_label_set_text_fmt(label, "%d", cnt);
    cnt++;
}
```

{% endtab %}

{% tab title="Status button" %}

```cpp
static void event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * label = lv_event_get_user_data(e);

    switch(code) {
    case LV_EVENT_PRESSED:
        lv_label_set_text(label, "The last button event:\nLV_EVENT_PRESSED");
        break;
    case LV_EVENT_CLICKED:
        lv_label_set_text(label, "The last button event:\nLV_EVENT_CLICKED");
        break;
    case LV_EVENT_LONG_PRESSED:
        lv_label_set_text(label, "The last button event:\nLV_EVENT_LONG_PRESSED");
        break;
    default:
        break;
    }
}
```

{% endtab %}
{% endtabs %}

### Checkbox event

จากของเดิม object ที่เป็น button เราจะเปลี่ยนเป็น Checkbox โดยยังเก็บ object status\_label ไว้เพื่อแสดงผลโดยเราจะสร้าง checkbox ด้วยคำสั่งต่อไปนี้

```cpp
    lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);

    lv_obj_t * cb;
    cb = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb, "Apple");
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb, "Banana");
    lv_obj_add_state(cb, LV_STATE_CHECKED);
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb, "Lemon");
    lv_obj_add_state(cb, LV_STATE_DISABLED);
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_scr_act());
    lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
    lv_checkbox_set_text(cb, "Melon\nand a new line");
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
```

สร้างฟังก์ชั่น Event ขึ้นมา

```cpp
static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        const char * txt = lv_checkbox_get_text(obj);
        const char * state = lv_obj_get_state(obj) & LV_STATE_CHECKED ? "Checked" : "Unchecked";
        LV_LOG_USER("%s: %s", txt, state);
    }
}
```

### Switch event

เช่นเดียวกับ checkbox เราจะสร้าง object switch ขึ้นมาและกำหนด event ให้กับมันเพื่อที่จะทำให้ object label เปลี่ยนไป

```cpp
    lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);

    lv_obj_t * sw;

    sw = lv_switch_create(lv_scr_act());
    lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);

    sw = lv_switch_create(lv_scr_act());
    lv_obj_add_state(sw, LV_STATE_CHECKED);
    lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);

    sw = lv_switch_create(lv_scr_act());
    lv_obj_add_state(sw, LV_STATE_DISABLED);
    lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);

    sw = lv_switch_create(lv_scr_act());
    lv_obj_add_state(sw, LV_STATE_CHECKED | LV_STATE_DISABLED);
    lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);
```

สร้างฟังก์ชั่น Event ขึ้นมา

```cpp
static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        LV_LOG_USER("State: %s\n", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "On" : "Off");
    }
}
```

### Dropdown event

Dropdown เป็น object ที่ใช้สำหรับเก็บตัวเลือกหลายๆตัว ไว้ด้วยกัน ดังนั้นการเลือก Dropdown มาเพื่อใช้ในการช่วยควบคุม object อื่นเป็นตัวเลือกที่ใช้งานค่อนข้างบ่อย เริ่มต้นด้วยการสร้าง Dropdown ขึ้นมา

```cpp
    lv_obj_t * dd = lv_dropdown_create(lv_scr_act());
    lv_dropdown_set_options(dd, "Apple\n"
                                "Banana\n"
                                "Orange\n"
                                "Cherry\n"
                                "Grape\n"
                                "Raspberry\n"
                                "Melon\n"
                                "Orange\n"
                                "Lemon\n"
                                "Nuts");

    lv_obj_align(dd, LV_ALIGN_TOP_MID, 0, 20);
    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_label_set_text(label,"Nothing is select");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
    lv_obj_add_event_cb(dd, event_handler, LV_EVENT_ALL, label);
```

สร้างฟังก์ชั่น Event ขึ้นมา

```cpp
static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    lv_obj_t * label = lv_event_get_user_data(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        char buf[32];
        lv_dropdown_get_selected_str(obj, buf, sizeof(buf));
        LV_LOG_USER("Option: %s", buf);
        lv_label_set_text_fmt(label,"You have select %s",buf);
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aic-eec.com/general/getting-start/lvgl-light-and-versatile-embedded-graphics-library/event.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.