Kivy 4 Flashcards
Create a square that goes into your Widget Layout.
You should use a variable here to set the size
:set s dp(150)
class CanvasExample1(Widget):
pass
CanvasExample1:
<CanvasExample1>:
canvas:
Rectangle:
pos: self.center
size: s, s
</CanvasExample1>
If you want your rectangle in the center of the screen, what do you have to do? Explain
:set s dp(150)
If we center the x and y it won’t put it directly in the center, this is because widget starts from the bottom left and moves the object’s bottom left corner to the center. To fix this we subtract half of its width and height to make it go to the center
CanvasExample1:
<CanvasExample1>:
canvas:
Rectangle:
pos: self.center_x-s/2, self.center_y-s/2
size: s, s
</CanvasExample1>
Create a circle
Remember to use a variable
:set s dp(150)
CanvasExample1:
<CanvasExample1>:
canvas:
Ellipse:
pos: 200, 500
size: s, s/2
</CanvasExample1>
What is the structure for a line?
How would you make a sideways line
Turn it into a tiny mountain at the bottom of the screen
How would you make a point go to the complete right side of the screen
How do you change the size?
Line:
points:(x, y, x2, y2)
points:(0, 0 100, 100, 200, 0)
self.width
If you multiply or divide this number it will be able to follow the window better since it can resize itself
width: 4
Draw a rectangle with line
Draw an Oval
Draw a circle with line
Change the global color for everything to be red and the rectangle should be blue
canvas:
Color:
rgba: 1, 0, 0, .3
Line:
circle: (center_x, center_y, radius
Line:
ellipse: (center_x, center_y, radisu_x, radius_y)
Color:
rgba: 0, 0, 1, 1
Line:
rectangle: (x, y, w, h)
From Python rather than the kv file, create a circle and a rectangle with Line and make them green.
Make a rectangle that is colored in green
from kivy.graphics.vertex_instructions import Line
from kivy.graphics.context_instructions import Color
from kivy.graphics.vertex_instructions import Rectangle
class CanvasExample4(Widget):
def __init__(self, kwargs):
super().__init__(kwargs)
with self.canvas:
Line(points=(100, 100, 400, 500) width=2)
Color(0, 1, 0)
Line(circle=(400, 200, 80), width=2)
Line(rectangle=(700, 500, 150, 100), width=2)
Rectangle(pos=(700, 200), size=(150, 100))
# If you add color to Rectangle alone it will fill it in with that color
Create a button that moves an object
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.graphics.context_instructions import Color
from kivy.uix.gridlayout import GridLayout
from kivy.graphics.context_instructions import Color
from kivy.graphics.vertex_instructions import Line, Rectangle
from kivy.metrics import dp
class CanvasExample4(GridLayout):
def __init__(self, kwargs):
super().__init__(kwargs)
with self.canvas:
Line(points=(100, 100, 400, 500), width=2)
Color(0, 1, 0)
Line(circle=(400, 200, 80), width=2)
Line(rectangle=(700, 500, 150, 100), width=5)
self.rect = Rectangle(pos=(700, 200), size=(150, 100))
def on_button_a_click(self):
x, y self.rect.pos
x += dp(10)
self.rect.pos = (x, y)
<CanvasExample4>:
Button:
pos: 100, 400
text: 'A'
on_press: root.on_button_a_click()
</CanvasExample4>
You create a shape during initialization and want to place it in the middle of the screen. What do you do?
You’ll need to create a method that updates upon the window being created, and whenever the window is resized. This method is called ‘on_size’
class CanvasExample(Widget):
def __init__(self, kwargs):
super().__init__(kwargs)
self.ball_size = dp(50)
with self.canvas:
self.ball = Ellipse(pos=(self.center), size=(self.ball_size, self.ball_size))
def on_size(self, *args):
print('on size : ' + str(self.width) + ', ' + str(self.height))
self.ball.pos = (self.center)
To get it right in the middle
self.ball.pos = (self.center_x-self.ball_size/2, self.center_y-self.ball_size/2)
on_size - this method is called whenever the widget is resized. In this case it would be Widget’s resizing
How do you import the updater that will allow you to create animations?
What method do you need to add to utilize this?
from kivy.properties import Clock
This should be a child of init only:
Clock.schedule_interval(self.update, 1/60)
def update(self, dt):
1 - This means update every second
THE FIRST PARAMETER IN THE CLOCK COMMAND IS THE METHOD YOU WILL BE CALLING, THEY HAVE TO BE NAMED THE SAME.
How do you put canvas in your button?
How do you put it before the button and after?
CanvasExample:
<CanvasExample>:
Button:
canvas:
Rectangle
text: 'A'
canvas.before
canvas.after
</CanvasExample>
Where would you rectangle be using the following code?
What’s the only way of moving it from here
CanvasExample:
<CanvasExample>:
BoxLayout:
canvas:
Rectangle
pos: 100, 100
</CanvasExample>
0, 0
It always starts out at these coordinates… at least in widget
CanvasExample:
<CanvasExample>:
RelativeLayout:
canvas:
Rectangle
pos: 100, 100
</CanvasExample>
You have a Widget layout named CanvasLayout.
Even if you put the box layout as a child in this and add two buttons, they will be super small and in the bottom right hand corner of the screen.
How do we add BoxLayout and have it make the buttons take up the full screen?
CanvasExample:
<CanvasExample>:
BoxLayout
size: root.size
Button:
text: 'A'
Button:
text: 'B'
</CanvasExample>
CanvasExample is a widget
Create a BoxLayout that takes up the whole screen.
Make a rectangle on the left and a button on the right.
Make the rectangle Green
CanvasExample:
<CanvasExample>:
BoxLayout
size: root.size
Widget:
canvas:
Color:
rgb: 0, 1, 0
Rectangle:
size: self.size
Button:
text: 'B'
we use self.size instead of root.size because we want it to be the size of the first item in BoxLayout not the first Item in widget.
</CanvasExample>
Why will the below code only display the blue widget on the left and nothing on the right? How do we fix this?
CanvasExample:
<CanvasExample>:
BoxLayout
size: root.size
Widget:
canvas:
Color:
rgb: 0, 1, 0
Rectangle:
size: self.size
Widget:
canvas:
Color:
rgb: 0, 0, 1
Rectangle:
size: self.size
</CanvasExample>
Canvas always starts on the bottom left. To fix this add pos: self.pos
CanvasExample:
<CanvasExample>:
BoxLayout
size: root.size
Widget:
canvas:
Color:
rgb: 0, 1, 0
Rectangle:
size: self.size
Widget:
canvas:
Color:
rgb: 0, 0, 1
Rectangle:
size: self.size
pos: self.pos
the second one could also be called RelativeLayout and you could leave out the position
CanvasExample:
<CanvasExample>:
BoxLayout
size: root.size
Widget:
canvas:
Color:
rgb: 0, 1, 0
Rectangle:
size: self.size
RelativeLayout:
canvas:
Color:
rgb: 0, 0, 1
Rectangle:
size: self.size
pos: self.pos
</CanvasExample></CanvasExample>
Create a flag in BoxLayout that is Blue White and Red
CanvasExample:
<CanvasExample>:
# This will need to be Blue, White, Red
Widget:
canvas:
Color:
rgb: 0, 0, 1
Rectangle:
size: self.size
Widget:
canvas:
Color:
rgb: 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
RelativeLayout:
canvas:
Color:
rgb: 1, 0, 0
Rectangle
size: self.size
</CanvasExample>
