Skip to main content
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

EventFires when
changeThe stick moves (carries { x, y })
touchstart / touchendTouch 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.