PhoneController Block
Turn your phone into a wireless joystick. Scan the QR code, put your thumb on the screen (or tilt the phone) and stream X/Y control signals live into the simulation at ~30 Hz, plus an independent YAW strip for a third axis. Same X/Y output ports as Joystick2D — drop it in wherever you'd use the on-canvas joystick.
Open PhoneController in BlockWerk →# PhoneController Block
Description
PhoneController is a source block that turns any smartphone into a wireless joystick plus an independent yaw dial. When the block is placed on the canvas it shows a pairing QR code; scanning it opens a controller page on the phone with a large on-screen touch joystick and a horizontal yaw strip below it. The phone streams normalized X/Y/Yaw control values (−1…+1) into the simulation at ~30 Hz over the same WebRTC peer-to-peer channel used by the RemoteSensor block — no cables, no app install.
Two control modes are available for the joystick pad on the phone (the yaw strip works the same in both):
- Touch (default): thumb on the on-screen joystick pad. Release springs back to center.
- Tilt: uses the phone's orientation sensors (DeviceOrientation). Tilt left/right maps to X, tilt forward/back maps to Y. The neutral pose is calibrated when the mode is enabled; tap the pad to re-center at any time.
The yaw strip is a separate horizontal drag control below the pad — drag left/right, release to spring back to 0. It's always active regardless of touch/tilt mode.
Use this block for interactive demos where a mouse feels clumsy: flying a simulated drone, steering a vehicle model, or driving a setpoint through a control loop by hand. Its X/Y output ports are named identically to Joystick2D's, so it's a drop-in wireless replacement anywhere an on-canvas joystick is wired up — including the Fly the Quadcopter (Phone) template, which also wires the Yaw port to the drone's yaw axis.
Parameters
playoutDelay
Network jitter buffer in milliseconds (0–500 ms, UI only). Lower values give more responsive control; higher values give a smoother signal on flaky connections. Default: 80 (much shorter than RemoteSensor's 250 ms, because control feel matters more than reconstruction fidelity).
interpolation
Reconstruction filter applied between received joystick packets (UI only). Options: none (zero-order hold), linear, or pchip. Default: linear.
outputLabels
Comma-separated list of output port labels (one per port in declaration order). Used internally; edit via the block properties panel rather than directly.
Examples
Phone Joystick — Attitude Demo
Load the bundled Phone Joystick — Attitude Demo (block examples menu). Your thumb commands the attitude of a simulated quadcopter: X becomes a roll setpoint, Y a pitch setpoint, each shaped by second-order attitude dynamics and rendered on a 3D gimbal:
PhoneController ──► [X] ──► Gain(30) ──► 2nd Order System ──► Gimbal3D [roll]
──► [Y] ──► Gain(30) ──► 2nd Order System ──► Gimbal3D [pitch]
Scan the QR code, press Grab Control, start the simulation — the drone follows your thumb.
Fly the full quadcopter template wirelessly
The Fly the Quadcopter (Phone) template (Examples menu → Control Systems) wires all three ports — x/y to the roll/pitch PID loops (through a Gain, same as Joystick2D's built-in gain) and yaw straight to the yaw PID loop — driving the full three-axis PID + motor mixer + 3D gimbal. No on-canvas slider needed: the phone's yaw strip covers it.
Manual setpoint for a PID loop
PhoneController ──► [Y] ──► Gain ──► (setpoint) Subtraction ──► PIDController → plant
Remarks
- Source block: All three channels are output ports (right side). X is positive to the right, Y is positive forward/up (pushing the joystick up gives +1), Yaw is positive to the right of the strip.
- Fixed 30 Hz stream: The phone transmits continuously — also when centered — to keep the playout buffer warm and the latency estimate stable.
- Dead zone: A small dead zone (±0.02) is applied on the phone so a resting thumb/handle yields exactly 0.
- Simulation waits for pairing: Like all live-hardware blocks, the simulation start is gated until the phone is connected and the first packets have arrived.
- WebRTC required: Phone and desktop both need internet access for the PeerJS signalling handshake. Self-hosted PeerJS servers are supported via the same
localStoragekeys as RemoteSensor (blockwerk_peer_host/blockwerk_peer_port/blockwerk_peer_path/blockwerk_peer_secure). - One controller per diagram: The X/Y/Yaw channels are global (
remote:joy.x/remote:joy.y/remote:joy.z); two PhoneController blocks would receive the same data. - Output values when disconnected: All three ports hold
0until the phone connects and begins transmitting.
See Also
- RemoteSensor: Stream the phone's accelerometer, gyroscope, magnetometer, barometer, and GPS instead of a joystick.
- ExternalInput: Lightweight source for manually injected or scripted numeric values.
- Gimbal3D: 3D attitude visualization — the natural sink for this block's demo.