# 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);
    }
}
```