看完這篇文章你會得到的成果圖
- 多了一條滑條,我們可以直接控制,另外我們也可以直接透過滑條來操控進度
- 另外這次有解決上一篇 lag 的問題,會說明原因以及解法。
此篇文章的範例程式碼 github
之前內容的重點複習 (前情提要)
我們接下來的討論,會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。
【PyQt5】Day 5 – 開始來設計我們的 controller.py,改以「程式角度」來說明如何建立 PyQt 的系統
設計我們的 UI
主要就是新增滑條的部分,新元素的名稱:
- self.slider_videoframe:滑條
轉換 day26.ui -> UI.py
pyuic5 -x day26.ui -o UI.py
執行看看 UI.py 畫面是否如同我們想像
一樣,這程式只有介面 (視覺上的呈現),沒有任何互動功能
- 看看我們製作出來的介面
python UI.py
設計我們的 controller
使用 QSlider
我們已經在 【PyQt5】Day 14 – 使用 QSlider 製作可拖曳的滑條 有詳細的教學 QSlider 該如何使用了,
這邊我們就直接使用吧!
def init_video_info(self):
self.ui.slider_videoframe.setRange(0, self.video_total_frame_count-1)
self.ui.slider_videoframe.valueChanged.connect(self.getslidervalue)
def __get_frame_from_frame_no(self, frame_no):
self.setslidervalue(frame_no)
def getslidervalue(self):
self.current_frame_no = self.ui.slider_videoframe.value()
def setslidervalue(self, value):
self.ui.slider_videoframe.setValue(self.current_frame_no)