Building interactive applications with ETS

Prabhu Ramachandran and Pankaj Pandey

PyCon India, Bangalore September 28, 2012

Prabhu and Pankaj (Enthought)

ETS

1 / 73

About the Tutorial

Intended Audience Use Python to build interactive desktop applications Goal: Successful participants will be able to Start using Enthought Tool Suite (ETS) to build non-trivial applications

Prabhu and Pankaj (Enthought)

ETS

2 / 73

Introduction

Outline
1

Introduction ODE 101 Traits TraitsUI Chaco Mayavi Putting it all together Note on Envisage Summary
Prabhu and Pankaj (Enthought) ETS 3 / 73

2 3 4 5 6 7 8

Introduction

Prabhu and Pankaj (Enthought)

ETS

4 / 73

Introduction

Approach

A graphical explorer for ODEs from the ground up Support arbitrary 2 and 3 dimensional systems Using ETS

Prabhu and Pankaj (Enthought)

ETS

5 / 73

Introduction

Why?

Something interesting and concrete Same ideas extend to other situations

Prabhu and Pankaj (Enthought)

ETS

6 / 73

Introduction

ODE 101

Outline
1

Introduction ODE 101 Traits TraitsUI Chaco Mayavi Putting it all together Note on Envisage Summary
Prabhu and Pankaj (Enthought) ETS 7 / 73

2 3 4 5 6 7 8

Introduction

ODE 101

ODE 101
Used to model many systems
Physics, astronomy Geology (weather modeling) Chemistry (reactions) Biology Ecology/population modeling Economics (stock trends, interest rates etc.)

Rich behavior Numerical solution: scipy

Prabhu and Pankaj (Enthought)

ETS

8 / 73

Introduction

ODE 101

Simple equation

dx = f (x , t ) dt x can be a vector with many components.

(1)

Prabhu and Pankaj (Enthought)

ETS

9 / 73

Introduction

ODE 101

Solving ODEs using SciPy

Consider the spread of an epidemic in a population dy = ky (L y ) gives the spread of the disease dt L is the total population. Use L = 2.5E 5, k = 3E 5, y (0) = 250 Dene a function as below
In []: from scipy.integrate import odeint In []: def epid(y, t): .... k = 3.0e-5 .... L = 2.5e5 .... return k*y*(L-y) ....
Prabhu and Pankaj (Enthought) ETS 10 / 73

Introduction

ODE 101

Solving ODEs using SciPy . . .

In []: t = linspace(0, 12, 61) In []: y = odeint(epid, 250, t) In []: plot(t, y)

Prabhu and Pankaj (Enthought)

ETS

11 / 73

Introduction

ODE 101

Result

Prabhu and Pankaj (Enthought)

ETS

12 / 73

Lorenz equation example

dx = s (y x ) dt dy = rx y xz dt dz = xy bz dt

Species the evolution of the system Think: Velocity of a particle in 3D Lets trace its path

Solution
import numpy as np from scipy.integrate import odeint def lorenz(r, t s=10.,r=28., b=8./3.): x, y, z = r u = s*(y-x) v = r*x -y - x*z w = x*y - b*z return np.array([u, v, w]) start = (10., 50., 50.) t = np.linspace(0., 50., 2000) r = odeint(lorenz, start, t) x, y, z = r[:,0], r[:,1], r[:,2] mlab.plot3d(x, y, z, t, from mayavi import mlab tube_radius=None)

Introduction

ODE 101

Now what?

An application to explore these Use cases

Interactive exploration Change the equations on UI See output immediately Standard equations (fully setup)

Prabhu and Pankaj (Enthought)

ETS

16 / 73

Introduction

ODE 101

ETS: Enthought Tool Suite

Traits: Object Models TraitsUI: Views for Objects having Traits Chaco: 2D Visualizations Mayavi: 3D Visualizations Envisage: Application Framework

Miscellaneous libraries

Prabhu and Pankaj (Enthought)

ETS

17 / 73

Traits

Outline
1

Introduction ODE 101 Traits TraitsUI Chaco Mayavi Putting it all together Note on Envisage Summary
Prabhu and Pankaj (Enthought) ETS 18 / 73

2 3 4 5 6 7 8

Traits

Introduction to Traits

trait: Python object attribute with additional characteristics

http://code.enthought.com/projects/ traits http://github.enthought.com/traits/ tutorials

Prabhu and Pankaj (Enthought)

ETS

19 / 73

Traits

Trait features

Initialization: default value Validation: strongly typed Delegation: value delegation Notication: events Visualization: MVC, automatic GUI!

Prabhu and Pankaj (Enthought)

ETS

20 / 73

Traits Example
from traits.api import (Delegate, HasTraits, Instance, Int, Str) class Parent(HasTraits): # INITIALIZATION: last_name initialized to last_name = Str() class Child(HasTraits): age = Int # VALIDATION: father must be Parent instance father = Instance(Parent) # DELEGATION: last_name delegated to fathers last_name = Delegate(father) # NOTIFICATION: Method called when age changes def _age_changed(self, old, new): print Age changed from %s to %s % (old, new)

Traits Example
from traits.api import (Delegate, HasTraits, Instance, Int, Str) class Parent(HasTraits): # INITIALIZATION: last_name initialized to last_name = Str() class Child(HasTraits): age = Int # VALIDATION: father must be Parent instance father = Instance(Parent) # DELEGATION: last_name delegated to fathers last_name = Delegate(father) # NOTIFICATION: Method called when age changes def _age_changed(self, old, new): print Age changed from %s to %s % (old, new)

Traits Example
In In In In []: []: []: []: joe = Parent() joe.last_name = Johnson moe = Child() moe.father = joe

In []: moe.last_name # Delegation Out[]: "Johnson" In []: moe.age = 10 # Notification Age changed from 0 to 10 In []: moe.configure_traits() # Visualization
10 m

Predened Trait Types

Standard:

Bool, Int, Float, Str, Tuple, List, Dict

Constrained:

Range, Regex, Expression, ReadOnly

Special:

Either, Enum, Array, File, Color, Font

Generic: Instance, Any, Callable ... Custom traits: 2D/3D plots etc.

Trait Change Notications

Static: def _<trait_name>_changed() Decorator:

@on_trait_change(extended.trait[].name)
Dynamic:

obj.on_trait_change(handler, [extended.trait[].name])

Notication Example
class Parent(HasTraits): last_name = Str() class Child(HasTraits): age = Int father = Instance(Parent) def _age_changed(self, old, new): print Age changed from %s to %s % (old, new) @on_trait_change(father.last_name) def _dad_name_updated(self): print self.father.last_name def handler(obj, name, old, new): print obj, name, old, new c = Child(father=Parent(last_name=Ram)) c.on_trait_change(handler, [father, age])

Notication Example
class Parent(HasTraits): last_name = Str() class Child(HasTraits): age = Int father = Instance(Parent) def _age_changed(self, old, new): print Age changed from %s to %s % (old, new) @on_trait_change(father.last_name) def _dad_name_updated(self): print self.father.last_name def handler(obj, name, old, new): print obj, name, old, new c = Child(father=Parent(last_name=Ram)) c.on_trait_change(handler, [father, age])

Traits

Designing the ODE explorer app

Think!

Focus on the object model

Prabhu and Pankaj (Enthought)

ETS

26 / 73

Traits

Designing the ODE explorer app

Think!

Focus on the object model

Prabhu and Pankaj (Enthought)

ETS

26 / 73

Traits

Object model

A class to represent the equation and parameters A class for the ODE solution Make sure it works TDD

Prabhu and Pankaj (Enthought)

ETS

27 / 73

Lorenz Equation
import numpy as np from traits.api import HasTraits, Float class s r b LorenzEquation(HasTraits): = Float(10) = Float(28) = Float(8./3)

def eval(self, X, t): x, y, z = X[0], X[1], X[2] u = self.s*(y-x) v = self.r*x - y - x*z w = x*y - self.b*z return np.array([u, v, w])

Generalizing the ODE Equation model

from traits.api import (Either, HasTraits, List, Str) class ODE(HasTraits): """ An ODE of the form dX/dt = f(X) """ name = Str vars = Either(List(Str), Str, desc=The names of variables) def eval(self, X, t): """ Evaluate the derivative, f(X). """ raise NotImplementedError

Lorenz Equation as an ODE Subclass

class LorenzEquation(ODE): name = Lorenz Equation vars = [x, y, z] s = Float(10) r = Float(28) b = Float(8./3) def eval(self, X, t): x, y, z = X[0], X[1], X[2] u = self.s*(y-x) v = self.r*x - y - x*z w = x*y - self.b*z return np.array([u, v, w])

Or . . .

from traits.api import HasTraits, Range, # ... class LorenzEquation(HasTraits): # ... s = Range(0.0, 20.0, 10.0, desc=the parameter s) r = Range(0.0, 50.0, 28.0) b = Range(0.0, 10.0, 8./3) # ...

Solving the ODE: ODESolver

class ODESolver(HasTraits): ode = Instance(ODE) initial_state = Either(Float, Array) t = Array solution = Property(Array, depends_on=initial_state, t, ode) @cached_property def _get_solution(self): return self.solve() def solve(self): """ Solve the ODE and return the values of the solution vector at specified times t. """ from scipy.integrate import odeint return odeint(self.ode.eval, self.initial_state, self.t)

Solving the ODE: ODESolver

class ODESolver(HasTraits): ode = Instance(ODE) initial_state = Either(Float, Array) t = Array solution = Property(Array, depends_on=initial_state, t, ode) @cached_property def _get_solution(self): return self.solve() def solve(self): """ Solve the ODE and return the values of the solution vector at specified times t. """ from scipy.integrate import odeint return odeint(self.ode.eval, self.initial_state, self.t)

Solving the ODE: ODESolver

class ODESolver(HasTraits): ode = Instance(ODE) initial_state = Either(Float, Array) t = Array solution = Property(Array, depends_on=initial_state, t, ode) @cached_property def _get_solution(self): return self.solve() def solve(self): """ Solve the ODE and return the values of the solution vector at specified times t. """ from scipy.integrate import odeint return odeint(self.ode.eval, self.initial_state, self.t)

Testing
class TestLorenzEquation(unittest.TestCase): def setUp(self): self.ode = LorenzEquation() self.solver = ODESolver(ode=self.ode) self.solver.initial_state = [10.,50.,50.] self.solver.t = numpy.linspace(0, 10, 1001) def test_eval(self): dX = self.ode.eval(self.solver.initial_state, 0.0) self.assertAlmostEqual(dX[0], 400) self.assertAlmostEqual(dX[1], -270) self.assertAlmostEqual(dX[2], 1100/3.) def test_solve(self): soln = self.solver.solution[1,:] self.assertAlmostEqual(soln[0], 13.65484958) self.assertAlmostEqual(soln[1], 46.64090341) self.assertAlmostEqual(soln[2], 54.35797299)

Exercise

Solve an ODE Use the given skeleton code of the ODE equation (solve_ode.py) and the solver. Put them together to get a solution. Print the nal solution.

TraitsUI

Outline
1

Introduction ODE 101 Traits TraitsUI Chaco Mayavi Putting it all together Note on Envisage Summary
Prabhu and Pankaj (Enthought) ETS 35 / 73

2 3 4 5 6 7 8

TraitsUI

TraitsUI

Implement MVC design pattern Create default views for models Keep multiple views synced with model Create UI with minimal toolkit knowledge

Prabhu and Pankaj (Enthought)

ETS

36 / 73

Default Traits View

father = Parent(last_name=Joe) child = Child(age=2, father=father) child.configure_traits()
Declarative Automatic UI creation with

configure_traits()
Sync with model Sync between different views

Default Traits View

father = Parent(last_name=Joe) child = Child(age=2, father=father) child.configure_traits()
Declarative Automatic UI creation with

configure_traits()
Sync with model Sync between different views

Simplest view

If you arent happy with the defaults . . .

from traitsui.api import View, Item class LorenzEquation(ODE): # ... view = View(Item(s), Item(r), Item(b), title=Lorenz equation)

MVC?

from traitsui.api import View, Item class LorenzEquation(ODE): # ... view = View(Item(s), Item(r), Item(b)) eq = LorenzEquation() eq.configure_traits(view=view)

Views: common parameters

title: Title of the view kind: modal, live, livemodal resizable width, height buttons: OK, Cancel and other buttons id: persists view
. . . and a lot more

Items: common parameters

name: name of trait being edited label: optional label to use style: simple/custom/readonly/... show_label: True/False help: Help text for item editor: Specic editor to use defined_when: expression visible_when: expression enabled_when: expression
...

Groups

Group, VGroup, HGroup: group of items

Parameters:
label layout: normal, split, tabbed, ... show_labels: True/False defined_when, ... width, height

Lorenz Equation View

Congure the parameters of the Lorenz equation s, r and b
class LorenzEquation(ODE): ... view = View( Item(s, editor=RangeEditor(low=0.0, high=20.0)), Item(r, editor=RangeEditor(low=20.0, high=36.0)), Item(b, editor=RangeEditor(low=0.0, high=5.0)) )

Exercise

Customize the view for Lorenz equation Use the existing solve_ode.py le and setup the views for one or more of the classes (as many as you are able).

Chaco

Outline
1

Introduction ODE 101 Traits TraitsUI Chaco Mayavi Putting it all together Note on Envisage Summary
Prabhu and Pankaj (Enthought) ETS 45 / 73

2 3 4 5 6 7 8

Chaco

Chaco

2D plotting library Embeddable in any wx/Qt application Fast and interactive visualizations Integrates well with Traits and TraitsUI Easily extensible to create new types of plots and interactions

Prabhu and Pankaj (Enthought)

ETS

46 / 73

Chaco

Chaco Interactive Plotting

http://docs.enthought.com/chaco/user_manual/annotated_examples.html

Prabhu and Pankaj (Enthought)

ETS

47 / 73

Chaco

Core Ideas

Plots are compositions of visual components Separation between data and screen space Modular design and extensible classes

Prabhu and Pankaj (Enthought)

ETS

48 / 73

Chaco

Chaco Architecture Overview

Data Handling: wrap input data, transform co-ordinates between data and screen space (eg., ArrayDataSource, LinearMapper) Visual components: render to the screen (eg. Tools: handle keyboard or mouse events and modify other components (eg.

LinePlot, ScatterPlot, Legend, PlotAxi

PanTool, ZoomTool, ScatterInspector)

Prabhu and Pankaj (Enthought)

ETS

49 / 73

Simple Plotting with Chaco

class LinePlot(HasTraits): plot = Instance(Plot) traits_view = View( Item(plot,editor=ComponentEditor(), show_label=False), width=500, height=500, resizable=True, title="Chaco Plot") def _plot_default (self): x = linspace(-14, 14, 100) y = sin(x) * x**3 plotdata = ArrayPlotData(x = x, y = y) plot = Plot(plotdata) plot.plot(("x", "y"), type="line", color="blue") plot.title = "sin(x) * x^3" return plot

Chaco Data Model

Commonly used Classes

Plotting the ODE Solution

The Plot view, plot and the ODE solution. ODE can be obtained from ODESolver, so it can be a property.
class ODEPlot(HasTraits): """ A 2D plot of ode solution variables. """ plot = Instance(Component) # We need to set data when solution changes pd = Instance(ArrayPlotData, args=()) ode = Property(Instance(ODE), depends_on=solver) solver = Instance(ODESolver) def _get_ode(self): return self.solver and self.solver.ode ...

Plotting the ODE Solution

We can create a plot using the rst solution array.

class ODEPlot(HasTraits): ... traits_view = View( Item(plot, editor=ComponentEditor(), show_label=False), resizable=True, title="ODE Solution") def _plot_default(self): self.pd.set_data(index, self.solver.t) # Set the first array as value array for plot. self.pd.set_data(value, self.solver.solution[:,0]) plot = Plot(self.pd) plot.plot((index, value)) return plot

Adding some interactivity and labels

Use Chaco Tools
... def _plot_default(self): ... # Add some interactivity to the plots. plot.tools.append(ZoomTool(component=plot)) plot.tools.append(PanTool(component=plot)) plot.tools.append(TraitsTool(component=plot)) plot.x_axis.title = time plot.y_axis.title = x plot.title = self.ode.name return plot

Plotting the ODE Solution

We can make the plot react to changes to the solution (changing initial condition etc.)
class ODEPlot(HasTraits): ... @on_trait_change(solver.solution) def _on_soln_changed(self): self.pd.set_data(index, self.solver.t) self.pd.set_data(value, self.solver.solution[:, 0])

Mayavi

Outline
1

Introduction ODE 101 Traits TraitsUI Chaco Mayavi Putting it all together Note on Envisage Summary
Prabhu and Pankaj (Enthought) ETS 57 / 73

2 3 4 5 6 7 8

Mayavi

Mayavi

from mayavi import mlab

Easy to use Uses Traits/TraitsUI heavily Can embed 3D plots

Prabhu and Pankaj (Enthought)

ETS

58 / 73

A simple plot

1D data

>>> >>> >>> >>>

from numpy import * t = linspace(0, 2*pi, 50) u = cos(t)*pi x, y, z = sin(u), cos(u), sin(t)

>>> mlab.plot3d(x, y, z, t)

Changing how things look

Clearing the view

>>> mlab.clf()
IPython is your friend!

>>> mlab.points3d?
Extra argument: Scalars Keyword arguments UI

Changing how things look

Clearing the view

>>> mlab.clf()
IPython is your friend!

>>> mlab.points3d?
Extra argument: Scalars Keyword arguments UI

Embedding a 3D plot
from mayavi.core.ui.api import MayaviScene, \ MlabSceneModel, SceneEditor class Plot3D(HasTraits): scene = Instance(MlabSceneModel, args=()) view = View(Item(name=scene, editor=SceneEditor( scene_class=MayaviScene), show_label=False, resizable=True, height=500, width=500), resizable=True) @on_trait_change(scene.activated) def generate_data(self): # Create some data X, Y = mgrid[-2:2:100j, -2:2:100j] R = 10*sqrt(X**2 + Y**2) Z = sin(R)/R self.scene.mlab.surf(X,Y,Z,colormap=gist_earth)

Embedding a 3D plot
from mayavi.core.ui.api import MayaviScene, \ MlabSceneModel, SceneEditor class Plot3D(HasTraits): scene = Instance(MlabSceneModel, args=()) view = View(Item(name=scene, editor=SceneEditor( scene_class=MayaviScene), show_label=False, resizable=True, height=500, width=500), resizable=True) @on_trait_change(scene.activated) def generate_data(self): # Create some data X, Y = mgrid[-2:2:100j, -2:2:100j] R = 10*sqrt(X**2 + Y**2) Z = sin(R)/R self.scene.mlab.surf(X,Y,Z,colormap=gist_earth)

Exercise

Add a slider to the UI Add a Range slider to the above example to change the R = 10*sqrt(X**2 + Y**2) to R = self.factor*sqrt(X**2 + Y**2) such that the factor can be adjusted.

Solution
from traits.api import Range # <-class Plot3D(HasTraits): scene = Instance(MlabSceneModel, args=()) factor = Range(0.0, 20.0, 10.0) # <-view = View(Item(name=scene, # ... ), Item(name=factor), # <-resizable=True) @on_trait_change(scene.activated, factor) # <-def generate_data(self): # ...

Putting it all together

Outline
1

Introduction ODE 101 Traits TraitsUI Chaco Mayavi Putting it all together Note on Envisage Summary
Prabhu and Pankaj (Enthought) ETS 64 / 73

2 3 4 5 6 7 8

Putting it all together

The application

Easy to put this together Exercise for you!

Hint: Compose various views using InstanceEditor with custom style!

Prabhu and Pankaj (Enthought)

ETS

65 / 73

Exercise

ODE application Given the existing code, in solve_ode.py and embed_3d_ex.py create a UI for the Lorenz equation along with the solver and a 3D or 2D plot.

Putting it all together

So what?

Focus on the object model Solve the actual problem Model separation Easy to wire-up UI is mostly declarative

Prabhu and Pankaj (Enthought)

ETS

67 / 73

What next?

Note on Envisage

Outline
1

Introduction ODE 101 Traits TraitsUI Chaco Mayavi Putting it all together Note on Envisage Summary
Prabhu and Pankaj (Enthought) ETS 69 / 73

2 3 4 5 6 7 8

Note on Envisage

Envisage

Extensible framework

Plugins ExtensionPoints Extensions

Similar to Eclipse

Prabhu and Pankaj (Enthought)

ETS

70 / 73

Note on Envisage

Application frameworks . . .
Central idea Developer focuses on making a clean library Framework API species how different pieces of the app interact Plugin writer exposes the library or objects involved into the framework Application writer uses plugins to create new application easily

Prabhu and Pankaj (Enthought)

ETS

71 / 73

Note on Envisage

Application frameworks . . .
Matplotlib library TVTK wxPython Shell MPL Plugin

TVTK Plugin

Envisage Application END USER

Shell Plugin Editor Plugin

Framework

Code editor

LIBRARIES
Prabhu and Pankaj (Enthought)

PLUGINS
ETS

APPLICATIONS
72 / 73

Note on Envisage

Big picture

Application and plugins Envisage application: given a list of plugins Plugins setup their contributions Application starts: all plugins are started Plugins add their capabilties to the app Application stops: all plugins are stopped

Prabhu and Pankaj (Enthought)

ETS

73 / 73

Note on Envisage

Big picture

Interaction/communication between plugins Plugins dene extension points Extensions extension points Services
Well known/shared objects Can be registered and looked-up with the application

Prabhu and Pankaj (Enthought)

ETS

74 / 73

Note on Envisage

Envisage application
Envisage application Extension Registry Extensions Plugin Services Service Registry Plugin

Prabhu and Pankaj (Enthought)

ETS

75 / 73

Summary

Outline
1

Introduction ODE 101 Traits TraitsUI Chaco Mayavi Putting it all together Note on Envisage Summary
Prabhu and Pankaj (Enthought) ETS 76 / 73

2 3 4 5 6 7 8

Summary

Summary

Traits TraitsUI Chaco Mayavi Envisage

Prabhu and Pankaj (Enthought)

ETS

77 / 73