Kivyで顔認証アプリ制作②画面遷移編（画面切り替え）

Kivyで顔認証アプリ制作①基本操作編に引き続き、今回は必要に応じて画面を切り替える方法を取り扱っていきます。

1 作りたいもの
2 前回まで
3 実際の画面遷移の様子
4 画面遷移のソースコード
5 参考サイト

作りたいもの

会社などで使えそうな、顔認証アプリです。

下のスライドが、実装後のイメージ図です。

前回まで

前回までに行ったこと

レイアウトはKivy 言語、機能はPythonで実装する
テキスト、ボタンWidgetの実装
日本語フォントの適用

実際の画面遷移の様子

実際は、カメラ認証後に画面を切り替えたいのですがまだやり方が分かりません。

なので全てボタンで変わるようにしています。

画面遷移のソースコード

Python側のソースコードです。

長いですがやっていることは、表示するスクリーンのクラスを作成しているだけです。

#-*- coding: utf-8 -*-

# 起動時の解像度を変更 デフォルトは800×600
from kivy.config import Config
Config.set('graphics','width','1200')
Config.set('graphics','hight','900')
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager,Screen,NoTransition

from kivy.core.text import LabelBase,DEFAULT_FONT
# デフォルトに使用するフォントを変更 タカオフォントを使用
LabelBase.register(DEFAULT_FONT,'/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf')


class MainScreen(Screen):
    pass
class RecogShow(Screen):
    pass
class NewFaceCheck(Screen):
    pass
class KeyBoard(Screen):
    pass
class PicShot(Screen):
    pass
class TrainScreen(Screen):
    pass
class RegisterCheck(Screen):
    pass

class AbcApp(App):
    def __init__(self, **kwargs):
        super(AbcApp, self).__init__(**kwargs)
        self.title = 'enter check'
    def build(self):
        self.sm = ScreenManager(transition=NoTransition())
　　　　#　各スクリーンに名前を付けて管理する
        self.sm.add_widget(MainScreen(name='main'))
        self.sm.add_widget(RecogShow(name='recogshow'))
        self.sm.add_widget(NewFaceCheck(name='newfacecheck'))
        self.sm.add_widget(KeyBoard(name='keyboard'))
        self.sm.add_widget(PicShot(name='picshot'))
        self.sm.add_widget(TrainScreen(name='train'))
        self.sm.add_widget(RegisterCheck(name='register'))
        
        return self.sm
if __name__=='__main__':
    AbcApp().run()

#-*- coding: utf-8 -*-

# 起動時の解像度を変更デフォルトは800×600

from kivy.config import Config

Config.set('graphics','width','1200')

Config.set('graphics','hight','900')

from kivy.app import App

from kivy.uix.screenmanager import ScreenManager,Screen,NoTransition

from kivy.core.text import LabelBase,DEFAULT_FONT

# デフォルトに使用するフォントを変更タカオフォントを使用

LabelBase.register(DEFAULT_FONT,'/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf')

class MainScreen(Screen):

pass

class RecogShow(Screen):

pass

class NewFaceCheck(Screen):

pass

class KeyBoard(Screen):

pass

class PicShot(Screen):

pass

class TrainScreen(Screen):

pass

class RegisterCheck(Screen):

pass

class AbcApp(App):

def __init__(self, **kwargs):

super(AbcApp, self).__init__(**kwargs)

self.title = 'enter check'

def build(self):

self.sm = ScreenManager(transition=NoTransition())

　　　　#　各スクリーンに名前を付けて管理する

self.sm.add_widget(MainScreen(name='main'))

self.sm.add_widget(RecogShow(name='recogshow'))

self.sm.add_widget(NewFaceCheck(name='newfacecheck'))

self.sm.add_widget(KeyBoard(name='keyboard'))

self.sm.add_widget(PicShot(name='picshot'))

self.sm.add_widget(TrainScreen(name='train'))

self.sm.add_widget(RegisterCheck(name='register'))

return self.sm

if __name__=='__main__':

AbcApp().run()

self.sm = ScreenManager(transition=NoTransition())

1	self.sm = ScreenManager(transition=NoTransition())

transitionを変更することで、スクリーンが切り替わる際の設定を変更できます。以下のような種類があります。

CardTransition(): 横に滑るように遷移する（デフォルトはmode=’push’で右滑り）mode=’pop’は左滑り
FallOutTransition(): 後ろへ画面がフェードアウトする（duration=(.10)でフェードアウトの速度調整）
FadeTransition(): 画面がフェードアウトする（duration=(.10)でフェードアウトの速度調整）
NoTransition(): アニメーションなしで遷移する
RiseInTransition():後ろから前へ画面がフェードインする（duration=(.10)でフェードインの速度調整）
SlideTransition(): 横に回転しながら遷移する（duration=(.10)での速度調整）
SwapTransition(): 後ろへ小さくなりながら右からきた画面と交代するように遷移（duration=(.10)での速度調整）
WipeTransition(): 右から左へ波打つように遷移する（duration=(.10)での速度調整）

kvファイルです。

# 顔を識別するカメラのスクリーン
<MainScreen>:
    BoxLayout:
        Button:
            text:'Move to main'
            on_press:root.manager.current='recogshow'
# 認識した結果を表示するスクリーン
<RecogShow>:
    BoxLayout:# 上部分のレイアウト
        orientation:'vertical'
        Label:
            size_hint_y:0.8# 上８割を認証結果表示に
            text:'〇〇さんを認証しました'
            font_size:80# 文字フォント80に
        BoxLayout:# 下部分のレイアウト
            size_hint_y:0.2
            Button:# ボタンウィジェット
                font_size:60
                text:'もう一度認証する'
                on_press:root.manager.current='main'# ボタンを押したときにmainスクリーンに移動
            Button:
                text:'10秒待つ'
                font_size:60
                on_press:root.manager.current='newfacecheck'
<NewFaceCheck>:
    BoxLayout:
        orientation:'vertical'
        Label:
            size_hint_y:0.8
            font_size:80
            text:'顔情報が登録されていません新しく登録しますか？'
        BoxLayout:
            size_hint_y:0.2
            Button:
                font_size:50
                text:'はい'
                on_press:root.manager.current='keyboard'
            Button:
                font_size:50
                text:'いいえ'
                on_press:root.manager.current='main'
<KeyBoard>:
    BoxLayout:
        orientation:'vertical'
        Label:
            size_hint_y:0.3
            text:'名前を入力してください'
            font_size:80
        BoxLayout:
            size_hint_y:0.7    
            Button:
                text:'keyboard'
                on_press:root.manager.current='picshot'
<PicShot>:
    BoxLayout:
        orientation:'vertical'
        Label:
            size_hint_y:0.2
            text:'Look at the camera!'
            font_size:80
        BoxLayout:    
            Button:
                text:'to train'
                on_press:root.manager.current='train'
   
<TrainScreen>:
    BoxLayout:
        orientation:'vertical'
        Label:
            text:'訓練中です'
            font_size:120
        BoxLayout:    
            Button:
                text:'click to check'
                on_press:root.manager.current='register'
  
<RegisterCheck>:
    BoxLayout:
        orientation:'vertical'
        Label:
            text:'この写真でいいですか？'
            font_size:80
        BoxLayout: 
            size_hint_y:0.3   
            Button:
                font_size:80
                text:'はい'
                on_press:root.manager.current='main'
            Button:
                font_size:80
                text:'いいえ'
                on_press:root.manager.current='picshot'

# 顔を識別するカメラのスクリーン

<MainScreen>:

BoxLayout:

Button:

text:'Move to main'

on_press:root.manager.current='recogshow'

# 認識した結果を表示するスクリーン

<RecogShow>:

BoxLayout:# 上部分のレイアウト

orientation:'vertical'

Label:

size_hint_y:0.8# 上８割を認証結果表示に

text:'〇〇さんを認証しました'

font_size:80# 文字フォント80に

BoxLayout:# 下部分のレイアウト

size_hint_y:0.2

Button:# ボタンウィジェット

font_size:60

text:'もう一度認証する'

on_press:root.manager.current='main'# ボタンを押したときにmainスクリーンに移動

Button:

text:'10秒待つ'

font_size:60

on_press:root.manager.current='newfacecheck'

<NewFaceCheck>:

BoxLayout:

orientation:'vertical'

Label:

size_hint_y:0.8

font_size:80

text:'顔情報が登録されていません新しく登録しますか？'

BoxLayout:

size_hint_y:0.2

Button:

font_size:50

text:'はい'

on_press:root.manager.current='keyboard'

Button:

font_size:50

text:'いいえ'

on_press:root.manager.current='main'

<KeyBoard>:

BoxLayout:

orientation:'vertical'

Label:

size_hint_y:0.3

text:'名前を入力してください'

font_size:80

BoxLayout:

size_hint_y:0.7

Button:

text:'keyboard'

on_press:root.manager.current='picshot'

<PicShot>:

BoxLayout:

orientation:'vertical'

Label:

size_hint_y:0.2

text:'Look at the camera!'

font_size:80

BoxLayout:

Button:

text:'to train'

on_press:root.manager.current='train'

<TrainScreen>:

BoxLayout:

orientation:'vertical'

Label:

text:'訓練中です'

font_size:120

BoxLayout:

Button:

text:'click to check'

on_press:root.manager.current='register'

<RegisterCheck>:

BoxLayout:

orientation:'vertical'

Label:

text:'この写真でいいですか？'

font_size:80

BoxLayout:

size_hint_y:0.3

Button:

font_size:80

text:'はい'

on_press:root.manager.current='main'

Button:

font_size:80

text:'いいえ'

on_press:root.manager.current='picshot'

コードは長いですが、やっていることはいたってシンプルです。

Python側で各スクリーンに名前を付けておく
Kivy側でボタンが押された際にどの名前のスクリーンに移動するか決める
Kivy側で各スクリーンのレイアウトを整える

これで実装しようと思っているレイアウトの部分は完成しました！

あとは動画機能などを追加していけばできるはず......

今回はここまでです。ありがとうございました。

Kivyで顔認証アプリ制作②画面遷移編（画面切り替え）

作りたいもの

前回まで

実際の画面遷移の様子

画面遷移のソースコード

参考サイト