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

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

*

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

      2017/05/24

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

シリーズ一覧です。
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の処理を追加します。

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




 - Raspberry Pi

AdSense

AdSense

  関連記事

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

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

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

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

Raspberry Piをモニターとキーボードなしで導入する(その3)コンソールを使う

(※2017/02/19 最新の情報は以下です。) Raspberry Pi 3 …

Raspberry PiでC言語版Lチカを試す(その2)レジスタを操作する

Raspberry PiでC言語を使ったLEDの点灯、消灯(いわいるLチカ)を試 …

Raspberry PiのPL2303内蔵コンソールケーブルのWindows8.1の対応について

Raspberry PiのコンソールケーブルでProlific社のUSBシリアル …

Raspberry Pi 3でモニタとキーボードなしで設定する方法

Raspberry Pi 3でモニタとキーボードなしで設定する方法についてです。 …

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

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

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

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

Raspberry PiでC言語版Lチカを試す(その1)デバイスドライバ利用

Raspberry PiでC言語を使ったLEDの点灯、消灯(いわいるLチカ)を試 …

Raspberry Piをモニターとキーボードなしで導入する(その1)SSHでのログインまで

Raspberry Piをモニターとキーボードなしで導入する方法についてです。 …