A read-only output of the current value of the specified variable
<var_name>
. The text is the default value, though it will be
replaced when the HTML version loads.
[<text>]{<var_name>}
A number adjustable by slider. The number MAY have a display precision specified. The slider can be set to a minimum and/or maximum, and have a step value. The text is parsed, and the first number in the text becomes the output value. The remaining text is added to the template, allowing for units and other descriptive text to be included in the control.
A range MUST be specified, but MAY be infinite in both directions. The range
is specified using the CoffeeScript-style dots, where ..
is inclusive and
...
excludes the end. ie, [1..4]
is the range 1 <= n <= 4
, while
[1...4]
is 1 <= n < 4
.
Specifying a display precision MAY be done using the default number value in
the text. 200.
formats to 0
decimal places. 200.000
formats to 3
decimals. If not specified, the value is unformatted.
Numbers MAY use the constants in Math
and combine them with a coefficient,
eg 2pi
or 0.5pi
, which is treated as n * Math.PI
. This can be done in
the range min or max, or in the step. The constants MUST be one of e
, pi
,
ln2
, ln10
, log2e
, log10e
, sqrt1_2
, sqrt2
, (uppercase or lowercase).
[* <number>.<decimal*> *]{<var_name> [<min>..<exclusive><max>] by <step>}
-
Number, precision of 1, slider step by 10, "#{value.toFixed(0)} calories"
[200. calories]{calories [10..100] by 10}
-
Number, precision of 0.1, slider step by 0.1, "#{value.toFixed(1) calories"
[200.0 calories]{calories [10..100] by 0.1}
-
Number, no precision, slider step by 1, no slider max, "#{value} calories"
[200 calories]{calories [0..]}
-
Number, no precision, slider step by 1, no min/max, "over #{value} calories"
[over 200 calories]{calories [..]}
A boolean flag that has a value of true
, false
, or undefined
. The true
and false values can be labeled. If the label is present in the text, that
value becomes the default value. Otherwise, the value is undefined
. and
the text becomes a control label.
[* <true_label or false_label or *> *]{<var_name> <true_label> or <false_label>}
-
Boolean,"#{value}", default = undefined
[pick one]{some_flag true or false}
-
Boolean,"#{value}", default = true
[true]{some_flag true or false}
-
Boolean, true label = "on", false label = "off", "#{label} deck"
[on deck]{some_flag on or off}
A choice between an arbitrary list of values. The options are specified in a
comma-separated list (in-value spaces permitted). If one of the choices is
found in the text, it is treated as the default value, and the remaining text
becomes a template. Otherwise, the default value is undefined
and the entire
text becomes a control label.
[* choice *]{<var_name> [<choice 1>,<choice 2>,<choice 3>,...]}
-
String select field, "before #{value} after"
[before alpha after]{option_picked [alpha,bravo,charlie,delta,echo]}
Graphs specify one or more functions that are given an x
value and MUST
return a y
value. Each function creates a separate series. The graph type
defaults to scatter
, and is specified after the functions. It MUST be one
of scatter
, line
, bar
. The x
range MUST be finite.
![<graph_title>]{<graph_type>=<graph_function1>,<graph_type>=<graph_function2>,... <x_range>}
-
Scatter graph titled "Graph Title" of graphFn(x) from -10 to 10. (scatter is default, but MAY be specified.)
![Graph Title]{graphFn x=[-10..10]} ![Graph Title]{scatter=graphFn x=[-10..10]}
-
Line graph titled "sin of x" of Math.sin(x) from -2pi to 2pi.
![sin *of* x]{line=Math.sin x=[-2pi..2pi] by 0.25pi}
-
Scatter graph titled "Graph Title" of graphFn(x) and otherFn(x) from -10 to 10. Multiple series (each series as a function in a comma-separated list).
![Graph Title]{bar=graphFn,line=otherFn x=[-10..10]}
-
Create a blank
<canvas>
and give it to a function for drawing. This requires the in-page code to do more work, but allows for free-form vizualizations using helpers for things likeprocessing.js
.![Visualization title]{hookToProcessing viz}