Kivy For The Non Computer Scientist – Part 12 – KV Language – Switching Between Kivy GUI Screens

In this blog post we’ll build upon the code from Kivy For The Non Computer Scientist – Part 10: KV Language but we’ll stay from the blog material in Part 11 in order to provide working Kivy/Python code as as clean and as clear as possible. I trust those making use of code from these posts will use them as templates and use the various code bits as required for their specific application.

This blog post contains complete working code that demonstrates how to make Kivy buttons interactive by switching between four different screens. The welcome page will appear as follows and by reading the buttons it’s pretty clear what each button does;

gui

The complete and working code (with comments) for this Kivy screen switching app is as follows;

import kivy  # Required to run Kivy such as the next line of code
kivy.require('1.9.1')  # used to alert user if this code is run on an earlier version of Kivy.
from kivy.app import App  # Imports the base App class required for Kivy Apps
from kivy.lang import Builder  # Imports the KV language builder that provides the layout of kivy screens
from kivy.uix.screenmanager import ScreenManager, Screen # Imports the Kivy Screen manager and Kivys Screen class

Builder.load_string(""" # String that will build all four Kivy screens.
<WelcomeScreen>: # Identifies layout/interactivity for the WelcomeScreen.
    GridLayout: # Creates a GridLayout for WelcomeScreen.
        cols: 1 # Sets column property to 1.
        Label: # Creates a Label Widget instance.
            text: "You're On The Welcome Screen. Please Select Which Screen You Want To Go To" # Sets above Label text property
        Button: # Creates a Button Widget instance.
            text: 'Switch To Screen One' #  Sets above button text property
            on_release:
                # on_release is a Kivy mouse release event.
                root.manager.transition.direction = 'right' # Sets screen transition movement to right.
                root.manager.current = 'screen_one' # Switches Kivy GUI screen to screen one.
        Button: # Creates a Button Widget instance.
            text: 'Switch To Screen Two' #  Sets above button text property
            on_release:
                # on_release is a Kivy mouse release event.
                root.manager.transition.direction = 'right' # Sets screen transition movement to right.
                root.manager.current = 'screen_two' # Switches Kivy GUI screen to screen two.
        Button: # Creates a Button Widget instance.
            text: 'Switch To Screen Three' #  Sets above button text property
            on_release:
                # on_release is a Kivy mouse release event.
                root.manager.transition.direction = 'right' # Sets screen transition movement to right.
                root.manager.current = 'screen_three' # Switches Kivy GUI screen to screen three.
<FirstScreen>: # Identifies layout/interactivity for the FirstScreen.
    GridLayout: # Creates a GridLayout for FirstScreen.
        cols: 1 # Sets column property to 1.
        Button: # Creates a Button Widget instance.
            text: "You're On Screen One. Press To Return To Welcome Screen" #  Sets above button text property
            on_release:
                # on_release is a Kivy mouse release event.
                root.manager.transition.direction = 'right' # Sets screen transition movement to right.
                root.manager.current = 'welcome_screen' # Switches Kivy GUI screen to the welcome screen.
<SecondScreen>: # Identifies layout/interactivity for the SecondScreen.
    GridLayout: # Creates a GridLayout for SecondScreen.
        cols: 1 # Sets column property to 1.
        Button: # Creates a Button Widget instance.
            text: "You're On Screen Two. Press To Return To Welcome Screen" #  Sets above button text property
            on_release:
                # on_release is a Kivy mouse release event
                root.manager.transition.direction = 'right' # Sets screen transition movement to right.
                root.manager.current = 'welcome_screen' # Switches Kivy GUI screen to the welcome screen.
<ThirdScreen>: # Identifies layout/interactivity for the ThirdScreen.
    GridLayout: # Creates a GridLayout for ThirdScreen.
        cols: 1 # Sets column property to 1.
        Button: # Creates a Button Widget instance.
            text: "You're On Screen Three. Press To Return To Welcome Screen" #  Sets above button text property
            on_release:
                # on_release is a Kivy mouse release event
                root.manager.transition.direction = 'right' # Sets screen transition movement to right.
                root.manager.current = 'welcome_screen' # Switches Kivy GUI screen to the welcome screen.
""")

class WelcomeScreen(Screen): # Creates a WelcomeScreen widget from the above kv language data string.
    pass # Python placeholder for class.

class FirstScreen(Screen): # Creates a FirstScreen widget from the above kv language data string.
    pass # Python placeholder for class.

class SecondScreen(Screen): # Creates a SecondScreen widget from the above kv language data string.
    pass # Python placeholder for class.

class ThirdScreen(Screen): # Creates a ThirdScreen widget from the above kv language data string.
    pass # Python placeholder for class.

sm = ScreenManager() # Creates an instance (copy) of ScreenManager as variable sm. ScreenManager switches between Screen Objects.
sm.add_widget(WelcomeScreen(name='welcome_screen')) # Adds WelcomeScreen widget to ScreenManager. ScreenManager id's screen as welcome_screen.
sm.add_widget(FirstScreen(name='screen_one')) # Adds FirstScreen widget to ScreenManager. ScreenManager id's screen as screen_one.
sm.add_widget(SecondScreen(name='screen_two')) # Adds SecondScreen widget to ScreenManager. ScreenManager id's screen as screen_two.
sm.add_widget(ThirdScreen(name='screen_three')) # Adds ThirdScreen widget to ScreenManager. ScreenManager id's screen as screen_three.

class SwitchingScreenApp(App):  # Creates the instance (copy) of the Kivy App class named SwitchingScreenApp

    def build(self):  # build is a method of Kivy's App class used to place widgets onto the GUI.
        return sm  # return calls the build method which in turn builds the GUI.

SwitchingScreenApp().run() # Runs SwitchingScreenApp

So what’s new in the above code?

  • Line 5  – Imports Kivy’s ScreenManager and Kivy’s Screen class. ScreenManager is used later in the code to switch between screen objects. In order for ScreenManager to work Kivy Screens must be turned into screen objects. This is done later in the code.
  • Line 8 – Notice that is enclosed in braces. This indicates to Kivy that all the code indented below it is a set of rules that apply to a class. Since will eventually become a Screen object that will switched by ScreenManager,  the braces act as a demarkation point for each screen in kv language.
  • Line 15 – on_release is a kv language event call. In this case it occurs upon the release of a mouse click.
  • Line 17 – Makes up the first part of the event. In this case the event (root.manager.transition.direction = ‘right’) instructs the ScreenManager to change the screen it a right handed direction.
  • Line 18 – Makes up the second part of the event. In this case

    (root.manager.current = ‘screen_one’) tells the ScreenManager to switch screens to screen_one. Please note ScreenManager does not switch on its object name (FirstScreen). This confused me for some time when I first tried coding Kivy’s screen switching.

  • Lines 21, 23, 24, 27, 29 and 30 – Provides the same code and functions as Lines 15, 17 and 18 but this time for the second and third buttons on the WelcomeScreen. Note Line 24 switches Kivy’s GUI screen to screen_two and Line 30 switches Kivy’s GUI screen to ‘screen_three’.
  • Line 31 – Demarkation point for rules, layout, interactivity etc.
  • Line 39 – Event code calls for Kivy’s GUI screen to switch from ‘screen_one’ back to ‘welcome_screen’
  • Line 40 – Demarkation point for <SecondScreen> rules, layout, interactivity etc.
  • Line 48 – Event code calls for Kivy’s GUI screen to switch from ‘screen_two’ back to ‘welcome_screen’
  • Line 49 – Demarkation point for <ThirdScreen> , layout, interactivity etc.
  • Line 57 – Event code calls for Kivy’s GUI screen to switch from ‘screen_three’ back to ‘welcome_screen’
  • Line 60 – This is the line where the WelcomeScreen rules in the kv language string are turned into a Screen Object called WelcomeScreen.
  • Line 63 – This is the line where the FirstScreen rules in the kv language string are turned into a Screen Object called FirstScreen.
  • Line 66 – This is the line where the SecondScreen rules in the kv language string are turned into a Screen Object called SecondScreen.
  • Line 69 – This is the line where the ThirdScreen rules in the kv language string are turned into a Screen Object called ThirdScreen.
  • Line 72 – Creates an instance (copy) of ScreenManager as variable sm. As state earlier ScreenManager is used to display and switch between Screen Objects.
  • Line 73 – The WelcomeScreen Object is added to the ScreenManager and given the name ‘welcome_screen’. Note ScreenManager uses the name welcome_screen to perform any switches. It does not use the Object name WelcomeScreen.
  • Line 74 – The FirstScreen Object is added to the ScreenManager and given the name ‘screen_one’. Note ScreenManager uses the name screen_one to perform any switches. It does not use the Object name FirstScreen.
  • Line 75 – The SecondScreen Object is added to the ScreenManager and given the name ‘screen_two’. Note ScreenManager uses the name screen_two to perform any switches. It does not use the Object name SecondScreen.
  • Line 76 – The ThirdScreen Object is added to the ScreenManager and given the name ‘screen_three’. Note ScreenManager uses the name screen_three to perform any switches. It does not use the Object name ThirdScreen.

This is where I will wrap up this blog post. You can find more on Kivy’s ScreenManager at http://bit.ly/2ilJNEf. If nothing else the code in this post will get you started in developing a Kivy GUI with multiple screens and the ability to switch between them. In future posts we’ll need to take a look at nested screens and further Kivy interaction with Python. Kivy For The Non Computer Scientist – Part 13: Creating More Complex Kivy GUI’s Using Nesting And KV Language is the next post in this series.

….brad….

Advertisements

2 Responses

  1. […] Hope this information helps you with your Kivy GUI designs. Here’s the link to the next post in this series, Kivy For The Non Computer Scientist – Part 12 – KV Language – Switching Between Kivy GUI S…. […]

  2. […] blog post combines the working code provided from Part 12 – KV Language – Switching Between Kivy GUI Screens and Part 13: Creating More Complex Kivy GUI’s Using Nesting And KV Language. The post […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: