摘要
本次參加HMI-Boardt挑戰(zhàn)賽,提交的作品是天氣萬(wàn)年歷,實(shí)現(xiàn)的功能主要有以下幾點(diǎn):
顯示當(dāng)前的日期,包括年月日,本地時(shí)間等信息;
顯示當(dāng)前的天氣、溫度等信息;
選擇該項(xiàng)目的主要原因是該項(xiàng)目涉及到了Wifi、http客戶(hù)端、網(wǎng)絡(luò)數(shù)據(jù)抓取等,屬于典型的物聯(lián)網(wǎng)應(yīng)用,同時(shí)天氣日歷的邏輯很簡(jiǎn)單,很適合作為初學(xué)者的入門(mén)項(xiàng)目,能夠接觸到物聯(lián)網(wǎng)開(kāi)發(fā)的各個(gè)關(guān)鍵組件,配合RT-Thread豐富的生態(tài),在培養(yǎng)興趣的同時(shí),可以將書(shū)本上的知識(shí)轉(zhuǎn)化為貼近生活的實(shí)際應(yīng)用。
1.1 程序整體介紹
本項(xiàng)目使用到的外設(shè)主要有TFT屏幕、RTC模塊、RW007Wifi模塊。
屏幕的分辨率為480x272,屏幕上顯示的信息包括當(dāng)前月份的日歷(以邊框形式在日歷中顯示當(dāng)天的信息)、城市、溫度、天氣以及時(shí)間信息。程序的整體流程如下所示
項(xiàng)目中使用到的軟件包如下所示:
項(xiàng)目中的代碼主要集中在hal_entry.c以及lvgl_demo.c中,具體的文件分布如下圖所示:
1.2 模塊說(shuō)明
1.2.1 顯示部分
RT-Thread提供的HMI-Board的SDK中已經(jīng)為用戶(hù)編寫(xiě)了顯示和觸摸的驅(qū)動(dòng)程序,同時(shí)lvgl中以為RT-Thread做了適配,在RT-Thread的啟動(dòng)序列中添加了lvgl線程的創(chuàng)建、調(diào)用lvgl初始化以及初始外設(shè)的函數(shù),用戶(hù)只需要編寫(xiě)lv_user_gui_init函數(shù),設(shè)計(jì)應(yīng)用相關(guān)的代碼即可。
本項(xiàng)目的顯示代碼如下。
//導(dǎo)入額外的字體
LV_FONT_DECLARE(font_calendar_han_bold_20);
/* display demo; you may replace with your LVGL application at here */
//設(shè)定城市信息標(biāo)簽的外觀和位置
city_label=lv_label_create(lv_scr_act());
lv_obj_set_style_text_font(city_label,&font_calendar_han_bold_20,0);
//lv_label_set_text(city_label, weather_data.name);
lv_obj_set_pos(city_label, 10,5);
//設(shè)定溫度信息標(biāo)簽的外觀和位置
temp_label=lv_label_create(lv_scr_act());
lv_obj_set_style_text_font(temp_label,&font_calendar_han_bold_20,0);
//lv_label_set_text(temp_label, weather_data.temp);
lv_obj_set_pos(temp_label, 10, 30);
//設(shè)定天氣信息標(biāo)簽的外觀和位置
weather_label=lv_label_create(lv_scr_act());
lv_obj_set_style_text_font(weather_label,&font_calendar_han_bold_20,0);
//abel_set_text(weather_label, weather_data.text);
lv_obj_set_pos(weather_label, 90, 30);
//創(chuàng)建時(shí)間標(biāo)簽控件,用于顯示當(dāng)前的時(shí)間信息
time_label=lv_label_create(lv_scr_act());
lv_obj_set_style_text_font(time_label,&font_calendar_han_bold_20,0);
lv_label_set_text(time_label, time_label_text);
lv_obj_set_pos(time_label, 10, 55);
//設(shè)定日歷控件的外觀和位置
calendar = lv_calendar_create(lv_scr_act());
lv_obj_set_x(calendar,10);
lv_obj_set_y(calendar,80);
lv_obj_set_size(calendar, 185, 185);
lv_obj_add_event_cb(calendar, event_handler, LV_EVENT_ALL, NULL);
lv_calendar_set_today_date(calendar, 2021, 02, 23);
lv_calendar_set_showed_date(calendar, 2021, 02);
/*Highlight a few days*/
static lv_calendar_date_t highlighted_days[3]; /*Only its pointer will be saved so should be static*/
highlighted_days[0].year = 2021;
highlighted_days[0].month = 02;
highlighted_days[0].day = 6;
highlighted_days[1].year = 2021;
highlighted_days[1].month = 02;
highlighted_days[1].day = 11;
highlighted_days[2].year = 2022;
highlighted_days[2].month = 02;
highlighted_days[2].day = 22;
lv_calendar_set_highlighted_dates(calendar, highlighted_days, 3);
#if LV_USE_CALENDAR_HEADER_DROPDOWN
lv_calendar_header_dropdown_create(calendar);
#elif LV_USE_CALENDAR_HEADER_ARROW
lv_calendar_header_arrow_create(calendar);
#endif
lv_calendar_set_showed_date(calendar, 2021, 10);
為了在屏幕上顯示中文,首先準(zhǔn)備需要用到的字體文件(項(xiàng)目中使用的是),在lvgl官方提供的字體轉(zhuǎn)換工具中,根據(jù)自己的需要對(duì)字體的大小和字符集進(jìn)行選擇,最后得到字體文件,添加到項(xiàng)目中,使用lvgl的字體導(dǎo)入命令將要使用的字體導(dǎo)入,在需要使用的控件上使用該字體即可。
項(xiàng)目的界面效果如圖所示。
1.2.2 Wifi連接、NTP校時(shí)部分
開(kāi)發(fā)板上帶有RW007Wifi模塊,通過(guò)其可以連接到互聯(lián)網(wǎng),從而可以獲取互聯(lián)上提供的信息服務(wù),比如NTP(網(wǎng)絡(luò)時(shí)間協(xié)議)用于更新本地的RTC時(shí)間。
根據(jù)HMI-Board指南中的RW007模塊使用,開(kāi)啟RW007模塊的Wifi通訊功能,調(diào)用rt_wlan_connect函數(shù)連接到指定的Wifi,從而可以方位互聯(lián)網(wǎng)服務(wù)。
開(kāi)啟物聯(lián)網(wǎng)服務(wù)中的NTP服務(wù)和本地的RTC服務(wù),可以通過(guò)訪問(wèn)NTP服務(wù)器,從而獲取網(wǎng)絡(luò)時(shí)間,對(duì)本地的時(shí)間進(jìn)行校準(zhǔn)。
相關(guān)的代碼如下所示:
rt_device_t device = RT_NULL;
//連接到指定的Wifi
app_connect_wifi();
/*尋找設(shè)備*/
device = rt_device_find(RTC_NAME);
if (!device)
{
rt_kprintf("find %s failed!", RTC_NAME);
return;
}
/*初始化RTC設(shè)備*/
if(rt_device_open(device, 0) != RT_EOK)
{
rt_kprintf("open %s failed!", RTC_NAME);
return;
}
//同步NTP到RTC
while(!ntp_sync_to_rtc(RT_NULL));
rt_sem_release(time_sync);
lvgl中提供了定時(shí)功能,初始化定時(shí)器后,設(shè)定定時(shí)器的回調(diào)函數(shù)以及尋魂次數(shù)(這里參數(shù)給-1,表示無(wú)限循環(huán)),回調(diào)函數(shù)用于更新時(shí)間以及發(fā)送獲取天氣信息的信號(hào)量,具體代碼如下:
sec_timer=lv_timer_create(sec_timer_cb, 500, NULL);
lv_timer_set_repeat_count(sec_timer, -1);
void sec_timer_cb(lv_timer_t* timer)
{
static uint16_t count=0;
count++;
app_get_time();
lv_label_set_text(time_label, time_label_text);
if(count==1800)
{
count=0;
rt_sem_release(get_weather);
}
}
1.2.3 獲取天氣信息并提取相應(yīng)的信息
在main中hal_entry函數(shù)中,獲取到訪問(wèn)天氣數(shù)據(jù)的信號(hào)量后,創(chuàng)建WebClient,通過(guò)心知天氣的API訪問(wèn)當(dāng)前的天氣信息,數(shù)據(jù)形式為JSON字符,根據(jù)官方提供的數(shù)據(jù)格式,對(duì)其中的數(shù)據(jù)進(jìn)行解析,提取出相應(yīng)的字段,用于在標(biāo)簽控件上顯示信息。相關(guān)的代碼如下所示:
#define GET_HEADER_BUFSZ 1024 //頭部大小
#define GET_RESP_BUFSZ 1024 //響應(yīng)緩沖區(qū)大小
static char *weather_url = "http://api.seniverse.com/v3/weather/now.json?key=SG-nLPzA3pyLEy9Tw&location=wuxi&language=zh-Hans&unit=c";
weather_t weather_data;
/* 天氣數(shù)據(jù)解析 */
void weather_data_parse(rt_uint8_t *data)
{
cJSON *root = RT_NULL, *array=RT_NULL,*object = RT_NULL, *element=RT_NULL, *item=RT_NULL;
memset(&weather_data,0,sizeof(weather_data));
root = cJSON_Parse((const char *)data);
if (!root)
{
rt_kprintf("No memory for cJSON root!n");
return;
}
//獲取結(jié)果對(duì)象
array = cJSON_GetObjectItem(root, "results");
//獲取數(shù)組中的第一個(gè)元素
object = cJSON_GetArrayItem(array, 0);
//提取location的信息
element=cJSON_GetObjectItem(object,"location");
item=cJSON_GetObjectItem(element,"id");
memcpy(weather_data.id,item->valuestring,strlen(item->valuestring));
item=cJSON_GetObjectItem(element,"name");
memcpy(weather_data.name,item->valuestring,strlen(item->valuestring));
item=cJSON_GetObjectItem(element,"country");
memcpy(weather_data.country,item->valuestring,strlen(item->valuestring));
item=cJSON_GetObjectItem(element,"path");
memcpy(weather_data.country,item->valuestring,strlen(item->valuestring));
item=cJSON_GetObjectItem(element,"timezone");
memcpy(weather_data.country,item->valuestring,strlen(item->valuestring));
item=cJSON_GetObjectItem(element,"tz_offset");
memcpy(weather_data.country,item->valuestring,strlen(item->valuestring));
//提取當(dāng)前的天氣信息
element=cJSON_GetObjectItem(object,"now");
item=cJSON_GetObjectItem(element,"text");
memcpy(weather_data.text,item->valuestring,strlen(item->valuestring));
item=cJSON_GetObjectItem(element,"code");
memcpy(weather_data.code,item->valuestring,strlen(item->valuestring));
item=cJSON_GetObjectItem(element,"temperature");
memcpy(weather_data.temp,item->valuestring,strlen(item->valuestring));
//提取上次天氣更新的時(shí)間信息
element=cJSON_GetObjectItem(object,"last_update");
memcpy(weather_data.last_update,element->valuestring,strlen(element->valuestring));
if (root != RT_NULL)
cJSON_Delete(root);
}
void weather(void)
{
rt_uint8_t *buffer = RT_NULL;
int resp_status;
struct webclient_session *session = RT_NULL;
int content_length = -1, bytes_read = 0;
int content_pos = 0;
/* 創(chuàng)建會(huì)話(huà)并且設(shè)置響應(yīng)的大小 */
session = webclient_session_create(GET_HEADER_BUFSZ);
if (session == RT_NULL)
{
rt_kprintf("No memory for get header!n");
goto __exit;
}
/* 發(fā)送 GET 請(qǐng)求使用默認(rèn)的頭部 */
if ((resp_status = webclient_get(session, weather_url)) != 200)
{
rt_kprintf("webclient GET request failed, response(%d) error.n", resp_status);
goto __exit;
}
/* 分配用于存放接收數(shù)據(jù)的緩沖 */
buffer = rt_calloc(1, GET_RESP_BUFSZ);
if (buffer == RT_NULL)
{
rt_kprintf("No memory for data receive buffer!n");
goto __exit;
}
content_length = webclient_content_length_get(session);
if (content_length < 0)
{
/* 返回的數(shù)據(jù)是分塊傳輸?shù)? */
do
{
bytes_read = webclient_read(session, buffer, GET_RESP_BUFSZ);
if (bytes_read <= 0)
{
break;
}
}while (1);
}
else
{
do
{
bytes_read = webclient_read(session, buffer,
content_length - content_pos > GET_RESP_BUFSZ ?
GET_RESP_BUFSZ : content_length - content_pos);
if (bytes_read <= 0)
{
break;
}
content_pos += bytes_read;
}while (content_pos < content_length);
}
/* 天氣數(shù)據(jù)解析 */
weather_data_parse(buffer);
__exit:
/* 關(guān)閉會(huì)話(huà) */
if (session != RT_NULL)
webclient_close(session);
/* 釋放緩沖區(qū)空間 */
if (buffer != RT_NULL)
rt_free(buffer);
}
-
物聯(lián)網(wǎng)
+關(guān)注
關(guān)注
2927文章
45900瀏覽量
388216 -
GUI
+關(guān)注
關(guān)注
3文章
677瀏覽量
40760 -
WLAN技術(shù)
+關(guān)注
關(guān)注
0文章
23瀏覽量
9380 -
wifi模塊
+關(guān)注
關(guān)注
60文章
386瀏覽量
74697 -
RT-Thread
+關(guān)注
關(guān)注
32文章
1370瀏覽量
41524
發(fā)布評(píng)論請(qǐng)先 登錄
為全志D1開(kāi)發(fā)板移植LVGL日歷控件和顯示天氣
飛雪桌面日歷 V6.5.0 官方版
天氣預(yù)警收音機(jī)方案
DIY電子日歷
項(xiàng)目源碼--Android天氣日歷精致UI源碼
項(xiàng)目源碼--Android天氣日歷精致UI源碼
樹(shù)莓派多功能數(shù)碼壁掛日歷
RENESAS的相關(guān)資料推薦
360攜手HarmonyOS打造獨(dú)特的“天氣大師”
基于靜態(tài)分析的Android GUI遍歷方法

日歷列表視圖控件使用案例
基于STM32設(shè)計(jì)的指針式電子鐘與日歷

二三極管在電子日歷產(chǎn)品中的應(yīng)用
開(kāi)發(fā)活動(dòng) | 嵌入式GUI挑戰(zhàn)賽報(bào)名開(kāi)啟!參賽申領(lǐng)開(kāi)發(fā)板

嵌入式GUI挑戰(zhàn)賽獲獎(jiǎng)名單公布!

評(píng)論