智能家居系统项目一设计智能家居软件系统的界面课件.pptx
《智能家居系统项目一设计智能家居软件系统的界面课件.pptx》由会员分享,可在线阅读,更多相关《智能家居系统项目一设计智能家居软件系统的界面课件.pptx(89页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、项目一 设计智能家居软件系统的界面 智能家居系统开发智能家居系统开发配套配套PPTPPT01.创建第一个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):Label控件
5、的宽度。高度(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”,并将构建目录指向该项目中的Debug文件
6、夹。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”,弹出“选择资源”对话框,选择图片背景后确认。03
8、.环境数据检测页面的设计使用Label和LCD Number控件进行环境数据检测部分界面的设计。其中,温度和湿度值为十进制显示,保留两位小数。光照和烟雾值为十六进制显示。LCD Number控件是显示控件组(Display Widgets)的另一个常用控件,用于显示一个和LCD一样的数字。它可以显示几乎任意大小的数字,可以显示十进制、十六进制、八进制或二进制数。1.LCD Number控件常用属性(1)value:LCD Number控件显示的值。(2)mode:LCD Number控件的显示模式。其中Dec为十进制,Hex为十六进制,Bin为二进制,Oct为八进制。如:将LCD Number
9、的值设为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&str):设置LCD Number控件显示的值。该方法中的参数可以为整数、浮点数或
10、者字符串。如:“ui-lcdNumber-display(10);”,“ui-lcdNumber-display(10.1);”或者“ui-lcdNumber-display(“10”);”。(2)void setDecMode()/setHexMode()/setBinMode()/setOctMode():将LCD Number控件设置为对应的显示模式。如:“ui-lcdNumber-setHexMode()”,表示设置该LCD Number控件显示模式为十六进制。(3)void setNumDigits(int nDigits):设置LCD Number控件显示的数据位数。如:“ui-l
11、cdNumber-setDigitCount(5)”,表示设置该LCD Number控件显示位数为5位。3.设置LCD Number控件样式(1)文本、背景颜色的修改与Label控件一样,使用样式表中的“color”修改文本颜色,“background-color”修改背景颜色。在修改前需将LCD Number控件的“SegmentStyle”属性设置为“Flat”,否则文本颜色不能被修改。(2)边框的设置使用样式表中的“border”对LCD Number的边框进行设置。2.按图1-28的布局,将Label控件和LCD Number控件拖入界面中。3.编辑Label的文字和颜色,效果如图1-
12、31所示。注意:为了代码编写方便,“求助按钮”、“有人求助”、“人体感应”和“有人”是由不同的Label控件控制的。设置“有人求助”控件名为“lblHB”,“有人”控件名为“lblHI”。图1-31 Label控件的设置1.打开项目“SmartHome”,进入界面文件“dialog.ui”。4.设置四个LCD的控件名分别为“lcdTemp”(温度)、“lcdHumidity”(湿度)、“lcdIllumination”(光照度)和“lcdSmoke”(烟雾)。5.设置LCD Number控件属性。温度和湿度均为十进制显示,保留两位小数,如图1-32所示。光照和烟雾为十六进制显示,如图1-33所
13、示。图1-32 温度、湿度控件的设置图1-33 光照、烟雾控件的设置6.设置完成。运行效果如图1-28所示。04.图片按钮控制界面的设计在智能家居软件系统中,为了让用户更加直观的对设备进行控制,加入了一些图片控制按钮,如LED灯、报警灯、电动窗帘等。用户可以通过点击这些图片更新界面中对应设备的状态。按钮控件组(Buttons)Push Button:按钮。Radio Button:单选按钮。Check Box:复选框。Push Button控件常用属性text:Push Button控件的显示文本。enable:按钮是否可用,默认为勾选状态。若取消选中,则此按钮不可用。cursor:鼠标经过时
14、指针图标样式。默认为箭头样式。flat:设置背景是否透明,默认为未勾选。若勾选此项,则此按钮设置为背景透明。当Push Button控件作为图片按钮时此项为必选项。Push Button控件常用方法QString text():返回Push Button控件的显示文本。void setText(const QString&text):设置Push Button控件的显示文本。void setEnabled(bool);:设置Push Button控件是否可用。如“ui-pushButton-setEnabled(false);”,表示设置该按钮不可用。设置Push Button控件样式使用样式
15、表中的“color”修改文本颜色,“background-color”修改背景颜色,使用“border”修改边框颜色。2.拖入一个Push Button控件至界面中,放置至LED灯的位置。如图1-38所示。图1-38 将控件拖入界面3.修改其控件名为“btnLED1”,将其text属性设为空。1.打开项目“SmartHome”,进入界面文件“dialog.ui”。4.右击“btnLED1”,选择“改变样式表”。在“添加资源”下拉列表中选择“border-image”,弹出“选择资源”对话框,选择图片后确认。如图1-39所示。5.用鼠标将“btnLED1”调整至合适尺寸,如图1-40所示。图1-
16、39 设置按钮图片图1-40 调整按钮大小 图1-41 运行效果6.用相同方法,完成“btnLED2”,“btnLED3”,“btnLED4”,“btnStepMotor”,“btnBuzz”控件的设置。7.将所有按钮的focusPolicy属性设置为Nofocus,flat属性设为true。8.设置完成。运行效果如图1-41所示。注意:在制作图片按钮时,使用Push Button控件的“高度”和“宽度”属性,可以更加精确的调整按钮尺寸。以制作btnLED1按钮为例,步骤如下:1.获取原图片的大小:右击图片,选择“属性”,如图1-42所示。在“图像”选项卡中看到改图片的宽度为70像素,高度为5
17、3像素。图1-42 查看图片尺寸2.设置btnLED1按钮的高度为70像素,宽度为53像素。如图1-43所示。图1-43 btnLED1按钮属性05.空调控制界面的设计使用Push Button控件和Spin Box控件对空调控制界面进行设计,利用Spin Box控件调节空调温度,范围在16-32摄氏度之间。输入控件组(Input Widgets)Line Edit:行文本编辑器。Spin Box:整数数字盒子。Time Edit:时间编辑器。Date Edit:日期编辑器。Date/Time Edit:日期/时间编辑器。Dial:拨号器。Horizontal Scroll Bar:横向滚动条
18、。Vertical Scroll Bar:垂直滚动条。Horizontal Slider:横向滑块。Vertical Slider:垂直滑块。Spin Box控件常用属性minimum:设置Spin Box控件的最小值。maximum:设置Spin Box控件的最大值。value:设置Spin Box控件的当前值。注意该值必须在最小值和最大值之间。singleStep:设置单次步进值,默认值为1。buttonSymbols:设置SpinBox控件右侧按钮样式。Spin Box控件常用方法int value():返回Spin Box的当前值。void setValue(int val);:设置S
19、pin Box的当前值,该值必须在Spin Box控件的范围内。如:“ui-spinBox-setValue(10);”。2.向界面拖入一个Push Button控件,“text”属性设置为空。设置控件样式的“border-image”为空调图片,如图1-49所示。图1-49 设置控件样式1.打开项目“SmartHome”,进入界面文件“dialog.ui”。3.拖入两个Push Button控件和一个Spin Box控件,布局如图1-44所示,设置两个Push Button的控件名分别为“btnAirjKg”和“btnAirjSz”,“text”属性分别为“开”和“设置”。设置Spin Bo
20、x的控件名为“spAirj”,“minimum”属性为16,“maximum”属性为32。4.设置完成。运行效果如图1-44所示。06.工作模式界面的设计在智能家居软件系统中设置了三种工作模式:单控模式、联动模式和自定义模式。为了消除模式间的互相干扰。将这三种模式放入了不同的容器中。容器控件组(Containers)Group Box:组框。Tab Widget:标签部件。Widget:部件。tabWidget控件常用属性currentIndex:tabWidget控件当前标签索引值,索引值是从0开始计数。如图1-51中“单控模式”的索引值为0,“联动模式”、“自定义模式”的索引值依次1、2。
21、currentTabText:tabWidget控件当前标签文本。tabPosition:tabWidget控件的标签显示位置。默认值为North(上部),另外可以设置South(下部)、West(左部)、East(右部)。tabWidget控件常用方法int currentIndex():返回当前标签的索引号。void setCurrentIndex(int index):设置Widget当前标签的索引号。2.将tabWidget控件拖入界面并调整到合适位置。设置该控件的空间名为tbMode。3.设置标签0的文本为“单控模式”,标签1的文本为“联动模式”。4.在标签1状态下右击鼠标选择“插入
22、页”“在当前页之后”。修改该标签的文本为“自定义模式”。5.设置完成。运行效果如图1-50所示。1.打开项目“SmartHome”,进入界面文件“dialog.ui”。07.单控模式界面的设计本任务进行单控模式界面的设计。在界面中,使用使用Radio Button和Push Button控件控制LED灯的闪烁和跑马灯效果。使用Date/Time Edit控件显示当前系统时间,使用Radio Button和Push Button控件可以进行时间设置。使用Label控件显示最高温度和最低温度。Radio Button(单选按钮)是Buttons控件组的常用控件,用于进行单项选择。上节中已提到为防止
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 智能家居 系统 项目 设计 软件 界面 课件
限制150内