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

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

Raspberry Pi

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

投稿日:2017年5月18日 更新日:

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の処理を追加します。

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


AdSense

AdSense

-Raspberry Pi

執筆者:

関連記事

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

(※2021/05/02追記 現時点で最新版のRaspberry PI OSでモニターとキーボードなしで導入する手順を書きました。ぜひこちらを見て下さい。) Raspberry Piをモニターとキーボ …

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

無線マイコンの ToCoStick(トコスティック)のシリアル通信専用アプリを使ってみました。ToCoStickとはパソコン等のUSBに接続して無線通信が出来るモジュールです。メーカの製品ページは以下 …

Remote.itを利用してRaspberry Piを公開する

remote.itを利用してRaspberry Piをインターネットに公開する方法についてです。 公開するとは文字通り何かのサービスを実装したサーバーとして利用するとか、リモートでメンテナンスするとか …

感染症対策のためのIoT技術(その4)WebRTCを利用したリモート関連システム

感染症対策のためのIoT技術について書いています。今回はWebRTC(Web Real-Time Communication)を利用したリモート関連システムについてです。リモート関連システムとは具体的 …

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

温度センサのADT7410を使ってみます。ADT7410はアナログ・デバイセズ社の製品ですが、実際には以下の秋月さんのモジュールを使います。 ADT7410使用 高精度・高分解能 I2C・16Bit …