037 - 13th 鐵人賽 – 【今年還是不夠錢買psQQ，不如我們用PyQt自己寫一個】 on 嗡嗡的隨手筆記

【PyQt5】Day 30 - final project - 3 / 來搞一個自己的 photoshop 吧！把每個方法封裝起來製作出還原功能吧！ (結合 PyQt + OpenCV)

Fri, 15 Oct 2021 03:07:30 +0800

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day30_final_project_package_method

複習之前的內容 (前情提要)

完整版請參考：

我們之前討論到了我們是如何設計程式的程式架構，
以大概念來說，我們主軸還是圍繞在

UI
controller
start

三大面向，而 UI 我們已經透過 Qt desinger 設定完成，
而 start 沒什麼好說。
我們開始著重討論 controller 的細節。

獨立「圖像本身」與「圖像處理方法」，額外設計圖像處理介面。

我們選擇獨立「圖片本身」與「圖片處理方法」，
我們想避免把所有圖片的功能全部都做在我們的圖像中心 (image center) 裡面，
這樣會變成一個超級巨大的 class (又名為 god class)，
功能太多之後要維護一個特定功能太難了，所以我們才獨立「圖像處理方法」進行操作。

這部分是套用 design pattern 的設計原則 (使用 Interface Segregation Principle(ISP) 介面隔離原則)
我們可以把介面分離出來，更方便之後功能的維護。

介面設計與繼承方法

套用 design pattern 後 (使用 Interface Segregation Principle(ISP) 介面隔離原則)

套用 design pattern 的 Interface Segregation Principle(ISP) 介面隔離原則後，
我們把「修改圖片的方法」這個介面獨立出來，更方便我們維護「圖片修改」的部分。

而繼承的部分，從變更圖片的「所有共通方法 -> 滑條類方法/筆類方法 -> 各項細節方法」。

我們在 day29 的時候，介紹了每個功能的實作細節

day28，我們講解了我們系統的大架構，與 UI 的設計。
而 day 29，我們把每個細節的功能全部都介紹完了。

那今天我們還有什麼事情可以做呢?

今天我們要來談封裝方法，建構出「步驟的流程」

我們仔細觀察不論是小畫家或 photoshop 的程式，
都會有提供「還原」或「重做」的功能。

我們該如何在我們自己的 photoshop 實作出這種功能呢?

分析「還原」或「重做」的功能，別人是怎麼做出來的?

保存圖片流

首先，如果用最簡單的方法，也許我們可以存圖片?
也就是說，我們開一個 queue，「每更新一次畫面，就存一個 frame」，
這樣聽起來簡單暴力，但是可行XDDD

保存方法流 (保存變化量)

不過，如果我們再更仔細的觀察，因為如果「把每張圖都存起來」，
勢必會消耗大量的儲存空間，因此應該會有更好的優化方法，
我們思考有沒有可能對方存的只有「原圖 + 修改步驟」，
換句話說，也就是「原圖 + (圖片的變化量)」。

我們可以常常在還原功能那邊看到「上一個步驟」具體進行了什麼的操作，
而不是「保存的上一張圖片」，因此，我們也乾脆來實作一個保存「變更的方法」。

如果這樣子做，我們就可以省下大量的儲存圖片空間，
而且我們也可以直接知道上一個「步驟內容」是什麼。

介面微更新

我們新增了可以記錄步驟的框框，「還原」或「重做」的按鈕。

實作保存方法的機制

我們宣告了一個新的 class method_steps_recoder

class method_steps_recoder(object):
    def __init__(self, text_recordsteps):
        self.method_steps = []
        self.text_recordsteps = text_recordsteps

    def add_each_method_step(self, each_method_step):
        self.method_steps.append(each_method_step)

    def update_recordsteps(self):
        msg = f"All saved steps: 
"
        for idx, ele in enumerate(self.method_steps):
            msg +=(f"{idx+1}: {ele}
")
        self.text_recordsteps.setText(msg)

稍微想了一下，這個保存機制初始化的時間，
應該與圖片剛初始化的時間同時，
因此我們也在 class image_center 開始讀檔的時候，
宣告 method_steps_recoder()，同時傳入要修改的參數。

self.method_steps_recoder = method_steps_recoder(self.ui.text_recordsteps) # record steps

因為介面繼承的關係，我們可以輕鬆地增加記錄功能

我們上面已經把介面繼承寫得非常有架構了，因此這次要記錄步驟的功能，
我們只需要去更新上層的介面即可。

我們在 slider_method_interface 新增一個函數 append_each_method_step()，
並修改 slider_release_event(滑條釋放的時間)，會呼叫這個函數，保存這次的更新內容。

就完成了這部分的所有功能了!

class slider_method_interface(method_interface):
    # final update back to image center (not necessary, for double check)
    def slider_release_event(self):
        img = self.setimage(self.tmp_origin_img)
        self.append_each_method_step() # append all the methods include variables in to method_steps_recoder
        self.image_center.update_img(img)

    def append_each_method_step(self):
        self.image_center.method_steps_recoder.add_each_method_step(self) # append all the methods include variables in to method_steps_recoder

結果

因此，現在只要有滑條值的變化，都會啟動一次紀錄 (每拖曳並放開滑鼠時紀錄一次)，
如下所示：

【問題】然而，光是這樣的架構還不足以我們實現「還原」或「重做」

實作到此的我，發現目前想要實現出「還原」或「重做」，
還存在一些問題：

1. 還原上一步時，該如何復原目前圖片的變更？

依照演算法，很多對圖片的變更可能都是「對圖片的破壞性變更」，
也就是說，替圖片「減少一筆」的難度遠比「增加一筆」高出非常多。

2. 還原上一步時，哪些畫面上的零件也需要還原？

例如像是滑條顯示、步驟顯示，這些可能需要都被還原。
目前實作上只有處理圖片的架構比較完整，
但這些內容並沒有被好好的封裝起來，導致還原上有困難。

3. 滑條對應的內容，是「一個 instance」而不是「new 一個新的 instance」

這大概是我目前系統架構做不出還原功能的致命傷。
因為滑條只有一個，而照理來說「每滑條每變動一次」，
就應該要「new 一個新的滑條變動的 instance」，
因為目前這部分我是綁死再一起的，所以這邊確實應該還要再拆分。

預期未來解決問題的方法

上面三個問題，也可以濃縮成一個設計問題。
基本上我會考慮將機制改為，存「原圖 + 所有變化的方法」，
與上述不同的是不只是存「圖片的變化」，
這次連 UI 當下的狀態可能也需要被儲存下來。

因此，未來如果要繼續實作這部分的功能。
我會考慮把「儲存的方法」改為存「UI 變化設定 & 當下圖的圖片變化」

系統運作的邏輯會類似保存：

原圖 -> 圖面＆UI變化 -> 圖面＆UI變化 -> 圖面＆UI變化...

所以我們紀錄的東西反而是「步驟」，
至於還原的時候，可以以當時保存最舊的圖片，
依照「步驟」全部重新運算，
應該就能夠如我們預期的完成「還原」或「重做」的功能。

優化效能

此外，我們要處理一下我們系統的效能優化，
昨天的程式執行後，如果是不夠強大的 CPU，或解析度太大的圖片，

會沒有辦法應付「移動滑條」造成「圖片的連續變化」運算。

【修改】我們暫時先移除，隨著滑條圖片一起變動的功能

主要是因為，滑條跟圖片一起變，圖片解析度太大，
我們電腦處理不來，會導致程式嚴重卡在運算上。

於是我們就先移除這個「動態演飾」的效果，
我們只保留「變動前的樣子」、「變動後的結果」。

透過這樣的方式大幅減少中間過程的對電腦效能上的負擔。

修改程式碼部分

各個 setsliderlabel 改為不更新原圖，只更新 label。

    # trigger function, get your signal from here
    def setsliderlabel(self):
        self.label.setText(f"{self.prefix}{self.slider.value():+}")
        # self.update_img()  # for the efficiency reason, we don't let the picture change with our slider

在 class slider_method_interface 中，更新 slider_release_event (釋放滑鼠時)，變成只在釋放滑鼠時更新圖片，由於介面繼承設計的關係，其他的功能也會被同步修改完成。

這樣就完成了我們的效能優化。

class slider_method_interface(method_interface):
# final update back to image center (not necessary, for double check)
    def slider_release_event(self):
        img = self.setimage(self.tmp_origin_img)
        self.append_each_method_step() # append all the methods include variables in to method_steps_recoder
        self.image_center.update_img(img)r

最終結果

優化部分

這次我們先完成了圖片的滑條優化功能，我們把因為滑條的連續變動，
導致圖片的連續變化，電腦計算跟不上的問題進行了修正。

實現「還原」或「重做」功能的部分

我們考慮到現有機制如果真的想要實現「還原」或「重做」的功能，
我們必須把「滑條」與「滑條影響圖片的內容」介面整個進行修改，

也就是說XD，我們之前設計的介面還不夠細、想得不夠周全XD

應該是要：

滑條控制(只有一個) -> 
new 一個新的圖片變化方法(方法應該要多組，可改多次) ->
保存圖片修改方法、UI變化內容(最好可以附帶一段此方法的說明，含操作的變數) ->
保存此方法(存進 list)。

最後就是不斷循環。

有機會我們再把程式的這部分架購進行優化，目前這個做下去預計又是一個架構上的大改了XD

最終成品！

30天的結語

今天算是鐵人賽這三年中最辛苦的一年，
老實說我有先囤了一些稿才來報名，因為今年公司比較忙碌，
而且甚至到鐵人賽的最後一天才開賽XD，
但沒想到最後居然還是在最後幾天被迫熬夜加班才跟得上進度XD。

不過我抱持的心情就是，既然都參加了，就一定要好好的把它完成！
所以才會想先屯稿、拖到最後一天開賽XD

說真的我覺得寫鐵人賽最大的受惠者永遠是作者，
30天前我根本連Qt都沒用過，現在我也能變成這樣XD
真的信不信由你，我真的是30天內從零開始學的XD，
所以才說如果真的有心想學，鐵人賽最終會是讓自己受惠最多的短時間高度成長體驗。

Reference

【PyQt5】Day 29 final project - 2 / 來搞一個自己的 photoshop 吧！後段程式細節篇 (結合 PyQt + OpenCV)

Thu, 14 Oct 2021 02:51:17 +0800

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day28-30_final_project

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

複習昨日的內容 (前情提要)

完整版請參考：【PyQt5】Day 28 final project – 1 / 來搞一個自己的 photoshop 吧！UI 篇 + 純程式架構篇 (結合 PyQt + OpenCV)

昨天我們討論到了我們是如何設計程式的程式架構，
以大概念來說，我們主軸還是圍繞在

UI
controller
start

三大面向，而 UI 我們已經透過 Qt desinger 設定完成，
而 start 沒什麼好說。
我們開始著重討論 controller 的細節。

獨立「圖像本身」與「圖像處理方法」，額外設計圖像處理介面。

這部分是套用 design pattern 的設計原則 (使用 Interface Segregation Principle(ISP) 介面隔離原則)
我們可以把介面分離出來，更方便之後功能的維護。

介面設計與繼承方法

套用 design pattern 後 (使用 Interface Segregation Principle(ISP) 介面隔離原則)

而繼承的部分，從變更圖片的「所有共通方法 -> 滑條類方法/筆類方法 -> 各項細節方法」。

今天我們從各個功能的細節開始談

圖像中心 image_center

我們所有關於圖像的處理都在這邊，注意因為我們把「變化方法」丟出去做成介面了，
所以這裡只有「顯示相關」不包含「修改」。

因此這部分被簡化過，我們有：

讀檔 read_file_and_init
更新圖片 update_img, __update_label_img
處理圖片顯示的縮放 set_zoom_value, __update_img_zoom

而 update_img, set_zoom_value 是給外部呼叫的，作為 trigger 我們的 image_center 進行更新。

class image_center(object):
    def __init__(self, img_path, ui):
        self.img_path = img_path
        self.ui = ui
        self.label_mouse_controller = label_mouse_controller(self)
        self.zoom_value = 1
        self.read_file_and_init()

    def read_file_and_init(self):
        try:
            self.origin_img = opencv_engine.read_image(self.img_path) # if cancel, no error !!!!
            self.origin_img_height, self.origin_img_width, self.origin_img_channel = self.origin_img.shape # need this to make error !!!
        except:
            self.origin_img = opencv_engine.read_image('./demo_materials/sad.png')
            self.origin_img_height, self.origin_img_width, self.origin_img_channel = self.origin_img.shape

        self.display_img = np.copy(self.origin_img) # make a clone
        self.__update_label_img()

    def update_img(self, img):
        self.display_img = img # default = not change, like zoom
        self.__update_label_img()

    def set_zoom_value(self, value):
        self.zoom_value = value

    def __update_img_zoom(self):        
        qpixmap_height = self.origin_img_height * self.zoom_value
        self.qpixmap = self.qpixmap.scaledToHeight(qpixmap_height)

    def __update_label_img(self):       
        bytesPerline = 3 * self.origin_img_width
        qimg = QImage(self.display_img, self.origin_img_width, self.origin_img_height, bytesPerline, QImage.Format_RGB888).rgbSwapped()
        self.qpixmap = QPixmap.fromImage(qimg)
        self.__update_img_zoom()
        self.ui.label_img.setPixmap(self.qpixmap)
        self.ui.label_img.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop)

「滑鼠控制」相關 label_mouse_controller

我們需要一個幫助我們感應「滑鼠在圖片上動作」的功能，例如之後的畫筆可能會使用到，
我們將這些功能封裝成一個 class label_mouse_controller，
當要製作畫筆類的功能時，他會協助我們完成「圖像上偵測滑鼠」的相關動作。

我們定義的功能有：

偵測滑鼠按壓時：mouse_press_event
偵測滑鼠放開時：mouse_release_event
偵測滑鼠按下並拖曳時：mouse_moving_event

class label_mouse_controller(object):
    def __init__(self, image_center):
        self.image_center = image_center
        self.ui = self.image_center.ui # new pointer point to self.image_center.ui
        self.ui.label_img.mousePressEvent = self.mouse_press_event
        self.ui.label_img.mouseReleaseEvent = self.mouse_release_event
        self.ui.label_img.mouseMoveEvent = self.mouse_moving_event

    def mouse_press_event(self, event):
        msg = f"{event.x()=}, {event.y()=}, {event.button()=}"
        x = event.x()
        y = event.y()
        norm_x = x/self.image_center.qpixmap.width()
        norm_y = y/self.image_center.qpixmap.height()
        real_x = int(norm_x*self.image_center.origin_img_width)
        real_y = int(norm_y*self.image_center.origin_img_height)
        self.ui.label_click_pos.setText(f"Clicked postion = ({x}, {y})")
        self.ui.label_norm_pos.setText(f"Normalized postion = ({norm_x:.3f}, {norm_y:.3f})")
        self.ui.label_real_pos.setText(f"Real postion = ({real_x}, {real_y})")

    def mouse_release_event(self, event):
        msg = f"{event.x()=}, {event.y()=}, {event.button()=}"

    def mouse_moving_event(self, event):
        msg = f"{event.x()=}, {event.y()=}, {event.button()=}"

「圖形處理」介面相關

正如同我們上面所說，我們將所有的方法都包裝好，並照上圖的方式一層層的繼承下來。
分類他是畫面方法或是畫筆類方法，再個別「繼承後，進行更細部的定義」。

「圖形處理」介面大祖宗 (method_interface)

所有的「圖形處理」介面，基本上都會依照此介面定義，
我們先在這個做好基本的功能，更客製化的細節功能就交給孫子們去處理。

這裡只有定義：

初始化參數：「init」
更新圖片：update_img

import abc

class method_interface(abc.ABC):
    @abc.abstractmethod
    def __init__(self):
        return NotImplemented

    @abc.abstractmethod
    def update_img(self):
        return NotImplemented

「圖形處理」介面父母輩 (slider_method_interface, pen_method_interface)

因為時間的關係，只來得及做一半 (slider_method_interface)，
我們在裡面多定義了會使用到「滑條來修改圖片」的相關功能，會使用到的介面。

而「會滑條來修改圖片」的眾多功能，就交給孩子們去做更細節的定義吧!

這裡定義了：

更多詳細的「與滑條有關的」初始化參數：「init」
滑條按下與釋放：slider_press_event, slider_release_event
取得滑條值： getslidervalue
設定滑條值 (當滑條的值被變更時，觸發此功能)： setsliderlabel
更新圖片相關：setimage, update_img

class slider_method_interface(method_interface):
    def __init__(self, slider, label, image_center):
        self.label = label
        self.slider = slider
        self.image_center = image_center
        self.tmp_origin_img = self.image_center.display_img
        self.slider.setRange(-100, 100)
        self.slider.setProperty("value", 0)
        self.slider.valueChanged.connect(self.setsliderlabel)
        self.slider.sliderPressed.connect(self.slider_press_event)
        self.slider.sliderReleased.connect(self.slider_release_event)
        self.prefix = ""

    # get first picture snapshot, 
    def slider_press_event(self):
        self.tmp_origin_img = self.image_center.display_img

    # final update back to image center (not necessary, for double check)
    def slider_release_event(self):
        img = self.setimage(self.tmp_origin_img)
        self.image_center.update_img(img)

    # image do the method
    def setimage(self, img):        
        return img

    @property
    def getslidervalue(self):
        return self.slider.value()

    # trigger function, get your signal from here
    def setsliderlabel(self):
        self.label.setText(f"{self.prefix}{self.slider.value():+}")
        self.update_img()  

    def update_img(self):
        self.image_center.update_img(self.tmp_origin_img) # default = origin_image no change, like zoom in/out

「圖形處理」孩子輩 (method_lightness, method_saturation, method_contrast…)

這裡我們就來開始撰寫「與滑條相關」的各項細部功能，像是「光線、飽和度、對比度…」，
都會是在這邊實作，而因為我們已經有在上面定義好了滑條相關的方法，
這邊如果沒有必要多做修改，可以完全不用新增「滑條的處理方法」(傳入正確的變數就會自動搞定了)，
只需要專注在實現「修改圖片的方法」即可。

這邊隨便舉個範例，調整光線 method_lightness：

setimage：處理圖片光線變化的方法
update_img：將變化後的圖片傳回去圖像中心更新 (image_center)
setsliderlabel: trigger 用，感應滑條變化的時間

你可能看完會很好奇，怎麼都沒有「滑條相關」的細節實作?
這就是繼承的好處，因為我們已經在「父母輩」定義好了實作方法，
而在「init」中直接傳入對應的參數，瞬間就實作完「滑條相關」的細節 (因為都是共通的概念)。

這邊就是這樣處理，相當的方便，又不用重寫多次滑條處理方法。

class method_lightness(slider_method_interface):
    def __init__(self, slider, label, image_center):
        super().__init__(slider, label, image_center)
        self.prefix = "lightness: "
        self.update_img()

    def setimage(self, img):        
        return opencv_engine.modify_lightness(img, lightness=self.slider.value())

    def update_img(self):
        img = self.setimage(self.tmp_origin_img)
        self.image_center.update_img(img)

    # trigger function, get your signal from here
    def setsliderlabel(self):
        self.label.setText(f"{self.prefix}{self.slider.value():+}")
        self.update_img()

OpenCV 圖像處理引擎 (opencv_engine)

製作一個 OpenCV 的圖像處理引擎，並把它全部包成可以直接取用的方法「@staticmethod」，
我們只在這支程式中使用「import cv2」，方便我們集中管理。

import cv2
import numpy as np
import math

class opencv_engine(object):

    @staticmethod
    def point_float_to_int(point):
        return (int(point[0]), int(point[1]))

    @staticmethod
    def read_image(file_path):
        return cv2.imread(file_path)

    @staticmethod
    def draw_point(img, point=(0, 0), color = (0, 0, 255)): # red
        point = opencv_engine.point_float_to_int(point)
        print(f"get {point=}")
        point_size = 1
        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.point_float_to_int(start_point)
        end_point = opencv_engine.point_float_to_int(end_point)
        thickness = 3 # width
        return cv2.line(img, start_point, end_point, color, thickness)

    @staticmethod
    def draw_rectangle_by_points(img, left_up=(0, 0), right_down=(0, 0), color = (0, 0, 255)): # red
        left_up = opencv_engine.point_float_to_int(left_up)
        right_down = opencv_engine.point_float_to_int(right_down)
        thickness = 2 # 寬度 (-1 表示填滿)
        return cv2.rectangle(img, left_up, right_down, color, thickness)

    @staticmethod
    def draw_rectangle_by_xywh(img, xywh=(0, 0, 0, 0), color = (0, 0, 255)): # red
        left_up = opencv_engine.point_float_to_int((xywh[0], xywh[1]))
        right_down = opencv_engine.point_float_to_int((xywh[0]+xywh[2], xywh[1]+xywh[3]))
        thickness = 2 # 寬度 (-1 表示填滿)
        return cv2.rectangle(img, left_up, right_down, color, thickness)

    @staticmethod    
    def modify_lightness(img, lightness = 0): # range: -100 ~ 100
        if lightness == 0: # no change
            return img
        # lightness 調整為  "1 +/- 幾 %"

        # 圖像歸一化，且轉換為浮點型
        fImg = img.astype(np.float32)
        fImg = fImg / 255.0

        # 顏色空間轉換 BGR -> HLS
        hlsImg = cv2.cvtColor(fImg, cv2.COLOR_BGR2HLS)
        hlsCopy = np.copy(hlsImg)

        # 亮度調整
        hlsCopy[:, :, 1] = (1 + lightness / 100.0) * hlsCopy[:, :, 1]
        hlsCopy[:, :, 1][hlsCopy[:, :, 1] > 1] = 1  # 應該要介於 0~1，計算出來超過1 = 1

        # 顏色空間反轉換 HLS -> BGR 
        result_img = cv2.cvtColor(hlsCopy, cv2.COLOR_HLS2BGR)
        result_img = ((result_img * 255).astype(np.uint8))


        return result_img

    @staticmethod    
    def modify_saturation(img, saturation = 0): # range: -100 ~ 100
        if saturation == 0: # no change
            return img
        # saturation 調整為 "1 +/- 幾 %"

        # 圖像歸一化，且轉換為浮點型
        fImg = img.astype(np.float32)
        fImg = fImg / 255.0

        # 顏色空間轉換 BGR -> HLS
        hlsImg = cv2.cvtColor(fImg, cv2.COLOR_BGR2HLS)
        hlsCopy = np.copy(hlsImg)

        # 飽和度調整
        hlsCopy[:, :, 2] = (1 + saturation / 100.0) * hlsCopy[:, :, 2]
        hlsCopy[:, :, 2][hlsCopy[:, :, 2] > 1] = 1  # 應該要介於 0~1，計算出來超過1 = 1

        # 顏色空間反轉換 HLS -> BGR 
        result_img = cv2.cvtColor(hlsCopy, cv2.COLOR_HLS2BGR)
        result_img = ((result_img * 255).astype(np.uint8))

        return result_img


    @staticmethod
    def modify_contrast_brightness(img, brightness=0 , contrast=0): # range: -100 ~ 100
        if brightness <mark> 0 and contrast </mark> 0:
            return img
        B = brightness / 255.0
        c = contrast / 255.0 
        k = math.tan((45 + 44 * c) / 180 * math.pi)

        img = (img - 127.5 * (1 - B)) * k + 127.5 * (1 + B)

        # 所有值必須介於 0~255 之間，超過255 = 255，小於 0 = 0
        img = np.clip(img, 0, 255).astype(np.uint8)

        return img

最終結果

把上面落落長的東西都實作完，並 debug 完，
終於暫時有了現在的作品！

但現在還有一些效能問題要處理，例如說載入太大解析度的圖片時，
我們使用「滑條功能」，因為會產生「連續的變化計算」，
太大解析度的電腦計算速度可能會跟不上。

目前這部分可能還需要想想怎麼樣優化會更好XD

(或者直接縮放後以低解析度作處理XD，紀錄「方法步驟」後，最後存檔才重新實現這些步驟。)
這個是我下一篇想要談的XD，有沒有機會把「方法」當作一個個的「物件」，保存進一個 queue 呢?

Reference

【PyQt5】Day 28 final project - 1 / 來搞一個自己的 photoshop 吧！UI 篇 + 純程式架構篇 (結合 PyQt + OpenCV)

Wed, 13 Oct 2021 14:39:54 +0800

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day28-30_final_project

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

設計我們的 UI

雖然原本我有想直接拿 Day17 的內容繼續改，
後來覺得架構上還不夠漂亮，最後決定乾脆直接砍掉重練比較快哈哈哈。

既然要搞就一次搞到最大吧!

這次我設計的 final project UI 初版長這樣

欸等等先別吐血啊!!! 這 UI 不是一天搞出來的啊!!
UI 就請大家自己慢慢刻哈哈哈哈哈!!!

(你說突然這也突然跳太高階了吧?!
其實只是設定一些顏色而已XD，之前因為這個相對簡單就沒特別介紹)

排版控制 Layout 系列

如果還有機會的話有空在介紹，不過這邊的內容多半是用於排版，
所以也難能以單一例子舉出 demo 在幹嘛，
總之可以自己玩玩看 Layouts 這一塊，
先「拉一個 Layout」，再把「要排版的元件丟進去」，就對自動對整齊了!

Layouts 系列：

設定字體顏色，背景顏色的地方位於 styleSheet

使用的應該是類似 css 語法? 我不確定XD
總之有興趣可以直接參考下面的延伸閱讀進行修改，
設定位置在 Qt desinger 的這邊

延伸閱讀：給想研究更多怎麼設定顏色的人，請參考 Qt Style Sheets Examples

設定 Logo 的地方

Qlabel 就是一個我們可以輸入圖片的地方，
透過右邊的「…」，選擇一張我們要的圖片，就可以直接把 LOGO 嵌入 UI 中了。

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

讚到不行XDDDD (自己講

程式架構篇

這次的 final project 真的內容會做太多，如果沒有好好規劃一下架構，
很有可能寫出來的東西會一團亂XDDD
所以我們要先趁今天來規劃，明天再來慢慢把功能實現

先從大方向切入，我們有那些大的「重要元素」?

依照 day5 的設計，我們至少也會有

UI (作為前端顯示介面)
controller (做為後端邏輯控制)
start (啟動用，沒什麼好討論的)

而 UI 因為我們在 Qtdesigner 已經設計得夠複雜了，也不太需要另外寫程式，
所以基本上在經由 pyuic 的轉換後，就已經完成了 UI.py

pyuic5 -x day28.ui -o UI.py

controller 是我們這邊要討論的重點，在我們的 photoshop 後端邏輯裡面，
我之前在 day17 實作的最終版是把「圖像+圖像變化方法」寫在同一個 class 當中，
我們如果繼續讓我們的「變化方法增加」，不適不能這樣實作，
但最終我們會有一個超級巨大的 class 共同實作「圖像+圖像變化方法」，
於是我決定把「變化方法」拆出去獨立一個 class，
使得「圖像」與「變化方法」分開成兩套獨立機制，而能互向協助。

這也符合 design pattern 的 Interface Segregation Principle(ISP) 介面隔離原則
以遊戲來說，我們也可以舉例：
我們大可以把一個角色的所有「屬性、裝備、技能」全部都包在這個角色當中，
但如果另外一個玩家也玩了同一個職業，我們何必把技能「整個複製進去另外一個角色當中呢?」
於是我們可以把「技能」這個介面分離出去，讓有需要的類別再去呼叫這個介面即可。

因此，這時候就能透過這樣的拆分方式，把我們實作的彈性與擴充功能的彈性提升。

舉例：

套用 design pattern 前

套用 design pattern 前，基本上這個設計沒什麼問題，
硬要說缺點只是維護職業技能時，「需要一個個角色去調整內部的技能」

套用 design pattern 後 (使用 Interface Segregation Principle(ISP) 介面隔離原則)

套用 design pattern 的 Interface Segregation Principle(ISP) 介面隔離原則後，
我們把技能獨立出來維護，這樣的好處就是我們可以調整一次職業技能，
所有的角色都能得到修正!

而這邊我們也要做同樣的事情，我們要把「修改圖片的方法」這個介面獨立出來!

於是整理一下，得到我們目前想設計的架構

獨立「圖片本身」與「圖片處理方法」，
另外因為滑鼠事件的資訊比較特別，需要從圖片上獲取，所以我們也另外獨立出來處理

【重要】抓出誰會是觸發事件的 trigger

第一次設計這個系統的時候，就碰到一個最關鍵的問題，
「沒有提早先想好架構就開始寫，導致繞了很多彎路」，

應該要先想好再下去寫的問題就是，在這個系統裡面，「什麼事情會是觸發事件的 trigger?」

如果我們不知道「什麼事件會被使用者觸發」，
「就不知道要從哪個點開始啟動後續的修改」，

我一開始就是瘋狂地開始寫功能XDD，然後沒注意誰呼叫誰，
結果功能都有了，但是 trigger 位置寫在錯誤的 class，
所以要重搞順序XDD

以結論來說，這個系統的 trigger 位置如下

所以在寫系統時，我們需要特別注意，
我們箭頭指的地方就是「會觸發事件的 trigger」，
凡經過此處的程式都是「一次修改的起點」，引導我們進行往後的修改。

圖形修改介面 (interface) 設計

基本上我們設計的「修改圖片」都有符合一些同樣的原則，
我們可以使用「介面繼承」的方式來實現，
為了達到這樣的效果，我們需要「import abc」這個 python 酷酷的 library，
細節的部分我會再另外寫一篇文章，這邊我們先直接實作。

註：冷知識(?) abc = the infrastructure for defining 「abstract base classes (ABCs)」 in Python
簡單來說，就是「抽象的類別 (class)」定義

我們預計設計的架構如下，一共會有三層，底下會一層層介紹：

介面的大祖宗 (method_interface)，一切介面方法從此開始實作

我們可以大致歸納我們全部的變化介面都會有兩個基本的要素：

初始化參數:「init」
更新圖片: update_img

另外，我們強制這兩個介面在繼承後都必須被定義，
所以我們透過「@abc.abstractmethod」，定義這個抽象的方法 (未實作功能)，
以及「return NotImplemented」，如果使用者繼承介面後未定義這個函數，
會跳「NotImplemented error」，強制跳錯 (逼使用者一定要定義介面內容)。

import abc

class method_interface(abc.ABC):
    @abc.abstractmethod
    def __init__(self):
        return NotImplemented

    @abc.abstractmethod
    def update_img(self):
        return NotImplemented

介面的父母 (滑條方法介面 slider_method_interface, 畫筆方法介面 pen_method_interface)

我們會實作的「圖像變化方法」，能夠產生變化的方法大概有兩種，
一種是滑條類，另一種是畫筆類。

這兩類在實作時，都會繼承我們的介面大祖宗 (method_interface)，
然後再分別基於滑條的特性與畫筆的特性，實作各自的介面。

這所有的介面方法都屬於「圖片變化方法」，所以我們會強烈推薦用繼承的方法撰寫。
會比起一個個慢慢定義有更好的架構與維護性
(維護一個父類別，也許底下的所有子類別都能全部受惠到這次的更動。不用一個個慢慢改。)

最大的差別就是：

滑條拉回去後，可以復原 (不會是破壞原圖的變動)
畫筆畫下去後，不可復原 (會破壞原圖的變動)

因此這兩個方法我們要分開實作，實作細節一樣我們明日再提，
今天光是講大架構就已經夠累了。

各個細部的方法實作

在看該方法是「滑條方法介面 slider_method_interface」或是「畫筆方法介面 pen_method_interface」後，
我們就可以開始實作細部功能了，這部分的實作細節我們就明日在提吧。
(今天光是講完大架構相信大家已經都累了XDDD)

最終系統架構圖

這個是舊版，滑鼠那部分因為是新加的，目前還沒更新上去，
不過相信上面已經說明得相當完整了，應該能大約類推出他在圖形上會呈現的細節

Reference

【PyQt5】Day 27 project / 製作影片 ROI 標註工具 (PyQt 結合 OpenCV 在圖上畫點畫線)

Sat, 09 Oct 2021 02:27:45 +0800

看完這篇文章你會得到的成果圖

這篇文章，主要是設計給我自己要用的 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 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

設計我們的 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):
"
    for ele in self.list_collect_points:
        msg += f"({ele[0]},{ele[1]})
"
    self.ui.text_save_points.setText(msg)

def generate_rois(self):
    msg = "[
"
    for ele in self.list_collect_points:
        msg += f"[{ele[0]},{ele[1]}],
"
    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 工具就這樣完成了!!!

Reference

【PyQt5】Day 26 project / 替我們影片播放器增加一個顯示進度的滑條 video player add slider (與昨日 bottleneck 處理細節)

Fri, 08 Oct 2021 16:15:38 +0800

看完這篇文章你會得到的成果圖

多了一條滑條，我們可以直接控制，另外我們也可以直接透過滑條來操控進度
另外這次有解決上一篇 lag 的問題，會說明原因以及解法。

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day26_video_player_add_slider_project

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

設計我們的 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)

1. 取得滑條值的部分

我們在 init_video_info() 新增了關於滑條初始化的功能，
我們設定好這個滑條的 range 為 (0, 全部 frame 數 -1)，
並且將這個滑條連結於 getslidervalue() 的功能上，
只要我們移動滑條，就會啟動這個函數。

2.變更滑條值的部分

我們製作了一個函數 setslidervalue()，當我們更改 frame 的時候，
我們可以直接也更改滑條的值。

而呼叫這個 setslidervalue() 的 function 位於取得 frame from frame number 的時候，
也同步呼叫這個函數，就可以完成「隨著 frame 變化更改滑條的值」。

優化我們的播放器效能 (解決昨天的 lag 問題)

昨天我們提到我們程式執行的時候會有 lag 的問題，
那時我是直接給個優化的方向，是我們可以考慮提程式的 decode 加入「multiprocessing」的平行運算功能。
不過今天處理的過程中，我稍微替我的程式加了幾個計時器，
後來意外發現卡住的 function 其實只有一個，這樣就好處理了！

處理我們先前程式的 bottleneck

以這支程式來說，很直覺的我會認為會慢都是牽扯到 decode 那一段的速度，
因為處理圖片基本上就是最花時間的地方…

因此我加了一些 timer 在昨天的 code

def __get_frame_from_frame_no(self, frame_no):
    time_start = time.time()
    self.vc.set(1, frame_no)
    ret, frame = self.vc.read()
    time_end = time.time()
    print(time_end - time_start)

我們來計時一下，這段處理到底花了多少時間。
結果發現了一個很有趣的現象：

stop 時，平均一個 frame 只需要處理 0.01~0.02 秒左右
一但進入 start 或 pause 的狀態，平均一個 frame 需要處理 0.06~0.07 秒左右

這就很奇怪了！！！照理來說處理一個圖片，應該也不會到有那麼大的誤差。
而且是平均時間，還不是幾張圖片或許資訊比較豐富所以處理比較久。

這表示我們設計的機制一定有什麼可優化的問題。

再繼續往下查，抓出產生問題的關鍵 function

最後我們發現一件有趣的事情：

原本我以為是處理處片的時間很久，結果只花了 0.001 秒

ret, frame = self.vc.read()

然而卻是以下這行，設定人在哪個 frame 的函數，可能會造成約 0.05 秒左右的延遲。

self.vc.set(1, frame_no)

但是，我之前做過的專案經驗告訴我，正常來說的解碼不會那麼久，
所以一定是我不夠正確的使用這一行。

所以我決定修改機制。

重新設計使用 vc.set() 的機制，減少使用

照官方文件的定義，即使沒有 vc.set()，只需要一直 vc.read() 也能夠一直往下取 frame，

我猜可能這就是原因了，因為 OpenCV (或說是他使用的 ffmpeg library) 在 decode 的時候，
針對連續的 frame 有做優化的演化法，
「所以如果我每次都重新設定第幾個 frame，會導致這個優化演算法失效」
可以想像是，因為我們的影片都是連續的，
所以搞不好可以透過計算向量差的方式，更快的算出下一張圖片。(而這機制被我的設計弄到失效)

於是我們更改一下原本的邏輯，「只要必須要設定 frame 時，才使用 vc.set()」

把顯示 frame 的函數拆成兩個 function

我們把 self.vc.set(1, frame_no) 這個會造成 bottleneck 的 funciton 獨立出來。

def set_current_frame_no(self, frame_no):
    self.vc.set(1, frame_no) # bottleneck

def __get_next_frame(self):
    ret, frame = self.vc.read()
    self.ui.label_framecnt.setText(f"frame number: {self.current_frame_no}/{self.video_total_frame_count}")
    self.setslidervalue(self.current_frame_no)
    return frame

配合上述機制的修改對應設計

def timer_timeout_job(self):
    if (self.videoplayer_state == "play"):
        if self.current_frame_no >= self.video_total_frame_count-1:
            #self.videoplayer_state = "pause"
            self.current_frame_no = 0 # auto replay
            self.set_current_frame_no(self.current_frame_no)
        else:
            self.current_frame_no += 1

    if (self.videoplayer_state == "stop"):
        self.current_frame_no = 0
        self.set_current_frame_no(self.current_frame_no)

    if (self.videoplayer_state == "pause"):
        self.current_frame_no = self.current_frame_no
        self.set_current_frame_no(self.current_frame_no)

    frame = self.__get_next_frame() 
    self.__update_label_frame(frame)

原本會更新畫面的函數位置不變，而我們在 pause、stop、與影片播放完畢後，
都啟用 set_current_frame_no() 這個函數，才會去啟動 vc.set() 修改 frame index。

def getslidervalue(self):
    self.current_frame_no = self.ui.slider_videoframe.value()
    self.set_current_frame_no(self.current_frame_no)

另外一個也會影響到 frame index 的就是滑條，
我們也是在滑條「被移動」的時候，才會去呼叫 set_current_frame_no() 啟動 vc.set()

測試結果

我的影片播放器終於順暢了！！！耶！！！

此外昨天保留的計算 fps 機制就可以拿回來用了。
如果不想要讓影片已超快的 1ms 更新，可以改回上面 timer 的做法。

self.timer.start(1000//self.video_fps) # start Timer, here we set '1000ms//Nfps' while timeout one time
self.timer.start(1) # but if CPU can not decode as fast as fps, we set 1 (need decode time)

Reference

【PyQt5】Day 25 project / 自己做一個影片播放器 DIY video player (結合 PyQt + OpenCV)

Thu, 07 Oct 2021 17:37:55 +0800

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day25_video_player_project

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

設計我們的 UI

我們在裡面加入了一些我們需要的元素：

self.button_stop：停止鍵
self.button_play：播放鍵
self.button_pause：暫停鍵
self.button_openfile：開啟檔案鍵
self.label_videoframe：顯示畫面
self.label_framecnt：顯示目前 frame 數/ 全部 frame 數
self.label_filepath：顯示檔案路徑

一些 UI 設計小細節

與之前設計圖片不同的是，我們拿掉了可以捲動的滑條，我希望能夠強制更改比例以符合視窗 (方便一個視窗就能瀏覽)。
我設計的顯示框為 800x450，等於 16:9，符合目前最常見的影片比例 1920x1080、1280x720

轉換 day25.ui -> UI.py

pyuic5 -x day25.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

設計我們的 controller

設計使用狀態 (state)

我們要設計一個播放器，我們必須要想好播放器的架構可能會有哪幾種 ”state (狀態)“，
我們可以簡單地想一下：

按下 play 後，進行 play 狀態，影片播放
按下 pause 後，進行 pause 狀態，影片暫停
按下 stop 後，進行 stop 狀態，影片回到第一格

而剛開始載入影片時，我們選擇的狀態是 pause，因為暫停狀態才可以任意變更 frame 值 (後續的應用)，
而停止狀態永遠都會回到第一格。

以上大概就是我們設計的 state。

設計 video_controller.py

正如同我們前面的文章，這次我們把 img_controller 修改為 video_controller，
並加入類似的功能。

from PyQt5 import QtCore 
from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtCore import QTimer 

from opencv_engine import opencv_engine

# videoplayer_state_dict = {
#  "stop":0,   
#  "play":1,
#  "pause":2     
# }

class video_controller(object):
    def __init__(self, video_path, ui):
        self.video_path = video_path
        self.ui = ui
        self.qpixmap_fix_width = 800 # 16x9 = 1920x1080 = 1280x720 = 800x450
        self.qpixmap_fix_height = 450
        self.current_frame_no = 0
        self.videoplayer_state = "stop"
        self.init_video_info()
        self.set_video_player()

    def init_video_info(self):
        videoinfo = opencv_engine.getvideoinfo(self.video_path)
        self.vc = videoinfo["vc"] 
        self.video_fps = videoinfo["fps"] 
        self.video_total_frame_count = videoinfo["frame_count"] 
        self.video_width = videoinfo["width"]
        self.video_height = videoinfo["height"] 

    def set_video_player(self):
        self.timer=QTimer() # init QTimer
        self.timer.timeout.connect(self.timer_timeout_job) # when timeout, do run one
        # self.timer.start(1000//self.video_fps) # start Timer, here we set '1000ms//Nfps' while timeout one time
        self.timer.start(1) # but if CPU can not decode as fast as fps, we set 1 (need decode time)

    def __get_frame_from_frame_no(self, frame_no):
        self.vc.set(1, frame_no)
        ret, frame = self.vc.read()
        self.ui.label_framecnt.setText(f"frame number: {frame_no}/{self.video_total_frame_count}")
        return frame

    def __update_label_frame(self, frame):       
        bytesPerline = 3 * self.video_width
        qimg = QImage(frame, self.video_width, self.video_height, bytesPerline, QImage.Format_RGB888).rgbSwapped()
        self.qpixmap = QPixmap.fromImage(qimg)

        if self.qpixmap.width()/16 >= self.qpixmap.height()/9: # like 1600/16 > 90/9, height is shorter, align width
            self.qpixmap = self.qpixmap.scaledToWidth(self.qpixmap_fix_width)
        else: # like 1600/16 < 9000/9, width is shorter, align height
            self.qpixmap = self.qpixmap.scaledToHeight(self.qpixmap_fix_height)
        self.ui.label_videoframe.setPixmap(self.qpixmap)
        # self.ui.label_videoframe.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop) # up and left
        self.ui.label_videoframe.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter) # Center

    def play(self):
        self.videoplayer_state = "play"

    def stop(self):
        self.videoplayer_state = "stop"

    def pause(self):
        self.videoplayer_state = "pause"

    def timer_timeout_job(self):
        frame = self.__get_frame_from_frame_no(self.current_frame_no)
        self.__update_label_frame(frame)

        if (self.videoplayer_state == "play"):
            self.current_frame_no += 1

        if (self.videoplayer_state == "stop"):
            self.current_frame_no = 0

        if (self.videoplayer_state == "pause"):
            self.current_frame_no = self.current_frame_no

我們開始來慢慢解釋這些東西。

播放邏輯

這邊我們使用 Qtimer，原因很簡單，每支影片都有他自己的 fps，
我們透過計算可以得到「我們應該每多少毫秒，就該換下一個 frame 顯示」。

我們用 frame number 來管理現在要顯示哪一個畫面，
而控制 frame number 的就是我們目前 state 的狀態，以每一個 QTimer timeout 的頻率更新。

def set_video_player(self):
    self.timer=QTimer() # init QTimer
    self.timer.timeout.connect(self.timer_timeout_job) # when timeout, do run one
    # self.timer.start(1000//self.video_fps) # start Timer, here we set '1000ms//Nfps' while timeout one time
    self.timer.start(1) # but if CPU can not decode as fast as fps, we set 1 (need decode time)

def timer_timeout_job(self):
    frame = self.__get_frame_from_frame_no(self.current_frame_no)
    self.__update_label_frame(frame)

    if (self.videoplayer_state == "play"):
        self.current_frame_no += 1

    if (self.videoplayer_state == "stop"):
        self.current_frame_no = 0

    if (self.videoplayer_state == "pause"):
        self.current_frame_no = self.current_frame_no

但這邊我們在執行後才發現我們雖然邏輯正確，但想得太美了
OpenCV 在 decode 所需要花的時間大於我們想要控制的顯示時間，
(簡單來說，decode 太久，導致沒辦法在依照我們想要的 fps 播放)
所以我先暫時改成 self.timer.start(1)，讓我們只休息 1ms，
但畢竟 QT 是以 multithread 在進行操作，
這段優化的空間可能要改以 multiprocess 進行才能夠讓我們影片順暢的播放 (這個比較不是此系列重點，有空我們再來實作)

播放鍵相關 (play, stop, pause)

def play(self):
    self.videoplayer_state = "play"

def stop(self):
    self.videoplayer_state = "stop"

def pause(self):
    self.videoplayer_state = "pause"

這邊我使用的邏輯，就是讓按鍵會直接更改到 state 的狀態，
而 state 會去控制現在視窗要顯示的 frame

取得 frame 的圖片，並更新至 UI 介面上

從上面應該可以理解一些小細節，我們用 frame number 來管理我們要顯示的 frame，
而我們透過 frame number 取得 frame 影像的機制，我們寫在 __get_frame_from_frame_no() 當中。

而取得介面後，並更新於 UI 介面的機制，我們寫在 __update_label_frame() 當中。

這邊也有個小細節，我們會自動以 16:9 為基準去看讀入影片的比例，

如果很明顯是較寬例如 160:9，我們就以寬 (160) 為基準去縮放影片大小
如果很明顯是較高例如 16:90，我們就以高 (90) 為基準去縮放影片大小

def __get_frame_from_frame_no(self, frame_no):
    self.vc.set(1, frame_no)
    ret, frame = self.vc.read()
    self.ui.label_framecnt.setText(f"frame number: {frame_no}/{self.video_total_frame_count}")
    return frame

def __update_label_frame(self, frame):       
    bytesPerline = 3 * self.video_width
    qimg = QImage(frame, self.video_width, self.video_height, bytesPerline, QImage.Format_RGB888).rgbSwapped()
    self.qpixmap = QPixmap.fromImage(qimg)

    if self.qpixmap.width()/16 >= self.qpixmap.height()/9: # like 1600/16 > 90/9, height is shorter, align width
        self.qpixmap = self.qpixmap.scaledToWidth(self.qpixmap_fix_width)
    else: # like 1600/16 < 9000/9, width is shorter, align height
        self.qpixmap = self.qpixmap.scaledToHeight(self.qpixmap_fix_height)
    self.ui.label_videoframe.setPixmap(self.qpixmap)
    # self.ui.label_videoframe.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop) # up and left
    self.ui.label_videoframe.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter) # Center

設計 opencv_engine.py

讀取影片的資訊

相信有閱讀之前文章的讀者應該都不陌生，
而這邊我們要透過 opencv 協助我們完成影片的讀取，並分析一些資訊。

程式被呼叫的地方在 video_controller 的 init_video_info，
我們把所有必要的影片資訊封裝成一個 dict 回傳。

def init_video_info(self):
    videoinfo = opencv_engine.getvideoinfo(self.video_path)
    self.vc = videoinfo["vc"] 
    self.video_fps = videoinfo["fps"] 
    self.video_total_frame_count = videoinfo["frame_count"] 
    self.video_width = videoinfo["width"]
    self.video_height = videoinfo["height"]

所以我們在 opencv_engine.py 實作一個新的方法。

@staticmethod
def getvideoinfo(video_path): 
    # https://docs.opencv.org/4.5.3/dc/d3d/videoio_8hpp.html
    videoinfo = {}
    vc = cv2.VideoCapture(video_path)
    videoinfo["vc"] = vc
    videoinfo["fps"] = vc.get(cv2.CAP_PROP_FPS)
    videoinfo["frame_count"] = int(vc.get(cv2.CAP_PROP_FRAME_COUNT))
    videoinfo["width"] = int(vc.get(cv2.CAP_PROP_FRAME_WIDTH))
    videoinfo["height"] = int(vc.get(cv2.CAP_PROP_FRAME_HEIGHT))
    return videoinfo

把一些我們感興趣的資訊都存進 videoinfo 裡面，並回傳。

設計 controller.py

設計按鍵與功能的連結、開啟檔案

def setup_control(self):
    self.ui.button_openfile.clicked.connect(self.open_file)

def open_file(self):
    filename, filetype = QFileDialog.getOpenFileName(self, "Open file Window", "./", "Video Files(*.mp4 *.avi)") # start path        
    self.video_path = filename
    self.video_controller = video_controller(video_path=self.video_path,
                                             ui=self.ui)
    self.ui.label_filepath.setText(f"video path: {self.video_path}")
    self.ui.button_play.clicked.connect(self.video_controller.play) # connect to function()
    self.ui.button_stop.clicked.connect(self.video_controller.stop)
    self.ui.button_pause.clicked.connect(self.video_controller.pause)

我們先讓開啟檔案按鍵的功能連結起來，
開檔成功之後，才綁定按鍵的功能，這些功能定義在 video_controller 中。
我們預期所有的按鍵行為應該是在「開檔後」才會執行 (例如：沒讀取影片，沒必要讓「播放」有功能。)

測試結果

我們目前有一個很 lag 的 video player，
原因可能是因為 decode 速度不夠快，可能可以透過 multiprocess 優化。

後續：後來有找到原因，為 vc.set 反覆執行會吃掉大量程式效率，之後文章會再分享該如何修正

Reference

【PyQt5】Day 24 project / 偵測滑鼠目前指示顏色的小工具 (滴管工具), 利用 QCursor 偵測滑鼠, QApplication 取得截圖

Wed, 06 Oct 2021 10:57:23 +0800

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day24_color_detector_project

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

設計我們的 UI

接下來我們要設計一個偵測滑鼠指示顏色的小工具
我們針對顏色設計一下欄位：

self.text_pos：顯示位置用
self.text_rgb：顯示 RGB 用
self.text_hex：顯示 HEX 用

轉換 day24.ui -> UI.py

pyuic5 -x day24.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

設計我們的 controller

這次我們的 controller 有三個主要的新功能

QTimer：負責更新頻率
QCursor：取得現在滑鼠座標位置
QApplication：取得現在螢幕的截圖

QTimer：負責更新頻率

為了避免我們的程式吃光我們電腦的所有資源，
我們用更新時間加以限制，不需要到幾乎無時無刻都在更新，
以「20ms (0.02 秒)」的頻率更新畫面，基本上人體就已經感覺不出差別了，
而且也比較省電腦資源。而上述的功能可以使用 QTimer 來實現。

def setup_control(self):
        self.ui.label.setText("")
        timer = QTimer(self)
        timer.timeout.connect(self.get_current_cursor_color)
        timer.start(20)

我們在 setup_control 進行這樣的設定，另外我們想把剛剛 Color 那段字消掉，
只留下顏色就好，於是我們補上一行 self.ui.label.setText("")

QCursor：取得現在滑鼠座標位置、 QApplication：取得現在螢幕的截圖

QCursor 可以幫助我們取得現在滑鼠的座標，
而透過 QApplication 可以幫助我們取得現在螢幕的截圖。

def get_current_cursor_color(self):
        x = QCursor.pos().x()
        y = QCursor.pos().y()
        self.ui.text_pos.setText(f"X:{x:^4d} Y:{y:^4d}")
        pixmap = QApplication.primaryScreen().grabWindow(
            QApplication.desktop().winId(), x, y, 1, 1)
        image = pixmap.toImage()
        color = QColor(image.pixel(0, 0))
        self.set_label_color(color)

set_label_color() 設定顏色與相關顏色資訊

這部分是拿昨天我們做的顏色選擇器來改的，
主要功能都相同，我們把昨天 print 顯示的字串，
現在改成直接顯示在 textEdit 裡面。

傳進來的資料型態都是 Qcolor，
這邊簡單分析一下，
我們可以透過 color.red(), color.green(), color.blue() 取得 RGB 的 0~255 的值，
使用 color.name() 取得顏色的 hex 值。

def set_label_color(self, color):
        r, g, b = color.red(), color.green(), color.blue()        
        strRGB = (f"{r:^3d}, {g:^3d}, {b:^3d}")

        self.ui.label.setStyleSheet('background-color:rgb({});'.format(strRGB))
        self.ui.text_rgb.setText(f"({strRGB})")
        self.ui.text_hex.setText(color.name().upper())

更符合使用者的設計：視窗永久置頂

這邊我們拿【PyQt5】Day 22 – PyQt 視窗的個性化/屬性控制 setWindowFlags，禁止放大縮小、永遠顯示於最上層/最下層的 setWindowFlags 內容來應用，

我們只允許「縮小與關閉」跟「永遠讓視窗在最上層」。
我們去新增 UI.py 如下：

(我們這次選擇的是 Form 不是 MainWindow，需要稍微修改一下)

# 只有縮小/關閉 (取消放大)
# 視窗永遠在最上層，適合互動性高的程式
Form.setWindowFlags(Qt.WindowMinimizeButtonHint | Qt.WindowCloseButtonHint| Qt.WindowStaysOnTopHint)

測試結果

總之就是可以自動偵測滑鼠目前所指位置的顏色，並顯示出來。

Reference

Python3與PyQt5編程示例：實現顏色拾取器小工具原文網址：https://kknews.cc/code/gpkapl9.html

【PyQt5】Day 23 - 使用系統內建的調色盤 QColorDialog，來替我們選擇顏色 QColor (Color Picker)

Tue, 05 Oct 2021 18:59:17 +0800

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day23_QColorDialog

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

系統內建的調色盤 QColorDialog

在 mac, windows, linux 上都會有系統預設的調色盤 QColorDialog,
隨著使用系統不同也會得到不同的調色盤。

而我們今天要藉由這個工具來幫助我們挑選顏色。

建立 UI

替 Qlabel 建立一個 border

我們修改 Qframe 的屬性

這樣我們就能建立一個明確的邊框

關於 Qframe 的屬性，可以參考這邊查詢

延伸閱讀：QFrame类
文內提供的參考圖：

轉換 day23.ui -> UI.py

pyuic5 -x day23.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

建立控制 controller.py

設定按鈕、顯示顏色

我們先將 label 內的文字設為 “QColorDialog”，
然後連結 pushButton 至 set_label_color 這個 function

from PyQt5 import QtCore 
from PyQt5.QtWidgets import QMainWindow, QColorDialog

from UI import Ui_MainWindow

class MainWindow_controller(QMainWindow):
    def __init__(self):
        super().__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.ui.label.setText("QColorDialog")
        self.ui.pushButton.clicked.connect(self.set_label_color)

在 set_label_color()，我們使用 QColorDialog

我們只要呼叫 QColorDialog.getColor()，就會呼叫系統內建的調色盤，
之後我們可以透過

print(color.name())：會得到 CSS 值 #ff5b87
print(color.red(), color.green(), color.blue())：會得到 RGB 值 (0~255) # 255 91 135
self.ui.label.setStyleSheet(‘background-color:rgb({});’.format(strRGB))：直接設定背景顏色，需先轉換格式為 strRGB

def set_label_color(self):
    color = QColorDialog.getColor() # OpenColorDialog
    if color.isValid():
        print(color.name()) #ff5b87
        print(color.red(), color.green(), color.blue()) # 255 91 135

    r, g, b = color.red(), color.green(), color.blue()        
    strRGB = ('{:^3d}, {:^3d}, {:^3d}'.format(r, g, b))

    self.ui.label.setStyleSheet('background-color:rgb({});'.format(strRGB))

mac 上的 QColorDialog

系統內建的顏色選擇器，已經做得非常精緻了

選擇好顏色後，填入結果

另外依照我們目前的寫法，我們也可以在 terminal 取得我們填色的 RGB 與 CSS，
之後我們可以使用這個值來繼續做顏色的操作。

Reference

【PyQt5】Day 22 - PyQt 視窗的個性化/屬性控制 setWindowFlags，禁止放大縮小、永遠顯示於最上層/最下層

Tue, 05 Oct 2021 00:10:08 +0800

看完這篇文章你會得到的成果圖

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

視窗的個性化控制 setWindowFlags

這篇文章我們要來討論 PyQt 裡面一個很酷的東西，setWindowFlags，
我們主要要討論的功能都是未來我會用到的功能。

在 setWindowFlags 裡面有很多的定義，

其中有幾個我會用到

顯示於最上層/最下層

Qt.WindowStaysOnTopHint: 視窗永遠在最上層，適合互動性高的程式
Qt.WindowStaysOnBottomHint: 視窗永遠在最下層，適合背景程式

關於放大/縮小的設定

當我們沒有特別設定參數時，只繼承「QDialog」的視窗預設都只會有關閉按鈕。
如果是繼承自「QWidget」，則縮小、放大、關閉按鈕都會有。

Qt.WindowMinimizeButtonHint: 顯示最小化按鈕
Qt.WindowMaximizeButtonHint: 顯示最大化按鈕
Qt.WindowMinMaxButtonsHint: 顯示最小化按鈕和最大化按鈕
Qt.WindowCloseButtonHint: 顯示關閉按鈕

這些功能都定義在 PyQt5.QtCore 中，記得要 import !!!

from PyQt5.QtCore import *

搭配上述的使用範例

我們就可以用以下的設定方式，來對視窗做一些特別的控制

只有縮小/關閉 (取消放大)

Qt.WindowMinimizeButtonHint | Qt.WindowCloseButtonHint

只有放大/關閉 (取消縮小)

Qt.WindowMaximizeButtonHint | Qt.WindowCloseButtonHint

只有關閉 (取消放大縮小)

Qt.WindowCloseButtonHint

範例

我們先透過 Qtdesinger 隨便建立一份 UI 介面
並如同之前的方式，建立一個可直接執行的 UI.py

轉換 day22.ui -> UI.py

pyuic5 -x day22.ui -o UI.py

直接打開觀察目前的視窗

我們可以發現目前的視窗中，放大/縮小/關閉的功能都是有的。

觀察目前的程式碼

打開 UI.py，我們發現我們的視窗果然是繼承於「QWidget」
所以預設是縮小、放大、關閉按鈕都會有。

self.centralwidget = QtWidgets.QWidget(MainWindow)

嘗試修改視窗屬性

# 只有縮小/關閉 (取消放大)        
MainWindow.setWindowFlags(Qt.WindowMinimizeButtonHint | Qt.WindowCloseButtonHint)
# 只有放大/關閉 (取消縮小)
# MainWindow.setWindowFlags(Qt.WindowMaximizeButtonHint | Qt.WindowCloseButtonHint)
# 只有關閉 (取消放大縮小)
# MainWindow.setWindowFlags(Qt.WindowCloseButtonHint)
# 視窗永遠在最上層，適合互動性高的程式
# MainWindow.setWindowFlags(Qt.WindowStaysOnTopHint)
# 視窗永遠在最下層，適合背景程式
# MainWindow.setWindowFlags(Qt.WindowStaysOnBottomHint)

# 如果要一起使用，記得都要 | 連接在一起，不然後來的會洗掉之前的

結果

例如我們取消放大的功能，結果如下圖

注意「右上角」反白的「放大」功能。

注意

如果以上的要一起使用(混用)，記得都要 | 連接在一起，不然後來的會洗掉之前的

例如，如果我同時想要"取消放大縮小、只留下關閉"，且還要視窗永遠在最上層。

我要寫

# 只有縮小/關閉 (取消放大)
# 視窗永遠在最上層，適合互動性高的程式
MainWindow.setWindowFlags(Qt.WindowMinimizeButtonHint | Qt.WindowCloseButtonHint | Qt.WindowStaysOnTopHint)

不能這樣寫 (後者會洗掉前者的功能)

# 只有縮小/關閉 (取消放大)
MainWindow.setWindowFlags(Qt.WindowMinimizeButtonHint | Qt.WindowCloseButtonHint)
# 視窗永遠在最上層，適合互動性高的程式
MainWindow.setWindowFlags(Qt.WindowStaysOnTopHint)

Reference

【PyQt5】Day 21 - 透過 PyQt 實現滑鼠監聽總整理，完全掌握滑鼠控制 (listen mouse)

Mon, 04 Oct 2021 02:05:39 +0800

看完這篇文章你會得到的成果圖

前言

這一篇我們會拿現有的 day 17 成品來改，
我們這篇主要要學習的是滑鼠的監聽事件完全掌握。

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day21_mouse_control

UI 部分

這篇文章的 UI 我們直接沿用 Day 17 的內容，
所以這部分沒什麼好多說的，也不是我們這篇文的重點。

PyQt 滑鼠的完全控制總整理

我們先來看看官方文件

關於滑鼠可以用的函數們

官方文件連結：QLabel Class

我們是監聽 Qlabel (圖片)裡面的事件，所以我們查詢的文件位於 QLabel 底下。

我們可以看到，一共可以監聽的滑鼠事件有：

mousePressEvent：按下滑鼠時的反應
mouseReleaseEvent：鬆開滑鼠時的反應
mouseMoveEvent：移動滑鼠時的反應

而這些動作都會觸發一個 “QMouseEvent”，我們再來去看看 QMouseEvent 有什麼

QMouseEvent 能使用的函數

官方文件連結：QMouseEvent Class

看起來 PyQt 有完整的能夠幫我們紀錄滑鼠各種事件細節的功能，這篇我們就來使用看看

測試上述功能

我們修改 day17 的 img_controller.py，修改&新增以下內容：

為了方便比較，我們先暫持移除 set_clicked_position 的功能。

self.ui.label_img.mousePressEvent = self.show_mouse_press # set_clicked_position
self.ui.label_img.mouseReleaseEvent = self.show_mouse_release
self.ui.label_img.mouseMoveEvent = self.show_mouse_move

並新增下面對應的功能 function

def show_mouse_press(self, event):
    print("[show_mouse_press]", event)

def show_mouse_release(self, event):
    print("[show_mouse_release]",event)

def show_mouse_move(self, event):
    print("[show_mouse_move]",event)

結果

我們可以發現，不論是按下去、(按下狀態時)移動、放開滑鼠，
我們的事件都有以 QMouseEvent 的形式被記錄下來。

使用 QMouseEvent 的提供的方法

再來我們觀察 QMouseEvent 內部提供的方法，
這邊因為功能很多，我就只先試未來我很有可能會用到的。

特別著重在：我要知道「按下去位置」、「移動位置」、「鬆開位置」，
並知道「左鍵還是右鍵」。

找出滑鼠移動的各種位置

我們依照文件修改一下剛剛的 function

def show_mouse_press(self, event):
    print(f"[show_mouse_press] {event.x()=}, {event.y()=}, {event.button()=}")


def show_mouse_release(self, event):
    print(f"[show_mouse_release] {event.x()=}, {event.y()=}, {event.button()=}")

def show_mouse_move(self, event):
    print(f"[show_mouse_move] {event.x()=}, {event.y()=}, {event.button()=}")

結果

這是一段我測試時的操作

我們可以整理出一個結果，

滑鼠的 x, y

關於滑鼠移動的 x, y，我們可以透過上述的方式直接取得，
中間 x, y，代表著滑鼠移動的軌跡。

滑鼠的按鍵 button()

event.button() = 0：沒有按鍵輸入
event.button() = 1：滑鼠左鍵
event.button() = 2：滑鼠右鍵

到此，我們掌握了大部分我在滑鼠會使用的功能，
之後我們會透過這些函數加以運用。

Reference

官方文件連結：QLabel Class
官方文件連結：QMouseEvent Class

【PyQt5】Day 20 - PyQt 最重要的 QThread 概念 / 為什麼 windows, mac, ubuntu (linux) 程式會「沒有回應」?

Fri, 01 Oct 2021 02:58:40 +0800

看完這篇文章你會得到的成果圖

與昨天一樣，不過我們今天要談一個 PyQt 中非常重要的 QThread 概念 !

前言

今天要談一個 PyQt 中非常重要的 QThread 概念!
我們要修改昨天的 QProgressBar 功能，將它潛在問題修改並解決他。

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day20_qthread

重要的 QThread 概念

我們今天要來先討論一下在 PyQt 中非常重要的東西!
這個就叫做「QThread」 !

為什麼「QThread」很重要，其實在昨天的 QTimer 中我們就已經有說過，
我們的程式一定不會是一直線運行的，程式執行的過程中，
勢必要有些「背景處理」的事情!

例如：時間就應該要背景更新，而不是我們主程式隨時切換去給時間+1
這樣光用想的就知道，萬一上一行程式執行慢了一點，時間就會開始有越來越大的誤差了吧!

為什麼我們要挑在這裡先講?

因為 ProgressBar 正好就符合這樣的需求，
我們可以試著想想，如果一個 ProgressBar 正在跑，我們就不能同時做其他事情，
這樣子的程式，不能說不好 (畢竟還是能動，只是要等他結束才能做其他事XD)
但不覺得很不符合使用者需求嗎XD

觀察 - 居然程式會「沒有回應」，還不能關閉?!

我們把運行到一半的程式，強制用右上角的「X」關閉看看，
我們發現居然程式「不但關不掉」，甚至還「沒有回應」了?!

這就是沒有做 QThread 搞得鬼，因為在 Windows 判斷一個視窗「沒有回應」的判斷條件中，
當我們對視窗「進行某個行為(例如：按按鈕、關閉視窗)」，卻沒有得到回應，
沒有回應的原因就是因為他被「卡在單一任務的過程中，無法給予回應」
windows 就會判定這個程式是「沒有回應」的
(其實不只 windows, ubuntu, mac 在這個邏輯底下都是)

所以，我們必須把這個任務放入 QThread 執行，使得我們的主線任務可以被空出來，
能應付並接收新的其他任務。

將 ProgressBar 修改為 QThread 的版本 (修改昨天的 controller.py)

主要可以分為兩個任務：

定義 Thread 任務內容：class ThreadTask(QThread)，名稱可改
從主程式去呼叫 thread 執行任務：我們使用 pyqtSignal，來傳送訊號，協助我們變更值

宣告部分

注意「QThread, pyqtSignal」被宣告在「PyQt5.QtCore」裡面

from PyQt5 import QtCore, QtWidgets
from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtWidgets import QFileDialog
from PyQt5.QtCore import QThread, pyqtSignal

import time

from UI import Ui_MainWindow

Thread 任務宣告

宣告 pyqtSignal

我們在 ThreadTask 裡面宣告一個 global 的 pyqtSignal，
並指定給 qthread_signal，(需要宣告類別)
結果就像「qthread_signal = pyqtSignal(int)」

送出訊號 emit

我們把訊號送回去給主程式，我們透過 emit 這個 function，
可以協助我們把值送回主程式，並不影響主程式的任務。

class ThreadTask(QThread):
    qthread_signal = pyqtSignal(int)

    def start_progress(self):
        max_value = 100
        for i in range(max_value):
            time.sleep(0.1)
            self.qthread_signal.emit(i+1)

主要控制的部分

我們把按鈕連結 ButtonClick() 這個 function，
我們在 ButtonClick() 這個任務當中，宣告我們的一份新的 ThreadTask 任務，
並把訊號連接至一個 function，

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.ui.progressBar.setMaximum(100)
        self.ui.pushButton.clicked.connect(self.ButtonClick) 

    def ButtonClick(self):
        self.qthread = ThreadTask()
        self.qthread.qthread_signal.connect(self.progress_changed) 
        self.qthread.start_progress()

    def progress_changed(self, value):        
        self.ui.progressBar.setValue(value)

連結 pyqtSignal 與某一個 function()

我們需要把值的變化傳至一個 function 當中，
我們利用「self.qthread.qthread_signal.connect(self.progress_changed) 」
連結「訊號 (qthread_signal)」與「function - progress_changed()」的關係
而這個 function 會需要保留 value 作為一個欄位，
實際上在連接時，並不是以常見的形式傳入這個值
(正確來說，應該是前面的 qthread_signal 被作為 value 傳入)

def progress_changed(self, value):        
    self.ui.progressBar.setValue(value)

我們仔細看，value 就是代表 qthread_signal，
所以我們可以直接從 setValue 去改他。

啟動 thread 用的 start_progress()

這部分就沒什麼好說的，我們會需要一個 function 幫助我們啟動 Thread。
並用 emit 把訊號送回來。

【PyQt5】Day 19 - 使用 QProgressBar，製作進度條的功能

Fri, 01 Oct 2021 02:40:24 +0800

看完這篇文章你會得到的成果圖

前言

這篇我們要來學一個新的東西 QProgressBar!
QProgressBar 就是一個能顯示出進度條效果的酷功能哦!

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day19_progress_bar

UI 設計部份 (UI.py)

我們從 Display Widgets 中選取 Progress Bar，
從預覽中，我們就已經可以感覺到進度條的效果囉!

另外我們拉一個按鈕，作為「開始鍵」。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day19.ui -> UI.py

pyuic5 -x day19.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

controller 設計部份 (controller.py)

單純控制 QProgressBar 很簡單，我們只需要設定

上限值：setMaximum
增加值：setValue

注意都是「整數 int」的變化, 更改值請以更改上限為主，讓他自己去換算。
使用「小數」會跳錯!!!

def setup_control(self):
    self.ui.pushButton.clicked.connect(self.start_progress) 

def start_progress(self):
    max_value = 100
    self.ui.progressBar.setMaximum(max_value)

    for i in range(max_value):
        time.sleep(0.1)
        self.ui.progressBar.setValue(i+1)

設定主程式 setup_control()

self.ui.pushButton.clicked.connect(self.start_progress)：設定按鍵功能，與 start_progress() 這個 function 串接

按鈕啟動的程式 start_progress()

設定上限值為 100

max_value = 100
self.ui.progressBar.setMaximum(max_value)

設定每次增加 1

for i in range(max_value):
time.sleep(0.1)：休息 0.1 秒
self.ui.progressBar.setValue(i+1) 每次值增加 1

執行結果

照我們 day5 的程式架構，我們執行

python start.py

按下 GO 之後，進度條就順利執行囉!

【PyQt5】Day 18 / Project 使用 QTimer，自製碼表(計時器) PyQt5 stopwatch DIY

Thu, 30 Sep 2021 01:53:01 +0800

看完這篇文章你會得到的成果圖

前言

這篇我們要來學一個新的東西 QTimer!
QTimer 是獨立於程式運作的計時器，
你可能會想什麼時候會用到?

其實很意外的，真正的程式反而非常經常會需要這個，功能來作為「自動更新」，
我們仔細想想，一般的程式一行接一行執行下去，但萬一有個背景任務，
是隨著時間要定期更新的，我們主程式的流程哪有「突然切換至時間功能，並更新」，這樣的設計
(如果是 step by step 的設計程式，這樣也太難。)

因此我們有 QTimer 的設計，來幫助我們定期更新一些東西，或做一些其他事情。

之後也會介紹 QThread，也同樣的是讓主程式在執行的同時，能夠同時有其他的支線任務可以獨立運行!

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day18_qtimer

UI 設計部份 (UI.py)

這次我們的重點不是放在 UI 設計，我們簡單拉一個作為結果顯示用的 Qlabel 即可。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day18.ui -> UI.py

pyuic5 -x day18.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

controller 設計部份 (controller.py)

QTimer 的使用方式很簡單，主要我們需要設定一個 timeout 時間，
每經過一次 timeout，我們的程式就會做一次指定的事情

from PyQt5 import QtCore 
from PyQt5.QtWidgets import QMainWindow, QFileDialog
from PyQt5.QtCore import QTimer

import time
import os

from UI import Ui_MainWindow

class MainWindow_controller(QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.timer=QTimer() # init QTimer
        self.timer.timeout.connect(self.run) # when timeout, do run one
        self.timer.start(1) # start Timer, here we set '1ms' while timeout one time
        self.time_counter = 0  # init time counter # for testing: 3599000

    def run(self):
        self.ui.label.setText(str(self.set_time_counter_format(self.time_counter))) # show time_counter (by format)
        self.time_counter += 1 # time_counter + 1


    def set_time_counter_format(self, time_counter):
        ms = time_counter % 1000
        total_sec = max(0, (time_counter - ms)//1000)
        hour = max(0, total_sec//3600)
        minute = max(0, total_sec//60 - hour * 60)
        sec = max(0, (total_sec - (hour * 3600) - (minute * 60)))
        return f"{hour}:{minute:0>2}:{sec:0>2}.{ms:0>3}"

我們先來看一下，最主要的設定 QTimer 部分

設定主程式 setup_control()

self.timer=QTimer()：初始化 QTimer
self.timer.timeout.connect(self.run)：當 QTimer 每經過一次 timeout，執行 run 的動作
self.timer.start(1)：開始 QTimer，這裡的"1" 代表的是 1ms，所以我們每 1ms 就會 timeout 一次
self.time_counter = 0：我們初始化計數器，從 0 開始計數。

設定 run()，每 timeout 就執行一次

self.ui.label.setText(str(self.set_time_counter_format(self.time_counter))))：設定格式並顯示時間
self.time_counter += 1：計數器 +1 (因為 timeout 一次)

設定時間格式 set_time_counter_format()

這邊就是我自己計算的公式了，有幾個計算上的重點
max(0, x)：避免計算結果 < 0 導致顯示負數，我們直接給予 0 這個值
f"{hour}:{minute:0>2}:{sec:0>2}.{ms:0>3}"： f-string 的格式設定，我們抓住「:」冒號後的就是格式設定內容，「0」表示補0，「>」表示靠右，「2(3)」表示總共2(3)位。

執行結果

照我們 day5 的程式架構，我們執行

python start.py

於是我們就這樣完成了我們的碼表 (stopwatch)。

此外，我們可以透過更改 counter 的初始值來修正程式錯誤
例如依照我們上面的算式，我們可以設定初始值為 “3599000”，我們可以同時驗證「小時」、「分鐘」、「秒」、能不能正確增加 (因為從約 0:59:50開始)

Reference

f-string 格式設定

【PyQt5】Day 17 / Project 製作標註 roi 工具, 開始導入 OpenCV 作為繪圖引擎, 在圖上畫點並顯示座標

Tue, 21 Sep 2021 04:12:27 +0800

看完這篇文章你會得到的成果圖

前言

這一篇我們會繼續拿現有的 day 16 成品來改，
我們在 day 16 已經學會了如何取得點座標，
接下來我們要將「點畫在畫面上」、並「取得該點座標」，
而點座標又可分為「正規化 roi 比例座標」、「實際圖片座標」

而在其中，「畫點」的功能，我們雖然能夠透過 PyQt 的 Qpainter 實現，
不過因為我們後續也會大量使用 OpenCV 作為我們圖片處理的引擎，
所以不如就趁先在開始導入吧！

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day17_roi_drawer

導入 OpenCV 作為繪圖引擎

為了往後的開發順利，這次的開發我們必須謹慎先規劃一下了，
接下來我們想導入的 OpenCV 作為我們圖像處理的引擎，
我預期會是一個像 library 一樣的模組，
我們把所有 OpenCV 圖像處理的功能的「細節」做在裡面，
而 img_controller.py 只需要呼叫「這個 OpenCV engine 的 API 即可順利使用」。

最好的情況甚至是 img_controller.py 都不用「import cv2」，
而只有 OpenCV engine 這支程式統一「import cv2」，
在此處理 OpenCV 相關的事情，所以我們等等也會稍微修改一下 day16 的部分。

如下圖：(點圖可放大)

UI 設計部份 (UI.py)

我們接續 day 16 的結果進行修改，
我們新增兩個 QTextEdit，作為 roi 輸出的欄位。

為什麼使用 QTextEdit? 因為這樣我們才能複製我們要用的結果XDD
Qlabel 只能顯示就不能複製了。

我們就直接在 UI 上新增以下內容，並給予對應參數：

*「顯示資訊用，不會改動 - Ratio ROI」：label_info_ratio_roi
*「顯示資訊用，不會改動 - Real ROI」：label_info_real_roi
*「依比例表示的 ROI 顯示欄位」：text_ratio_roi
*「依實際圖片座標表示的 ROI 顯示欄位」：text_real_roi

我設計的介面如同上圖

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day17.ui -> UI.py

pyuic5 -x day17.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

這樣我們的介面就大致出來囉！

controller 設計部份 (controller.py)

從 UI.py 中找出物件名稱

這次我們新增了 3 個 label

老樣子，同 day13 的 scrollArea 說明，我們一樣需要刪除 scrollAreaWidgetContents 的部份

新增與調整的 scrollArea 片段

self.scrollArea = QtWidgets.QScrollArea(self.verticalLayoutWidget)
self.scrollArea.setWidgetResizable(True)
self.scrollArea.setObjectName("scrollArea")
# self.scrollAreaWidgetContents = QtWidgets.QWidget()
# self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 937, 527))
# self.scrollAreaWidgetContents.setObjectName("scrollAreaWidgetContents")
# self.label_img = QtWidgets.QLabel(self.scrollAreaWidgetContents)
self.label_img = QtWidgets.QLabel() # 調整為只單純宣告
self.label_img.setGeometry(QtCore.QRect(0, 0, 941, 521))
self.label_img.setObjectName("label_img")
# self.scrollArea.setWidget(self.scrollAreaWidgetContents)
self.scrollArea.setWidget(self.label_img)

取得名稱後，去修改控制部分

我們今天會新增一個 opencv_engine.py，作為圖像處理的引擎使用，
對我來說最理想的情況，就是只有 opencv_engine.py 這支程式 import cv2，
然後我們將所有會用到 OpenCV 的功能封裝成 API (function)，
再給 img_controller.py 去 call API(function)。

controller.py：主要控制程式的部分
img_controller.py：另外封裝專門處理圖片的部分
opencv_engine.py：專門處理 OpenCV library 的引擎，基本上大部分圖像處理都靠他

專門處理圖像的引擎 opencv_engine.py

為了使用方便，我們把這個程式會呼叫的部分全部都用 class 封裝起來，
而且方便直接取用，我們讓使用者不需要先宣告一個 instance(物件)，
全部都寫成 static method，方便使用者直接呼叫這些已經包好的功能。

import cv2

class opencv_engine(object):

    @staticmethod
    def point_float_to_int(point):
        return (int(point[0]), int(point[1]))

    @staticmethod
    def read_image(file_path):
        return cv2.imread(file_path)

    @staticmethod
    def draw_point(img, point=(0, 0), color = (0, 0, 255)): # red
        point = opencv_engine.point_float_to_int(point)
        print(f"get {point=}")
        point_size = 1
        thickness = 4
        return cv2.circle(img, point, point_size, color, thickness)

我們一共封裝了三個功能，point_float_to_int, read_image, draw_point，

read_image(file_path)

對，所以我們等等也會把前幾天的透過 cv2.imread 的功能搬到這裡來，
再改用 staticmethod 的呼叫方式 opencv_engine.read_image(file_path)，
取得回傳的圖片。

point_float_to_int(point)

因為 OpenCV 的點座標處理會常常要求一定要整數輸入，
而我們又常常以 (x, y) 這樣的座標為單位處理，
而不是個別傳入 x 與 y，因此乾脆獨立依格 function 專門把傳進來的 (x, y)
強轉成 (int x, int y) 並回傳。

draw_point(img, point=(0, 0), color = (0, 0, 255))

這個就是我們的 OpenCV 老朋友了，
為了使程式更加彈性，我特別把 point, color 拉出來，
因此之後傳入時，我們除了座標之外、也可以指定傳入的顏色。

不知道怎麼使用 OpenCV 畫點?
可以參考我的另外一篇文，內有詳細說明：【OpenCV】11 – OpenCV 建立新空白圖、畫點、畫圓 create new pictures, draw points and draw circle

專門處理圖片的 img_controller.py

依照上面的內容我們需要「修改圖片傳入的部分」，
另外也需要新增「顯示 roi 文字的部分」、「呼叫顯示點的功能」

導入 opencv_engine.py

我們要從 opencv_engine.py 導入 class opencv_engine，
因此要 from opencv_engine import opencv_engine
(前者為 .py 檔名，後者為 class 名稱)

from opencv_engine import opencv_engine

讀檔部分修改 read_file_and_init(self)

這邊只截錄重點部分，
因為我們這隻 img_controller.py 程式不想再 import cv2 了，
全交由 opencv_engine 處理，
所以我們將原來的 cv2.imread() 改為 opencv_engine.read_image()

def read_file_and_init(self):
    try:
        self.origin_img = opencv_engine.read_image(self.img_path)
        self.origin_height, self.origin_width, self.origin_channel = self.origin_img.shape
    except:
        self.origin_img = opencv_engine.read_image('sad.png')
        self.origin_height, self.origin_width, self.origin_channel = self.origin_img.shape

畫點 draw_point(self, point)

我們剛剛已經封裝好程式的功能了，所以這邊可以直接呼叫 opencv_engine.draw_point()，
並把點座標傳入，記得先換算好座標 (昨天提到的，使用座標正規化統一處理)

def draw_point(self, point):
    # give me normalized point, i will help you to transform to origin cv image position
    cv_image_x = point[0]*self.origin_width
    cv_image_y = point[1]*self.origin_height
    self.display_img = opencv_engine.draw_point(self.display_img, (cv_image_x, cv_image_y))
    self.__update_img()

更新 roi 內的文字 __update_text_point_roi(self, point)

def __update_text_point_roi(self, point):
    # give me normalized point, i will help you to transform to origin cv image position
    cv_image_x = point[0]*self.origin_width
    cv_image_y = point[1]*self.origin_height
    self.ui.text_ratio_roi.append(f"[{point[0]:.6f}, {point[1]:.6f}]")
    self.ui.text_real_roi.append(f"[{int(cv_image_x)}, {int(cv_image_y)}]")

這邊就單純更新文字了，有正規化的 roi 點擊座標，
相信更新起來也相當容易吧，只需要做一些簡單的運算。

這邊為了我自己使用 roi 要使用的格式，我特別改為 list 顯示點座標，
沒有什麼特別的不使用 tuple 而使用 list 的原因。

修改傳回點座標的 get_clicked_position

新增最後兩行，畫點 draw_point、更新 roi 文字資訊 __update_text_point_roi

def get_clicked_position(self, event):
    x = event.pos().x()
    y = event.pos().y()
    self.__update_text_clicked_position(x, y)
    norm_x = x/self.qpixmap.width()
    norm_y = y/self.qpixmap.height()
    self.draw_point((norm_x, norm_y))
    self.__update_text_point_roi((norm_x, norm_y))

修改並重新整理系統流程

為什麼會突然提到這個…，
這個就是我前幾天不小心欠下的技術債，
因為我沒有先規劃設定比例的邏輯，
導致現在更新圖片的思路非常混亂。

什麼混亂法呢? 就是顯示圖片的時候可能需要先想，要不要先去 call 設定比例，
欸不對設定比例後接續也會更新圖片。

可是我有時候只想更新圖片，比例也沒變，我還需要 call 設定比例嗎???

就是沒有好好規劃啦! 所以我決定重新規劃架構，並畫出來這樣思路就很清楚了。

目前的程式邏輯

這邊我已經先優化了 ratio 那邊的混亂邏輯才畫出來的，
所以這已經是整理過的一版XD，
啊不過做為示範，這裡其實還有可以優地的地方，
觀察下圖我們可以發現：

在初始化事件中 init() 與 set_path() 設定新圖片路徑中，
我們有同樣的邏輯，都是先呼叫讀檔後去更新圖片。

這些都是要整理出流程圖才知道能優化的，沒整理前我也沒想到這裡可以優化。

所以我們就把流程圖優化成下圖

我們把重複的部分都塞進讀檔內，讓讀檔後可以直接更新，
流程圖的邏輯就可以看起來更乾淨。

統一命名格式 set, update

這個也是為了以後的自己好，因為程式會越寫越大，
趁現在我們把命名格式統一一下，

set 開頭的 function：可以外部呼叫，為修改事件的開頭
__update 開頭的 function：皆為 private function，不可外部呼叫，只作為更新畫面使用

好啦(累癱，至少現在趁程式還小，趕快把該整理的格式都整理後，之後相信會舒服很多的。

於是，這是最終修改後的 img_controller.py

這會是我最後一次貼完整程式碼了，因為越寫越大XDD，
再貼完整程式碼於文章中會太占版面XDD，
之後會只貼更新的部分，想要完整程式碼的話可以去看我的 github。

from PyQt5 import QtCore 
from PyQt5.QtGui import QImage, QPixmap

from opencv_engine import opencv_engine

class img_controller(object):
    def __init__(self, img_path, ui):
        self.img_path = img_path
        self.ui = ui
        self.ratio_value = 50
        self.read_file_and_init()

    def read_file_and_init(self):
        try:
            self.origin_img = opencv_engine.read_image(self.img_path)
            self.origin_height, self.origin_width, self.origin_channel = self.origin_img.shape
        except:
            self.origin_img = opencv_engine.read_image('sad.png')
            self.origin_height, self.origin_width, self.origin_channel = self.origin_img.shape

        self.display_img = self.origin_img
        self.__update_text_file_path()
        self.ratio_value = 50 # re-init
        self.__update_img()

    def set_path(self, img_path):
        self.img_path = img_path
        self.read_file_and_init()

    def __update_img_ratio(self):
        self.ratio_rate = pow(10, (self.ratio_value - 50)/50)
        qpixmap_height = self.origin_height * self.ratio_rate
        self.qpixmap = self.qpixmap.scaledToHeight(qpixmap_height)
        self.__update_text_ratio()
        self.__update_text_img_shape()

    def __update_img(self):       
        bytesPerline = 3 * self.origin_width
        qimg = QImage(self.display_img, self.origin_width, self.origin_height, bytesPerline, QImage.Format_RGB888).rgbSwapped()
        self.qpixmap = QPixmap.fromImage(qimg)
        self.__update_img_ratio()
        self.ui.label_img.setPixmap(self.qpixmap)
        self.ui.label_img.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop)
        self.ui.label_img.mousePressEvent = self.set_clicked_position

    def __update_text_file_path(self):
        self.ui.label_file_name.setText(f"File path = {self.img_path}")

    def __update_text_ratio(self):
        self.ui.label_ratio.setText(f"{int(100*self.ratio_rate)} %")

    def __update_text_img_shape(self):
        current_text = f"Current img shape = ({self.qpixmap.width()}, {self.qpixmap.height()})"
        origin_text = f"Origin img shape = ({self.origin_width}, {self.origin_height})"
        self.ui.label_img_shape.setText(current_text+"\t"+origin_text)

    def __update_text_clicked_position(self, x, y):
        # give me qpixmap point
        self.ui.label_click_pos.setText(f"Clicked postion = ({x}, {y})")
        norm_x = x/self.qpixmap.width()
        norm_y = y/self.qpixmap.height()
        print(f"(x, y) = ({x}, {y}), normalized (x, y) = ({norm_x}, {norm_y})")
        self.ui.label_norm_pos.setText(f"Normalized postion = ({norm_x:.3f}, {norm_y:.3f})")
        self.ui.label_real_pos.setText(f"Real postion = ({int(norm_x*self.origin_width)}, {int(norm_y*self.origin_height)})")


    def set_zoom_in(self):
        self.ratio_value = max(0, self.ratio_value - 1)
        self.__update_img()

    def set_zoom_out(self):
        self.ratio_value = min(100, self.ratio_value + 1)
        self.__update_img()

    def set_slider_value(self, value):
        self.ratio_value = value
        self.__update_img()

    def set_clicked_position(self, event):
        x = event.pos().x()
        y = event.pos().y()
        self.__update_text_clicked_position(x, y)
        norm_x = x/self.qpixmap.width()
        norm_y = y/self.qpixmap.height()
        self.draw_point((norm_x, norm_y))
        self.__update_text_point_roi((norm_x, norm_y))

    def draw_point(self, point):
        # give me normalized point, i will help you to transform to origin cv image position
        cv_image_x = point[0]*self.origin_width
        cv_image_y = point[1]*self.origin_height
        self.display_img = opencv_engine.draw_point(self.display_img, (cv_image_x, cv_image_y))
        self.__update_img()

    def __update_text_point_roi(self, point):
        # give me normalized point, i will help you to transform to origin cv image position
        cv_image_x = point[0]*self.origin_width
        cv_image_y = point[1]*self.origin_height
        self.ui.text_ratio_roi.append(f"[{point[0]:.6f}, {point[1]:.6f}]")
        self.ui.text_real_roi.append(f"[{int(cv_image_x)}, {int(cv_image_y)}]")

執行結果

照我們 day5 的程式架構，我們執行

python start.py

我們所有在畫面點擊的點，都會在下方以兩種不同的方式表示，
分別是比例的座標、實際的圖片座標，
就這樣完成了我要使用的 roi 標註工具。

Reference

【PyQt5】Day 16 - 在 PyQt5 中取得圖片座標 (滑鼠位置) mousePressEvent，觀察圖片在 Qt 中產生的方式，對原圖進行座標換算處理

Sun, 19 Sep 2021 13:57:23 +0800

看完這篇文章你會得到的成果圖

前言

這一篇我們會繼續拿現有的 day 15 成品來改，
接下來我們要面對關於「處理圖片」與「顯示圖片」不一致的問題。

這是一個會影響非常深遠的問題，因此我們需要早點針對這個問題進行規劃。

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day16_mouse_get_pos

我們先來分析「處理圖片」與「顯示圖片」不一致的問題

為什麼會有「處理圖片」與「顯示圖片」不一致的問題?
最主要的原因是因為我們拿進來的圖片可能會解析度較高，

而我們處理的視窗就那麼大，我們沒辦法每次都讓他已「原解析度」來顯示。
所以在「處理圖片」與「顯示圖片」之間溝通的橋樑我們必須早點做處理。

而在我們程式中，「處理圖片」與「顯示圖片」分別對應到的是以下兩個變數。

顯示的圖片 self.qpixmap
處理中的圖片 self.img

分析兩者之間的「程式」關係

依照 day15 的邏輯，我們處理圖片顯示的過程中如下，
我們來看看這其中有沒有什麼可以簡化的地方。

1. self.img 是由 OpenCV 的 imread 取得的圖片 (讀入的原圖)

self.img = cv2.imread(self.img_path)

2. 我們會先經由以下處理，將他轉為 Qimg

self.qimg = QImage(self.img, self.origin_width, self.origin_height, bytesPerline, QImage.Format_RGB888).rgbSwapped()

3. 再來會由 Qimg 轉為 QPixmap

self.origin_qpixmap = QPixmap.fromImage(self.qimg)

4. Qpixmap 可能會經由一些縮放的處理，最後藉由 Qlabel 顯示在畫面上

self.label_img.setPixmap(self.qpixmap)

分析這個流程，發現實際上圖片經過了很多次的轉換，才到最後顯示的部分。

OpenCV image -> Qimg -> QPixmap -> Qlabel顯示

我們目前最多是在 QPixmap 這裡才處理縮放的問題。
但接下來也許我們會需要針對原圖進行改動，這時候我們會需要處理原解析度的圖片。

「也就是說，雖然我們是在 QPixmap 作業，但實際上處理的層級是在 OpenCV image」

我們簡化這個流程後，我們可以知道我們可以記錄以下訊息會更方便我們處理：

QPixmap 現在的長寬 (會因為顯示而改變)
QPixmap 與 OpenCV image 的比例差距 (會因為顯示而改變)
OpenCV image 原圖的長寬 (永遠不變)

並且可以得到換算公式：

「QPixmap 現在的長寬」=「OpenCV image 的長寬」*「QPixmap 與 OpenCV image 的比例差距」

有沒有更不容易混淆的做法? - 不如我們都「正規化」一下

雖然上面我們已經把公式都寫出來也整理好了，但我覺得換算上還是很容易混淆…
例如：一不小心可能就會不小心把公式寫錯邊，到底誰乘誰?、到底誰除誰?

所以我們就統一用「正規化」來溝通吧，這樣標準就一定一致了。

如下圖：我們原來的作法

這個做法的優點就是直覺，但使用公式上需注意有沒有不小心乘除搞錯。
等等我們要進行座標 (x ,y) 換算時更需要小心。

如下圖：我們優化的作法 (正規化)

我們一律先把 (x,y) 座標正規化至一個長寬介於為 0~1 的比例上，
再來進行後續的換算，這樣我們只要知道「顯示圖片」、「實際圖片」的長寬，
在處理上都一慮用正規化的概念下去想 (x, y)，
我們會相對比較難犯下不小心搞錯公式的問題。

簡單來說，可以比較不容易出現公式錯誤的問題。(對我個人來說)

UI 設計部份 (UI.py)

我們今天要來取得圖片上的座標，會由 day 15 的結果繼續進行更改，
上述的討論中，我們已經有討論到我們怎麼樣處理「顯示圖片」與「原先圖片」的差異，

我們就直接在 UI 上寫下以下內容，並給予對應參數：

*「點擊座標(顯示圖片的座標)」：label_click_pos
*「換算後，正規化的座標」：label_norm_pos
*「實際座標(對應到原圖片的座標)」：label_real_pos

我設計的介面如同上圖

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day16.ui -> UI.py

pyuic5 -x day16.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

這樣我們的介面就大致出來囉！

controller 設計部份 (controller.py)

從 UI.py 中找出物件名稱

這次我們新增了 3 個 label

*「點擊座標(顯示圖片的座標)」：label_click_pos
*「換算後，正規化的座標」：label_norm_pos
*「實際座標(對應到原圖片的座標)」：label_real_pos

同 day13 的 scrollArea 說明，我們一樣需要刪除 scrollAreaWidgetContents 的部份

新增與調整的 scrollArea 片段

self.scrollArea = QtWidgets.QScrollArea(self.verticalLayoutWidget)
self.scrollArea.setWidgetResizable(True)
self.scrollArea.setObjectName("scrollArea")
# self.scrollAreaWidgetContents = QtWidgets.QWidget()
# self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 937, 527))
# self.scrollAreaWidgetContents.setObjectName("scrollAreaWidgetContents")
# self.label_img = QtWidgets.QLabel(self.scrollAreaWidgetContents)
self.label_img = QtWidgets.QLabel() # 調整為只單純宣告
self.label_img.setGeometry(QtCore.QRect(0, 0, 941, 521))
self.label_img.setObjectName("label_img")
# self.scrollArea.setWidget(self.scrollAreaWidgetContents)
self.scrollArea.setWidget(self.label_img)

取得名稱後，去修改控制部分

截至到 day15，總共有 controller.py, img_controller.py 兩支程式來控制我們的系統，

controller.py：主要控制程式的部分
img_controller.py：另外封裝專門處理圖片的部分

修改控制主程式的 controller.py

我們接續 day 15 的內容，
新增我們剛剛在 UI 增加的 label，因為也是跟圖片有關的內容，
我們只做參數的傳遞，其他交由 img_controller.py 處理。

self.img_controller = img_controller(img_path=self.file_path,
                                     label_img=self.ui.label_img,
                                     label_file_path=self.ui.label_file_name,
                                     label_ratio=self.ui.label_ratio,
                                     label_img_shape=self.ui.label_img_shape,
                                     label_click_pos=self.ui.label_click_pos,
                                     label_norm_pos=self.ui.label_norm_pos,
                                     label_real_pos=self.ui.label_real_pos)

另外封裝專門處理圖片的 img_controller.py

我們替 day 15 的 function 「擴充」新的偵測座標功能

宣告的地方，新增傳入的參數

class img_controller(object):
    def __init__(self, img_path, label_img, label_file_path, label_ratio, label_img_shape, label_click_pos, label_norm_pos, label_real_pos):
        self.label_click_pos = label_click_pos
        self.label_norm_pos = label_norm_pos
        self.label_real_pos = label_real_pos

更新圖片時，同步增加監聽偵測滑鼠位置的 mousePressEvent

def __update_img(self):       
        self.label_img.setPixmap(self.qpixmap)
        self.label_img.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop)
        self.label_img.mousePressEvent = self.get_clicked_position

self.label_img.mousePressEvent = self.get_clicked_position

我們替 Qlabel 增加一個 mousePressEvent，而宣告的 function 就是我們等等會撰寫的 get_clicked_position()

幫助我們取得回傳座標的 get_clicked_position

def get_clicked_position(self, event):
    x = event.pos().x()
    y = event.pos().y() 
    self.norm_x = x/self.qpixmap.width()
    self.norm_y = y/self.qpixmap.height()
    print(f"(x, y) = ({x}, {y}), normalized (x, y) = ({self.norm_x}, {self.norm_y})")
    self.__update_text_clicked_position(x, y)

我們每觸發一次上述的點擊 mousePressEvent，就會執行一次 get_clicked_position 的內容，
我們可以從 event 這個變數取得點擊的 (x, y)

x = event.pos().x()
y = event.pos().y()

在我們最上方的討論中，我們決定要把所有的座標進行正規化，
以避免直接運算，容易產生的公式乘除錯誤的問題，
因此我們直接透過以下公式將座標正規化。

self.norm_x = x/self.qpixmap.width()
self.norm_y = y/self.qpixmap.height()

最後我們可以顯示一下，我們所點擊的 (x, y)，與正規化後介於 0~1 之間呈現比例展示的 x, y 座標。
並將這些資訊傳入我們修改文字的 function 中。

print(f"(x, y) = ({x}, {y}), normalized (x, y) = ({self.norm_x}, {self.norm_y})")
self.__update_text_clicked_position(x, y)

更新畫面座標資訊的 __update_text_clicked_position()

因為只是純更新資訊，我們將此 function 設為 private，不讓我們能夠輕易存取內容，
我們更新三種座標的顯示：

*「點擊座標(顯示圖片的座標)」：label_click_pos
*「換算後，正規化的座標」：label_norm_pos
*「實際座標(對應到原圖片的座標)」：label_real_pos

def __update_text_clicked_position(self, x, y):
    self.label_click_pos.setText(f"Clicked postion = ({x}, {y})")
    self.label_norm_pos.setText(f"Normalized postion = ({self.norm_x:.3f}, {self.norm_y:.3f})")
    self.label_real_pos.setText(f"Real postion = ({int(self.norm_x*self.origin_width)}, {int(self.norm_y*self.origin_height)})")

這樣就更新完了。

執行結果

照我們 day5 的程式架構，我們執行

python start.py

我們點擊任意的點，就會顯示「該座標」、「正規化座標」、「對應原圖實際座標」。

而在我們的 terminal 當中也會顯示一些我們剛剛印出來的資訊，方便我們 debug。

觀察並檢查座標 (x, y) - 我們在 UI 介面上點擊的原點在哪?

這邊有個衍伸的問題，我們在 UI 介面上點擊的原點在哪?
也就是說 (0, 0) 是從哪裡開始算的呢?

我們可以順著我們剛剛做出來的成品，一路找到 (0, 0) 的位置，

我們發現 (0, 0) 座標剛好就位於「圖片」的左上角，
而不是「UI介面」的左上角，看起來完全這符合我們預期
(這邊只是再確認座標與我們想像無誤，免得後續才回來處理很麻煩)

至於圖片的最右下角，座標又是什麼呢?

我們可以發現就是圖片目前「顯示」的解析度的上限值，
因此我們可以完全確認，我們正在操作的座標就是 QPixmap 的座標，
我們的換算都可以由 QPixmap 出發，依照比例進行換算。

Reference

【PyQt5】Day 15 / Project 與檔案功能整合，製作出可讀取圖片並可縮放的 UI 介面 (使用 PyQt + OpenCV)

Mon, 30 Aug 2021 19:11:43 +0800

看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day15_image_loader

UI 設計部份 (UI.py)

我們今天要把 Day 10 的讀檔功能、Day 14 的滑條功能，
整合進 Day 13 的最終成果當中。

因此我們會從 Day 13 接下去改後續的功能。

我設計的介面如同上圖，
部份想法如下：

除了 zoom in, zoom out 可縮放圖片大小之外，也可用滑條改變，我預期

50 -> 100%
0 -> 10%
100 -> 1000%

- 推算公式可以得到 y = 10^((x-50)/50)

推算公式的過程，我們把所有數值先正規化到 -1~1 間，就會很好推公式了
我們把 10% -> 0.1，100% -> 1，1000% -> 10
可參考一下的表，就是我們正規化後反推公式的過程。
最後可得上方公式 y = 10^((x-50)/50)

progress bar 正規化
0	50	100
-50	0	50
-1	0	1
ratio 正規化
10%	100%	1000%
10^-1	10^0	10^1
-1	0	1

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day15.ui -> UI.py

pyuic5 -x day15.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

這樣我們的介面就大致出來囉！

controller 設計部份 (controller.py)

從 UI.py 中找出物件名稱

button 類

btn_open_file: 開啟檔案用按鈕
btn_zoom_in: 放大用按鈕
btn_zoom_out: 縮小用按鈕

label 類

label_ratio: 顯示現在圖片縮放比例
label_file_name: 顯示現在檔名
label_img_shape: 顯示現在/原來圖片大小
label_img: 顯示圖片

silder 類

silder_zoom: 控制圖片大小

scrollArea 類

scrollArea: 圖片縮放區域

同 day13 的 scrollArea 說明，我們一樣需要刪除 scrollAreaWidgetContents 的部份

self.scrollArea = QtWidgets.QScrollArea(self.verticalLayoutWidget)
self.scrollArea.setWidgetResizable(True)
self.scrollArea.setObjectName("scrollArea")
# self.scrollAreaWidgetContents = QtWidgets.QWidget()
# self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 937, 527))
# self.scrollAreaWidgetContents.setObjectName("scrollAreaWidgetContents")
# self.label_img = QtWidgets.QLabel(self.scrollAreaWidgetContents)
self.label_img = QtWidgets.QLabel()
self.label_img.setGeometry(QtCore.QRect(0, 0, 941, 521))
self.label_img.setObjectName("label_img")
# self.scrollArea.setWidget(self.scrollAreaWidgetContents)
self.scrollArea.setWidget(self.label_img)

可能會有新增與調整的 scrollArea 片段

取得名稱後，去修改 controller.py

我們繼續修改我們 day13 的程式碼，但我們這次發現我們的程式碼越來越大了，
是時候該做點封裝了，我們決定將圖片有關的功能封裝至另外一個檔案 img_controller.py

另外封裝專門處理圖片的 img_controller.py

from PyQt5 import QtCore 
from PyQt5.QtGui import QImage, QPixmap
import cv2

class img_controller(object):
    def __init__(self, img_path, label_img, label_file_path, label_ratio, label_img_shape):
        self.img_path = img_path
        self.label_img = label_img
        self.label_file_path = label_file_path
        self.label_ratio= label_ratio
        self.label_img_shape = label_img_shape
        self.ratio_value = 50
        self.read_file_and_init()
        self.__update_img()

    def read_file_and_init(self):
        try:
            self.img = cv2.imread(self.img_path)
            self.origin_height, self.origin_width, self.origin_channel = self.img.shape            
        except:
            self.img = cv2.imread('sad.png')
            self.origin_height, self.origin_width, self.origin_channel = self.img.shape    

        bytesPerline = 3 * self.origin_width
        self.qimg = QImage(self.img, self.origin_width, self.origin_height, bytesPerline, QImage.Format_RGB888).rgbSwapped()
        self.origin_qpixmap = QPixmap.fromImage(self.qimg)
        self.ratio_value = 50        
        self.set_img_ratio()

    def set_img_ratio(self):
        self.ratio_rate = pow(10, (self.ratio_value - 50)/50)
        qpixmap_height = self.origin_height * self.ratio_rate
        self.qpixmap = self.origin_qpixmap.scaledToHeight(qpixmap_height)
        self.__update_img()
        self.__update_text_ratio()
        self.__update_text_img_shape()

    def set_path(self, img_path):
        self.img_path = img_path
        self.read_file_and_init()
        self.__update_img()

    def __update_img(self):       
        self.label_img.setPixmap(self.qpixmap)
        self.label_img.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop)

    def __update_text_file_path(self):
        self.label_file_path.setText(f"File path = {self.img_path}")

    def __update_text_ratio(self):
        self.label_ratio.setText(f"{int(100*self.ratio_rate)} %")

    def __update_text_img_shape(self):
        current_text = f"Current img shape = ({self.qpixmap.width()}, {self.qpixmap.height()})"
        origin_text = f"Origin img shape = ({self.origin_width}, {self.origin_height})"
        self.label_img_shape.setText(current_text+"\t"+origin_text)

    def set_zoom_in(self):
        self.ratio_value = max(0, self.ratio_value - 1)
        self.set_img_ratio()

    def set_zoom_out(self):
        self.ratio_value = min(100, self.ratio_value + 1)
        self.set_img_ratio()

    def set_slider_value(self, value):
        self.ratio_value = value
        self.set_img_ratio()

讀者看到會不會看到突然覺得這個程式難度整個飛起來…
但其實這些都是我們前幾天學的東西哦，只是我們加入了一點物件導向的寫法，
我們把每一個功能都分裝好，不要讓所有程式碼集中到 controller.py，
不然 controller.py 太過強大，萬事都能做到，我們還真的不知道，
如果今天要改一個功能，要去 controller.py 的哪找…
(就跟圖書館什麼都有，只是你能不能有效率的快速找到你要的東西一樣)

主要我們分裝成這些函數，並遵守我自己定義的規則：

- set_instance_name：使用者可以 call，去修改一些想要的變化，並在此實作複雜功能與算法 - __update_instance_name：private function，不希望使用者去 call，主要只負責單純的更新 info，而不實作任何複雜功能或算法

因此我們有：

init()：初始化
read_file_and_init()：實作讀取圖片檔案，並實作圖片初始化
set_img_ratio()：設定圖片比率，並實作變化
set_path()：更換檔案時，更新圖片路徑
set_zoom_in()：設定 zoom in 功能
set_zoom_out()：設定 zoom out 功能
set_slider_value()：設定縮放功能的那條 bar
__update_img()：更新圖片
__update_text_file_path()：更新圖片路徑的文字
__update_text_ratio()：更新圖片縮放比率的文字
__update_text_img_shape()：更新圖片大小的文字

controller.py 的部份

from PyQt5 import QtCore 
from PyQt5.QtWidgets import QMainWindow, QFileDialog

import time
import os

from UI import Ui_MainWindow
from img_controller import img_controller

class MainWindow_controller(QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.file_path = ''
        self.img_controller = img_controller(img_path=self.file_path,
                                             label_img=self.ui.label_img,
                                             label_file_path=self.ui.label_file_name,
                                             label_ratio=self.ui.label_ratio,
                                             label_img_shape=self.ui.label_img_shape)

        self.ui.btn_open_file.clicked.connect(self.open_file)         
        self.ui.btn_zoom_in.clicked.connect(self.img_controller.set_zoom_in)
        self.ui.btn_zoom_out.clicked.connect(self.img_controller.set_zoom_out)
        self.ui.slider_zoom.valueChanged.connect(self.getslidervalue)

    def open_file(self):
        filename, filetype = QFileDialog.getOpenFileName(self, "Open file", "./") # start path        
        self.init_new_picture(filename)

    def init_new_picture(self, filename):
        self.ui.slider_zoom.setProperty("value", 50)
        self.img_controller.set_path(filename)        

    def getslidervalue(self):        
        self.img_controller.set_slider_value(self.ui.slider_zoom.value()+1)

因為我們把大部分的功能都封裝在 img_controller.py 裡面了，
因此現在我們只需要單純的「from img_controller import img_controller」，
就能使用 img_controller 的「set 開頭相關的函數」搞定所有圖片相關的功能。

這邊我們在 setup_control() 實作的有

def setup_control(self):
    self.file_path = ''
    self.img_controller = img_controller(img_path=self.file_path,
                                         label_img=self.ui.label_img,
                                         label_file_path=self.ui.label_file_name,
                                         label_ratio=self.ui.label_ratio,
                                         label_img_shape=self.ui.label_img_shape)

    self.ui.btn_open_file.clicked.connect(self.open_file)         
    self.ui.btn_zoom_in.clicked.connect(self.img_controller.set_zoom_in)
    self.ui.btn_zoom_out.clicked.connect(self.img_controller.set_zoom_out)
    self.ui.slider_zoom.valueChanged.connect(self.getslidervalue)

分別有設定圖片路徑，初始化 img_controller，設定按鍵功能，
因為 button 因為吃的也是 function，可以直接 call img_controller 的函數來使用，
而開檔案與滑條的部份，我們一樣另外使用 open_file()、getslidervalue() 來實作。

特別注意圖片初始化問題，我們另外用 init_new_picture() 來處理

因為有時候開新的檔案，就會有一大堆東西要初始化，一個疏忽就會讓人非常頭痛，因此我們也另外使用 init_new_picture()，把所有應該要初始化的功能都集中在這邊。 (例如像 bar 需要回到中間 50 的地方)

另外把程式封裝，還有一個最大的好處就是更容易 debug，
我們因為功能切的很細，如果我們今天看畫面上「少了哪一個功能」，
我們只需要去把對應的功能呼叫回來，問題就解決了。
如果是沒有封裝好的情況，可能會要開始在「function 海當中尋找對應的那一行功能」，會大幅減少解 bug 的效率。

執行結果

照我們 day5 的程式架構，我們執行

python start.py

Reference

【PyQt5】Day 14 - 使用 QSlider 製作可拖曳的滑條

Fri, 27 Aug 2021 19:09:37 +0800

看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day14_slider

UI 設計部份 (UI.py)

今天我們要來實作一個簡單的功能，製作可以滑動的滑條
我們在 input Widgets 中找到 Horizontal Slider，將他移進畫面中，
另外加入一個 Qlabel 作為顯示用。

讀者們可以開始自行設計自己的介面囉，以上為我的示範。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day14.ui -> UI.py

pyuic5 -x day14.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

這樣我們的介面就大致出來囉！

controller 設計部份 (controller.py)

從 UI.py 中找出物件名稱

這次的功能很簡單，只有兩個物件

self.label：顯示用的
self.horizontalSlider：可以拉的滑條

取得名稱後，去修改 controller.py

我們繼續修改我們 day12 的程式碼

from PyQt5 import QtCore, QtWidgets
from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtWidgets import QFileDialog
from PyQt5.QtCore import QThread, pyqtSignal

import time

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.ui.horizontalSlider.valueChanged.connect(self.getslidervalue)

    def getslidervalue(self):        
        self.ui.label.setText(f"{self.ui.horizontalSlider.value()}")
        print(self.ui.horizontalSlider.value())

setup_control() 修改的部份

self.ui.horizontalSlider.valueChanged.connect(self.getslidervalue)

我們一樣將 self.horizontalSlider 連結 getslidervalue() 的功能，
等等我們將取得變化後的實作，製作在此處。

記得要多呼叫 valueChanged 這個方法，
我們才能夠透過偵測滑動條值的變化，直接同步反應數值的改變到畫面上。

getslidervalue() 的部份

我們可以使用 self.ui.horizontalSlider.value() 取得現在滑動條的數值，
而 self.getslidervalue() 已經定義好是有變化才會觸發的功能，
所以我們就藉由 self.ui.label.setText() 把對應的數值寫進 label 當中。

執行結果

照我們 day5 的程式架構，我們執行

python start.py

(因為我們有寫 print，所以在 terminal 中也會同步印出數據，讓我們能夠觀察變化。)

Reference

【PyQt5】Day 13 - 使用 QVBoxLayout, QscrollArea 製作出捲軸，以高解析度檢視圖片 (基於 QImage 使用 OpenCV) PyQt5 scrollable image

Fri, 27 Aug 2021 17:38:59 +0800

看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day13_scroll_area

以 Qlabel 在 PyQt 中顯示圖片

這篇是延續 Day 12 顯示圖片 zoom in, zoom out 功能的後續開發，
只有 zoom in, zoom out 有時還不足以應付我們處理細節，
因此我們需要一個捲軸，幫助我們能更自由的移動圖片。

UI 設計部份 (UI.py)

新增捲軸欄位

在此 Scroll Area (QscrollArea) 當中，再新增一個 Qlabel。作為圖片顯示使用。

注意順序，先新增 Vertical Layout，疊加上 Scroll Area，再疊加上 Qlabel。

注意這些物件彼此之間的階層關係，一樣我們可以先修改一些物件名稱，方便我們等等使用。

UI 優化：顯示目前圖片的解析度

我們在介面的右下角新增能夠顯示目前圖片的解析度的 Qlabel，
新增這個功能主要是能方便我們能夠確定現在圖片已經被我們縮放到什麼程度了。

讀者們可以開始自行設計自己的介面囉，以上為我的示範。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day13.ui -> UI.py

pyuic5 -x day13.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

這樣我們的介面就大致出來囉！

controller 設計部份 (controller.py)

修改 UI.py 的一些程式碼，達成在 QtDesigner 中做不到的事情

我們先觀察一下剛剛在 QtDesigner 中的物件階層關係，

其中紅色框框的地方有多出一個我們不要的東西，scrollAreaWidgetContents，
這個東西在 QtDesigner 中預設是會與 QscrollArea 一起被建立，
但實際上因為我們已經很清楚我們需要的是 Qlabel 顯示的圖片，
因此我們直接去改 UI.py 裡面的一些內容。

程式碼中修改與 scrollAreaWidgetContents 相關的內容

我們可以透過搜尋功能幫助我們快速找到相關的段落，這些都是要刪掉的

self.scrollAreaWidgetContents = QtWidgets.QWidget()
self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 667, 427))
self.scrollAreaWidgetContents.setObjectName("scrollAreaWidgetContents")
self.label = QtWidgets.QLabel(self.scrollAreaWidgetContents)
self.label.setGeometry(QtCore.QRect(0, 0, 1920, 1080))
self.label.setObjectName("label")
self.scrollArea.setWidget(self.scrollAreaWidgetContents)

我們觀察一下，

基本上前三行都是 scrollAreaWidgetContents 的定義，我們都用不到，直接刪。
self.label = QtWidgets.QLabel(self.scrollAreaWidgetContents)，
是藉由 self.scrollAreaWidgetContents 定義出 self.label 的屬性，
我們不想要這個屬性，但 self.label 是 QLabel 的屬性仍需要被宣告，
因此我們將他改為 self.label = QtWidgets.QLabel()，單純只宣告他是 QLabel()
後兩行關於 self.label 的定義不需要修改，符合原先的定義即可
最後一行的 self.scrollArea.setWidget(self.scrollAreaWidgetContents)，因為我們已經去除了 self.scrollAreaWidgetContents 這個元素，改以 Qlabel 顯示的圖片直接置入 self.scrollArea 當中，因此我們修改成 self.scrollArea.setWidget(self.label)。

修改結果

上面的部份修改完後，結果如下：

# self.scrollAreaWidgetContents = QtWidgets.QWidget()
# self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 800, 400))
# self.scrollAreaWidgetContents.setObjectName("scrollAreaWidgetContents")
self.label = QtWidgets.QLabel()
self.label.setGeometry(QtCore.QRect(0, 0, 0, 0))
self.label.setObjectName("label")
self.scrollArea.setWidget(self.label)

為何不使用 self.scrollAreaWidgetContents？

目前測試的結果是不會成功的顯示出捲軸，可能的原因是因為 Qlabel 才有存在超過視窗範圍的大小，而 self.scrollAreaWidgetContents 作為容器，並沒有辦法以超過的大小觸發 self.scrollArea 的捲軸事件，因此功能失效。
不過這部份原因目前只是我的猜測，總之捲軸的功能是無法正常運行的。

從 UI.py 中找出物件名稱

這次除了 day12 既有的功能之外，我們新增了一些物件，

self.btn_zoom_in、self.btn_zoom_out：同 day12 的 zoom in, zoom out 的按鈕
self.label：顯示圖片的 Qlabe
self.scrollArea：圖片縮放的範圍
self.img_shape：作為 UI 優化新增的 label，我們可以從這裡觀察目前圖片的解析度。

取得名稱後，去修改 controller.py

我們繼續修改我們 day12 的程式碼

from PyQt5 import QtCore, QtWidgets
from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtWidgets import QFileDialog
import cv2

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()


    def setup_control(self):
        # TODO        
        self.img_path = 'cat.jpg'
        self.ui.btn_zoom_in.clicked.connect(self.func_zoom_in) 
        self.ui.btn_zoom_out.clicked.connect(self.func_zoom_out)
        self.ui.scrollArea.setWidgetResizable(True)
        self.ui.label.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop)
        # self.ui.label.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter) # 將圖片置中
        self.display_img()

    def display_img(self):
        self.img = cv2.imread(self.img_path)
        height, width, channel = self.img.shape
        bytesPerline = 3 * width
        self.qimg = QImage(self.img, width, height, bytesPerline, QImage.Format_RGB888).rgbSwapped()
        self.qpixmap = QPixmap.fromImage(self.qimg)
        self.qpixmap_height = self.qpixmap.height()
        self.ui.label.setPixmap(QPixmap.fromImage(self.qimg))

    def func_zoom_in(self):
        self.qpixmap_height -= 100
        self.img_resize()

    def func_zoom_out(self):
        self.qpixmap_height += 100
        self.img_resize()

    def img_resize(self):        
        scaled_pixmap = self.qpixmap.scaledToHeight(self.qpixmap_height)
        print(f"current img shape = ({scaled_pixmap.width()}, {scaled_pixmap.height()})")
        self.ui.img_shape.setText(f"current img shape = ({scaled_pixmap.width()}, {scaled_pixmap.height()})")
        self.ui.label.setPixmap(scaled_pixmap)

setup_control() 修改的部份

與 day12 的不同是，我們主要新增了這兩行

self.ui.scrollArea.setWidgetResizable(True)
self.ui.label.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop)
# self.ui.label.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter) # 將圖片置中

self.ui.scrollArea.setWidgetResizable(True)：這行在 Qtdesigner 中也可以設定，預設是 False，我們將他改為 True，讓我們的 scrollArea 可以被捲動
self.ui.label.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop)：將我們的圖片往左上角對齊，往左上角對齊有兩個好處，一個是我們之後如果要進行圖像處理，這樣算座標會非常方便。

但是如果為了好看，想讓圖片置中，可以改為以下敘述：

self.ui.label.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter)

img_resize() 的部份 (原 day12 resize_image())

因為我們新增了 UI 優化的功能，稍微想一下就可以知道，
這段程式碼基本上會跟著我們圖片變化一起改變，
因此我們把「顯示圖片現在解析度」的功能新增在此處。

print(f"current img shape = ({scaled_pixmap.width()}, {scaled_pixmap.height()})")：取得現在圖片高度、寬度並顯示在 terminal 當中
self.ui.img_shape.setText(f"current img shape = ({scaled_pixmap.width()}, {scaled_pixmap.height()})")：取得現在圖片高度、寬度並顯示在 Qlabel 當中

執行結果

照我們 day5 的程式架構，我們執行

python start.py

Reference

Scrollable QLabel image in PyQt5

【PyQt5】Day 12 - 建立一個可以縮放圖片大小的顯示器 (基於 QImage 使用 OpenCV)

Fri, 27 Aug 2021 16:01:10 +0800

看完這篇文章你會得到的成果圖

zoom in

zoom out

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day12_img_resize

以 Qlabel 在 PyQt 中顯示圖片

這篇是延續 Day 11 顯示圖片的後續開發，
在 day11 我們只是單純的顯示圖片，
但有碰到了「圖片解析度太大，無法完全顯示」的問題，
今天我們就要加入「zoom in」、「zoom out」的功能，來改善這個問題。

UI 設計部份 (UI.py)

以 Qlabel 作為圖片顯示

我們與之前一樣新增一個 Qlabel，文字可以先不用管他，
這個 Qlabel 是我們等等要作為顯示圖片使用，
因此我們記得要去修改圖片大小，以免顯示的範圍太小。

另外我們新增兩個按鈕，作為等等縮放圖片使用。

注意上圖中的圖片大小，另外變數名稱也建議修改。

讀者們可以開始自行設計自己的介面囉，以上為我的示範。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day12.ui -> UI.py

pyuic5 -x day12.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

這樣我們的介面就大致出來囉！

controller 設計部份 (controller.py)

從 UI.py 中找出物件名稱

這次我們有三個物件

分別是 zoom in, zoom out 的按鈕：self.btn_zoom_in、self.btn_zoom_out
顯示圖片的 Qlabel：self.label

取得名稱後，去修改 controller.py

還記得我們在 day5 中的模板嗎？這邊我們直接複製過來使用並修改。

from PyQt5 import QtCore, QtWidgets
from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtWidgets import QFileDialog
import cv2

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()


    def setup_control(self):
        # TODO        
        self.img_path = 'cat.jpg'
        self.ui.btn_zoom_in.clicked.connect(self.func_zoom_in) 
        self.ui.btn_zoom_out.clicked.connect(self.func_zoom_out)
        self.display_img()

    def display_img(self):
        self.img = cv2.imread(self.img_path)
        height, width, channel = self.img.shape
        bytesPerline = 3 * width
        self.qimg = QImage(self.img, width, height, bytesPerline, QImage.Format_RGB888).rgbSwapped()
        self.qpixmap = QPixmap.fromImage(self.qimg)
        self.qpixmap_height = self.qpixmap.height()
        self.ui.label.setPixmap(QPixmap.fromImage(self.qimg))

    def func_zoom_in(self):
        self.qpixmap_height -= 100
        self.resize_image()

    def func_zoom_out(self):
        self.qpixmap_height += 100
        self.resize_image()

    def resize_image(self):
        scaled_pixmap = self.qpixmap.scaledToHeight(self.qpixmap_height)
        self.ui.label.setPixmap(scaled_pixmap)

setup_control() 修改的部份

「self.img_path = ‘cat.jpg’」：要顯示圖片的路徑
「self.ui.btn_zoom_in.clicked.connect(self.func_zoom_in)」：使按鍵連結 zoom in 的功能
「self.ui.btn_zoom_out.clicked.connect(self.func_zoom_out)」：使按鍵連結 zoom out 的功能
「self.display_img()」：等等會去 call 我們寫好的顯示圖片的 function

display_img() 的部份

相關的功能我們在 day11，
有介紹的很詳細了，這邊只說我們有修改的部份

會修改的原因主要是我們新增了 zoom in 的功能，
因此我們顯示圖片函式需要調整成可以隨時變動的 (不寫死、保有彈性，可重複使用)

我們把原先的寫的內容拆解，
特別其中的這四行：

self.qimg = QImage(self.img, width, height, bytesPerline, QImage.Format_RGB888).rgbSwapped()
self.qpixmap = QPixmap.fromImage(self.qimg)
self.qpixmap_height = self.qpixmap.height()
self.ui.label.setPixmap(QPixmap.fromImage(self.qimg))

第一行一樣我們透過 OpenCV 的方式，轉換成我們要的 Qimage
第二行我們改成獨立從 Qimage 提取出 QPixmap，
這邊我們可以理解為

QImage 是實際上圖片的內容
QPixmap 是我們最終用來顯示再畫面上的內容 (可能為了顯示有縮放調整)，但不會更改到原圖

我們在第三行取得 QPixmap 的高度，作為我們等等縮放使用
最後第一行一樣就是透過 label 顯示出來。

func_zoom_in()、func_zoom_out() 的部份

這邊我們是去調整「我們想要呈現的」QPixmap 高度，
在接下來的 resize_image() ，讓他依據這個高度自動比例縮放。

resize_image() 的部份

scaled_pixmap = self.qpixmap.scaledToHeight(self.qpixmap_height)
self.ui.label.setPixmap(scaled_pixmap)

這邊的第一行就是讓圖片 (Qpixmap) 自己去適應我們要的圖片高度，做出對應的圖片縮放。
而第二行就是把縮放後的圖片 (Qpixmap) 塞進去我們的 label 當中。

注意：我們從頭到尾都只有更改到 Qpixmap 而沒有改動到 Qimg，
這也表示我們的原圖是一直有被保存下來的。
我們所做的都只是「顯示上的更動」。

執行結果

照我們 day5 的程式架構，我們執行

python start.py

zoom in 的功能

zoom out 的功能

Reference

【PyQt5】Day 11 - 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV)

Wed, 25 Aug 2021 23:47:05 +0800

看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day11_display_image

以 Qlabel 在 PyQt 中顯示圖片

我們在先前的文章中已經有提過，我們可以使用 Qlabel 作為顯示文字，
同樣的，我們也可以使用 Qlabel 來顯示圖片。

今天我們就要來實作這個功能。

UI 設計部份 (UI.py)

先修改主程式 window 大小

我們先點擊 QMainWindow 的部份，
展開 geometry，這裡修改 Width, Height 可以直接改變整個視窗的大小。

建議修改要大一點，因為要顯示的圖片可能也會很大。

新增 Qlabel 作為圖片顯示

我們使用與之前一樣的方式新增一個 Qlabel，文字可以先不用管他，
但我們需要先改變 Qlabel 所佔的範圍大小，
展開 geometry，這裡修改 Width, Height 可以直接改變 Qlabel 顯示視窗的大小。

而上面的 X, Y 可以個人需求修改，X, Y 表示的是「相對 MainWindow」此 Label 開始顯示的位置。

(從左上角開始算，往右X、往下Y)

這邊有兩件事情要注意：

- 修改後的 Qlabel geometry 必須小於主程式的 QMainWindow (畫面比視窗大不合理吧XD) - 如果 Qlabel geometry 設定的解析度不夠大，有可能會只有只顯示部份圖片的情形 (從左上開始自動剪裁)

讀者們可以開始自行設計自己的介面囉，以上為我的示範。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day11.ui -> UI.py

pyuic5 -x day11.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

這邊可以看到很單純的只有一段被初始化的文字，
接下來我們要開始去改變裡面的內容。

controller 設計部份 (controller.py)

從 UI.py 中找出物件名稱

這次我們只有一個物件 self.label

取得名稱後，去修改 controller.py

還記得我們在 day5 中的模板嗎？這邊我們直接複製過來使用並修改。

from PyQt5 import QtWidgets, QtCore
from PyQt5.QtGui import QImage, QPixmap
import cv2

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        self.img_path = 'cat_small.jpg'
        self.display_img()

    def display_img(self):
        self.img = cv2.imread(self.img_path)
        height, width, channel = self.img.shape
        bytesPerline = 3 * width
        self.qimg = QImage(self.img, width, height, bytesPerline, QImage.Format_RGB888).rgbSwapped()
        self.ui.label.setPixmap(QPixmap.fromImage(self.qimg))

import 新增的部份

「import cv2」：我們為了要顯示圖片，會使用到 OpenCV 的 function
「from PyQt5.QtGui import QImage, QPixmap」：為了要顯示圖片，會使用到 PyQt5.QtGui 中的 QImage, QPixmap 這兩個物件的定義

setup_control() 修改的部份

「self.img_path = ‘cat.jpg’」：要顯示圖片的路徑
「self.display_img()」：等等會去 call 我們寫好的顯示圖片的 function

display_img() 的部份

「self.img = cv2.imread(self.img_path)」：OpenCV 經典的讀圖 function，之前有介紹過，應該不用我們再多說
「height, width, channel = self.img.shape」：讀取圖片的 shape 與 channel，等等設定參數會用到
「bytesPerline = 3 * width」：設定「每一行」的影像佔用位置數量，目前因為有 3 個 channel，因此是 3 * width (如果有透明度可能就是 4 個 channel)
「self.qimg = QImage(self.img, width, height, bytesPerline, QImage.Format_RGB888).rgbSwapped()」：將轉成 OpenCV (numpy) 的格式圖片轉換成 QImage 的格式，並輸入圖片對應的長寬，每一行佔用的 bytes 數，而 QImage.Format_RGB888 代表的是 RGB 3 個 channel，「.rgbSwapped()」表示將R, G, B 3 個 channel 轉換成 B, G, R (因為 OpenCV 是以 BGR 的方式儲存圖片，需要先進行轉換)
「self.ui.label.setPixmap(QPixmap.fromImage(self.qimg))」：將圖片在 label 中顯示

感謝網友 JSON 幫忙糾正錯誤！

執行結果

照我們 day5 的程式架構，我們執行

python start.py

正常顯示圖片的情形

碰到解析度太大，導致我們設定的 Qlabel 無法完全顯示的情形

就會像下圖這樣，因為圖片太大了，800*600 只能顯示部份圖片

Reference

【PyQt5】Day 10 - 以 QFileDialog 讀取系統的檔案、資料夾

Wed, 25 Aug 2021 17:02:58 +0800

看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day10_open_file

以 QFileDialog 讀取系統的檔案、資料夾

我們可以使用 QFileDialog 來開啟每個作業系統的檔案功能，
這部分我們會在 controller.py 當中實作。

UI 設計部份 (UI.py)

這次我們設計兩個按鈕，與對應的顯示檔案路徑的地方，
這次我們使用 QTextEdit 來幫助我們顯示路徑

(相對 Qlabel 的好處是，如果文字太長的話，會自動換行)

一樣記得改一下變數，不然等等容易搞不清楚誰是誰。

而今天的 UI 設計部份就比較簡單，
因為等等的檔案處理我們會花比較多一點時間來實作。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day10.ui -> UI.py

pyuic5 -x day10.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

接下來我們要開始去改變裡面的內容。

controller 設計部份 (controller.py)

設定開啟檔案/資料夾的功能

接下來我們想藉由按鍵來觸發開啟檔案/資料夾的功能，
我們呼叫 QFileDialog 來協助完成這個功能，
在這個功能的底層，已經有針對不同作業系統實作對應開啟檔案的功能。

請不要只看表面誤會以為 Windows, Mac, Linux 開啟檔案都是同一種實作方式
實際上這部份依據不同作業系統的實作是在 Qt 底層已經做掉了，我們才能如此方便。

先從 UI.py 取得變數名稱 (也是我們剛剛在 Qt designer 中命名的部份)

這次我們的變數有

兩個按鈕

self.file_button
self.folder_button

兩個顯示路徑用方框 (QTextEdit)

self.show_file_path
self.show_folder_path

取得名稱後，去修改 controller.py

還記得我們在 day5 中的模板嗎？這邊我們直接複製過來使用並修改。

from PyQt5 import QtCore, QtWidgets
from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtWidgets import QFileDialog
import cv2

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.ui.file_button.clicked.connect(self.open_file) 
        self.ui.folder_button.clicked.connect(self.open_folder)

    def open_file(self):
        filename, filetype = QFileDialog.getOpenFileName(self,
                  "Open file",
                  "./")                 # start path
        print(filename, filetype)
        self.ui.show_file_path.setText(filename)

    def open_folder(self):
        folder_path = QFileDialog.getExistingDirectory(self,
                  "Open folder",
                  "./")                 # start path
        print(folder_path)
        self.ui.show_folder_path.setText(folder_path)

setup_control() 修改的部份

「self.ui.file_button.clicked.connect(self.open_file) 」、「self.ui.folder_button.clicked.connect(self.open_folder)」：我們分別設定對應要使用的函數名稱，等等會去 call 我們寫好開啟檔案/資料夾的 function

open_file() 的部份 (開啟檔案)

filename, filetype = QFileDialog.getOpenFileName(self, “Open file”, “./”)

我們可以直接使用 QFileDialog.getOpenFileName 這個已經設定好的函式，
直接幫助我們完成開啟檔案的功能，
而不同作業系統的問題，在這個功能的底層已經幫我們處理掉了，我們可以直接使用。
“Open file” 是開始視窗後上方標題列的名稱，
“./” 代表從哪裡開啟這個目錄，「"./"」就是當前目錄

這裡會回傳兩個參數(tuple) filename, filetype，我們要使用的是第一個路徑，
而第二個是檔案的副檔名 (與我們有沒有過濾檔案副檔名有關，因為不是我主要使用的功能，這邊先不細部討論)

self.ui.show_file_path.setText(filename)

取得開啟後的「檔案路徑」，並顯示在畫面上

open_folder() 的部份 (開啟檔案)

folder_path = QFileDialog.getExistingDirectory(self, “Open folder”, “./”)

我們可以直接使用 QFileDialog.getExistingDirectory 這個已經設定好的函式完成開啟資料夾的功能，
一樣不同作業系統的問題，在這個功能的底層已經幫我們處理掉了，我們可以直接使用。
“Open folder” 是開始視窗後上方標題列的名稱，
“./” 代表從哪裡開啟這個目錄，「"./"」就是當前目錄

self.ui.show_folder_path.setText(folder_path)

取得開啟後的「資料夾路徑」，並顯示在畫面上

執行結果

照我們 day5 的程式架構，我們執行

python start.py

開啟檔案的視窗

將結果呈現在畫面上

Reference

【PyQt5】Day 9 - 以 QLineEdit, QTextEdit, QPlainTextEdit 作為文字的輸入

Wed, 25 Aug 2021 15:23:03 +0800

看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day09_input_text_2

介紹 QLineEdit, QTextEdit, QPlainTextEdit

我們在 day8 中已經有介紹過 QLineEdit 的使用方法，
與 QLineEdit 類似的還有 QTextEdit, QPlainTextEdit，
今日我們一併介紹。

QLineEdit：特色是單行的文字輸入，通常會使用於帳號、密碼或 email 等等，大概只需要一行文字輸入的地方。
QTextEdit：特色是多行的文字輸入。
QPlainTextEdit：特色也是多行的文字輸入，基本上與 QTextEdit 功能相同。

我們一般使用上會使用 QTextEdit 作為文字顯示
使用 QPlainTextEdit 來進行文字 input 處理

UI 設計部份 (UI.py)

Qt designer 部份

一樣先打開我們的 Qt designer，
這次我們建立三行input、按鈕、與顯示文字，
分別對應各自的結果。

我們在 Input widgets 中找到 LineEdit, TextEdit, PlainTextEdit，
拖曳至視窗自己喜歡的地方，

我們今天想實作一個小功能，是昨天 day 8 的延伸練習，
讓我們「輸入」的文字，可以藉由「點擊按鈕」，「顯示」在畫面的某處。

因此我們今天總共需要3*3個物件

QLineEdit, QTextEdit, QPlainTextEdit：作為讓我們輸入文字的地方
QPushButton*3：作為按鈕，可以點擊執行任務
Qlabel*3：作為顯示結果用

讀者們可以開始自行設計自己的介面囉，以下為我的示範：

這邊我極度建議要修改物件的名稱 (上圖右上角紅框處) ，等等我們撰寫 controller.py 功能的時候，才不會要在那邊認說 label_1、label_2、label_3 誰是誰。

另外我們這邊直接在介面上修改了預設的文字，(點兩下即可直接編輯)，
其實這與前幾天我們在 controller.py 的作法也是相同的，只是這次我們把 setText 的功能搬至 UI.py 中，讓 UI.py 直接完成介面 initialize 的工作。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day9.ui -> UI.py

pyuic5 -x day9.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

我們稍微閱讀一下轉換出來的 UI.py 的程式碼，
我們就會發現與前幾天不同的地方，
也就是我們在 UI.py 完成的初始化部份。

物件名稱更改部份

稍微注意一下就會發現，
我們剛剛在 Qtdesigner 修改的內容，直接反應在 class 的成員名稱上，
另外 setObjectName 也同步被改動了，總共有這兩個變化。

初始化內容部份

這部份我們在 UI.py 中發現了多了 retranslateUi() 這個 function，
裡面有一連串的名稱變換，完成我們剛剛設定的文字初始化。

controller 設計部份 (controller.py)

接下來，我們必須先研究一下我們剛剛的程式，
把我們剛剛程式中的「物件名稱」找出來。

從 UI.py 中找出物件名稱

畢竟我們剛剛已經先改過了變數名稱，這邊就方便了！

我們這邊先把變數名稱列出來，方便我們之後設定。

QLineEdit 部份

輸入：self.box_line
按鈕：self.button_line
顯示：self.label_line (上面的圖片我是我修改前的結果，修改後應該會是這個名稱)

QTextEdit 部份

輸入：self.box_text
按鈕：self.button_text
顯示：self.label_text

QPlainTextEdit 部份

輸入：self.box_plain
按鈕：self.button_plain
顯示：self.label_plain

(務必記得名稱，不然等等不知道要改誰XD)

取得名稱後，去修改 controller.py

還記得我們在 day5 中的模板嗎？這邊我們直接複製過來使用並修改。

from PyQt5 import QtWidgets, QtGui, QtCore

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        self.ui.button_line.clicked.connect(self.buttonClicked_line)
        self.ui.button_text.clicked.connect(self.buttonClicked_text)
        self.ui.button_plain.clicked.connect(self.buttonClicked_plain)

    def buttonClicked_line(self):
        msg = self.ui.box_line.text()
        self.ui.label_line.setText(msg)

    def buttonClicked_text(self):
        msg = self.ui.box_text.toPlainText()
        self.ui.label_text.setText(msg)

    def buttonClicked_plain(self):
        msg = self.ui.box_plain.toPlainText()
        self.ui.label_plain.setText(msg)

我們修改了 setup_control()，使按鈕能夠連接對應的 function，
並新增了buttonClicked_line(), buttonClicked_text(), buttonClicked_plain() 的部份，完成我們按鈕的功能。

【注意】 QLineEdit, QTextEdit, QPlainTextEdit 使用函數的不同

如果想要讀取 QLineEdit 內的文字，
我們使用的是「.text()」的方式呼叫。

而如果是想要讀取 QTextEdit, QPlainTextEdit 內的文字，
我們使用的是「.toPlainText()」的方式呼叫。

所以如果出現「AttributeError: ‘QTextEdit’ object has no attribute ’text’」
就是上述的這個問題囉！

於是我們就完成我們今天的功能囉！

執行結果

照我們 day5 的程式架構，我們執行

python start.py

Reference

QT中LineEdit TextEdit PlainTextEdit 这三个控件有什么区别，分别用在什么情况下呢

【PyQt5】Day 8 - 我們的第二個 input 手段 - QLineEdit

Tue, 24 Aug 2021 18:55:17 +0800

看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day08_input_text

UI 設計部份 (UI.py)

Qt designer 部份

一樣先打開我們的 Qt designer，
這篇我們要介紹的是 QLineEdit，
作為我們第二個「input」用的功能。

我們在 Input widgets 中找到 Line Edit，
拖曳至視窗自己喜歡的地方，

另外我們今天想實作一個小功能，結合昨天與前天的 day 6、day 7，
讓我們「輸入」的文字，可以藉由「點擊按鈕」，「顯示」在畫面的某處。

因此我們今天總共需要3個物件

QLineEdit：作為讓我們輸入文字的地方
QPushButtonl：作為按鈕，可以點擊執行任務
Qlabel：作為顯示結果用

讀者們可以開始自行設計自己的介面囉，以下為我的示範：

一樣，我們可以修改物件的名稱 (上圖紅框處) ，使我們在未來更容易識別是哪一個功能。這邊作為示範就不改動了。
文字大小那些也都可以自己改。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day8.ui -> UI.py

pyuic5 -x day8.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

看起來是不是很可愛(?)呢，有了介面，
接下來我們要開始實作功能面的事情。

controller 設計部份 (controller.py)

接下來，我們必須先研究一下我們剛剛的程式，
把我們剛剛程式中的「物件名稱」找出來。

名稱也可以自己在設計 Qt desginer 時設定，可以看上一個 part 我有框起來的部份。

從 UI.py 中找出物件名稱

如果讀者使用的是預設的名稱，應該會在剛轉換完成的 UI.py 中找到以下這段，

這次我們有了3個東西囉！等等我們要讓他們能互動起來
(為了示範，名稱我都是用預設的沒有改。)

self.pushButton：按鈕
self.lineEdit：輸入文字
self.label：輸出畫面

(務必記得名稱，不然等等不知道要改誰XD)

取得名稱後，去修改 controller.py

還記得我們在 day5 中的模板嗎？這邊我們直接複製過來使用並修改。

from PyQt5 import QtWidgets, QtGui, QtCore

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        # qpushbutton doc: https://doc.qt.io/qt-5/qpushbutton.html
        self.ui.pushButton.setText('Print message!')
        self.ui.pushButton.clicked.connect(self.buttonClicked)

    def buttonClicked(self):
        msg = self.ui.lineEdit.text()
        self.ui.label.setText(msg)

我們在新增或修改了 setup_control(), buttonClicked() 這兩個部份

在 setup_control() 中

self.ui.pushButton.setText(‘Print message!’)：設定按鍵顯示訊息
[重要] self.ui.pushButton.clicked.connect(self.buttonClicked)：當按鍵被觸發時，要做 self.buttonClicked() 這個 function 裡面的事情。

在 buttonClicked() 中

這裡我們要定義的是按鈕被按下時，會執行的事件內容，
我們首先要讀取使用者輸入的內容，

msg = self.ui.lineEdit.text()：將 lineEdit 的內容儲存至 msg 中
self.ui.label.setText(msg)：透過 label 顯示 msg 的內容

這樣就完成了我們今日想實現的功能！

我們現在可以透過輸入一些內容，並點擊按鍵，
就可以讓結果顯示在畫面上！

執行結果

照我們 day5 的程式架構，我們執行

python start.py

每當我們按一次按鍵，框框內顯示的文字就會同步顯示在下方。

【PyQt5】Day 7 - 我們的第一個 input 手段 - QPushButton

Tue, 24 Aug 2021 17:11:37 +0800

看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day07_input_button

UI 設計部份 (UI.py)

Qt designer 部份

一樣先打開我們的 Qt designer，
這篇我們要介紹的是 QPushButton，
作為我們第一個「input」用的功能。

這邊講的「input」，是廣義的「input」，也就是任何輸入進我們程式的訊號，
反之，「output」，就是指任何從我們程式輸出的訊號

我們在 Buttons 中找到 Push Button，
拖曳至視窗自己喜歡的地方，就完成今天的設計囉！

一樣，我們可以修改物件的名稱，使我們在未來更容易是哪一個功能。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day7.ui -> UI.py

pyuic5 -x day7.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

看起來符合我們的想像就沒問題了。

controller 設計部份 (controller.py)

接下來，我們必須先研究一下我們剛剛的程式，
把我們剛剛程式中的「物件名稱」找出來。

名稱也可以自己在設計 Qt desginer 時設定，可以看上一個 part 我有框起來的部份。

從 UI.py 中找出物件名稱

如果讀者使用的是預設的名稱，應該會在剛轉換完成的 UI.py 中找到以下這段，

我們發現我們剛剛的 Push Button 名稱為 pushButton，
(注意大小寫，這可能導致程式錯誤。)
當然，這絕對不是一個好名稱，不過這邊作為示範，我們就不多做改動。

取得名稱後，去修改 controller.py

還記得我們在 day5 中的模板嗎？這邊我們直接複製過來使用並修改。

from PyQt5 import QtWidgets, QtGui, QtCore

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        # qpushbutton doc: https://doc.qt.io/qt-5/qpushbutton.html
        self.ui.pushButton.setText('Print message!')
        self.clicked_counter = 0
        self.ui.pushButton.clicked.connect(self.buttonClicked)

    def buttonClicked(self):
        self.clicked_counter += 1
        print(f"You clicked {self.clicked_counter} times.")

我們在新增或修改了 setup_control(), buttonClicked() 這兩個部份

在 setup_control() 中

self.ui.pushButton.setText(‘Print message!’)：將按鈕修改為 “Print message!”
self.clicked_counter = 0，設定一個儲存我們現在按了按鈕幾次的變數
[重要] self.ui.pushButton.clicked.connect(self.buttonClicked)，連結 self.buttonClicked() 這個 function，使當按鈕被按下時，能夠執行 function 裡面的功能。

在 buttonClicked() 中

這裡我們要定義的是按鈕被按下時，會執行的事件內容，
這裡作為示範，我們寫的很簡單，
用 self.clicked_counter += 1，更新點擊的次數，
並用 print(f"You clicked {self.clicked_counter} times.")，
在 terminal 上印出現在點擊的次數。

執行結果

照我們 day5 的程式架構，我們執行

python start.py

結果會是，當我們每按一次按鈕，
terminal 就會多顯示一行，並告訴我們現在點擊的次數。

【PyQt5】Day 6 - 我們的第一個 output 手段 - Qlabel

Tue, 24 Aug 2021 10:48:37 +0800

看完這篇文章你會得到的成果圖

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://wongwongnotes.com/posts/python/gui/pyqt/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day06_output_text

UI 設計部份 (UI.py)

Qt designer 部份

一樣先打開我們的 Qt designer，
這篇我們要介紹的是 Qlabel，
作為我們第一個「output」用的功能。

我們在 Display Widgets 中找到 Label，
拖曳至視窗自己喜歡的地方，就完成今天的設計囉！

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day6.ui -> UI.py

pyuic5 -x day6.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

看起來就是符合我們的想像了，這樣就沒問題了。

controller 設計部份 (controller.py)

接下來，我們必須先研究一下我們剛剛的程式，
把我們剛剛程式中的「物件名稱」找出來。

名稱也可以自己在設計 Qt desginer 時設定，這邊作為快速示範就先不細講這一個部份。

從 UI.py 中找出物件名稱

如果讀者使用的是預設的名稱，應該會在剛轉換完成的 UI.py 中找到以下這段，

我們發現我們剛剛的 label 名稱為 label，
當然，程式寫久的都知道這絕對不是一個好名稱。
我們晚點再來討論這個問題。

取得名稱後，去修改 controller.py

還記得我們在 day5 中的模板嗎？這邊我們直接複製過來使用並修改。

from PyQt5 import QtWidgets, QtGui, QtCore

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        self.ui.label.setText('Happy World!')

我們在 setup_control() 中新增了這行，self.ui.label.setText(‘Happy World!’)，

意思是：

「self.ui」(我們的 ui 介面)，
「.label」裡面就是我們剛剛說的 label 這個物件名稱，
「.setText」設定文字的方式，相關用法需要去查文件。
然後設定文字為我們要的 ‘Happy World!’。

就是這行的意思囉！

有沒有發現，「.label」這個名稱，很容易讓人誤會以為是內建的某個功能？
實際上他是我們自己新增的物件…
真的等等該換個名字給他，以免寫越多越混搞不清楚誰是誰。

執行結果

如果照我們 day5 的程式架構，現在我們可以執行

python start.py

就能看到結果了！

哎呀！我們發現我們顯示的文字被切掉了一部份，
看來我們還需要回去調整一下視窗大小。

修改顯示視窗、文字大小、物件名稱…

這邊我們再回來看我們的 Qt designer，
我們開始來修改剛剛我們想改的「物件名稱、視窗大小…」之類的東東。

我們可以直接拖曳視窗，改變視窗的大小 (右邊可以看現在視窗的解析度)

右上角，我們可以看到現在所有視窗內的物件，我們找到 class QLabel 的這個物件，並且修改 Object 中顯示的名稱

養成好的命名習慣，等到程式物件越來越多的時候，
才會因為每個物件名稱都叫作 Label 搞不清楚誰是誰

而下方我們同樣也可以修改文字的字體，與字體對應的大小 (字體的部份需要注意可能會有跨作業系統不支援字體的問題，例如 windows 與 mac 不共通的字體)

稍微改了一下上述內容，以下是我的修改結果，讀者可以再自己嘗試。

一樣，轉換成 UI.py，並修改 controller.py 對應的物件名稱，完成最終結果

controller.py

from PyQt5 import QtWidgets, QtGui, QtCore

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        self.ui.show_output.setText('Happy World!')

注意：我們同步修改了位於 setup_control() 中的物件名稱，將 label 改為 show_output，使我們的物件名稱更清楚。

最終結果

【PyQt5】Day 5 - 開始來設計我們的 controller.py，改以「程式角度」來說明如何建立 PyQt 的系統

Mon, 09 Aug 2021 00:01:41 +0800

看完這篇文章你會得到的成果圖

今天我們要延伸昨天的概念，開始來講解我們如何設計 controller.py

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day05_pyqt_template

先複習一下 PyQt 的程式邏輯

細節我們在昨天已經有提過了，這個是我們設計「視覺化應用的精神」

接下來我們會以「程式的角度」，來說明怎麼樣寫這樣的程式

以「程式角度」，來說明如何建立 PyQt 的系統

我們設計完 UI.py 後，再來我們要設計 controller.py，
我們可以先看下圖，先有個架構理解我們在做什麼：

用「controller.py」去 import「UI.py」來使用，
用「start.py」去 import「controller.py」來使用，

之前在網路上看到的程式碼，很多都會將程式進入點也寫在這裡
並將 controller.py 命名為 start.py 或 strat_UI.py 之類的
這邊讀者只要有一隻程式會有包含「UI.py」、「controller.py」的概念，
相信就能對網路上大部分的範例程式碼能夠進行初步的解讀，
(之前我就是卡在 UI 與 control 的概念整個混在同一支程式碼中，所以學得非常混亂XD)

先來看 controller.py 範例，將程式進入點 (start.py) 整在一起

這個範例是我看來不少文章後，做給自己的特製版

第二行的「from UI import Ui_MainWindow」：UI 的部分，請改成你儲存的 UI.py 檔名

Ui_MainWindow，是 Qt dedigner 預設產生出 .py 檔就會取名的 class 封裝後的名稱，建議沒必要不需要特別去更改

from PyQt5 import QtWidgets, QtGui, QtCore
from UI import Ui_MainWindow

class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        # in python3, super(Class, self).xxx = super().xxx
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        self.ui.textEdit.setText('Happy World!')


if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

說明

上面的範例程式，有調整過適合套用在往後要設計的各種 UI 程式裡面，
我們接下來只需要改動的地方都在「setup_control()」之中，

例如像上面範例中的

def setup_control(self):
    # TODO
    self.ui.textEdit.setText('Happy World!')

我們將我們設計的「UI程式」，封裝後儲存在「self.ui」中，
而 self.ui 裡面的 textEdit，就是我們這次修改內容的目標。

我們使用 .setText 修改成 ‘Happy World!’，就能得到以下的結果。

我們使用 Day2 製作出來的「UI.py」

程式碼是一樣的，為了不讓讀者還需要特別回去翻，
我們這邊在附上範例一次，請將他存成「UI.py」，
或自行去修改上面提到的「from UI import Ui_MainWindow」的「UI」檔名。

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.textEdit = QtWidgets.QTextEdit(self.centralwidget)
        self.textEdit.setGeometry(QtCore.QRect(270, 290, 104, 71))
        self.textEdit.setObjectName("textEdit")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.textEdit.setHtml(_translate("MainWindow", "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
"
"<html><head><meta name="qrichtext" content="1" /><style type="text/css">
"
"p, li { white-space: pre-wrap; }
"
"</style></head><body style=" font-family:\'PMingLiU\'; font-size:9pt; font-weight:400; font-style:normal;">
"
"<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Hello World!

</body></html>"))

執行

將「controller.py」、「UI.py」準備好後，
執行我們的程式，目前這個「controller.py」也包含著我們程式的進入點。

python controller.py

結果

我們可以注意到，中間的內文從「Hello World!」變成了「Happy World!」

最後，為了讓我們的邏輯在更漂亮一些，我們讓 start 與 controller 分離。

為了符合當初我們想的架構，如下圖，
我們讓 controller.py 獨立出來，專心做控制的動作就好，
這樣也更符合 Design Pattern 的「單一職責原則 (SRP)」

真正的實現我們上述所說的：

用「controller.py」去 import「UI.py」來使用
用「start.py」去 import「controller.py」來使用

另外，在 python3 當中，super(MainWindow_controller, self).**init**() 的寫法，可以簡寫為 super().**init**()

因此，我們將 controller.py 簡化為

from PyQt5 import QtWidgets, QtGui, QtCore

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        self.ui.textEdit.setText('Happy World!')

並新增一個 start.py，作為之後程式的入口

from PyQt5 import QtWidgets

from controller import MainWindow_controller

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    window = MainWindow_controller()
    window.show()
    sys.exit(app.exec_())

小結

今天我們完成了一支 Qt 程式大致的模板，
之後我們都可以照著這個模板進行後續的開發!

【PyQt5】Day 4 - 重要的 Qt 程式邏輯觀念，務必先有此觀念後面才會懂自己在幹嘛

Sun, 08 Aug 2021 19:16:21 +0800

看完這篇文章你會得到的成果圖

(沒有，今天不寫程式，但要講重要觀念XD)

PyQt 的程式邏輯

我特別作了一張圖，方便初學者理解

之前我學的時候都沒有找到類似的圖，我看了一堆網路文章還是摸不著頭緒…
只能說真的是前人種樹後人乘涼XDD

先了解介面 (UI, frontend)，跟控制 (backend) 的不同

類似的觀念其實我們在 Day2 已經有提到過，
不過這次我們要來真正的講我們到底在做什麼。

如果有接觸一點網頁開發，相信對於「前端、後端」這兩個詞都不陌生，

不過這裡我簡單說明一下，前端就是呈現的介面，他就是一個視覺上呈現的東西，
還需要後端去告訴他運作的邏輯，才會是一個完整的網頁。

例如：我知道畫面的某個地方有按鈕(前端)，但按下按鈕會發生什麼事情，就是交由(後端)去處理。

所以我們可以畫出下面的這張圖，
通常來說，一個功能設計分得夠乾淨的程式，
再依照我的取名習慣，我會將他分為 UI.py 與 controller.py 兩個部分。

UI.py

代表的是介面，也可以寫成單獨執行，我們就只會看到使用者介面，而沒辦法進行任何的邏輯判斷操作 (Day 2 提到過的，關於要不要下「-x」這個 flag 影響到的事情。)

controller.py

代表的是邏輯，通常單獨執行也不知道你要控制的是啥，所以一定會搭配 UI 一起執行。

網路上有很多程式會把這兩個混在一起，組成一支很大的「.py」，
我們都可以用這個概念去理解，
而混在一起變成一隻並不代表不好，這只是一個「架構設計」的問題，
也許人家的程式很小，特別寫成兩份「.py」反而還嫌囉嗦呢!

Qt desinger 的功能

Qt desinger 的功能就是幫助我們設計出好看的 UI.py，
畢竟牽扯到「視覺設計」，如果這都還要靠寫 code 直接刻出來… (太硬了啦!)

而且 Qt desinger 也很適合設計師使用，由設計師設計出精美的畫面後，
再經由指令自動轉換成 UI.py，最後我們就可能有相對美麗的介面囉!

轉換的程式碼，我也一併整理過來

我們儲存的 Qt desinger 檔案，副檔名是 .ui
經由下面的轉換，可以自動轉換成 .py 的程式碼

pyuic5 -x test.ui -o UI.py

(通常已經有設計好 controller.py 的程式，我們不會特別下「-x」，不讓他可以單獨執行)

-x: 輸出為可單獨執行的檔案 (有 main 的部分)，若無會只有單純封裝好的 UI class
-o: 輸出 .py 檔案

概念圖示如下：

撰寫更巨大的系統程式

基於 UI.py, controller.py 兩個概念，我們可以就開始無限的擴大我們的程式了!
像我們可以在 UI.py 新增按鍵或文字，並同時在 controller.py 撰寫如何控制這些東西，
甚至是「按鍵與文字」如何互動，都可以撰寫在 controller.py 裡面，
讓我們可以經由後端的邏輯，完全控制介面的變化。

因此，有了這個觀念，相信接下來各路程式好手們，
我們就可以逐漸開發屬於自己的超大型視窗程式了。

圖示：

小結

今天我們知道非常重要的程式開發邏輯，
往後我們會不斷地提到，現在是在設計「UI」，還是在設計「邏輯」，
兩者雖然在開發時會併行，但絕不能混淆，
混淆的話之後學習一定會變得一團亂，就跟我之前初學 Qt 一樣…

網路太多文章都會把「設計UI」、「設計邏輯」混在一起講，
這並不是說他們有錯，因為本來「設計一個新的 UI」，很自然接下來就會「設計對應此 UI 的邏輯」，

但以我們要「學習」的角度來看這個「結果」，
「設計UI」、「設計邏輯」混在一起看就是一團亂，
所以我之前才會學得超級痛苦 Q__Q，

這個概念往後務必在心中養成拆乾淨的習慣，才會清楚現在的自己是在幹嘛。

【PyQt5】Day 3 - 用 pyinstaller 將 python 程式打包，把每天的成果分享給你的親朋好友

Sun, 08 Aug 2021 18:33:00 +0800

看完這篇文章你會得到的成果圖

因為 PyQt5 要學的東西太多，
我們先來學打包 python 好了，~~(逃避要學東西太多的現實)~~
這樣就可以把每天的學習成果分享給親朋好友囉!

打包的重點就在於，我們只要打包後，這個程式會變成單一執行檔，
而且可以橫跨「windows, mac, ubuntu」的「同作業系統電腦」使用，
還不用特別安裝「python」也能執行哦!
(想想你之前下載遊戲的時候，有特別還要去安裝什麼程式語言嗎XD)

更新：這邊我一開始有點誤會了，打包後的程式是在「同OS上能夠直接執行，不能夠跨作業系統」。也就是說如果是同樣 windows 的電腦，我包好之後可以直接給另外一台 windows 的電腦使用， mac 電腦對 mac 電腦也是，以此類推。

至於「跨作業系統」自然是不行的，會需要至少一台該作業系統的電腦重包 (可以想像一般我們安裝軟體的時候，都會有很多作業系統的版本要你選，因為不同作業系統運作程式的邏輯不同，需要依照該作業系統的運作邏輯將程式打包起來。)

安裝 pyinstaller

老樣子的一行解決 (我想大家應該也都很習慣了(吧)…?)

pip install pyinstaller

補充 - anaconda 安裝 pyinstaller 的方法 (感謝網友：steven yang 補充)

如果使用 pip 安裝 pyinstaller 會出現以下問題：

無法辨識’pyinstaller’ 詞彙是否為Cmdlet、函數、指令檔或可執行程式的名稱) 的報錯。

這時如果有搭配 anaconda 的環境使用，可以採取在 anaconda terminal 輸入的以下方法：

conda install -c conda-forge pyinstaller

有些東西在 anaconda 上用 pip 會不能運作… ( <- 我自己也踩過很多次這個坑XDD )
感謝網友：steven yang 幫忙補充 ^ ^

來打包昨天的程式碼吧!

昨天我們完成的 UI.py，
我們可以直接在終端機輸入

pyinstaller -F UI.py

結果

打包的過程，會稍微需要等一下，
中途會跳出一堆東西，可以順便看看有沒有錯誤。

最後等待程式跑完後，我們去同一個資料夾底下的 dist，裡面會看到一份「UI.exe」。

我們打開來試試看吧!

看起來就跟昨天的結果一模一樣呢!!!
(請忽略上面的顏色XD，只是心情好剛好去改 windows 配色，那顏色不是用 Qt 做的XD)

小結

這份「UI.exe」我們就可以拿來分享給全世界你的親朋好友囉!
只要是有「同作業系統 (windows, mac, ubuntu)」的電腦，不用特別安裝環境應該都能夠打開!

Reference

Using PyInstaller

【PyQt5】Day 2 - 利用 Qt designer 建立第一支有自己介面的 PyQt5 程式

Sun, 08 Aug 2021 16:53:15 +0800

看完這篇文章你會得到的成果圖

這次是我初學 PyQt5 的一些筆記，
每天都學一點點，至於整理的部分就慢慢一個個來
畢竟知道 PyQt5 有很多東西XD

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day02_qt_designer

安裝

先安裝 Qt designer

連結：https://build-system.fman.io/qt-designer-download

找到自己對應的版本下載

安裝 (這邊以 windows 示範)

安裝完成，第一次執行 Qt designer

打開來會發現這個畫面

這個畫面代表有不同的模板可以選擇，第一次我們先不管就選「Main Window」。

可以看到空白的畫面就這麼出來了!

建立文字框，開始我們的第一次 Hello World 吧!

拖曳左側的 Text Edit 至畫面中任意地方，建立文字框

點擊文字框兩下，進入編輯模式，輸入 Hello World!

輸入 Hello World! 的畫面可以參考這邊

存檔囉! 這就是我們的第一份有 UI 介面的程式

得到了 .ui 檔，我們現在要將他轉成 .py

我們在安裝 PyQt5 時就已經有安裝好了，我們可以直接在終端機下以下的指令

舉例：例如我想將剛剛儲存的 “test.ui” 轉換成 “UI.py”

範例程式碼

pyuic5 -x test.ui -o UI.py

說明

-x: 輸出為可單獨執行的檔案 (有 main 的部分)，若無會只有單純封裝好的 UI class
-o: 輸出 .py 檔案

有沒有「-x」的差別

紅色框 (我多框了 import 的部分，應該是沒有)，就是封裝好的 UI class，
藍色框就是 main 的部分，正常來說我們應該是不會「單獨」執行介面，

單獨執行介面，就是一個只有畫面，不能動的東西XD
除了好看(?)之外，沒什麼好用的XD

如果我們沒有下「-x」，就不會有 main 的部分 (純封裝好的 UI，要另外 import 寫控制)，
正常來講，除非只是想看顯示出來是怎麼樣，不然不會下「-x」這個 flag。

日後我們會更細部的來談這邊的架構，現在先知道差別即可。

執行

到這邊相信大家都懂了XD，就一如往常的執行這份 python 吧!

python UI.py

結果

看起來很簡單，不過這已經是我們設計一隻大型 Qt 程式重要的第一步囉!

Reference

PyQt 入門，用 Python 寫第一支 GUI

【PyQt5】Day 1 - 安裝 PyQt，建立自己的第一支 PyQt5 程式

Thu, 05 Aug 2021 17:55:05 +0800

看完這篇文章你會得到的成果圖

這次是我初學 PyQt5 的一些筆記，
每天都學一點點，至於整理的部分就慢慢一個個來
畢竟知道 PyQt5 有很多東西XD

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day01_install_and_hello

安裝

先安裝 PyQt5

新的方法 (之後到 OpenCV 章節時，可避免一些問題)

建議使用 conda 的方式安裝，

打開終端機的對應 conda 環境輸入

conda install pyqt

舊的方法 (之後可能會有些問題)

~~打開終端機輸入~~

pip install PyQt5

至於前面步驟「可能」還有：

安裝 python
安裝 anaconda (optional，看你想不想要管理 python 環境)

這部分就先不多說明，網路已經很多好文章了!

範例程式碼

PyQt5 可以學習的東西太多了! 我一開始學也是超級混亂的!!!
所以我們慢慢來!
先什麼都不管，直接跑程式碼，至少我們要確認「有沒有安裝成功」!

複製以下程式碼，直接跑就對了

應該要「能正常執行」，不然就是你沒安裝成功 PyQt5

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel
from PyQt5.QtGui import QIcon
from PyQt5.QtCore import pyqtSlot

def window():
   app = QApplication(sys.argv)
   widget = QWidget()

   textLabel = QLabel(widget)
   textLabel.setText("Hello World!")
   textLabel.move(110,85)

   widget.setGeometry(50,50,320,200)
   widget.setWindowTitle("PyQt5 Example")
   widget.show()
   sys.exit(app.exec_())

if __name__ == '__main__':
   window()

執行

到這邊相信大家都懂了XD，就一如往常的執行這份 python 吧!
(檔名請自行更換)

python hello.py

結果

windows 版本

不論是任何版本，複製上面程式碼應該都要看到這個結果，
不然請再去檢查你的 PyQt5 為何沒有安裝成功!
(沒安裝成功的原因太多種了，這邊很難細述)

說明

之後還會有更詳細的說明，但是既然這邊都提到了還是要交代一下！

如果想看更詳細的說明，這邊可以先跳過，日後文章會再來細講

建立一個視窗應用，並且宣告一個 QWidget 物件

這邊基本上寫法不太會改

app 代表「系統」的視窗程式，
widger 代表一個 QWidget() 的物件 (我們開發的視窗)

app = QApplication(sys.argv)
widget = QWidget()

這邊我們使用的是 QLabel，之後會在細講這東西，
我們將這東西存入 textLabel 這個變數中，並且作了文字與位置的設定

textLabel = QLabel(widget)
textLabel.setText("Hello World!")
textLabel.move(110,85)

這邊就是如何設定我們的 QWidget 視窗，

setGeometry 可以決定視窗大小
setWindowTitle 可以決定視窗名稱
show 將視窗顯示

widget.setGeometry(50,50,320,200)
widget.setWindowTitle("PyQt5 Example")
widget.show()

結束視窗應用

這邊是在偵測使用者呼叫的視窗是否有被關閉，
就是我們一般視窗「右上角(windows) 的叉叉」，偵測到關閉程式後，
讓程式順利結束運行，如果沒有這行就等於程式直接結束，
也不會等使用者把視窗關閉XD

sys.exit(app.exec_())

小結

到這邊，看起來很簡單(嗎?)，不過這就是我們初探 PyQt5 的第一步囉!
(到這邊，距離大致掌握 PyQt5 還好遙遠… 太多東西要學了)

Reference

PyQt Hello World

037 - 13th 鐵人賽 – 【今年還是不夠錢買psQQ，不如我們用PyQt自己寫一個】 on 嗡嗡的隨手筆記

【PyQt5】Day 30 - final project - 3 / 來搞一個自己的 photoshop 吧！把每個方法封裝起來製作出還原功能吧！ (結合 PyQt + OpenCV)

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

複習之前的內容 (前情提要)

獨立「圖像本身」與「圖像處理方法」，額外設計圖像處理介面。

介面設計與繼承方法

套用 design pattern 後 (使用 Interface Segregation Principle(ISP) 介面隔離原則)

我們在 day29 的時候，介紹了每個功能的實作細節

今天我們要來談封裝方法，建構出「步驟的流程」

分析「還原」或「重做」的功能，別人是怎麼做出來的?

保存圖片流

保存方法流 (保存變化量)

介面微更新

實作保存方法的機制

因為介面繼承的關係，我們可以輕鬆地增加記錄功能

結果

【問題】然而，光是這樣的架構還不足以我們實現「還原」或「重做」

1. 還原上一步時，該如何復原目前圖片的變更？

2. 還原上一步時，哪些畫面上的零件也需要還原？

3. 滑條對應的內容，是「一個 instance」 而不是 「new 一個新的 instance」

預期未來解決問題的方法

優化效能

【修改】我們暫時先移除，隨著滑條圖片一起變動的功能

修改程式碼部分

最終結果

優化部分

實現「還原」或「重做」功能的部分

最終成品！

30天的結語

Reference

【PyQt5】Day 29 final project - 2 / 來搞一個自己的 photoshop 吧！後段程式細節篇 (結合 PyQt + OpenCV)

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

之前內容的重點複習 (前情提要)

複習昨日的內容 (前情提要)

獨立「圖像本身」與「圖像處理方法」，額外設計圖像處理介面。

介面設計與繼承方法

套用 design pattern 後 (使用 Interface Segregation Principle(ISP) 介面隔離原則)

今天我們從各個功能的細節開始談

圖像中心 image_center

「滑鼠控制」相關 label_mouse_controller

「圖形處理」介面相關

「圖形處理」介面大祖宗 (method_interface)

「圖形處理」介面父母輩 (slider_method_interface, pen_method_interface)

「圖形處理」孩子輩 (method_lightness, method_saturation, method_contrast…)

OpenCV 圖像處理引擎 (opencv_engine)

最終結果

Reference

【PyQt5】Day 28 final project - 1 / 來搞一個自己的 photoshop 吧！UI 篇 + 純程式架構篇 (結合 PyQt + OpenCV)

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

之前內容的重點複習 (前情提要)

設計我們的 UI

既然要搞就一次搞到最大吧!

排版控制 Layout 系列

設定字體顏色，背景顏色的地方位於 styleSheet

設定 Logo 的地方

執行看看 UI.py 畫面是否如同我們想像

程式架構篇

先從大方向切入，我們有那些大的「重要元素」?

套用 design pattern 前

套用 design pattern 後 (使用 Interface Segregation Principle(ISP) 介面隔離原則)

於是整理一下，得到我們目前想設計的架構

【重要】抓出誰會是觸發事件的 trigger

以結論來說，這個系統的 trigger 位置如下

圖形修改介面 (interface) 設計

介面的大祖宗 (method_interface)，一切介面方法從此開始實作

介面的父母 (滑條方法介面 slider_method_interface, 畫筆方法介面 pen_method_interface)

各個細部的方法實作

最終系統架構圖

Reference

【PyQt5】Day 27 project / 製作影片 ROI 標註工具 (PyQt 結合 OpenCV 在圖上畫點畫線)

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

之前內容的重點複習 (前情提要)

設計我們的 UI

轉換 day27.ui -> UI.py

執行看看 UI.py 畫面是否如同我們想像

設計我們的 controller

3. 滑條對應的內容，是「一個 instance」而不是「new 一個新的 instance」