Kivy Part 41 – Slugrace – A Centralized Style Sheet File

Hey guys, before we move on to the next part of the Kivy series and create a centralized style sheet file, 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 with Our Style Sheet File…

In the preceding parts of the series we were working not on a single app, but, technically speaking, on a set of apps. What we called screens were actually separate apps, each inheriting from the App class and launched by means of the run method. There are five such apps: the Settings screen, the Race screen, the Bets screen, the Results screen and the Game Over screen.

In each of the apps where needed we define the same custom widgets like RegularLabel or RedButton, for example. This makes the code repetitive and error-prone. This is why we’re going move all the class rules to a separate file, let’s name it our style sheet file, which is the widgets.kv file that we already created, and then use them in the other files of our project. Moving the class rules to the widgets.kv file will temporarily break our app, which we are going to fix soon.

So, after scanning all the kv files throughout the project, I selected the rules that were used in more than one file and moved them from the original files to the widget.kv file. Now our style sheet file looks like so:

# File name: widgets.kv

### LABELS ###
<RegularLabel@Label>:
    color: .2, .1, 0, 1
    text_size: self.size
    halign: 'left'
    valign: 'center'

<TitleLabel@RegularLabel>:
    font_size: 20
    size_hint: (1, None)
    height: 30

<Regular80x30Label@RegularLabel>:
    size_hint: None, None
    size: 80, 30

<DollarLabel@RegularLabel>:
    text: "$"
    size_hint: None, None
    size: 20, 30   

<BoldLabel@RegularLabel>:    
    bold: True

<WhiteOddsLabel@BoldLabel>:
    font_size: 32
    color: 1, 1, 1, 1    

<WhiteNameLabel@BoldLabel>:
    font_size: 18 
    color: 1, 1, 1, 1       

<WhiteWinsLabel@BoldLabel>:
    font_size: 14   
    color: 1, 1, 1, 1    

### BUTTONS ###
<RedButton@Button>:
    background_color: .8, 0, 0, 1
    color: 1, .8, .1, 1
    bold: True
    font_size: 18
    size_hint: (None, None)    
    size: 200, 40
    pos_hint: {'center_x': 0.5}

### TEXTINPUTS ###
<NameInput@TextInput>:
    multiline: False
    size_hint: None, None
    size: 400, 30
    
<NumInput@TextInput>:
    multiline: False
    size_hint: None, None
    size: 250, 30

<BetInput@NumInput>:    
    width: 120 
    pos_hint: {'center_y': .5}

### CHECK BOXES ###
<PlayerRadioButton@CheckBox>:
    canvas.before:
        Color:
            rgba: 0,0,0,1
        Ellipse:
            pos:self.center_x - 10, self.center_y - 10
            size:[20,20]

    group: 'players'  
    size_hint: (.5, 1)

<ConditionRadioButton@CheckBox>:
    canvas.before:
        Color:
            rgba: 0,0,0,1
        Ellipse:
            pos:self.center_x - 10, self.center_y - 10
            size:[20,20]

    group: 'conditions'
    size_hint_x: .05

<PlayerSlugButton@CheckBox>:
    canvas.before:
        Color:
            rgba: 0,0,0,1
        Ellipse:
            pos:self.center_x - 10, self.center_y - 10
            size:[20,20]

    size_hint: (.5, 1)

All these class rules are now only in this one file, I removed them from the other kv files. Naturally, at this point our app won’t work because it can’t use the custom widgets. They are not referenced in any way. So, let’s fix it.

Access to the Rules Defined in widgets.kv

You might be tempted to load the widgets.kv file in each screen like so:

# File name: settings.py

...

# We need the Builder class.
from kivy.lang import Builder

# Configuration
...

#Let's load the widgets.kv file.
Builder.load_file('widgets.kv')

class PlayerCount(BoxLayout):
    ...

I said you could be tempted to do so, which suggests it isn’t the way to go. Yes, that’s not the way to go, but we will do it just for the time being anyway because now these are all separate apps. Then, when they are all combined into one big app, we will change it.

I assume you have removed all the class rules that are now defined in the widgets.kv file from the other kv files. Now let’s load the widgets.kv file in each of the screens. We already loaded it in the Settings screen.

Make sure to not move the PlayerCount and PlayerSettings widgets to the widgets.kv file because they are specific just for this screen.

And now the Race screen. Here’s the Python file:

# File name: race.py

...

# We need the Builder class.
from kivy.lang import Builder

# Configuration
...

#Let's load the widgets.kv file.
Builder.load_file('widgets.kv')

...

I left the screen-specific widgets in the race.kv file and moved the others to the widgets.kv file.

Now, the Bets screen. Here’s the Python file:

# File name: bets.py

...

# We need the Builder class.
from kivy.lang import Builder

# Configuration
...

#Let's load the widgets.kv file.
Builder.load_file('widgets.kv')

...

Next, the Results screen. Here’s the Python file:

# File name: results.py

...

# We need the Builder class.
from kivy.lang import Builder

# Configuration
...

#Let's load the widgets.kv file.
Builder.load_file('widgets.kv')

...

And finally the Game Over screen. Here’s the Python file:

# File name: gameover.py

...

# We need the Builder class.
from kivy.lang import Builder

# Configuration
...

#Let's load the widgets.kv file.
Builder.load_file('widgets.kv')

...

All the apps run as before and display the widgets defined in the widgets.kv file correctly. In the next part of the series we’ll be talking about Kivy screens.