デザインのメモ

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

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.SetSize((400, 300))
        self.Show()

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

        image = wx.Image('sample.png')
        bitmap = image.ConvertToBitmap()

        wx.StaticBitmap(panel_ui, -1, bitmap, pos=(0, 0), size=image.GetSize())


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

はじめに、app.pyと同じフォルダにこの画像をsample.pngという名前で保存します。
f:id:nippori30:20171003111305p:plain
そして、app.pyを実行します。

> pythonw app.py

すると、このような星の画像が表示されるはずです。
f:id:nippori30:20171003111326p:plain

解説

        image = wx.Image('sample.png')
        bitmap = image.ConvertToBitmap()

Imageは画像を開く関数です。ここでは画像の場所を指定するため、同じフォルダの「sample.png」を選択してあげます。
しかし、このままではwxPythonで表示できる形式ではないので、表示できるようにbitmap形式に変換する必要があります。
それが二行目のConvertToBitmap()です。

        wx.StaticBitmap(panel_ui, -1, bitmap, pos=(0, 0), size=image.GetSize())

StaticBitmap()は画像を表示するための関数で、第三引数に表示する画像を渡します。
sizeにしているGetSize()ですが、これは画像サイズを取得して、原寸で表示するために、このように指定しています。

以上です。

次回

ラジオボタンを設置しましょう

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.SetSize((400, 300))
        self.Show()

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

        self.label = wx.StaticText(panel_ui, -1, '', pos=(10, 10))

        self.box = wx.TextCtrl(panel_ui, -1, pos=(10, 50))

        btn = wx.Button(panel_ui, -1, 'コピー', pos=(10, 90))
        btn.Bind(wx.EVT_BUTTON, self.clicked)

    def clicked(self, event):
        text = self.box.GetValue()
        self.box.Clear()
        self.label.SetLabel(text)


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

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

> pythonw app.py

f:id:nippori30:20170923232659p:plain
ここで、ボタンを押すと、テキストボックス内の文字が表示され、テキストボックスが空に戻るはずです。

解説

        self.box = wx.TextCtrl(panel_ui, -1, pos=(10, 50))

テキストボックスを作るにはにはTextCtrl()を使います。
引数はラベルやボタンなどと同じです。

        text = self.box.GetValue()
        self.box.Clear()

1行目のGetValue()はテキストボックの内容を取得してくれるメソッドです。
2行目のClear()はテキストボックの中身を消して、空にしてくれるメソッドです。
Clear()は内容を残しておきたい場合は無くしてしまって構いません。

以上です。

次回

画像を表示してみましょう。

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.SetSize((400, 300))
        self.Show()

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

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

        btn = wx.Button(panel_ui, -1, '変換', pos=(10, 50))
        btn.Bind(wx.EVT_BUTTON, self.clicked)

    def clicked(self, event):
        self.label.SetLabel('Hello.')


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

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

> pythonw app.py

f:id:nippori30:20170916085151p:plain
ここで、ボタンを押すと、「こんにちは。」が「Hello.」に変わります。

解説

        btn = wx.Button(panel_ui, -1, '変換', pos=(10, 50))

ボタンを作るにはにはButton()を使います。
引数はラベルで使ったStaticText()と全く同じです。

        btn.Bind(wx.EVT_BUTTON, self.clicked)

Bind()を使うことによって、ボタンにアクションを紐づけることができます。引数はBind(きっかけ, アクション)です。
今回は「wx.EVT_BUTTON(ボタンがクリックされた)」というきっかけで、「self.clicked(clicked()関数を呼び出す)」というアクションを起こします。

    def clicked(self, event):
        self.label.SetLabel('Hello.')

先ほどBind()で出てきたclicked()関数を作ります。
内容は今回はラベルの変更ですが、変えればなんでもできます。

以上です。

次回

テキストボックスを設置して、何か入力を得ましょう。

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()に引数として渡しても、後から設定してもできるので、好みの方で自由にパネルを作ってみましょう。

次回

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