【STM32MP135F-DK】9-Network evaluation, using QT to display network weather

qiao---

【STM32MP135F-DK】9-Network evaluation, using QT to display network weather [Copy link]

We have successfully transplanted Qt before, and now we can develop the Qt interface. In this evaluation, I plan to test the network function of the board, and the main method of evaluation is to use the online API to obtain the network weather and finally display it on Qt.

1. Find an API that can get the weather online

I used the following link http://query.asilu.com/weather/baidu/ . When we enter this link, a series of JSON data will be displayed, as shown below. What we need to do is to parse the following JSON data

2. Create a Qt project

We open the qtCreator under the Linux virtual machine, and the project creation mode can be based on my previous evaluation [STM32MP135F-DK] 7-Deploy QT development environment + run the first QT program https://en.eeworld.com/bbs/thread-1267168-1-1.html .

We add network to the .pro file, which can add some network libraries.

Next, we build a simple interface. I directly drag and use the existing graphics library of qtCreator. I use the following layout. Remember to set the window size to 480*272. This has been mentioned in my previous review, so I will not repeat it here.

Then add the following code in widget.h (I show all the code here)

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QtNetwork>//网络类
#include <QNetworkAccessManager>//网络管理类
//Json数据类
#include <QJsonArray>
#include <QJsonDocument>
#include <QJsonObject>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots: //槽函数
    void slot_http(QNetworkReply* reply);//网络连接
    void slot_pushButton_consult();//查询按钮

private:
    Ui::Widget *ui;
    QNetworkAccessManager* http;
};
#endif // WIDGET_H

Add the following code in widget.cpp. Here we mainly use some functions to parse the JSON data.

#include "widget.h"
#include "ui_widget.h"


Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    http = new QNetworkAccessManager;
    http->get(QNetworkRequest(QUrl(QString("http://query.asilu.com/weather/baidu/?city=%1").arg(ui->comboBox_city->currentText()))));//连接天气网站
    connect(http,SIGNAL(finished(QNetworkReply*)),this,SLOT(slot_http(QNetworkReply *)));//调用槽函数

}

Widget::~Widget()
{
    delete ui;
}
void Widget::slot_http(QNetworkReply *reply)
{
    QByteArray Data = reply->readAll();
    QJsonDocument JsonDocument = QJsonDocument::fromJson(Data);
    QJsonObject JsonObject = JsonDocument.object();
    QString City = JsonObject["city"].toString();
    ui->textEdit->setText("");
    for(int i = 0;i < 7;++i)
    {
        QString date = JsonObject["weather"].toArray()[i].toObject()["date"].toString();
        QString weather = JsonObject["weather"].toArray()[i].toObject()["weather"].toString();
        QString temp = JsonObject["weather"].toArray()[i].toObject()["temp"].toString();
        QString wind = JsonObject["weather"].toArray()[i].toObject()["wind"].toString();
        ui->textEdit->append(date+"  "+weather+"  "+temp+"  "+wind);
    }
}

void Widget::slot_pushButton_consult()
{
    http->get(QNetworkRequest(QUrl(QString("http://query.asilu.com/weather/baidu/?city=%1").arg(ui->comboBox_city->currentText()))));
}

We can preview the effect on the computer before porting it to the board.

3. Compile and transplant to the board to see the effect

We use qmake && make to compile our project and copy it to our board using the scp command. When I execute my qt executable file in the terminal, the following effect appears on the screen:

I have only added the weather for four municipalities here. Friends who are interested can implement it for all cities.

Summary: The development board can accurately obtain network data by obtaining network weather through the API. The network connection is stable and the data transmission is accurate.

lugl4313820

The development board can obtain network weather through the API and accurately obtain data from the network. The network connection is stable and the data transmission is accurate.

The posts of the big guys are awesome and are spreading everywhere!

qiao---

lugl4313820 published on 2024-1-4 21:19 The development board can obtain network weather through the API to accurately obtain network data. The network connection is stable and the data transmission is accurate. ...

Thanks for your support

秦天qintian0303

It feels a bit like Windows 2000. I think the artist should design some pictures.

qiao---

Qintianqintian0303 posted on 2024-1-5 15:00 It feels a bit like Windows 2000. I think the artist should design a few pictures.

That's right, it's probably because of the font display of Windows that I ported.