嵌入式图形界面设计_综合实验报告[001]

1、嵌入式图形界面设计报告班级：计算机科学与技术15-2 班小组成员：刘航征、安宝、曲晗羽杨祎涵、张振、李雪辰2017 年 12 月1/18一、前言天气预报（测）或气象预报（测）是使用现代科学技术对未来某一地点地球大气层的状态进行预测。从史前人类就已经开始对天气进行预测来相应地安排其工作与生活（比如农业生产、军事行动等等）。今天的天气预报主要是使用收集大量的数据（气温、湿度、风向和风速、气压等等），然后使用目前对大气过程的认识（气象学）来确定未来空气变化。由于大气过程的混乱以及今天科学并没有最终透彻地了解大气过程，因此天气预报总是有一定误差的。最传统的数据是在地面或海面上通过专业人员、爱好者、自动

2、气象站或者浮标收集的气压、气温、风速、风向、湿度等数据。世界气象组织协调这些数据采集的时间，并制定标准。这些测量分每小时一次（METAR ）或者每六小时一次（SYNOP ）。该项目为一款天气预报软件，基于 Qt5 开发，具有查询指定城市天气、显示当天天气状况以及未来四天天气大致状况的主要功能，次要功能为更换软件皮肤，显示当天感冒指数等功能。软件预览图：日期显示栏搜索栏换肤按钮、最小化、关闭按钮实时气温栏湿度、风向栏感冒指数信息栏日出、日落时间显示栏今日以及未来四日天气二、选用的技术基本说明1 、Qt JSON操作QJsonDocumentQJsonDocument类用于读和写JSON文档。一个

3、JSON文档可以使用QJsonDocument:fromJson()从基于文本的表示转化为QJsonDocument，toJson()则可以反向转化为文本。解析器非常快且高效，并将JSON 转换为Qt使用的二进制表示。已解析文档的有效性，可以使用!isNull()进行查询。如果要查询一个JSON 文档是否包含一个数组或一个对象，使用isArray()和isObject() 。包含在文档中的数组或对象可以使用array()或object()检索，然后读取或操作。2/18也可以使用fromBinaryData()或 fromRawData()从存储的二进制表示创建来JSON文档。QJsonArra

4、yQJsonArray类封装了一个JSON数组。JSON 数组是值的列表。列表可以被操作，通过从数组中插入和删除QJsonValue。一个QJsonArray可以和一个QVariantList相互转换。可以使用size()来查询条目的数量，通过insert()在指定索引处插入值，removeAt()来删除指定索引的值。QJsonObjectQJsonObject类封装了一个JSON 对象。一个 JSON对象是一个“key/value对”列表， key 是独一无二的字符串，value 由一个 QJsonValue表示。一个 QJsonObject可以和一个 QVariantMap相互转换。可以使

5、用 size()来查询“key/value 对”的数量，通过insert()插入“key/value 对”，remove() 删除指定的 key 。QJsonValueQJsonValue类封装了一个值。JSON 中的值有6 种基本数据类型：bool （ QJsonValue:Bool）double（ QJsonValue:Double）string （QJsonValue:String）array （QJsonValue:Array）object （ QJsonValue:Object）null （ QJsonValue:Null）一个值可以由任何上述数据类型表示。此外， QJsonValu

6、e 有一个特殊的标记来表示未定义的值，可以使用 isUndefined() 查询。值的类型可以通过type()或 isBool() 、 isString()等访问函数查询。同样地，值可以通过toBool() 、toString()等函数转化成相应的存储类型。3/18QJsonParseErrorQJsonParseError类用于在JSON 解析中报告错误。枚举QJsonParseError:ParseError：该枚举描述JSON 文档在解析过程中所发生的错误类型。2 、QtXML操作QXmlStreamReader用于读取格式良好的XML 文档的快速解析器，该类最快且最易于使用，并提供了与

7、其他Qt 兼容的应用程序编程接口，很适用于编写单通道解析器；3 、QNetworkAccessManagerQNetworkAccessManager类允许应用程序发送网络请求和接收网络应答。三、方案设计1、初始化UI 界面2、获取当前地区时间3、从文件中读取每个城市名称以及其代码，将其组合分别存入QMap类对象 citykeys中4、用预设的url 发送 http请求，获取本地城市名称5,、用获取的本地城市名称获取citykeys中对应的城市代码发出查询未来五天天气的http请求6、收到的回复为JSON 文档，用 QJsonDocument类解析 JSON 文档，将得到的未来五天的天气信息分

8、别存入 Forecast 结构体数组 forecast 的每一个元素中，将这些信息显示在主窗口中对应的控件上，然后发出查询今天天气的 http 请求7、收到的回复为XML 格式文档，用QXmlStreamReader类读取其信息，将当天的天气信息存入Today结构体 today中，将这些信息显示在主窗口中对应的控件上。4/188、设置搜索按钮以及换肤按钮的信号与槽的关联。流程图程序启动初始化 UI 界面获取当前本地时间读取城市及其代码获取本地城市名称Y点击换肤按钮查询未来五天天气信息点击搜索城市天气重绘 UI 界面查询当天天气信息点击关闭按钮Y退出程序四、详细代码解析ui 设计界面：5/18m

9、ainwindow.h:#ifndef MAINWINDOW_H#define MAINWINDOW_H#include <QMainWindow>#include<QNetworkAccessManager>#include<QNetworkReply>#include<QNetworkRequest>#include<QPixmap>#include<QPaintEvent>#include<QPainter>#include<QPoint>#include<QMouseEvent>

10、#include<QLabel>namespace Ui class MainWindow;struct ForecastQString fengxiang;QString fengli;QString high;QString type;QString low;QString date;struct Today6/18QString ganmao;QString city;QString updatetime;QString wendu;QString fengli;QString fengxiang;QString sunrise;QString sunset;QString

11、shidu;class MainWindow : public QMainWindowQ_OBJECTpublic:explicit MainWindow(QWidget *parent = 0); MainWindow ();protected:voidpaintEvent(QPaintEvent *);voidmousePressEvent(QMouseEvent *event);voidmouseMoveEvent(QMouseEvent *event);voidmouseReleaseEvent(QMouseEvent *);protected slots:void replayFin

12、ished(QNetworkReply *reply);private slots:void on_getButton_clicked();void on_updateButton_clicked();private:Ui:MainWindow *ui;QNetworkAccessManager *manager;QString URL_1;QString URL_2;Forecast forecast5;Today today;void parseJson(QString Json);void parseXml(QString Xml);void parseCity(QString City

13、);void loadCitykeys();/ 加载城市代码文件7/18QMap<QString,QString> citykeys;/ 存储城市代码int choose;/0.查询 IP1. 今天天气 + 指数 2. 未来 5 天天气QPixmap pixmap;QPoint move_point;bool mouse_press;QList<QLabel *> forecast_date_list;QList<QLabel *> forecast_temp_list;QList<QLabel *> forecast_type_list;QSt

14、ring city;int uid;#endif/MAINWINDOW_Hmainwindow.cpp:#include "mainwindow.h"#include "ui_mainwindow.h"#include<QVariant>#include<QByteArray>#include<QJsonParseError>#include<QJsonArray>#include<QJsonObject>#include<QJsonDocument>#include<QJso

15、nValue>#include<QXmlStreamReader>#include<QMessageBox>/#include<QDebug>MainWindow:MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui:MainWindow)ui->setupUi(this);setWindowFlags(Qt:FramelessWindowHint);setAttribute(Qt:WA_TranslucentBackground);pixmap.load(":/image

16、s/UI0");resize(pixmap.size();uid = 0;mouse_press = false;8/18forecast_date_list<<ui->forecast_0_date<<ui->forecast_1_date<<ui->forecast_2 _date<<ui->forecast_3_date<<ui->forecast_4_date;forecast_temp_list<<ui->forecast_0_temp<<ui->f

17、orecast_1_temp<<ui->forecast_2 _temp<<ui->forecast_3_temp<<ui->forecast_4_temp;forecast_type_list<<ui->forecast_0_type<<ui->forecast_1_type<<ui->forecast_2 _type<<ui->forecast_3_type<<ui->forecast_4_type;manager = new QNetworkAc

18、cessManager(this);/ 天气 APIURL_1 = ""URL_2 = ""connect(manager,SIGNAL(finished(QNetworkReply*),this,SLOT(replayFinished(QNetworkReply*);/ 设置组件样式ui->cityEdit->setTextMargins(0, 0, ui->getButton->width(), 0);ui->cityEdit->setStyleSheet("QLineEditborder:1pxsoli

19、dgray;border-radius:3px;background:rgb(200, 231, 232);QLineEdit:hoverborder-color:transparent; ");ui->getButton ->setStyleSheet("background:transparent;");ui->closeButton->setStyleSheet("QPushButtonborder-image:url(:/images/close);QPushButton:hoverborder-image:url(:/i

20、mag es/close_on);QPushButton:hover:pressedborder-image:url(:/images/close);") ;ui->minButton->setStyleSheet("QPushButton border-image:url(:/images/min);QPushButton:hoverborder-image:url(:/images /min_on);QPushButton:hover:pressedborder-image:url(:/images/min);");ui->updateBut

21、ton->setStyleSheet("QPushButton border-image:url(:/images/update);QPushButton:hoverborder-image:url(:/ima ges/update_on);QPushButton:hover:pressedborder-image:url(:/images/update); ");QDateTime time = QDateTime:currentDateTime();ui->date->setText(tr("%1").arg(time.toStri

22、ng("yyyy-MM-dd");/ 加载城市代码loadCitykeys();9/18/ 启动程序后先查询 ip 定位默认城市choose = 0;manager->get(QNetworkRequest(QUrl("");MainWindow:MainWindow()delete ui;void MainWindow:paintEvent(QPaintEvent *)QPainter painter(this);painter.drawPixmap(0, 0, pixmap);/ 绘制 UIvoid MainWindow:mousePressE

23、vent(QMouseEvent *event)if(event->button() = Qt:LeftButton)/ 鼠标相对于窗体的位置）move_point = event->pos();mouse_press = true;void MainWindow:mouseMoveEvent(QMouseEvent *event)if(mouse_press)/ 鼠标相对于屏幕的位置QPoint move_pos = event->globalPos();/ 移动主窗体this->move(move_pos - move_point);void MainWindow:

24、mouseReleaseEvent(QMouseEvent *)mouse_press = false;void MainWindow:loadCitykeys() 10/18QFile file(":/citykeys/citykeys");if ( !file.open (QIODevice:ReadOnly| QIODevice:Text ) )return ;QString tmp;while (file.atEnd () = 0) tmp = file.readAll();QStringList list = tmp.split(",");fo

25、r(int i = 0; i < list.length(); i+) QString s = list.at(i);QString citys = s.split(":").at(1);QString city = citys.replace(""", "");QString codes = s.split(":").at(0);QString code = codes.replace(""", "");citykeys.insert(city,

26、code);void MainWindow:replayFinished(QNetworkReply *reply)QVariant status_code =reply->attribute(QNetworkRequest:HttpStatusCodeAttribute);if(reply->error() = QNetworkReply:NoError)QByteArray bytes = reply->readAll();if(choose = 0)/ 查询 IPQString result = QString:fromLocal8Bit(bytes);parseCit

27、y(result);else if(choose = 1)/ 今天天气 + 指数QString result(bytes);parseXml(result);else if(choose = 2)/ 未来 5 天天气QString result(bytes);parseJson(result);else11/18QMessageBox:information(this,tr("出错啦 "),tr("网络错误 , 请检查网络连接"),QMessageBox:Ok,QMessageBox:Ok);/ 解析城市信息void MainWindow:parseCi

28、ty(QString City)city = City.split(tr("" ).at(5);if(city = "" | citykeyscity="")QMessageBox:information(this,tr("提示 "),tr("无法定位城市 , 请手动查询"),QMessageBox:Ok,QMessageBox:Ok);return;QString url = URL_1 + citykeyscity;choose = 2;manager->get(QNetworkReq

29、uest(QUrl(url);/ 解析 json 格式的未来天气void MainWindow:parseJson(QString Json)QByteArray byte_array;QJsonParseError json_error;QJsonDocument parse_doucment =QJsonDocument:fromJson(byte_array.append(Json),&json_error);if(json_error.error = QJsonParseError:NoError)QJsonObject obj = parse_doucment.object(

30、);QJsonValue desc = obj.take("desc");if(desc.toString() != "OK")QMessageBox:information(this,tr("抱歉 "),tr("暂无此城市的天气情况"),QMessageBox:Ok,QMessageBox:Ok);return;QJsonValue data = obj.take("data");today.ganmao = data.toObject().take("ganmao").t

31、oString();QJsonValue forecast1 = data.toObject().take("forecast");12/18QJsonArray forecast2 = forecast1.toArray();for(int i=0; i<5; i+)QJsonValue value = forecast2.at(i);QJsonObject object = value.toObject();forecasti.fengxiang = object.take("fengxiang").toString();forecasti.d

32、ate = object.take("date").toString();forecasti.fengli = object.take("fengli").toString();forecasti.high = object.take("high").toString();forecasti.low = object.take("low").toString();forecasti.type = object.take("type").toString();for(int i=0;i<5;

33、i+)forecast_date_listi->setText(tr("%1").arg(forecasti.date);forecast_temp_listi->setText(tr("%1- %2").arg(forecasti.low.split(" ").at(1).arg(forecasti.high.split(" ").at(1);forecast_type_listi->setPixmap(QPixmap(tr(":/images/%1").arg(foreca

34、sti.t ype);forecast_type_listi->setToolTip(tr("%1 : %2- %3").arg(forecasti.type).arg(forecasti.fengli).arg(forecasti.fengxia ng);ui->forecast_0_date->setText(tr("今天 ");QString url = URL_2 + citykeyscity;choose = 1;manager->get(QNetworkRequest(QUrl(url);elseQMessageBox

35、:information(this,tr("出错啦 "),tr("数据出错 , 请重试"),QMessageBox:Ok,QMessageBox:Ok);return;/ 解析 XML 格式的今天天气void MainWindow:parseXml(QString Xml)13/18QXmlStreamReader xml(Xml);while(!xml.atEnd()if(xml.hasError()QMessageBox:information(this,tr("出错啦 "),tr("数据出错 , 请重试"),

36、QMessageBox:Ok,QMessageBox:Ok);return;else if(xml.isStartElement()if(()="city")today.city = xml.readElementText();else if(()="updatetime")today.updatetime = xml.readElementText();else if(()="wendu")today.wendu = xml.readElementText();else if(xml.

37、name()="fengli")today.fengli = xml.readElementText();else if(()="shidu")today.shidu = xml.readElementText();else if(()="fengxiang")today.fengxiang = xml.readElementText();else if(()="sunrise_1")today.sunrise = xml.readElementText();else

38、 if(()="sunset_1")today.sunset = xml.readElementText();xml.clear();14/18ui->city->setText(tr("%1").arg(today.city);ui->temp->setText(tr("%1").arg(today.wendu);ui->sunrise->setText(tr("%1").arg(today.sunrise);ui->sunset->setText(tr("%1").arg(today.sunset);ui->label->setText(tr("日出 ");ui->label_2->setText(tr("日落 ");ui->label_3->setText(tr("湿度 ");ui->shidu->setText(tr("%1").arg(today.shidu);ui->