\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Ibrahim Omar}
\pdfinfo{
  /Title (kivy-interactive-applications-and-games-in-python.pdf)
  /Creator (Cheatography)
  /Author (Ibrahim Omar)
  /Subject (Kivy Interactive Applications and Games in Python Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{35A32E}
\definecolor{LightBackground}{HTML}{F2F9F1}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Kivy Interactive Applications and Games in Python Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Ibrahim Omar} via \textcolor{DarkBackground}{\uline{cheatography.com/58047/cs/15365/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Ibrahim Omar \\
  \uline{cheatography.com/ibrahim-omar} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 3rd April, 2018.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Layouts}}  \tn
% Row 0
\SetRowColor{LightBackground}
proportional coordinates & ("percentages" of the total size of the window) rather than fixed coordinates (exact pixels).{[} 10 {]} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
size\_hint & size\_hint: .4, .3 \tn 
% Row Count 6 (+ 1)
% Row 2
\SetRowColor{LightBackground}
pos\_hint: \{'x': 0, 'top': 1\} & pos\_hint: \{'right': 1, 'y': 0\} \tn 
% Row Count 8 (+ 2)
% Row 3
\SetRowColor{white}
pos\_hint: \{'center\_x':.5, 'center\_y':.5\} & would align a widget in the middle no matter the size of the window. \tn 
% Row Count 12 (+ 4)
% Row 4
\SetRowColor{LightBackground}
pos: root.x, root.top - self.height & we should have used: x: 0 top: root.height \tn 
% Row Count 15 (+ 3)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{The properties x, center\_x, right, y, center\_y, and top always specify fixed coordinates (pixels), and not proportional ones. If we want to use proportional coordinates, we have to be inside a Layout (or an App) and use the pos\_hint property.} \tn 
% Row Count 20 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.74655 cm} x{4.23045 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Drawing basic shapes 2 Chapter 2}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Ellipse} & works very similar to Rectangle , but it has three new properties: angle\_start, angle\_end, and segments. \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{http://kivy.org/docs/api-kivy.graphics.vertex\_instructions.html}} \tn 
% Row Count 6 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{0.91894 cm} x{1.42018 cm} x{1.42018 cm} p{0.4177 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{4}{x{5.377cm}}{\bf\textcolor{white}{layouts 2}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Property} & Value & For layouts & For \seqsplit{widgets} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{size\_hint} & A pair w, h: w, and h express a proportion (from 0 to 1 or None). & Yes & No \tn 
% Row Count 8 (+ 5)
% Row 2
\SetRowColor{LightBackground}
size\_ hint\_x size\_ hint\_y & A proportion from 0 to 1 or None, indicating width (size\_ hint\_x) or height (size\_ hint\_y). & Yes & No \tn 
% Row Count 15 (+ 7)
% Row 3
\SetRowColor{white}
\seqsplit{pos\_hint} & Dictionary with one x-axis key (x, center\_x, or right) and one y-axis key (y, center\_y, or top). The values are proportions from 0 to 1. & Yes & No \tn 
% Row Count 26 (+ 11)
% Row 4
\SetRowColor{LightBackground}
size & A pair w, h: w and h indicating fixed width and height in pixels. & Yes, but set size\_ hint: (None, None) & Yes \tn 
% Row Count 31 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{0.91894 cm} x{1.42018 cm} x{1.42018 cm} p{0.4177 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{4}{x{5.377cm}}{\bf\textcolor{white}{layouts 2 (cont)}}  \tn
% Row 5
\SetRowColor{LightBackground}
width & Fixed number of pixels. & Yes, but set size\_ hint\_x: None & Yes \tn 
% Row Count 3 (+ 3)
% Row 6
\SetRowColor{white}
height & Fixed number of pixels. & Yes, but set size\_ hint\_y: None & Yes \tn 
% Row Count 6 (+ 3)
% Row 7
\SetRowColor{LightBackground}
pos & A pair x, y indicating a fixed coordinate (x, y) in pixels. & Yes, but don't use pos\_hint & Yes \tn 
% Row Count 11 (+ 5)
% Row 8
\SetRowColor{white}
x, right or \seqsplit{center\_x} & Fixed number of pixels. & Yes, but don't use x, right or center\_x in pos\_hint & Yes \tn 
% Row Count 15 (+ 4)
% Row 9
\SetRowColor{LightBackground}
y, top or \seqsplit{center\_y} & Fixed number of pixels. & Yes, but don't use y, top or center\_y in pos\_hint & Yes \tn 
% Row Count 19 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}----}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.44333 cm} x{3.53367 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Graphics – the Canvas Chapter 2}}  \tn
% Row 0
\SetRowColor{LightBackground}
Kivy Canvas & is a set of drawing instructions that define the graphical representation of Widget . \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
coordinate space & the place in which we draw.All the Kivy widgets share the same coordinate space, and a Canvas instance, the instructions to draw on it. A coordinate space is not restricted to the size of the window or the application screen, which means that we can draw outside of the visible area. \tn 
% Row Count 15 (+ 11)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Understanding the canvas Chapter 2}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{•	 The coordinate space refers to the place in which we draw, which is not \newline % Row Count 2 (+ 2)
restricted to the windows size \newline % Row Count 3 (+ 1)
•	 A Canvas object is a set of instructions to draw in the coordinate space, \newline % Row Count 5 (+ 2)
not the place we draw in \newline % Row Count 6 (+ 1)
•	 All Widget objects contain their own Canvas (canvases, which we will \newline % Row Count 8 (+ 2)
see later) but all of them share the same coordinate space, the one in the \newline % Row Count 10 (+ 2)
App object. \newline % Row Count 11 (+ 1)
All the graphics instructions added to different Canvas \newline % Row Count 13 (+ 2)
objects, which at the same time belong to different Widget \newline % Row Count 15 (+ 2)
objects, affect the same coordinate space. It is our task to \newline % Row Count 17 (+ 2)
make sure that the coordinate space is in its original state \newline % Row Count 19 (+ 2)
after modifying it with the graphics instructions. \newline % Row Count 21 (+ 2)
A Widget is also a place marker (with its position and size), \newline % Row Count 23 (+ 2)
but not necessarily a placeholder. The instructions of the \newline % Row Count 25 (+ 2)
canvas of a widget are not restricted to the specific area of \newline % Row Count 27 (+ 2)
the widget but to the whole coordinate space.% Row Count 28 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Drawing basic shapes Chapter 2}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{The vertex instructions inherit from the VertexInstruction base \newline % Row Count 2 (+ 2)
class, and allow us to draw vector shapes in the coordinate space. \newline % Row Count 4 (+ 2)
The context instructions (Color, Rotate, Translate, and Scale) \newline % Row Count 6 (+ 2)
inherit from the ContextInstruction base class, and let us apply \newline % Row Count 8 (+ 2)
transformations to the coordinate space context. By coordinate space \newline % Row Count 10 (+ 2)
context, we mean the conditions in which the shapes (specified in the \newline % Row Count 12 (+ 2)
vertex instructions) are drawn in the coordinate space. \newline % Row Count 14 (+ 2)
Basically, vertex instructions are what we draw and context instructions affect \newline % Row Count 16 (+ 2)
where and how we draw. \newline % Row Count 17 (+ 1)
This means that we cannot use the size\_hint or pos\_hint properties as we did \newline % Row Count 19 (+ 2)
with the widgets in Chapter 1, GUI Basics – Building an Interface. However, we can \newline % Row Count 21 (+ 2)
use the properties of self to achieve similar results (Line 18 and 19). \newline % Row Count 23 (+ 2)
Rectangle is a good starting point because it resembles the way we set properties \newline % Row Count 25 (+ 2)
in widgets. We just have to set the pos and size properties. \newline % Row Count 27 (+ 2)
The pos and size properties of the vertex instructions are different \newline % Row Count 29 (+ 2)
from the pos and size properties of Widget, since they belong to \newline % Row Count 31 (+ 2)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Drawing basic shapes Chapter 2 (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{the VertexInstruction base class. All the values to specify the \newline % Row Count 2 (+ 2)
properties of the vertex instructions are given in fixed values.% Row Count 4 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{float layout}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{We can also force a Layout to use fixed values, but there can be conflicts if we are \newline % Row Count 2 (+ 2)
not careful with the properties. If we use any Layout ; pos\_hint and size\_hint take \newline % Row Count 4 (+ 2)
priority. If we want to use fixed positioning properties ( pos , x , center\_x , right , \newline % Row Count 6 (+ 2)
y , center\_y , top ), we have to ensure that we are not using the pos\_hint property. \newline % Row Count 8 (+ 2)
Second, if we want to use the size , height , or width properties, then we need to \newline % Row Count 10 (+ 2)
set a None value to the size\_hint axis we want to use with absolute values.{[} 13 {]}% Row Count 12 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.29402 cm} x{3.68298 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{LAYOUT 3}}  \tn
% Row 0
\SetRowColor{LightBackground}
Layout & Details \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{FloatLayout} & Organizes the widgets with proportional coordinates by the size\_hint and pos\_hint properties. The values are numbers between 0 and 1, indicating a proportion to the window size. \tn 
% Row Count 8 (+ 7)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{RelativeLayout} & Operates in the same way that FloatLayout does, but the positioning properties (pos, x, center\_x, right, y, center\_y, top) are relative to the Layout size and not the window size. \tn 
% Row Count 15 (+ 7)
% Row 3
\SetRowColor{white}
\seqsplit{GridLayout} & Organizes widgets in a grid. You have to specify at least one of two properties – cols (for columns) or rows (for rows). \tn 
% Row Count 20 (+ 5)
% Row 4
\SetRowColor{LightBackground}
BoxLayout & Organizes widgets in one row or one column depending on whether the value of the orientation property is horizontal or vertical. \tn 
% Row Count 25 (+ 5)
% Row 5
\SetRowColor{white}
\seqsplit{StackLayout} & Similar to BoxLayout, but it goes to the next row or column when it runs out of space. There is more flexibility to set the orientation. For example, rl-bt organizes the widgets in right-to-left, bottom-to-top order. Any combination of lr (left to right), rl (right to left), tb (top to bottom), and bt (bottom to top) is allowed. \tn 
% Row Count 37 (+ 12)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{1.29402 cm} x{3.68298 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{LAYOUT 3 (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
\seqsplit{ScatterLayout} & Works in a similar manner to RelativeLayout but allows multitouch gesturing for rotating, scaling, and translating. It is slightly different in its implementation, so we will review it later on. \tn 
% Row Count 7 (+ 7)
% Row 7
\SetRowColor{white}
\seqsplit{PageLayout} & Stacks widgets on top of each other, creating a multipage effect that allows flipping of pages using side borders. Very often, we will use another layout to organize elements inside each of the pages, which are simply widgets. \tn 
% Row Count 15 (+ 8)
% Row 8
\SetRowColor{LightBackground}
Anchor layout & The AnchorLayout aligns its children to a border (top, bottom, left, right) or center. \tn 
% Row Count 18 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Embedding layouts}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Note that pos\_hint always uses relative coordinates, no matter the \newline % Row Count 2 (+ 2)
layout we are using. In other words, the previous example wouldn't \newline % Row Count 4 (+ 2)
have worked if we were using pos\_hint instead of pos.{[} 17 {]}% Row Count 6 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{PageLayout – swiping pages}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{The PageLayout works in a different manner from other layouts. It is a dynamic \newline % Row Count 2 (+ 2)
layout, in the sense that it allows flipping through pages using its borders. The idea \newline % Row Count 4 (+ 2)
is that its components are stacked in front of each other, and we can just see the one \newline % Row Count 6 (+ 2)
that is on top.% Row Count 7 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{PageLayout – swiping pages 2}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{If we want to apply changes to all the child widgets that have \newline % Row Count 2 (+ 2)
a common base class (such as Layout), we can introduce those \newline % Row Count 4 (+ 2)
changes in the base class. Kivy will apply the changes to all the \newline % Row Count 6 (+ 2)
classes that derive from it.{[} 21 {]}% Row Count 7 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.29402 cm} x{3.68298 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Our project – Comic Creator Chapter 1}}  \tn
% Row 0
\SetRowColor{LightBackground}
Kivy id & Kivy id which allows us to refer to other components inside the Kivy language. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{ToggleButton} & The difference with the normal Button is that it stays pressed until we click on it again. \tn 
% Row Count 7 (+ 4)
% Row 2
\SetRowColor{LightBackground}
group property & A ToggleButton instance can be associated with other ToggleButton 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 ToggleButton instances that we want to react together. \tn 
% Row Count 16 (+ 9)
% Row 3
\SetRowColor{white}
markup & a nice feature for styling the text of the Label class. It works in a similar manner to XML-based languages.documentation for Label ( \seqsplit{http://kivy.org/docs/api-kivy.uix.label.html} ). \tn 
% Row Count 23 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}