A VISUAL INTERACTIVE PROGRAMMING ENVIRONMENT FOR PYTHONhttp://sites.google.com/site/larchenv

G. FRENCHJ. R. KENNAWAY

A. M. DAYPYCON IRELAND 2011

The Larch Environment

Image by alcomm, flickr.com

Motivation

We look at three problems

Textual output in a Python console can be difficult to understand(DEMO)

Source code in a text editor is not interactive enoughConsoles are only good for a few lines at

a time

Textual source code can be difficult to understand and comprehend(think the vertices

of a polygon in code form)

What is‘The Larch Environment’?

A visual interactive programming environment

The goal is:To make programming more visual

How do we do that?

• Visual object presentation• Programming environment

o Visual consoleo Worksheets

• Visual programming via embedded objects

Visual object presentation

“Pictures are pretty”DEMOVisual console

What design pattern do we commonly use for developing GUI apps?

Model

View Controller

MVC Architecture

MVC requires:Model class, View class, Controller class

Our approach:Type coercionType coercion: coerce an object to another type.

Type coercion used throughout Python

Examples:repr(), str()__index__()etc

Its simple

The Larch Environment:Use type coercion for visual presentation

Coerce objects to something visual(a Pres)

HOWTO:The simplified version

Define the following method:def __present__(self, fragment, inherited_state)

For Java objects:Implement Presentable interface

Presentations constructed using a combinatorial API

Label( ‘Hello’ ) Hello

Button.buttonWithLabel( ‘Button’ ) Button

a = Label( ‘A’ )b = Label( ‘B’ )c = Label( ‘C’ )d = Label( ‘D’ )

Row( [ a, b, c, d ] ) ABCD

Column( [ a, b, c, d ] ) ABCD

Presentation combinators:Many moreFlow layouts, mathematical fractions, superscriptRich text, other utilitiesWrite your own by combining existing ones!P.S. Appearance controlled with

style sheets

“Type coercion is easy”DEMO:__present__()

Can also handle objects in the Java or Python standard libraries

Create an ‘object presenter’.Register it for the relevant class.When asked to present an

instance of the class, Larch finds the appropriate presenter and uses it.(no monkeypatching

required)

Thats how the images were shown;they are java.awt.BufferedImage objects

Perspectives

Different perspectives present an object in different ways

Like different views in MVC

The one I have talked about (__present__, Presentable, etc) is the ‘Default perspective’

There are other perspectives

E.g. The inspector perspectives

“Visual Introspection”DEMO: INSPECTOR PERSPECTIVE

Programming Environment-Visual console

You’ve seen most of it

So lets look at some of the more ‘esoteric’ features

Model dragging

Everything in Larch is an object being presented (via type coercion)

The home pageProjectsThe console itself!

What if we want to manipulate an object that we can see?

CTRL+ALT +drag it!

“I see something: how does it work?”DEMO: inspect a project

An interesting side fact!

Our source code editor does not edit text

Its a structured editorCode is represented as an abstract syntax tree (AST)

A perspective is used to present is as something that looks and behaves (mostly) like text

It means our code is in tree form

We can write our own refactorings!

“Change your code fast!”DEMO:Refactoring

Programming Environment-Worksheets

Interactive consoles are great.Caveat: gets difficult when working with more than a few lines

of code at a timeE.g. Whole modules

For complete programs we turn to a text editorWe lose the interactivity

What if we could blend the two?(and add rich text to boot)

“Python modules. With pictures.”DEMO: WORKSHEET(with cellular automata)

Worksheets are active documents

Act as modulesCan import code from other worksheets within the project

You can divide your module code into a number of blocks

Each block can show a result – a step along the path of a computation

To refresh results: hit F5

Rapid Edit-Run-Debug cycle:Alter codeF5Repeat

“Code faster!”DEMO: Edit-Run-Debug cycle(cellular automata)

Visual Programming

Quite a rich history in the research community

Circuit diagrams (LabView), data-flow diagrams, draggable tiles (Scratch, Squeak tile view), etc

Nice for small simple programs

Large programs look like rat’s nestsNot practical

Text remains the dominant medium for source code

Diagrams are still appropriate in certain circumstances

Lets use diagrams (or visual layout) where we need them!

“Play God.”DEMO: OrrerySub-demos:Table editorsEmbedded table

“Drawings. Inside code.”DEMO: Polygon

Embedded objects can use a protocol to customise their behaviour

__py_eval__ Act like an expression - return the result of evaluating

__py_evalmodel__ Act like an expression - return an AST

__py_exec__ Act like a statement – called at runtime

__py_execmodel__ Act like a statement – return an AST

AST GenerationWhat does this sound like?

AST Generation~=Visual LISP macros

Crosses compile-time / run-time barrier

Compile-time (edit-time) objects available at run time

Run-time objects / values can modify or be modified by compile-time objects

“LISPy Smalltalky goodness”DEMO: LZW compressor

Literate programming style extensions

Literate programmingRefresher

Invented by Knuthcirca 1984

Basic idea

Present programs as documents suitable for reading by people

Break a program into sections, in the same way you do for a book

Each section consists of a natural language description, and the code that implements it

Present sections in the order of ‘human logic’*, not the order of the compiler

* Wikipedia article on Literate Programming

Use the ‘weave’ tool to generate the human readable document, typeset with LATEX

Use the ‘tangle’ tool to generate compile code for compiler

Use the ‘tangle’ tool to generate compile code for compiler

Our approach

Use embedded objects to represent sections(Python expressions and suites)

Allow them to be references/used in multiple placed throughout the document

“Interactive pretty docuemnts”DEMO: Literate extensions

Conclusions

Visual object presentation by type-coercion

Encourages a functional approach to UI composition Handling state changes:Re-create,

DON’T MUTATE

Visual representation of values is a BIG EPIC WINEven if you use only visual cues (e.g.

borders around text)

Worksheets are active documents. They also expand on the rapid edit-run cycle of the

console

Allow for rapid development of visual interactive applications

Visual programming by embedded objects

Visual programmingwhere you need it

Allows you to visually extend the syntax of the language

No need to alter the compiler – its just embedded object references

References to objects you implementyourself

Embedded object referencesCan cross compile-time / run-time barrier

LISPy / Smalltalky stuffIN PYTHON

PROJECT STATUS

Research Prototype(not ready for real use )

TODOs:DocumentationBug fixesToo much more........

Related Work

MathematicaMathematica CDFIntentional Software Domain WorkbenchJetbrains Meta

Programming System

Acknowledgements

Academic supervisory team

Dr. Richard KennawayProf. Andy Day

University of East Anglia, Norwich, UK

The Jython team

Developing The Larch would have been very difficult without Jython

IF TIME ALLOWS:DEMO: KD-Tree

IF TIME ALLOWS:DEMO: SIMPLE COMPILER

G. FRENCHJ. R. KENNAWAY

1. M. DAYhttp://sites.google.com/site/larchenv

THANK YOU!

Image by alcomm, flickr.com