In the previous parts we created all the basic screens our app needs. But they are not very eye-catching. And they don’t look like in the final versions of the screens – by a long shot. Time to add some colors and graphics. But if we really want to talk about graphics in Kivy, we have to start with discussing the Canvas object that every Kivy widget has. This is the topic of this rather theoretical than practical article.
Here’s the video version of this article:
But before we delve into the topic, here’s some info for you.
*****
Table of Contents
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…
The Canvas object is not what you might think it is if you know this term from other environments, like HTML5, where it is the object we draw on. In Kivy a Canvas is a set of drawing instructions that define the graphical representation of a widget. Have a look at this screencast from the final version of the Race screen:
As you can see, the buttons have a dark background color, let’s say it’s dark red, and the text is yellow. Also the check boxes look different than when we first created them. Actually, the whole layouts look different: They have a yellowish background color and there are rectangles with rounded corners drawn on them. This is what we can achieve using Canvas instructions.
The Coordinate Space
In Kivy we draw in the coordinate space. This is the space which includes the app window that you can see but also extends beyond it, which means you can draw both inside and outside the visible window. All widgets share the same coordinate space.
So, to make things clear, let’s recap on this:
– each widget has its own Canvas
– all widgets share the same coordinate space
Why this is important will become clear when we talk about all the available drawing instructions.
Make Awesome Games and Other 3D Apps
with Panda3D and Blender using Python.
Cool stuff, easy to follow articles.
Get the magazine here (PDF).
Drawing Instructions
Speaking of which… There are two types of drawing instructions in Kivy:
vertex instructions – instructions used to draw basic geometric shapes like lines, rectangles, ellipses and such like,
context instructions – instructions used to manipulate the whole coordinate space, so to add colors to it, rotate, translate and scale it.
We’ll discuss both these groups of instructions in more detail in the following articles. What is important is to remember that context instructions manipulate the whole coordinate space, not just the widget on which they are used. We will see this in action soon, but imagine you add a rotation instruction to a button to rotate it, say, 90 degrees in the counterclockwise direction. But this instruction will also affect all the subsequent graphics instructions, regardless if they will belong to the same or to any other widget. This is because the whole coordinate space is rotated. Naturally, there is a way to deal with that – all you have to do is save and then restore the context, but don’t worry about that too much at this moment.
Learn the basics of Python, including OOP.
with lots of exercises, easy to follow
The course is available on Udemy.
What Actually Is a Widget?
Now that we know something about the coordinate space, we can slightly redefine the widget. Intuitively we know that a button is a widget, and so is a slider or any of the layouts, to mention just a few. But a widget is not restricted to the visible part of the button, slider, layout or any other visual element. In other words, the canvas instructions of a widget are not restricted any specific area of the widget, but to the whole coordinate space. This means, for example, that we can draw on a button widget, but not necessarily on the rectangular representation of the button that we recognize as the button. Instead, we could draw outside it as well. This will become clearer as we proceed.
OK, this theoretical introduction is getting more and more abstract, so let’s just jump into some code and see how it all really works. In the next part we’ll see how to draw basic shapes in Kivy.
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.