LVGL应用和部署（几种人机交互的方式）

只要是嵌入式设备，不管是stm32也好，或者是linux设备，总少不了人机交互。如果产品本身还是在开发的阶段，那么基本上采用串口开发的方式，就可以实现人机交互了。但是等到后期慢慢往产品方向转的时候，这个时候就不能采用串口通信了。毕竟，大部分客户都没有这方面的知识，只能想想其他的办法了。

1、按键方式

如果不输入的话，一个小的液晶显示屏，甚至是数码管就可以完成消息的输出。但是如果需要有输入信息的需求，通常就是采用按键的方式来完成。这也是大多数嵌入式设备的交互方式。一来按键开发非常简单，二来成本也很低。只要是不太复杂的功能，都可以通过gpio+状态机+lvgl的方式开发出来。

2、触摸屏的方式

前面说过，可以用按键的方式，来进行人机交互。这对一般的产品来说，是足够的。但是如果遇到复杂一点的产品，比如需要输入用户名、密码，需要修改内部的文件名，需要设置规则属性等等，这就有点麻烦了。很多的输入，需要涉及到英文字母大小写、涉及到数字，甚至很多国产的设备，还涉及到汉字的输入，这部分内容，靠按键来实现是完全不现实的。遇到这种情况的时候，最好的处理办法，还是添加一块触摸屏。

有了触摸屏之后，就可以虚拟出一个键盘。这样的一个键盘，上面密密麻麻布置了很多的按键。通过把虚拟键盘和编辑框做一个绑定，那么就可以实现复杂的信息输入了。即使是中文，也可以通过这种方式来完成的。

有了虚拟键盘之后，我们就可以像操作手机一样操作嵌入式设备，整体产品的调性和档次也会增加不少。一般来说，触摸屏就是比普通lcd屏幕多一个触摸功能，用一对i2c总线就可以获取对应的x/y信息了。但交互方式，一下子就自然了很多。整体代码如下所示，

复制代码

#include "../../lv_examples.h"
#if LV_USE_KEYBOARD && LV_BUILD_EXAMPLES

void lv_example_keyboard_2(void)
{
    /*Create an AZERTY keyboard map*/
    static const char * kb_map[] = {"A", "Z", "E", "R", "T", "Y", "U", "I", "O", "P", LV_SYMBOL_BACKSPACE, "\n",
                                    "Q", "S", "D", "F", "G", "J", "K", "L", "M",  LV_SYMBOL_NEW_LINE, "\n",
                                    "W", "X", "C", "V", "B", "N", ",", ".", ":", "!", "?", "\n",
                                    LV_SYMBOL_CLOSE, " ",  " ", " ", LV_SYMBOL_OK, NULL
                                   };

    /*Set the relative width of the buttons and other controls*/
    static const lv_buttonmatrix_ctrl_t kb_ctrl[] = {4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 6,
                                                     4, 4, 4, 4, 4, 4, 4, 4, 4, 6,
                                                     4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
                                                     2, LV_BUTTONMATRIX_CTRL_HIDDEN | 2, 6, LV_BUTTONMATRIX_CTRL_HIDDEN | 2, 2
                                                    };

    /*Create a keyboard and add the new map as USER_1 mode*/
    lv_obj_t * kb = lv_keyboard_create(lv_screen_active());

    lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_USER_1, kb_map, kb_ctrl);
    lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_USER_1);

    /*Create a text area. The keyboard will write here*/
    lv_obj_t * ta;
    ta = lv_textarea_create(lv_screen_active());
    lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, 10);
    lv_obj_set_size(ta, lv_pct(90), 80);
    lv_obj_add_state(ta, LV_STATE_FOCUSED);

    lv_keyboard_set_textarea(kb, ta);
}
#endif

从代码中可以看出来，虚拟键盘是单独创建的，

复制代码

    lv_obj_t * kb = lv_keyboard_create(lv_screen_active());

    lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_USER_1, kb_map, kb_ctrl);
    lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_USER_1);

接着继续创建编辑区域，

复制代码

    lv_obj_t * ta;
    ta = lv_textarea_create(lv_screen_active());
    lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, 10);
    lv_obj_set_size(ta, lv_pct(90), 80);
    lv_obj_add_state(ta, LV_STATE_FOCUSED);

最后是把键盘和编辑区域，做一个绑定即可，

复制代码

    lv_keyboard_set_textarea(kb, ta);

3、web交互的方式

这种方式比较适合网络设备。首先，开发的设备上面至少需要一个网卡，不管是有线的，还是无线的，至少可以和外界通过网络进行沟通。其次，在嵌入式设备上面需要布置一个web server，这样外部浏览器和设备通信的时候，才有可能进行数据的交流。这样的web server不必很大，类似于mongoose就很合适。最后，要设计好交互的网页。一般来说，网页部分是单独设计出来的，比如大家熟悉的vue.js+elementui，就是前端的范畴。设计好了之后，随着web server一起部署到嵌入式设备上，这就完成了web的交互功能了。

就嵌入式设备而言，很多时候，web的加载和保存，都是为了配置一个ini文件。如果这个ini文件，可以完成文件的读取和保存，大体上web交互的作用就达到了。至于ini文件做什么用，什么时候起作用，这就要看嵌入式设备的应用场合和工作场景了。