Event-driven
เป็นการเขียนโปรแกรมให้ object แสดงผลเมื่อเกิดเหตุการต่างๆเกิดขึ้นกับตัว object เช่น ถูกคลิก ถูกลาก มีการเปลี่ยนค่า โดยเราสามารถกำหนดให้ object อื่นแสดงผลต่อเนื่องได้ด้วย นอกเหนือจาก object ที่เราไป
เราสามารถเรียกให้ object เรียกใช้ event ได้ด้วยคำสั่งดังนี้
Copy lv_obj_set_event_cb (object , event_fuction , input_event , interact_object);
Button event
เราสามารถสร้าง event ต่างๆ ให้เกิดขึ้นเมื่อมีการกดปุ่มได้โดยตัวอย่างที่ยกมาจะเป็นการเป็นการแสดงผลผ่านทาง terminal และ แสดงผลบน Label โดยเราสามารถเริ่มต้นได้โดยสร้างปุ่มกดขึ้นมา
Normal button Button with label
Copy 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);
Copy 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);
สร้างฟังก์ชั่น Event ที่จะให้แสดงผลขึ้น
Event แสดงผลบน Terminal เมื่อมีการกดเกิดขึ้น
Click count button Status button
Copy 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 ++ ;
}
Copy 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 ;
}
}
Checkbox event
จากของเดิม object ที่เป็น button เราจะเปลี่ยนเป็น Checkbox โดยยังเก็บ object status_label ไว้เพื่อแสดงผลโดยเราจะสร้าง checkbox ด้วยคำสั่งต่อไปนี้
Copy 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 ขึ้นมา
Copy 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 เปลี่ยนไป
Copy 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 ขึ้นมา
Copy 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 ขึ้นมา
Copy 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 ขึ้นมา
Copy 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);
}
}