@
前言
之前我用STM32MP1和Qt實現了疫情監控平台，系列教程：
- 我用STM32MP1做了個疫情監控平台1—交叉編譯環境搭建
- 我用STM32MP1做了個疫情監控平台2—Qt環境搭建
- 我用STM32MP1做了個疫情監控平台3—疫情監控平台實現
- 我用STM32MP1做了個疫情監控平台4—功能完善界面重新設計
有幸被【STM32單片機】官方公眾號轉發分享，感覺還是很有成就感的。
這周末又把功能進一步完善了一下，界面重新設計等。實際運行界面：
界面展示
原來的界面很簡單，只有國內疫情數據展示：
現在的界面：
STM32MP1開發板運行效果：
新增功能
- UI重新設計，仿平板界面
- 新增海外疫情數據顯示和國內零病例城市數據顯示
- 新增疫情新聞顯示，使用html模板文件的方式實現富文本的顯示
- 5分鍾自動更新，可通過開關選擇是否開啟
- 新增IP自動定位功能
- FontAwesome字體圖標庫的使用
- 自定義標題欄按鈕，可點擊圖標關閉窗口，手動更新等
API 接口說明
所使用到的幾個接口地址：
根據請求的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請求，直到下一次數據更新：
/* 數據*/
//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數據：
解析函數：
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使用示例
標簽或者按鈕添加圖標背景：
#include <QFontDatabase>
void MainWindow::iconDemo()
{
//fontawesome-webfont.ttf圖標庫示例
//http://www.fontawesome.com.cn/
int fontId_fws = QFontDatabase::addApplicationFont(":/icon/fontawesome-webfont.ttf");
QString fontName_fws = QFontDatabase::applicationFontFamilies(fontId_fws).at(0);
QFont iconFont_fws = QFont(fontName_fws);
iconFont_fws.setPixelSize(50); //設置圖標大小
//標簽添加圖標背景
ui->lbe_fws->setFont(iconFont_fws);
ui->lbe_fws->setText(QChar(0xf185)); //圖標ID
ui->lbe_fws->setStyleSheet("color: rgb(255, 0, 0);");
//按鈕添加圖標北京
ui->btn_fws->setFont(iconFont_fws);
ui->btn_fws->setText(QChar(0xf0e7)); //圖標ID
ui->btn_fws->setStyleSheet("color: rgb(0, 255, 0);");
}
其中0xf0e7是圖標對應的代碼，可以在官網上找到。目前，圖標庫里包括675個圖標，而且是矢量的，這意味着可以隨意的縮放而不用擔心不清晰，大小顏色都可以在代碼里設置。
類似的圖標庫還有pixeden等等，pixeden里面的圖標更豐富，而且是已經分好類的，但是免費的少，收費的多。
代碼下載
整個Qt工程代碼已經開源，如果你已經關注了我的公眾號（ID：mcu149），可以在后台回復STM32MP1，我會把Qt工程源碼發送給你，代碼兼容Qt4/Qt5。
當然，你也可以在以下開源平台獲取到最新的Qt工程：
https://gitee.com/whik/qte_2019_ncov