デザインのメモ

ロゴやフォント、フォトショ・イラレのお話をします

wxPython(Phoenix)で始めるGUIプログラミング【ラベル】

この記事について

こちらにまとめられています。

nippori30.hatenablog.com

今回、何をするか?

ラベルを利用して文字を表示してみたいと思います!

とりあえず動かしてみよう!

文字を2種類の方法で表示してみましょう。

# app.py
import wx


class MyApp(wx.Frame):

    def __init__(self, *args, **kw):
        super(MyApp, self).__init__(*args, **kw)

        self.init_ui()

    def init_ui(self):
        self.SetTitle('ラベル')
        self.SetSize((400, 300))
        self.Show()

        panel_ui = wx.Panel(self, -1, pos=(50, 50), size=(300, 200))

        label_jp = wx.StaticText(panel_ui, -1, 'こんにちは。', pos=(10, 10))
        label_en = wx.StaticText(panel_ui, -1, '', pos=(10, 50))
        label_en.SetLabel('Hello.')


app = wx.App()
MyApp(None)
app.MainLoop()

次のように実行するとこのような画面ができるはずです。

> pythonw app.py

f:id:nippori30:20170916082837p:plain

解説

        label_jp = wx.StaticText(panel_ui, -1, 'こんにちは。', pos=(10, 10))

文字を表示するにはStaticText()を使います。
引数はStaticText(親, ID, テキスト, 場所)です。親、ID、場所は、前回のパネルの時と同様で、テキストに表示させる文字を入れます。

        label_en = wx.StaticText(panel_ui, -1, '', pos=(10, 50))
        label_en.SetLabel('Hello.')

こちらは、後から文字を入れる方法です。
SetLabel()を使うことで、ラベルの文字を更新することができます。

以上です。

次回

ボタンを設置して、何かを実行できるようにしましょう。

wxPython(Phoenix)で始めるGUIプログラミング【パネル】

この記事について

こちらにまとめられています。

nippori30.hatenablog.com

今回、何をするか?

パネルを利用して、ウインドウの中を分割してみたいと思います!

とりあえず動かしてみよう!

赤い背景の上に、緑の領域と、青い領域を作ってみたいと思います。

# app.py
import wx


class MyApp(wx.Frame):

    def __init__(self, *args, **kw):
        super(MyApp, self).__init__(*args, **kw)

        self.init_ui()

    def init_ui(self):
        self.SetTitle('タイトル')
        self.SetBackgroundColour((255, 0, 0))
        self.SetPosition((200, 100))
        self.SetSize((400, 300))
        self.Show()

        panel_G = wx.Panel(self, -1, pos=(10, 10), size=(180, 260))
        panel_G.SetBackgroundColour((0, 255, 0))

        panel_B = wx.Panel(self, -1)
        panel_B.SetBackgroundColour((0, 0, 255))
        panel_B.SetPosition((210, 10))
        panel_B.SetSize((180, 260))


app = wx.App()
MyApp(None)
app.MainLoop()

次のように実行するとこのような画面ができるはずです。

> pythonw app.py

f:id:nippori30:20170916050841p:plain

解説

前回からの変更点のみを解説していきます。

        panel_G = wx.Panel(self, -1, pos=(10, 10), size=(180, 260))
        panel_G.SetBackgroundColour((0, 255, 0))

まず、緑のパネルを作ります。今回はパネルの引数にPanel(親, ID, 場所, 大きさ)を指定しました。
親は、パネルを表示する土台を設定します。今回はウインドウに直に置くのでselfとします。パネルを重ねる時は、重ねる元のパネルを親にします。
IDは、パネルなどの識別子として使いますが、特に必要がない限りデフォルトの-1と設定しておけば良いでしょう。
場所は、親からの相対座標となります。ただし、注意しなければならないのが、ウインドウサイズにはタイトルバーの大きさも含まれるのですが、ウインドウを親とした時の座標は描画領域の左上が原点になるということです。言葉では分かりにくいので、図を用意しました。(分かりにくかったらすいません。。。)
f:id:nippori30:20170916050940p:plain

        panel_B = wx.Panel(self, -1)
        panel_B.SetBackgroundColour((0, 0, 255))
        panel_B.SetPosition((210, 10))
        panel_B.SetSize((180, 260))

こちらは、青のパネルを作ります。
先ほどよりもPanel()の引数が少ないですが、そのあとに、ウインドウの時と同じように場所や大きさを指定しています。

Panel()に引数として渡しても、後から設定してもできるので、好みの方で自由にパネルを作ってみましょう。

次回

ウインドウに文字を表示するために、ラベルを作ります。

wxPython(Phoenix)で始めるGUIプログラミング【ウインドウの設定 - 2】

この記事について

こちらにまとめられています。

nippori30.hatenablog.com

今回、何をするか?

前回と見栄えは変わりませんが、コードを今後のために整理しましょう!

とりあえず動かしてみよう!

出力画面は前回と同じです。

# app.py
import wx


class MyApp(wx.Frame):

    def __init__(self, *args, **kw):
        super(MyApp, self).__init__(*args, **kw)

        self.init_ui()

    def init_ui(self):
        self.SetTitle('タイトル')
        self.SetBackgroundColour((255, 0, 0))
        self.SetPosition((200, 100))
        self.SetSize((400, 300))
        self.Show()


app = wx.App()
MyApp(None)
app.MainLoop()

次のように実行するとこのような画面ができるはずです。

> pythonw app.py

f:id:nippori30:20170916015249p:plain

解説

前回からの変更点のみを解説していきます。

class MyApp(wx.Frame):

今回からは、Frameをオーバーライドした、独自のクラスを設定して、それをいじっていきます。

    def __init__(self, *args, **kw):
        super(MyApp, self).__init__(*args, **kw)

        self.init_ui()

上2行はオーバーライドの設定で、self.init_ui()は次に作る、画面の初期設定を行う関数を実行するためのものです。

    def init_ui(self):
        self.SetTitle('タイトル')
        self.SetBackgroundColour((255, 0, 0))
        self.SetPosition((200, 100))
        self.SetSize((400, 300))
        self.Show()

ここで、前回まで行っていた設定を行うことにします。

MyApp(None)

独自で作ったクラスのインスタンスを作ります。

これで動作は前回と同じですが、今後、複雑になっていくことに備え、コードを整理することができました。

次回

ウインドウの中に、しきりを作って、パート訳をしていきましょう。

wxPython(Phoenix)で始めるGUIプログラミング【ウインドウの設定 - 1 】

この記事について

こちらにまとめられています。

nippori30.hatenablog.com

今回、何をするか?

前回はウインドウをただ、立ち上げただけなので、ウインドウに、色やタイトル、大きさなどの設定を加えていきましょう!

とりあえず動かしてみよう!

赤く、縦 300px、横 400pxの「タイトル」というウインドウを立ち上げてみましょう。

# app.py
import wx

app = wx.App()

frame = wx.Frame(None, -1)
frame.SetTitle('タイトル')
frame.SetBackgroundColour((255, 0, 0))
frame.SetPosition((200, 100))
frame.SetSize((400, 300))

frame.Show()

app.MainLoop()

次のように実行するとこのような画面ができるはずです。

> pythonw app.py

f:id:nippori30:20170916015249p:plain

解説

前回からの変更点のみを解説していきます。

frame.SetTitle('タイトル')

SetTitle()はウインドウタイトルを設定するメソッドです。
これがウインドウのタイトルとなります。

frame.SetBackgroundColour((255, 0, 0))

SetBackgroundColour()は背景色を設定するメソッドです。
(R, G, B)を指定します。

frame.SetPosition((200, 100))

SetPosition()はウインドウの起動位置を設定するメソッドです。
(横, 縦)を指定します。

frame.SetSize((400, 300))

SetSize()はウインドウサイズを設定するメソッドです。
(横, 縦)を指定します。

これらをまとめると、「タイトル(‘タイトル’)」という、「画面の左上(SetPosition())」の方に「400x300(SetSize())」の「赤い(SetBackgroundColour())」ウインドウが立ち上がるようになります。

次回

ウインドウに装飾を増やしていくことに備え、ウインドウ用に一つクラスを作りましょう。

wxPython(Phoenix)で始めるGUIプログラミング【基礎の基礎】

この記事について

こちらにまとめられています。

nippori30.hatenablog.com

とりあえず起動してみよう!

何もない、いたってシンプルなウインドウを立ち上げてみましょう。

# app.py
import wx

app = wx.App()

frame = wx.Frame(None, -1)
frame.Show()

app.MainLoop()

実行の際に注意するべきことが一つあります。
macOSで実行する際に通常のPythonで実行すると以下のようなエラーが発生します。

> python app.py
This program needs access to the screen. Please run with a
Framework build of python, and only when you are logged in
on the main display of your Mac.

*追記 フレームワーク化している環境であれば、pythonで実行できるっぽいです。仮想環境などではpythonwを使いましょう。
そのため、wxPython(Phoenix)をmacOS上で使うにはPythonwを使います。

> pythonw app.py

とすることで、実行ができます。
結果は、
f:id:nippori30:20170915114425p:plain
このような、何もないウインドウが立ち上がれば、成功です。

解説

import wx

まず必要なwxPython(Phoenix)を読み込みます。

app = wx.App()

そして、アプリケーションを作成します。

frame = wx.Frame(None, -1)
frame.Show()

ウインドウを作成し、表示させます。

app.MainLoop()

画面の更新などを行うためにループを設定します。

以上で、今回のコードは終了です。

次回

次はウインドウのサイズやタイトル、など、ウインドウ自体の設定を変えていきましょう。

wxPython(Phoenix)で始めるGUIプログラミング

この記事について

Pythonで使えるGUIライブラリのwxPython(Phoenix)の使い方を、何度かに渡って書く予定なので、それの目次となるページです。

目次

・wxPython(Phoenix)で始めるGUIプログラミング (このページ)
wxPython(Phoenix)で始めるGUIプログラミング【準備編】
wxPython(Phoenix)で始めるGUIプログラミング【基礎の基礎】
wxPython(Phoenix)で始めるGUIプログラミング【ウインドウの設定 - 1 】
wxPython(Phoenix)で始めるGUIプログラミング【ウインドウの設定 - 2 】
wxPython(Phoenix)で始めるGUIプログラミング【パネル】
wxPython(Phoenix)で始めるGUIプログラミング【ラベル】
wxPython(Phoenix)で始めるGUIプログラミング【ボタン】
wxPython(Phoenix)で始めるGUIプログラミング【テキストボックス】
wxPython(Phoenix)で始めるGUIプログラミング【画像】
wxPython(Phoenix)で始めるGUIプログラミング【ラジオボタン】

今後の予定

特に予定はないので、何か扱ってほしいテーマがあればコメントをください。

wxPythonドキュメント

https://wxpython.org/Phoenix/docs/html/index.html