STM32

文章数:561 被阅读:1105636

账号入驻

STM32MP135F-DK测评 | 网络测评之用QT显示网络天气与基于QT的智能家居

最新更新时间:2024-03-13
    阅读数:

点击上方 关注 STM32

:EEWO RLD论坛网友 qiao--- 版权归原作者 所有

一、网络测评,用QT显示网络天气


本次测评我打算测试一下板子的网络功能,而测评的主要方式就是利用网上的api获取网络天气,最终在qt上显示。

0 1
在网上找一个可以获取天气的api


我用的是下面这个链接 http://query.asilu.com/weather/baidu/ ,当我们进入这个链接的时候,会显示一系列的JSON数据,如下图,而我们要做的就是解析下面的这个JSON数据。




0 2
创建qt工程



我们打开Linux虚拟机下面的qtCreator,工程创建模式按照我之前的测评就可以, STM32MP135F-DK测评 | 人工智能之物体识别与部署QT开发环境 。我们在.pro文件下加入network,这个可以加入一些网络的库。


接着我们构建一个简单的界面,我是直接拖用qtCreator现有的图形库,我用的是如下的布局。记着要设置窗口的大小要为480*272,这个在我之前的测评也有讲过,我这里就不在赘述。

然后在widget.h中添加以下的代码。
#ifndef WIDGET_H#define WIDGET_H
#include #include //网络类#include //网络管理类//Json数据类#include #include #include
QT_BEGIN_NAMESPACEnamespace Ui { class Widget; }QT_END_NAMESPACE
class Widget : public QWidget{Q_OBJECTpublic: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

在widget.cpp中添加下面的代码,这里主要是用了一些函数对JSON数据进行了解析。


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


我们可以在电脑上先预览一下效果在移植到板子上。


0 3
编译并移植到板子上看看效果



我们用qmake && make编译我们的工程,并拷贝到我们的板子上用scp命令拷贝就行,我在终端执行我的qt可执行文件就在屏幕上出现了以下效果。


我这里只添加了四个直辖市的天气,有兴趣的小伙伴可以把所有的城市都实现出来。


总结:开发板通过api获取网络天气可以准确的获取到网络中的数据,网络连接的稳定性较好,数据传输也很准确。

二、部署QT开发环境


经过漫长的学习,我打算把之前的测评整合起来,做一个简易的智能家居。

先来一张界面图。


功能演示(吊灯按钮控制的是红色led灯):



接下来我从三个方面来讲解这个智能家居的测评。

0 1
界面



界面我是用qt现有的组件搭建了一个框架如下图。


然后我再代码中用一些图片美化了一下界面,界面美化代码如下:


#include "home.h"#include "ui_home.h"
home::home(QWidget *parent): QWidget(parent), ui(new Ui::home){
ui->setupUi(this);my_timer = new QTimer(this);connect(my_timer,SIGNAL(timeout()),this,SLOT(slot_timeout()));my_timer->start(1000);/*led灯窗口*/led = new device_led(this);led->move(160,100);/*舵机窗窗口*/motor = new device_motor(this);motor->move(310,100);/* 设置样式*/QPalette pal = this->palette();pal.setBrush(QPalette::Background,QBrush(QPixmap(":/png/背景.png")));setPalette(pal);ui->label_pic->setStyleSheet("border-image:url(:/png/头像.png)");ui->label_pic->setText("");ui->frame_backgrand->setStyleSheet("#frame_backgrand{background-color:rgba(0,0,0,15%);}");ui->label_time1->setStyleSheet("color:#FFFFFF");ui->label_time2->setStyleSheet("color:#FFFFFF");
ui->label_line->setFixedWidth(3);ui->label_line->setText("");ui->label_line->setStyleSheet("background-color:#FFFFFF");
ui->label_eeword->setStyleSheet("color:#FFFFFF");
ui->label_title->setStyleSheet("color:rgba(255,255,255,200)");
ui->label_time1->setText(QDateTime::currentDateTime().toString("yyyy-MM-dd ddd"));
ui->label_time2->setText(QTime::currentTime().toString("hh:mm"));
}


led灯的窗口和舵机的窗口我是从新设计的一个界面框架,如下图。


后面也是用的代码美化了他们,他们可以用CSS样式来美化。
//led界面初始化this->setStyleSheet("#frame_background{background-color:#f4fcff;border-radius:15px}");ui->label_pic->setStyleSheet("border-image:url(:/png/吊灯-关.png)");ui->label_pic->setText("");//舵机界面初始化this->setStyleSheet("#frame_background{background-color:#f4fcff;border-radius:15px}");ui->label_pic->setStyleSheet("border-image:url(:/png/百叶窗-叶子-开.png)");ui->label_pic->setText("");

0 2
led灯控制



对于led灯的控制我是封装了一个led的类,其中实现了灯打开和关闭的操作,并且为按钮设置了槽函数,用于控制led灯,在槽函数里面我用了替换图片的办法来使吊灯的图片发生变化。代码如下:
#include "device/device_led.h"#include "ui_device_led.h"device_led::device_led(QWidget *parent) :QWidget(parent),ui(new Ui::device_led){ui->setupUi(this);//滑动按钮button = new SliderButton(this);button->set_button_color(QColor(36,110,202),QColor(188,188,188),QColor(255,255,255));button->set_button_size(12,20);button->move(85,30);connect(button,SIGNAL(signal_button_off()),this,SLOT(slot_slider_OFF()));connect(button,SIGNAL(signal_button_on()),this,SLOT(slot_slider_ON()));//界面初始化this->setStyleSheet("#frame_background{background-color:#f4fcff;border-radius:15px}");ui->label_pic->setStyleSheet("border-image:url(:/png/吊灯-关.png)");ui->label_pic->setText("");//硬件初始化fd =::open("/dev/led_red",O_RDWR);if(fd<0){printf("file open failed!\r\n");return ;}::printf("打开成功");}
device_led::~device_led(){delete ui;}
void device_led::open_led(void){databuf[0] = 1;retvalue = ::write(fd,databuf,1);if(retvalue < 0){::close(fd);return ;}}
void device_led::close_led(void){databuf[0] = 0;retvalue = ::write(fd,databuf,1);if(retvalue < 0){::close(fd);return  ;}}
void device_led::slot_slider_OFF(){ui->label_pic->setStyleSheet("border-image:url(:/png/吊灯-关.png)");  //替换灯图片ui->label_onoff->setText("OFF");close_led();}void device_led::slot_slider_ON(){ui->label_pic->setStyleSheet("border-image:url(:/png/吊灯-开.png)");  //替换灯图片ui->label_onoff->setText("ON");open_led();}


0 3
舵机控制



看过我之前的测评的贴友都知道我前面实现了舵机0到180度的随意转动,于是我这里就可以用之前写好的可执行文件streering。

c语言有一个执行文件的函数为system();我这里就是用了这个来实现舵机的控制。控制部分关键代码如下。
void device_motor::motor_change(unsigned int angle){char s[50] ;::sprintf(s,"/home/root/streering %d",angle);system(s);}

最后再绑定滑动组件的槽函数就可以实现,舵机控制完整代码如下:
#include "device_motor.h"#include "ui_device_motor.h"
device_motor::device_motor(QWidget *parent) :QWidget(parent),ui(new Ui::device_motor){ui->setupUi(this);//界面初始化
this->setStyleSheet("#frame_background{background-color:#f4fcff;border-radius:15px}");ui->label_pic->setStyleSheet("border-image:url(:/png/百叶窗-叶子-开.png)");ui->label_pic->setText("");}device_motor::~device_motor(){delete ui;}
void device_motor::motor_change(unsigned int angle){char s[50] ;::sprintf(s,"/home/root/streering %d",angle);system(s);}
void device_motor::on_Slider_sliderReleased(){motor_change(ui->Slider->value());}


总结:通过本次对之前的测评进行的小整合,完成了一个小的智能家居的项目。
·

© THE END


“阅读原文” 了解更多

 
EEWorld订阅号

 
EEWorld服务号

 
汽车开发圈

About Us 关于我们 客户服务 联系方式 器件索引 网站地图 最新更新 手机版

站点相关: TI培训

北京市海淀区中关村大街18号B座15层1530室 电话:(010)82350740 邮编:100190

电子工程世界版权所有 京ICP证060456号 京ICP备10001474号-1 电信业务审批[2006]字第258号函 京公网安备 11010802033920号 Copyright © 2005-2024 EEWORLD.com.cn, Inc. All rights reserved