1. GUI design with Python –examples from crystallography Bernhard Lohkamp Karolinska Institute Stockholm Sweden

2. Coot - Who are we – why am I here? Paul Emsley (Oxford; everything) Bernhard Lohkamp (Stockholm; Python, GUI, Windows) Kevin Cowtan (York; crystallographic libraries & tools) Eugene Krissinel, Stuart McNicholas, and others... Bernhard.Lohkamp@ki.se

3. COOT • Graphical (Crystallographic-Object)-Oriented Toolkit • Used in macromolecular (X-ray) crystallography • Main aims: • Model building • Model completion • Model validation • Graphical, interactive, intuitive, … Bernhard.Lohkamp@ki.se

4. G(raphical) U(ser) I(nterface)GUI <-> UI • Allow end users to interact with application • Interface can be simple (e.g. command line) to complex (graphical) • Good UI: • Intuitive • Easy to use/learn • Note: applications with good UI are preferred to ones with inferior ones (independent of quality of application!?) Bernhard.Lohkamp@ki.se

5. What do you prefer? >>> delete_residue(10) Bernhard.Lohkamp@ki.se

6. GUIs • Good things about GUI • Intuitive (if designed properly) • More efficient (e.g., putting the cursor at a particular location) • Multiple activities simultaneously • Bad things about GUI • Inefficient (if mis-designed) • Difficult to automate (e.g. difficult to write a program to push a button in another application) • Speed Bernhard.Lohkamp@ki.se

7. The challenge of GUI programming • programming model must address the following issues: • user allowed to perform different things (e.g. type a character, type a hot-key, click on a button, resize the window, obscure the window with another application, minimize it, etc.) • program needs to adapt to different window size (and with it all its content) • Solution: • event-driven model • widget systems (controlled by a geometry manager) • Use Toolkits == TK Bernhard.Lohkamp@ki.se

8. Windows manager/Desktop Forms of interactionevents in context • Human Interface Device (HID) control Bernhard.Lohkamp@ki.se

9. Windowing system/hierarchy • Lots of layers • Not very efficient • Slow (not necessary to be fast?!) Bernhard.Lohkamp@ki.se

10. Connect GUI with Python • Direct via script • GUI design tools and IDEs (Integrated Development Environments) • GUI builder • GUI to build a GUI application • Useful especially for larger projects • Output usually xml • Use directly • Translate to Python script Bernhard.Lohkamp@ki.se

11. GUI modules for Python (I)(Toolkits, cross-platform) • PyGTK (Gnome): Coot • TK: GTK+ (GIMP Tool Kit) • Well supported • Builder (Glade) • xml direct • Not native on Mac (yet) • PyQt (KDE): CCP4mg – molecular graphics • TK: Qt (“cu-te”) • Licence issue? • Native • Builder (Designer) • xml->python Bernhard.Lohkamp@ki.se

12. GUI modules for Python (II) • Tk(Inter): PyMOL • TK: Tk • Tkinter Python Tk interface • Distributed with python • Not OO • Builder (GUI builder) • wxPython: Phenix • TK: wxWidgets • Builder (wxGlade) • Native • ? Bernhard.Lohkamp@ki.se

13. Nomenclature/Widgets • Widget: “windowing gadget”, which means “a useful building block (gadget) to make a windowing system”. • Hierarchy (exemplified): Bernhard.Lohkamp@ki.se

14. Widget examples • Top level (independent widgets): • Main window • Various (pre-defined) dialogs Bernhard.Lohkamp@ki.se

15. Dialogs (I) • Info (Message) dialog • Dialog box Bernhard.Lohkamp@ki.se

16. Dialogs (II) • About dialog • Assistant Bernhard.Lohkamp@ki.se

17. Dialogs (III) • Selection dialogs • Files • Colours • Fonts • …. Bernhard.Lohkamp@ki.se

18. Containers/Layout • Boxes • Vertical • Horizontal • Combined (grid, table) • Scrolled window • Tabbed widgets/notebook • Frames • Panes Bernhard.Lohkamp@ki.se

19. Boxed layout Bernhard.Lohkamp@ki.se

20. tabs Tabbed window/Notebook Bernhard.Lohkamp@ki.se

21. Buttons • Button • Toggle button • Check button • Spin button • Radio button • Pre-defined buttons • Files • Colours • Fonts • … Bernhard.Lohkamp@ki.se

22. Input & Entries (I) • Menu • Toolbar Bernhard.Lohkamp@ki.se

23. Menus • Submenus • Icons • Accelerators Bernhard.Lohkamp@ki.se

24. Context menu • Shown upon event (usually mouse click) Bernhard.Lohkamp@ki.se

25. Toolbars • Like menus but contain icons/buttons • Short-cut for frequently used functions Bernhard.Lohkamp@ki.se

26. Toolbar Bernhard.Lohkamp@ki.se

27. Change Style Bernhard.Lohkamp@ki.se

28. Text only Bernhard.Lohkamp@ki.se

29. Text and Icons Bernhard.Lohkamp@ki.se

30. Toolbar Detouch/ Handle Bernhard.Lohkamp@ki.se

31. detouched Bernhard.Lohkamp@ki.se

32. Input & Entries (I) • Combobox – spin button • Simple Entry: Bernhard.Lohkamp@ki.se

33. Input & Entries (II) • Entry: • Auto-completion possible • Sliders Bernhard.Lohkamp@ki.se

34. List/Tree structures Bernhard.Lohkamp@ki.se

35. Can include: icons, buttons, … Bernhard.Lohkamp@ki.se

36. Tree-> expansion Bernhard.Lohkamp@ki.se

37. Miscellaneous widgets • Progress bar • Status bar Bernhard.Lohkamp@ki.se

38. Canvas • Drawing area • Canvas/cairo drawing (e.g. PyGoocanvas) • OpenGL drawing (e.g. PyOpenGL, PyGtkGLExt) • Can be interactive Bernhard.Lohkamp@ki.se

39. Tooltips • Pop ups with text (upon mouse over) • Helps to explore the GUI without reading help files • Use whenever you can (!?) Bernhard.Lohkamp@ki.se

40. GUI designWhat makes a good UI? • Simple • Intuitive • Respects the commonly accepted conventions • Visually organized • Native look Bernhard.Lohkamp@ki.se

41. Designing UIs • Two levels: • Graphical: visual aspect • Events: Functionality • Basic blocks = widgets • Making an application react to events = binding Bernhard.Lohkamp@ki.se

42. General concepts • Main loop and events • Packing • Showing • How to do. Bernhard.Lohkamp@ki.se

43. Main loop and events • TK mainloop: • Event loop • Idle until an event happens (e.g. a button is pushed, a menu is pulled, etc.) • Quit when program (GUI) finishes • Can have multiple loops (count!!) • PyGTK: gtk.main() • TKinter: tk.mainloop() • PyQT: application.exec_() Bernhard.Lohkamp@ki.se

44. Main loop and events • Events (examples): • Keyboard (key-pressed, key-released) • Mouse (button-pressed, button-released, motion, wheel, …) • Window/widget (resize, destroy, visibility, activate, deactivate, …) • Etc. • Event modifiers (Shift, Alt, …) • Events emit signals • Can be connected with callbacks (functions, methods) Bernhard.Lohkamp@ki.se

45. Callbacks and signals • Callback functions/bindings: • functions, methods • do something when event happens (e.g. button pressed) • PyGTK: object.connect(signal_name, callback_func, func_data) def callback_func(widget, callback_data): def callback_meth(self, widget, callback_data): • Tkinter: Button(master, text="OK", command=callback) def callback_func(): • PyQT: connect(widget, signal, callback_func) Bernhard.Lohkamp@ki.se

46. Synergy between objects and widgets • Variables are passed automatically within class • refer to them as self.whatever • No need to pass variables • Callback functions • Easy to handle • No need to define callbacks on the fly (lambda functions) Bernhard.Lohkamp@ki.se

47. Packing • Add widget to container • Pack widget in boxes • PyGTK: container_widget.add(widget) box_object.pack_start(child, expand, fill, padding) • Tkinter: object.pack(various_options) • PyQT: Layout.addWidget(widget) Bernhard.Lohkamp@ki.se

48. Packing • Homogeneous (equal space for everyone) HBox(True/False, 0) • Expand, fill box.pack(expand=, fill=) Bernhard.Lohkamp@ki.se

49. Showing • Widgets itself do not show (neither do they do anything else -> connect signals!) • Need to show every (!) widget • Can hide widgets • Usually collective show for all • PyGTK: widget.show() widget.hide() widget.show_all() • Tkinter: Done via mainloop • PyQT: widget.show() widget.hide() Bernhard.Lohkamp@ki.se

50. window VBox HBox Label Entry ScrolledWindow TextBuffer Button Simple example • GUI command input • Schematic in terms of widgets Bernhard.Lohkamp@ki.se