Qualcomm技术论坛
直播中

喻唯

7年用户 292经验值
私信 关注
[经验]

基于dragonboard 410c的智能魔镜设计(8)UI的python脚本实现

      在http://blog.csdn.net/andymfc/article/details/54580647中,已经跟大家介绍如何智能魔镜的UI原型设计,并且采用designer.exe工具完成了原始的魔镜UI界面设计,可以看出,整个魔镜的UI设计非常简单,但是如果要实心较好的效果,我们单独使用designer.exe工具很难完成,这就需要我们在完成原型设计后得到的xml文件进行进一步的修改和细化,以达到我们的设计要求。

      这里,大家可以直接修改designer.exe文件的xml的元素的属性等来调节和细化UI,同时也可以使用pyuic5工具将其转换成py脚本,然后对其进行修改,本文在设计中,直接使用pyuic5工具将其进行了转换,然后进行修改,最终得到的UI代码如下:

     # -*- coding: utf-8 -*-

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):

    def setupUi(self, MainWindow):

        MainWindow.setObjectName("MainWindow")

        desktopRect=QtWidgets.QDesktopWidget().screenGeometry()

        MainWindow.resize(desktopRect.width(), desktopRect.height())

        icon = QtGui.QIcon()

        icon.addPixmap(QtGui.QPixmap(":/images/icon"), QtGui.QIcon.Normal, QtGui.QIcon.Off)

        MainWindow.setWindowIcon(icon)

        self.centralWidget = QtWidgets.QWidget(MainWindow)

        self.centralWidget.setObjectName("centralWidget")

        self.centralWidget.resize(357, 1059)

        self.temp = QtWidgets.QLabel(self.centralWidget)

        self.centralWidget.setGeometry(desktopRect.width()-self.centralWidget.width(),0,self.centralWidget.width(),self.centralWidget.height())

        self.temp.setGeometry(QtCore.QRect(20, 60, 231, 100))

        font = QtGui.QFont()

        font.setFamily("楷体")

        font.setPointSize(40)

        font.setBold(False)

        font.setWeight(50)

        self.temp.setFont(font)

        self.temp.setText("")

        self.temp.setAlignment(QtCore.Qt.AlignCenter)

        self.temp.setObjectName("temp")

        self.city = QtWidgets.QLabel(self.centralWidget)

        self.city.setGeometry(QtCore.QRect(50, 160, 150, 30))

        font = QtGui.QFont()

        font.setPointSize(13)

        font.setBold(True)

        font.setWeight(75)

        self.city.setFont(font)

        self.city.setText("")

        self.city.setAlignment(QtCore.Qt.AlignCenter)

        self.city.setObjectName("city")

        self.date = QtWidgets.QLabel(self.centralWidget)

        self.date.setGeometry(QtCore.QRect(30, 245, 211, 25))

        font = QtGui.QFont()

        font.setPointSize(10)

        font.setBold(True)

        font.setWeight(75)

        self.date.setFont(font)

        self.date.setText("")

        self.date.setAlignment(QtCore.Qt.AlignCenter)

        self.date.setObjectName("date")

        self.closeButton = QtWidgets.QPushButton(self.centralWidget)

        self.closeButton.setGeometry(QtCore.QRect(240, 5, 25, 25))

        self.closeButton.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))

        self.closeButton.setText("")

        self.closeButton.setFlat(True)

        self.closeButton.setObjectName("closeButton")

        #self.layoutWidget = QtWidgets.QWidget(self.centralWidget)

        self.layoutWidget = QtWidgets.QWidget(MainWindow)

        self.layoutWidget.setGeometry(QtCore.QRect(0, desktopRect.height()-170, desktopRect.width(), 170))

        self.layoutWidget.setObjectName("layoutWidget")

        self.horizontalLayout = QtWidgets.QHBoxLayout(self.layoutWidget)

        self.horizontalLayout.setContentsMargins(11, 11, 11, 11)

        self.horizontalLayout.setSpacing(6)

        self.horizontalLayout.setObjectName("horizontalLayout")

        self.gridLayout = QtWidgets.QGridLayout()

        self.gridLayout.setContentsMargins(11, 11, 11, 11)

        self.gridLayout.setSpacing(8)

        self.gridLayout.setObjectName("gridLayout")

        self.forecast_0_date = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_0_date.setMinimumSize(QtCore.QSize(80, 20))

        self.forecast_0_date.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_0_date.setFont(font)

        self.forecast_0_date.setText("")

        self.forecast_0_date.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_0_date.setObjectName("forecast_0_date")

        self.gridLayout.addWidget(self.forecast_0_date, 0, 0, 1, 1)

        self.forecast_0_type = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_0_type.setMinimumSize(QtCore.QSize(78, 75))

        self.forecast_0_type.setText("")

        self.forecast_0_type.setScaledContents(True)

        self.forecast_0_type.setObjectName("forecast_0_type")

        self.gridLayout.addWidget(self.forecast_0_type, 1, 0, 1, 1)

        self.forecast_0_temp = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_0_temp.setMinimumSize(QtCore.QSize(75, 20))

        self.forecast_0_temp.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_0_temp.setFont(font)

        self.forecast_0_temp.setText("")

        self.forecast_0_temp.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_0_temp.setObjectName("forecast_0_temp")

        self.gridLayout.addWidget(self.forecast_0_temp, 2, 0, 1, 1)

        self.horizontalLayout.addLayout(self.gridLayout)

        self.gridLayout_2 = QtWidgets.QGridLayout()

        self.gridLayout_2.setContentsMargins(11, 11, 11, 11)

        self.gridLayout_2.setSpacing(8)

        self.gridLayout_2.setObjectName("gridLayout_2")

        self.forecast_1_date = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_1_date.setMinimumSize(QtCore.QSize(75, 20))

        self.forecast_1_date.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_1_date.setFont(font)

        self.forecast_1_date.setText("")

        self.forecast_1_date.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_1_date.setObjectName("forecast_1_date")

        self.gridLayout_2.addWidget(self.forecast_1_date, 0, 0, 1, 1)

        self.forecast_1_type = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_1_type.setMinimumSize(QtCore.QSize(78, 75))

        self.forecast_1_type.setText("")

        self.forecast_1_type.setScaledContents(True)

        self.forecast_1_type.setObjectName("forecast_1_type")

        self.gridLayout_2.addWidget(self.forecast_1_type, 1, 0, 1, 1)

        self.forecast_1_temp = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_1_temp.setMinimumSize(QtCore.QSize(75, 20))

        self.forecast_1_temp.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_1_temp.setFont(font)

        self.forecast_1_temp.setText("")

        self.forecast_1_temp.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_1_temp.setObjectName("forecast_1_temp")

        self.gridLayout_2.addWidget(self.forecast_1_temp, 2, 0, 1, 1)

        self.horizontalLayout.addLayout(self.gridLayout_2)

        self.gridLayout_3 = QtWidgets.QGridLayout()

        self.gridLayout_3.setContentsMargins(11, 11, 11, 11)

        self.gridLayout_3.setSpacing(6)

        self.gridLayout_3.setObjectName("gridLayout_3")

        self.forecast_2_date = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_2_date.setMinimumSize(QtCore.QSize(75, 20))

        self.forecast_2_date.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_2_date.setFont(font)

        self.forecast_2_date.setText("")

        self.forecast_2_date.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_2_date.setObjectName("forecast_2_date")

        self.gridLayout_3.addWidget(self.forecast_2_date, 0, 0, 1, 1)

        self.forecast_2_type = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_2_type.setMinimumSize(QtCore.QSize(78, 75))

        self.forecast_2_type.setText("")

        self.forecast_2_type.setScaledContents(True)

        self.forecast_2_type.setObjectName("forecast_2_type")

        self.gridLayout_3.addWidget(self.forecast_2_type, 1, 0, 1, 1)

        self.forecast_2_temp = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_2_temp.setMinimumSize(QtCore.QSize(75, 20))

        self.forecast_2_temp.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_2_temp.setFont(font)

        self.forecast_2_temp.setText("")

        self.forecast_2_temp.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_2_temp.setObjectName("forecast_2_temp")

        self.gridLayout_3.addWidget(self.forecast_2_temp, 2, 0, 1, 1)

        self.horizontalLayout.addLayout(self.gridLayout_3)

        self.gridLayout_4 = QtWidgets.QGridLayout()

        self.gridLayout_4.setContentsMargins(11, 11, 11, 11)

        self.gridLayout_4.setSpacing(6)

        self.gridLayout_4.setObjectName("gridLayout_4")

        self.forecast_3_date = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_3_date.setMinimumSize(QtCore.QSize(75, 20))

        self.forecast_3_date.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_3_date.setFont(font)

        self.forecast_3_date.setText("")

        self.forecast_3_date.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_3_date.setObjectName("forecast_3_date")

        self.gridLayout_4.addWidget(self.forecast_3_date, 0, 0, 1, 1)

        self.forecast_3_type = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_3_type.setMinimumSize(QtCore.QSize(78, 75))

        self.forecast_3_type.setText("")

        self.forecast_3_type.setScaledContents(True)

        self.forecast_3_type.setObjectName("forecast_3_type")

        self.gridLayout_4.addWidget(self.forecast_3_type, 1, 0, 1, 1)

        self.forecast_3_temp = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_3_temp.setMinimumSize(QtCore.QSize(75, 20))

        self.forecast_3_temp.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_3_temp.setFont(font)

        self.forecast_3_temp.setText("")

        self.forecast_3_temp.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_3_temp.setObjectName("forecast_3_temp")

        self.gridLayout_4.addWidget(self.forecast_3_temp, 2, 0, 1, 1)

        self.horizontalLayout.addLayout(self.gridLayout_4)

        self.gridLayout_5 = QtWidgets.QGridLayout()

        self.gridLayout_5.setContentsMargins(11, 11, 11, 11)

        self.gridLayout_5.setSpacing(6)

        self.gridLayout_5.setObjectName("gridLayout_5")

        self.forecast_4_date = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_4_date.setMinimumSize(QtCore.QSize(75, 20))

        self.forecast_4_date.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_4_date.setFont(font)

        self.forecast_4_date.setText("")

        self.forecast_4_date.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_4_date.setObjectName("forecast_4_date")

        self.gridLayout_5.addWidget(self.forecast_4_date, 0, 0, 1, 1)

        self.forecast_4_temp = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_4_temp.setMinimumSize(QtCore.QSize(75, 20))

        self.forecast_4_temp.setMaximumSize(QtCore.QSize(200, 40))

        font = QtGui.QFont()

        font.setFamily("微软雅黑")

        font.setPointSize(8)

        self.forecast_4_temp.setFont(font)

        self.forecast_4_temp.setText("")

        self.forecast_4_temp.setAlignment(QtCore.Qt.AlignCenter)

        self.forecast_4_temp.setObjectName("forecast_4_temp")

        self.gridLayout_5.addWidget(self.forecast_4_temp, 2, 0, 1, 1)

        self.forecast_4_type = QtWidgets.QLabel(self.layoutWidget)

        self.forecast_4_type.setMinimumSize(QtCore.QSize(78, 75))

        self.forecast_4_type.setText("")

        self.forecast_4_type.setScaledContents(True)

        self.forecast_4_type.setObjectName("forecast_4_type")

        self.gridLayout_5.addWidget(self.forecast_4_type, 1, 0, 1, 1)

        self.horizontalLayout.addLayout(self.gridLayout_5)

        self.layoutWidget1 = QtWidgets.QWidget(self.centralWidget)

        self.layoutWidget1.setGeometry(QtCore.QRect(10, 200, 120, 55))

        self.layoutWidget1.setObjectName("layoutWidget1")

        self.gridLayout_7 = QtWidgets.QGridLayout(self.layoutWidget1)

        self.gridLayout_7.setContentsMargins(11, 11, 11, 11)

        self.gridLayout_7.setSpacing(6)

        self.gridLayout_7.setObjectName("gridLayout_7")

        self.label_3 = QtWidgets.QLabel(self.layoutWidget1)

        self.label_3.setMinimumSize(QtCore.QSize(30, 30))

        self.label_3.setMaximumSize(QtCore.QSize(60, 30))

        font = QtGui.QFont()

        font.setPointSize(9)

        font.setBold(True)

        font.setWeight(75)

        self.label_3.setFont(font)

        self.label_3.setText("")

        self.label_3.setScaledContents(True)

        self.label_3.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)

        self.label_3.setObjectName("label_3")

        self.gridLayout_7.addWidget(self.label_3, 0, 0, 1, 1)

        self.shidu = QtWidgets.QLabel(self.layoutWidget1)

        #self.shidu.setFont(font)

        self.shidu.setMinimumSize(QtCore.QSize(30, 30))

        self.shidu.setMaximumSize(QtCore.QSize(60, 30))

        font = QtGui.QFont()

        font.setPointSize(9)

        font.setBold(False)

        font.setWeight(50)

        self.shidu.setFont(font)

        self.shidu.setText("")

        self.shidu.setAlignment(QtCore.Qt.AlignLeading|QtCore.Qt.AlignLeft|QtCore.Qt.AlignVCenter)

        self.shidu.setObjectName("shidu")

        self.gridLayout_7.addWidget(self.shidu, 0, 1, 1, 1)

        self.layoutWidget2 = QtWidgets.QWidget(self.centralWidget)

        self.layoutWidget2.setGeometry(QtCore.QRect(110, 200, 200, 55))

        self.layoutWidget2.setObjectName("layoutWidget2")

        self.gridLayout_8 = QtWidgets.QGridLayout(self.layoutWidget2)

        self.gridLayout_8.setContentsMargins(11, 11, 11, 11)

        self.gridLayout_8.setSpacing(6)

        self.gridLayout_8.setObjectName("gridLayout_8")

        self.fengxiang = QtWidgets.QLabel(self.layoutWidget2)

        self.fengxiang.setMinimumSize(QtCore.QSize(70, 30))

        self.fengxiang.setMaximumSize(QtCore.QSize(70, 30))

        font = QtGui.QFont()

        font.setPointSize(9)

        font.setBold(True)

        font.setWeight(75)

        self.fengxiang.setFont(font)

        self.fengxiang.setText("")

        self.fengxiang.setScaledContents(True)

        self.fengxiang.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)

        self.fengxiang.setObjectName("fengxiang")

        self.gridLayout_8.addWidget(self.fengxiang, 0, 0, 1, 1)

        self.fengli = QtWidgets.QLabel(self.layoutWidget2)

        self.fengli.setMinimumSize(QtCore.QSize(80, 30))

        self.fengli.setMaximumSize(QtCore.QSize(80, 30))

        font = QtGui.QFont()

        font.setPointSize(9)

        font.setBold(False)

        font.setWeight(50)

        self.fengli.setFont(font)

        self.fengli.setText("")

        self.fengli.setObjectName("fengli")

        self.gridLayout_8.addWidget(self.fengli, 0, 1, 1, 1)

        self.webMessageText = QtWebKitWidgets.QWebView(self.centralWidget)

        self.webMessageText.setGeometry(QtCore.QRect(10, 460, 331, 241))

        self.webMessageText.setUrl(QtCore.QUrl("about:blank"))

        self.webMessageText.setObjectName("webMessageText")

        self.webMemorandum = QtWebKitWidgets.QWebView(MainWindow)

        self.webMemorandum.setGeometry(QtCore.QRect(10, 30, 331, 180))

        self.webMemorandum.setUrl(QtCore.QUrl("about:blank"))

        self.webMemorandum.setObjectName("webMemorandum")

        font = QtGui.QFont()

        font.setPointSize(8)

        font.setBold(False)

        font.setWeight(50)

        self.helloWelcome = QtWidgets.QLabel(self.centralWidget)

        self.helloWelcome.setGeometry(QtCore.QRect(20, 10, 251, 31))

        self.helloWelcome.setFont(font)

        self.helloWelcome.setText("")

        self.helloWelcome.setObjectName("helloWelcome")

        self.webZhishu = QtWebKitWidgets.QWebView(self.centralWidget)

        self.webZhishu.setGeometry(QtCore.QRect(10, 290, 301, 150))

        self.webZhishu.setUrl(QtCore.QUrl("about:blank"))

        self.webZhishu.setObjectName("webZhishu")

        #MainWindow.setCentralWidget(self.centralWidget)

        self.retranslateUi(MainWindow)

        self.closeButton.clicked.connect(MainWindow.close)

        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):

        _translate = QtCore.QCoreApplication.translate

        MainWindow.setWindowTitle(_translate("MainWindow", "Weather"))

        self.closeButton.setToolTip(_translate("MainWindow", "关闭"))

from PyQt5 import QtWebKitWidgets

#import res_rc

     在这里进行的主要修改涉及两个方面,一个方面是字体的调整,还有一个就是自适应的调整,因为设计的过程中是按照横屏模式来进行设计的,而运行的过程中,会通过指令将系统调整成竖屏模式,因此就需要对其进行相关的调整,最终避免横竖屏切换的过程中的字体变化过大,影响界面美观。

     以上就是整个智能魔镜的UI设计,利用这个UI文件我们在智能魔镜系统中可以方便的通过import该类来完成UI的生成,实现智能魔镜的UI交互功能。

   

更多回帖

发帖
×
20
完善资料,
赚取积分