「Kivy」ではじめるPythonプログラミング―グラフィックライブラリでアニメーションを表現! (I・O BOOKS)
- 作者: 清水美樹
- 出版社/メーカー: 工学社
- 発売日: 2013/11
- メディア: 単行本
- この商品を含むブログ (1件) を見る
目次
- 目次
- はじめに
- Windowを作る
- アクションバーを作る
- テキスト入力ボックスを作る
- スライダーUIを作る
- チェックボックスのUIを作る
- matplotlibのグラフをkivyの一部として利用する
- 参考資料
はじめに
先日、
PythonのマルチプラットフォームGUIライブラリである
Kivyを紹介しましたが、
今回は、Kivyによる基本的なGUIシステムの
作り方を紹介したいと思います。
また、この記事で紹介するすべてのサンプルコードは
下記のGitHubリポジトリでも公開されています。
また、下記のそれぞれのサンプルコードを、
Mac, Ubuntu, iOS(iPhone)で実行した
スクリーンショットも貼りました。
Windowを作る
もっとシンプルなサンプルとしては、
下記のコードで、上記のような
ウインドウタイトルと一つのラベルのみの
Windowを作ることができます。
from kivy.app import App from kivy.uix.button import Label from kivy.config import Config #Window sizeの設定 Config.set('graphics', 'width', '200') Config.set('graphics', 'height', '200') class TestApp(App): def build(self): self.title = 'Window Sample' self.icon = 'images.jpg' return Label(text='Hello World') TestApp().run()
また、iconメンバーに画像データを設定することで、
アプリのアイコンを設定することもできます。
(なぜかubuntuではアイコンがPythonのアイコンのままでした。。)
アクションバーを作る
下記のコードを実行すると、
PyQtのメニューバーに似た、
アクションバーを追加することができます。
デザインが結構かっこいいなと思います。
よく使う機能などをこのアクションバーに割り当てると便利です。
from kivy.app import App from kivy.uix.button import Label,Button from kivy.config import Config from kivy.uix.actionbar import ActionBar, ActionItem, ActionButton, ActionView, ActionPrevious, ActionGroup from kivy.uix.floatlayout import FloatLayout Config.set('graphics', 'width', '200') Config.set('graphics', 'height', '200') class MyActionBar(): def __init__(self): actionview = ActionView() actionview.use_separator=True ap = ActionPrevious(title='Action Bar', with_previous=False) actionview.add_widget(ap) self.abtn1=ActionButton(text="Btn1") self.abtn1.bind(on_press=self.ActionBtn1Callback) actionview.add_widget(self.abtn1) self.abtn2=ActionButton(text="Btn2") self.abtn2.bind(on_press=self.ActionBtn2Callback) actionview.add_widget(self.abtn2) self.abtn3=ActionButton(text="Btn3",icon="images.jpg") self.abtn3.bind(on_press=self.ActionBtn3Callback) actionview.add_widget(self.abtn3) group1=ActionGroup() self.abtn4=ActionButton(text="Btn4") self.abtn4.bind(on_press=self.ActionBtn4Callback) group1.add_widget(self.abtn4) self.abtn5=ActionButton(text="Press Me!!!!") self.abtn5.bind(on_press=self.ActionBtn5Callback) group1.add_widget(self.abtn5) actionview.add_widget(group1) self.actionbar=ActionBar() self.actionbar.add_widget(actionview) def ActionBtn1Callback(self,instance): print("Btn1 press!!") def ActionBtn2Callback(self,instance): print("Btn2 press!!") def ActionBtn3Callback(self,instance): print("Btn3 press!!") def ActionBtn4Callback(self,instance): print("Btn4 press!!") def ActionBtn5Callback(self,instance): print("Btn5 press!!") class RootWidget(FloatLayout): def __init__(self, **kwargs): # make sure we aren't overriding any important functionality super(RootWidget, self).__init__(**kwargs) # let's add a Widget to this layout self.add_widget( Button( text="Hello World", size_hint=(.5, .5), pos_hint={'center_x': .5, 'center_y': .5})) self.myactionbar=MyActionBar() self.add_widget( self.myactionbar.actionbar ) class TestApp(App): def build(self): self.root = root = RootWidget() self.title = 'Window Sample' self.icon = 'images.jpg' return self.root TestApp().run()
テキスト入力ボックスを作る
下記のコードを実行すると、
テキストボックス入力のUIを作ることができます。
下記のサンプルでは、
Clock.schedule_intervalを使って、
1秒毎に時刻のデータをテキストボックスに描画するようにしています。
残念ながら、
一行だけのテキストボックスを作る方法がわかりませんでした。
#!/usr/bin/python # -*- coding: utf-8 -*- from kivy.app import App from kivy.uix.button import Label,Button from kivy.config import Config from kivy.uix.boxlayout import BoxLayout from kivy.uix.textinput import TextInput from kivy.clock import Clock from datetime import datetime #Window sizeの設定 Config.set('graphics', 'width', '400') Config.set('graphics', 'height', '400') class RootWidget(BoxLayout): def __init__(self, **kwargs): super(RootWidget, self).__init__(padding=30, orientation='vertical') self.label=Label(text="Time Display") self.add_widget(self.label) Clock.schedule_interval(self.TimerCallback, 1.0) self.textinput = TextInput(text='Hello world', multiline=False) self.add_widget(self.textinput) def TimerCallback(self,dt): time=datetime.now().strftime("%Y/%m/%d %H:%M:%S") self.textinput.text=time class TestApp(App): def build(self): self.root = RootWidget() self.title = 'Text Input Sample' return self.root TestApp().run()
スライダーUIを作る
下記がスライダーUIを使ったサンプルコードです。
スライダーが移動された時に、
Callback関数を呼んで、
Labelにスライダーの値を表示させています。
from kivy.app import App from kivy.uix.button import Label,Button from kivy.config import Config from kivy.uix.boxlayout import BoxLayout from kivy.uix.slider import Slider #Window sizeの設定 Config.set('graphics', 'width', '200') Config.set('graphics', 'height', '200') class RootWidget(BoxLayout): def __init__(self, **kwargs): super(RootWidget, self).__init__(padding=50) self.label=Label(text="Please slide the slider") self.add_widget(self.label) self.slider = Slider(min=-100, max=100, value=25) self.slider.bind(value=self.callback) self.add_widget(self.slider) def callback(self,instance,value): self.label.text=str(value) class TestApp(App): def build(self): self.root = root = RootWidget() self.title = 'Slider Sample' return self.root TestApp().run()
チェックボックスのUIを作る
下記はチェックボックスを作るサンプルコードです。
checkbox.valueの値から、
チェックボックスの状態を確認することができます。
#!/usr/bin/python # -*- coding: utf-8 -*- from kivy.app import App from kivy.uix.button import Label,Button from kivy.config import Config from kivy.uix.gridlayout import GridLayout from kivy.uix.checkbox import CheckBox from kivy.core.window import Window Window.clearcolor = (0.7, 0.7, 0.7, 0.7) class RootWidget(GridLayout): def __init__(self, **kwargs): super(RootWidget, self).__init__(cols=2) self.label=Label(text="Check 1") self.add_widget(self.label) self.checkbox = CheckBox() self.checkbox.bind(active=self.on_checkbox_active) self.add_widget(self.checkbox) self.label=Label(text="Check 2") self.add_widget(self.label) checkbox1 = CheckBox() self.add_widget(checkbox1) self.label=Label(text="Check 3") self.add_widget(self.label) checkbox3 = CheckBox() self.add_widget(checkbox3) def on_checkbox_active(self, checkbox, value): if value: print('The checkbox', checkbox, 'is active') else: print('The checkbox', checkbox, 'is inactive') class TestApp(App): def build(self): self.root = RootWidget() self.title = 'Text Input Sample' return self.root TestApp().run()
matplotlibのグラフをkivyの一部として利用する
pythonのグラフ作成ライブラリmatplotlibは
グラフ作成に非常に便利です。
このkivyのアドオン管理ツールである、
kivy gardenを使うことにより、
簡単にmatplotlibのグラフをkivyのwidgetの一部として
GUIツールの一部に組み込むことができます。
まず初めに、下記のコマンドでkivy gardenをインストールし、
$ pip install kivy-garden
gardenコマンドでmatplotlibとkivyを繋ぐアドオンをインストールします。
$ garden install matplotlib
あとは、下記のサンプルを起動すると、
冒頭のようなmatplotlibのグラフを
kivyの一部として組み込むことができます。
from kivy.app import App from kivy.uix.boxlayout import BoxLayout from kivy.uix.label import Label from kivy.config import Config import numpy as np import matplotlib matplotlib.use('module://kivy.garden.matplotlib.backend_kivy') import matplotlib.pyplot as pl import sys, os class GraphView(BoxLayout): def __init__(self, **kwargs): super(GraphView, self).__init__(orientation='vertical') self.add_widget(Label(text="embeded matplotlib sample")) self.add_widget(self.graph_plot_sample()) def graph_plot_sample(self): self.fig, ax = pl.subplots() x = np.linspace(-np.pi, np.pi) y = np.sin(x) ax.set_xlabel("X label") ax.set_ylabel("Y label") ax.grid(True) ax.plot(x, y) return self.fig.canvas class GraphApp(App): def build(self): height = 300 Config.set('graphics', 'height', height) Config.set('graphics', 'width', height * 2) return GraphView() if __name__ == '__main__': GraphApp().run()
下記のコードを参考にさせて頂きました。
参考資料
「Kivy」ではじめるPythonプログラミング―グラフィックライブラリでアニメーションを表現! (I・O BOOKS)
- 作者: 清水美樹
- 出版社/メーカー: 工学社
- 発売日: 2013/11
- メディア: 単行本
- この商品を含むブログ (1件) を見る