Kivy Part 44 – Slugrace – Switching Between Bets and Results Screens

Hey guys, before we move on to the next part of the Kivy series and talk about switching screens, here’s some info for you.

*****

Book Info

I just published my Kivy book, GUI Programming with Python and Kivy. It’s pretty long (over 800 pages) and comprehensive. And, which also counts, easy to read. The book contains lots of illustrations.

This book covers all the basics that you need to know to start programming GUI applications with Python and Kivy. Throughout the book we are building a GUI application from scratch, a fully functional game using all kinds of tools that Kivy has to offer. It’s our Slugrace project, but covered in a much more in-depth manner.

Each part of the book starts with a theoretical introduction of a topic or idea that we then implement in the project. I assume you have no prior knowledge of the Kivy library, but you should have at least some basic knowledge of the Python programming language, including the object-oriented programming paradigm as this is what we will be using a lot in this book.

The book covers all the basic elements of Kivy that you have to know, like widgets, layouts, Kivy ids and properties, graphics, screens, animation, sound. Finally we’ll deploy the app to Windows. It is pretty comprehensive and after you finish it, I’m sure you’ll be able to create your own awesome GUI apps of any kind, not just games.

I hope you will have at least as much fun reading the book as I had writing it.

As far as this Kivy series is concerned, the following parts will contain the most important elements covered in the book. However, some elements will be presented in a simplified way here on my blog or omitted completely.

____________

If you are interested, you can purchase the book in four versions. Here are the links:

1) ebook – pdf version on my website – in full color

Here you can see the description of the book, sample graphics from the book and the full table of contents.

2) ebook – Kindle version on Amazon – in full color

3) paperback version on Amazon – in black and white

4) paperback version on Amazon – in full color

*****

And Now Let’s Move On…

In the previous part of the series we implemented the screen manager that we use to switch between the Settings, Race and Game Over screens.  In this part of the series, we’re going to implement the other screen manager, so the one that switches between the Bets screen and the Results screen inside the Race screen. These two screens will be embedded in the Bets area of the Race screen.

The RaceScreenManager Class

So, let’s go to the race.py file and add the RaceScreenManager class that inherits from ScreenManager:

# File name: race.py

...

# Besides Screen we have to import ScreenManager.
from kivy.uix.screenmanager import Screen, ScreenManager

# Configuration
...

Builder.load_file('widgets.kv')

# Here's the screen manager class. LLet's leave the implementation 
# of the class for the kv file.
class RaceScreenManager(ScreenManager):
    pass

class SlugStats(BoxLayout):
    ...

Still in the race.py file let’s load the two kv files, bets.kv and results.kv.

# File name: race.py
...
Builder.load_file('widgets.kv')

# Load the Bets and Results kv files.
Builder.load_file('bets.kv')
Builder.load_file('results.kv')

# Here's the screen manager class.
class RaceScreenManager(ScreenManager):
    pass
...

Now we have to implement the RaceScreenManager in the race.kv file. Let’s add a class rule at the top of the file for the RaceScreenManager. It should contain two screens:

BetsScreen – with the name property set to ‘betsscreen’

ResultsScreen – with the name property set to ‘resultsscreen’

# File name: race.kv
#:import race race

# Here's the implementation of the screen manager.
<RaceScreenManager>:
    BetsScreen:
        name: 'betsscreen'
    ResultsScreen:
        name: 'resultsscreen'

<SlugStats>:     
    ...

Importing Python Files in kv

In the two kv files, bets.kv and results.kv, we have to import the bets and results Python files respectively, just like we did before in the other kv files:

Here’s the bets.kv file:

# File name: bets.kv
#:import bets bets

<Bet>:
    ...

And the results.kv file:

# File name: results.kv
#:import results results
            
<Result>:                        
    ...

Implementing the RaceScreenManager Widget

Now, when we enter the Race screen from the Settings screen, we want the Bets screen to sit in the Bets area by default. At this moment we only have a placeholder there. To do that, we’ll place the RaceScreenManager widget defined in the class rules section in the Bets area and set its current property to ‘betsscreen’. First locate the Bets area in the race.kv file. It now looks like this:

# File name: race.kv
...
        
        ### THE BETS ###
        Label:
            canvas:
                Color:
                    rgba: .2, .1, 0, 1
                Line:
                    rounded_rectangle: self.x, self.y, self.width, self.height, 10        
                    width: 2

            color: .2, .1, 0, 1
            text: 'The Bets'

We’ll put the screen manager inside a BoxLayout and add some padding. So, let’s replace the label with a BoxLayout, move the label’s canvas instructions to the BoxLayout and set the BoxLayout’s padding to 5 pixels. Then let’s add the RaceScreenManager widget inside the BoxLayout. We don’t have to set its current property to ‘betsscreen’ because it’s going to use this screen by default:

# File name: race.kv
#:import race race
...
<SlugStats>:     
    ...
        
        ### THE BETS ###              
        BoxLayout:
            canvas:
                Color:
                    rgba: .2, .1, 0, 1
                Line:
                    rounded_rectangle: self.x, self.y, self.width, self.height, 10        
                    width: 2

            padding: 5

            RaceScreenManager:

Switching Between Screens

Now we need some code two switch between the two screens. In the bets.kv file we’ll add the on_press event to the Go button. When the button is pressed, the Bets screen will switch to the Results screen. Here the root is the Bets screen and its manager is the RaceScreenManager.

# File name: bets.kv
#:import bets bets

<Bet>:
    ...

        ### GO BUTTON ###    
        RedButton:
            text: 'Go'

            # When the button is pressed, this screen should switch to the Results screen.
            on_press: root.manager.current = 'resultsscreen'

Then let’s add similar code to the Next Race button in the results.kv file. This time when the button is pressed, the Results screen should switch back to the Bets screen. This will enable you to switch between the two screens in a cycle by pressing the two buttons.

# File name: results.kv
#:import results results
            
<Result>:                        
    ...
                    
        ### NEXT RACE BUTTON ###    
        RedButton:
            text: 'Next Race'

            # When the button is pressed, this screen should switch to the Bets screen.
            on_press: root.manager.current = 'betsscreen'

Now when you run the app (from the main.py) file and then press the Ready button in the Settings screen, you will switch to the Race screen with the Bets screen embedded in the Bets area:

If you now press the Go button, the Bets screen will be replaced by the Results screen:

If you now press the Next Race button, you will go back to the Bets screen. In the next part of the series we’ll clean the code slightly up.