開發(fā)第1個LVGL程序與實現(xiàn)按鍵操作

12.2.2 編譯程序

執(zhí)行如下命令編譯：

左右滑動查看完整內容

$ source /opt/remi-sdk/environment-setup-aarch64-poky-linux
$ cd lv_port_linux_frame_buffer-release-v9.0
$ mkdir build
$ cd build 
$ cmake .. # 如果提示沒有 cmake 的話，執(zhí)行：sudo apt install cmake
$ make -j 16

執(zhí)行完畢后，在源碼根目錄下生成了bin子目錄，里面有可執(zhí)行程序“main”：

左右滑動查看完整內容

$ ls ../bin/
main
$ file ../bin/main
../bin/main: ELF 64-bit LSB shared object, ARM aarch64, version 1 (SYSV), dynamically
linked, interpreter /lib64/ld-linux-aarch64.so.1, for GNU/Linux 
3.14.0, BuildID[sha1]=3fb9d000d98266fc0d4a252e8addaf07660e9612, wi
th debug_info, not stripped

12.2.3 上機運行

把編譯出來的可執(zhí)行程序main復制到開發(fā)板/mnt目錄：

左右滑動查看完整內容

$ scp ../bin/main root@192.168.5.9:/mnt

把系統(tǒng)的GUI程序關閉：

左右滑動查看完整內容

$ systemctl stop myir.service # 現(xiàn)在停止，下次開機重新啟動

執(zhí)行第1個LVGL程序：

左右滑動查看完整內容

$ /mnt/main

可以看到如下界面：

12.3 實現(xiàn)按鍵操作

本節(jié)課程將開發(fā)一個LVGL程序，它顯示2個按鈕（button）：第1個名為“Click me”，第2個名為“Reset”；并顯示一個label。當用戶點擊第1個按鈕時，label顯示的計數(shù)值加一；當用戶點擊第2個按鈕時，label顯示的計數(shù)值復位為0。

本節(jié)源碼位于如下目錄（已修改好）：

12.3.1 編寫程序

在“第1個LVGL程序”的基礎上修改代碼。

1. 增加鼠標的支持

修改“l(fā)v_config.h”，把宏“LV_USE_EVDEV”定義為1，如下所示：

左右滑動查看完整內容

889 #define LV_USE_EVDEV 1

修改“main.c”，增加，代碼如下：

左右滑動查看完整內容

60 int main(void)
61 {
62 lv_init();
63
64 /*Linux frame buffer device init*/
65 lv_display_t * disp = lv_linux_fbdev_create();
66 lv_linux_fbdev_set_file(disp, "/dev/fb0");
67
68 LV_IMG_DECLARE(mouse_cursor_icon)
69 lv_obj_t * cursor_obj = lv_img_create(lv_layer_sys()); /*Create an image objec
t for the cursor */
70 lv_img_set_src(cursor_obj, &mouse_cursor_icon); /*Set the image sourc
e*/
71 lv_indev_t * indev = lv_evdev_create(LV_INDEV_TYPE_POINTER, "/dev/input/event1
");
72 lv_indev_set_cursor(indev, cursor_obj);
73
74 /*Create a Demo*/
75 //lv_demo_widgets();
76 //lv_demo_widgets_start_slideshow();
77
78 button_test();
79
80 /*Handle LVGL tasks*/
81 while(1) {
82 lv_timer_handler();
83 usleep(5000);
84 }
85
86 return 0;
87 }

第68行，聲明鼠標指針的圖案，這就相當于如下語句（mouse_curson_icon在“mouse_cursor_icon.c”中定義）：

左右滑動查看完整內容

extern const lv_image_dsc_t mouse_cursor_icon;

第69行，創(chuàng)建一個“image object”。

第70行，設置“image object”的“image”，即：要顯示一個“image object”，需要設置它對應的圖片。

第71行，創(chuàng)建一個輸入設備，它跟某個設備節(jié)點對應。注意：需要接上鼠標，確定鼠標對應的設備節(jié)點。方法為：接上鼠標后，執(zhí)行如下命令（使用hexdump逐個測試設備節(jié)點，執(zhí)行hexdump后，移動鼠標，有數(shù)據(jù)打印的話就找到了設備節(jié)點）：

左右滑動查看完整內容

root@myir-remi-1g:~# ls /dev/input/event*
/dev/input/event0 /dev/input/event1 /dev/input/event1 
/dev/input/event3 /dev/input/event4
root@myir-remi-1g:~#
root@myir-remi-1g:~# hexdump /dev/input/event2
0000000 0329 b493 0000 0000 9c6d 0008 0000 0000
0000010 0002 0000 0001 0000 0329 b493 0000 0000

第72行，輸入設備和前面的“image object”建立聯(lián)系。以后移動鼠標時，就可以顯示對應的光標了。

第75~76行：注釋掉，我們不使用這個界面。

第78行，運行我們的測試函數(shù)。

2. 創(chuàng)建按鈕及l(fā)abel

main函數(shù)里調用了“button_test”函數(shù)，它里面創(chuàng)建了3個按鈕，代碼如下：

左右滑動查看完整內容

31 static void button_test(void)
32 {
33 lv_obj_t * btn_increment;
34 lv_obj_t * btn_reset;
35 lv_obj_t * label_btn_text;
36 lv_obj_t * label_value;
37
38 // Increment button
39 btn_increment = lv_button_create(lv_screen_active());
40 lv_obj_align(btn_increment, LV_ALIGN_CENTER, -100, 0);
41
42 label_btn_text = lv_label_create(btn_increment);
43 lv_label_set_text(label_btn_text, "Click me");
44
45 // Reset button
46 btn_reset = lv_button_create(lv_screen_active());
47 lv_obj_align(btn_reset, LV_ALIGN_CENTER, 100, 0);
48
49 label_btn_text = lv_label_create(btn_reset);
50 lv_label_set_text(label_btn_text, "Reset");
51
52 // Value label
53 label_value = lv_label_create(lv_screen_active());
54 lv_obj_align(label_value, LV_ALIGN_CENTER, 0, 0);
55
56 lv_obj_add_event_cb(btn_increment, btn_event_handler, LV_EVENT_CLICKED, label_
value);
57 lv_obj_add_event_cb(btn_reset, btn_event_handler, LV_EVENT_CLICKED, label_valu
e);
58 }
59

第39~43行，創(chuàng)建第1個按鈕“Click me”。

其中，第39行創(chuàng)建button，第40行設置對齊方式，第42行創(chuàng)建按鈕的label，第43行設置label的值。

第46~50行，創(chuàng)建第2個按鈕“Reset”。

其中，第46行創(chuàng)建button，第47行設置對齊方式，第49行創(chuàng)建按鈕的label，第50行設置label的值。

第53~54行，創(chuàng)建一個label。

其中，第53行創(chuàng)建label，第54行設置對齊方式。

第56行，為第1個按鈕設置回調函數(shù)。

第57行，為第2個按鈕設置回調函數(shù)。

3. 增加按鈕回調函數(shù)

按鈕回調函數(shù)為“btn_event_handler”，代碼如下：

左右滑動查看完整內容

08 static void btn_event_handler(lv_event_t * e)
09 {
10 lv_event_code_t code = lv_event_get_code(e);
11 lv_obj_t * btn = lv_event_get_target(e);
12 lv_obj_t * label_value = lv_event_get_user_data(e);
13 lv_obj_t * btn_label = lv_obj_get_child(btn, 0);
14 char * label_text = lv_label_get_text(btn_label);
15
16 if(code == LV_EVENT_CLICKED) {
17 if(strcmp(label_text, "Click me") == 0)
18 {
19 LV_LOG_USER("Increment");
20 lv_label_set_text_fmt(label_value, "%d", (atoi(lv_label_get_text(label
_value))+1));
21 }
22 else if(strcmp(label_text, "Reset") == 0)
23 {
24 LV_LOG_USER("Reset");
25 lv_label_set_text(label_value, "0");
26 }
27 }
28 }

第10行，取出輸入事件的code，它有這些取值：LV_EVENT_CLICKED、LV_EVENT_RELEASED等。

第11行，獲得被點擊的圖標。

第12行，獲得“用戶數(shù)據(jù)”，在前面的第56、57行設置按鈕回調函數(shù)時設置了“用戶數(shù)據(jù)”，這個用戶數(shù)據(jù)就是用于顯示計數(shù)值的label。

第13行，獲得被點擊的圖標的label。

第14行，獲得被點擊的圖標的label的值。

第16~21行，如果點擊的是“Click me”按鈕，則增加label 的計數(shù)值。

第22~27行，如果點擊的是“Reset”按鈕，則復位label的計數(shù)值為0。

12.3.2 上機運行

執(zhí)行如下命令編譯：

左右滑動查看完整內容

$ source /opt/remi-sdk/environment-setup-aarch64-poky-linux
$ tar xjf lv_port_linux_frame_buffer_mouse.tar.bz2
$ cd lv_port_linux_frame_buffer_mouse
$ mkdir build
$ cd build 
$ cmake .. # 如果提示沒有 cmake 的話，執(zhí)行：sudo apt install cmake
$ make -j 16

執(zhí)行完畢后，在源碼根目錄下生成了bin子目錄，里面有可執(zhí)行程序“main”：

左右滑動查看完整內容

$ ls ../bin/
main
$ file ../bin/main
../bin/main: ELF 64-bit LSB shared object, ARM aarch64, version 1 (SYSV), dynamically
linked, interpreter /lib64/ld-linux-aarch64.so.1, for GNU/Linux 
3.14.0, BuildID[sha1]=3fb9d000d98266fc0d4a252e8addaf07660e9612, wi
th debug_info, not stripped

把編譯出來的可執(zhí)行程序main復制到開發(fā)板/mnt目錄：

左右滑動查看完整內容

$ scp ../bin/main root@192.168.5.9:/mnt

把系統(tǒng)的GUI程序關閉：

左右滑動查看完整內容

$ systemctl stop myir.service # 現(xiàn)在停止，下次開機重新啟動

執(zhí)行程序：

$ /mnt/main

如果沒有接入鼠標的話，程序會出錯，如下所示：

正常的界面如下（點擊“Click me”數(shù)值增加1，點擊“Reset”數(shù)值變?yōu)?）：

12.4 實現(xiàn)開機運行

修改板子的“/usr/bin/start.sh”，內容如下：

左右滑動查看完整內容

#!/bin/sh -e
echo "Start MYiR HMI V2.0..."
export TSLIB_TSDEVICE=/dev/input/event1
export TSLIB_CONFFILE=/etc/ts.conf
export TSLIB_CALIBFILE=/etc/pointercal
export TSLIB_PLUGINDIR=/usr/lib/ts
export TSLIB_CONSOLEDEVICE=none
export QT_QPA_FB_TSLIB=1
export QT_QPA_GENERIC_PLUGINS=tslib:/dev/input/event1
echo 7 > /sys/class/backlight/backlight/brightness
sleep 5
# 【警告】這一行需要手動敲上去，不可復制粘貼，否則不生效！作用：去掉屏幕左上角的光標顯示
echo -e "?33[?25l" > /dev/tty1 
echo 1 > /proc/sys/kernel/printk # 降低內核打印等級，這樣屏幕上就不用有內核信息輸出
/mnt/main & # 你自己的程序
#/home/mxapp2 -platform linuxfb & # 注釋掉
#/usr/share/myir_test/age.sh & # 注釋掉
exit 0

然后重啟即可。