Kivy Part 27 – Canvas Context Instructions – Colors

In a couple preceding lectures we’ve been drawing shapes on widgets. But they were all white. Let’s see how to add colors using canvas context instructions.

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…

First of all, let’s draw some shapes. We’re going to use our test files again. Make sure your test.py file looks like so:

# File name: test.py

import kivy
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout

class TestLayout(FloatLayout):
    pass

class TestApp(App):
    def build(self):
        return TestLayout()

if __name__ == '__main__':
    TestApp().run()

This is a very simple setup with a subclass of FloatLayout as the root widget. Now, in the kv file let’s add some canvas instructions to draw a rectangle:

# File name: test.kv

<TestLayout>:
    canvas:
        Rectangle:
            pos: self.x + 50, self.y + 50
            size: 500, 100

If you run the code, you will get this:

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).

So, nothing you couldn’t have expected. Let’s now make the rectangle red. All you have to do is add the Color context instruction with the rgba property. The value for the red color is (1, 0, 0, 1). Have a look:

# File name: test.kv

<TestLayout>:
    canvas:
        Color:
            rgba: 1, 0, 0, 1
        Rectangle:
            pos: self.x + 50, self.y + 50
            size: 500, 100

And now when you run the app, the rectangle should be red:

And so it is. But watch what happens if I put the Color context instruction after the Rectangle vertex instruction:

# File name: test.kv

<TestLayout>:
    canvas:        
        Rectangle:
            pos: self.x + 50, self.y + 50
            size: 500, 100
        Color:
            rgba: 1, 0, 0, 1

Python Jumpstart Course

Learn the basics of Python, including OOP.

with lots of exercises, easy to follow

The course is available on Udemy.

Now the rectangle will remain white:

Why is that? Well, that’s because context instructions change the whole coordinate space context. If you change the color at a given point, the change will be only visible from that moment on and will continue to be visible until another change occurs. So, when we put the Color instruction before the Rectangle instruction, we changed the color property for the whole coordinate space and then we drew the Rectangle in this changed context. That’s why the rectangle was red. In the other example, we first drew the rectangle and only then changed the coordinate space context, that’s why the rectangle remained white.

So, if you want the rectangle to be red, make sure the Color instruction precedes the Rectangle instruction again.

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.