米爾科技提醒您:您的瀏覽器版本過低或者使用了兼容模式,為了獲得更好的瀏覽體驗,建議使用IE10以上的瀏覽器或使用極速模式。 請升級瀏覽器以獲得更好的體驗!

  • <nav id="2cqek"><option id="2cqek"></option></nav>
  • 我用STM32MP1做了個疫情監控平臺4—功能完善界面重新設計

    文章來源:米爾科技 發布日期:2020.5.25 瀏覽次數:3138

    1.前言

    之前我用STM32MP1和Qt實現了疫情監控平臺,有幸被【STM32單片機】官方公眾號轉發分享,感覺還是很有成就感的。

    這周末又把功能進一步完善了一下,界面重新設計等。實際運行界面:

    2.界面展示

    原來的界面很簡單,只有國內疫情數據展示:

    現在的界面:

    STM32MP1開發板運行效果:

    3.新增功能

    • UI重新設計,仿平板界面
    • 新增海外疫情數據顯示和國內零病例城市數據顯示
    • 新增疫情新聞顯示,使用html模板文件的方式實現富文本的顯示
    • 5分鐘自動更新,可通過開關選擇是否開啟
    • 新增IP自動定位功能
    • FontAwesome字體圖標庫的使用
    • 自定義標題欄按鈕,可點擊圖標關閉窗口,手動更新等

    4.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 

    5.多個接口數據的獲取和解析

    和上一個版本最大的區別就是,上一版只使用了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數據的解析,都是差不多的,這里不再贅述。

    6. FontAwesome字體圖標庫的使用

    在這次新版本中,我首次使用了FontAwesome字體圖標庫,圖標顯示效果:在這里插入圖片描述

    使用起來非常方便,簡單。首先把圖標庫里的ttf字體文件添加到Qt工程里,通過以下代碼實現圖標顯示。

    使用方法可以參考:Qt字體圖標庫fontawesome和pixeden使用示例

    標簽或者按鈕添加圖標背景:

    #include  
    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里面的圖標更豐富,而且是已經分好類的,但是免費的少,收費的多。

    7.代碼下載

    整個Qt工程代碼已經開源,如果你已經關注了我的公眾號(ID:mcu149),可以在后臺回復STM32MP1,我會把Qt工程源碼發送給你,代碼兼容Qt4/Qt5。

    當然,你也可以在以下開源平臺獲取到最新的Qt工程:

    https://gitee.com/whik/qte_2019_ncov


    本文來自米爾科技,原文地址: http://www.www.zimajie.com/resource/541.asp,轉載請注明出處。

    亚洲综合在线另类社区奇米_在线视频国产欧美另类_午夜神器看大片爽免费_多人做人爱A片免费视频_日本美女_一级a做爰片视频美国_日本免费视频 2021在线观看免费国语完整版_奇米第四色在线影院_图片区小说区 另类图片_色偷偷男人的天堂a v_色五月丁香五月综合五月_五福影院学生在线看 天天爽天天摸天天碰_哥哥去哥哥干_乱人伦中文视频在线_亚洲色偷自拍高清视频_制服丝袜中文字幕_久久精品视频在线看99热官网_撸管专用图 日日摸夜夜添夜夜添爱_国产 精品 自在 线免费_国产精品自拍_色爱图图网_精品国产美女福到在线不卡_悠悠资源AV男人免费站_久草色费视频免费播放在线 奇米影视777四色米奇影院_啪影院免费线观看视频_欧美在线看欧美视频免费_在线萝福利莉视频网站_91精品国产在线观看_欧美日韩视频在线观看亚洲 亚洲天天做日日做天天欢_奇米影视_亚洲一日韩欧美中文字幕在线_亚洲日韩视频在线看观看_日本无码中文_久久综合九色综合欧美_青娱乐在线