文章目录

一、界面预览

BiliBili 演示视频

二、简介

尝试了黄山派小智官方文档的自定义设计功能，觉得待机界面也可以自定义设计一下，所以尝试写个相关的自定义文档。
我也是刚开始使用 GUI-Guider 和 黄山派小智不多久，有可以提升的地方也希望大家一同指出。
最后会附上源代码文件和固件。

三、流程简介

1、GUI-Guider建立一个自定义的待机界面

2、添加生成的界面代码

2、缩减小智原代码

3、随后将生成的相关代码移植到小智的代码中

4、然后适配相关的代码

5、更新显示

四、Gui-Guider 建立自定义待机界面

Gui-Guider 的学习可以看B站的相关教学视频，这里做一些简单的说明。
需要注意的是，小智相关代码使用的是lvgl_v9
以下是创建工程的流程

在这里插入图片描述

这里选择lvgl_v9

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

面板类型可以填写 oled 宽高必须是 390*450

在这里插入图片描述

控件放置

包含的控件及功能

定义好控件的名称，方便后续识别调用。
所有控件位置都可以自定义摆放

控件 使用 名称
文本 电量百分比显示 xiaozhiui_battery_percent
文本 年月日日期显示 xiaozhiui_date
文本 时间的时分显示 xiaozhiui_time
文本 时间的秒数显示 xiaozhiui_second
文本 天气信息显示 xiaozhiui_weather
文本 小智连接状态信息显示 xiaozhiui_connect
进度条 电池电量进度条显示 xiaozhiui_battery
图片 蓝牙连接成功图片 xiaozhiui_ble_Y
图片 蓝牙未连接时显示 xiaozhiui_ble_N
图片 待机界面背景 xiaozhiui_bg

在这里插入图片描述

背景图片显示控件

xiaozhiui_bg设置大小390*450 位置 0，0即可

在这里插入图片描述

蓝牙图标显示控件

xiaozhiui_ble_Y & xiaozhiui_ble_N
图片控件大小位置可以自定义放置
这里将两个图片控件大小设置为 40*40
位置在 X:40 Y:15
将 xiaozhiui_ble_Y 新增 Hidden 让其默认隐藏，方便实现状态切换功能

在这里插入图片描述

时间/电量文本控件

xiaozhiui_time & xiaozhiui_second &xiaozhiui_battery_percent
xiaozhiui_time 中填入文本 00:00 字体大小 80 字体样式设置为 AlexBrush_Regular
xiaozhiui_second中填入文本 00 字体大小设置 16 字体样式设置为 SourceHanSerifSC_Regular
xiaozhiui_battery_percent 中填入文本 100% 字体大小设置 10 字体样式设置为 SourceHanSerifSC_Regular
控件基础属性设置如下

在这里插入图片描述
在这里插入图片描述

xiaozhiui_second 样式属性

在这里插入图片描述

年月日周显示控件

xiaozhiui_date
文本中填入 2025年12月30日 周三 一二三四五六末包含所有可能需要显示的汉字，其他文本的设置也是类似的
同时字体样式选择 SourceHanSerifSC_Regular 只有这个字体样式可以显示中文，否则无法显示
模式选择Warp即可
这里设置显示分为上下两行

在这里插入图片描述
在这里插入图片描述

天气信息/小智连接信息

文本框样式信息如下
模式选择 Circular

在这里插入图片描述

xiaozhiui_connect文本内容

连接中...按键小智...初始化请稍等蓝牙断开PAN成功尝试唤醒重新启正在确保设备开启了共享网络新发起

xiaozhiui_weather 文本内容
这里我只包含了当前所在地区附近的地址，其他未加入的地址显示时会出现 口 ，所以地址需要根据所在地区填入

IP °城市天气温度： 年月日天气雨雪大小中风冰雾沙晴多云转阵雷伴有雹夹暴特冻尘到浮扬强上海黄浦徐汇区长宁静安普陀虹口杨闵行宝山嘉定东新区金山松江青奉贤崇明
电池电量显示

xiazhiui_battery

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运行编译，生成C代码

最后，运行编译，生成C代码即可，生成的C代码在工程目录下查看，我们只需要其中custom & generated中的文件

在这里插入图片描述

在这里插入图片描述

五、小智源代码

当前小智版本为 1.3.5

1、添加生成的代码并修改SConscript文件

添加代码

1、在src目录下添加user_ui文件夹
将GUI_Guider工具生成的代码文件custom和generated文件夹的内容复制放到该目录下。

在这里插入图片描述

修改文件

Src下SConscript文件

add:
	src = src + Glob('./user_ui/*.c') 
    src = src + Glob('./user_ui/guider_customer_fonts*/.c') 
    src = src + Glob('./user_ui/guider_fonts/*.c') 
    src = src + Glob('./user_ui/images/*.c')

在这里插入图片描述

编译验证一下（通过）

在这里插入图片描述

2、引用自定义的界面

修改的文件有：
xiaozhi_ui.c

/* 需要做如下修改的文件有 */

main.c 
xiaozhi_ui.c 
xiaozhi_screen.c 
xiaozhi_websocket.c

/* 加入头文件 */

    #include "./user_ui/gui_guider.h"
    #include "./user_ui/events_init.h"
/* 修改参数 */
/* 修改待机界面 */
/* 并将原 standby_screen 替换成 standby_screen.screen 修改*/
lv_obj_t *standby_screen = NULL; -> lv_ui standby_screen;

xiaozhi_ui.c

这里引用自定义的小智待机界面


lv_obj_t *xiaozhi_standby_screen = NULL; /* 添加背景界面参数，放置小智对话界面 */
xiaozhi_ui_obj_init() 函数
/* 添加初始化代码 */
	setup_ui(&standby_screen);           
    events_init(&standby_screen); 
/* 删除不需要的原待机显示代码 */
编译（报错）

这里报错是正常的，因为空间不够，所以需要清理一些资源，腾出空间

在这里插入图片描述

3、删除文件

删除不需要的图片资源文件
保留了一个cool表情文件，替换后面所有用到的表情，这样小智就只有这一个表情了
保留了开机logo和非待机界面的蓝牙图标和充电显示
删除资源文件，同时也要删除相关代码
xiaozhi_ui.c xiaozhi_ui.h xiaozhi_array.c weather.c

在这里插入图片描述

删除编译文件

在这里插入图片描述

到此为止已经可以显示自定义的UI，但是这还不够，还需要UI界面能够进行实时更新天气时间等信息。

4、显示更新

在src\user_ui目录下添加 xiaozhiui_update.h
对接数据与guider界面控件，在xiaozhi_ui.c中调用相关代码可以实现实时的更新数据

#include <stdio.h>
#include "./../weather/weather.h"
#include "lvgl.h"
#include <stdio.h>
#include "events_init.h"
#include "widgets_init.h"
#include "custom.h"
#include "gui_guider.h"

extern lv_ui standby_screen;                /*小智的待机界面*/
extern date_time_t g_current_time ;         /*当前时间结构体*/
extern weather_info_t g_current_weather;    /*当前天气结构体*/
char battery_percent_str[8];                /*电池电量字符串*/
//time_ui_update_callback
#define TIME_GET xiaozhi_time_get_current(&g_current_time)          /*获取当前时间信息*/

#define Current_Time    g_current_time.time_str                        /*获取当前时间字符串*/   
#define Current_Second  g_current_time.second_str                      /*获取当前秒字符串*/
#define Current_Date    g_current_time.date_str                        /*获取当前日期字符串*/
#define Current_Weather g_current_weather.weather_str                  /*获取当前天气文本信息*/
#define Current_Battery(percent) rt_snprintf(battery_percent_str, sizeof(battery_percent_str), "%d%%", percent) /*获取当前电池电量字符串*/

#define user_ui_time_text_set    lv_label_set_text(standby_screen.screen_xiaozhiui_time, Current_Time)              /*设置时间标签文本*/
#define user_ui_second_text_set  lv_label_set_text(standby_screen.screen_xiaozhiui_second, Current_Second) /*设置秒标签文本*/
#define user_ui_date_text_set    lv_label_set_text(standby_screen.screen_xiaozhiui_date, Current_Date)              /*设置日期标签文本*/
#define user_ui_weather_text_set lv_label_set_text(standby_screen.screen_xiaozhiui_weather, Current_Weather)        /*设置天气标签文本*/
#define user_ui_battery_text_set lv_label_set_text(standby_screen.screen_xiaozhiui_battery_percent, battery_percent_str) /*设置电池标签文本*/
#define user_ui_battery_bar_set(percent) lv_bar_set_value(standby_screen.screen_xiazhiui_battery, percent, LV_ANIM_OFF) /*设置电池进度条值*/
#define user_ui_connect_text_set(connect_text) lv_label_set_text(standby_screen.screen_xiaozhiui_connect, connect_text) /*设置连接标签文本*/

/*蓝牙状态*/
#define user_ui_ble_open lv_obj_clear_flag(standby_screen.screen_xiaozhiui_ble_Y, LV_OBJ_FLAG_HIDDEN); \
                         lv_obj_add_flag(standby_screen.screen_xiaozhiui_ble_N, LV_OBJ_FLAG_HIDDEN);
#define user_ui_ble_close lv_obj_add_flag(standby_screen.screen_xiaozhiui_ble_Y, LV_OBJ_FLAG_HIDDEN); \
                          lv_obj_clear_flag(standby_screen.screen_xiaozhiui_ble_N, LV_OBJ_FLAG_HIDDEN);
/*ui更新*/
#define user_ui_update lv_obj_update_layout(standby_screen.screen)

蓝牙状态更新

在这里插入图片描述

电量显示更新

在这里插入图片描述

小智连接状态文本更新

在这里插入图片描述

更新时间/日期信息

添加/修改格式来适应自定义界面格式

在这里插入图片描述

weather.c下

在这里插入图片描述

xiaozhi_ui.c 下

在这里插入图片描述

天气信息更新

weather.c下

在这里插入图片描述

xiaozhi_ui.c 下

在这里插入图片描述

六、小结

到此为止，一个自定义的且信息可实时更新的小智静态界面就做好了。
由于篇幅限制，我们后期再出，如何自定义动态待机界面背景为动态界面，已经如何优化动态界面显示帧率。
也会附上代码文件和固件。
看看现在编译下载后连接的现象。

请添加图片描述

Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

从小项目到大型鸿蒙 App 的架构变化

avatar 人工智能6S服务平台
cover

HarmonyOS APP＜玩转React＞开源教程一：开发环境搭建与项目创建

avatar 人工智能6S服务平台
cover

边缘AI算力临界点：深度解析176TOPS香橙派AI Station的产业价值

avatar 人工智能6S服务平台