【玄铁杯第三届RISC-V应用创新大赛】LicheePi 4A pyQt简易汽车中控UI框架

DDZZ669

【玄铁杯第三届RISC-V应用创新大赛】LicheePi 4A pyQt简易汽车中控UI框架 [复制链接]

 

本篇来使用pyQt设计一个简易汽车中控UI，并在LicheePi4A上运行测试。 之前的文章，在LicheePi4A中使用pyQt时，如果在外接HDMI显示器，运行pyQt程序会提示错误，通过MobaXerm远程登录，可以在MobaXerm的远程界面中运行，本篇仍以这种方式测试pyQt在LicheePi4A中的运行。 # 1 主界面 设计的简易汽车中控UI界面如下，将各个功能模块的图片排列在主界面上，通过点击图标，可进入到对应的子功能界面中：  ## 1.1 界面布局 主界面的界面布局的主页代码如下，通过QPushButton实现功能按钮，通过QHBoxLayout和QVBoxLayout进行视频和垂直布局： ```python class mainWindow(QMainWindow):     def __init__(self):         super().__init__()         self.main_UI()         self.button_UI()              def main_UI(self):         self.setFixedSize(WIN_WIDTH, WIN_HEIGHT)         self.setWindowTitle("主窗口")                  self.mainWight = QWidget()         self.mainLayout = QVBoxLayout()         self.mainWight.setLayout(self.mainLayout)         self.setCentralWidget(self.mainWight)              def button_UI(self):         # 各个APP启动按钮                  # 第一排         # <<<音乐>>>         self.musicAppBtn = QPushButton(self)         self.musicAppBtn.setStyleSheet("QPushButton{border-image: url(resource/app_music.png)}")         self.musicAppBtn.setFixedSize(48, 48)         self.musicAppLabel = QLabel(self)         self.musicAppLabel.setText("音乐")         self.musicAppLabel.setAlignment(Qt.AlignCenter)         self.vboxMusicApp = QVBoxLayout()         self.vboxMusicApp.addWidget(self.musicAppBtn)         self.vboxMusicApp.addWidget(self.musicAppLabel)         # <<<视频>>>         self.videoAppBtn = QPushButton(self)         self.videoAppBtn.setStyleSheet("QPushButton{border-image: url(resource/app_video.png)}")         self.videoAppBtn.setFixedSize(48, 48)         self.videoAppLabel = QLabel(self)         self.videoAppLabel.setText("视频")         self.videoAppLabel.setAlignment(Qt.AlignCenter)         self.vboxVideoApp = QVBoxLayout()         self.vboxVideoApp.addWidget(self.videoAppBtn)         self.vboxVideoApp.addWidget(self.videoAppLabel)         # 省略...                  # 第二排         # <<<车前路况>>>         self.cameraAppBtn = QPushButton(self)         self.cameraAppBtn.setStyleSheet("QPushButton{border-image: url(resource/app_camera.png)}")         self.cameraAppBtn.setFixedSize(48, 48)         self.cameraAppLabel = QLabel(self)         self.cameraAppLabel.setText("车前路况")         self.cameraAppLabel.setAlignment(Qt.AlignCenter)         self.vboxCameraApp = QVBoxLayout()         self.vboxCameraApp.addWidget(self.cameraAppBtn)         self.vboxCameraApp.addWidget(self.cameraAppLabel)         # 省略...                  # 布局         self.vboxAppBtnLine1 = QHBoxLayout()         self.vboxAppBtnLine1.addStretch(1)         self.vboxAppBtnLine1.addLayout(self.vboxMusicApp)         self.vboxAppBtnLine1.addStretch(1)         self.vboxAppBtnLine1.addLayout(self.vboxVideoApp)         self.vboxAppBtnLine1.addStretch(1)         self.vboxAppBtnLine1.addLayout(self.vboxClockApp)         self.vboxAppBtnLine1.addStretch(1)         self.vboxAppBtnLine1.addLayout(self.vboxWeatherApp)         self.vboxAppBtnLine1.addStretch(1)         self.vboxAppBtnLine1.addLayout(self.vboxDHT11App)         self.vboxAppBtnLine1.addStretch(1)                  self.vboxAppBtnLine2 = QHBoxLayout()         self.vboxAppBtnLine2.addStretch(1)         self.vboxAppBtnLine2.addLayout(self.vboxCameraApp)         self.vboxAppBtnLine2.addStretch(1)         self.vboxAppBtnLine2.addLayout(self.vboxMapApp)         self.vboxAppBtnLine2.addStretch(1)         self.vboxAppBtnLine2.addLayout(self.vboxCarInfoApp)         self.vboxAppBtnLine2.addStretch(1)         self.mainLayout.addStretch(1)         self.mainLayout.addLayout(self.vboxAppBtnLine1)         self.mainLayout.addStretch(1)         self.mainLayout.addLayout(self.vboxAppBtnLine2)         self.mainLayout.addStretch(1) ``` ## 1.2 启动子界面 利用信号和槽机制，实现子界面的进入，在进入子界面时，可以把主界面进行关闭，实现简易的界面切换效果。 主要代码如下： ```python class mainWindow(QMainWindow):                 # 省略...                  # 信号和槽         self.musicAppBtn.clicked.connect(self.startMusicApp)         self.musicAppBtn.clicked.connect(self.close)         self.videoAppBtn.clicked.connect(self.startVideoApp)         self.videoAppBtn.clicked.connect(self.close)         self.clockAppBtn.clicked.connect(self.startClockTimeApp)         self.clockAppBtn.clicked.connect(self.close)     def startMusicApp(self):         print("startMusicApp...")         self.w1 = MusicPlayer()         self.w1.show()              def startVideoApp(self):         print("startVideoApp...")         self.w2 = VideoPlayer()         self.w2.show()         def startClockTimeApp(self):         print("startClockTimeApp...")         self.w2 = ClockTimeWidget()         self.w2.show() ``` # 2 功能界面 ## 2.1 音乐播放器 音乐播放器，之前的文章已经介绍过，详见：http://bbs.eeworld.com.cn/thread-1258095-1-1.html  本篇中，主要增加了一个返回主界面的功能，通过右上角的图标按钮，实现音乐界面到主界面的切换。 主要代码如下： ```python # 返回主页 def returnHome(self):     print("return home")     from homeUI import mainWindow     self.homeWindow = mainWindow()     self.homeWindow.show() ``` ## 2.2 视频播放器 视频播放器，之前的文章也介绍过，详见：http://bbs.eeworld.com.cn/thread-1258130-1-1.html  视频播放界面返回主界面的逻辑，与音乐播放器中的类似。 ## 2.3 时钟 这里设计了一个简易的时钟界面，通过圆形表盘加指针和数码显示两种形式，显示当前的时间。  圆形表盘加指针形式的时钟的主要代码如下： ```python # 圆形时钟 class ClockWidget(QLabel):     def __init__(self,parent  =None):         super(ClockWidget,self).__init__(parent)         self.timer = QTimer()  # 定时器         self.timer.timeout.connect(self.update)         self.timer.start(1000)  # 每1s 更新一次     def textRectF(self,radius,pointsize,angle):         recf = QRectF()         recf.setX(radius*math.cos(angle*math.pi/180.0)-pointsize*2)         recf.setY(radius*math.sin(angle*math.pi/180.0)-pointsize/2.0)         recf.setWidth(pointsize*4)#宽度、高度         recf.setHeight(pointsize)         return recf     def paintEvent(self, event):         hour_points = [QPoint(5,8),QPoint(-5,8),QPoint(0,-30)]         minute_points = [QPoint(5,8),QPoint(-5,8),QPoint(0,-65)]         second_points = [QPoint(5,8),QPoint(-5,8),QPoint(0,-80)]         hour_color = QColor(200,100,0,200)         minute_color = QColor(0,127,127,150)         second_color = QColor(0,160,230,150)         min_len = min(self.width(),self.height())         time = QTime.currentTime() #获取当前时间         painter = QPainter(self)         painter.setRenderHint(QPainter.Antialiasing)         painter.translate(self.width()/2,self.height()/2)#平移到窗口中心         painter.scale(min_len/200.0,min_len/200.0) #进行尺度缩放         #----------绘制时针------------         painter.setPen(Qt.NoPen)         painter.setBrush(hour_color)#颜色         painter.save()         # 根据 1小时时= 30°，水品方向逆时针旋转时针         painter.rotate(30.0*((time.hour()+time.minute()/60.0)))         painter.drawConvexPolygon(QPolygon(hour_points))         painter.restore() # save 退出，可重新设置画笔         painter.setPen(hour_color)         #绘制小时线(360/12 = 30度)         for i in range(12):             painter.drawLine(88,0,96,0)#绘制水平线             painter.rotate(30.0)# 原有旋转角度上进行旋转；         radius = 100 # 半径         font = painter.font()         font.setBold(True)         painter.setFont(font)         pointSize = font.pointSize()#字体大小         # print(pointSize)         #绘制小时文本         for i in range(12):             nhour = i + 3 # 从水平 3 点进行绘制             if(nhour>12):                 nhour -= 12             painter.drawText(self.textRectF(radius*0.8,pointSize,i*30),Qt.AlignCenter,str(nhour))         #绘制分针;         painter.setPen(Qt.NoPen)         painter.setBrush(minute_color)         painter.save()         # 1分钟为6°，         painter.rotate(6.0*(time.minute()+time.second()/60.0))         painter.drawConvexPolygon(QPolygon(minute_points))         painter.restore()         #绘制分针线         painter.setPen(minute_color)         for i in range(60):             if(i%5 !=0):                 painter.drawLine(92,0,96,0)             painter.rotate(6.0)         #绘制秒针         painter.setPen(Qt.NoPen)         painter.setBrush(second_color)         painter.save()         #绘制秒线         painter.rotate(6.0*time.second())         painter.drawConvexPolygon(QPolygon(second_points))         painter.restore()         painter.setPen(second_color)         for i in range(360):             if(i%5!=0 or i%30!=0):#绘制                 painter.drawLine(94,0,96,0)             painter.rotate(1.0)#旋转 ``` # 3 总结 本篇主要介绍了使用pyQt设计一个简易汽车中控UI，并通过MobaXerm远程登录与运行的方式，实现在LicheePi4A上运行测试。目前功能界面中，实现了音乐播放器、视频播放器、时钟功能的集成，后续继续基于此框架，集成汽车中控中的其它功能。

wangerxian

大佬，用QML设计界面呀，QT原生的太丑了0.0

chejm

感谢楼主提供的技术分享，先收藏学习再发表个人意见，顶起来