gui design with python – examples from crystallography bernhard lohkamp karolinska institute...

GUI design with Python –examples from crystallography

Bernhard Lohkamp

Karolinska Institute

Stockholm

Sweden

7/5/10Bernhard.Lohkamp@ki.se

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...

Graphical (Crystallographic-Object)-Oriented Toolkit

Used in macromolecular (X-ray) crystallography

Main aims:Model buildingModel completionModel validation

Graphical, interactive, intuitive, …

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:

IntuitiveEasy to use/learn

Note: applications with good UI are preferred to ones with inferior ones (independent of quality of application!?)

What do you prefer?

>>> delete_residue(10)

Good things about GUIIntuitive (if designed properly)More efficient (e.g., putting the cursor at a particular

location)Multiple activities simultaneously

Bad things about GUIInefficient (if mis-designed)Difficult to automate (e.g. difficult to write a program

to push a button in another application)Speed

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 modelwidget systems (controlled by a geometry manager)

Use Toolkits == TK

Forms of interactionevents in context

Human Interface Device (HID)

control

Windows manager/Desktop

Windowing system/hierarchy Lots of layers Not very efficient Slow (not necessary to be fast?!)

Our script (in Python): Real application

TK (in Python): glue to TK

TK Python plugin (usually in C): translate to TK calls

TK widgets (usually in C): Widget implementation

TK library (usually C): glue to windowing system

Windows managing system (e.g. X)

Connect GUI with Python

Direct via script GUI design tools and

IDEs (Integrated Development Environments)GUI builderGUI to build a GUI

applicationUseful especially for larger

projectsOutput usually xml

Use directly Translate to Python script

GUI modules for Python (I)(Toolkits, cross-platform) PyGTK (Gnome): Coot

TK: GTK+ (GIMP Tool Kit)Well supportedBuilder (Glade)

xml directNot native on Mac (yet)

PyQt (KDE): CCP4mg – molecular graphicsTK: Qt (“cu-te”)Licence issue?NativeBuilder (Designer)

xml->python

GUI modules for Python (II)

Tk(Inter): PyMOLTK: TkTkinter Python Tk interfaceDistributed with pythonNot OOBuilder (GUI builder)

wxPython: PhenixTK: wxWidgetsBuilder (wxGlade)Native?

Nomenclature/Widgets

Widget: “windowing gadget”, which means “a useful building block (gadget) to make a windowing system”.

Hierarchy (exemplified):

Widget examples

Top level (independent widgets):Main windowVarious (pre-

defined) dialogs

Dialogs (I)

Info (Message) dialog

Dialog box

Dialogs (II)

About dialog

Assistant

Dialogs (III)

Selection dialogsFilesColoursFonts….

Containers/Layout

BoxesVerticalHorizontalCombined (grid, table)

Scrolled window Tabbed

widgets/notebook Frames Panes

Boxed layout

Tabbed window/Notebook tabs

Buttons

Button Toggle button Check button Spin button Radio button Pre-defined buttons

FilesColoursFonts…

Input & Entries (I)

Toolbar

Submenus Icons Accelerators

Context menu

Shown upon event (usually mouse click)

Toolbars

Like menus but contain icons/buttons Short-cut for frequently used functions

Toolbar

Change

Toolbar

Detouch/

Handle

detouched

Input & Entries (I)

Combobox – spin button

Simple Entry:

Input & Entries (II)

Entry:Auto-completion possible

Sliders

List/Tree structures

Can include: icons, buttons, …

Tree-> expansion

Miscellaneous widgets

Progress bar

Status bar

Canvas

Drawing area Canvas/cairo drawing

(e.g. PyGoocanvas) OpenGL drawing (e.g.

PyOpenGL, PyGtkGLExt)

Can be interactive

Tooltips

Pop ups with text (upon mouse over)

Helps to explore the GUI without reading help files

Use whenever you can (!?)

GUI designWhat makes a good UI?

Simple Intuitive Respects the commonly accepted conventions Visually organized Native look

Designing UIs

Two levels:Graphical: visual aspectEvents: Functionality

Basic blocks = widgets Making an application react to events = binding

General concepts

Main loop and events Packing Showing

How to do.

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) finishesCan have multiple loops (count!!)

PyGTK: gtk.main() TKinter: tk.mainloop() PyQT:application.exec_()

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)

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)

Synergy between objects and widgets

Variables are passed automatically within class refer to them as self.whatever No need to pass variables

Callback functionsEasy to handleNo need to define callbacks on the fly (lambda functions)

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)

Packing

Homogeneous (equal space for everyone) HBox(True/False, 0)

Expand, fill box.pack(expand=, fill=)

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()

Simple example

GUI command input

Schematic in terms of widgets

window

HBoxLabel Entry

ScrolledWindowTextBuffer

Button

Simple example- make window

# import gtk module

import gtk

# create a main window

window = gtk.Window(gtk.WINDOW_TOPLEVEL)

# set the title

window.set_title("Coot Python Scripting")

# set some more properties (if we wish)

window.set_default_size(400,250)

Simple example- create widgets

# create other needed widgets: boxes, label, entry, …

vbox = gtk.VBox(homogeneous=False, spacing=0)

hbox = gtk.HBox(False, 0)

label = gtk.Label("Command: ")

entry = gtk.Entry()

scrolled_win = gtk.ScrolledWindow()

text = gtk.TextView()

textbuffer = text.get_buffer()

close_button = gtk.Button(" Close ")

Simple example- pack it in

# add vbox in window

window.add(vbox)

# pack the hbox and pack into the vbox

hbox.pack_start(child=label, expand=False, fill=False, padding=0)

hbox.pack_start(entry, True, True, 0)

vbox.pack_start(hbox, False, False, 5)

window

HBoxLabel Entry

Button

Simple example- pack it in

# pack the scrolled text area

scrolled_win.add(text)

vbox.add(scrolled_win)

# and finally the button

vbox.pack_end(close_button, False, False, 5)

window

HBoxLabel Entry

Button

Simple example- show it

# show everything connected to the window

window.show_all()

# run the main loop

gtk.main()

Simple example- making it functional (close button)

Does not perform any function (yet) Main loop never stops connect callbacks and signals

# connect close_button (no further args)

close_button.connect(“clicked”, close_callback)

# define callback: destroy window, quit gtk loop

def close_callback(widget):

window.destroy()

gtk.main_quit()

Simple example- making it functional (destroy window)

Closing window does not finish gtk loop Deal with delete event

# connect delete_event (two args, but no extra)

window.connect(“delete_event”, delete_event_cb)

# define callback: quit gtk main loop

def delete_event_cb(widget, event):

gtk.main_quit()

Simple example- making it functional (entry)

# do something with entry when enter is pressed

entry.connect(“activate”, do_callback)

# what to do

def do_callback(widget):

entry_text = widget.get_text()

print “input is”, entry_text

# erase the entry

widget.set_text(“”)

# do something with the text,

# e.g. put in text

# scrolled window

end = textbuffer.get_end_iter()

textbuffer.insert(end, str(entry_text + "\n"))

Glade (GUI builders)

Editor

Properties

Inspector

Palette

Output xml file Two different ‘formats’ (libglade, builder)

==> my_test3.libglade <==

<?xml version="1.0"?>

<glade-interface>

<child>

<property name="orientation">vertical</property>

==> my_test3.glade <==

<?xml version="1.0"?>

<child>

<property name="orientation">vertical</property>

Connect to python script Keep GUI/widgets and events separate Useful for larger projects (easy to add, remove, clean)

import pygtk, gtk

builder = gtk.Builder()

builder.add_from_file(“my_file.glade”)

# get the main window and connect event

window = builder.get_object(“window1”)

window.connect("destroy", gtk.main_quit)

# show and run

window.show_all()

gtk.main()

Glade – connect more signals

Use automatic connection

# dictionary of callbacks (name of signal,

# callback function)

dic = { "on_button1_clicked" : button1_cb,

"on_button2_toggled" : button2_cb,

"on_window1_destroy" : gtk.main_quit }

# define some callbacks

def button1_cb(widget): print “button 1 pressed”

def button2_cb(widget): print “button 2 toggled”

# connect the signals

builder.connect_signals(dic)

(lib)glade

same principle (as for gtk.Builder) slightly different syntax

The higher end implementationsCombining C/C++/Python/GTK

Python

Pythoninterface

Pythonfunctions

Coot and Python

C(++)-functions

Python functions(objects)

Gtk+ objects(graphics)

return value

Pythonscripting functions

Main Menubar

Addition of individual menu items

Accessing existing menus

Main Toolbar

Extra toolbuttons

Main Toolbar

Pop-up menu to manage toolbuttons

Some hints for your own design:Organize

Some hints for your own design:group related items

Some hints for your own design:keep it simple

Some hints for your own design:don’t reinvent the wheel – keep conventions

Use standard menu items Use standard icons Carefully choose colours:

colour blindness!!

Further information on GUI/Python/TKs GUI

http://www.guidebookgallery.org/index http://www.asktog.com/basics/firstPrinciples.html http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html http://www-01.ibm.com/software/ucd/designconcepts.html http://library.gnome.org/devel/hig-book/stable/intro.html.en

PyGTK, Glade http://www.pygtk.org/ http://glade.gnome.org/ http://live.gnome.org/Glade/Tutorials http://www.micahcarrick.com/12-24-2007/gtk-glade-tutorial-part-1.html

PyQT http://www.riverbankcomputing.co.uk/static/Docs/PyQt4/pyqt4ref.html http://www.commandprompt.com/community/pyqt/ http://www.cs.usfca.edu/~afedosov/qttut/

Acknowledgements

Paul Emsley Kevin Cowtan Eleanor Dodson Keith Wilson

BBSRC & CCP4 funding

Libraries, dictionaries Alexei Vagin, Eugene Krissinel, Stuart McNicholas Dunbrack, Richardsons Coot Builders and Testers William Scott, Ezra Peisach York YSBL, Dundee, Glasgow (early adopters) Coot Mailing List subscribers

http://www.biop.ox.ac.uk/coot/

Google: Coot

http://www.ysbl.ac.uk/~lohkamp/coot

Hierarchy

gui design with python – examples from crystallography bernhard lohkamp karolinska institute...

Documents

from the neurophysiological laboratory, karolinska...

karolinska institutet international biobank and cohort...

ligand fitting and validation with coot bernhard lohkamp...

goals and assignments for karolinska institutet’s

karolinska institutet inspiration day 2013

change management at the karolinska university hospital...

karolinska industries maharashtra india

karolinska prize week 2010

research at karolinska institutet

bernhard crusell

model-building with coot an introduction bernhard lohkamp...

paralleltechniquesforphysically...

innovation at karolinska university hospital · example:...

joakim dillner, m.d. professor department of laboratory...

internationalisation strategy - karolinska...

profdoc takecare in karolinska and partners in stockholm...

karolinska development - fib · karolinska development in...

minimally invasive hernia surgery - startsida - karolinska

bernhard holzer

hola - uch.cat · karolinska university hospital and...