2016-11-20 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 dataexpr
Currently selected expressionselected
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
- View: The
expression
- View: – This is the expression creating
selected
, consisting of [o
:i1
f
i2
..iN
…] - Interaction:
data
:=selected
:= expression clicked on
- View: – This is the expression creating
commands
View: icons
Interaction
world num str – insert (world number string) o
,f
insert new objectiN
insert object after current object
delete
o
deletes entire expression, clearsdata
iN
deletes selected, selectsiN-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 wherei1
=o
result/data, andf
is this function. Function list is functions available on result. - if
f
is selected, replacef1
with current function` - if
iN
is selected, replace selectediN
with new object: [iN
this-function], and selectf
- if
- View: grid of functions, three lines per function, ca 40×80 pixels each.
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
: replacei1
with clicked on.f
,iN
: insert clicked afterexpr
- View: grid of object, three lines per object, ca 40×80 pixels each.
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
| | |
| | |
| | |
+-----------+-----------+