前言

前几天不是刚发布小安派Eyes-S1/S2两款开源的板子，于是就有大佬问了，我们那两款板子怎么玩？

小安派Eyes是一款带触摸屏+音频+摄像头的一款开发板，最近刚好桌面少了个摆件，我就打算先从最容易也最有意思的屏幕下手，搞一个天气站。

一、功能分析

我这里使用的UI上位机是NXP的GuiGuider软件，官方下载地址：https://www.nxp.com.cn/design/software/development-software/gui-guider:GUI-GUIDER
也可以到本文尾部连接下载资料包，里面有GuiGuider 软件及本次项目的GuiGuider 工程。

二、Gui Guider模拟运行结果

三、UI 代码移植

1.文件移植

因为在此之前，我们已经把屏幕和触摸的驱动写好了，并且在LVGL 下测试成功，所以本文不会介绍Lvgl 的移植。Gui Guider 在成功运行之后，才会生成最新的UI代码。需要移植的程序代码如下：

以上连个文件夹复制到工程的UI位置：Ai-Pi_Eeys/demos/240X320_ui。
因为M6X_SDK中的Lvgl没有dclock 时钟组件，所以也要把dclock 移植到SDK当中。dclock的目录如下:M6x_Eyes\lvgl\src\extra\widgets

把整个dclock文件夹复制到：Ai-Pi_Eeys\aithinker_Ai-M6X_SDK\components\graphics\lvgl\extra\widgets目录下。

2.代码修改

1)工程添加UI代码

只需要在CMakeLists.txt 中添加以下内容:

file(GLOB_RECURSE SOURCES "custom/*.c" "guider_fonts/*.c" "images/*.c" "./*.c")
sdk_add_include_directories(.)

add_library(ui ${
    
    SOURCES})

• 然后在main.c中引用gui_guider.h和custom.h,并定义lv_ui全局变量，且使用setup_ui() 函数进行初始化：

lv_ui guider_ui;

int main(void)
{
    
    
//..... 其他代码
 	lv_log_register_print_cb(lv_log_print_g_cb);
    lv_init();
    lv_port_disp_init();
    lv_port_indev_init();

    setup_ui(&guider_ui);

    printf("lv_task_handler\r\n");
    // lv_task_handler();
    custom_init(&guider_ui);
    printf("lvgl success\r\n");
}

2)HTTPS GET请求及时间获取

• 然后随手把HTTPS请求天气的逻辑实现一下，大概就是写一个HTTPS的客户端，然后发送请求，时间可以在响应头中获取，Date参数中获取，北京时间只要把小时+8就OK，比如：
• 天气情况获取，我们这里使用的是天气API的免费未来七天天气接口：http://www.tianqiapi.com/index/doc?version=week
  请求数据如下：

{
    
    
	"nums": 6,
	"cityid": "101280601",
	"city": "深圳",
	"update_time": "2023-06-27 20:31:40",
	"data": [
		{
    
    
			"date": "2023-06-27",
			"wea": "小雨转阵雨",
			"wea_img": "yu",
			"tem_day": "32",
			"tem_night": "26",
			"win": "南风",
			"win_speed": "3-4级转<3级"
		},
		{
    
    
			"date": "2023-06-28",
			"wea": "阵雨",
			"wea_img": "yu",
			"tem_day": "33",
			"tem_night": "26",
			"win": "无持续风向",
			"win_speed": "<3级"
		},
		{
    
    
			"date": "2023-06-29",
			"wea": "阵雨",
			"wea_img": "yu",
			"tem_day": "33",
			"tem_night": "27",
			"win": "无持续风向",
			"win_speed": "<3级"
		},
		{
    
    
			"date": "2023-06-30",
			"wea": "阵雨转多云",
			"wea_img": "yun",
			"tem_day": "34",
			"tem_night": "28",
			"win": "无持续风向",
			"win_speed": "<3级"
		},
		{
    
    
			"date": "2023-07-01",
			"wea": "多云转阵雨",
			"wea_img": "yun",
			"tem_day": "34",
			"tem_night": "27",
			"win": "无持续风向",
			"win_speed": "<3级"
		},
		{
    
    
			"date": "2023-07-02",
			"wea": "阵雨",
			"wea_img": "yu",
			"tem_day": "33",
			"tem_night": "26",
			"win": "无持续风向",
			"win_speed": "<3级"
		},
		{
    
    
			"date": "2023-07-03",
			"wea": "阵雨",
			"wea_img": "yu",
			"tem_day": "32",
			"tem_night": "27",
			"win": "无持续风向",
			"win_speed": "<3级"
		}
	]
}

所以天气站最高可以显示未来七天的天气情况，我们只显示未来三天的数据。

3)WiFi 连接功能

天气站使用的屏幕是电容触摸屏，所以可以通过触摸输入WiFi 名称及密码连接WiFi。当我们输入完成后，点击确定按钮即可触发WiFi连接，天气站在连接成功WiFi之后，会保存当前的路由信息，下次重启时可以自动连接这次的WiFi。按钮的点击事件及读取输入的WiFi名称及密码代码：

static void WiFi_config_btn_1_event_handler(lv_event_t* e)
{
    
    
	lv_event_code_t code = lv_event_get_code(e);
	lv_ui* ui = lv_event_get_user_data(e);
	char* buff = NULL;
	switch (code)
	{
    
    
		case LV_EVENT_CLICKED:
		{
    
    
			buff = pvPortMalloc(256);
			if (lv_textarea_get_text(ui->WiFi_config_ta_1)==NULL) {
    
    
				printf("SSID is NULL,please enter");
				break;
			}
			// printf("%s:ssid:%s  password:%s\r\n", __func__, lv_textarea_get_text(ui->WiFi_config_ta_1), lv_textarea_get_text(ui->WiFi_config_ta_2));
			memset(ui->ssid, 0, 32);
			memset(ui->password, 0, 64);
			strcpy(ui->ssid, lv_textarea_get_text(ui->WiFi_config_ta_1));
			strcpy(ui->password, lv_textarea_get_text(ui->WiFi_config_ta_2));
			sprintf(buff, "{\"WiFi\":{\"ssid\":\"%s\",\"password\":\"%s\"}}", lv_textarea_get_text(ui->WiFi_config_ta_1), lv_textarea_get_text(ui->WiFi_config_ta_2));
			xQueueSend(queue, (void*)buff, portMAX_DELAY);
			vPortFree(buff);
		}
		break;
		default:
			break;
	}
}

四、实际运行

五、总结

个人觉得这个花了一天开发出来的天气站单纯从界面还是可以的，它就是少了个美丽的外壳。个人的想法有限，不知道大家有什么好的想法，说不定我们可以帮你实现呢？

六、资料

安信可官网docs：https://docs.ai-thinker.com/wifi
M6x-SDK编程指南：https://bouffalolab.github.io/bl_iot_sdk
小安派-Eyes天气站源码(记得看README)：https://github.com/Ai-Thinker-Open/Ai-Pi_Eeys/tree/AiPi-Eyes_Weather
小安派-Eyes天气站其他资料包地址：https://docs.ai-thinker.com/eyes