Kivy Interactive Applications and Games in Python Cheat Sheet

by Ibrahim Omar via cheatography.com/58047/cs/15365/

Layouts layouts 2 (cont) layouts 2 (cont)

propor​tional ("pe​rce​nta​ges​" of the total size of size_ A proportion from Yes No y, top or Fixed Yes, but don't Yes
coordi​nates the window) rather than fixed hint_x 0 to 1 or None, center_y number use y, top or
coordi​nates (exact pixels).[ 10 ] size_ indicating width of center_y in
hint_y (size_ hint_x) or pixels. pos_hint
size_hint size_hint: .4, .3
height (size_
pos_hint: pos_hint: {'right': 1, 'y': 0}
hint_y). Graphics – the Canvas Chapter 2
{'x': 0, 'top':
pos_hint Dictionary with Yes No
1} Kivy is a set of drawing instru​ctions
one x-axis key (x,
pos_hint: would align a widget in the Canvas that define the graphical
center_x, or right)
{'cent​er_​x':. middle no matter the size of the repres​ent​ation of Widget .
and one y-axis
5, window. coordinate the place in which we draw.All the
key (y, center_y,
'cente​r_y​':.5 space Kivy widgets share the same
or top). The
} coordinate space, and a Canvas
values are
pos: root.x, we should have used: x: 0 top: instance, the instru​ctions to draw
propor​tions from
root.top - root.h​eight on it. A coordinate space is not
0 to 1.
self.h​eight restricted to the size of the
size A pair w, h: w Yes, but Yes
window or the applic​ation screen,
The properties x, center_x, right, y, center_y, and h indicating set
which means that we can draw
and top always specify fixed coordi​nates fixed width and size_
outside of the visible area.
(pixels), and not propor​tional ones. If we want height in pixels. hint:
to use propor​tional coordi​nates, we have to be (None,
Unders​tanding the canvas Chapter 2
inside a Layout (or an App) and use the None)
pos_hint property. • The coordinate space refers to the place in
width Fixed number of Yes, but Yes
pixels. set which we draw, which is not
Drawing basic shapes 2 Chapter 2 size_ restricted to the windows size

hint_x: • A Canvas object is a set of instru​ctions to

Ellipse works very similar to Rectangle , but it
None draw in the coordinate space,
has three new proper​ties:
not the place we draw in
angle_​start, angle_end, and height Fixed number of Yes, but Yes
• All Widget objects contain their own Canvas
segments. pixels. set
(canvases, which we will
size_
http:/​/ki​vy.o​rg​/do​cs/​api​- see later) but all of them share the same
ki​vy.g​ra​phi​cs.v​er​tex​_in​str​uct​ion​s.html hint_y:
coordinate space, the one in the
None
App object.
layouts 2 pos A pair x, y Yes, but Yes All the graphics instru​ctions added to different
indicating a fixed don't Canvas
Property Value For For
coordinate (x, y) use objects, which at the same time belong to
layouts widgets
in pixels. pos_hint different Widget
size_hint A pair w, h: w, Yes No objects, affect the same coordinate space. It is
x, right Fixed number of Yes, but Yes
and h express or pixels. don't our task to
a proportion center_x use x,
(from 0 to 1 or
right or
None).
center_x
in
pos_hint

By Ibrahim Omar Not published yet. Sponsored by Readability-Score.com

cheatography.com/ibrahim-omar/ Last updated 3rd April, 2018. Measure your website readability!
Page 1 of 3. https://readability-score.com
 Kivy Interactive Applications and Games in Python Cheat Sheet
by Ibrahim Omar via cheatography.com/58047/cs/15365/

Unders​tanding the canvas Chapter 2 (cont) Drawing basic shapes Chapter 2 (cont) LAYOUT 3 (cont)

make sure that the coordinate space is in its from the pos and size properties of Widget, GridLayout Organizes widgets in a grid. You
original state since they belong to have to specify at least one of
after modifying it with the graphics instru​ctions. the Vertex​Ins​tru​ction base class. All the values two properties – cols (for
A Widget is also a place marker (with its to specify the columns) or rows (for rows).
position and size), properties of the vertex instru​ctions are given in
BoxLayout Organizes widgets in one row or
but not necess​arily a placeh​older. The fixed values.
one column depending on
instru​ctions of the
whether the value of the
canvas of a widget are not restricted to the float layout orient​ation property is horizontal
specific area of or vertical.
the widget but to the whole coordinate space. We can also force a Layout to use fixed values,
but there can be conflicts if we are StackL​ayout Similar to BoxLayout, but it goes
not careful with the proper​ties. If we use any to the next row or column when
Drawing basic shapes Chapter 2
Layout ; pos_hint and size_hint take it runs out of space. There is
The vertex instru​ctions inherit from the priority. If we want to use fixed positi​oning more flexib​ility to set the
Vertex​Ins​tru​ction base properties ( pos , x , center_x , right , orient​ation. For example, rl-bt
class, and allow us to draw vector shapes in the y , center_y , top ), we have to ensure that we organizes the widgets in
coordinate space. are not using the pos_hint property. right-​to-​left, bottom​-to-top order.
The context instru​ctions (Color, Rotate, Second, if we want to use the size , height , or Any combin​ation of lr (left to
Translate, and Scale) width proper​ties, then we need to right), rl (right to left), tb (top to
inherit from the Contex​tIn​str​uction base class, set a None value to the size_hint axis we want bottom), and bt (bottom to top)
and let us apply to use with absolute values.[ 13 ] is allowed.
transf​orm​ations to the coordinate space Scatte​rLayo Works in a similar manner to
context. By coordinate space LAYOUT 3 ut Relati​veL​ayout but allows
context, we mean the conditions in which the multitouch gesturing for rotating,
Layout Details
shapes (specified in the scaling, and transl​ating. It is
vertex instru​ctions) are drawn in the coordinate FloatL​ Organizes the widgets with slightly different in its
space. ayout propor​tional coordi​nates by the implem​ent​ation, so we will
Basically, vertex instru​ctions are what we draw size_hint and pos_hint proper​ties. review it later on.
and context instru​ctions affect The values are numbers between 0
PageLayout Stacks widgets on top of each
where and how we draw. and 1, indicating a proportion to the
other, creating a multipage
This means that we cannot use the size_hint or window size.
effect that allows flipping of
pos_hint properties as we did
Relati​v Operates in the same way that pages using side borders. Very
with the widgets in Chapter 1, GUI Basics –
eL​ayou FloatL​ayout does, but the positi​oning often, we will use another layout
Building an Interface. However, we can
t properties (pos, x, center_x, right, y, to organize elements inside
use the properties of self to achieve similar center_y, top) are relative to the each of the pages, which are
results (Line 18 and 19). Layout size and not the window size. simply widgets.
Rectangle is a good starting point because it
resembles the way we set properties Anchor The Anchor​Layout aligns its
in widgets. We just have to set the pos and size layout children to a border (top,
proper​ties. bottom, left, right) or center.
The pos and size properties of the vertex
instru​ctions are different

By Ibrahim Omar Not published yet. Sponsored by Readability-Score.com

cheatography.com/ibrahim-omar/ Last updated 3rd April, 2018. Measure your website readability!
Page 2 of 3. https://readability-score.com
 Kivy Interactive Applications and Games in Python Cheat Sheet
by Ibrahim Omar via cheatography.com/58047/cs/15365/

Embedding layouts Our project – Comic Creator Chapter 1

(cont)
Note that pos_hint always uses relative
coordi​nates, no matter the markup a nice feature for styling the text of
layout we are using. In other words, the the Label class. It works in a similar
previous example wouldn't manner to XML-based
have worked if we were using pos_hint instead langua​ges.do​cum​ent​ation for Label (
of pos.[ 17 ] http:/​/ki​vy.o​rg​/do​cs/​api​-
ki​vy.u​ix.la​bel.html ).
PageLayout – swiping pages

The PageLayout works in a different manner

from other layouts. It is a dynamic
layout, in the sense that it allows flipping
through pages using its borders. The idea
is that its components are stacked in front of
each other, and we can just see the one
that is on top.

PageLayout – swiping pages 2

If we want to apply changes to all the child

widgets that have
a common base class (such as Layout), we can
introduce those
changes in the base class. Kivy will apply the
changes to all the
classes that derive from it.[ 21 ]

Our project – Comic Creator Chapter 1

Kivy id Kivy id which allows us to refer to

other components inside the Kivy
language.

Toggle​B The difference with the normal

utton Button is that it stays pressed until
we click on it again.

group A Toggle​Button instance can be

property associated with other Toggle​Button
instances, so just one of them is
clicked on at a time. We can achieve
this by assigning the same group
property (line 250) to the
Toggle​Button instances that we want
to react together.

By Ibrahim Omar Not published yet. Sponsored by Readability-Score.com

cheatography.com/ibrahim-omar/ Last updated 3rd April, 2018. Measure your website readability!
Page 3 of 3. https://readability-score.com