【玄铁杯第三届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 音乐播放器 音乐播放器，之前的文章已经介绍过，详见：https://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 视频播放器 视频播放器，之前的文章也介绍过，详见：https://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

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