Python

Kivyで顔認証アプリ制作①基本操作編(タッチパネル反応しない...)

スポンサーリンク

こんにちは!まっきーです(@makky_study

Kivyを使って簡単なアプリを作成していこうと思います。

今回は第一弾ということで簡単な使い方を確認していきます!

本記事の内容

  • Kivyの仕組みを簡単に説明
  • Kivyの使い方
  • 日本語フォント設定方法
  • タッチパネルが反応しない問題を解決

Kivyのインストール方法はラズパイにKivy(1.11.1)をインストールする方法にまとめてありますので、インストールがまだの方は先にインストールしてしまいましょう!

使用機器

  • RaspberryPi 3B+
  • ラズパイタッチディスプレイ

基本的な操作方法

kivyでは.kvという拡張子のファイルにKivy言語(CSSのようなもの)を記述して書くのが一般的です。

レイアウトは.kv(kivy言語)、機能は.py(Python)と

Kv Languageを使用することでレイアウトと機能の記述を分けることができます

また、Kivyはパーツ、レイアウトなどのwidget( グラフィカルユーザインタフェースを構成する部品要素、およびその集まり)を組み合わせてGUIを作成します。

Kivyでアプリを作る際に行うこと

  • Appクラスを継承してサブクラスを作る(Python側)
  • ラベルやボタンなどのレイアウトを追加する(kivy側)

たったこれだけです!

実際にプログラムを動かしてみます。下記のプログラムの実行結果です。

Pythonコード

# 必要なパッケージをインポート
import kivy
from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty,ListProperty
from kivy.core.text import LabelBase,DEFAULT_FONT
# デフォルトに使用するフォントを変更
LabelBase.register(DEFAULT_FONT,'/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf')
# Widgetクラスを継承してTextWidgetというサブクラスを作成
class TextWidget(Widget):
    # kivyのpropertiesはボタンが押された場合に
    # イベントが実行された場合のオブジェクトの属性に値の変更があった場合に実行する仕組み
    text=StringProperty()
    #Color[r,g,b,a] 色の要素はListPropertyに赤、緑、青、透明度というように格納されている
    color=ListProperty([1,1,1,1])
    
    def __init__(self,**kwargs):
        super(TextWidget,self).__init__(**kwargs)
        self.text='はじまり'
    # ボタンが押された時
    def buttonClicked(self):
        # テキストにGoot Morningを格納
        self.text='Good Morning'
        # テキストの色は赤
        self.color=[1,0,0,1]
    def buttonClicked2(self):
        self.text='Good Afternoon'
        self.color=[0,1,0,1]
    def buttonClicked3(self):
        self.text='Good Evening'
        self.color=[0,0,1,1]
#Appクラスは、Kivyアプリを作成するための基本になるクラス。    
#Appクラスを継承してTestAppというサブクラスを作成
class TestApp(App):
    def __init__(self,**kwargs):
        super(TestApp,self).__init__(**kwargs)
        self.title = 'greeting'
    
if __name__=='__main__':
    # .runでプログラムが動作します
    TestApp().run()

Kivy言語

#ファイル名(test.kv)とAppの前の名前(Test)が一致していないといけない
#ボタン表示を実装

TextWidget:
<TextWidget>:
    # Layoutを組み合わせることで複雑なレイアウトを作成することができる   
    BoxLayout:#①ここで画面が2分割
        #orientationで縦一列(vertical)か横一列(horizontal[デフォルト]) 並びを決めることができる
        orientation:'vertical'
        size:root.size

        #ラベルは、Kivyのwedget(グラフィカルユーザーインターフェースを構成する部品要素及びその集まり)の一つ    
        Label:
            #size_hint_y,x:<値>でラベルの位置が変わる
            #Kivyは左下が座標(0,0)
            size_hint_y:0.7
            id:label1
            font_size:68
            text:root.text#root(TextWidget)の変数テキストの値を取得
            color:root.color#root(TextWidget)の色の値を取得
    
       
        BoxLayout:#②ここで下側のレイアウト設定→横並び
            size_hint_y:0.3
            padding:20,30,20,10
            # ボタンウィジェット
            # ラベルのサブクラスなのでラベルで使用したパラメータ使用可能
            Button:
                id:button1
                text:"morning"
                font_size:68
                on_press:root.buttonClicked()#ボタンをクリックしたときにPython側の関数を呼ぶ

            Button:
                id:button2
                text:"day"
                font_size:68
                on_press:root.buttonClicked2()

            Button:
                id:button3
                text:"night"
                font_size:68
                on_press:root.buttonClicked3()

KivyファイルとPythonファイルを結び付けているのは、kivyファイルの名前です。Python側でTestApp(App)、Kivy側でtest.kvとすることが必要です。

クラスの名前が、AbcApp(App)だったとしたら、Kivy側はabc.kvということです(小文字に注意)

基本的な説明についてはPython Kivyの使い方① ~Kv Languageの基本~がめちゃめちゃわかりやすいので是非参考にしてください。

日本語フォントの表示

Python側コードのマーカーが引いてある部分は、日本語フォントを使用するための設定です。

その前に、日本語用のフォントをインストールします。今回はTakaoフォントをインストールします。

# Takaoフォントのインストール
sudo apt-get install fonts-takao
# インストールされた場所を確認します。
fc-list | grep takao

お好きなタイプのパスをコピーして、Pythonコード内に追加して下さい。

タッチパネルが反応しないときの対処法

クリックでは反応するけど、タッチでは反応しない....

というトラブルが発生しましたので色々調べて、解決方法を見つけました!

以下の方法で試してみてください!

①ディスプレイ環境の設定

KIVY_BCM_DISPMANX_ID=2 python3 main.py

ID=〇のところの数字を0~6まで変更しながらPythonファイルを実行してみてください。

数字の意味については公式ドキュメントに書いてあります。

私の場合、それでもできませんでしたので、次の方法で実行しました。

②ラズパイモニター用の設定

私の使用しているディスプレイはラズパイ用だったようです。(公式ではないですが)

以下の設定を行います。まず、nanoテキストを開きます。

sudo nano ~/.kivy/config.ini

様々なことが書いてあるエディタが開くはずです。[input]と書いてある部分を以下のように書き換えてしまってください。そうするとタッチできるようになるはずです!

mouse = mouse
mtdev_%(name)s = probesysfs,provider=mtdev
hid_%(name)s = probesysfs,provider=hidinput

こちら参考にしました。

今回はここまでです。次回は画像を表示させていきます!

参考サイト

Kivy公式ドキュメント

Python Kivyの使い方① ~Kv Languageの基本~

スポンサーリンク

-Python