Joystick

Category: Controls · Sends commands: via scripts · Emits a value: yes (X/Y, to scripts)

Mental model

A Joystick is a game controller thumbstick. It emits a live X/Y position as the user drags it. Perfect for driving movement — a rover, a pan/tilt camera, a drone.

When to use it

Directional / two-axis control (drive, steer, pan-tilt)
Any input where two values move together

Settings

General

Widget Title / ID
Min value · Max value — the output range per axis
Dead zone — ignore tiny movements near center
Sensitivity — output scaling
Joystick size · custom size

Style

Base color, handle color, container, label.

Triggers

Event	Fires when
`change`	The stick moves (carries `{ x, y }`)
`touchstart` / `touchend`	Touch begins / ends
(common)	`load`, `ready`, `destroy`, `update`, `visible`, `hidden`

Sending the X/Y to a device

A Joystick does not auto-inject its X/Y into a trigger’s command params (only Slider, Color Picker, and Form do). Use the Script API to forward the position.

// Stream joystick position to the device
widget.on('driveStick', 'change', (pos) => {
  ws.send(context.deviceId, { command: 'drive', x: pos.x, y: pos.y });
});

Firmware (Arduino) — read x/y from the payload:

device.setUserCommandHandler([](JsonObject &msg) {
  JsonObject p = device.findParams(msg, "drive", "");   // or your command/action
  if (!p.isNull()) {
    int x = p["x"] | 0, y = p["y"] | 0;
    driveMotors(x, y);
  }
});

Throttle high-frequency change events in your script (e.g. send at most every 100–200 ms) so you don’t flood the device.

Script API

Throttling and sending patterns.

Slider

For a single-axis value.

Designer

Widget Reference

Mental model

When to use it

Settings

General

Style

Triggers

Sending the X/Y to a device

Script API

Slider

​Mental model

​When to use it

​Settings

​General

​Style

​Triggers

​Sending the X/Y to a device

Script API

Slider

Mental model

When to use it

Settings

General

Style

Triggers

Sending the X/Y to a device