基于dragonboard 410c的智能魔镜设计（7）——UI原型设计

前面在相关的blog中已经对如何实现智能魔镜的消息检索、视频消息播放等进行了详细介绍，但是只是给出了相应的算法和设计逻辑代码，最终我们如果想在魔镜上进行消息的显示和视频播放，还需要构建UI系统来完成，这里我们前面 《Dragonbaord 410c Python交互设计》系列blog中对于在dragonboard 410c中的UI交互设计进行了介绍，并且教大家如何使用pyQt来构建自己的交互系统，同样在智能魔镜的设计中，我们将依然采用pyQt
SDK 和相应的工具来完成魔镜的UI设计。

这里我们参考了《Dragonbaord 410c Python交互设计》中天气预报demo的相关UI设计，因为我们也需要在魔镜上显示天气等信息，同时还增加了用户消息显示区域，在该区域我们要能够在魔镜检测出用户身份的时候自动的在镜子上推送该用户的消息进行显示，结合这些需求，我们整个UI设计原型图如下图1所示。



图1 智能魔镜UI原型图
基于上述原型，在设计中我们使用pyQt提供的designer.exe工具来完成，打开该工具后，如下图2所示：



该工具中提供了布局和各种控件工具，采用这些控件可以方便的按照UI原型设计的要求，完成原始界面的搭建，这里之所以叫原始界面，是应为整个界面只是搭建了一个框架，后续如果需要设计出符合魔镜UI交互要求的界面，还需要手动的去修改代码和进行调节，这里我们使用该工具按照原型设计完成界面布局和原始界面的设计效果如下图3所示。



完成后，我们就可以得到一个UI文件，这个UI文件在设计器中是以xml语言对各种控件和布局进行描述的，用文件查看器打开该文件后，部分内容如下：
<?xml version="1.0" encoding="UTF-8"?>

<ui version="4.0">

<class>MainWindow</class>

<widget class="QMainWindow" name="MainWindow">

<property name="geometry">

<rect>

<x>0</x>

<y>0</y>

<width>500</width>

<height>574</height>

</rect>

</property>

<property name="windowTitle">

<string>Weather</string>

</property>

<property name="windowIcon">

<iconset>

.............（由于代码太长中间部分省掉）

</property>

<property name="toolTip">

<string>换肤</string>

</property>

<property name="text">

<string/>

</property>

<property name="iconSize">

<size>

<width>25</width>

<height>25</height>

</size>

</property>

<property name="flat">

<bool>true</bool>

</property>

</widget>

<widget class="QLabel" name="label_3">

<property name="geometry">

<rect>

<x>270</x>

<y>280</y>

<width>211</width>

<height>91</height>

</rect>

</property>

<property name="text">

<string>消息</string>

</property>

</widget>

<widget class="QLabel" name="label_5">

<property name="geometry">

<rect>

<x>10</x>

<y>10</y>

<width>131</width>

<height>91</height>

</rect>

</property>

<property name="text">

<string>消息</string>

</property>

</widget>

<widget class="QLabel" name="label_6">

<property name="geometry">

<rect>

<x>280</x>

<y>10</y>

<width>211</width>

<height>21</height>

</rect>

</property>

<property name="text">

<string>欢迎，日期</string>

</property>

</widget>

</widget>

</widget>

<layoutdefault spacing="6" margin="11"/>

<resources/>

<connections>

<connection>

<sender>closeButton</sender>

<signal>clicked()</signal>

<receiver>MainWindow</receiver>

<slot>close()</slot>

<hints>

<hint type="sourcelabel">

<x>479</x>

<y>20</y>

</hint>

<hint type="destinationlabel">

<x>479</x>

<y>44</y>

</hint>

</hints>

</connection>

<connection>

<sender>minButton</sender>

<signal>clicked()</signal>

<receiver>MainWindow</receiver>

<slot>showMinimized()</slot>

<hints>

<hint type="sourcelabel">

<x>446</x>

<y>22</y>

</hint>

<hint type="destinationlabel">

<x>446</x>

<y>44</y>

</hint>

</hints>

</connection>

</connections>

</ui>
到这里我们就完成了整个智能魔镜的UI原型设计，后续我们只需要在该方案中，利用相关的工具将该原型文件转换成python脚本即可，后续blog中将向大家详细介绍如何使用工具将UI文件转换成python脚本，然后修改脚本最终完成智能魔镜的UI设计。