デザインのメモ

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

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()関数を作ります。
内容は今回はラベルの変更ですが、変えればなんでもできます。

以上です。

次回

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