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

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

Raspberry Pi

Kivyでの画面遷移(Screen Managerの使い方)について

投稿日:

Raspberry Piの環境でKivyを使っています。今回は画面遷移についてです。その画面遷移のためにScreen Managerというwidgetを使ってみます。

今現在のRaspberry PiでのKivyの環境設定については以下で書きました。必要な場合はこちらを参照して下さい。


Screen Manager widget
Screen Managerは、Kivyのwidgetの一つで、アプリケーションの複数の画面を管理します。このwidgetを使って画面遷移を行います。

今現在のマニュアルページは以下です。これを見ながらやってみます。
Screen Manager – Kivy

このマニュアルページにあったサンプルプログラムをkvファイルとpyファイルへ分解してみました。

ファイル名をsm01.kvとして以下を作成しました。

<MenuScreen>:
    BoxLayout:
        Button:
            text: 'Goto settings'
            on_press: root.manager.current = 'settings'
        Button:
            text: 'Quit'

<SettingsScreen>:
    BoxLayout:
        Button:
            text: 'My settings button'
        Button:
            text: 'Back to menu'
            on_press: root.manager.current = 'menu'

ファイル名をsm01.pyとして以下を作成しました。

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen

# Create both screens. Please note the root.manager.current: this is how
# you can control the ScreenManager from kv. Each screen has by default a
# property manager that gives you the instance of the ScreenManager used.

# Declare both screens
class MenuScreen(Screen):
    pass

class SettingsScreen(Screen):
    pass

class SM01App(App):

    def build(self):
        # Create the screen manager
        sm = ScreenManager()
        sm.add_widget(MenuScreen(name='menu'))
        sm.add_widget(SettingsScreen(name='settings'))

        return sm

if __name__ == '__main__':
    SM01App().run()

‘MenuScreen’ と ’SettingsScreen’ という2画面の例のようです。
基本的には、ScreenManagerは一度に1つのScreenのみを表示して、トランジション(画面切り替え時のアニメーション的な表示)がいろいろと制御出来るようです。

上記2つのファイルを同一のディレクトリに配置して実行します。静止画ですが、以下のように実行されました。

これが起動時のMenuScreenで、Goto settingsのボタンでSettingsScreenに移行します。

確かにこれで2画面の移行が出来るのですが、これだけですと少し分かりにくいような気もしました。そこで以下のような画面遷移のプログラムを作成してみました。一つの書き方の例として見て頂ければと思います。

ファイル名をsm02.kvとして以下を作成しました。

#: import SlideTransition kivy.uix.screenmanager.SlideTransition

<Widget>:
    font_name: '/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf'

<Display>:
    BoxLayout:
        orientation: "vertical"
        BoxLayout:
            size_hint: 1, None
            height: '48dp'
            Button:
                text: '画面1を表示'
                on_release:
                    sm.transition = SlideTransition(direction='right')
                    sm.current = 'screen_one'
            Button:
                text: '画面2を表示'
                on_release:
                    sm.transition = SlideTransition(direction='left')
                    sm.current = 'screen_two'

        ScreenManager:
            id: sm
            Screen_One:
            Screen_Two:

<Screen_One>:
    name: 'screen_one'
    Button:
        background_color: 1,0,0,1
        text: '画面1(のボタン)'

<Screen_Two>:
    name: 'screen_two'
    Button:
        background_color: 0,0,1,1
        text: '画面2(のボタン)'

ファイル名をsm02.pyとして以下を作成しました。

from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.boxlayout import BoxLayout

from kivy.config import Config

Config.set('graphics', 'width', '600')
Config.set('graphics', 'height', '480')

class Display(BoxLayout):
    pass

class Screen_One(Screen):
    pass

class Screen_Two(Screen):
    pass

class SM02App(App):
    def build(self):
        return Display()

if __name__ == '__main__':
    SM02App().run()

上記2つのファイルを同一のディレクトリに配置して実行しました。以下のように実行出来ました。動画にしましたので画面移行が見えると思います。

書き方としては、kvファイルの方に詳細も記述しています。簡単なメニューバー的なボタンを上部に配置して、その動作でScreenManagerを制御している書き方です。

あとは、SlideTransitionを使って左右の動きを定義しています。このSlideTransitionか他のTransitionを使って画面移行時の動きを定義するようです。例えば以下では、RiseInTransitionを使ってみました。左右の動きではなく重なって切り替わる感じです。

#: import RiseInTransition kivy.uix.screenmanager.RiseInTransition

<Widget>:
    font_name: '/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf'

<Display>:
    BoxLayout:
        orientation: "vertical"
        BoxLayout:
            size_hint: 1, None
            height: '48dp'
            Button:
                text: '画面1を表示'
                on_release:
                    sm.transition = RiseInTransition()
                    sm.current = 'screen_one'
            Button:
                text: '画面2を表示'
                on_release:
                    sm.transition = RiseInTransition()
                    sm.current = 'screen_two'

        ScreenManager:
            id: sm
            Screen_One:
            Screen_Two:

<Screen_One>:
    name: 'screen_one'
    Button:
        background_color: 1,0,0,1
        text: '画面1(のボタン)'

<Screen_Two>:
    name: 'screen_two'
    Button:
        background_color: 0,0,1,1
        text: '画面2(のボタン)'

今回は2画面ですが、実際には必要な画面のレイアウトをそれぞれ定義して、Screen Managerでいろいろと制御するようになると思います。

以上、基本的な使い方までですが、Screen Managerでの画面遷移についてでした。

今回はここまでとします。

AdSense

AdSense

-Raspberry Pi

執筆者:

関連記事

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

Raspberry PiでIoT 温度・湿度・気圧データ編の3回目です。前回までで、Raspberry Piから温度、湿度、気圧データをWebサーバへ送信してそのデータを蓄積出来るようになりました。今 …

Raspberry Pi 4にOpenCVをインストールしてPythonで動作確認

Raspberry Pi 4にOpenCVをインストールして動作確認をしました。Pythonでのプログラミングを想定して動作確認はPythonで行いました。

Node.jsでRaspberryPiのGPIOを使う(その2)ブラウザからの操作

Node.jsでRaspberryPiのGPIOを使うの2回目です。前回はGPIOのデバイスドライバをNode.jsのファイル操作を使って操作しました。今回はこれを以下の記事で作成したWebサーバ的な …

レーザーカッターでセンサーのケースを作ってみた

前回のセンサー(温湿度センサーBME280)のケースをレーザーカッターで作ってみました。もちろん3Dプリンターで作る方法もあると思いますが単純なボックス型ならレーザーカッターの方が加工時間が短いと思っ …

Raspberry Piをモニターとキーボードなしで導入する(2021年5月版 その1)全体概要からSDカードの作成まで

今現在(2021年5月)の方法でRaspberry Piをモニターとキーボードなしで導入してみます。このモニターとキーボードなしの状態はヘッドレスという表現もあるようですのでここからはこの状態をヘッド …