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

基于Dragonboard 410c的智能魔镜设计(8)——python脚本实现UI原型,第1张

在上一篇文章中,已经跟大家介绍如何智能魔镜的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交互功能。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/dianzi/2554073.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-08-06
下一篇 2022-08-06

发表评论

登录后才能评论

评论列表(0条)

保存