#PYTHON3 #QT #PYSISE2 #TUTORIAL #QTIME #QTIMEEDIT #QLCDNUMBER
PySide #17: 時間的重要性(下), QTimeEdit, QLCDNumber, AnalogClock
上一篇,我們提到了日期以及日曆的使用方式,而這一篇將繼續向更細節的時間 — 時分秒來做介紹,本章會提到的東西都非常簡單,如QTimeEdit、QLCDNumber都是非常直覺且簡單的物件,但是呢,Qt本身卻沒有時鐘的物件,所以我們需要自己製作一個客製化的UI物件。
官方其實已經有相關的範例了,但是呢卻沒有Python的版本,並且非常陽春,因此我們要來製作一個更完整的物件以供未來使用。
QTimeEdit
上一章我們提過QDateEdit,而QTimeEdit使用上跟它是一模一樣的,只是格式改成了時間的樣子。
事實上,他們都是繼承於QDateTimeEdit,就如同QTime、QDate都是繼承於QDateTime一樣,所以在使用的時候會發現也包含QDatetimeEdit的函式,不過因為是時間的關係,日期、日曆相關的函式我們都是用不到的。
Declare
通常會設定上下限的值,這邊表示正常上下班時間的上下限時間,另外還有時間的格式,預設的格式通常會是 h:mm AP
。
def set_time_edit(self):
time_edit = self._window.time_edit
time_edit.setMaximumTime(QTime(18, 0, 0))
time_edit.setMinimumTime(QTime(8, 0, 0))
time_edit.setDisplayFormat('hh:mm:ss.zzz')
這邊提供QTime格式的表格:
QLCDNumber
我們當然可以用QLabel來顯示所有的東西,但是這樣就Low掉啦!有時候顯示一些Hex的格式或是像時間這種Digital的東西就會想要使用七段顯示器的顯示方式,原因無他,就一個潮字了得!
Mode
首先,我們要知道QLCDNumber有幾種模式,表拿不同進位方式:
模式的設定非常簡單,可以直接透過相對應的函式直接設定,像是 setHexMode()
、 setDecMode()
等等。
也可以透過上表的Flag來做設定: setMode(QLCDNumber.Hex)
Display
至於顯示的部分,除了大家應該已經想到的數字顯示方式,還有另一個就是純文字的String顯示方式,這個方式就是我們要在電子時鐘中使用的格式。
def set_lcd(self):
lcd = self._window.lcd
lcd.setDecMode() s_time = QTime.currentTime().toString('hh:mm')
lcd.display(s_time)
注意!
使用String的顯示方式 “:”只能使用一次,也就是說沒辦法顯示秒數唷!
Runtime clock
如果要讓時鐘動態一直跑,不斷刷新,只要使用上一章教的QTimer每秒刷新就能輕鬆完成啦!
self._clock_timer.timeout.connect(self.update_clock)def set_lcd(self):
lcd = self._window.lcd
lcd.setDecMode()
self._clock_timer.start(1000)@QtCore.Slot()
def update_clock(self):
time = QTime.currentTime()
s_time = time.toString('hh:mm')
if time.second() % 2 == 0:
s_time = s_time.replace(':', '.')
self._window.lcd.display(s_time)
Analog Clock
接下來!我們要來製作時鐘的UI物件了!
實作的方式主要是用QWidget當做基底,利用QWidget中內建的PaintEvent定期刷新畫面並用QPaint作畫,可以想像成小畫家在QWidget這個畫布上畫上2D的圖形。
Outlook Define
首先先定義一下,指針的長度以及顏色等等,這邊需要用到一些特殊的物件,包括QPolygon、QPoint、QColor等等繪圖常用的物件。
這些主要用來定義等等要畫的物件的座標,我們會由Widget的正中間為中心座標。
class AnalogClock(QWidget):
basic_size = 100
hour_pin = QPolygon([
QPoint(2, 5),
QPoint(-2, 5),
QPoint(0, -45)
])
minute_pin = QPolygon([
QPoint(2, 5),
QPoint(-2, 5),
QPoint(0, -75),
])# 定義各個部位的顏色
hour_pin_color = QColor('#da8602')
min_pin_color = QColor('#2196f3')
background_color = QColor(255, 255, 255, 32)
edge_color = QColor(255, 255, 255, 96)
text_color = QColor(120, 255, 255, 128) def __init__(self, parent=None, showFrame=False, size=None):
super(AnalogClock, self).__init__(parent)
timer = QTimer(self)
timer.timeout.connect(self.checkUpdate)
timer.start(1000)
self.setAttribute(Qt.WA_TranslucentBackground)
if size is None:
size = self.basic_size
self.resize(size, size)
else:
if size < self.basic_size:
size = self.basic_size
self.resize(size, size)
PaintEvent
畫圖的核心物件,每個QWidget都有這個Event主要掌管了update, repaint等等繪製畫面的函式,當我們改了一些UI物件的Attribute這個event就會被觸發,並且呼叫repaint做畫面刷新,但也可能會遇到沒刷新的問題,這時候我們就要手動呼叫repaint來做更新了。
離題了,讓我們來繪製我們的時鐘吧!
Declare
- 我們要在paintEvent中,宣告QPainter這個物件為我們完成畫圖的動作,首先要執行
begin(QPaintDevice)
函式,並帶入QWidget本體表示我們要畫出自己,也就是時鐘。 - 接下來要定義繪圖的繪圖引擎針對繪圖時的抗鋸齒模式,如果不了解可以使用預設的值,詳細的模式內容可以看下表。
- 再來我們要定義我們的時鐘要出現在哪裡,當然不會是Widget的左上角的,所以我們將其移動掉正中間。
def paintEvent(self, event):
painter = QPainter()
painter.begin(self)
painter.setRenderHint(QPainter.Antialiasing)
painter.translate(self.width() / 2, self.height() / 2)
Draw Clock Frame
宣告完後我們來繪製時鐘本體,呼叫 drawEllipse()
函式來繪製圓形後,我們要用繪製刻度以及數字,這邊會用到一點圓周率的概念。
# 利用side確保時鐘一直處於max size又不會超出邊界的狀態
side = min(self.width(), self.height())
painter.drawEllipse(QPoint(0, 0), side/2, side/2)
繪製刻度,我們在這邊實作一個旋轉座標的函式 rotate_point()
:
def rotated_point(self, x, y, degree):
theta = degree * math.pi / 180
s = math.sin(theta)
c = math.cos(theta)
return x * c - y * s, x * s + y * cdef paintEvent(self, event):
# ....(略)
for i in range(0, 12):
x, y = self.rotated_point(0, -r * 0.95, i * 360/12)
painter.drawEllipse(x - 3, y - 3, 6, 6) painter.setPen(self.text_color)
for i in range(0, 12):
x, y = self.rotated_point(0, -r * 0.85, i * 360/12)
painter.drawText(QRect(x - 10, y - 10, 20, 20),
Qt.AlignCenter, "%d" % i)
painter.setPen(self.background_color)
painter.setBrush(QBrush(self.min_pin_color))
for min in range(0, 60):
if min % 5 != 0:
x, y = self.rotated_point(0, -r * 0.95, min * 360/60)
painter.drawEllipse(x - 1, y - 1, 2, 2)
Draw Clock Hand
最後我們要畫上指針,利用先前定義好的polygon座標,利用QPainter將其畫出來。
這邊要讓大家了解, save()
函式跟 restore()
函式一個是將目前的Painter的狀態存入queue中與釋放。
curr_time = QTime.currentTime()# 時針
painter.setBrush(QBrush(self.hour_pin_color))
painter.save()
# 依據時鐘大小更改指針長度
self.hour_pin[2] = QPoint(0, int(-r/3))
painter.rotate(30.0 * (curr_time.hour() + curr_time.minute() /
60.0))
painter.drawConvexPolygon(self.hour_pin)
painter.restore()# 分針
painter.setBrush(QBrush(self.min_pin_color))
painter.save()
self.minute_pin[2] = QPoint(0, int(-r * 0.9))
painter.rotate(6.0 * (curr_time.minute() + curr_time.second() /
60.0))
painter.drawConvexPolygon(self.minute_pin)
painter.restore()
結束繪圖:
painter.end()
Update Frame
最後,我們要利用QTimer來定期觸發QWidget中的 update
函式或是 repaint
函式,這邊我使用update來刷新畫面,刷新畫面時會同時觸發paintEvent以達到重新繪製指針的效果。
@Qt.Slot()
def update_frame(self):
time = QTime.currentTime()
if time.second() % 10 == 0:
self.update()# in __init__()timer = QTimer(self)
timer.timeout.connect(self.update_frame)
timer.start(1000)
Set Time
最後,我們不只是要讓時鐘一直處於現在時間,可能也想要設定他的時間,因此我們要把時間的參數拉出來到外部,並透過自訂的 setTime()
函式來設定時鐘。
@property
def time(self):
return self._time
@time.setter
def time(self, value: QTime):
self._time = value
self.update_frame()def paintEvent(self, event):
# 修改現在時間
curr_time = self._time
再mainWindow中,更新digital的時間時,同時設定Analog的時間,這樣就完成了!
# In MainWindow classdef set_clock(self):
self._analog_clock = AnalogClock(self._window, 500)
self._window.v_layout.addWidget(self._analog_clock)@QtCore.Slot()
def update_clock(self):
time = QTime.currentTime()
s_time = time.toString('hh:mm')
if time.second() % 2 == 0:
s_time = s_time.replace(':', '.')
self._window.lcd.display(s_time)
# 同步analog時間
self._analog_clock.time = time
Source Code
完整代碼請看 :clock_time
結論
QTimeEdit以及QLCDNumber的使用方式非常的簡單,相信大家上手的非常快速,而我們自製的AnalogClock結合了2D繪圖的元素,因此相對不好理解一些,但UI的東西只需要做一次之後套用即可,大家可以花點時間把它好好了看過唷!
我是夜海中的宅男DekBan,我們下次見,see ya next night.
Next Step : PySide #18: 秀出你的生活點滴, Logging to Everywhere!
本文範例參考:
Qt Official