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

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

*

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 でコンソールケーブルを利用する方法と初期設定につい …

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

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

Raspberry Piでタッチスクリーン付3.5インチTFTを使ってみた

Raspberry Piでタッチスクリーン付モニタを使ってみました。PiScre …

Raspberry PiでIoT(MQTTで遠隔操作編 その3)Raspberry PiのGPIOとHeroku連動Sub編

Raspberry PiでIoT MQTTで遠隔操作編の3回目です。2台のRas …

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

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

無線マイコン ToCoStickのシリアル通信専用アプリを使ってみた

無線マイコンの ToCoStick(トコスティック)のシリアル通信専用アプリを使 …

Raspberry PiでIoT(MQTTで遠隔操作編 その1)MQTTでの通信

Raspberry PiでIoTのMQTTで遠隔操作編のシリーズを始めます。実際 …

Raspberry Piでも温度センサADT7310をつかってみる

以下の記事でArduino Unoで温度センサのADT7310を使ってみました。 …

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

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

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

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