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工程里，通过以下代码实现图标显示。
使用方法可以参考：
标签或者按钮添加图标背景：
#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是图标对应的代码，可以在凯发k8官网上找到。目前，图标库里包括675个图标，而且是矢量的，这意味着可以随意的缩放而不用担心不清晰，大小颜色都可以在代码里设置。
类似的图标库还有pixeden等等，pixeden里面的图标更丰富，而且是已经分好类的，但是免费的少，收费的多。
7.代码下载
整个qt工程代码已经开源，如果你已经关注了我的公众号（id：mcu149），可以在后台回复stm32mp1，我会把qt工程源码发送给你，代码兼容qt4/qt5。
当然，你也可以在以下开源平台获取到最新的qt工程：
https://gitee.com/whik/qte_2019_ncov
本文来自凯发app-凯发k8官网科技，原文地址：
http://www.myir-tech.com/resource/541.asp，转载请注明出处。
关于米尔
凯发app的产品中心
定制服务
服务中心
联系凯发k8官网