Raspberry Piでタッチアプリ開発(その3)Kivyでレイアウト・ボタン作成 – 株式会社インデペンデンスシステムズ横浜

Raspberry Piでタッチアプリ開発の3回目です。前回はKivyの導入について書きました。今回は具体的なレイアウトとボタンを配置してみます。以下のレイアウトについて順番に書きます。Kivyでのレイアウト全てについて書けませんので、必要な場合はページ最後の関連リンク等を参照して下さい。

(※2021/05/24 追記現時点でのKivy2.0.0の導入について以下に投稿しました。ぜひこちらを参照して下さい。
Raspberry PiでKivy2.0.0を導入する
2021/05/24 追記ここまで）

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

以下の順番で書きます。
1.今回のレイアウト全体とプログラム
2.widgetとcanvas
3.BoxLayoutとLabel
4.BoxLayoutとButton
5.Buttonのコールバック

1.今回のレイアウト全体とプログラム
レイアウトが以下です。

#-*- coding: utf-8 -*-
<Widget>:
    font_name: '/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf'
 
<BtnWidget>:
    canvas:
        Color:
            rgb: (0.55, 0.55, 0.55)
        Rectangle:
            pos: self.pos
            size: self.size
 
    BoxLayout:
        orientation: 'vertical'
        pos: root.pos
        size: root.size
 
        Label:
            text: 'Raspberry Piでタッチアプリ'
            color: 0,0,1,1
            font_size:'40sp'
            size_hint_y: 0.2
            canvas.before:
                Color:
                    rgba: 0.55, 0.69, 0.97, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
        Label:
            text: 'GPIOでリレーのオンとオフ'
            font_size:'32sp'
            size_hint_y: 0.3
 
        BoxLayout:
            orientation: 'horizontal'
            padding: 40,40,40,40
            spacing: 20
            size_hint: 1.0, 1.0
 
            Button:
                id: btnOff
                text: 'リレーをオフ'
                background_normal:''
                background_color: 0.75,0.75,0.75,1
                font_size: 40
                on_press: root.off()
 
            Button:
                id: btnOn
                background_normal:''
                background_color: 1,0,0,0.4
                text: 'リレーをオン'
                font_size: 40
                on_press: root.on()

プログラムが以下です。GPIOの操作を想定していますが、ここでは単にボタンの色を変更しているだけです。

# -*- coding: utf-8 -*-
 
from kivy.app import App
from kivy.uix.widget import Widget
 
class BtnWidget(Widget):
 
    def on(self):
        print('on!')
        self.ids['btnOn'].background_color = 0.95, 0.30, 0.15, 1.0
 
    def off(self):
        print('off!')
        self.ids['btnOn'].background_color = 1, 0, 0, 0.4
 
class GpioApp(App):
 
    def build(self):
        return BtnWidget()
 
if __name__ == '__main__':
    GpioApp().run()

2.widgetとcanvas
<Widget>:がwidgetの基底クラスの設定で前回書いた全体のフォントを指定しています。

<BtnWidget>:がルートウィジェットの定義で実際のレイアウトです。
canvas:でまず全体をグレーに描画します。

部分的に上から順番に書いて描画を確認すると分かりやすいかもしれないです。

3.BoxLayoutとLabel
BoxLayout:の’vertical’を指定してLabel:を並べています。
上のLabel:では背景を青系の色に描画しています。canvas.boforeは更新前(描画前)です。beforeにすることによってラベルの文字が表示されます。

size_hint_y:が高さの割合です。20%と30%の割合になるように指定しています。

4.BoxLayoutとButton
更に、BoxLayout:の’horizontal’でボタンの領域を定義しています。そこにボタンを2個並べています。

ボタンのサイズを size_hint: 1.0, 1.0 で指定しているので、結局はスクリーンショットの配置になりました。
あと、background_normal:” ですがこれを指定しないとデフォルトのグレー系の色と混ざります。そうすると濁るのでこれを指定しています。

その他は、idの指定やテキスト、コールバックの指定等です。

5.Buttonのコールバック
ボタンのコールバックは、on_press: root.off()とon_press: root.on()です。
プログラムの方の off()とon()です。

ここではボタンの色を変更しています。

レイアウトのファイル名を gpio.py として、レイアウトのファイルを gpio.kv とします。これで、レイアウトファイルを関連付けます。それで、python gpio.py を実行した状態が上のスクリーンショットです。

その状態で「リレーをオン」のボタンをタッチ（クリック）すると以下のように色が変わります。「リレーをオフ」をタッチ（クリック）すると元の色に戻ります。

この処理では、GPIOは全く操作していないので、その処理を追加すれば実際に動作します。次回にそのGPIOの処理を追加します。