我用STM32MP1作了個疫情監控平臺4—功能完善界面從新設計

@[toc]

前言

以前我用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

系列教程

• 我用STM32MP1作了個疫情監控平臺1—交叉編譯環境搭建
• 我用STM32MP1作了個疫情監控平臺2—Qt環境搭建
• 我用STM32MP1作了個疫情監控平臺3—疫情監控平臺實現
• 我用STM32MP1作了個疫情監控平臺4—功能完善界面從新設計

原文出處：https://www.cnblogs.com/whik/p/12545381.html