PySide(2)

PySide(Qt)を使用してGUIアプリを作成する時に、コントロールの数が少ない単純デザインであればすべてコードで記述する事は可能だが、複雑なレイアウトになると現実的では無くなる。頑張って書いたとしても、メンテナンス性が悪くなるので調整や追加を行うのはかなり大変だ。

多くのツールキットにはGUIデザイン用のツールが存在していて、QtにはQt Designer、wxPythonにはwxGladeというリソースエディタがある。wxGladeはまだ使った事が無いが、そちらはwxPythonを試してみる時まで置いておくとして、今回も引き続きツールキットとしてPySideを使用するのでツールは必然的にQt Designerとなる。

Qt Designerはかなり重量級のアプリなので、Raspberry Piでも動かせない事はないのだが実際に試してみると動作が遅くて実用的では無かった。なのでQt Designerは別なPCで動かし、デザインしたファイルだけをRaspberry Piに持って行って動かす事にする。

具体的にはWindows7の仮想PCとしてインストールしたUbuntu(Xubuntu)にQt Designerをインストールした。Ubuntuソフトウェアセンターで「Qtデザイナー」を検索すれば出てくるので、そこでインストールすれば良い。

Ubuntuソフトウェアセンター_002

Windowsの場合はQt Projectのダウンロードページから、Qt Online Installer for Windowsをダウンロードして実行すれば必要なツールはすべてインストールされる。Windows版ではQt DesignerはQt Creatorの一部になっているため、Qt Designerだけを使用したい場合でもすべてインストールしなくてはいけないようだ。

Qt Creatorに含まれるQt Designerを使用する場合、最初にプロジェクトを作成してからでないとデザインが行えないようなので、PySideのためだけにQt Designerを使いたい場合にはWindowsではなくLinuxで行うほうが今のところはやりやすい。Windows環境下でもVirtualBox等の仮想PCツールで手軽にLinux環境を構築可能なので、そちらをお勧めする。

XubuntuではインストールしたQt Designerはメニューの開発カテゴリの中に「Qt4デザイナ」という名前で追加されるので、それを選択すれば起動するのだが、起動する前にまずはどんなGUIを作るのかを考えておく。
Qtのレイアウトはコントロールが多層構造になるので、デザインツールを使用する場合でもGUIの構造は予め考えておいたほうが良い。大雑把に紙に書くのも有効。

前回作ったGUIと同じものでは面白く無いので、光らせたカラーLEDの色と同じ名前を同じ色で表示させる事にした。ついでに押したボタンの色も変えて分かりやすくする。

Form - [プレビュー]_018

プレビューだと分からないが、フォーム全体のレイアウトをVertical Layoutにしておき、そこにLabelとHorizontal Layoutを並べて、Horizontal Layoutの中にボタンを三個並べた構造になっている。これをQt Designerで作ってみる。

最初にQt Designerを起動すると、新しいフォームの作成ダイアログが出るのでWidgetを選択。

Qt Designer_003

フォームが表示されたら、左側のウィジェットボックスからLabelとHorizontal Layoutをドラッグしてフォームの上に貼り付ける。

Qt Designer_007

メニューの「フォーム→垂直に並べる」を選択してフォーム全体のレイアウトを指定すると、LabelとHorizontal Layoutが縦に並ぶ。

Qt Designer_008

この状態で左側のウィジェットボックスからHorizontal Layoutの中にPush Buttonをドラッグして三個貼り付ける。ボタンは自動的に横に並ぶ。

Qt Designer_009

右側のオブジェクトインスペクタでボタンを選択して、オブジェクト名の部分をダブルクリックしてボタンに名前を付ける。ここでは pushButton_r、pushButton_g、pushButton_b とした。ボタンのtextプロパティでそれぞれに「RED」「GREEN」「BLUE」のボタンテキストも設定する。

Qt Designer_010

オブジェクトインスペクタでFormを選択して、プロパティのminimumSizeを400×100に設定。フォームをリサイズして指定したサイズよりも小さくならない事を確認する。

Qt Designer_011

オブジェクトインスペクタでLabelを選択して、プロパティのfontを適当なサイズに変更。ここではフォントサイズを28に設定した。

Qt Designer_012

最後に三個のボタン全ての autoFillBackground プロパティをON(チェックマークを付ける)にして完了。適当なファイル名を付けて保存する。ここでは QtColorLED.ui という名前で保存した。

保存したファイルは以下のような内容になっている

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>100</height>
   </rect>
  </property>
  <property name="minimumSize">
   <size>
    <width>400</width>
    <height>100</height>
   </size>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <widget class="QLabel" name="label">
     <property name="font">
      <font>
       <pointsize>36</pointsize>
      </font>
     </property>
     <property name="text">
      <string>TextLabel</string>
     </property>
     <property name="alignment">
      <set>Qt::AlignCenter</set>
     </property>
    </widget>
   </item>
   <item>
    <layout class="QHBoxLayout" name="horizontalLayout">
     <item>
      <widget class="QPushButton" name="pushButton_r">
       <property name="autoFillBackground">
        <bool>true</bool>
       </property>
       <property name="text">
        <string>RED</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QPushButton" name="pushButton_g">
       <property name="autoFillBackground">
        <bool>true</bool>
       </property>
       <property name="text">
        <string>GREEN</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QPushButton" name="pushButton_b">
       <property name="autoFillBackground">
        <bool>true</bool>
       </property>
       <property name="text">
        <string>BLUE</string>
       </property>
      </widget>
     </item>
    </layout>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

このuiファイルをRaspberry Piに転送して、とりあえず「表示するだけ」のコードを書いて表示を確認。

Raspberry Pi_019

表示するだけのコードは以下の通り

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
import os
sys.path.append('/usr/lib/python3/dist-packages')
from PySide import QtCore, QtGui
from PySide.QtUiTools import QUiLoader

CURRENT_PATH = os.path.dirname(__file__)

class Window(QtGui.QMainWindow):
    def __init__(self, parent=None):
        super(Window, self).__init__(parent)
        loader = QUiLoader()
        uiFilePath = os.path.join(CURRENT_PATH, 'QtColorLED.ui')
        self.UI = loader.load(uiFilePath)
        self.setCentralWidget(self.UI)

if __name__ == '__main__':
    app = QtGui.QApplication(sys.argv)
    win = Window()
    win.show()
    sys.exit(app.exec_())        

もちろんボタンをクリックしても何も動作しないが、ウィンドウをドラッグしたり、サイズを変えたりすることはできる。次回はこのコードに肉付けして、実際に動作するアプリにしていく予定。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中