【PythonでGUI】PyQt5 -ウィジェット-

[前回](http://qiita.com/Algebra_nobu/items/acd3caa625be8eebc09c)の続き

[Widgets](http://zetcode.com/gui/pyqt5/widgets/)
こちらのサイトを日本語でざっくりとまとめていきます。

#【チェックボックス】
```py3:QCheckBox.py
#!/usr/bin/python3
# -*- coding: utf-8 -*-


import sys
from PyQt5.QtWidgets import QWidget, QCheckBox, QApplication
from PyQt5.QtCore import Qt


class Example(QWidget):
    
    def __init__(self):
        super().__init__()
        
        self.initUI()
        
        
    def initUI(self):      

        # チャックボックス作成
        cb = QCheckBox('Show title', self)
        cb.move(20, 20)
        # チェックボックスにチェックを入れる
        cb.toggle()
        # チェックの状態によってタイトルを変える
        cb.stateChanged.connect(self.changeTitle)
        
        self.setGeometry(300, 300, 250, 150)
        self.setWindowTitle('QCheckBox')
        self.show()
        
        
    def changeTitle(self, state):
      
        # チャックが入っているとき
        if state == Qt.Checked:
            self.setWindowTitle('QCheckBox')
        # チャックが入っていないとき
        else:
            # 何も引数を指定しないとタイトルがpythonになるみたい
            self.setWindowTitle('')
            
        
if __name__ == '__main__':
    
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())
```
<img width="193" alt="checkbox.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/59df11aa-74a3-069d-e9bc-8660e7ee43c1.png">

#【トグルボタン】
```py3:Toggle_button.py
#!/usr/bin/python3
# -*- coding: utf-8 -*-


import sys
from PyQt5.QtWidgets import (QWidget, QPushButton, 
    QFrame, QApplication)
from PyQt5.QtGui import QColor


class Example(QWidget):
    
    def __init__(self):
        super().__init__()
        
        self.initUI()
        
        
    def initUI(self):      

        # 色の初期設定（黒にする）
        self.col = QColor(0, 0, 0)       

        # トグルボタンの作成
        redb = QPushButton('Red', self)
        redb.setCheckable(True)
        redb.move(10, 10)

        # クリックされたらsetColor関数の呼び出し
        redb.clicked[bool].connect(self.setColor)

        redb = QPushButton('Green', self)
        redb.setCheckable(True)
        redb.move(10, 60)

        redb.clicked[bool].connect(self.setColor)

        blueb = QPushButton('Blue', self)
        blueb.setCheckable(True)
        blueb.move(10, 110)

        blueb.clicked[bool].connect(self.setColor)

        self.square = QFrame(self)
        self.square.setGeometry(150, 20, 100, 100)
        self.square.setStyleSheet("QWidget { background-color: %s }" %  
            self.col.name())
        
        self.setGeometry(300, 300, 280, 170)
        self.setWindowTitle('Toggle button')
        self.show()
        
        
    def setColor(self, pressed):
        
        # 押されたボタンをsource変数に代入
        source = self.sender()      
        
        # ボタンがクリックされたら、色を設定
        if pressed:
            val = 255
        else: val = 0
        
        # Redボタンが押されたら、色に赤を混ぜる
        if source.text() == "Red":
            self.col.setRed(val)    
        # Greenボタンが押されたら、色に緑を混ぜる            
        elif source.text() == "Green":
            self.col.setGreen(val)   
        # Blueボタンが押されたら、色に青を混ぜる
        else:
            self.col.setBlue(val) 
        
        # 色を変える
        self.square.setStyleSheet("QFrame { background-color: %s }" %
            self.col.name())  
       
       
if __name__ == '__main__':
    
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())
```
初期状態
<img width="150" alt="toggle_before.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/3da4076d-da52-62fe-b6af-d4e0055c130a.png">

RedボタンとBlueボタンを押したとき
<img width="150" alt="toggle_after.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/8a08887a-7375-d322-975c-ae3ed5de4d3d.png">

#【スライダー】
```py3:QSlider.py
#!/usr/bin/python3
# -*- coding: utf-8 -*-


import sys
from PyQt5.QtWidgets import (QWidget, QSlider, 
    QLabel, QApplication)
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPixmap


class Example(QWidget):
    
    def __init__(self):
        super().__init__()
        
        self.initUI()
        
        
    def initUI(self):      

        # 水平方向のスライダー作成
        sld = QSlider(Qt.Horizontal, self)
        # スライダーがフォーカスされないようにする
        sld.setFocusPolicy(Qt.NoFocus)
        sld.setGeometry(30, 40, 100, 30)
        # スライダーが動くとchangeValue関数が呼び出される
        sld.valueChanged[int].connect(self.changeValue)
        
        # ラベル作成
        self.label = QLabel(self)
        # ラベルに初期画像設定
        self.label.setPixmap(QPixmap('orange.png'))
        self.label.setGeometry(160, 40, 80, 30)
        
        self.setGeometry(300, 300, 280, 170)
        self.setWindowTitle('QSlider')
        self.show()
        
        
    def changeValue(self, value):

        # スライダーの位置によって画像を変化させる
        if value == 0:
            # オレンジ色の画像
            self.label.setPixmap(QPixmap('orange.png'))
        elif value > 0 and value <= 30:
            # 黄色の画像
            self.label.setPixmap(QPixmap('yellow.png'))
        elif value > 30 and value < 80:
            # 緑色の画像
            self.label.setPixmap(QPixmap('green.png'))
        else:
            # 青色の画像
            self.label.setPixmap(QPixmap('blue.png'))
            

if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())
```
<img width="151" alt="orange_slider.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/7064d574-55fe-8375-00fb-0fc57de9ca9d.png"><img width="150" alt="yellow_slider.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/4bf8ec1f-8f6a-6c1d-f88c-72d8d5f5fc20.png">
<img width="152" alt="green_slider.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/6f1a0286-1db4-8727-1b6b-2d9850c1dc79.png"><img width="152" alt="blue_slider.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/a213890d-14a1-65e1-f829-b0daa59f21db.png">

#【プログレスバー】
```py3:QProgressBar.py
#!/usr/bin/python3
# -*- coding: utf-8 -*-


import sys
from PyQt5.QtWidgets import (QWidget, QProgressBar, 
    QPushButton, QApplication)
from PyQt5.QtCore import QBasicTimer


class Example(QWidget):
    
    def __init__(self):
        super().__init__()
        
        self.initUI()
        
        
    def initUI(self):      

        # プログレスバーの作成
        self.pbar = QProgressBar(self)
        self.pbar.setGeometry(30, 40, 200, 25)

        self.btn = QPushButton('Start', self)
        self.btn.move(40, 80)
        self.btn.clicked.connect(self.doAction)

        # プログレスバーを動かすためのタイマーオブジェクトの作成
        self.timer = QBasicTimer()
        # プログレスバーをどの地点から始めるか
        self.step = 0
        
        self.setGeometry(300, 300, 280, 170)
        self.setWindowTitle('QProgressBar')
        self.show()
        
    
    # 時間のイベントハンドラ
    def timerEvent(self, e):
      
        # プログレスバーが100%以上になったらタイマーを止め、ボタンラベルをFinishedにする
        if self.step >= 100:
            self.timer.stop()
            self.btn.setText('Finished')
            return
            
        # 1%ずつ数字を増やしていく
        self.step = self.step + 1
        self.pbar.setValue(self.step)
        
    # ボタンがクリックされた時の動作
    def doAction(self):
      
        if self.timer.isActive():
            self.timer.stop()
            self.btn.setText('Start')
        else:
            # startの第一引数はバーが進む速さを指定
            self.timer.start(100, self)
            self.btn.setText('Stop')
            
        
if __name__ == '__main__':
    
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())
```
<img width="150" alt="progress_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/d1265598-4887-f988-d7c8-153e8dd19cb8.png">　<img width="150" alt="progress_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/53ec952e-424c-ce7c-21bb-97ec074c0482.png">　<img width="150" alt="progress_3.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/62fc3207-b852-3e0e-0bf0-4ffef9d8235e.png">

#【カレンダー】
```py3:QCalendarWidget.py
#!/usr/bin/python3
# -*- coding: utf-8 -*-


import sys
from PyQt5.QtWidgets import (QWidget, QCalendarWidget, 
    QLabel, QApplication)
from PyQt5.QtCore import QDate


class Example(QWidget):
    
    def __init__(self):
        super().__init__()
        
        self.initUI()
        
        
    def initUI(self):      

        # カレンダーウィジェットの作成
        cal = QCalendarWidget(self)
        cal.setGridVisible(True)
        cal.move(20, 20)
        # 日付がクリックされたらshowDate関数を呼び出す
        cal.clicked[QDate].connect(self.showDate)
        
        self.lbl = QLabel(self)
        # 本日の日付を代入
        date = cal.selectedDate()
        # 本日の日付をラベルテキストにする
        self.lbl.setText(date.toString())
        # ラベルテキストを見やすい位置に移動
        self.lbl.move(430, 320)
        
        self.setGeometry(300, 300, 350, 300)
        self.setWindowTitle('Calendar')
        self.show()
        
        
    def showDate(self, date):     
        
        # クリックされた日付をラベルテキストにセット
        self.lbl.setText(date.toString())
        
        
if __name__ == '__main__':
    
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())
```
初期状態
<img width="301" alt="calneder_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/23da26a2-a463-1091-befa-286bd855cb72.png">

6月15日を選択
<img width="303" alt="calender_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/121997/84a832a0-2491-13bd-12a0-4bd318c39089.png">

[次回](http://qiita.com/Algebra_nobu/items/36bc4cc6cf4163b66847)は[Widgets II](http://zetcode.com/gui/pyqt5/widgets2/)をざっくり試していきます。