At the end of the week, pick up MagicBox and blow it up. Then put it down. This time, I will run a question and do an example of Qt for an application of WebEngineView class and Mqtt.
The Qt version installed by Lao Wang contains WebEngine modules but lacks MQTT. Fortunately, in addition to third-party EMQ s, there are official libraries that need to be compiled on their own. Therefore, the first step is to compile and configure the mqtt library.
Download address, naturally on github:
https://github.com/qt/qtmqtt
Verified that, in addition to the need to install Perl, the build library file can be compiled correctly. Not familiar with Perl, the download address is as follows:
https://www.perl.org/get.html
The files in the three folders shown in the generated directory are then copied to the corresponding location of the Qt installation directory so that they can be used directly like other modules.
Next, open the designer interface, add a few simple controls, widget s to display web pages, keys to manipulate mqtt. Nothing here. Designed according to your own ideas, mainly visual content.
Go back to the editing interface and start writing code. First, a web page is displayed in the main interface. Qt WebEngine Core is based on the core of chromium and requires MSVC compiler under Win platform.
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); ui->widget->setContextMenuPolicy(Qt::NoContextMenu); //This sentence shows the local html File ui->widget->load(QUrl("C:/Users/wangd/Desktop/Qt/WebEngine/webchart/data.html")); }
For convenience, downloading a dynamic html file (including JS) from the Apache ECharts example is shown below:
QString topic = "820/alert"; QString msg = "please be careful"; m_client->publish(topic, msg.toUtf8())
Next, add the business code for mqtt. Simple client functionality with publishing and subscription capabilities. Planning is also about subscribing to location information and issuing a caring reminder.
//Get the address and port number on the interface m_client->setHostname(ui->lineEdit_host->text()); m_client->setPort(ui->lineEdit_port->text().toInt()); //Connecting to a server is similar tcp client m_client->connectToHost();
Subscribe to topics by:
//subscribe QString topic= "820/gps"; m_client->subscribe(topic)
How to publish a message:
QString topic = "820/alert"; QString msg = "please be careful"; m_client->publish(topic, msg.toUtf8())
Processing of receiving messages, signals from QMqttClient, printed directly for viewing:
connect(m_client, &QMqttClient::messageReceived, this, [this](const QByteArray &message, const QMqttTopicName &topic) { const QString content = QDateTime::currentDateTime().toString() + QLatin1String("Topic: ") + topic.name() + QLatin1String("Message: ") + message + QLatin1Char('\n'); qDebug() << content; });
Once you've debugged the code, you can use the tools to test the results. Still a communication cat gadget, subscribe to the "820/alert" theme and publish the "820/gps" theme.
Then run Lao Wang's own client for message communication. Subscribe to and publish topics with public servers.
Then Lao Wang thought that Qt was the client that would get the GPS data of MagicBox and mark it on the map, so the map had to be displayed. Think about it, or see Baidu Open Platform. You need to register an account to become a developer. In fact, it is very simple to introduce maps into HTML. Baidu provides several kinds of API s. Lao Wang will use them in browsers, which is naturally JavaScript.
Sample code for map:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="https://Api.map.baidu.com/api?V=1.0&type=webgl&ak=your key "> </script> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMapGL.Map("container"); // Create a map instance var point = new BMapGL.Point(116.404, 39.915); // Create point coordinates map.centerAndZoom(point, 15); // Initialize map, set center point coordinates and map level </script> </body> </html>
Join Lao Wang's project as follows.
