Direct manipulation interfaces are useful in many domains, but the lack of programmability in a high-level language makes it difficult to develop complex and reusable content. We envision prodirect manipulation editors that allow users to freely mix between programmatic and direct manipulation.
Prodirect Manipulation
= Programmatic + Direct Manipulation
Sketch-n-Sketch
= Prodirect Manipulation Editor for SVG
Check out the main project page for more details and to try out the latest release.
e ::=
| n
| s
| (\p e)
| (\(p1 ... pn) e)
| (e1 e2)
| (e1 e2 e3 ... en)
| (let p e1 e2)
| (letrec p e1 e2)
| (def p e1) e2
| (defrec p e1) e2
| (if e1 e2 e3)
| (case e (p1 e1) ... (pn en))
| []
| [e1 | e2]
| [e1 .... en]
| [e1 .... en | erest]
| (op0)
| (op1 e1)
| (op2 e1 e2)
| ;single-line-comment e
| #option value e
Extra parentheses are not permitted. (Don't you think there are enough already?)
e ::=
| n -- numbers (all are floating point)
| s -- strings (use single-quotes, not double)
| b -- booleans
n ::= 123
| 3.14
| -3.14
| 3.14! -- frozen constants (may not be changed by sync)
| 3.14? -- thawed constants (may be changed by sync)
| 3.14~ -- assign to at most one zone
| 3{0-6} -- auto-generate an integer slider
| 3.14{0.0-6.28} -- auto-generate a numeric slider
s ::= 'hello' | 'world' | ...
b ::= true | false
e ::= ...
| (op0)
| (op1 e1)
| (op2 e1 e2)
op0 ::= pi
op1 ::= cos | sin | arccos | arcsin
| floor | ceiling | round
| toString
| sqrt
op2 ::= + | - | * | /
| < | =
| mod | pow
| arctan2
e ::= ...
| (if e1 e2 e3)
e ::= ...
| []
| [e1 | e2]
| [e1 .... en] -- desugars to [e1 | [e2 | ... | [en | []]]]
| [e1 .... en | erest] -- desugars to [e1 | [e2 | ... | [en | erest]]]
p ::= x
| n | s | b
| [p1 | p2]
| [p1 ... pn]
| [p1 ... pn | prest]
e ::= ...
| (case e (p1 e1) ... (pn en))
e ::= ...
| (\p e)
| (\(p1 ... pn) e) -- desugars to (\p1 (\p2 (... (\pn) e)))
e ::= ...
| (e1 e2)
| (e1 e2 e3 ... en) -- desugars to ((((e1 e2) e3) ...) en)
e ::= ...
| (let p e1 e2)
| (letrec f (\x e1) e2)
| (def p e1) e2 -- desugars to (let p e1 e2)
| (defrec f (\x e1)) e2 -- desugars to (letrec f (\x e1) e2)
e ::= ...
| ;single-line-comment e
| #option value e
Comments and options are terminated by newlines. All options should appear at the top of the program, before the first non-comment expression.
See prelude.little
for the standard library included by every program.
The result of a little
program should be an "HTML node."
Nodes are either text elements or SVG elements, represented as
h ::= ['TEXT' e]
| [shapeKind attrs children]
where
shapeKind ::= 'svg' | 'circle' | 'rect' | 'polygon' | 'text' | ...
attrs ::= [ ['attr1' e1] ... ['attrn' e2] ]
children ::= [ h1 ... hn ]
TODO explain attrs for different shapes
See prelude.little
for a small library of SVG-manipulating functions.
% elm-repl
Elm REPL 0.4 (Elm Platform 0.15)
...
> import Eval exposing (parseAndRun)
> parseAndRun "(+ 'hello ' 'world')"
"'hello world'" : String
> parseAndRun "(list0N 10)"
"[0 1 2 3 4 5 6 7 8 9 10]" : String
To add a new example to the dropdown menu:
-
Create a file
examples/newExample.little
for yournewExample
. -
In
ExamplesTemplate.elm
, add the lines:LITTLE_TO_ELM newExample
, makeExample "New Example Name" newExample
-
From the
src/
directory, runmake examples
. -
Launch Sketch-n-Sketch.