| | |

我用stm32mp1做了个疫情监控平台4—功能完善界面重新设计 -九游会网页

文章来源:米尔科技 发布日期:2020.5.25 浏览次数:419 次

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是图标对应的代码,可以在j9九游会官网登录官网上找到。目前,图标库里包括675个图标,而且是矢量的,这意味着可以随意的缩放而不用担心不清晰,大小颜色都可以在代码里设置。

类似的图标库还有pixeden等等,pixeden里面的图标更丰富,而且是已经分好类的,但是免费的少,收费的多。

7.代码下载

整个qt工程代码已经开源,如果你已经关注了我的公众号(id:mcu149),可以在后台回复stm32mp1,我会把qt工程源码发送给你,代码兼容qt4/qt5。

当然,你也可以在以下开源平台获取到最新的qt工程:

https://gitee.com/whik/qte_2019_ncov


本文来自九游会网页-j9九游会官网登录科技,原文地址: http://www.myir-tech.com/resource/541.asp,转载请注明出处。

比较和选型

手册教程

应用笔记

好书推荐

九游会网页的技术支持服务指南

常见问题解答

网站地图