Data Calculator User Interaction

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

Leave a Reply

Your email address will not be published. Required fields are marked *