PyConZA 2013: "Our journey to Kivy" by Richard Larkin

In this talk, I would like to cover our companies path from Vb6, to Python, Python + wxWidgets, Python + GTK, Python + QT and then our great discovery: Python + Kivy.

As a totally cross platform solution, Kivy's approach of a fluid, responsive NUI (Native User Interface) means fast, consistent and responsive interfaces on MacOSX/Win/Linux/iOS/Android/Ouya/Rasberry Pi |+ almost anything that can can run Linux. Our first project (launched on Android +iOs + Windows) has created huge developer + user enthusiasm: everyone loves it. It has inspired me to spend every spare moment I have giving back to the Kivy project.

As a rich, full stack framework released under an MIT license, Kivy offers a very exciting, commerce friendly "run everywhere" alternative to current desktop toolsets. Built for multi-touch from the ground up and and offering a well-designed, mature, fast framework (built upon Cython + OpenGL ES for maximum speed), Kivy uses many powerful and proven design patterns to provide a powerful, elegant and flexible framework.

Looking through various examples, I will try to illustrate the depth and richness of the framework and hint at some of it's power and elegance. Using the Observer Pattern throughout, adhering to the Single Responsibility Principle, Separating UI + logic etc., Kivy embodies and implements some of the best practices and design patterns of our time.

Built for multi-touch from the ground up and carrying no legacy baggage, Kivy is thoroughly modern and future-facing alternative. It may not be perfect for all needs, but as a complete, portable application framework, I believe it's a clear best-choice for many.

Transcript

1. Kivy Python everywhere
2. Our Journey to Kivy? Kivy: an aerial view Nah, boring. Let's focus on something way cooler.
3. Kivy: an Aerial View Let's do a quick fly over of the framework. Yes, I will throw too much information at you. That is intentional: we want an idea of the scope on Kivy, not it's details Because Kivy is special. Very special.....
4. What is Kivy?
5. Why choose Kivy? Official reasons It's Fresh • Unqiue and pretty, transitions and animations make it fluid, responsive and interactive. Note: Kivy does not adopt your native OS look and feel. It gives you your own, consistent UI, everywhere. Fast • Uses Cython, so your code is compiled to native C. • Extensive and highly optimized use of the GPU. Flexible • OOP and event driven • Uses and provides proven design pattens: Observer Pattenr Single Responsivbility Principle Separation of Converns Separation of login and UI
6. Why choose Kivy? The real reasons It's Awesome! Kivy is much more that just a complete widgets toolkit. It provides: - a complete Python standard library (pyython-for-android, python-for-ios) - a rich set of libraries (Factory, Clock, Atlas, Logger etc) - OS and device abstraction (Metrics, InputProvers, Core providers) - a powerful property/event dispatching mechanism - a set of modules for assisting in developing and debugging - extensibility though kivy exentions and the Kivy garden - it's stable, proven, well designed and just damn sexy
7. Why choose Kivy? More reasons Kivy provides thoughful, easy-to-use functionality to allows costly IO to be done in background threads(using callbacks). This makes it easy to ensure your UI stays responsive without worrying about threading. - UrlRequest(url, on_success=None, on_redirect=None, ...) - AsyncImage().source = url It includes standard Animation classes handled without blocking your main thread. anim = Animation(x=50, y=200, duration=2) anim.bind(on_complete=callback) anim.start(widget) Firstly, lets go into the details of what makes kivy different. To do that, it's best to first understand how the core design choices have shaped Kivy's architecture.
8. Difference 1: Optimized for the GPU Drawing is done by OpenGL, and OpenGL is NOT a canvas! Your Python runs on the CPU, but OpenGL runs on the GPU. OpenGL is a collections of instruction groups, not an image. When your widget properties change, the instruction sets do not. Updating these instructions sets whenever your Python obect changes? Horribly inefficient. Solution? Observe!
9. Difference 1: The gotcha Why does my widget not move? Because you are changing it's Python properties, not it's OpenGL drawing instructions. First solution: bind manually in Python. Second solution: define your UI using the KV language. Solutions are easy, the trick is knowing why.
10. Difference 1: The solutions You can bind and listen for these changes manually in Python. widget.bind(on_pos=callback, on_size=callback) But that quickly becomes clumsy. Kivy offers the KV lang as a better solution. Not another language? Yes, but it's a good solution and a best practise for many reasons: - performs bindings automagically for you. - separates UI from code/logic. - gives an clear picture of your widget heirarchy. - once learnt, it's much faster to compose a UI. Examples later, but first, another reason Kivy is different.
11. Difference 2: Built for multi- touch Kivy is PyMT, reborn, optimized and implemented in OpenGL ES, the subset of Open GL available on mobile devices. It brings with a rich pedigree of multi-touch experience.
12. Difference 2: The gotcha But widget A is inside widget B! Why on earth is it in the bottom left corner? Firstly, bottom left is (0,0), not top left. Secondly, the widgets heirarchy is NOT a visaul container heirarchy: it's an event bubbling heirarchy. Containers are used for layout, but widgets are not artificially constrained to areas. This allows for total control of layout and gives you full control of the entire screen. It also facilitates seamless layering. Just pop in another layout, and you can seemlessly float anything anywhere.
13. Difference 2: Another gotcha What? Wherever I click, all the widgets "on_touch_down" events fire? Don't think windows and rectangles! That 's very 95. The idea of rectangular widget with pre-defined borders breaks down in a touch enviroment. Example. You want a widget to receive a swipe in event. By definition, that event begins outside of the widget. In a touch envronment, widgets need new degrees of freedom to monitor input. Kivy widgets are not limited by their size and position in either output or input. These are just properties! Yes please! Give me the power! So how do widgets get touch events? Observe!
14. Difference 2: The solution Apply the 'Observer Pattern' By binding to specific events, any widget can react to almost any event with minimal overhead. This does not prescribe how events are handled. It allows total flexibility and puts you in control. It helps write better code in may ways. They are the perfect examples of solving a problem well, and the solution being applicable across concerns.
15. Let's get dirty Almost all of the challenges Kivy faces are solved in an elegant and consistent way: observing. Ironically, the solutions actually improve the framework and increase it's flexibility. And it only gets more impressive as you get deeper. But enough bluster. Let's get dirty! Let's dive into some details;-)
16. Python Properties using Decorators Okay, so a hidden variable. Err...@text.setter? Pretty cryptic. And two "text" methods? Isn't there a better way?
17. Python Properties using property() Gee, 4 things. Okay, still a hidden variable. Gee, a "getter", a "setter" and then something to combine them into a property? Please, isn't there a better way?
18. Python Properties using Kivy Yes, welcome to the Kivy awesome! It looks like a "static" class method, but Kivy magically bind values to each instance. Want to watch for changes? But wait, it gets better.
19. Python Properties with Restrictions Using normal properties, restricting properties to certain values involves something like this: Using Kivy properties: There are many more: StringProperty, ObjectProperty etc. And yes, you can create our own. The really awesome thing is they do much more than normal properties...
20. Kivy Properties are Event Dispatchers Kivy properties are also subscribable event dispatchers. So Kivy properties provide not only a more elegant and concise property syntax, but add the ability to listen for events. Using normal properties to create an event-driven architecture? Yes please! They help in many ways: optimization, separation of concerns, assigning single responsibilities, avoiding state variables and object references and well as flexilbilty. In short, they totally rock!
21. Touch made easy Kivy's rich pedigree of experience shows. Touch = Mouse. Touch is just richer i.e. has some extra properties. The Touch object is a complete representation of the entire touch event, and in passed into all of these methods: on_touch_down on_touch_move on_touch_up The 'on_touch-down' event is dispatched to every widget that requests to listen. If the widget wishes to monitor the event, it can "grab" it in the "on_touch_down" and will then receive all subsequent "on_touch_move" and "pn_touch_up" events".
22. The Touch Object The touch object is a specialized instance of the MotionEvent class. These are ojects generated by InputProviders. Nicely abstracted and easy to use. Here are some of the Touch object's interesting propeties: 'apply_transform_2d', 'clear_graphics', 'copy_to', 'depack', 'device', 'distance', 'double_tap_time', 'dpos', 'dsx', 'dsy', 'dsz', 'dx', 'dy', 'dz', 'grab', 'grab_current', 'grab_exclusive_class', 'grab_list', 'grab_state', 'id', 'is_double_tap', 'is_mouse_scrolling', 'is_touch', 'is_triple_tap', 'move', 'opos', 'osx', 'osy', 'osz', 'ox', 'oy', 'oz', 'pop', 'pos', 'ppos', 'profile', 'psx', 'psy', 'psz', 'push', 'push_attrs', 'push_attrs_stack', 'px', 'py', 'pz', 'scale_for_screen', 'shape', 'spos', 'sx', 'sy', 'sz', 'time_end', 'time_start', 'time_update', 'triple_tap_time', 'ud', 'uid', 'ungrab', 'update_graphics', 'update_time_end', 'x', 'y', 'z'] As you can see, the Touch object maintains detailed information about the entire interaction so we dont' need to. Special mention: notice the Z axis? Kivy also supports 3D gesture input, currently via the Leap Motion and Microsoft Kinect.
23. Grabbing a touch You can grab a touch if you absolutly want to receive these events: on_touch_move() on_touch_up() Touch events normally bubble through the widget hierarchy until one of those methods returns True, indicating the event has been handled. Grabbing a touch ensures you get all it's subsequent events. Very powerful: it allows widgets to receive touch events independent of visual placement. Let's look at an example.
24. Grabbing a Touch: an example
25. From Touch to Gestures Touch is great, but how do we use it for detecting gestures? Converting input points to gestures is, err, challenging i.e. damn difficult. But don't worry, Kivy does it all for you. Let's look at an example.
26. Gesture Recognition Easy to access Gesture databases built in, with normalization.!
27. Recording Gestures This means you can record gestures and store them for later comparison against input. Makes creating a gesture vocabulary dead simple.
28. The Widgets We will launch the Kivy Showcase demo from the Kivy Windows portable package. Self-contained: can be run on systems irrespective on their current Python installation. Contains: all Kivy source code, examples and a complete Cython install with all Kivy libraries. About 75mb zipped, but your installation can be much smaller if packaged with PyInstaller.
29. Other Notable Widgets The ScreenManager By default, apps are one 'Screen'. The ScreenManager allows you to create multiple screens and switch between them. You get a whole lot of beautiful, fluid transitions for free: SlideTransition - slide screen in/out, from any direction SwapTransition - implementation of the iOS swap transition FadeTransition - shader to fade in/out the screens WipeTransition - shader to wipe from right to left the screens
30. Other Notable Widgets The Scatter The Scatter is used to build interactive widgets that can be translated, rotated and scaled with two or more fingerss on a multitouch system. It has as its own matrix transformations which makes possible to perform the rotation / scaling / translation over the entire child tree without changing their properties.
31. Other Notable Widgets The CodeInput Provides a box of editable highlited text. It supports all the features supported by the TextInput. Proivides Code highliting for languages supported by pygments along with KivyLexer for KV Language highliting.
32. Other Notable Widgets The Popup Creates modal popups. Uses lighbox effect to grey our background window. Very flexible: you pass it a 'content' property which can contain any widgets or containers.
33. Other Notable Widgets Layouts Layouts - the proper way to handle UI. Provide very fluid and elegant mechanisms to scale UI for different screen resolutions and densities. Each works differently, but generally use 'pos_hint' and 'size_hint' to request placement.
34. Customizing Widgets Many options. - create you own widget inheriting the EventDispatcher. - subclass and alter (widget.background_down, widget.background_up etc). - replace the kivy atlas with your own atlas image.
35. The Kivy Garden Not every widget or add-on you want can or should be included with Kivy. The Garden provides a repository of additional widgets that anyone can contribute to. It's maintained by the community, not the Kivy core team. Kivy ships with a garden tool and it's trivially easy to use: .
36. The Widgets in the Garden Currently, widgets in the Garden include graphs, custom spinners, navigationdraws, DatePickers etc. Some notable ones: - CEPython – an embedded Chromium browser using CEFPython (not yet stable) - Roulette – provedes a way of selecting values like iOS and android date pickers. - Filechooserthumbview - FileChooserThumbView for Kivy. - Particlesystem – A particle engine for Kivy framework And many more...
37. Something else Exciting The Kivy-Designer – A WYSIWYG UI designer. Currently being worked on by Abhinav Abhijangda as part of his Google Summer-Of-Code.
38. Kivy Modules Kivy provides some amazing tools for development and debugging. They are easy to use and activate You can also roll your own (simple module with start(win, ctx) and stop(win, ctx) methods) They include: touchring: circles each touch. monitor: shows a small FPS and activity graph. keybinding: bind keys to actions, such as a screenshot. recorder: record and playback events. screen: emulate different screens. inspector: examine your widget heirarchy webdebugger: realtime examination of your app internals via a web browser
39. Webdebugger Module Provides realtime inspection of your apps internals. It doest his using an embedded micro-webframework called flask + embedded jQuery.
40. Inspector Module The inspector allows for interactively travesing your entire widget heirarchy. It provides a complete analysis of each widget, including it's children.
41. Interactive Launcher * This is not a module, just a cool tool! The InteractiveLauncher provides a user-friendly python shell interface to an App so that it can be prototyped and debugged interactively. It supports IPython!
42. Libraries Kivy provides a rich set of libraries offering extra functionality. - Animations and transitions, Atlas, Clock, Factory, Logger, Metrics, Vector, Adaptors, Effects (ScrollEffect, DampedScrollEffect, OpacityScrollEffect + garden + roll you own), Gesture recording, playback and recognition, Shader and Stencil instructions, Asynchronous Data Loader, Utils, UrlRequest, ReStructuredText and Virtual KeyBoard. - Core abstractions including: Audio, Camera, Clipboard, OpenGL, Image, Spelling, Text, Video, Window, InputProviders. Let's quickly look as some interesting libraries.
43. Metrics Metrics provide a seamless, powerful way to work with different screens and resolutions.
44. Font sizing done right Font sizes are challenging on almost all Operating Systems and platforms. Points? So, how does that relate to my widget height? Oh, I must calculate actual width and height using this API or that one.... In Kivy, font_size is the height of the font and can be set using any metric. It's as simple as that.
45. Screen Metrics Done Right Screens feature 3 core properties that determine how things appear. All of these are trivial to access via the metrics module and trivial to log for later emulation.
46. The Factory The Factory is, predicatably enough, and implementation of the Factory pattern. Register a class, and then use it anywhere without worrying about scope. There is another bonus: any classes registered become reconizable and usable from you KV file or string.
47. The Utils Library Kivy provides a few handy, general purpose utilities. platform() # Returns one of: win, linux, android, macosx, ios, unknown. intersection(set1, set2) # return intersection of 2 lists difference(set1, set2) QueryDict # A dict() that can be queried with dot. escape_markup(text) # Escape markup characters found in the text. #Intended to be used when markup text is activated on the Label:
48. Other Cross-Platform Options Assuming Kivy was just a widget toolkit (wrong!), what other Python options do we have? GTK - Killed by the flop of GTK3 + Gnome 3. Breaking compatibility, ignoring community feedback. Qt - Limited by licensing concerns, unstable ownership, failure of QML to make significant impact on mobile. wxWigets - Version compatibility issues, slow development, no Python 3 support. PyJamas - Complicated, multiple layers of dependencies, slow, recent ownership controvery. None of them come close to offering the ease-of-development, ease-of-deployment and flexibility Kivy does.
49. Cross-platform trends Even Guido loves Kivy! 2012 saw the Python foundation donate $5000 dollars to Kivy to help the Py2-to-3 efforts.
50. So, why not use Kivy?#1 With all this yummmy goodness, the question should not be "Why Kivy?" but "Why not Kivy?". Only 3 possible reasons that come to mind. 1. I want it to run in a browser. Nope, doomed to Javascript I'm afraid. (Duh!)
51. So, why not use Kivy?#2 2. I want to leverage iOS/Windows/SharePoint/Android specific features. You often can do these things in Kivy, but does not make sense because you then depend on the OS anyway. Involves extra effort, so why use a cross-platform solution? Just use native. Notes: Python-for-android inlcudes PyJenius for accessing Java classes. Working examples of android GPS access and other android specific features exists. Use of home and back buttons, resume and pause are already supported. Accessing iOS functions from Kivy-iOS? Sorry, no idea ;-)
52. So, why not use Kivy?#3 3. We depend heavily of high level document display and printing. Kivy's support for high level document display is weak. Rst in the only supported one by deafult. No HTML renderer, but Kivy Berklium and the garden's CEFPython are trying. No SVG. There might be ways of packaging and SVG renderer such as LibRSVG, but that is desktop only. No PDF. Yet. Mathieu/tito has got it a version working Linux + Windows, and someone else on MacOSX, but there does not seem to be any current activity on this issue. Note: It is trivially easy to request the OS to open these documents with the default viewer. You only have an issue if you need to display them embedded inside of the application.
53. Otherwise, use Kivy! Kivy a truly portable, fast, powerful, mature full stack Python framework. Produces fluid, beautiful, interactive, multi-touch capable apps that run almost everywhere. Provides libraries for complete OS abstraction. Has a rich history of multi-touch experience and provides dead-simple ways of using gestures. Your apps look and behave the same everywhere - no need to cater for OS specific norms. It's released under MIT license, so it's commerce friendly. It's hosted on Github and welcomes contributions from the community. It has a high quality codebase, stricly maintained by black-belt ninja Pythonista's. It has a growing, vibrant and helful community with very active forums.
54. As a Developer I love Kivy. Staight up. But that love has been hard earned. Once learnt, it's extremely producitve. It's quick and easy to produce exciting applications. As a well-designed, flexible and stable framework: a pleasure to work with. It's really motivating for the team: free, on-my-device and sexy. The Open source license makes me fuzzy inside: to give Kivy to the entire world for free is an act of the highest nobility. Respek!
55. In Closing Kivy is an awesome, future-facing framework that deserves more attention. It's epitomises the promise of Python everywhere, and adds Cython + GPU optimization for speed and fluidity. Kivy comes from the future and has years of multi-touch experience under it's belt. But you need to see it to understand how exciting it is. http://kivy.org http://kivy.org/#gallery Huge thanks to all the Kivy devs, especially: Tito (Mathieu Virbel) qua-non (Akshay Aurora) tshirtman (Gabriel Pettier)