看完這篇文章你會得到的成果圖
這篇文章，主要是設計給我自己要用的 Video Player 畫 ROI 工具。
所以很多功能都是替我自己客製化。
此篇文章的範例程式碼 github
https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day27_video_roi_project
之前內容的重點複習 (前情提要)
我們接下來的討論，會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。
【PyQt5】Day 5 – 開始來設計我們的 controller.py，改以「程式角度」來說明如何建立 PyQt 的系統
設計我們的 UI
這篇文章由於是我在撰寫 day25 的時候另外寫的，還沒有做出 day26 的優化更新，
如果有興趣的可以自己再改，這邊只專注在講新增的功能
主要就是新增滑條的部分，新元素的名稱：
- self.button_clear_points：清除目前有的點
- self.button_generate_rois：產生 roi 用按鈕
- self.text_save_points：顯示儲存的點
- self.text_output_rois：顯示 roi 結果
轉換 day27.ui -> UI.py
pyuic5 -x day27.ui -o UI.py
執行看看 UI.py 畫面是否如同我們想像
一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能
- 看看我們製作出來的介面
python UI.py
設計我們的 controller
video_controller 新增功能
連結按鍵
連結這兩個按鍵至兩個對應的 function
def set_video_player(self):
self.ui.button_clear_points.clicked.connect(self.clear_points)
self.ui.button_generate_rois.clicked.connect(self.generate_rois)
以按鍵更新文字框
按下按鍵後，就要進行對應的文字更新，
- 如果是清除鍵，除了文字清空外，也要把儲存的點清空。
- 如果是產生 roi 鍵，就把現有的點輸出成我要的格式。
def clear_points(self):
self.list_collect_points = []
self.__update_text_show_points()
def __update_text_show_points(self):
msg = "Current points (right click to return origin):\n"
for ele in self.list_collect_points:
msg += f"({ele[0]},{ele[1]})\n"
self.ui.text_save_points.setText(msg)
def generate_rois(self):
msg = "[\n"
for ele in self.list_collect_points:
msg += f"[{ele[0]},{ele[1]}],\n"
msg += "]"
self.ui.text_output_rois.setText(msg)
設定滑鼠控制，建立「畫點畫線」的機制
替我們的 Qlabel 定義一個按鍵 function，
偵測 Qlabel 上的滑鼠點擊事件，並儲存座標進 self.list_collect_points 裡面。
新增點之後，更新點至顯示畫面。
def mouse_press_event(self, event):
print(f"[show_mouse_press] {event.x()=}, {event.y()=}, {event.button()=}")
norm_x = event.x()/self.qpixmap.width()
norm_y = event.y()/self.qpixmap.height()
if event.button() == 2: # right clicked
self.list_collect_points.append(self.list_collect_points[0])
self.__update_text_show_points()
def __update_points_onscreen(self, frame):
if len(self.list_collect_points) == 0:
pass
else: # len(list) >= 1
# first points
frame = opencv_engine.draw_point(frame, point=self.list_collect_points[0], color = (0, 0, 255)) # red
# if len = 1, no lines
for idx in range(1, len(self.list_collect_points)):
frame = opencv_engine.draw_point(frame, point=self.list_collect_points[idx], color = (0, 0, 255)) # red
frame = opencv_engine.draw_line(frame, start_point =self.list_collect_points[idx-1], end_point=self.list_collect_points[idx], color = (0, 255, 0)) # green
return frame
這邊「畫點畫線」的功能，我們去 opencv_engine 新增
新增畫點畫線功能，使用 OpenCV
class opencv_engine(object):
@staticmethod
def norm_point_to_int(img, point):
img_height, img_width, img_channel = img.shape
return (int(img_width*point[0]), int(img_height*point[1]))
@staticmethod
def draw_point(img, point=(0, 0), color = (0, 0, 255)): # red
point = opencv_engine.norm_point_to_int(img, point)
# print(f"get {point=}")
point_size = 10
thickness = 4
return cv2.circle(img, point, point_size, color, thickness)
@staticmethod
def draw_line(img, start_point = (0, 0), end_point = (0, 0), color = (0, 255, 0)): # green
start_point = opencv_engine.norm_point_to_int(img, start_point)
end_point = opencv_engine.norm_point_to_int(img, end_point)
thickness = 3 # width
return cv2.line(img, start_point, end_point, color, thickness)
測試結果
好啦，我自己要用的話 Video Player 畫 ROI 工具就這樣完成了!!!
