【聆思CSK6语音大模型AI开发套件试用】增加对语音控制电梯功能的显示

优化CSK6AI开发套件的电梯界面：LVGL控件与系统字体应用

最新推荐文章于 2025-12-01 19:45:15 发布

原创最新推荐文章于 2025-12-01 19:45:15 发布 · 843 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #语音识别 #自然语言处理 #嵌入式硬件 #用户界面

聆思CSK6 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在聆思CSK6的AI开发板上使用LVGL库创建图形用户界面，包括添加控件如楼层显示标签，以及利用系统字体显示电梯层号。还提供了完整代码下载链接和演示效果。

任务简介

在上一篇博文中，我们介绍了在聆思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文件中修改如下：