Currently I am working top-down, the middle and bottom-up on a touch-based programming language, or data calculator.

The bottom-up approach is the virtual machine, which I have been writing a bit about / been working on the last couple of days.

The middle approach is to design / look into the conceptual program representation, – a high level data flow intermediate language, that is the base of the user interaction and have an isomorphic source representation.

The top-down approach is to find a proper user interface for interaction with data and “code”.

This document is some notes about how a simple user interaction could be, connected with an imaginary intermediate representation.

Basic UI

The ui state is:

• data Currently selected data
• expr Currently selected expression
• selected Currently selected part of expression

The UI consist of:

• data – shows data

  • View: The data object knows how to render itself, given its dimensions
  • Interaction: The data object knows how to handle inputs

• expression

  • View: – This is the expression creating selected, consisting of [o: i1 f i2 .. iN …]
  • Interaction: data := selected := expression clicked on

• commands

  • View: icons

  • Interaction

    • world num str – insert (world	number	string)

      • o, f insert new object
      • iN insert object after current object

    • delete

      • o deletes entire expression, clears data
      • iN deletes selected, selects iN-1
      • f clears function

• functions – List of functions available for the currently selected data.

  • View: grid of functions, three lines per function, ca 40×80 pixels each.
    • function name followed by documentation
  • Interaction – click on function:
    • if o is selected, create a new object with where i1 = o result/data, and f is this function. Function list is functions available on result.
    • if f is selected, replace f1 with current function`
    • if iN is selected, replace selected iN with new object: [iN this-function], and select f

• objects

  • View: grid of object, three lines per object, ca 40×80 pixels each.
    • Value as string (2 lines), id(float top right)
    • function expression (1 line)
  • Interaction:
    • o``:data:=expr:= clicked on.selected:=o`
    • i1: replace i1 with clicked on.
    • f, iN: insert clicked after expr

Items in expression, functions and objects are shown as 3 lines (ca 40×80) items.

The UI on a mobile phone would be like:

+-----------------------+
|                       |
|                       |
|                       |
|                       |
|          Data         | ~300
|                       |
|                       |
|                       |
+-----------------------+
|       Expression      |  40
+-----------------------+
|        Commands       |  40
+-----------+-----------+
|  ~2x80    |  ~2-3x80  |
|           |           |
| Functions |  Objects  | ~6-7x40
|           |           |
|           |           |
|           |           |
+-----------+-----------+