《智能家居系统项目一设计智能家居软件系统的界面课件.pptx》由会员分享，可在线阅读，更多相关《智能家居系统项目一设计智能家居软件系统的界面课件.pptx（89页珍藏版）》请在三一办公上搜索。
1、,项目一 设计智能家居软件系统的界面,智能家居系统开发配套PPT,01 . 创建第一个Qt图形化项目,创建一个Qt图形化窗口项目，在窗口中显示“Hello World”。,1.项目的创建（1）运行Qt Creator，选择“文件”“新建文件或项目”项，打开项目创建导航对话框。在“项目”栏选择“Qt控件项目”，右侧对应选择“Qt Gui应用”（Gui:Graphical User Interface，即图形用户界面），如图所示。点击“选择”按钮，进入下一步骤。,（2）定义项目名称并选择保存路径。这里项目名称不建议使用中文。这里将项目名命名为Test并保存在桌面上，如图1-4所示。点击“下一步”按
2、钮进入下一步骤。,（3）在“目标”向导中按系统默认设置即可，点击“下一步”按钮进入下一步骤。（4）根据需要，选择一个“基类”。这里选择QDialog（对话框）类作为基类，定义类名，建议首字母大写。修改类名后，头文件名、源文件名和界面文件名都会自动更新，如图所示。点击“下一步”按钮进入下一步骤。,（5）在“汇总”向导中按系统默认设置即可，点击“完成”按钮进入完成项目的创建。,2.显示“Hello World”（1）在“项目”的树形列表中，找到“界面文件”中的“dialog.ui”文件，双击打开。（2）在左侧组件箱中找到Label控件并将其拖入编辑区。双击该组件，将其变为可编辑状态，输入要显示的文
3、字“Hello World”,（3）右击Label标签，选择“改变样式表”，在编辑样式表中选择“添加字体”按钮，在“选择字体”对话框中选择字体为“文泉驿微米黑”，大小为“24”。（4）点击左侧的运行按钮，完成对该项目的编译和运行。,项目构建目录的设置,使用Qt Creator编译工程时，默认会生成一个与工程目录同级的构建目录，用于存放缓存文件。构建目录名相当长，从而使得目录结构看起来显得有些凌乱。,在项目构造前可以先对构建目录进行设置。在“项目”选项卡中，对构建目录进行设置。一般会将构建目录路径指向项目文件夹中。构建目录设置完成后，编译的缓存文件会自动添加至该目录中。其中，与项目名同名的文件为
4、可执行文件（如在本项目中的Test文件），双击该文件便可直接运行此项目。,02 . 智能家居系统软件背景界面的设计,在智能家居系统软件中，为了使界面变得更加美观，可以设计一个具有图片背景的Label。,显示控件组（Display Widgets）,Label：标签。LCD Number：LCD数字。Progress Bar：进度条。Horizontal Line：水平线。Vertical Line：垂直线。,Label控件的常用属性,objectName：Label控件的控件名。text：Label控件的显示文本。X：Label控件顶点的X坐标。Y：Label控件顶点的Y坐标。宽度（width
5、）：Label控件的宽度。高度（Height）：Label控件的高度。,Label控件的常用方法,void setText(const QString &)：设置Label的显示文字。void setVisible(bool visible)：设置Label是否为可见，系统默认值为true（可见）,若参数为false，则表示该Label在界面中不可见。,设置Label控件样式,方法1：右击Label控件，选择“改变样式表”进行编辑。,方法2：利用控件的setStyleSheet(QString)方法，也可进行对控件样式的设置。,1.在桌面创建一个Qt Gui项目“SmartHome”，并将构建
6、目录指向该项目中的Debug文件夹。2.导入图片文件，步骤如下：（1）将需要的素材图片文件夹“images”复制到项目文件夹。注意文件夹和图片的文件名都不能出现中文，否则会在项目编译时出错。（2）右击项目名称，点击“添加新文件”,（3）在“新建文件”对话框中选择“Qt”-“Qt资源文件”，点击“选择”按钮，进入下一步骤。,（4）在“新建Qt资源文件”对话框“位置”向导中输入名称“images”，路径默认即可。点击“下一步”按钮进入下一步骤。,（5）在“汇总”向导中点击“完成”按钮，完成资源文件的创建。此时，会在项目目录下新建一个“images.qrc”的资源文件。将该文件双击打开。（6）在“添
7、加”下拉框中选择“添加前缀”。输入前缀名“/”，如图1-23所示。（7）在“添加”下拉框中选择“添加文件”。弹出“打开文件”对话框。将步骤1复制的所有图片文件选中并导入。（8）将该项目重启，图片文件便可使用。,3.双击打开界面文件“dialog.ui”，设置dialog对象属性宽度为800，高度为480（6410网关默认分辨率为800*480）。,4.在界面中拖入一个Label控件，设置其控件名为lblBg。设置其属性X为0，Y为0，宽度为800，高度为480，text为空。,5.右击界面的Label控件选择“改变样式表”，在“添加资源”下拉列表中选择“background-image”，弹出
8、“选择资源”对话框，选择图片背景后确认。,03 . 环境数据检测页面的设计,使用Label和LCD Number控件进行环境数据检测部分界面的设计。其中，温度和湿度值为十进制显示，保留两位小数。光照和烟雾值为十六进制显示。,LCD Number控件是显示控件组（Display Widgets）的另一个常用控件，用于显示一个和LCD一样的数字。它可以显示几乎任意大小的数字，可以显示十进制、十六进制、八进制或二进制数。1.LCD Number控件常用属性（1）value：LCD Number控件显示的值。（2）mode：LCD Number控件的显示模式。其中Dec为十进制，Hex为十六进制，Bi
9、n为二进制，Oct为八进制。如：将LCD Number的值设为10，在Dec模式下显示为10，在Hex模式下显示为A，在Bin模式下显示为1010，在Oct模式下显示为12。（3）digitCount：LCD Number控件显示的数据位数（包括小数点）。如：将LCD Number的值设为10.1，则应将digitCount的值设置为4。（4）SegmentStyle：显示数字的外观。如果需要改变显示数字的颜色，需将此项改为Flat。,2.LCD Number控件常用方法（1）void display(int num /double num/ const QString ”。（2）void s
10、etDecMode()/setHexMode()/setBinMode()/setOctMode()：将LCD Number控件设置为对应的显示模式。如：“ui-lcdNumber-setHexMode()”，表示设置该LCD Number控件显示模式为十六进制。（3）void setNumDigits(int nDigits)：设置LCD Number控件显示的数据位数。如：“ui-lcdNumber-setDigitCount(5)”，表示设置该LCD Number控件显示位数为5位。,3.设置LCD Number控件样式（1）文本、背景颜色的修改与Label控件一样，使用样式表中的“co
11、lor”修改文本颜色，“background-color”修改背景颜色。在修改前需将LCD Number控件的“SegmentStyle”属性设置为“Flat”，否则文本颜色不能被修改。（2）边框的设置使用样式表中的“border”对LCD Number的边框进行设置。,2.按图1-28的布局，将Label控件和LCD Number控件拖入界面中。3.编辑Label的文字和颜色，效果如图1-31所示。注意：为了代码编写方便，“求助按钮”、“有人求助”、“人体感应”和“有人”是由不同的Label控件控制的。设置“有人求助”控件名为“lblHB”，“有人”控件名为“lblHI”。,图1-31 La
12、bel控件的设置,1.打开项目“SmartHome”，进入界面文件“dialog.ui”。,4.设置四个LCD的控件名分别为“lcdTemp”（温度）、“lcdHumidity”（湿度）、“lcdIllumination”（光照度）和“lcdSmoke”（烟雾）。5.设置LCD Number控件属性。温度和湿度均为十进制显示，保留两位小数，如图1-32所示。光照和烟雾为十六进制显示，如图1-33所示。,图1-32 温度、湿度控件的设置,图1-33 光照、烟雾控件的设置,6.设置完成。运行效果如图1-28所示。,04 . 图片按钮控制界面的设计,在智能家居软件系统中，为了让用户更加直观的对设备进
13、行控制，加入了一些图片控制按钮，如LED灯、报警灯、电动窗帘等。用户可以通过点击这些图片更新界面中对应设备的状态。,按钮控件组（Buttons）,Push Button：按钮。Radio Button：单选按钮。Check Box：复选框。,Push Button控件常用属性,text:Push Button控件的显示文本。enable：按钮是否可用，默认为勾选状态。若取消选中，则此按钮不可用。cursor：鼠标经过时指针图标样式。默认为箭头样式。flat：设置背景是否透明，默认为未勾选。若勾选此项，则此按钮设置为背景透明。当Push Button控件作为图片按钮时此项为必选项。,Push B
14、utton控件常用方法,QString text()：返回Push Button控件的显示文本。void setText(const QString ”，表示设置该按钮不可用。,设置Push Button控件样式,使用样式表中的“color”修改文本颜色，“background-color”修改背景颜色，使用“border”修改边框颜色。,2.拖入一个Push Button控件至界面中，放置至LED灯的位置。如图1-38所示。,图1-38 将控件拖入界面,3.修改其控件名为“btnLED1”,将其text属性设为空。,1.打开项目“SmartHome”，进入界面文件“dialog.ui”。,4
15、.右击“btnLED1”，选择“改变样式表”。在“添加资源”下拉列表中选择“border-image”，弹出“选择资源”对话框，选择图片后确认。如图1-39所示。,5.用鼠标将“btnLED1”调整至合适尺寸，如图1-40所示。,图1-39 设置按钮图片,图1-40 调整按钮大小,图1-41 运行效果,6.用相同方法，完成“btnLED2”,“btnLED3”，“btnLED4”,“btnStepMotor”，“btnBuzz”控件的设置。,7.将所有按钮的focusPolicy属性设置为Nofocus，flat属性设为true。,8. 设置完成。运行效果如图1-41所示。,注意：在制作图片按
16、钮时，使用Push Button控件的“高度”和“宽度”属性，可以更加精确的调整按钮尺寸。以制作btnLED1按钮为例，步骤如下：1.获取原图片的大小：右击图片，选择“属性”，如图1-42所示。在“图像”选项卡中看到改图片的宽度为70像素，高度为53像素。,图1-42 查看图片尺寸,2.设置btnLED1按钮的高度为70像素，宽度为53像素。如图1-43所示。,图1-43 btnLED1按钮属性,05 . 空调控制界面的设计,使用Push Button控件和Spin Box控件对空调控制界面进行设计,利用Spin Box控件调节空调温度，范围在16-32摄氏度之间。,输入控件组（Input W
17、idgets）,Line Edit：行文本编辑器。Spin Box：整数数字盒子。Time Edit：时间编辑器。Date Edit：日期编辑器。Date/Time Edit：日期/时间编辑器。Dial：拨号器。Horizontal Scroll Bar：横向滚动条。Vertical Scroll Bar：垂直滚动条。Horizontal Slider：横向滑块。 Vertical Slider：垂直滑块。,Spin Box控件常用属性,minimum：设置Spin Box控件的最小值。maximum：设置Spin Box控件的最大值。value：设置Spin Box控件的当前值。注意该值必须
18、在最小值和最大值之间。singleStep：设置单次步进值，默认值为1。buttonSymbols：设置SpinBox控件右侧按钮样式。,Spin Box控件常用方法,int value()：返回Spin Box的当前值。void setValue(int val);：设置Spin Box的当前值，该值必须在Spin Box控件的范围内。如：“ui-spinBox-setValue(10);”。,2.向界面拖入一个Push Button控件，“text”属性设置为空。设置控件样式的“border-image”为空调图片，如图1-49所示。,图1-49 设置控件样式,1.打开项目“SmartHo
19、me”，进入界面文件“dialog.ui”。,3.拖入两个Push Button控件和一个Spin Box控件，布局如图1-44所示，设置两个Push Button的控件名分别为“btnAirjKg”和“btnAirjSz”，“text”属性分别为“开”和“设置”。设置Spin Box的控件名为“spAirj”,“minimum”属性为16，“maximum”属性为32。4. 设置完成。运行效果如图1-44所示。,06 . 工作模式界面的设计,在智能家居软件系统中设置了三种工作模式：单控模式、联动模式和自定义模式。为了消除模式间的互相干扰。将这三种模式放入了不同的容器中。,容器控件组（Cont
20、ainers）,Group Box：组框。Tab Widget：标签部件。Widget：部件。,tabWidget控件常用属性,currentIndex：tabWidget控件当前标签索引值，索引值是从0开始计数。如图1-51中“单控模式”的索引值为0，“联动模式”、“自定义模式”的索引值依次1、2。currentTabText：tabWidget控件当前标签文本。tabPosition：tabWidget控件的标签显示位置。默认值为North（上部），另外可以设置South（下部）、West（左部）、East（右部）。,tabWidget控件常用方法,int currentIndex()：返
21、回当前标签的索引号。void setCurrentIndex(int index)：设置Widget当前标签的索引号。,2.将tabWidget控件拖入界面并调整到合适位置。设置该控件的空间名为tbMode。3.设置标签0的文本为“单控模式”，标签1的文本为“联动模式”。4.在标签1状态下右击鼠标选择“插入页”“在当前页之后”。修改该标签的文本为“自定义模式”。5. 设置完成。运行效果如图1-50所示。,1.打开项目“SmartHome”，进入界面文件“dialog.ui”。,07 . 单控模式界面的设计,本任务进行单控模式界面的设计。在界面中，使用使用Radio Button和Push Bu
22、tton控件控制LED灯的闪烁和跑马灯效果。使用Date/Time Edit控件显示当前系统时间，使用Radio Button和Push Button控件可以进行时间设置。使用Label控件显示最高温度和最低温度。,Radio Button（单选按钮）是Buttons控件组的常用控件，用于进行单项选择。上节中已提到为防止控件冲突，该控件要配合Widget控件进行使用。1.Radio Button控件常用属性（1）text：设置Radio Button控件的显示文本。（2）Checked：设置Radio Button控件是否被选中。实例：设置一个Radio Button控件的显示文本为“打开”，
23、默认为选中状态。,2.Radio Button控件常用方法（1）bool isChecked()：返回Raido Button控件是否被选中，若选中则返回true，否则返回false。（2）void setChecked(bool)：设置Radio Button控件的选中状态，如“ui-radioButton-setChecked(true);”。3.Radio Button设置控件样式实例：设置Radio Button控件的文本颜色（color）为红色，背景颜色（backgroud-color）为白色。,Date/Time Edit（日期/时间编辑）控件是Input Widgets控件组的控
24、件。用于进行时间和日期的编辑，与其功能类似的还有Date Edit（日期编辑）控件和Time Edit（时间编辑）控件。1.Date/Time Edit控件常用属性（1）date：设置Date/Time Edit控件显示日期，如：“16-11-16”。（2）time：设置Date/Time Edit控件显示时间，如:“AM12时00分00秒”。（3）displayFormat：设置Date/Time Edit控件显示格式。其中“y”表示年，“M”表示月，“d”表示日，“H/h”表示24/12小时制小时，“m”表示分钟，“s”表示秒钟。如：“yyyy-MM-dd HH:mm:ss”。,2.Dat
25、e/Time Edit控件常用方法（1）QDateTime dateTime()：返回控件的时间和日期。如“ui-dateTimeEdit- dateTime();”。（2）void setDateTime(const QDateTime ”，表示设置该控件的时间为当前系统时间，注意要先引入QDateTime类。3. Date/Time Edit设置控件样式,1.打开项目“SmartHome”，进入界面文件“dialog.ui”。2.按照图1-56布局将控件拖入界面中。属性设置见表1-1。表1-1单控模式控件设置表,3.拖入两个Widget容器控件，分别盛放两组Radio Button控件。,
26、4.设置完成。运行效果如图1-56所示。,08 . 联动模式界面的设计,本任务进行联动模式界面的设计，如图1-67所示。在界面中使用Date Edit控件进行日期的查询，Time Edit控件控制联动模式，Label控件进行查询结果显示和当前模式显示，Combo Box控件进行器件和控制方式的选择。,Combo Box（下拉列表框）控件是Input Widgets控件组的一个常用控件。用户通过对下拉列表中项目的选择，完成数据的输入。1.Combo Box控件常用属性（1）currentIndex：Combo Box控件当前选项的索引。（2）maxCount：Combo Box控件最大下拉项数量
27、。2.Combo Box控件常用方法（1）void setCurrentIndex(int index)：设置Combo Box控件当前选项索引，如“ui-comboBox-setCurrentIndex(0);”。（2）void clear()：清空Combo Box控件列表。如“ui-comboBox-clear();”。（3）void QComboBox:addItem(const QString ”。添加选项的位置由该控件的“insertPolicy”属性决定，如“InsertAtBottom”则表示在控件的底部插入选项。,3.Combo Box设置控件样式,1.打开项目“SmartH
28、ome”，进入界面文件“dialog.ui”。2.按照图1-67布局将控件拖入界面中。属性设置见表1-2。表1-2 联动模式控件设置表,3.双击“cbQj”控件弹出“编辑组合框”对话框，添加器件选项，如图1-70所示。,图1-70 “cbQj”控件编辑组合框设置,4. 双击“cbKz”控件弹出“编辑组合框”对话框，添加控制选项，如图1-71所示。,图1-71 “cbKz”控件编辑组合框设置,5.设置完成。运行效果如图1-67所示。,09 . 自定义模式界面的设计,本任务进行单控模式界面的设计。使用Combo Box控件和Spin Box控件对自定义模式条件进行设置，使用Check Box控件进
29、行设备的控制，使用Push Button控件控制自定义模式的开启和关闭。,Check Box（复选选按钮）是Buttons控件组的常用控件，用于进行多项选择。1.Check Box控件常用属性（1）text：设置Check Box控件的显示文本。（2）Checked：设置该Check Box控件是否被选中。2.Check Box控件常用方法（1）bool isChecked()：返回Check Box控件是否被选中，若选中则返回true，否则返回false。（2）void setChecked(bool)：设置Check Box控件的选中状态，如“ui-checkBox-setChecked(
30、true);”。,3. Check Box设置控件样式,2.按照图1-72布局将控件拖入界面中。属性设置见表1-3。表1-3 自定义模式控件设置表,5.设置完成。运行效果如图1-72所示。,1.打开项目“SmartHome”，进入界面文件“dialog.ui”。,10 . 利用信号、槽机制实现设备状态的切换,使用Qt的信号、槽机制实现界面中LED灯、蜂鸣器、窗帘等设备状态的切换。比如通过单击界面中“btnLED1”的按钮控件，实现LED1灯由打开状态到关闭状态的切换。,Qt中的信号和槽机制（Signal & Slot）,在Qt中使用信号和槽机制完成用户对界面操作的响应，是一种对象之间的通信机制
31、。其中，信号是在某种情况或者动作下被触发，槽则是用于执行信号的方法。,信号、槽的设置方法,实例：用户单击界面中的按钮控件，标签控件就会显示“你单击了一次按钮”,方法1：,右击按钮控件，选择“转到槽”进入下一步骤选择“clicked()”（单击事件）信号，单击“确定”按钮进入下一步骤。页面会自动跳转至“dialog.cpp”源文件，在此文件中同时会自动添加一个“void Dialog:on_pushButton_clicked()”的槽方法。另外，会在“dialog.h”头文件中的“private slots”（槽方法）区域声明“on_pushButton_clicked()”这个方法。在槽方法
32、中输入“ui-label-setText(你单击了一下按钮);”,方法2,在“dialog.h”头文件中先声明一个自定义的槽方法“void onclick()”在“dialog.cpp”源文件的构造方法（源文件中的第一个方法）中输入“connect(ui-pushButton,SIGNAL(clicked(),this,SLOT(onclick();”在“dialog.cpp”源文件的底部写“onclick()”槽方法。在“main.cpp”主文件中设置项目的编码方式，否则系统在运行时会出现乱码,1.右击“btnLED1”按钮，选择“转到槽”，进入下一步骤。,2.选择“clicked()”信号
33、，单击“确定”按钮进入下一步骤。3.在槽方法中输入如下代码：,void Dialog:on_btnLED1_clicked() ui-btnLED1-setStyleSheet(border-image: url(););,4. 用相同方法，完成“btnLED2”,“btnLED3”，“btnLED4”,“btnStepMotor”，“btnBuzz”控件的设置。代码如下：,void Dialog:on_btnLED2_clicked() ui-btnLED2-setStyleSheet(border-image: url(););void Dialog:on_btnLED3_clicked(
34、) ui-btnLED3-setStyleSheet(border-image: url(););void Dialog:on_btnLED4_clicked() ui-btnLED4-setStyleSheet(border-image: url(););void Dialog:on_btnStepMotor_clicked() ui-btnStepMotor-setStyleSheet(border-image: url(););void Dialog:on_btnBuzz_clicked() ui-btnBuzz-setStyleSheet(border-image: url(:/ima
35、ges/red.png););,5.运行测试。如图1-87所示，单击按钮控件可实现控件图片状态的切换。,图1-87 运行效果,小知识：下面介绍几种常用控件的信号槽方法，使用这些方法实现图1-88中联动模式的部分功能。,图1-88 器件的设置,1.Combo Box控件：常用信号方法为“currentIndexChanged(int/QString)”，表示为当前索引改变时触发，传递参数是当前选项的索引或者文本。实例：如图1-88所示，在联动模式中选择器件下拉列表，自动更改动作选项。(即当图中左边的下拉框选择为灯时，右边的下拉框则自动添加两个全开，全关的选项。),选项要求见表1-4。表1-4 选
36、项设置,实例分析：本实例是由器件下拉列表的切换控制控制下拉列表的文本，因此信号对象为“cbQj”。具体操作步骤如下：（1）右击“cbQj”控件选择“转到槽”进入下一步骤。（2）选择“currentIndexChanged(int)”信号，单击“确定”按钮进入下一步骤。,（3）在“void Dialog:on_cbQj_currentIndexChanged(int index)”槽方法中加入如下代码：,void Dialog:on_cbQj_currentIndexChanged(int index) ui-cbKz-clear();/清空控制列表 if(index=0)/当器件列表下标为0时
37、 ui-cbKz-addItem(全开); ui-cbKz-addItem(全关); if(index=1|index=4)/当器件列表下标为1或4时 ui-cbKz-addItem(打开); ui-cbKz-addItem(关闭); if(index=2|index=5)/当器件列表下标为2或5时 ui-cbKz-addItem(开); ui-cbKz-addItem(关); if(index=3)/当器件列表下标为3时 ui-cbKz-addItem(正转); ui-cbKz-addItem(反转); ui-cbKz-addItem(停止); ,（4）设置完成，运行效果如图1-89所示。,
38、图1-89 运行效果,2.Time Edit控件：常用信号方法为“timeChanged(QTime)”。表示为当前时间改变时触发，传递的参数为当前的时间。实例：如图1-88所示，实现智能家居应用中的三种模式，分别是日间模式、夜间模式、安防模式。设置时间，当时间介于6:05-18:05区间时，进入日间模式；当时间介于18:06-00:10区间时，进入夜间模式；当时间介于0:11-06:04区间时，进入安防模式。,实例分析：本实例通过修改“timeEdit”控件的时间控制“lblMode”标签控件显示对应的模式。因此信号对象为timeEdit，具体操作步骤如下：（1）右击“timeEdit”控件
39、选择“转到槽”进入下一步骤。（2）选择“timeChanged(QTime)”信号，单击“确定”按钮进入下一步骤。（3）在“void Dialog:on_timeEdit_timeChanged(const QTime &date)”槽方法中加入如下代码：,void Dialog:on_timeEdit_timeChanged(const QTime ,（4）设置完成，运行效果如图1-90所示。,图1-90 运行效果,3. Date Edit控件：常用信号方法为“dateChanged(QDate)”。表示为当前日期改变时触发，传递的参数为当前的日期。实例：如图1-88所示，日历查询显示当天时
40、期，并判断季节，更改日期时，自动判断季节（春季为月）。,实例分析：本实例通过修改“dateEdit”控件的日期控制“lblSea”标签控件显示对应的季节。因此信号对象为dateEdit，具体操作步骤如下：（1）右击“dateEdit”控件选择“转到槽”进入下一步骤。（2）选择“dateChanged(QDate)”信号，单击“确定”按钮进入下一步骤。（3）在“void Dialog:on_dateEdit_dateChanged(const QDate &date)” 槽方法中加入如下代码：,void Dialog:on_dateEdit_dateChanged(const QDate ,（4）设置完成，运行效果如图1-91所示。,图1-91 运行效果,
