Block Reference
Every building block an object may be composed of, with its properties, their types, defaults and ranges. This page is generated from the live registry, so it cannot drift from what the compiler will accept.
How to read this page
- Primitives and modifiers and behaviours list properties; a node sets them as constants under
properties, or as bindings underbindingsfor the same names. A binding always wins. - Components list parameters; a node sets them under
parameters, each one a constant or a binding. - A default written
"token:stroke.accent"is read through the design tokens, so it follows the board's preset rather than being a fixed colour. - A range column reading
min 0, max 1clamps the value; one listing alternatives is the set the value must come from. - Every drawing block also carries
fill,stroke,strokeWidth,strokeDash,strokeLinecap,opacityandvisible.
The same catalogue is available to an agent at runtime through list_building_blocks, search_building_blocks and get_building_block_schema, which read the registry directly.
Limits
| Limit | Value |
|---|---|
| Nodes in one object | 2 000 |
| Nesting depth | 16 |
| Component nesting depth | 8 |
repeat count | 720 |
| Characters in one expression | 512 |
| Rows in one memory | 2 000, at six decimals |
image sources | https:, data:image/ and relative paths |
path data | The SVG path grammar only |
Primitives
The blocks that draw. A node names one as its type, and sets these under properties as constants or under bindings as declarative values.
arc circle clip-box ellipse freehand group image line path polygon polyline rect ring text
arc — Arc
Circular arc or annular sector measured clockwise from the start angle.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
centerX | number | 0 | |
centerY | number | 0 | |
radius | number | 40 | min 0 |
innerRadius | number | 0 | min 0 |
startAngle | number | 225 | |
endAngle | number | -45 |
circle — Circle
Circle defined by a centre point and a radius.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
centerX | number | 0 | |
centerY | number | 0 | |
radius | number | 40 | min 0 |
clip-box — Clip box
Container showing only the part of its children that falls inside it.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
x | number | 0 | |
y | number | 0 | |
width | number | 100 | min 0 |
height | number | 60 | min 0 |
ellipse — Ellipse
Ellipse defined by a centre point and two radii.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
centerX | number | 0 | |
centerY | number | 0 | |
radiusX | number | 50 | min 0 |
radiusY | number | 30 | min 0 |
freehand — Freehand
Strokes drawn by hand, each a list of [across, down] points given as fractions of the box, smoothed into curves. A pencil texture roughens the line like graphite, and a multiply blend lets ink underneath show through, as a highlighter does.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
x | number | 0 | |
y | number | 0 | |
width | number | 100 | min 0 |
height | number | 100 | min 0 |
strokes | object | [] | |
texture | string | "none" | none | pencil |
blendMode | string | "normal" | normal | multiply |
group — Group
Container that positions, rotates and scales its children as one unit.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
image — Image
Bitmap or SVG image placed in a box. Only https:, data: and same-origin relative sources are allowed.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
x | number | 0 | |
y | number | 0 | |
width | number | 60 | min 0 |
height | number | 60 | min 0 |
href | string | "" | |
preserveAspectRatio | string | "xMidYMid meet" |
line — Line
Straight line segment between two points.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
x1 | number | 0 | |
y1 | number | 0 | |
x2 | number | 100 | |
y2 | number | 0 |
path — Path
Raw SVG path data. Commands are restricted to the standard path grammar.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
d | string | "" |
polygon — Polygon
Closed sequence of connected points.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
points | points | [] |
polyline — Polyline
Open sequence of connected points.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
points | points | [] |
rect — Rectangle
Axis-aligned rectangle with optional corner radius.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
x | number | 0 | |
y | number | 0 | |
width | number | 100 | min 0 |
height | number | 60 | min 0 |
cornerRadius | number | 0 | min 0 |
ring — Ring
Full annulus between an inner and an outer radius.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
centerX | number | 0 | |
centerY | number | 0 | |
innerRadius | number | 30 | min 0 |
outerRadius | number | 40 | min 0 |
text — Text
Single line of text anchored at a point.
| Property | Type | Default | Range |
|---|---|---|---|
fill | colour | "none" | |
stroke | colour | "none" | |
strokeWidth | number | 1 | min 0, max 100 |
strokeDash | string | "" | |
strokeLinecap | string | "round" | butt | round | square |
strokeDashOffset | number | 0 | |
strokeLinejoin | string | "" | | miter | round | bevel |
opacity | number | 1 | min 0, max 1 |
visible | boolean | true | |
pointerEvents | string | "" | |
dropShadow | boolean | false | |
shading | string | "none" | none | cylinder | cylinder-upright | sphere | plate |
x | number | 0 | |
y | number | 0 | |
text | string | "" | |
unit | string | "" | |
term | string | "" | |
fontSize | number | "token:font.size.default" | min 1, max 400 |
fontFamily | string | "token:font.family" | |
fontWeight | number | "token:font.weight.default" | min 100, max 900 |
fontStyle | string | "normal" | normal | italic |
textAnchor | string | "middle" | start | middle | end |
baseline | string | "central" | auto | central | hanging |
Modifiers
Applied to a node and everything under it, in the order the modifiers array lists them.
along-path fill mirror opacity repeat rotate scale stroke translate visibility z-order
along-path — Along path
Moves a node to a point a fraction of the way along the route a connector is drawn on, optionally turned the way the route runs there.
| Property | Type | Default | Range |
|---|---|---|---|
at | number | 0.5 | min 0, max 1 |
rotate | boolean | false |
fill — Fill
Overrides the fill colour of a node.
| Property | Type | Default | Range |
|---|---|---|---|
color | colour | null |
mirror — Mirror
Mirrors a node about a horizontal or vertical axis through an anchor point.
| Property | Type | Default | Range |
|---|---|---|---|
axis | string | "horizontal" | horizontal | vertical |
centerX | number | 0 | |
centerY | number | 0 |
opacity — Opacity
Sets the opacity of a node or group.
| Property | Type | Default | Range |
|---|---|---|---|
value | number | 1 | min 0, max 1 |
repeat — Repeat
Repeats the node it is applied to, offsetting each copy by an angle step, a translation or a scale. The copy index is available to bindings as the parameter $index.
| Property | Type | Default | Range |
|---|---|---|---|
count | number | 1 | min 0 |
angleStep | number | 0 | |
angleStart | number | 0 | |
centerX | number | 0 | |
centerY | number | 0 | |
dx | number | 0 | |
dy | number | 0 |
rotate — Rotate
Rotates a node clockwise around an anchor point, in degrees.
| Property | Type | Default | Range |
|---|---|---|---|
angle | number | 0 | |
centerX | number | 0 | |
centerY | number | 0 |
scale — Scale
Scales a node around an anchor point.
| Property | Type | Default | Range |
|---|---|---|---|
scaleX | number | 1 | |
scaleY | number | 1 | |
centerX | number | 0 | |
centerY | number | 0 |
stroke — Stroke
Overrides the stroke colour, width and dash pattern of a node.
| Property | Type | Default | Range |
|---|---|---|---|
color | colour | null | |
width | number | null | min 0 |
dash | string | null |
translate — Translate
Moves a node or group by an offset.
| Property | Type | Default | Range |
|---|---|---|---|
dx | number | 0 | |
dy | number | 0 |
visibility — Visibility
Shows or hides a node, typically bound to a model condition.
| Property | Type | Default | Range |
|---|---|---|---|
visible | boolean | true |
z-order — Z order
Sorts siblings; higher values are drawn on top.
| Property | Type | Default | Range |
|---|---|---|---|
order | number | 0 |
Behaviours
What the reader can do to a node, and what that writes. Listed on the node under behaviours.
clickable drag-along-route drag-angle drag-axis-tick drag-circle-point drag-in-frame drag-rotate drag-value draggable edit-text edit-value follow-pointer forget hoverable keep-time play-note press-and-slide remember resizable respond-to-simulation rotatable selectable tooltip track-pointer
clickable — Clickable
Writes a value into a model variable or into a component parameter when the node is clicked. The value is a binding like any other, so a key can write what the model or the object itself currently holds rather than only a constant.
| Property | Type | Default | Range |
|---|---|---|---|
variable | variable | "" | |
property | string | "" | |
value | number | 0 |
drag-along-route — Drag along the route
Lets the reader slide the node along the route of the connector it is drawn in: the point of the route nearest the pointer is written into the component property as the fraction of the way along it, from 0 at the start to 1 at the end. It is what moves a connector's label.
| Property | Type | Default | Range |
|---|---|---|---|
property | string | "" |
drag-angle — Drag angle
Lets the user drag the node around an anchor point and writes the resulting angle back into a model variable, using the same angle-to-value mapping the node was bound with. Naming a length as well makes the node reach the pointer rather than only point at it: how far the pointer stands from the anchor is written as the length, in the units the node is drawn in, so one drag both turns the thing and stretches it.
| Property | Type | Default | Range |
|---|---|---|---|
variable | variable | "" | |
property | string | "" | |
verticalVariable | variable | "" | |
verticalProperty | string | "" | |
centerX | number | 0 | |
centerY | number | 0 | |
degreesPerUnit | number | 6 | |
offsetDegrees | number | 0 | |
signed | boolean | false | |
minimum | number | null | |
maximum | number | null | |
wrapAt | number | null | |
spanDegrees | number | null | min 0, max 360 |
valueOffset | number | 0 | |
step | number | null | min 0 |
lengthVariable | variable | "" | |
lengthProperty | string | "" | |
pixelsPerUnit | number | 1 | |
minimumLength | number | null | |
maximumLength | number | null | |
hoverFill | colour | "none" | |
hoverOpacity | number | 0.15 | min 0, max 1 |
drag-axis-tick — Drag axis tick
Rescales an axis by dragging one of its ticks: the tick follows the pointer and the far end of the axis moves with it, writing the object's own maximum. An axis standing on zero is pulled from the middle, naming no minimum property and handing nought over as the minimum value, so what it writes is how far the drawing reaches from the origin. The same interaction, and the same arithmetic, the chart's axes have. An axis whose ticks are placed by the logarithm of their value is dragged in decades rather than in values, and one that says how many parts it is cut into rather than how much one part is worth keeps the part and writes the count, so its numbers stay the same distance apart and there are more or fewer of them.
| Property | Type | Default | Range |
|---|---|---|---|
axis | string | "x" | x | y |
value | number | 0 | |
minimumProperty | string | "" | |
minimumValue | number | null | |
maximumProperty | string | "" | |
scale | string | "linear" | linear | logarithmic |
countProperty | string | "" | |
stepValue | number | 0 | |
wholeCount | boolean | true | |
scaleProperty | string | "" | |
pairedScaleProperty | string | "" | |
originPixel | number | 0 | |
lengthPixels | number | 0 | min 0 |
drag-circle-point — Drag a point round a circle
Drags a point round a circle and writes back everything the circle is read for at once: the angle the point stands at, how far out it stands, the cosine and the sine of that angle, its tangent and its cotangent, and the length of the arc it has swept. Each of them goes into the term its row names, or into the object's own parameter when that row holds a plain number instead, and a row the model works out for itself is left alone — so a circle whose angle a definition gives is still dragged where it writes the point. Asking for a number of divisions makes the angle land on one of them: the point follows the pointer while it is held and lands on the nearest division, exactly, the moment it is let go. The whole drag is one edit.
| Property | Type | Default | Range |
|---|---|---|---|
centerX | number | 0 | |
centerY | number | 0 | |
pixelsPerUnit | number | 1 | |
unitsPerTurn | number | 360 | |
angleValue | number | 0 | |
angleVariable | variable | "" | |
angleProperty | string | "" | |
radiusVariable | variable | "" | |
radiusProperty | string | "" | |
stretch | boolean | false | |
minimumRadius | number | null | |
maximumRadius | number | null | |
xVariable | variable | "" | |
xProperty | string | "" | |
yVariable | variable | "" | |
yProperty | string | "" | |
tangentVariable | variable | "" | |
tangentProperty | string | "" | |
cotangentVariable | variable | "" | |
cotangentProperty | string | "" | |
tangentPointVariable | variable | "" | |
tangentPointProperty | string | "" | |
arcVariable | variable | "" | |
arcProperty | string | "" | |
snapDivisions | number | null | min 0, max 360 |
hoverFill | colour | "none" | |
hoverOpacity | number | 0.15 | min 0, max 1 |
drag-in-frame — Drag in the frame
Lets the reader drag a figure held in a referential by a node of its drawing, the pointer read in the referential's own units. As a point it writes where the pointer stands, less the origin, into the across and up variables, keeping the distance between the pointer and the point it was pressed on, and landing on the referential's ticks when it snaps to them; as an angle it writes the way the pointer stands from the origin, anticlockwise from the across axis in the model's angle unit; as a distance it writes how far the pointer stands from the origin. Each variable is written into the model, or into the component parameter when it holds a plain number.
| Property | Type | Default | Range |
|---|---|---|---|
mode | string | "point" | point | angle | distance |
variable | variable | "" | |
property | string | "" | |
verticalVariable | variable | "" | |
verticalProperty | string | "" | |
originX | number | 0 | |
originY | number | 0 | |
perUnitX | number | 1 | |
perUnitY | number | 1 |
drag-rotate — Drag rotate
Lets the user turn the node around an anchor point by dragging it. The variable moves by the angle the pointer travels, so the grabbed point follows the pointer instead of jumping to it, which is what a rose, a bezel or a dial ring needs.
| Property | Type | Default | Range |
|---|---|---|---|
variable | variable | "" | |
property | string | "" | |
verticalVariable | variable | "" | |
verticalProperty | string | "" | |
centerX | number | 0 | |
centerY | number | 0 | |
degreesPerUnit | number | 1 | |
minimum | number | null | |
maximum | number | null | |
wrapAt | number | null | |
hoverFill | colour | "none" | |
hoverOpacity | number | 0.15 | min 0, max 1 |
drag-value — Drag value
Lets the reader set a value by where they press along a line and drag: the pointer's place between the two ends of the scale is the value written, into the model variable or into the component parameter when the variable holds a plain number. It is what a slider's handle needs. The value can be made to land on whole steps, and it never leaves the scale.
| Property | Type | Default | Range |
|---|---|---|---|
variable | variable | "" | |
property | string | "" | |
axis | string | "y" | x | y |
originPixel | number | 0 | |
lengthPixels | number | 0 | min 0 |
minimum | number | 0 | |
maximum | number | 1 | |
step | number | null | min 0 |
draggable — Draggable
The object can be moved with the move handle. Provided by the host shape for every component.
edit-text — Edit text
Lets the reader write the text a component property holds: double-clicking the node, or the object when it is selected, opens a box over the place the text stands in where it can be written over several lines. Leaving the box, or Ctrl+Enter, writes what is in it into the property, and Escape leaves the text as it was.
| Property | Type | Default | Range |
|---|---|---|---|
property | string | "" | |
x | number | 0 | |
y | number | 0 | |
width | number | 160 | min 0 |
height | number | 40 | min 0 |
fontSize | number | 16 | min 1 |
edit-value — Edit value
Lets the reader type a new value over the node: double-clicking it opens a number box where it stands, Enter or leaving the box writes the number into the model variable, or into the component parameter when the variable holds a plain number, and Escape leaves it as it was. A variable the model works out for itself cannot be typed into.
| Property | Type | Default | Range |
|---|---|---|---|
variable | variable | "" | |
property | string | "" |
follow-pointer — Follow pointer
Reports where the pointer is over the node, in the units the node is scaled in, so a drawing can show the value under the cursor. What is reported is not kept: it lasts as long as the pointer is over the node, and the model is not touched.
| Property | Type | Default | Range |
|---|---|---|---|
xParameter | string | "" | |
yParameter | string | "" | |
activeParameter | string | "" | |
originX | number | 0 | |
originY | number | 0 | |
scaleX | number | 1 | |
scaleY | number | -1 | |
minimumX | number | null | |
maximumX | number | null | |
minimumY | number | null | |
maximumY | number | null | |
whilePlaying | boolean | false |
forget — Forget
Empties one of the object's memories when the node is clicked.
| Property | Type | Default | Range |
|---|---|---|---|
memory | string | "" |
hoverable — Hoverable
The node reacts to pointer hover with the standard highlight cursor.
| Property | Type | Default | Range |
|---|---|---|---|
cursor | string | "pointer" |
keep-time — Keep time
A transport key for a reading of the clock: play sets it counting real time from wherever it stands, pause holds it there, and stop ends the run and clears it. A key set to toggle is both — it starts a clock standing still and holds a clock that is counting, so one key does the work of two. What is counted is written into the four parts of the reading — the hours, the minutes, the seconds and the thousandths — each into the term that part names, or into the object's own property when it names a plain number instead. The whole run is one edit.
| Property | Type | Default | Range |
|---|---|---|---|
action | string | "play" | play | pause | stop | toggle |
hourVariable | variable | "" | |
hourProperty | string | "" | |
minuteVariable | variable | "" | |
minuteProperty | string | "" | |
secondVariable | variable | "" | |
secondProperty | string | "" | |
millisecondVariable | variable | "" | |
millisecondProperty | string | "" | |
runningParameter | string | "" | |
intervalMs | number | 33 | min 10, max 1000 |
play-note — Play a note
A key of an instrument: it sounds its own pitch for as long as it is held, and stops when it is let go. Several keys sound together, whether they are held by several fingers or by several computer keys at once, and sliding across them plays them in turn. The object reports the notes it is holding into a parameter of its own, so its drawing can show which keys are down and what it publishes can be worked out from the chord. Nothing is written down: a file remembers no note left sounding.
| Property | Type | Default | Range |
|---|---|---|---|
frequency | number | 0 | min 0 |
note | number | 0 | |
keyCode | string | "" | |
notesParameter | string | "" |
press-and-slide — Press and slide
A control the reader holds down: pressing keeps the value where it is, sliding the pointer up raises it and down lowers it, by however far it travelled, and letting go lets the value fall back to its resting value a step at a time. It is what a pedal or a throttle needs — nothing is written by pressing alone, and the whole gesture, the fall back included, is one edit.
| Property | Type | Default | Range |
|---|---|---|---|
variable | variable | "" | |
property | string | "" | |
verticalVariable | variable | "" | |
verticalProperty | string | "" | |
bearing | number | null | |
unitsPerPixel | number | 1 | |
restValue | number | 0 | |
returnStep | number | 0 | min 0 |
intervalMs | number | 100 | min 20, max 5000 |
minimum | number | null | |
maximum | number | null | |
hoverFill | colour | "none" | |
hoverOpacity | number | 0.15 | min 0, max 1 |
remember — Remember
Appends a row to one of the object's memories when the node is clicked. A row carries a label and two numbers, all of them bindings, so a key records what the object held at the moment it was pressed.
| Property | Type | Default | Range |
|---|---|---|---|
memory | string | "" | |
text | string | "" | |
x | number | 0 | |
y | number | 0 | |
limit | number | 50 | min 1, max 2000 |
resizable — Resizable
The object can be resized with the corner handles. Provided by the host shape for every component.
respond-to-simulation — Respond to simulation updates
Marks the object as redrawing on every simulation tick. Components with model bindings get this automatically.
rotatable — Rotatable
The object can be rotated with the rotation handle. Provided by the host shape for every component.
selectable — Selectable
The object can be selected on the board. Provided by the host shape for every component.
tooltip — Tooltip
Shows a native tooltip with a fixed or bound text when the pointer rests on the node.
| Property | Type | Default | Range |
|---|---|---|---|
text | string | "" |
track-pointer — Track pointer
Records where the pointer is while it is dragged over the node, one sample every sampling interval, into one of the object's memories. The sample is written in the units the node is scaled in, so what is recorded is a pair of values rather than a pair of pixels — and when the memory names model terms, the run becomes the values those terms take, iteration by iteration. Nothing is recorded until the pointer travels: a click that never moves leaves the memory alone, and a drag opens its run at the point the pointer went down.
| Property | Type | Default | Range |
|---|---|---|---|
memory | string | "" | |
mode | string | "replace" | replace | append |
xVariable | string | "" | |
xProperty | string | "" | |
yVariable | string | "" | |
yProperty | string | "" | |
limit | number | 600 | min 1, max 2000 |
sampleMs | number | 33 | min 10, max 1000 |
minimumMovePixels | number | 0 | min 0, max 50 |
breakOnDrag | boolean | false | |
originX | number | 0 | |
originY | number | 0 | |
scaleX | number | 1 | |
scaleY | number | -1 | |
minimumX | number | null | |
maximumX | number | null | |
minimumY | number | null | |
maximumY | number | null |
Components
Ready-made assemblies. A node names one as its type and sets these under parameters.
ac-generator battery cable calculator capacitor circuit circuit-track circular-gauge clock compass dial-face electric-circuit electric-switch gauge geometry-point geometry-system key-cap label-ring light-bulb magnetic-system mechanical-anchor mechanical-ball mechanical-block mechanical-joint mechanical-pulley mechanical-rope mechanical-spring mechanical-surface mechanical-system mechanical-wave media memory-list memory-trace microphone mind-map-bubble mind-map-connector mind-map-ellipse mind-map-rectangle mouse-tracker optical-system orbit-system oscilloscope piano piano-keyboard plot-axes plot-crosshair plot-grid pointer-hand pointer-ring program protractor question resistor rich-text rotating-vector ruler seven-segment-display slider slope speedometer steering-wheel text-box thermometer tick-ring trigonometric-circle value
ac-generator — AC generator
Represents an alternating-current generator in an electric circuit, with a terminal at each end for connecting cables. Its electromotive force swings as a sine of the independent variable, A·sin(2πft + φ), from its amplitude, frequency and phase, each read from a variable or a number, and it displays the current through it and the voltage across its terminals, with an optional arrow showing the direction of the current.
| Parameter | Type | Default | Range |
|---|---|---|---|
amplitude | variable | "10" | |
frequency | variable | "1" | |
phase | variable | "0" | |
current | variable | "0" | |
voltage | variable | "0" | |
showCurrentArrow | boolean | true | |
bodyColor | colour | "#f1f5f9" | |
ringColor | colour | "#334155" | |
waveColor | colour | "#2563eb" | |
leadColor | colour | "#a7adb5" | |
arrowColor | colour | "#dc2626" | |
amplitudeUnit | unit | "V" | |
frequencyUnit | unit | "Hz" | |
currentUnit | unit | "A" | |
voltageUnit | unit | "V" |
battery — Battery
Represents a battery cell in an electric circuit, with a terminal at each end for connecting cables. Displays the electromotive force, the current through the cell and the voltage across its terminals, each read from a variable or a number, with an optional arrow showing the direction of the current.
| Parameter | Type | Default | Range |
|---|---|---|---|
emf | variable | "1.5" | |
current | variable | "0" | |
voltage | variable | "0" | |
showCurrentArrow | boolean | true | |
bodyColor | colour | "#262626" | |
capColor | colour | "#f28c28" | |
leadColor | colour | "#a7adb5" | |
arrowColor | colour | "#dc2626" | |
emfUnit | unit | "V" | |
currentUnit | unit | "A" | |
voltageUnit | unit | "V" |
cable — Cable
Connects a terminal of one circuit part to a terminal of another. When linked to the variable holding the loop current, it displays charges moving along the cable in the direction of the current, at a speed proportional to its magnitude, and stationary when no current flows.
| Parameter | Type | Default | Range |
|---|---|---|---|
currentTerm | variable | "0" | |
currentTermUnit | unit | "A" | |
showFlow | boolean | true | |
flowSpeed | number | 20 | min 0 |
lineWidth | number | 6 | min 1, max 30 |
color | colour | "#d9453b" |
calculator — Calculator
Provides a calculator on the board, with basic operations and, at larger widths, a scientific keypad for powers, roots, trigonometry and logarithms. Dedicated keys load the values of model variables at the current iteration, the result can be written to a model variable, and completed operations are kept in a history.
| Parameter | Type | Default | Range |
|---|---|---|---|
n | number | 0 | |
a | number | 0 | |
p | number | 0 | |
s | number | 0 | |
dp | number | 0 | |
ad | number | 0 | |
fresh | number | 0 | |
inv | number | 0 | |
history | memory | [] | |
termA | variable | "" | |
termB | variable | "" | |
termC | variable | "" | |
termD | variable | "" | |
keyAColor | colour | "token:surface.muted" | |
keyBColor | colour | "token:surface.muted" | |
keyCColor | colour | "token:surface.muted" | |
keyDColor | colour | "token:surface.muted" | |
resultVariable | variable | "" | |
digits | number | 2 | min 0, max 6 |
scientific | boolean | true | |
angleUnit | string | "radians" | radians | degrees |
showHistory | boolean | true | |
historyLimit | number | 24 | min 1, max 200 |
bodyColor | colour | "token:surface.emphasis" | |
displayColor | colour | "token:surface.default" | |
keyColor | colour | "token:surface.default" | |
functionKeyColor | colour | "token:surface.muted" | |
accentColor | colour | "token:stroke.accent" | |
borderColor | colour | "token:stroke.subtle" | |
textColor | colour | "token:text.primary" | |
accentTextColor | colour | "token:text.inverse" | |
mutedTextColor | colour | "token:text.secondary" |
capacitor — Capacitor
Represents an electrolytic capacitor in an electric circuit, with two terminals for connecting cables. Displays the capacitance, the current and the voltage, each read from a variable or a number, which makes it suitable for charging and discharging in RC circuit models.
| Parameter | Type | Default | Range |
|---|---|---|---|
capacitance | variable | "0.01" | |
current | variable | "0" | |
voltage | variable | "0" | |
showCurrentArrow | boolean | true | |
canColor | colour | "#2c4763" | |
stripeColor | colour | "#a3b6ca" | |
baseColor | colour | "#e7dac0" | |
leadColor | colour | "#a7adb5" | |
arrowColor | colour | "#dc2626" | |
capacitanceUnit | unit | "F" | |
currentUnit | unit | "A" | |
voltageUnit | unit | "V" |
circuit — Circuit
Displays a closed racing track generated from a track number, with straights, bends, kerbs and a start line. It holds bodies whose position and heading are model variables, measured from the center of the track in configurable units, and indicates when a body leaves the road.
| Parameter | Type | Default | Range |
|---|---|---|---|
circuitNumber | number | 1 | min 1, max 9999 |
unitsAcross | number | 100 | min 0.001 |
roadWidth | number | 8 | min 0.001 |
showKerbs | boolean | true | |
showStartLine | boolean | true | |
roadColor | colour | "#4b5563" | |
kerbColor | colour | "#dc2626" | |
kerbAltColor | colour | "#f8fafc" | |
lineColor | colour | "#111827" |
circuit-track — Circuit track
A closed racing track laid out from a seed: the same seed always draws the same loop of straights and bends, fitted to the width and height it is given. The road is drawn as one wide stroke along the centreline, red and white kerbs stand on every bend, and a chequered line marks the start of the lap. The road is the node called "road", so whatever holds shapes on the track can tell where its edges are.
| Parameter | Type | Default | Range |
|---|---|---|---|
seed | number | 1 | min 0 |
width | number | 320 | min 1 |
height | number | 220 | min 1 |
roadWidth | number | 24 | min 1 |
kerbWidth | number | 5 | min 0 |
showKerbs | boolean | true | |
showStartLine | boolean | true | |
roadColor | colour | "#4b5563" | |
kerbColor | colour | "#dc2626" | |
kerbAltColor | colour | "#f8fafc" | |
lineColor | colour | "#111827" |
circular-gauge — Circular gauge
Displays the value of a model variable as a ring that fills clockwise in proportion to that value between a configurable minimum and maximum. The start angle and span of the ring are adjustable, and an optional numeric readout shows the value with its unit.
| Parameter | Type | Default | Range |
|---|---|---|---|
valueVariable | variable | "0" | |
minimum | number | 0 | |
maximum | number | 100 | |
startAngle | number | 90 | |
spanAngle | number | 360 | min 1, max 360 |
thickness | number | 0.22 | min 0.02, max 1 |
trackColor | colour | "token:surface.muted" | |
fillColor | colour | "token:stroke.accent" | |
labelColor | colour | "token:text.primary" | |
digits | number | 0 | min 0, max 6 |
unit | unit | "" | |
showReadout | boolean | true |
clock — Clock
Displays a time as an analog face or a digital readout, either from model variables for hours, minutes, seconds and milliseconds or from the independent variable taken as seconds. It can also operate as a stopwatch, with controls to start, stop and record laps.
| Parameter | Type | Default | Range |
|---|---|---|---|
syncedWithPlayer | boolean | false | |
hourVariable | variable | "0" | |
minuteVariable | variable | "0" | |
secondVariable | variable | "0" | |
millisecondVariable | variable | "0" | |
shownAs | string | "analogue" | analogue | digital |
showControls | boolean | false | |
showLaps | boolean | false | |
faceColor | colour | "token:surface.default" | |
borderColor | colour | "token:stroke.default" | |
hourColor | colour | "token:stroke.strong" | |
minuteColor | colour | "token:stroke.strong" | |
secondColor | colour | "token:stroke.warning" | |
millisecondColor | colour | "#00000000" | |
numberColor | colour | "token:text.primary" | |
buttonColor | colour | "token:surface.muted" | |
running | number | 0 | |
laps | memory | [] |
compass — Compass
Displays a compass rose with cardinal directions and a needle whose heading is read from a model variable, while a second variable rotates the rose. Dragging the needle or the rim of the rose writes the corresponding value back to the model, so it also serves as a heading control.
| Parameter | Type | Default | Range |
|---|---|---|---|
headingVariable | variable | "0" | |
rotationVariable | variable | "0" | |
pointers | terms | [] | |
showDegrees | boolean | false | |
faceColor | colour | "token:surface.default" | |
borderColor | colour | "token:stroke.default" | |
tickColor | colour | "token:stroke.subtle" | |
needleColor | colour | "token:stroke.warning" | |
tailColor | colour | "token:stroke.subtle" | |
labelColor | colour | "token:text.primary" |
dial-face — Dial face
Circular face with an optional bezel ring, used as the background of clocks, gauges and compasses.
| Parameter | Type | Default | Range |
|---|---|---|---|
centerX | number | 0 | |
centerY | number | 0 | |
radius | number | 80 | min 1 |
faceColor | colour | "token:surface.default" | |
borderColor | colour | "token:stroke.default" | |
borderWidth | number | 2 | min 0, max 40 |
bezelWidth | number | 0 | min 0, max 60 |
bezelColor | colour | "token:surface.emphasis" |
electric-circuit — Electric circuit
Holds batteries, resistors, bulbs, capacitors, switches and the cables joining them, and works out the current through each part and the voltage across it. Parts and cables are added with the circuit's + button.
| Parameter | Type | Default | Range |
|---|---|---|---|
lineWidth | number | 1 | min 0, max 20 |
backgroundColor | colour | "#FFFFFF" | |
borderColor | colour | "#1E1E1E" | |
partCount | number | 0 | |
emptyHint | string | "Add parts and cables with the + button" |
electric-switch — Switch
Represents a switch in an electric circuit, with two terminals for connecting cables. Clicking the switch opens or closes it, writing 0 or 1 to its variable, so the model can make or break the circuit. The current and the voltage across the switch are also displayed.
| Parameter | Type | Default | Range |
|---|---|---|---|
closed | variable | "1" | |
current | variable | "0" | |
voltage | variable | "0" | |
showCurrentArrow | boolean | true | |
plateColor | colour | "#eee8db" | |
indicatorColor | colour | "#f97316" | |
leadColor | colour | "#a7adb5" | |
arrowColor | colour | "#dc2626" | |
currentUnit | unit | "A" | |
voltageUnit | unit | "V" |
gauge — Gauge
Displays the value of a model variable as a needle on a numbered dial, and allows the value to be set by turning the needle. The scale can adjust automatically to the range of the run or use a fixed minimum and maximum, and up to three colored bands mark regions of the scale.
| Parameter | Type | Default | Range |
|---|---|---|---|
valueVariable | variable | "0" | |
autoScale | boolean | true | |
minimum | number | 0 | |
maximum | number | 10 | |
step | number | 1 | min 0 |
snapToTick | boolean | false | |
startAngle | number | 225 | |
endAngle | number | -45 | |
lowBandFrom | number | 0 | |
lowBandTo | number | 0 | |
middleBandFrom | number | 0 | |
middleBandTo | number | 0 | |
highBandFrom | number | 0 | |
highBandTo | number | 0 | |
digits | number | 0 | min 0, max 6 |
unit | unit | "" | |
backgroundColor | colour | "token:surface.emphasis" | |
foregroundColor | colour | "token:stroke.default" | |
borderColor | colour | "token:stroke.default" | |
lowBandColor | colour | "#2f9e44" | |
middleBandColor | colour | "#f08c00" | |
highBandColor | colour | "#e03130" | |
hoverX | number | 0 | |
hoverY | number | 0 | |
hovering | number | 0 |
geometry-point — Geometry point
A point of a geometric construction, placed by two coordinates. Dragging it moves every segment, line, circle, polygon and angle built on it; a variable the model defines moves it instead.
| Parameter | Type | Default | Range |
|---|---|---|---|
xVariable | variable | "0" | |
xVariableUnit | unit | "" | |
yVariable | variable | "0" | |
yVariableUnit | unit | "" | |
size | number | 4.5 | min 1, max 20 |
foregroundColor | colour | "#1565C0" | |
trajectoryColor | colour | "transparent" |
geometry-system — Geometry
A workspace with axes for building geometric constructions as in dynamic geometry: points joined by segments, lines, rays and vectors, circles, triangles and polygons, and angles. Constructions follow their points wherever they are dragged or wherever the model moves them, and lengths, slopes, areas, perimeters and angles are shown on the drawing and can be written into model variables. Constructions are added with the system’s + button, by clicking existing points or empty places where new points are put.
| Parameter | Type | Default | Range |
|---|---|---|---|
scaleX | number | 0.025 | |
scaleY | number | 0.025 | |
autoScale | boolean | false | |
equalAxisScales | boolean | true | |
snapToTicks | boolean | true | |
showHorizontalAxis | boolean | true | |
showVerticalAxis | boolean | true | |
showTicksWithValues | boolean | true | |
showHorizontalGrid | boolean | true | |
showVerticalGrid | boolean | true | |
backgroundImageUrl | image | "" | |
backgroundColor | colour | "#FFFFFF" | |
foregroundColor | colour | "#1E1E1E" | |
borderColor | colour | "#1E1E1E" | |
originX | number | 0 | |
originY | number | 0 | |
axisRotation | number | 0 | |
frameTurn | number | 0 |
key-cap — Key cap
Rounded key with a centred label. It carries no interaction of its own: put it inside a group and give that group the behaviour the key performs, so the same cap serves a keypad, a legend or a toolbar.
| Parameter | Type | Default | Range |
|---|---|---|---|
x | number | 0 | |
y | number | 0 | |
width | number | 44 | min 0 |
height | number | 32 | min 0 |
label | string | "" | |
fill | colour | "token:surface.default" | |
borderColor | colour | "token:stroke.subtle" | |
borderWidth | number | 1 | min 0 |
cornerRadius | number | 6 | min 0 |
labelColor | colour | "token:text.primary" | |
fontSize | number | 14 | min 1 |
fontWeight | number | 500 | min 100, max 900 |
label-ring — Label ring
Numeric or text labels placed evenly around a centre, always drawn upright.
| Parameter | Type | Default | Range |
|---|---|---|---|
centerX | number | 0 | |
centerY | number | 0 | |
radius | number | 60 | min 1 |
count | number | 12 | min 0, max 360 |
startAngle | number | 90 | |
spanAngle | number | 360 | |
includeEnd | boolean | false | |
startValue | number | 12 | |
valueStep | number | 1 | |
wrapAt | number | 12 | min 0 |
digits | number | 0 | min 0, max 6 |
numberFormat | string | "decimal" | decimal | pi |
texts | string | "" | |
fontSize | number | 12 | min 1 |
fontFamily | string | "token:font.family" | |
fontWeight | number | 400 | min 100, max 900 |
color | colour | "token:text.primary" |
light-bulb — Light bulb
Represents a light bulb in an electric circuit, with two terminals for connecting cables. Its brightness reflects the power it receives relative to its rated power, calculated from the voltage and current, or from the current and resistance when no voltage is given. Resistance, current and voltage are each read from a variable or a number.
| Parameter | Type | Default | Range |
|---|---|---|---|
resistance | variable | "10" | |
current | variable | "0" | |
voltage | variable | "0" | |
ratedPower | number | 1 | min 0.000001 |
showGlow | boolean | true | |
showCurrentArrow | boolean | true | |
glassColor | colour | "#f6ecd8" | |
lightColor | colour | "#ffd23f" | |
baseColor | colour | "#b3b8bf" | |
leadColor | colour | "#a7adb5" | |
arrowColor | colour | "#dc2626" | |
resistanceUnit | unit | "Ω" | |
currentUnit | unit | "A" | |
voltageUnit | unit | "V" |
magnetic-system — Magnetic system
A space for magnetism, with axes in metres. It holds bar magnets, wires and coils carrying currents, compasses, regions of uniform field and charged particles, draws the field lines of the magnets and currents, turns each compass to the field and traces the path of each particle through the uniform fields. Parts are added with the system's + button.
| Parameter | Type | Default | Range |
|---|---|---|---|
backgroundField | variable | "0" | |
showFieldLines | boolean | true | |
showFieldVectors | boolean | false | |
lineDensity | number | 12 | min 2, max 40 |
scaleX | number | 0.0025 | |
scaleY | number | 0.0025 | |
autoScale | boolean | false | |
equalAxisScales | boolean | true | |
snapToTicks | boolean | false | |
showHorizontalAxis | boolean | true | |
showVerticalAxis | boolean | true | |
showTicksWithValues | boolean | true | |
showHorizontalGrid | boolean | true | |
showVerticalGrid | boolean | true | |
backgroundImageUrl | image | "" | |
backgroundColor | colour | "#FFFFFF" | |
foregroundColor | colour | "#1E1E1E" | |
borderColor | colour | "#1E1E1E" | |
fieldLineColor | colour | "#2563EB" | |
originX | number | 0 | |
originY | number | 0 | |
axisRotation | number | 0 | |
frameTurn | number | 0 | |
previewArt | boolean | false | |
partCount | number | 0 | |
emptyHint | string | "Add magnets, wires, coils, compasses, fields and particles with the + button" |
mechanical-anchor — Anchor
A fixed point in a mechanical system that springs, ropes and joints are fastened to, like the support of a pendulum. Dragging it moves the point of support. Springs, ropes and joints fasten to its terminals.
| Parameter | Type | Default | Range |
|---|---|---|---|
positionX | variable | "0" | |
positionY | variable | "0" | |
fillColor | colour | "#6B7280" |
mechanical-ball — Ball
A circular rigid body in a mechanical system that rolls and collides, with a mass, a radius, friction and restitution. Its position, angle and velocity are numbers it starts from, variables the simulation writes, or variables the model defines. Dragging it moves it and dragging the grip on its rim turns it. Springs, ropes and joints fasten to its terminals.
| Parameter | Type | Default | Range |
|---|---|---|---|
positionX | variable | "0" | |
positionY | variable | "0" | |
angle | variable | "" | |
velocityX | variable | "" | |
velocityY | variable | "" | |
angularVelocity | variable | "" | |
mass | variable | "1" | |
ballRadius | variable | "0.15" | |
kineticFriction | variable | "0.3" | |
staticFriction | variable | "0.4" | |
restitution | variable | "0.2" | |
fixed | boolean | false | |
collides | boolean | true | |
accelerationX | variable | "" | |
accelerationY | variable | "" | |
kineticEnergy | variable | "" | |
potentialEnergy | variable | "" | |
showVelocity | boolean | false | |
showAcceleration | boolean | false | |
showNetForce | boolean | false | |
showContactForce | boolean | false | |
velocityScale | number | 40 | min 0.01, max 1000 |
accelerationScale | number | 8 | min 0.01, max 1000 |
forceScale | number | 6 | min 0.01, max 1000 |
fillColor | colour | "#E07A5F" | |
borderColor | colour | "#1F2937" | |
trajectoryColor | colour | "transparent" | |
vectorColor | colour | "#16A34A" | |
netForceX | number | 0 | |
netForceY | number | 0 | |
contactForceX | number | 0 | |
contactForceY | number | 0 | |
trail | string | "" | |
invalid | number | 0 |
mechanical-block — Block
A rectangular rigid body in a mechanical system, with a mass, a size, friction and restitution. Its position, angle and velocity are numbers it starts from, variables the simulation writes, or variables the model defines. Dragging it moves it and dragging the grip on its side turns it. Springs, ropes and joints fasten to its terminals.
| Parameter | Type | Default | Range |
|---|---|---|---|
positionX | variable | "0" | |
positionY | variable | "0" | |
angle | variable | "" | |
velocityX | variable | "" | |
velocityY | variable | "" | |
angularVelocity | variable | "" | |
mass | variable | "1" | |
blockWidth | variable | "0.4" | |
blockHeight | variable | "0.3" | |
kineticFriction | variable | "0.3" | |
staticFriction | variable | "0.4" | |
restitution | variable | "0.2" | |
fixed | boolean | false | |
collides | boolean | true | |
accelerationX | variable | "" | |
accelerationY | variable | "" | |
kineticEnergy | variable | "" | |
potentialEnergy | variable | "" | |
showVelocity | boolean | false | |
showAcceleration | boolean | false | |
showNetForce | boolean | false | |
showContactForce | boolean | false | |
velocityScale | number | 40 | min 0.01, max 1000 |
accelerationScale | number | 8 | min 0.01, max 1000 |
forceScale | number | 6 | min 0.01, max 1000 |
fillColor | colour | "#4F7CAC" | |
borderColor | colour | "#1F2937" | |
trajectoryColor | colour | "transparent" | |
vectorColor | colour | "#16A34A" | |
netForceX | number | 0 | |
netForceY | number | 0 | |
contactForceX | number | 0 | |
contactForceY | number | 0 | |
trail | string | "" | |
invalid | number | 0 |
mechanical-joint — Joint
A rigid connection between two parts of a mechanical system: a rod that keeps them at the same distance, a pivot that pins one to the other at a point while both turn freely, or a weld that holds them fast. It is drawn from a terminal of one part to a terminal of another.
| Parameter | Type | Default | Range |
|---|---|---|---|
kind | string | "rod" | rod | pivot | weld |
length | variable | "" | |
force | variable | "" | |
angle | variable | "" | |
angularVelocity | variable | "" | |
lineWidth | number | 5 | min 1, max 30 |
color | colour | "#475569" |
mechanical-pulley — Pulley
An ideal fixed pulley in a mechanical system, with no mass and no friction, that turns a rope round. Two ropes fastened to its left and right sides act as one rope over the wheel: the same tension pulls both bodies and the total length stays the same. Dragging it moves it.
| Parameter | Type | Default | Range |
|---|---|---|---|
positionX | variable | "0" | |
positionY | variable | "0" | |
wheelRadius | variable | "0.12" | |
fillColor | colour | "#94A3B8" |
mechanical-rope — Rope
A flexible rope fastened between two parts of a mechanical system. It pulls only while it is taut and goes slack when its ends come closer. It does not stretch, unless it is given a stiffness: then it stretches like a spring that only pulls, as a bungee cord does. Two ropes fastened to the sides of a pulley act as one rope over it.
| Parameter | Type | Default | Range |
|---|---|---|---|
length | variable | "" | |
stiffness | variable | "" | |
damping | variable | "0" | |
tension | variable | "" | |
extension | variable | "" | |
angle | variable | "" | |
angularVelocity | variable | "" | |
lineWidth | number | 2.5 | min 0.5, max 20 |
color | colour | "#92400E" | |
controlX | number | 0 | |
controlY | number | 0 |
mechanical-spring — Spring
A coil spring fastened between two parts of a mechanical system, pulling and pushing them by Hooke’s law with damping. It is drawn from a terminal of one part to a terminal of another and follows them as they move.
| Parameter | Type | Default | Range |
|---|---|---|---|
stiffness | variable | "40" | |
restLength | variable | "" | |
damping | variable | "0" | |
extension | variable | "" | |
force | variable | "" | |
energy | variable | "" | |
turns | number | 12 | min 2, max 80 |
coilDiameter | number | 18 | min 4, max 200 |
wireWidth | number | 2 | min 0.5, max 20 |
color | colour | "#64748B" |
mechanical-surface — Surface
A fixed flat or inclined surface in a mechanical system that bodies rest on, slide along and bounce off, with friction and restitution. Dragging it moves it; dragging its right end changes its inclination and its length. Springs, ropes and joints fasten to its terminals.
| Parameter | Type | Default | Range |
|---|---|---|---|
positionX | variable | "0" | |
positionY | variable | "0" | |
length | variable | "3" | |
angle | variable | "0" | |
thickness | variable | "0.15" | |
kineticFriction | variable | "0.3" | |
staticFriction | variable | "0.4" | |
restitution | variable | "0.2" | |
fillColor | colour | "#D6D3D1" | |
lineColor | colour | "#44403C" |
mechanical-system — Mechanical system
A workspace with axes in metres for building mechanical systems from blocks, balls, surfaces, anchors, pulleys, springs, ropes, joints and forces. A built-in physics simulation works out their motion with gravity, friction, air drag, collisions, springs and constraints, row by row with the model; any position or velocity can instead be given by the model, and what the simulation works out can be written into model variables. Parts are added with the system’s + button.
| Parameter | Type | Default | Range |
|---|---|---|---|
gravity | variable | "9.8" | |
linearDrag | variable | "0" | |
quadraticDrag | variable | "0" | |
elasticity | variable | "0" | |
kineticEnergy | variable | "" | |
potentialEnergy | variable | "" | |
mechanicalEnergy | variable | "" | |
momentumX | variable | "" | |
momentumY | variable | "" | |
simulationStep | number | 0.001 | min 0.00005, max 0.01 |
scaleX | number | 0.01 | |
scaleY | number | 0.01 | |
autoScale | boolean | false | |
equalAxisScales | boolean | true | |
snapToTicks | boolean | false | |
showHorizontalAxis | boolean | true | |
showVerticalAxis | boolean | true | |
showTicksWithValues | boolean | true | |
showHorizontalGrid | boolean | true | |
showVerticalGrid | boolean | true | |
backgroundImageUrl | image | "" | |
backgroundColor | colour | "#FFFFFF" | |
foregroundColor | colour | "#1E1E1E" | |
borderColor | colour | "#1E1E1E" | |
originX | number | 0 | |
originY | number | 0 | |
axisRotation | number | 0 | |
frameTurn | number | 0 | |
partCount | number | 0 | |
emptyHint | string | "Add bodies, surfaces and connections with the + button" |
mechanical-wave — Mechanical wave
Represents a mechanical wave as a chain of oscillators, each reproducing the motion of the source with a delay proportional to its distance. It can replay the values of a model variable over the run, or compute a wave from its amplitude, frequency, speed and damping and return the displacement of a chosen oscillator to the model.
| Parameter | Type | Default | Range |
|---|---|---|---|
wave | variable | "" | |
amplitude | variable | "2" | |
frequency | variable | "0.5" | |
speed | variable | "5" | |
damping | variable | "0" | |
length | number | 20 | min 0.001 |
autoScale | boolean | true | |
minimumY | number | -2 | |
maximumY | number | 2 | |
samples | number | 30 | min 2, max 200 |
orientation | string | "transverse" | transverse | longitudinal | radial |
wavefront | boolean | true | |
elementSize | number | 4 | min 1, max 30 |
referenceIndex | number | 1 | min 0, max 200 |
showArrows | boolean | false | |
showLine | boolean | false | |
showGrid | boolean | true | |
showAxes | boolean | true | |
backgroundColor | colour | "token:surface.default" | |
borderColor | colour | "token:stroke.subtle" | |
waveColor | colour | "token:stroke.accent" | |
referenceColor | colour | "token:stroke.strong" | |
axisColor | colour | "token:axis.color" | |
gridColor | colour | "token:grid.color" |
media — Media
Shows an image, a video or a sound, chosen from a file, from the catalogue or from a link to a video page. A video or a sound can follow the model, a frame for each step, or play on its own with its own controls.
| Parameter | Type | Default | Range |
|---|---|---|---|
lineWidth | number | 1 | min 0, max 20 |
borderColor | colour | "#000000" | |
borderInset | number | 0 | |
isPreview | number | 0 |
memory-list — Memory list
The rows of a memory drawn as a list, newest first, with the label on the left and the number on the right. Rows can carry actions, so choosing one puts what it holds back into the object.
| Parameter | Type | Default | Range |
|---|---|---|---|
rows | object | [] | |
x | number | 0 | |
y | number | 0 | |
width | number | 120 | min 0 |
height | number | 160 | min 0 |
rowHeight | number | 20 | min 6 |
order | string | "newest" | newest | oldest |
layout | string | "row" | row | stacked |
digits | number | 2 | min 0, max 6 |
fontSize | number | "token:font.size.default" | min 1 |
textColor | colour | "token:text.secondary" | |
valueColor | colour | "token:text.primary" | |
rowColor | colour | "none" | |
cornerRadius | number | 4 | min 0 |
emptyText | string | "" | |
rowActions | object | [] |
memory-trace — Memory trace
The path the rows of a memory draw, mapped from the values they hold to the pixels of a plot with the same origin and scale the recording used.
| Parameter | Type | Default | Range |
|---|---|---|---|
rows | object | [] | |
originX | number | 0 | |
originY | number | 0 | |
scaleX | number | 1 | |
scaleY | number | -1 | |
color | colour | "token:stroke.accent" | |
lineWidth | number | 2 | min 0 |
opacity | number | 1 | min 0, max 1 |
shownRows | number | 0 | min 0 |
showPoints | boolean | false | |
pointRadius | number | 1.5 | min 0 |
clipX | number | 0 | |
clipY | number | 0 | |
clipWidth | number | 0 | min 0 |
clipHeight | number | 0 | min 0 |
microphone — Microphone
Displays the sound level picked up by the computer's microphone as a column of lights colored by configurable ranges, with readouts of the level in decibels and the dominant frequency. When linked to existing model variables, it writes the level and frequency to them at each iteration, so dependent variables follow the sound.
| Parameter | Type | Default | Range |
|---|---|---|---|
level | variable | "" | |
frequency | variable | "" | |
listening | boolean | true | |
calibration | number | 110 | |
maximum | number | 120 | min 10, max 200 |
step | number | 10 | min 1, max 50 |
moderateFrom | number | 50 | |
loudFrom | number | 70 | |
dangerFrom | number | 90 | |
liveLevel | number | null | |
liveFrequency | number | null | |
levelLive | number | 1 | |
frequencyLive | number | 1 | |
quietColor | colour | "#5fd068" | |
moderateColor | colour | "#f4e04d" | |
loudColor | colour | "#f39a33" | |
dangerColor | colour | "#e5483b" | |
frequencyColor | colour | "#4fb3ff" | |
backgroundColor | colour | "#262b31" | |
wellColor | colour | "#14171b" | |
borderColor | colour | "#3b424a" | |
foregroundColor | colour | "#f1f3f5" | |
subtleColor | colour | "#9aa2ab" |
mind-map-bubble — Speech bubble
Represents a speech bubble in a mind map or diagram: a rounded box with a tail pointing toward a speaker or a part of the board. Its text is edited by double-clicking, the tail position is adjustable, and connectors can be attached anywhere on its outline.
| Parameter | Type | Default | Range |
|---|---|---|---|
text | string | "" | |
fontSize | number | 16 | min 8, max 72 |
lineWidth | number | 2 | min 0, max 20 |
borderColor | colour | "token:stroke.default" | |
backgroundColor | colour | "#f7f7f7" | |
textColor | colour | "#000000" | |
tailHeight | number | 20 | min 2, max 200 |
tailTipPosition | number | 0.18 | min 0.02, max 0.98 |
mind-map-connector — Mind map connector
Connects two objects on the board with a line or an arrow, either end attached to an object or left free. The line can be curved, straight or elbowed, solid or dashed, with a choice of end tips, and can carry a text label positioned along its length.
| Parameter | Type | Default | Range |
|---|---|---|---|
routing | string | "smooth" | smooth | straight | orthogonal |
startTip | string | "none" | none | arrow | closed | point | diamond |
endTip | string | "arrow" | none | arrow | closed | point | diamond |
lineStyle | string | "solid" | solid | dashed |
lineWidth | number | 2 | min 1, max 20 |
text | string | "" | |
fontSize | number | 12 | min 8, max 72 |
labelPosition | number | 0.5 | min 0, max 1 |
color | colour | "token:stroke.default" | |
textColor | colour | "#000000" | |
labelBackground | colour | "#ffffff" |
mind-map-ellipse — Mind map ellipse
Represents a node of a mind map as an ellipse holding text, typically used for the central idea. Its text is edited by double-clicking and wraps to fit the shape. Connectors can be attached anywhere on its outline and follow it when it moves.
| Parameter | Type | Default | Range |
|---|---|---|---|
text | string | "" | |
fontSize | number | 16 | min 8, max 72 |
lineWidth | number | 2 | min 0, max 20 |
borderColor | colour | "token:stroke.default" | |
backgroundColor | colour | "#f7f7f7" | |
textColor | colour | "#000000" |
mind-map-rectangle — Mind map box
Represents a node of a mind map or diagram as a box with rounded corners holding text. Its text is edited by double-clicking and wraps to fit the width of the box. Connectors can be attached anywhere on its outline and follow it when it moves.
| Parameter | Type | Default | Range |
|---|---|---|---|
text | string | "" | |
fontSize | number | 16 | min 8, max 72 |
lineWidth | number | 2 | min 0, max 20 |
borderColor | colour | "token:stroke.default" | |
backgroundColor | colour | "#f7f7f7" | |
textColor | colour | "#000000" |
mouse-tracker — Mouse tracker
Records the path of the pointer across a plot with horizontal and vertical axes, each drag adding a separate line. The recorded samples can be written to two model variables, one value per iteration, so the player replays the gesture and other objects reading those variables respond to it.
| Parameter | Type | Default | Range |
|---|---|---|---|
samples | memory | [] | |
xVariable | variable | "0" | |
yVariable | variable | "0" | |
xVariableUnit | string | "" | |
yVariableUnit | string | "" | |
xValueColor | colour | "token:axis.color" | |
yValueColor | colour | "token:axis.color" | |
characterKey | character | "" | |
characterImage | string | "" | |
characterPivotX | number | 0.5 | |
characterPivotY | number | 0.5 | |
characterAspect | number | 1 | |
hoverX | number | 0 | |
hoverY | number | 0 | |
hovering | number | 0 | |
autoScale | boolean | false | |
equalScales | boolean | false | |
minimumX | number | 0 | |
maximumX | number | 10 | |
minimumY | number | 0 | |
maximumY | number | 10 | |
perStep | boolean | false | |
showGrid | boolean | false | |
showTicks | boolean | false | |
ticks | number | 5 | min 2, max 11 |
backgroundColor | colour | "token:surface.default" | |
dataAreaColor | colour | "token:surface.default" | |
axisColor | colour | "token:axis.color" | |
valueColor | colour | "token:stroke.warning" | |
foregroundColor | colour | "token:axis.labelColor" | |
borderColor | colour | "token:stroke.subtle" |
optical-system — Optical system
A space for geometrical optics. It holds objects, light sources, lenses, mirrors and screens, traces the rays between them and draws the images they form, with the principal axis, the focal points and the distances and magnification of every lens and mirror. Parts are added with the system's + button.
| Parameter | Type | Default | Range |
|---|---|---|---|
pixelsPerMetre | number | 400 | min 10, max 100000 |
showConstructionRays | boolean | true | |
showFocalPoints | boolean | true | |
showValues | boolean | true | |
showScale | boolean | true | |
showHorizontalGrid | boolean | true | |
showVerticalGrid | boolean | true | |
lineWidth | number | 1 | min 0, max 20 |
backgroundColor | colour | "#FFFFFF" | |
borderColor | colour | "#1E1E1E" | |
axisColor | colour | "#1E1E1E" | |
rayColor | colour | "#F59E0B" | |
originX | number | 0 | |
originY | number | 0 | |
previewArt | boolean | false |
orbit-system — Orbit system
Displays a central body with up to four bodies orbiting it, each with its own orbital period. The angular positions are computed from a time variable, usually the independent variable, which makes it suitable for comparing periods in systems such as planets, moons or gears.
| Parameter | Type | Default | Range |
|---|---|---|---|
timeVariable | variable | "t" | |
bodyCount | number | 3 | min 0, max 4 |
period1 | number | 4 | min 0.0001 |
period2 | number | 8 | min 0.0001 |
period3 | number | 16 | min 0.0001 |
period4 | number | 32 | min 0.0001 |
showOrbits | boolean | true | |
starColor | colour | "#f08c02" | |
bodyColor | colour | "token:stroke.accent" | |
orbitColor | colour | "token:stroke.subtle" |
oscilloscope — Oscilloscope
Displays one or more waves defined by the model over element indices as traces on a graticule, each in its own color. A variable without element values is traced over the run instead, one point per iteration. A cursor reads every trace at the pointer, and a click mark measures distances such as wavelengths.
| Parameter | Type | Default | Range |
|---|---|---|---|
waves | terms | [] | |
minimumX | number | -5 | |
maximumX | number | 5 | |
minimumY | number | -5 | |
maximumY | number | 5 | |
samples | number | 200 | min 2, max 300 |
ticks | number | 10 | min 2, max 11 |
showGrid | boolean | true | |
showTicks | boolean | true | |
showMark | boolean | false | |
markX | number | 0 | |
hoverX | number | 0 | |
hoverY | number | 0 | |
hovering | number | 0 | |
backgroundColor | colour | "#e0e0e0" | |
screenColor | colour | "#a5d6a7" | |
gridColor | colour | "#ffffff" | |
axisColor | colour | "#000000" | |
originColor | colour | "#000000" | |
cursorColor | colour | "token:stroke.default" | |
foregroundColor | colour | "token:axis.labelColor" | |
borderColor | colour | "token:stroke.subtle" |
piano — Piano
Displays a piano keyboard that can be played with the pointer or the computer keyboard, including chords. The sound of the notes being held is written to a model variable as a wave, one sample per iteration, which an oscilloscope or other objects can then read.
| Parameter | Type | Default | Range |
|---|---|---|---|
wave | variable | "" | |
amplitude | variable | "1" | |
samples | number | 30 | min 2, max 2000 |
duration | number | 0.02 | min 0.001 |
firstOctave | number | 4 | min 0, max 8 |
octaves | number | 2 | min 1, max 4 |
notes | object | null | |
whiteColor | colour | "token:surface.default" | |
blackColor | colour | "token:stroke.strong" | |
pressedColor | colour | "token:stroke.accent" | |
borderColor | colour | "token:stroke.default" |
piano-keyboard — Piano keyboard
A run of piano keys, drawn and tuned from the note each one carries: the naturals share the width between them and the sharps ride over the seams. Every key sounds its own pitch while it is held, by pointer or by the computer key that plays it, and the keys that are down are drawn lit. Nothing is written on a key: a keyboard is read by where a key sits, not by a letter painted on it.
| Parameter | Type | Default | Range |
|---|---|---|---|
width | number | 420 | min 1 |
height | number | 120 | min 1 |
firstOctave | number | 4 | min 0, max 8 |
octaves | number | 2 | min 1, max 4 |
notes | object | null | |
notesParameter | string | "" | |
whiteColor | colour | "token:surface.default" | |
blackColor | colour | "token:stroke.strong" | |
pressedColor | colour | "token:stroke.accent" | |
borderColor | colour | "token:stroke.default" |
plot-axes — Plot axes
Horizontal and vertical axis of a plot box, with tick marks and numbered labels. Any object that shows a value against a scale reads the same way a chart does.
| Parameter | Type | Default | Range |
|---|---|---|---|
x | number | 0 | |
y | number | 0 | |
width | number | 100 | min 1 |
height | number | 100 | min 1 |
minimumX | number | 0 | |
maximumX | number | 10 | |
minimumY | number | 0 | |
maximumY | number | 10 | |
ticksX | number | 5 | min 2, max 41 |
ticksY | number | 5 | min 2, max 41 |
showTicks | boolean | true | |
showLabels | boolean | true | |
showMinorTicks | boolean | true | |
showBorder | boolean | false | |
showZeroLines | boolean | true | |
minimumXProperty | string | "" | |
maximumXProperty | string | "" | |
minimumYProperty | string | "" | |
maximumYProperty | string | "" | |
minimumXFixed | boolean | false | |
minimumYFixed | boolean | false | |
fromZeroX | boolean | false | |
fromZeroY | boolean | false | |
origin | string | "box" | box | zero |
showAxisLines | boolean | true | |
rangeProperty | string | "" | |
rangeAxis | string | "shorter" | shorter | x | y |
scaleXProperty | string | "" | |
scaleYProperty | string | "" | |
equalScales | boolean | false | |
labelTurn | number | 0 | |
color | colour | "token:axis.color" | |
zeroColor | colour | "" | |
labelColor | colour | "token:axis.labelColor" | |
fontFamily | string | "token:font.family" | |
fontSize | number | "token:font.size.tick" | min 1 |
lineWidth | number | "token:axis.strokeWidth" | min 0 |
tickLength | number | "token:axis.tickLength" | min 0 |
plot-crosshair — Plot crosshair
Dashed lines from a point out to both axes, with the value it stands at read on a badge against each one — the way a chart answers where a point is.
| Parameter | Type | Default | Range |
|---|---|---|---|
x | number | 0 | |
y | number | 0 | |
width | number | 100 | min 1 |
height | number | 100 | min 1 |
minimumX | number | 0 | |
maximumX | number | 10 | |
minimumY | number | 0 | |
maximumY | number | 10 | |
valueX | number | 0 | |
valueY | number | 0 | |
rows | object | [] | |
digits | number | 2 | min 0, max 6 |
xUnit | string | "" | |
yUnit | string | "" | |
showBadges | boolean | true | |
color | colour | "token:stroke.default" | |
xColor | colour | "" | |
yColor | colour | "" | |
pointColor | colour | "token:stroke.accent" | |
axisBadgeColor | colour | "token:axis.labelColor" | |
badgeColor | colour | "token:text.secondary" | |
badgeTextColor | colour | "token:text.inverse" | |
fontFamily | string | "token:font.family" | |
fontSize | number | "token:font.size.tick" | min 1 |
plot-grid — Plot grid
Grid inside a plot box: one line at every tick of both axes, drawn the way the chart draws its own.
| Parameter | Type | Default | Range |
|---|---|---|---|
x | number | 0 | |
y | number | 0 | |
width | number | 100 | min 1 |
height | number | 100 | min 1 |
minimumX | number | 0 | |
maximumX | number | 10 | |
minimumY | number | 0 | |
maximumY | number | 10 | |
ticksX | number | 5 | min 2, max 41 |
ticksY | number | 5 | min 2, max 41 |
showVertical | boolean | true | |
showHorizontal | boolean | true | |
showMinor | boolean | true | |
color | colour | "token:grid.color" | |
lineWidth | number | "token:strokeWidth.default" | min 0 |
pointer-hand — Pointer hand
A clock hand, gauge needle or compass pointer that rotates clockwise around an anchor. Angle 0 points up.
| Parameter | Type | Default | Range |
|---|---|---|---|
centerX | number | 0 | |
centerY | number | 0 | |
angle | number | 0 | |
length | number | 60 | min 0 |
tailLength | number | 0 | min 0 |
width | number | 4 | min 0 |
color | colour | "token:stroke.strong" | |
style | string | "needle" | needle | line | arrow |
dragVariable | variable | "" | |
dragProperty | string | "" | |
degreesPerUnit | number | 6 | |
offsetDegrees | number | 0 | |
wrapAt | number | 0 | min 0 |
pointer-ring — Pointer ring
Directions marked around a dial, one marker per row: a row names an angle, or a pair of values read as a vector — how far across and how far up. Each marker stands where the tick for its direction stands, so it is read against the same scale.
| Parameter | Type | Default | Range |
|---|---|---|---|
centerX | number | 0 | |
centerY | number | 0 | |
radius | number | 80 | min 1 |
length | number | 14 | min 0 |
width | number | 10 | min 0 |
startAngle | number | 90 | |
pointers | object | [] |
program — Program
Runs a short Python program on every row of the model. Every name it gives a value to becomes a term of the model, so graphs, tables and other objects can show it, and it can read every term the model has, on the row being worked out. Write it as blocks or as Python text, and switch between the two at any time. step is the time between rows, and n == 1 or t == 0 marks the first row; a name starting with _ stays inside the program.
| Parameter | Type | Default | Range |
|---|---|---|---|
code | string | "# This program runs once on every row of the model.\n# n is the row and step the time between rows.\nif n == 1:\n x = 0\n v = 1\nelse:\n x = x + v * step" | |
lineWidth | number | 1 | min 0, max 20 |
backgroundColor | colour | "#fbfbfd" | |
borderColor | colour | "#000000" | |
isPreview | number | 0 |
protractor — Protractor
Provides an angular scale for measuring angles by hand on the board, laid over vectors, trajectories or drawings. It can span a half circle, a quadrant or a full circle, and resting the pointer on it reads the angle from its zero. It does not read from or write to the model.
| Parameter | Type | Default | Range |
|---|---|---|---|
startAngle | number | 0 | min -360, max 360 |
endAngle | number | 180 | min -360, max 360 |
angleUnit | string | "degrees" | degrees | radians |
digits | number | 0 | min 0, max 6 |
faceColor | colour | "token:surface.default" | |
borderColor | colour | "token:stroke.default" | |
scaleColor | colour | "token:axis.color" | |
scaleLabelColor | colour | "token:axis.labelColor" | |
readingColor | colour | "token:stroke.accent" | |
hoverX | number | 0 | |
hoverY | number | 0 | |
hovering | number | 0 |
question — Question
Asks the reader a question, with an optional picture, answered by choosing one or several answers or by writing one. Each answer can be marked correct and given a score. Double-click it to write the question and its answers.
| Parameter | Type | Default | Range |
|---|---|---|---|
lineWidth | number | 1 | min 0, max 20 |
backgroundColor | colour | "#f7f7f7" | |
borderColor | colour | "#000000" | |
isPreview | number | 0 |
resistor — Resistor
Represents a resistor in an electric circuit, with two terminals for connecting cables. Its color bands follow the IEC 60062 code for the resistance and tolerance given. Resistance, current and voltage are each read from a variable or a number, so Ohm's law is expressed in the model.
| Parameter | Type | Default | Range |
|---|---|---|---|
resistance | variable | "100" | |
current | variable | "0" | |
voltage | variable | "0" | |
tolerance | string | "5%" | 0.01% | 0.02% | 0.05% | 0.1% | 0.25% | 0.5% | 1% | 2% | 5% | 10% | 20% |
bandCount | string | "4" | 4 | 5 |
showColourBands | boolean | true | |
showCurrentArrow | boolean | true | |
bodyColor | colour | "#e8d2ae" | |
leadColor | colour | "#a7adb5" | |
arrowColor | colour | "#dc2626" | |
resistanceUnit | unit | "Ω" | |
currentUnit | unit | "A" | |
voltageUnit | unit | "V" |
rich-text — Text
Holds formatted text: headings, bold and italic, lists, links, tables and formulas. Double-click it to write, and format the text from the bar that opens beneath it.
| Parameter | Type | Default | Range |
|---|---|---|---|
lineWidth | number | 1 | min 0, max 20 |
backgroundColor | colour | "#f7f7f7" | |
borderColor | colour | "#000000" | |
isPreview | number | 0 |
rotating-vector — Rotating vector
Represents a phasor: an arrow whose angle and length are read from model variables, with an optional reference circle and projections onto the axes. Dragging the tip rotates and stretches the arrow, writing both the angle and the length back to the model.
| Parameter | Type | Default | Range |
|---|---|---|---|
angleVariable | variable | "0" | |
lengthVariable | variable | "1" | |
lengthScale | number | 1 | min 0 |
showCircle | boolean | true | |
showProjections | boolean | false | |
backgroundColor | colour | "none" | |
vectorColor | colour | "token:stroke.accent" | |
circleColor | colour | "token:stroke.subtle" | |
circleFillColor | colour | "none" | |
projectionColor | colour | "token:stroke.subtle" |
ruler — Ruler
Provides a linear scale for measuring by hand on the board, with numbered divisions and subdivisions between configurable end values, on a linear or logarithmic scale. Resting the pointer on it reads the value at that position, and dragging a number stretches the scale. It does not read from or write to the model.
| Parameter | Type | Default | Range |
|---|---|---|---|
minimumX | number | 0 | |
maximumX | number | 10 | |
scaleType | string | "linear" | linear | logarithmic |
majorTicks | number | 10 | min 1, max 60 |
unit | unit | "" | |
digits | number | 2 | min 0, max 6 |
backgroundColor | colour | "token:surface.default" | |
borderColor | colour | "token:stroke.default" | |
scaleColor | colour | "token:axis.color" | |
scaleLabelColor | colour | "token:axis.labelColor" | |
readingColor | colour | "token:stroke.accent" | |
hoverValue | number | 0 | |
hoverDepth | number | 0 | |
hovering | number | 0 |
seven-segment-display — Seven-segment display
A reading spelled out in seven-segment lamps, the way a digital clock, a meter or a stopwatch shows one. Digits, the colon, the point and the minus sign are drawn as bars; the bars a character does not light are left showing faintly, the way the unlit ones on a real panel are. The text is fitted to the box it is given, so it is placed by handing it a box rather than a font size.
| Parameter | Type | Default | Range |
|---|---|---|---|
x | number | 0 | |
y | number | 0 | |
width | number | 120 | min 0 |
height | number | 40 | min 0 |
text | string | "" | |
color | colour | "token:text.primary" | |
colors | string | "" | |
ghostOpacity | number | 0.12 | min 0, max 1 |
thickness | number | 0.16 | min 0.02, max 0.4 |
digitWidth | number | 0.56 | min 0.2, max 1.5 |
spacing | number | 0.14 | min 0, max 1 |
slant | number | 0 | min -30, max 30 |
slider — Slider
Displays the value of a model variable on a vertical scale between a minimum and a maximum, and sets it as the handle is dragged. It can be drawn as a filling bar or as a rail with a handle, with ticks at round values, a configurable step, and a scale that can expand to fit the run.
| Parameter | Type | Default | Range |
|---|---|---|---|
valueVariable | variable | "0" | |
unit | unit | "" | |
sliderStyle | string | "bar" | bar | classic |
showTicks | boolean | true | |
autoScale | boolean | true | |
minimum | number | 0 | |
maximum | number | 10 | |
showMinimumValue | boolean | true | |
showMaximumValue | boolean | true | |
precision | number | 0 | min 0 |
backgroundColor | colour | "token:surface.emphasis" | |
positiveColor | colour | "#000000" | |
negativeColor | colour | "#C62828" | |
foregroundColor | colour | "#000000" | |
borderColor | colour | "#000000" |
slope — Slope
Provides two perpendicular rulers, horizontal and vertical, forming a right triangle whose slope is shown as the ratio of rise to run. Each ruler has its own range and numbering, and dragging a number stretches that scale, so the slope of a line can be measured by hand.
| Parameter | Type | Default | Range |
|---|---|---|---|
horizontalMinimum | number | 0 | |
horizontalMaximum | number | 10 | |
horizontalMajorTicks | number | 5 | min 1, max 60 |
verticalMinimum | number | 0 | |
verticalMaximum | number | 10 | |
verticalMajorTicks | number | 5 | min 1, max 60 |
backgroundColor | colour | "token:surface.default" | |
foregroundColor | colour | "token:stroke.default" | |
borderColor | colour | "token:stroke.default" |
speedometer — Speedometer
Displays the value of a model variable as a needle sweeping across a dial with major and minor ticks, together with a numeric readout. The minimum, maximum and angular range are configurable, and an optional sound, such as an engine note, can vary in pitch or volume with the reading.
| Parameter | Type | Default | Range |
|---|---|---|---|
valueVariable | variable | "0" | |
minimum | number | 0 | |
maximum | number | 100 | |
startAngle | number | 225 | |
endAngle | number | -45 | |
majorTicks | number | 9 | min 2, max 60 |
minorPerMajor | number | 4 | min 0, max 20 |
digits | number | 0 | min 0, max 6 |
unit | unit | "" | |
showReadout | boolean | true | |
faceColor | colour | "token:surface.emphasis" | |
borderColor | colour | "token:stroke.default" | |
needleColor | colour | "token:stroke.warning" | |
labelColor | colour | "token:text.primary" | |
sound | audio | "" |
steering-wheel — Steering wheel
Provides vehicle controls: a steering wheel drawn as a car wheel, a motorcycle handlebar or a ship's helm, with accelerator and brake pedals. Dragging the wheel writes its angle or orientation to model variables, and the pedals write acceleration and braking values.
| Parameter | Type | Default | Range |
|---|---|---|---|
turnedBy | string | "angle" | angle | orientation |
angleVariable | variable | "0" | |
angleUpVariable | variable | "0" | |
accelerationVariable | variable | "0" | |
accelerationUpVariable | variable | "0" | |
brakingVariable | variable | "0" | |
brakingUpVariable | variable | "0" | |
wheelType | string | "car" | car | motor bike | boat |
showWheel | boolean | true | |
showPedals | boolean | false | |
showBrake | boolean | true | |
brakeMaximum | number | 100 | min 0 |
maximum | number | 100 | |
pedalReturnStep | number | 10 | min 0 |
rimColor | colour | "token:stroke.default" | |
gripColor | colour | "token:stroke.subtle" | |
hubColor | colour | "token:surface.muted" | |
restingAngle | number | 0 | |
markColor | colour | "token:stroke.warning" | |
acceleratorColor | colour | "token:stroke.accent" | |
brakeColor | colour | "token:stroke.warning" | |
frameColor | colour | "token:stroke.default" | |
surfaceColor | colour | "token:surface.muted" |
text-box — Text box
Text written over as many lines as it needs, broken between words where a line would run past the width it is given and at every line break it holds. Fitted to a box, it is laid out inside the box at the alignment asked for and the lines the box has no room for are left out; fitted to its content, it stands centred on the point it is given, on a plate that hugs the lines it writes.
| Parameter | Type | Default | Range |
|---|---|---|---|
x | number | 0 | |
y | number | 0 | |
width | number | 160 | min 0 |
height | number | 60 | min 0 |
fit | string | "box" | box | content |
text | string | "" | |
align | string | "middle" | start | middle | end |
verticalAlign | string | "middle" | top | middle | bottom |
fontSize | number | 16 | min 1 |
fontFamily | string | "token:font.family.sans" | |
fontWeight | number | 400 | min 100, max 900 |
lineHeight | number | 1.25 | min 0.5 |
padding | number | 0 | min 0 |
color | colour | "token:text.primary" | |
background | colour | "none" | |
backgroundOpacity | number | 1 | min 0, max 1 |
cornerRadius | number | 0 | min 0 |
thermometer — Thermometer
Displays the value of a model variable, typically a temperature, as the height of a liquid column against a graduated scale with configurable range and tick spacing. Dragging the column writes the value back to the model, and an optional sound can vary in pitch or volume with the reading.
| Parameter | Type | Default | Range |
|---|---|---|---|
valueVariable | variable | "0" | |
minimum | number | -20 | |
maximum | number | 120 | |
tickStep | number | 20 | min 0 |
digits | number | 1 | min 0, max 6 |
unit | string | "°C" | °C | °F |
showReadout | boolean | true | |
columnColor | colour | "token:stroke.warning" | |
glassColor | colour | "token:surface.default" | |
borderColor | colour | "token:stroke.default" | |
scaleColor | colour | "token:axis.color" | |
scaleLabelColor | colour | "token:axis.labelColor" | |
readoutColor | colour | "token:text.primary" | |
sound | audio | "" |
tick-ring — Tick ring
Evenly spaced radial tick marks around a centre, with optional longer major ticks.
| Parameter | Type | Default | Range |
|---|---|---|---|
centerX | number | 0 | |
centerY | number | 0 | |
radius | number | 80 | min 1 |
count | number | 12 | min 0, max 720 |
startAngle | number | 90 | |
spanAngle | number | 360 | |
includeEnd | boolean | false | |
length | number | 8 | min 0 |
width | number | 1 | min 0 |
color | colour | "token:stroke.default" | |
majorEvery | number | 0 | min 0 |
majorLength | number | 12 | min 0 |
majorWidth | number | 2 | min 0 |
trigonometric-circle — Trigonometric circle
Displays a trigonometric circle with a point that moves around it, showing the angle, the radius, the sine and cosine as projections, tangent, cotangent and arc length. Each quantity can be linked to a model variable: variables the model computes move the point, and free variables are written by dragging it or on every iteration of the run.
| Parameter | Type | Default | Range |
|---|---|---|---|
angleVariable | variable | "0.9" | |
radiusVariable | variable | "1" | |
pointXVariable | variable | "0" | |
pointYVariable | variable | "0" | |
tangentVariable | variable | "0" | |
cotangentVariable | variable | "0" | |
tangentPointVariable | variable | "0" | |
arcVariable | variable | "0" | |
angleUnit | string | "pi" | pi | radians | degrees |
snapDivisions | number | null | min 0, max 360 |
dragRadius | boolean | false | |
showGrid | boolean | true | |
showAxes | boolean | true | |
fitView | boolean | false | |
showAngle | boolean | true | |
showRadius | boolean | true | |
showSine | boolean | true | |
showCosine | boolean | true | |
showTangent | boolean | false | |
showTangentSegment | boolean | false | |
showCotangent | boolean | false | |
showArc | boolean | false | |
backgroundColor | colour | "none" | |
circleColor | colour | "token:stroke.default" | |
axisColor | colour | "token:axis.color" | |
gridColor | colour | "token:grid.color" | |
labelColor | colour | "token:text.secondary" | |
radiusColor | colour | "token:stroke.accent" | |
angleColor | colour | "#00695c" | |
sineColor | colour | "token:stroke.warning" | |
cosineColor | colour | "#2f9e44" | |
tangentColor | colour | "#6a1b9a" | |
cotangentColor | colour | "#1971c2" | |
tangentPointColor | colour | "#c2255c" | |
arcColor | colour | "#f08c02" | |
viewRange | number | 1.6 | min 0.05 |
value — Value
Displays the value of a model variable as a number with its unit and, optionally, its name. Double-clicking the value allows a new value to be typed into the model. The font size can follow a variable, and an optional sound can vary with the value as it changes.
| Parameter | Type | Default | Range |
|---|---|---|---|
valueVariable | variable | "0" | |
showName | boolean | false | |
unit | unit | "" | |
fontSize | variable | "14" | |
bold | boolean | false | |
italic | boolean | false | |
backgroundColor | colour | "token:surface.default" | |
foregroundColor | colour | "token:stroke.default" | |
borderColor | colour | "token:stroke.default" | |
sound | audio | "" |
Design tokens
The board's own colours, widths, fonts, axis and crosshair numbers. Write one as a default with "token:stroke.accent", or read one with the binding { "token": "stroke.accent" } — never the literal value, so a preset restyles every object at once.
| Token | Standard value |
|---|---|
surface.default | "#ffffff" |
surface.emphasis | "#f7f7f7" |
surface.muted | "#eeeeee" |
stroke.default | "#1e1e1e" |
stroke.strong | "#000000" |
stroke.subtle | "#9a9a9a" |
stroke.accent | "#1871c2" |
stroke.warning | "#e03130" |
text.primary | "#1e1e1e" |
text.secondary | "#6b6b6b" |
text.inverse | "#ffffff" |
selection.outline | "#1871c2" |
handle.fill | "#ffffff" |
handle.stroke | "#1871c2" |
strokeWidth.hairline | 0.5 |
strokeWidth.default | 1 |
strokeWidth.strong | 2 |
strokeWidth.heavy | 3 |
radius.small | 2 |
radius.medium | 4 |
radius.large | 8 |
spacing.small | 4 |
spacing.medium | 8 |
spacing.large | 16 |
font.family | "Katex_Main, Inter, serif" |
font.family.sans | "Inter, Assistant, system-ui, sans-serif" |
font.size.small | 9 |
font.size.default | 11 |
font.size.large | 14 |
font.size.tick | 10 |
font.weight.default | 400 |
font.weight.strong | 600 |
axis.color | "#7a7a7a" |
axis.labelColor | "#666666" |
axis.strokeWidth | 1.2 |
axis.tickLength | 4 |
axis.minorTickLength | 2.5 |
axis.minorOpacity | 0.45 |
axis.labelGapX | 1.8 |
axis.labelGapY | 0.7 |
axis.labelRise | 0.3 |
grid.color | "#d3d3d3" |
grid.majorOpacity | 0.75 |
grid.minorOpacity | 0.4 |
crosshair.dash | "4 3" |
crosshair.opacity | 0.25 |
crosshair.strokeWidth | 1 |
badge.opacity | 0.85 |
badge.cornerRadius | 3 |
badge.paddingX | 4 |
badge.paddingY | 2 |
badge.charWidth | 0.58 |
shadow.soft | "0 1px 2px rgba(0,0,0,0.16)" |
opacity.disabled | 0.4 |
opacity.ghost | 0.5 |
duration.fast | 120 |
duration.default | 240 |
size.default.width | 180 |
size.default.height | 180 |
handle.size | 8 |