Kivy Part 36 – Slugrace – The App Window Size Configuration

Up to now, when we were running the Python files that belong to the Slugrace project, the widgets were squeezed all together, they overlapped with one another or were not visible at all. It didn’t look good, so we resized the window each time we ran the app to see everything.

Let’s have a look again at the Settings screen. When you run the app the app window looks like this:

So, you don’t see the whole right part. If you resize the window, it will look better:

This is, however, not the best strategy to tell the user of our app to resize the window each time they run the app if they want to see everything. It would be much better if we could open the app window already resized. Fortunately, it’s pretty easy to do.

But before we delve into the topic, 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…

Configuration Object

You can change the size of the app window through the configuration object. It’s instanced from the Config class defined in the kivy.config module. The configuration object can be used for lots of other settings as well, but it’s beyond the scope of this article, so let’s concentrate on the window size.

Let’s open the settings.py file. We need to import the Config class. Then we have to set the width and height of the window. To this end we use the set method on the Config object. It takes three parameters:

– the configuration token that our option belongs to, which in our case is graphics

– the option, which in our case will be width or height

– the value – this is the value that we want to set our option to

Now, what size should our window be? Looks like the resolution 1200 x 675 pixels is fine. Here’s the modified Python file:

 # File name: settings.py
  
 import kivy
 from kivy.app import App
 from kivy.uix.boxlayout import BoxLayout
  
 # We need the configuration object.
 from kivy.config import Config
  
 # Let's configure the window size.
 Config.set('graphics', 'width', '1200')
 Config.set('graphics', 'height', '675') 
  
 class SettingsScreen(BoxLayout):
     pass
  
 class SettingsApp(App):
     def build(self):
         return SettingsScreen()
  
 if __name__ == '__main__':
     SettingsApp().run() 

If you run the app again, now it will look much better:

Now all we have to do is copy the configuration code to the other screens. They should also be 1200 x 675 pixels in size.

Here’s the race.py file:

 # File name: race.py
  
 import kivy
 from kivy.app import App
 from kivy.uix.boxlayout import BoxLayout
 from kivy.config import Config
  
 # Configuration
 Config.set('graphics', 'width', '1200')
 Config.set('graphics', 'height', '675')
  
 class RaceScreen(BoxLayout):
     pass
  
 class RaceApp(App):
     def build(self):
         return RaceScreen()
  
 if __name__ == '__main__':
     RaceApp().run() 

And here’s the window when you execute the code:

And now the bets.py file:

 # File name: bets.py
  
 import kivy
 from kivy.app import App
 from kivy.uix.boxlayout import BoxLayout
 from kivy.config import Config
  
 # Configuration
 Config.set('graphics', 'width', '1200')
 Config.set('graphics', 'height', '675')
  
 class BetsScreen(BoxLayout):
     pass
  
 class BetsApp(App):
     def build(self):
         return BetsScreen()
  
 if __name__ == '__main__':
     BetsApp().run() 

The app window should now look like so:

Here’s the results.py file:

 # File name: results.py
  
 import kivy
 from kivy.app import App
 from kivy.uix.boxlayout import BoxLayout
 from kivy.config import Config
  
 # Configuration
 Config.set('graphics', 'width', '1200')
 Config.set('graphics', 'height', '675')
  
 class ResultsScreen(BoxLayout):
     pass
  
 class ResultsApp(App):
     def build(self):
         return ResultsScreen()
  
 if __name__ == '__main__':
     ResultsApp().run() 

And here’s the app window:

And finally the gameover.py file:

 # File name: gameover.py
  
 import kivy
 from kivy.app import App
 from kivy.uix.boxlayout import BoxLayout
 from kivy.config import Config
  
 # Configuration
 Config.set('graphics', 'width', '1200')
 Config.set('graphics', 'height', '675')
  
 class GameoverScreen(BoxLayout):
     pass
  
 class GameoverApp(App):
     def build(self):
         return GameoverScreen()
  
 if __name__ == '__main__':
     GameoverApp().run() 

And the app window:

And now, in the following parts, we’ll be adding some Kivy properties to our project.