Wolfram's Control family, one component per symbol: a tag is notatio- plus the symbol, kebab-cased. Every control has a name, publishes a value, and fires notatio-control-change when it moves — so a <notatio-tangle> or a <notatio-manipulate> binds any of them the same way, and a template that mentions _name follows. The controls that iterate a span (sliders, togglers, an animator) share the knob's gears, keyboard, play and loop.
Slider. Drag the thumb; the arrows step it in gears — Shift coarse, Alt fine, held arrows accelerate. readout shows the value. Space on the focused thumb sweeps it; play adds the button.
<notatio-tangle>
<notatio-slider name="k" value="2" min="0" max="10" step="0.5" readout play />
so
<notatio-dynamic value="_k^2" />
is its square.
</notatio-tangle> An Animator is a slider that plays by default and cycles; a VerticalSlider stands up and takes up/down.
<notatio-tangle>
<notatio-animator name="t" value="0" min="0" max="6.28" step="0.05" interval="40" />
<notatio-vertical-slider name="h" value="3" min="0" max="10" step="1" readout />
sin t =
<notatio-dynamic value="N(Sin(_t))" digits="3" />
, h =
<notatio-dynamic value="_h" />
</notatio-tangle>Slider2D: a point on a square. The binding is the list [x, y] — or a complex number with complex, so a knob's two axes and a pad's are the same thing.
<notatio-tangle>
<notatio-slider-2d name="p" value="0.3,0.6" min="0,0" max="1,1" step="0.01" readout />
<notatio-slider-2d name="z" value="1+1i" min="-2,-2" max="2,2" step="0.1" complex readout />
|z| =
<notatio-dynamic value="N(Abs(_z))" digits="3" />
, p =
<notatio-dynamic value="_p" digits="2" />
</notatio-tangle> Two thumbs that cannot cross; the binding is [lo, hi].
<notatio-tangle>
<notatio-interval-slider name="r" value="1,3" min="0" max="5" step="0.5" readout />
width
<notatio-dynamic value="At(_r, 2) - At(_r, 1)" />
</notatio-tangle> One entry down. Entries are |-separated and may be value -> label; a value that looks like mathematics is typeset.
<notatio-tangle>
<notatio-setter-bar name="p" values="2|3|5|7" />
is prime;
<notatio-radio-button-bar name="q" values="1 -> one|2 -> two|3 -> three" value="2" />
and their product is
<notatio-dynamic value="_p * _q" />
.
</notatio-tangle> Any number down; the binding is the List of selected values. ListPicker shows the entries as a list, single allows one.
<notatio-tangle>
<notatio-toggler-bar name="s" values="1|2|3|4|5" value="1|3" />
sums to
<notatio-dynamic value="Sum(_s)" />
;
<notatio-list-picker name="L" values="2|3|5|7|11|13" value="3|5" rows="4" />
has
<notatio-dynamic value="Length(_L)" />
picked.
</notatio-tangle><notatio-tangle>
<notatio-popup-menu name="n" values="4 -> square|5 -> pentagon|6 -> hexagon|8 -> octagon" value="6" />
has interior angles of
<notatio-dynamic value="180 - 360/_n" />
degrees.
</notatio-tangle> A Toggler with no entries is a switch between False and True; with entries it cycles them on click and opens them on a long press. A Checkbox binds True/False too.
<notatio-tangle>
<notatio-toggler name="on" />
<notatio-checkbox name="c" value="True" label="checked" />
<notatio-toggler name="size" values="a few|several|many" />
— on:
<notatio-dynamic value="_on" />
, c:
<notatio-dynamic value="_c" />
, size:
<notatio-dynamic value="_size" />
</notatio-tangle> A Locator is a point on the picture: drag it, and the binding is where it is in the plot's own coordinates.
<notatio-tangle>
<notatio-plot value="Sin(x)" domain="-6.283,6.283" grid>
<notatio-locator name="p" value="1,0.5" />
</notatio-plot>
The dot is at
<notatio-dynamic value="_p" digits="3" />
.
</notatio-tangle> An InputField binds whatever notatio you type, on Enter; a ColorSlider binds RGBColor(r, g, b).
<notatio-tangle>
<notatio-input-field name="f" value="Sin(x)" size="12" />
squared is
<notatio-dynamic value="Expand((_f)^2)" />
;
<notatio-color-slider name="c" value="#3451b2" />
is
<notatio-dynamic value="_c" digits="2" />
.
</notatio-tangle> A parameter picks its control from its range — a slider, a short list a setter bar, a long one a popup menu — unless a trailing symbol names one, Wolfram's ControlType.
<notatio-manipulate params="{ {k, 2}, 1, 5, 1, Knob}; {a, {0.5, 1, 2}}; {m, {1, 2, 3, 4, 5, 6, 7}, PopupMenu}">
<notatio-plot value="_a * Sin(_k * x) + _m" domain="-6.283,6.283" />
</notatio-manipulate>A control is a symbol, so an interface is an expression. The controls' variables are declared where the control is — Slider(k, (0, 5)), or Slider((k, 2), (0, 5)) to say where it starts — and read as wildcards everywhere else in the same expression, which <notatio-out> draws as a tangle. Row, Column, Grid, Panel and Labeled arrange; a string is text; anything else is a readout. An entry of a choice list may be Labeled(value, "label").
The same thing a cell could evaluate to, or the REPL could hold: no markup, just the symbols the engine knows.
<notatio-out format="notatio" value='Row([Slider((k, 2), (0, 5, 0.5)), "so", Dynamic(k^2)])' /><notatio-out format="notatio" value='Column([Panel(Grid([[Labeled(Slider((a, 1), (0.2, 2, 0.1)), "amplitude"), Labeled(SetterBar((k, 2), [1, 2, 3, 5]), "frequency")]])), Plot(a * Sin(k * x), (x, -6.283, 6.283))])' /><notatio-out format="notatio" value='Grid([[Checkbox((on, True)), Toggler(size, ["a few", "several", "many"]), PopupMenu((n, 6), [Labeled(4, "square"), Labeled(6, "hexagon"), Labeled(8, "octagon")])], [on, size, 180 - 360/n]])' />Options are Wolfram's: rules after the positional arguments, PlotRange -> (-1, 1), singly or in lists, the leftmost setting of a name winning. On an element they are attributes — plot-range, or the name a component already has (PlotLabel is the plot's label) — and one whose value is something to draw, like Epilog, is carried the same way, as the notatio it was.
The expression and the element say the same thing; Epilog marks the plot with a graphics primitive.
<notatio-out format="notatio" value='Plot(Sin(x), (x, 0, 10), PlotRange -> (-1.5, 1.5), PlotLabel -> "sine", Epilog -> [Point((1.5, 1)), Line([(0, 0), (10, 0)])])' />
<notatio-plot value="Sin(x)" var="x" domain="0,10" plot-range="-1.5,1.5" label="sine" epilog="[Point((1.5, 1)), Line([(0, 0), (10, 0)])]" />A built component can also be written the way its expression reads: the arguments as children, the options as attributes in Wolfram's names. The element lowers them itself — <notatio-plot> holding a <notatio-sin> and a <notatio-tuple> is Plot(Sin(x), (x, 0, 10)) — so a framework that hands the DOM an expression's tree needs to know nothing about the components. A head with a fixed signature takes its arguments by name too: <notatio-binomial n="5" k="2">.
<notatio-plot plot-range="-1,1" grid-lines="true">
<notatio-sin />
<notatio-tuple />
</notatio-plot><p>
<notatio-binomial n="5" k="2" evaluate />
, and
<notatio-fibonacci n="10" evaluate />
.
</p>The same trees, from the template side. Every symbol is a Vue component (<Slider>, <Row>, <Dynamic> — from @enumeratio/notatio/vue, generated from the element sources), and <Notatio expr> renders an expression as the tree it is — structuralOf in the base package, handed to Vue's h: every head a tag, every argument a child, every option a prop. The elements do the rest.
<Tangle>
<Row>
<Slider name="k" min="0" max="5" step="0.5" value="2" readout />
<Dynamic value="_k ^ 2" />
</Row>
</Tangle> Inspect the DOM: a notatio-row holding a notatio-list of a notatio-slider, a string and a notatio-dynamic.
<Notatio expr='Row([Slider((k, 1), (0, 5, 0.5)), "squared is", Dynamic(k^2)])' /><Notatio expr="Plot(Sin(x), (x, 0, 10), PlotRange -> (-1, 1), Epilog -> Point((1.5, 1)))" />Every head the engine knows is an element, notatio- plus its name: the ones that draw or control have components of their own, and the rest are generic — a <notatio-binomial> typesets Binomial(…), its arguments its children (or its value, the text the symbol's constructor takes). And the page is itself a scope: a control and a readout with no <notatio-tangle> around them still find each other; the wrapper is for isolation, when two examples reuse a name.
No component was written for Binomial, Sqrt or Add. The outermost typesets; the ones inside are structure.
<p>
<notatio-binomial />
,
<notatio-sqrt>
<notatio-add>
<notatio-power />
<notatio-integer value="1" />
</notatio-add>
</notatio-sqrt>
,
<notatio-integer value="42" />
,
<notatio-string value="a string" />
.
</p> No tangle: the slider is named m nowhere else on this page, so the page scope binds it to the readout and to the generic element beside it.
<p>
<notatio-slider name="m" value="4" min="0" max="10" step="1" readout />
choose 2 is
<notatio-binomial evaluate />
, and squared it is
<notatio-dynamic value="_m^2" />
.
</p>