ecola

This is an experiment in creating tree structures with a touch screen.

Demos

• A video of zooming
• Pre-populated trees
  • Once upon a time...
  • Fibonacci
  • J-Bob, from The Little Prover (warning, large!)
• Empty document

Structure

• A document contains a single root node.
• Nodes can contain text or other nodes.
• Colors show contrast between levels of the hierarchy.
• Zoom is hierarchical: more deeply nested nodes appear smaller the more the document is zoomed out.
• A row of nodes can be broken into multiple rows to reduce horizontal sprawl.
• A cursor is controlled by tapping; it determines where editing actions will take place.
• A clipboard saves recently removed nodes.

How to use

• In an empty document, tap to create a root node. The grey cursor will be positioned in the middle of this node.
• Pan and zoom in the standard way with one and two finger gestures.
• Tap to move the cursor, it can be placed inside nodes or at their left or right edges.
• Edit the graph using the buttons along the bottom:
  • Node creates a new node at the cursor.
  • Text presents a text prompt and creates a new text node at the cursor. Enter several words (separated by spaces) to create several nodes at once.
  • Edit replaces Text when the cursor is inside of a text node, use this to edit existing text.
  • Row breaks up a row at the cursor, like pressing Return/Enter.
  • Cut removes the node at the cursor, placing it on the clipboard.
  • Paste presents the nodes on the clipboard (most recent at the bottom), choose one and it will be inserted at the cursor. The same node can be pasted multiple times to copy.
  • Save updates the location of the document, you can copy this from your browser's location bar to save or share it.

Name

It's named after Ecola State Park on the Oregon coast.