我用STM32MP1做了个疫情监控平台4—功能完善界面重新设计
whik 人气:0
@[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://blog.csdn.net/whik1194/articlehttps://img.qb5200.com/download-x/details/105025720)
有幸被【**STM32单片机**】官方公众号转发分享,感觉还是很有成就感的。
![](https://img-blog.csdnimg.cn/20200322121749930.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doaWsxMTk0,size_16,color_FFFFFF,t_70)
这周末又把功能进一步完善了一下,界面重新设计等。实际运行界面:
![](https://img-blog.csdnimg.cn/20200322122137742.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doaWsxMTk0,size_16,color_FFFFFF,t_70)
### 界面展示
原来的界面很简单,只有国内疫情数据展示:
![](https://img-blog.csdnimg.cn/20200322122205627.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doaWsxMTk0,size_16,color_FFFFFF,t_70)
现在的界面:
![](https://img-blog.csdnimg.cn/20200322122220417.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doaWsxMTk0,size_16,color_FFFFFF,t_70)
STM32MP1开发板运行效果:
![](https://img-blog.csdnimg.cn/20200322122238178.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doaWsxMTk0,size_16,color_FFFFFF,t_70)
### 新增功能
- 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数据:
![](https://img-blog.csdnimg.cn/20200322122259865.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doaWsxMTk0,size_16,color_FFFFFF,t_70)
解析函数:
```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字体图标库,图标显示效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200322122532590.jpg)
使用起来非常方便,简单。首先把图标库里的ttf字体文件添加到Qt工程里,通过以下代码实现图标显示。
使用方法可以参考:[Qt字体图标库fontawesome和pixeden使用示例](https://blog.csdn.net/whik1194/articlehttps://img.qb5200.com/download-x/details/104752665)
标签或者按钮添加图标背景:
```cpp
#include
加载全部内容