Skip to content
Home » Kivy Part 36 – Slugrace – The App Window Size Configuration

Kivy Part 36 – Slugrace – The App Window Size Configuration

Spread the love

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:

Settings screen

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

Settings screen resized

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.

Kivy 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:

Settings screen

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:

Race screen

Your Panda3D Magazine

Make Awesome Games and Other 3D Apps

with Panda3D and Blender using Python.

Cool stuff, easy to follow articles.

Get the magazine here (PDF).

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:

Bets screen

Python Jumpstart Course

Learn the basics of Python, including OOP.

with lots of exercises, easy to follow

The course is available on Udemy.

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:

Results screen

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:

Game Over screen

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

Blender Jumpstart Course

Learn the basics of 3D modeling in Blender.

step-by-step, easy to follow, visually rich

The course is available on Udemy and on Skillshare.


Spread the love
Tags:

Leave a Reply