看完這篇文章你會得到的成果圖
前言
我們接下來的討論,會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。
【PyQt5】Day 5 – 開始來設計我們的 controller.py,改以「程式角度」來說明如何建立 PyQt 的系統
此篇文章的範例程式碼 githubhttps://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⭐Python PyQt5 相關文章整理⭐: ⭐基礎知識與架構篇⭐: 1. 【PyQt5】Day 1 – 安裝 PyQt,建立自己的第一支 PyQt5 程式 2. 【PyQt5】Day 2 – 利用 Qt designer 建立第一支有自己介面的 PyQt5 程式 3. 【PyQt5】Day 4 – 重要的 Qt 程式邏輯觀念,務必先有此觀念後面才會懂自己在幹嘛 4. 【PyQt5】Day 5 – 開始來設計我們的 controller.py,改以「程式角度」來說明如何建立 PyQt 的系統 ⭐基本元件應用篇⭐: 1. 【PyQt5】Day 6 – 我們的第一個 output 手段 – Qlabel 2. 【PyQt5】Day 7 – 我們的第一個 input 手段 – QPushButton 3. 【PyQt5】Day 8 – 我們的第二個 input 手段 – QLineEdit 4. 【PyQt5】Day 9 – 以 QLineEdit, QTextEdit, QPlainTextEdit 作為文字的輸入 6. 【PyQt5】Day 14 - 使用 QSlider 製作可拖曳的滑條 8. 【PyQt5】Day 19 - 使用 QProgressBar,製作進度條的功能 ⭐介面系統控制篇⭐: 5. 【PyQt5】Day 10 – 以 QFileDialog 讀取系統的檔案、資料夾 7. 【PyQt5】Day 18 / Project 使用 QTimer,自製碼表(計時器) PyQt5 stopwatch DIY 1. 【PyQt5】Day 20 - PyQt 最重要的 QThread 概念 / 為什麼 windows, mac, ubuntu (linux) 程式會「沒有回應」? 2. 【PyQt5】Day 21 – 透過 PyQt 實現滑鼠監聽總整理,完全掌握滑鼠控制 (listen mouse) 3. 【PyQt5】Day 22 – PyQt 視窗的個性化/屬性控制 setWindowFlags,禁止放大縮小、永遠顯示於最上層/最下層 4. 【PyQt5】Day 23 – 使用系統內建的調色盤 QColorDialog,來替我們選擇顏色 QColor (Color Picker) 5. 【PyQt5】Day 24 / Project 偵測滑鼠目前指示顏色的小工具 (滴管工具), 利用 QCursor 偵測滑鼠, QApplication 取得截圖 ⭐影像處理篇⭐: 1. 【PyQt5】Day 11 – 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV) 2. 【PyQt5】Day 12 – 建立一個可以縮放圖片大小的顯示器 (基於 QImage 使用 OpenCV) 3. 【PyQt5】Day 13 – 使用 QVBoxLayout, QscrollArea 製作出捲軸,以高解析度檢視圖片 (基於 QImage 使用 OpenCV) 4. 【PyQt5】Day 15 / Project 與檔案功能整合,製作出可讀取圖片並可縮放的 UI 介面 (使用 PyQt + OpenCV) 5. 【PyQt5】Day 16 - 在 PyQt5 中取得圖片座標 (滑鼠位置) mousePressEvent,觀察圖片在 Qt 中產生的方式,對原圖進行座標換算處理 6. 【PyQt5】Day 17 / Project 製作標註 roi 工具, 開始導入 OpenCV 作為繪圖引擎, 在圖上畫點並顯示座標 ⭐project 篇⭐: 1. 【PyQt5】Day 25 / Project 自己做一個影片播放器 DIY video player (結合 PyQt + OpenCV) 2. 【PyQt5】Day 26 / Project 替我們影片播放器增加一個顯示進度的滑條 video player add slider (與昨日 bottleneck 處理細節) 3. 【PyQt5】Day 27 / Project 製作影片 ROI 標註工具 (PyQt 結合 OpenCV 在圖上畫點畫線) 4. 【PyQt5】Day 28 / final project – 1 來搞一個自己的 photoshop 吧!UI 篇 + 純程式架構篇 (結合 PyQt + OpenCV) 5. 【PyQt5】Day 29 / final project – 2 來搞一個自己的 photoshop 吧!後段程式細節篇 (結合 PyQt + OpenCV) 6. 【PyQt5】Day 30 / final project – 3 來搞一個自己的 photoshop 吧!把每個方法封裝起來製作出還原功能吧! (結合 PyQt + OpenCV) ⭐打包程式篇⭐: 1. 【PyQt5】Day 3 – 用 pyinstaller 將 python 程式打包,把每天的成果分享給你的親朋好友 ⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡! 】
如果喜歡我的文章,請幫我在下方【按五下Like 】 (Google, Facebook 免註冊 ),會由 「LikeCoin 」 贊助作者鼓勵繼續創作,讀者們「只需幫忙按讚,完全不用出錢 」哦!
[…] Day 10 的讀檔功能 、Day 14 的滑條功能 , 整合進 Day 13 的最終成果 […]
[…] 【PyQt5】Day 14 – 使用 QSlider 製作可拖曳的滑條 有詳細的教學 QSlider 該如何使用了, […]