Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Kivy - A Versatile Framework for mobile and des...

Kivy - A Versatile Framework for mobile and desktop

tips: prefer to watch the video than the slides, almost every slides are tied to a Kivy demo.

I'll publish the video url as soon as i get it.

Mathieu Virbel

July 04, 2013
Tweet

More Decks by Mathieu Virbel

Other Decks in Programming

Transcript

  1. Audience Museum: Project Nantes 1900 ➔ Ubuntu / Kivy /

    Panda 3D by Devocite - http://devocite.com/ #kivy 4/56
  2. Audience Education: Logotouch ➔ Android and iOS Kivy / Redis

    / Pika (RabbitMQ) by Erasme - http://erasme.org/ #kivy 5/56
  3. Audience Gaming: Flat Jewels ➔ Android (iOS later) Kivy Already

    on the Play Store by Melting Rocks - http://meltingrocks.com/ #kivy 6/56
  4. Audience Business: ProcessCraft / BPMN 2.0 ➔ Android / iOS

    / Desktops + Kivy by Showgen Ltd - http://showgen.com/ #kivy 7/56
  5. Organization All the projects are available at github.com/kivy #kivy 7

    core developers 18 public projects 2 mailing lists (kivy-users, kivy-dev) > 1000 users IRC channel #kivy · · · · 8/56
  6. Kivy - OpenGL ES UI Toolkit Projects Toolchains Packaging Bridges

    #kivy Android: python-for-android iOS: kivy-ios · · Buildozer Cloud builder · · Pyjnius: Python - Java Pyobjus: Python - Objective-C · · 9/56
  7. Kivy - Widgets Extensive Widget collection Goal: simple and easy-to-assemble

    widgets #kivy Label, Button, CheckBox, Image, Slider, ProgressBar, Switch TextInput with multiple lines, password, hint-text, CodeInput 5 Layouts: Grid, Box, Anchor, Float, Stack Complex widgets: Bubble, Dropdown list, Filechooser, Popup, Spinner, ListView, TabbedPanel, ... Screen manager and custom screen transition (designed during Europython 2012 sprints) Interactions like scatter, zoom, pan, rotate · · · · · · ➔ 10/56
  8. Kivy - Widgets #kivy f r o m k i

    v y . a p p i m p o r t A p p f r o m k i v y . u i x . b u t t o n i m p o r t B u t t o n c l a s s H e l l o K i v y ( A p p ) : d e f b u i l d ( s e l f ) : r e t u r n B u t t o n ( t e x t = ' H e l l o ' , f o n t _ s i z e = ' 2 0 d p ' ) H e l l o K i v y ( ) . r u n ( ) ➔ P Y T H O N 11/56
  9. Kivy - Widgets #kivy f r o m k i

    v y . a p p i m p o r t A p p f r o m k i v y . u i x . b u t t o n i m p o r t B u t t o n c l a s s H e l l o K i v y ( A p p ) : d e f b u i l d ( s e l f ) : s e l f . c o u n t = 0 b t n = B u t t o n ( t e x t = ' H e l l o ' , f o n t _ s i z e = ' 2 0 d p ' ) b t n . b i n d ( o n _ p r e s s = s e l f . i n c r e m e n t ) r e t u r n b t n d e f i n c r e m e n t ( s e l f , b u t t o n ) : s e l f . c o u n t + = 1 b t n . t e x t = ' H e l l o { } ' . f o r m a t ( s e l f . c o u n t ) H e l l o K i v y ( ) . r u n ( ) ➔ P Y T H O N 12/56
  10. Kivy - Widgets #kivy f r o m k i

    v y . a p p i m p o r t A p p f r o m k i v y . u i x . b u t t o n i m p o r t B u t t o n f r o m k i v y . u i x . s w i t c h i m p o r t S w i t c h f r o m k i v y . u i x . b o x l a y o u t i m p o r t B o x L a y o u t c l a s s H e l l o K i v y ( A p p ) : d e f b u i l d ( s e l f ) : r o o t = B o x L a y o u t ( ) r o o t . a d d _ w i d g e t ( B u t t o n ( t e x t = ' H e l l o ' ) ) r o o t . a d d _ w i d g e t ( S w i t c h ( ) ) r o o t . a d d _ w i d g e t ( B u t t o n ( t e x t = ' W o r l d ' ) ) r e t u r n r o o t H e l l o K i v y ( ) . r u n ( ) ➔ P Y T H O N 13/56
  11. Kivy - Widgets #kivy f r o m k i

    v y . a p p i m p o r t A p p f r o m k i v y . u i x . b u t t o n i m p o r t B u t t o n f r o m k i v y . u i x . s w i t c h i m p o r t S w i t c h f r o m k i v y . u i x . b o x l a y o u t i m p o r t B o x L a y o u t c l a s s H e l l o K i v y ( A p p ) : d e f b u i l d ( s e l f ) : r o o t = B o x L a y o u t ( p a d d i n g = ' 2 0 d p ' , s p a c i n g = ' 2 0 d p ' ) r o o t . a d d _ w i d g e t ( B u t t o n ( t e x t = ' H e l l o ' ) ) r o o t . a d d _ w i d g e t ( S w i t c h ( ) ) r o o t . a d d _ w i d g e t ( B u t t o n ( t e x t = ' W o r l d ' ) ) r e t u r n r o o t H e l l o K i v y ( ) . r u n ( ) ➔ P Y T H O N 14/56
  12. Kivy - Widgets #kivy f r o m g l

    o b i m p o r t g l o b f r o m k i v y . a p p i m p o r t A p p f r o m k i v y . u i x . c a r o u s e l i m p o r t C a r o u s e l f r o m k i v y . u i x . i m a g e i m p o r t I m a g e c l a s s H e l l o K i v y ( A p p ) : d e f b u i l d ( s e l f ) : r o o t = C a r o u s e l ( d i r e c t i o n = ' r i g h t ' , l o o p = T r u e ) f o r f n i n g l o b ( ' i m a g e s / * . j p g ' ) : r o o t . a d d _ w i d g e t ( I m a g e ( s o u r c e = f n ) ) r e t u r n r o o t H e l l o K i v y ( ) . r u n ( ) ➔ P Y T H O N 15/56
  13. Kivy - Properties #kivy Observer pattern: Value checking: Error handlers:

    · EventDispatcher or Widget classes d i s p a t c h e r . b i n d ( p r o p e r t y = c a l l b a c k ) d i s p a t c h e r . u n b i n d ( p r o p e r t y = c a l l b a c k ) - - - · b n p = B o u n d e d N u m e r i c P r o p e r t y ( 0 , m i n = - 5 0 0 , m a x = 5 0 0 ) Will raise a Exception if the value if out of the bounds - - · b n p = B o u n d e d N u m e r i c P r o p e r t y ( 0 , m i n = - 5 0 0 , m a x = 5 0 0 , e r r o r v a l u e = 0 ) b n p = B o u n d e d N u m e r i c P r o p e r t y ( 0 , m i n = - 5 0 0 , m a x = 5 0 0 , e r r o r h a n d l e r = l a m b d a x : 5 0 0 i f x > 5 0 0 e l s e - 5 0 0 ) - - 16/56
  14. Kivy - Properties #kivy f r o m k i

    v y . a p p i m p o r t A p p f r o m k i v y . u i x . b u t t o n i m p o r t B u t t o n f r o m k i v y . p r o p e r t i e s i m p o r t N u m e r i c P r o p e r t y c l a s s H e l l o K i v y ( A p p ) : c o u n t = N u m e r i c P r o p e r t y ( 0 ) d e f b u i l d ( s e l f ) : s e l f . c o u n t = 0 b t n = B u t t o n ( t e x t = ' H e l l o ' , f o n t _ s i z e = ' 2 0 d p ' ) b t n . b i n d ( o n _ p r e s s = s e l f . i n c r e m e n t ) r e t u r n b t n d e f i n c r e m e n t ( s e l f , b u t t o n ) : s e l f . c o u n t + = 1 H e l l o K i v y ( ) . r u n ( ) ➔ P Y T H O N 17/56
  15. Kivy - Properties #kivy c l a s s H

    e l l o K i v y ( A p p ) : c o u n t = N u m e r i c P r o p e r t y ( 0 ) d e f b u i l d ( s e l f ) : s e l f . b i n d ( c o u n t = s e l f . u p d a t e _ w i d g e t s ) s e l f . b t n = B u t t o n ( t e x t = ' H e l l o ' , f o n t _ s i z e = ' 2 0 d p ' ) s e l f . b t n . b i n d ( o n _ p r e s s = s e l f . i n c r e m e n t ) r e t u r n s e l f . b t n d e f i n c r e m e n t ( s e l f , b u t t o n ) : s e l f . c o u n t + = 1 d e f u p d a t e _ w i d g e t s ( s e l f , a p p , v a l u e ) : s e l f . b t n . t e x t = ' H e l l o { } ' . f o r m a t ( s e l f . c o u n t ) ➔ P Y T H O N 18/56
  16. Kivy - Language Motivation Easier UI composition, styling, and connecting

    components 3 types of constructions #kivy Kv rule: "style" that apply to a widget class Root widget: instanciate a widget for you Dynamic classes: create widget class on-the-fly · · · 19/56
  17. Kivy - Language #kivy f r o m k i

    v y . a p p i m p o r t A p p f r o m k i v y . u i x . b o x l a y o u t i m p o r t B o x L a y o u t f r o m k i v y . p r o p e r t i e s i m p o r t N u m e r i c P r o p e r t y c l a s s M a i n U I ( B o x L a y o u t ) : p a s s c l a s s D e m o K v ( A p p ) : c o u n t = N u m e r i c P r o p e r t y ( 0 ) d e f b u i l d ( s e l f ) : r e t u r n M a i n U I ( ) D e m o K v ( ) . r u n ( ) ➔ P Y T H O N 20/56
  18. Kivy - Language #kivy # : k i v y

    1 . 7 . 1 < M a i n U I > : o r i e n t a t i o n : ' h o r i z o n t a l ' L a b e l : t e x t : ' C o u n t : { } ' . f o r m a t ( a p p . c o u n t ) B u t t o n : t e x t : ' P r e s s m e ' o n _ p r e s s : a p p . c o u n t + = 1 ➔ K V 21/56
  19. Kivy - Language Reserved keywords Dynamic inspection and bindings #kivy

    self: represent the current widget in the tree root: represent the top widget in the kv rule app: instance of the current running application · · · < M a i n U I > : L a b e l : x : r o o t . x + r o o t . w i d t h / 2 . y : r o o t . c e n t e r _ y P Y T H O N 22/56
  20. Kivy - Language #kivy # : k i v y

    1 . 7 . 1 < M a i n U I > : o r i e n t a t i o n : ' h o r i z o n t a l ' i f s e l f . w i d t h > s e l f . h e i g h t e l s e ' v e r t i c a l ' L a b e l : t e x t : ' V a l u e : { : 2 f } ' . f o r m a t ( s l i d e r . v a l u e ) f o n t _ s i z e : ' 2 0 d p ' S l i d e r : i d : s l i d e r ➔ K V 23/56
  21. Kivy - Language #kivy # : k i v y

    1 . 7 . 1 < N u m b e r e d S l i d e r @ S l i d e r > : L a b e l : t e x t : s t r ( i n t ( r o o t . v a l u e ) ) f o n t _ s i z e : ' 2 0 d p ' w i d t h : s e l f . t e x t u r e _ s i z e [ 0 ] x : r o o t . v a l u e _ p o s [ 0 ] - s e l f . w i d t h / 2 . c e n t e r _ y : r o o t . c e n t e r _ y + d p ( 3 0 ) < M a i n U I > : N u m b e r e d S l i d e r : v a l u e : 5 0 m i n : 1 0 m a x : 9 0 ➔ K V 24/56
  22. Kivy - Graphics #kivy Everything is GPU accelerated (GLES) 3D

    and Shaders (if you know what you're doing... power!) Optimized rendering using Cython/C Graphics Instructions for sequential programming & "JIT graphics compiler" Also eases porting, if there is a GPU, GLES isn't far away... · · · · · 25/56
  23. Kivy - Graphics #kivy # : k i v y

    1 . 7 . 1 < - N u m b e r e d S l i d e r @ S l i d e r > : c a n v a s : C o l o r : r g b : 1 , 0 , 0 R e c t a n g l e : p o s : s e l f . p o s s i z e : s e l f . w i d t h * s e l f . v a l u e _ n o r m a l i z e d , s e l f . h e i g h t ➔ K V 26/56
  24. Kivy - Graphics #kivy # : k i v y

    1 . 7 . 1 < - N u m b e r e d S l i d e r @ S l i d e r > : s i z e _ h i n t _ y : N o n e h e i g h t : ' 4 8 d p ' c a n v a s : C o l o r : r g b : . 2 , . 2 , . 2 R e c t a n g l e : p o s : s e l f . p o s s i z e : s e l f . s i z e C o l o r : r g b : s e l f . v a l u e _ n o r m a l i z e d , 1 - s e l f . v a l u e _ n o r m a l i z e d , 0 R e c t a n g l e : p o s : s e l f . p o s s i z e : s e l f . w i d t h * s e l f . v a l u e _ n o r m a l i z e d , s e l f . h e i g h t ➔ K V 27/56
  25. Kivy - Graphics #kivy # : k i v y

    1 . 7 . 1 < - N u m b e r e d S l i d e r @ S l i d e r > : s i z e _ h i n t _ y : N o n e h e i g h t : ' 4 8 d p ' c a n v a s : C o l o r : r g b : 1 - s e l f . v a l u e _ n o r m a l i z e d , 1 - s e l f . v a l u e _ n o r m a l i z e d , 0 R e c t a n g l e : p o s : s e l f . p o s s i z e : s e l f . w i d t h * s e l f . v a l u e _ n o r m a l i z e d , s e l f . h e i g h t s o u r c e : ' a t l a s : / / d a t a / i m a g e s / d e f a u l t t h e m e / s l i d e r _ c u r s o r ' ➔ K V 28/56
  26. Kivy - Graphics #kivy # : k i v y

    1 . 7 . 1 < - N u m b e r e d S l i d e r @ S l i d e r > : s i z e _ h i n t _ y : N o n e h e i g h t : ' 4 8 d p ' c a n v a s : C o l o r : r g b : 1 - s e l f . v a l u e _ n o r m a l i z e d , 1 - s e l f . v a l u e _ n o r m a l i z e d , 0 B o r d e r I m a g e : b o r d e r : 2 4 , 2 4 , 2 4 , 2 4 p o s : s e l f . p o s s i z e : s e l f . w i d t h * s e l f . v a l u e _ n o r m a l i z e d , s e l f . h e i g h t s o u r c e : ' a t l a s : / / d a t a / i m a g e s / d e f a u l t t h e m e / s l i d e r _ c u r s o r ' ➔ K V 29/56
  27. Kivy - Input #kivy Fundamentally based on concept of multi-input

    Conceptual tools / approaches to event handling / interpretation Provider based library design / architechture · · · 30/56
  28. Kivy - Core Providers Providers / Interfaces for: #kivy Image,

    Font Rendering, Window, Video, Audio, Camera, Clipboard, Spelling, etc. Load/process/store/render accessible to Python and/or GL Allows swapping out Dependencies Makes porting / supporting new platforms easier · · · · 31/56
  29. Kivy - Develop once... Develop & test on workstation, deploy

    to mobile...(not emulated) #kivy Linux, OSX, Windows Android, iOS Raspberry Pi · · · 32/56
  30. Kivy - And a _lot_ more #kivy Metrics (px, pt,

    mm, cm, sp, dp) Modules: screen, inspector, ... Garden: user widget library · · · 33/56
  31. Android - Python-for-android Goals: make compilation for Android easier. #kivy

    Compile Python and others modules to ARM Provide a build.py script to assemble your Application into an APK · · 34/56
  32. Android - Python-for-android Install the prerequisites Setup the environment #kivy

    Android SDK Android NDK · · s u d o a p t - g e t i n s t a l l b u i l d - e s s e n t i a l g i t - c o r e c c a c h e a n t p y t h o n - p i p p y t h o n - d e v p i p i n s t a l l - - u p g r a d e c y t h o n e x p o r t A N D R O I D S D K = " / h o m e / t i t o / c o d e / a n d r o i d / a n d r o i d - s d k - l i n u x " e x p o r t A N D R O I D N D K = " / h o m e / t i t o / c o d e / a n d r o i d / a n d r o i d - n d k - r 8 e " e x p o r t A N D R O I D N D K V E R = r 8 e e x p o r t A N D R O I D A P I = 2 1 e x p o r t P A T H = $ A N D R O I D N D K : $ A N D R O I D S D K / t o o l s : $ A N D R O I D S D K / p l a t f o r m - t o o l s / : $ P A T H B A S H 35/56
  33. Android - Python-for-android Compile the toolchain #kivy $ g i

    t c l o n e g i t : / / g i t h u b . c o m / k i v y / p y t h o n - f o r - a n d r o i d $ c d p y t h o n - f o r - a n d r o i d $ . / d i s t r i b u t e . s h - m ' k i v y ' . . . l o t o f s t u f f h a p p e n . . . m a y b e a n e r r o r b e c a u s e y o u m i s s e d s o m e p r e r e q u i s i t e s A l l d o n e ! B A S H 36/56
  34. Android - Python-for-android Package your application #kivy $ c d

    d i s t / d e f a u l t $ . / b u i l d . p y - - n a m e ' T o u c h t r a c e r ' - - p a c k a g e o r g . t e s t . t o u c h t r a c e r \ - - v e r s i o n 1 . 0 - - p r i v a t e ~ / c o d e / k i v y / e x a m p l e s / d e m o / t o u c h t r a c e r / \ d e b u g $ a d b i n s t a l l - r b i n / T o u c h t r a c e r - 1 . 0 - d e b u g . a p k $ a d b l o g c a t . . . d e m o t i m e . B A S H 37/56
  35. Android - Python-for-android Limitations Available recipes: android audiostream cymunk docutils

    ffmpeg hostpython jpeg kivy libxml2 libxslt lxml mysql_connector numpy openssl paramiko pil png pyasn1 pycrypto pygame pyjnius pylibpd pyopenssl pyqrcode python sdl setuptools sqlite3 twisted txws wokkel zope #kivy Pure python module need to be copied into the application Python extensions require a recipes.. and sometimes patches. · · 38/56
  36. iOS - Kivy-iOS Different organization than python-for-android But that's the

    same steps: #kivy Compile the toolchain Create a Xcode project for your application · · 39/56
  37. iOS - Kivy-iOS Compile the toolchain #kivy $ g i

    t c l o n e g i t : / / g i t h u b . c o m / k i v y / k i v y - i o s $ c d k i v y - i o s $ t o o l s / b u i l d - a l l . s h B A S H 40/56
  38. iOS - Kivy-iOS Create the XCode project #kivy $ t

    o o l s / c r e a t e - x c o d e - p r o j e c t . s h t o u c h t r a c e r \ ~ / c o d e / k i v y / e x a m p l e s / d e m o / t o u c h t r a c e r $ o p e n a p p - t o u c h t r a c e r / t o u c h t r a c e r . x c o d e p r o j B A S H 41/56
  39. Android / iOS toolchain I don't like them It can

    be better It can be smarter #kivy 42/56
  40. Buildozer #kivy Unified specification file named buildozer.spec Install all the

    prerequisites (Android NDK, SDK, Cython...) Compile the toolchain Install the pure-python module in a virtualenv Copy the virtualenv into your application Patch your main.py to include the virtualenv Create the package (APK, IPA...) Deploy on 1 or multiple devices Run the application on the device Tail the logs from the device to your console · · · · · · · · · · 44/56
  41. Buildozer #kivy $ b u i l d o z

    e r i n i t $ b u i l d o z e r a n d r o i d d e b u g d e p l o y r u n l o g c a t # o r s e t a d e f a u l t $ b u i l d o z e r s e t d e f a u l t a n d r o i d d e b u g d e p l o y r u n l o g c a t $ b u i l d o z e r # o r e x e c u t e i n a r e m o t e s s h d e v i c e $ b u i l d o z e r - r e m o t e 1 9 2 . 1 6 8 . x . x i o s d e b u g d e p l o y r u n B A S H 45/56
  42. Accessing mobile API PyJNIus - Access Java classes from Python

    PyOBJus - Access Objective-C from Python #kivy Works on Desktop and Android It uses JNI / Java reflection · · It uses Objective C reflection (Still in progress, doesn't work) · · 47/56
  43. Accessing mobile API: PyJNIus Using Text-To-Speech: Make your phone say

    "Hello World" #kivy f r o m j n i u s i m p o r t a u t o c l a s s L o c a l e = a u t o c l a s s ( ' j a v a . u t i l . L o c a l e ' ) P y t h o n A c t i v i t y = a u t o c l a s s ( ' o r g . r e n p y . a n d r o i d . P y t h o n A c t i v i t y ' ) T e x t T o S p e e c h = a u t o c l a s s ( ' a n d r o i d . s p e e c h . t t s . T e x t T o S p e e c h ' ) t t s = T e x t T o S p e e c h ( P y t h o n A c t i v i t y . m A c t i v i t y , N o n e ) t t s . s e t L a n g u a g e ( L o c a l e . U S ) t t s . s p e a k ( ' H e l l o W o r l d . ' , T e x t T o S p e e c h . Q U E U E _ F L U S H , N o n e ) t t s . s e t L a n g u a g e ( L o c a l e . I T A L Y ) t t s . s p e a k ( ' B u o n g i o r n o s i g n o r e ' , T e x t T o S p e e c h . Q U E U E _ F L U S H , N o n e ) P Y T H O N 48/56
  44. Accessing mobile API: PyJNIus One step further: implement Java class

    in Python! (wip). #kivy c l a s s G p s L i s t e n e r ( P y t h o n J a v a C l a s s ) : _ _ j a v a i n t e r f a c e s _ _ = [ ' a n d r o i d / l o c a t i o n / L o c a t i o n L i s t e n e r ' ] @ j a v a _ m e t h o d ( ' ( L a n d r o i d / l o c a t i o n / L o c a t i o n ; ) ' ) d e f o n L o c a t i o n C h a n g e d ( s e l f , l o c a t i o n ) : p r i n t ' l a t ' , l o c a t i o n . g e t L a t i t u d e ( ) p r i n t ' l o n ' , l o c a t i o n . g e t L o n g i t u d e ( ) L o c a t i o n M a n a g e r = a u t o c l a s s ( ' a n d r o i d . l o c a t i o n . L o c a t i o n M a n a g e r ' ) P y t h o n A c t i v i t y = a u t o c l a s s ( ' o r g . r e n p y . a n d r o i d . P y t h o n A c t i v i t y ' ) C o n t e x t = a u t o c l a s s ( ' a n d r o i d . c o n t e n t . C o n t e x t ' ) l o c a t i o n M a n a g e r = P y t h o n A c t i v i t y . m A c t i v i t y . g e t S y s t e m S e r v i c e ( C o n t e x t . L O C A T I O N _ S E R V I C E ) l o c a t i o n M a n a g e r . r e q u e s t L o c a t i o n U p d a t e s ( L o c a t i o n M a n a g e r . G P S _ P R O V I D E R , 1 0 0 0 0 , 1 0 , G p s L i s t e n e r ( ) ) P Y T H O N 49/56
  45. Accessing mobile API: Plyer Goal: Platform-independant wrapper for python, for

    platform-dependant apis Accessing easily to accelerometer, gps, camera, etc. Started this week! #kivy f r o m p l y e r i m p o r t n o t i f i c a t i o n n o t i f i c a t i o n . n o t i f y ( t i t l e = ' H e l l o ' , m e s s a g e = ' W o r l d ' ) P Y T H O N 50/56
  46. Google Summer of Code This year, we are under the

    Umbrella of PSF. 2 students are working on Kivy: #kivy Abhinav: Working on Kivy Designer Ivan Pusic: Making PyOBJus a reality · · 51/56
  47. Funding PSF granted $5,000 USD to Kivy project for porting

    Kivy and all the subprojects to Python 3.3 ➔ Done in master, same basecode for 2.7 and 3.3 ➔ Next version will be Python 3.3 ready :) Thank you PSF! #kivy 52/56
  48. Funding We asked $600 USD to run Kivy on Raspberry

    Pi from Bounty Source We got funded in 5 days ! ➔ POC done and released in 1.7.0 The next step was $1,000 USD for doing a POC with ANGLE on Windows. It's still under progress. Thank you backers! #kivy 53/56