Rig FX is one authored node with two faces. A .rig source that declares states, clocks and lanes is a control machine: it steps on the transport, and its state and events come out as control rows for the rest of the graph to read. A source that also declares an artboard is a surface: the same machine, plus a drawn picture with pads, faders, readouts, text or anything you lay out, that takes pointer, key and gamepad rows and draws to an image output.

Serve is what makes the surface an interface. One toggle on the node publishes it on the local network, a QR code appears, and a phone or tablet that scans it shows the surface and drives it with multi-touch.

Place it

Place Rig FX from the Rig view of the Voro menu. The docked DAT is named rig_source and the default source is the smallest running machine:

ports {
  in  go     : event
  out state  : rig_state
  out events : event
}

machine Show {
  Idle    { on go -> Running }
  Running { on go -> Idle }
}

go is a control row in. state and events are control rows out. Press Reload and the machine runs.

The source

A .rig source has three kinds of authored value and a machine.

• params are knobs on the node. name : number = 0.5 [0 .. 1], bool, menu with an item list, or string. Turning one applies live and presets save it.
• state is shared control. Each row is one channel on the control output, and a Rive input when there is an artboard.
• ports are the wires: image, control, named channels like control(next, prev), transport, pointer, key, gamepad, and table(columns...).
• machine NAME { ... } is the root. States nest, layer adds a concurrent machine, transitions fire on events, transport triggers, steps, beats, elapsed time, row conditions or wall time, and quantize to a beat, bar or section. Enter and exit actions play, pause, stop, seek, loop, set values and emit events. over N beats eases a value with linear, smooth or equal-power curves and can retarget in flight.
• clock owns an embedded arrangement, and can follow a transport input. lane plays keyframes or a pattern string against it, with length, loop, offset and a port.

A surface

Add artboard "NAME" and lay out the picture in JSX-like markup. Every surface has a locked first pair of ports, in pointer and in image, and out pointer and out image; declare extras after them.

ports {
  in  pointer : pointer
  in  image   : image
  out pointer : pointer
  out image   : image
  in  drive   : control(speed, glow)
  out control : control
}
params { theme : menu = "dark" ["dark", "light"] }
state selected : number = -1
event select(index : number)
theme dark  { bg: #101216, ink: #f2f2f2, accent: #ff3d00 }
theme light { bg: #f4f1ea, ink: #14110c, accent: #0033ff }

<Artboard name="Pads" width={640} height={360} bg={theme.bg}>
  <Group>
    <Repeat count={4}>
      <Rect name="pad" x={40 + index * 140} y={120} width={120} height={120} radius={12}
            fill={selected == index ? theme.accent : "#ffffff14"}
            onDown={selected = index, select(index)} />
    </Repeat>
    <Text x={40} y={280} size={18} weight={600} color={theme.ink}
          feather={1 + 3 * drive.glow}>{selected < 0 ? "TOUCH A PAD" : "PAD 0" + (selected + 1)}</Text>
  </Group>
</Artboard>

Artboard holds a Column or Row (flex layout) or a Group (free placement). The elements are Rect, Ellipse, Circle, Polygon, Star, Path, Line, Text, Image, Asset, Repeat, List, Grid, Button and Toggle. Any element that draws can take onEnter, onExit, onDown, onUp and onMove. A shape filled with a declared image port paints the picture on the wire into that shape. Colours and numbers may be expressions of params, state and rows.

The engine draws the artboard to the node’s image output every frame. The picture is the surface you see on the node, in a TouchDesigner panel, and on every served device.

Reload

Press Reload. The source compiles off-thread and the node adopts the new document at once, or at the adopt beat|bar|section boundary you declared. State ids that survive an edit keep their values. A failed compile leaves the complete last good document, its artboard and its declaration running, and reports the error.

Serve

The Serve page appears on a surface. Serve publishes it on the local network and fills in Serve URL; Show QR draws the code on the node so a phone can scan it. Connected shows how many devices are on the surface and whose turn it is.

• Serve Mode names how the surface is shared. Advanced shows the rows a mode is made of: pointer precedence between the panel and devices, whether a page may talk back into the look’s controls, who wins when two devices write the same control, and See Others, which draws everyone’s touches on every device.
• Serve Link decides the link’s life. A new link each time is for handing to a room; turning Serve off kills it. The same link every time survives restarts and can be bookmarked. A name you pick puts that word in the URL, with no secret in it.
• Turn (minutes) hands the surface from one visitor to the next when the mode takes turns.
• Controller picks which connected device drives, or leaves it to the first to touch.

Params flow down to every device, and a device can turn a param when the look allows it.

Save it

Save as Custom Module writes main.rig, with module.json, presets.json and theme.json when the source uses them, into a folder under voro_custom. The module appears in the Custom column of the Rig view. See Custom modules.

The reference page is Rig FX. The walkthrough is Serve a surface.