开发第1个LVGL程序与实现按键操作

12.2.2 编译程序

执行如下命令编译：

左右滑动查看完整内容

$ source /opt/remi-sdk/environment-setup-aarch64-poky-linux
$ cd lv_port_linux_frame_buffer-release-v9.0
$ mkdir build
$ cd build 
$ cmake .. # 如果提示没有 cmake 的话，执行：sudo apt install cmake
$ make -j 16

执行完毕后，在源码根目录下生成了bin子目录，里面有可执行程序“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 上机运行

把编译出来的可执行程序main复制到开发板/mnt目录：

左右滑动查看完整内容

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

把系统的GUI程序关闭：

左右滑动查看完整内容

$ systemctl stop myir.service # 现在停止，下次开机重新启动

执行第1个LVGL程序：

左右滑动查看完整内容

$ /mnt/main

可以看到如下界面：

12.3 实现按键操作

本节课程将开发一个LVGL程序，它显示2个按钮（button）：第1个名为“Click me”，第2个名为“Reset”；并显示一个label。当用户点击第1个按钮时，label显示的计数值加一；当用户点击第2个按钮时，label显示的计数值复位为0。

本节源码位于如下目录（已修改好）：

12.3.1 编写程序

在“第1个LVGL程序”的基础上修改代码。

1. 增加鼠标的支持

修改“lv_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行，创建一个“image object”。

第70行，设置“image object”的“image”，即：要显示一个“image object”，需要设置它对应的图片。

第71行，创建一个输入设备，它跟某个设备节点对应。注意：需要接上鼠标，确定鼠标对应的设备节点。方法为：接上鼠标后，执行如下命令（使用hexdump逐个测试设备节点，执行hexdump后，移动鼠标，有数据打印的话就找到了设备节点）：

左右滑动查看完整内容

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”建立联系。以后移动鼠标时，就可以显示对应的光标了。

第75~76行：注释掉，我们不使用这个界面。

第78行，运行我们的测试函数。

2. 创建按钮及label

main函数里调用了“button_test”函数，它里面创建了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行，创建第1个按钮“Click me”。

其中，第39行创建button，第40行设置对齐方式，第42行创建按钮的label，第43行设置label的值。

第46~50行，创建第2个按钮“Reset”。

其中，第46行创建button，第47行设置对齐方式，第49行创建按钮的label，第50行设置label的值。

第53~54行，创建一个label。

其中，第53行创建label，第54行设置对齐方式。

第56行，为第1个按钮设置回调函数。

第57行，为第2个按钮设置回调函数。

3. 增加按钮回调函数

按钮回调函数为“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行，获得“用户数据”，在前面的第56、57行设置按钮回调函数时设置了“用户数据”，这个用户数据就是用于显示计数值的label。

第13行，获得被点击的图标的label。

第14行，获得被点击的图标的label的值。

第16~21行，如果点击的是“Click me”按钮，则增加label 的计数值。

第22~27行，如果点击的是“Reset”按钮，则复位label的计数值为0。

12.3.2 上机运行

执行如下命令编译：

左右滑动查看完整内容

$ 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 的话，执行：sudo apt install cmake
$ make -j 16

执行完毕后，在源码根目录下生成了bin子目录，里面有可执行程序“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

把编译出来的可执行程序main复制到开发板/mnt目录：

左右滑动查看完整内容

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

把系统的GUI程序关闭：

左右滑动查看完整内容

$ systemctl stop myir.service # 现在停止，下次开机重新启动

执行程序：

$ /mnt/main

如果没有接入鼠标的话，程序会出错，如下所示：

正常的界面如下（点击“Click me”数值增加1，点击“Reset”数值变为0）：

12.4 实现开机运行

修改板子的“/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

然后重启即可。