「Krita」と「Python」でUIパーツを構築してみよう

2024年11月1日(金)
大西 武 (オオニシ タケシ)
第8回の今回は「Krita」で「Python」をプログラミングして、ボタンやスライダーなどのUIパーツを構築する解説をします。

clicked以外でも処理する
UIパーツを構築する

ここまでは、ボタンなどがクリックされたときに、主に「clicked」フックで処理するサンプルを解説しました。「フック」とはプログラムの実行プロセスに割り込み、元の動作を捕えたり監視したり改変したりする技術のことです。以降では「textChanged」「currentIndexChanged」「valueChanged」「stateChanged」フックで変化があったときに処理するサンプルを解説します。

ここでも、レイアウトにUIパーツを追加してダイアログにレイアウトをセットするだけです。もちろん前回の他のダイアログUIにもUIパーツを貼れるのですが、それはクラスの「継承」を理解しないと今までのやり方ではできないので、今回は解説しません。

テキストエディットを構築

「テキストエディット(QTextEdit)」は複数行の文字を入力できるエリアのことです(図6)。Kritaは絵を描くツールですが、UIを使って文字を入力することもあるでしょう。

図6:テキストエディットを構築

・サンプルスクリプト「dlg_textedit.py」
# モジュール
from PyQt5.QtWidgets import QDialog, QVBoxLayout, QTextEdit
# テキストエディットが変更されたら呼ばれる
def change_text():
  print(text.toPlainText())
# テキストエディットUIの作成
layout = QVBoxLayout()
text = QTextEdit()
layout.addWidget(text)
# テキストエディットが変更されたら「change_text」関数を呼び出す
text.textChanged.connect(change_text)
# ダイアログの作成と実行
dlg = QDialog() 
dlg.setLayout(layout)
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
「change_text」関数でテキストエディットに書かれた文字列をコンソールに表示します。
「QTextEdit」クラスでテキストエディットUIを作成してレイアウトに追加し、ダイアログにセットします。
テキストが変更されたら(textChanged)、「change_text」関数を呼び出します。

コンボックスを構築

「コンボボックス(QComboBox)」は、機能的にはラジオボタンに似ており複数の選択肢の中から1つだけを選ぶことができますが、ラジオボタンと違って選択肢は最初1つしか見えておらず、コンボボックスをクリックしたら選択肢が現れます(図7)。つまりダイアログにおいて省スペースで選択肢を選べます。

図7:コンボックスを構築

・サンプルスクリプト「dlg_combobox.py」
# モジュール
from PyQt5.QtWidgets import QDialog, QHBoxLayout, QComboBox
# タプル
vehicle_tuple = ("自動車","飛行機","電車")
# コンボボックスが変更されたら呼ばれる
def change_combo(index):
  print(vehicle_tuple[index])
# コンボボックスUIの作成
layout = QHBoxLayout()
combo = QComboBox()
for t in vehicle_tuple: combo.addItem(t) 
layout.addWidget(combo)
# コンボボックスが変更されたら「change_combo」関数を呼び出す
combo.currentIndexChanged.connect(change_combo)
# ダイアログの作成と実行
dlg = QDialog() 
dlg.setLayout(layout)
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
「change_combo」関数でコンボボックスで選択した文字列をコンソールに表示します。
「QComboBox」クラスでコンボボックスUIを作成して「addItem」メソッドで項目を追加します。
コンボボックスをレイアウトに追加し、ダイアログにセットします。
コンボボックスが変更されたら(currentIndexChanged)、「change_combo」関数を呼び出します。

スピンボックスを構築

「スピンボックス(QSpinBox)」は▲と▼をクリックすることで数値を増やしたり減らしたりできるUIパーツです(図8)。直接数値を文字で入力しなくてもマウス操作だけで数値を選べます。

図8:スピンボックスを構築

・サンプルスクリプト「dlg_spinbox.py」
# モジュール
from PyQt5.QtWidgets import QDialog, QHBoxLayout, QSpinBox
# スピンボックスが押されたら呼ばれる
def change_spin():
  print(str(spin.value()))
# スピンボックスUIの作成
spin = QSpinBox()
spin.setMinimum(0)
spin.setMaximum(1000)
spin.setSingleStep(50)
layout = QHBoxLayout()
layout.addWidget(spin)
# スピンボックスが押されたら「spin_change」関数が呼ばれる
spin.valueChanged.connect(change_spin)
# ダイアログの作成と実行
dlg = QDialog() 
dlg.setLayout(layout)
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
「change_spin」関数でスピンボックスの現在の数値をコンソールに表示します。
「QSpinBox」クラスでスピンボックスUIを作成し、数値の最小と最大とステップ数をセットします。
スピンボックスをレイアウトに追加し、ダイアログにセットします。
数値が変更されたら(valueChanged)、「change_spin」関数を呼び出します。

ラインエディットとスライダーを構築

「ラインエディット(QLineEdit)」は1行だけ入力できる「テキストエディット」のようなUIパーツです。「スライダー(QSlider)」は、よく音量スライダーがあるように滑らせて数値を変更します(図9)。

ここではスライダーとラインエディットを連携して、スライダーを動かしたらラインエディットにスライダーの値を表示します。

図9:ラインエディットとスライダーを構築

・サンプルスクリプト「dlg_slider.py」
# モジュール
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QDialog,QGridLayout,QLineEdit,QSlider
# スライダーが動いたら呼ばれる
def change_slider(value):
  edit.setText(str(value))
# レイアウト
layout = QGridLayout()
# エディットボックスUI
edit = QLineEdit() 
layout.addWidget(edit)
# スライダーUIを構築
slider = QSlider(Qt.Horizontal)
layout.addWidget(slider)
# スライダーが動いたら「change_slider」関数を呼び出す
slider.valueChanged.connect(change_slider)
# ダイアログの作成と実行
dlg = QDialog() 
dlg.setLayout(layout)
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
「change_slider」関数でスライダーの数値をラインエディットに表示します。
「QLineEdit」クラスでラインエディットUIを作成して「QSlider」クラスでスライダーUIを作成し、レイアウトに追加してダイアログにセットします。
スライダーが変更されたら(valueChanged)、「change_slider」関数を呼び出します。

チェックボックスを構築

「チェックボックス(QCheckBox)」は項目をチェックしたりチェックを外したりするUIパーツで、それぞれTrueとFalseになります。ラジオボタンやコンボボックスと違って複数の項目を同時に選べます(図10)。

図10:チェックボックスを構築

・サンプルスクリプト「dlg_checkbox.py」
# モジュール
from PyQt5 import QtCore
from PyQt5.QtWidgets import QDialog,QVBoxLayout,QCheckBox
# チェックボックスが押されたら呼ばれる
def change_state(value):
  print("チェックボックス1:",checkbox1.checkState() == QtCore.Qt.Checked)
  print("チェックボックス2:",checkbox2.checkState() == QtCore.Qt.Checked)
  print("チェックボックス3:",checkbox3.checkState() == QtCore.Qt.Checked)
# チェックボックスUIの作成
layout = QVBoxLayout()
checkbox1 = QCheckBox("チェックボックス1")
layout.addWidget(checkbox1)
checkbox2 = QCheckBox("チェックボックス2")
layout.addWidget(checkbox2)
checkbox3 = QCheckBox("チェックボックス3")
layout.addWidget(checkbox3)
# チェックボックスが押されたら「change_state」関数を呼び出す
checkbox1.stateChanged.connect(change_state)
checkbox2.stateChanged.connect(change_state)
checkbox3.stateChanged.connect(change_state)
# ダイアログの作成と実行
dlg = QDialog() 
dlg.setLayout(layout)
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
「change_state」関数でチェックボックス1、2、3がチェックされているかをコンソールに表示します。
「QCheckBox」クラスでチェックボックスUIを3つ作成してレイアウトに追加し、ダイアログにセットします。
チェックボックスが変更されたら(stateChanged)、「change_state」関数を呼び出します。

おわりに

今回は、各サンプルで数個だけUIパーツを貼り付けましたが、ダイアログには何個でも色々な種類のUIパーツを貼り付けることができます。例えば、画像を移動する位置(X,Y)を数値で指定してボタンを押せば確定、するなどです。ぜひ、皆さんもオリジナルのダイアログを作ってみてください。

著者
大西 武 (オオニシ タケシ)
1975年香川県生まれ。大阪大学経済学部経営学科中退。プログラミング入門書など30冊以上を商業出版する作家。Microsoftで大賞やNTTドコモでグランプリなど20回以上全国区のコンテストに入賞するアーティスト。オリジナルの間違い探し「3Dクイズ」が全国放送のTVで約10回出題。
https://profile.vixar.jp

連載バックナンバー

開発言語技術解説
第8回

「Krita」と「Python」でUIパーツを構築してみよう

2024/11/1
第8回の今回は「Krita」で「Python」をプログラミングして、ボタンやスライダーなどのUIパーツを構築する解説をします。
開発言語技術解説
第7回

「Krita」と「Python」でダイアログUIを構築してみよう

2024/10/11
第7回の今回は「Krita」の「Python」で「PyQt5」モジュールの「ウィジェット」を使って、ダイアログUIを構築する解説をします。
開発言語技術解説
第6回

「Krita」と「Python」でアニメーションを描いてみよう

2024/9/24
第6回の今回は「Krita」で「Python」をプログラミングして、正方形が回転するアニメーションを作成する解説をします。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています