I used STM32MP1 to build an epidemic monitoring platform 4—Function improvement and interface redesign

ohahaha

I used STM32MP1 to build an epidemic monitoring platform 4—Function improvement and interface redesign [Copy link]

1. Introduction

Previously, I used STM32MP1 and Qt to implement an epidemic monitoring platform. Fortunately, it was forwarded and shared by the official public account of [STM32 Microcontroller]. I felt very accomplished.

This weekend, we further improved the functions and redesigned the interface. The actual running interface is as follows:

2. Interface display

The original interface was very simple, with only domestic epidemic data displayed:

The current interface:

STM32MP1 development board running effect:

3. New features

• UI redesign, imitating tablet interface
• New overseas epidemic data and domestic zero-case city data show
• Added epidemic news display, using html template files to display rich text
• Automatic update every 5 minutes, you can choose whether to turn it on or off by switching on
• Added IP automatic positioning function
• Use of FontAwesome font icon library
• Customize title bar buttons, click icons to close windows, update manually, etc.

4. API interface description

Several interface addresses used:

根据请求的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. Acquisition and parsing of multiple interface data

The biggest difference from the previous version is that the previous version only used 1 API. This time, 3 interface addresses are used, and the JSON data returned by each interface address is different, so you need to get these 4 interface addresses separately, and then call different JSON parsing functions. That is, every time an update is made, apiID=0, first get the data of interface 1, call the parsing function of interface 1, then apiID=1, get the data of interface 2, call the parsing function of interface 2, until apiID=2, all data is obtained, and no new get request is triggered until the next data update:

 /* 数据*/
	//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); 

Since the system on the board has not yet ported openssl, it does not support the https interface address and api3 is not used in practice.

JSON data returned by the IP positioning interface:

Parsing function:

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);
} 

The parsing of JSON data of other interfaces is similar and will not be repeated here.

6. Use of FontAwesome font icon library

In this new version, I used the FontAwesome font icon library for the first time. The icon display effect is:

It is very convenient and simple to use. First, add the ttf font file in the icon library to the Qt project, and use the following code to display the icon.

For usage, please refer to: Qt font icon library fontawesome and pixeden usage examples

Add an icon background to a label or button:

#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 is the code corresponding to the icon, which can be found on the official website. Currently, the icon library includes 675 icons, and they are vector, which means that they can be scaled at will without worrying about unclearness, and the size and color can be set in the code.

There are other similar icon libraries like pixeden. The icons in pixeden are richer and already classified, but there are fewer free ones and more paid ones.

7. Code Download

The entire Qt project code has been open source. If you have already followed my official account (ID: mcu149), you can reply STM32MP1 in the background, and I will send you the Qt project source code. The code is compatible with Qt4/Qt5.

Of course, you can also get the latest Qt project on the following open source platforms:

https://gitee.com/whik/qte_2019_ncov

This article is from Mir Technology. Please indicate the source when reprinting.

w494143467

Very cool! I also want to play with STM32MP1, but unfortunately I don't have the opportunity to touch the development board.