株式会社インデペンデンスシステムズ横浜

システム開発エンジニアの西田五郎が運営しております。新規開発案件のご依頼をお待ちしております。

*

Raspberry Piでタッチアプリ開発(その2)Kivyの導入と動作確認

      2017/05/24

Raspberry Piでタッチアプリ開発の2回目です。前回はハードウェア構成や開発環境等の概要的なことを書きました。今回から具体的な内容ですが、まずpythonのNUIライブラリのKivyの導入についてです。

今回のシリーズ一覧です。
Raspberry Piでタッチアプリ開発(その1)ハードウェア構成・開発環境等
Raspberry Piでタッチアプリ開発(その2)Kivyの導入と動作確認
Raspberry Piでタッチアプリ開発(その3)Kivyでレイアウト・ボタン作成
Raspberry Piでタッチアプリ開発(その4)ボタンとGPIOの連動

以下の順番で書きます。
1.Kivyの導入
2.動作確認
3.KivyでのHello World1(pythonのみの場合)
4.KivyでのHello World1(Kv Languageの場合)
5.日本語フォントの指定

※各内容についてより詳細が必要な場合は関連リンク等を参照して下さい。

1.Kivyの導入
ここで導入したのはKivy 1.9.2ですがもう次のバージョンも出ているようです。

以下のページの通りにインストールしました。以下はRaspberry Piでのインストールのページですが、Raspbian JessieとRaspbian Wheezyのインストール方法があります。実際にインストールする場合は間違えないようにして下さい。
User’s Guide » Installation on Raspberry Pi

あと、Using Official RPi touch display の項目がありますのでこれを記述しました。これでマウスも使えるようになりました。

2.動作確認
動作確認としてDemoを動かしてみます。Kivyのインストール先/examples/demo/showcase に移動します。ここで以下を実行します。これが無事に動作すればインストールはとりあえず問題ないと思います。
$ python main.py

以下のような画面が表示されると思います。タッチやマウスもあれば確認して下さい。

3.KivyでのHello World1(pythonのみの場合)
Kivyでは画面を表示させる方法としてpythonのみで記述する方法と、Kv Languageというレイアウトを記述する言語を利用する方法があります。まずは、Pythonのみで記述します。

# -*- coding: utf-8 -*-

import kivy
kivy.require('1.9.2')

from kivy.app import App
from kivy.uix.label import Label

class MyApp(App):

    def build(self):
        return Label(text='Hello World!', font_size ='48sp')

if __name__ == '__main__':
    MyApp().run()

以下のように表示されます。ラベル1つを表示させています。

Kivyアプリケーションは、Appクラスを利用して作成します。このAppクラスに、Tree構造のWidgetが存在してグラフィックスが構成されます。上のプログラムでは、MyAppというクラスが定義されていてWidgetクラスは出てきていないですが、buildでラベル一つが生成されています。

4.KivyでのHello World1(Kv Languageの場合)
Kv Languageを使ってみます。Kv Languageを使う場合もPythonファイル内に記述する方法と別のファイルに記述する方法があります。ここでは別のファイルに記述します。

hellokv.kvというファイル名で以下を記述します。

#-*- coding: utf-8 -*-T

Label:
    font_size:'32sp'
    text: 'Hello KV World!'

hellokv.pyというファイル名で以下を記述します。

#-*- coding: utf-8 -*-
from kivy.app import App

class HelloKVApp(App):
    pass

if __name__ == '__main__':
    HelloKVApp().run()

レイアウトファイルのファイル名に規約があるようで、この場合はPythonファイルでHelloKVAppというクラスになっていて、このAppから前のクラス名を全て小文字にしたhellokv.kvとファイルをレイアウトファイルとして認識するようです。これが対応出来ていないと何も表示されません。

ファイル名を指定する場合は以下のように指定出来ます。
from kivy.lang import Builder
Builder.load_file(‘path/to/filename.kv’)

ファイルではなく文字列でpythonファイル内に記述する場合は以下のように記述出来ます。
from kivy.lang import Builder
Builder.load_string(“””Appクラス名やレイアウト内容”””)

以下のように表示されました。

私の場合ですが、このようにレイアウトはKv Languageを使ってPythonとは別のファイルに記述するという方法が分かりやすいかなと思ったのでここからはこの方法を利用します。

5.日本語フォントの指定
日本語を表示する場合は、今回の環境ではフォント名を指定する必要があります。その方法についてです。ここでは、「Takaoフォント」(IPA フォントからの派生フォント)を使ってみます。

Takaoフォントのインストール
以下でインストールします。
$ sudo apt-get install fonts-takao

インストールされた場所を確認します。
$ fc-list | grep takao

以下が表示されました。

この中でTakao Pゴシックを使ってみます。kvファイルでこのフォントを指定します。

#-*- coding: utf-8 -*-

Label:
    font_size:'32sp'
    font_name: '/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf'
    text: '日本語を表示'

以下のように表示されました。

Widgetのデフォルトのフォントという意味で以下の指定が出来ます。

#-*- coding: utf-8 -*-

<Widget>:
    font_name: '/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf'

<MyWidget>:
Label:
    font_size:'36sp'
    text: '日本語を表示'

以上で何とか導入まで出来たということにして、今回はここまでにします。次回は実際のアプリのレイアウトについて書きます。

Kivy関連リンク
公式サイト
Python Kivyの使い方① ~Kv Languageの基本~
PythonのGUIライブラリKivyによるクロスプラットフォームGUIアプリ作成入門
kivy_samples




 - Raspberry Pi

AdSense

AdSense

  関連記事

Raspberry PiでIoT(温度・湿度・気圧データ編 その1)BME280でデータ取得

Raspberry PiでIoTに取り組んでみるという内容で実際に動作させながら …

Raspberry Pi 3でのコンソールケーブル利用と初期設定

Raspberry Pi 3 でコンソールケーブルを利用する方法と初期設定につい …

Raspberry Piでタッチアプリ開発(その4)ボタンとGPIOの連動

Raspberry Piでタッチアプリ開発の4回目です。前回作成したレイアウトと …

無線マイコン ToCoStick(トコスティック)をRaspberry Piで使ってみた

無線マイコンの ToCoStick(トコスティック)をRaspberry Piで …

Raspberry Piでタッチアプリ開発(その3)Kivyでレイアウト・ボタン作成

Raspberry Piでタッチアプリ開発の3回目です。前回はKivyの導入につ …

Raspberry PiでIoT(温度・湿度・気圧データ編 その3)データ表示とグラフ表示

Raspberry PiでIoT 温度・湿度・気圧データ編の3回目です。前回まで …

Raspberry PiでAvahi を使ってホスト名でアクセスする

Raspberry PiでAvahiを使ってホスト名でのアクセスを可能にする方法 …

Node.jsでRaspberryPiのGPIOを使う(その1)デバイスドライバでLED

Node.jsでRaspberryPiのGPIOを使ってみます。今回はデバイスド …

温度センサADT7410(その3)Raspbery Piでの利用

温度センサADT7410の3回目です。前回までの内容は以下です。 温度センサAD …

温度センサADT7410(その1)i2C通信とは

温度センサのADT7410を使ってみます。ADT7410はアナログ・デバイセズ社 …