目录
任务简介
在上一篇博文中，我们介绍了在聆思CSK6语音大模型AI开发套件的开发板实现对云平台返回的结果进行处理，我们已经通过日志文件看到了数据的正确接收和解析。今天对程序的用户界面进行优化，这样可以通过屏幕看到电梯的显示。
图形界面功能的实现
界面显示部分运行在一个独立的线程中，这部分代码是基于LVGL库实现的。
图形界面相关的代码在src\app_ui\demo_ui目录下。其中ui.c是核心代码。
添加LVGL控件
我们先定义一个全局变量：
lv_obj_t *ui_demo_layer_label = NULL;
然后在ui_demo_screen_init函数中添加如下代码：
ui_demo_layer_label = lv_label_create(ui_demo_screen);
lv_obj_set_width( ui_demo_layer_label, LV_SIZE_CONTENT); /// 1
lv_obj_set_height( ui_demo_layer_label, LV_SIZE_CONTENT); /// 1
lv_obj_set_x( ui_demo_layer_label, 10 );
lv_obj_set_y( ui_demo_layer_label, 100 );
lv_obj_set_align( ui_demo_layer_label, LV_ALIGN_TOP_LEFT );
lv_label_set_text(ui_demo_layer_label, "Current Layer: 1");
lv_obj_set_style_text_color(ui_demo_layer_label, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_text_opa(ui_demo_layer_label, 255, LV_PART_MAIN| LV_STATE_DEFAULT);
添加显示楼层的函数
在ui.c中我们增加了ui_set_layer函数，该函数将解析到的电梯楼层数显示在layer_label上。
void ui_set_layer(int32_t id)
{
char layer_text[50];
snprintf(layer_text, sizeof(layer_text), "Current Layer: %d", id);
k_mutex_lock(&lvgl_ui_mutex, K_FOREVER);
lv_label_set_text(ui_demo_layer_label, layer_text);
k_mutex_unlock(&lvgl_ui_mutex);
}
我们在consumer_thread线程中调用ui_set_layer函数即可完成显示更新。
系统字体的使用
在官方的例子中，所有的中文显示都是使用LVGL的字体生成工具转换生成得到的。保存在src\app_ui\demo_ui\fonts\screen_word.c中。不过该文件中并没有我们显示电梯层数所需要的文字。
我们采用一个简单的办法，就是利用系统字体输出"Current Layer字样"。要使用系统字体，需要修改prj.conf文件中修改如下：
CONFIG_LV_FONT_MONTSERRAT_32=y
完整代码下载
完整的代码参见：https://download.csdn.net/download/bit_mike/88959552
演示效果
下面是程序运行的演示效果图。
下面是完整的演示视频。
【聆思CSK6语音大模型AI开发套件试用】语音控制电梯
标签：layer,set,AI,demo,聆思,label,lv,ui,语音 From： https://blog.csdn.net/bit_mike/article/details/136719961