我用STM32MP1做了個疫情監控平臺4—功能完善介面重新設計
阿新 • • 發佈：2020-03-22
@[toc]
### 前言
之前我用STM32MP1和Qt實現了疫情監控平臺，系列教程：
- [我用STM32MP1做了個疫情監控平臺1—交叉編譯環境搭建](https://www.cnblogs.com/whik/p/12430277.html)
- [我用STM32MP1做了個疫情監控平臺2—Qt環境搭建](https://www.cnblogs.com/whik/p/12430281.html)
- [我用STM32MP1做了個疫情監控平臺3—疫情監控平臺實現](https://www.cnblogs.com/whik/p/12430290.html)
- [我用STM32MP1做了個疫情監控平臺4—功能完善介面重新設計](https://www.cnblogs.com/whik/p/12545381.html)
有幸被【**STM32微控制器**】官方公眾號轉發分享，感覺還是很有成就感的。
這週末又把功能進一步完善了一下，介面重新設計等。實際執行介面：
### 介面展示
原來的介面很簡單，只有國內疫情資料展示：
現在的介面：
STM32MP1開發板執行效果：
### 新增功能
- UI重新設計，仿平板介面
- 新增海外疫情資料顯示和國內零病例城市資料顯示
- 新增疫情新聞顯示，使用html模板檔案的方式實現富文字的顯示
- 5分鐘自動更新，可通過開關選擇是否開啟
- 新增IP自動定位功能
- FontAwesome字型圖示庫的使用
- 自定義標題欄按鈕，可點選圖示關閉視窗，手動更新等
### API 介面說明
所使用到的幾個介面地址：
```cpp
根據請求的IP地址，返回定位的城市名稱和經緯度
http://ip-api.com/json/?lang=zh-CN
國內實時疫情資料，新增/確診/疑似/零病例城市等
http://view.inews.qq.com/g2/getOnsInfo?name=disease_h5
海外疫情資料和國內疫情新聞資訊
http://view.inews.qq.com/g2/getOnsInfo?name=disease_other
最新謠言和闢謠資訊，介面未使用，沒有移植openssl，暫時不支援https
https://vp.fact.qq.com/loadmore?page=0
```
### 多個介面資料的獲取和解析
和上一個版本最大的區別就是，上一版只使用了1個API。這次共使用了3個介面地址，而且每個介面地址返回的JSON資料是不同的，所以需要分別get這4個介面地址，然後呼叫不同的JSON解析函式。即每次更新時，apiID=0，先獲取介面1的資料，呼叫介面1的解析函式，然後apiID=1，獲取介面2的資料，呼叫介面2的解析函式，直到apiID=2，所有的資料獲取完畢，不再觸發新的get請求，直到下一次資料更新：
```cpp
/* 資料*/
//IP定位介面
QString apiUrl_0 = "http://ip-api.com/json/?lang=zh-CN";
//國內疫情資料
QString apiUrl_1 = "http://view.inews.qq.com/g2/getOnsInfo?name=disease_h5";
//全球疫情資料和疫情新聞資訊
QString apiUrl_2 = "http://view.inews.qq.com/g2/getOnsInfo?name=disease_other";
/*謠言介面，未使用*/
QString apiUrl_3 = "https://vp.fact.qq.com/loadmore?page=0";
qint8 apiID = 0; //0->3: api_0->api_3
/*以上介面資料對應的解析函式*/
void parseApi_0(QByteArray str);
void parseApi_1(QByteArray str);
void parseApi_2(QByteArray str);
/*謠言資訊解析，未使用*/
void parseApi_3(QByteArray str);
```
由於板子上的系統還沒有移植openssl，所以不支援https的介面地址，api3在實際中沒有使用。
IP定位介面返回的JSON資料：
解析函式：
```cpp
void Dialog::parseApi_0(QByteArray str)
{
cJSON *root_obj;
root_obj = cJSON_Parse(str);
if(!root_obj)
qDebug() << "ip api error";
else
{
QString status = cJSON_GetObjectItem(root_obj, "status")->valuestring;
qDebug() << status;
if(status == "success")
{
QString city = cJSON_GetObjectItem(root_obj, "city")->valuestring;
QString query = cJSON_GetObjectItem(root_obj, "query")->valuestring;
qDebug() << city << query;
}
}
cJSON_Delete(root_obj);
}
```
其他介面JSON資料的解析，都是差不多的，這裡不再贅述。
### FontAwesome字型圖示庫的使用
在這次新版本中，我首次使用了FontAwesome字型圖示庫，圖示顯示效果：
使用起來非常方便，簡單。首先把圖示庫裡的ttf字型檔案新增到Qt工程裡，通過以下程式碼實現圖示顯示。
使用方法可以參考：[Qt字型圖示庫fontawesome和pixeden使用示例](https://blog.csdn.net/whik1194/article/details/104752665)
標籤或者按鈕新增圖示背景：
```cpp
#