Skip to content

Web Controller

Jump to bottom
hifihedgehog edited this page Mar 6, 2026 · 25 revisions

Web Controller

PadForge includes a built-in web server that lets you use any device with a web browser (phone, tablet, second computer) as a virtual controller. Open the URL shown on the Dashboard in your device's browser, and it appears as a physical input device in PadForge — ready to be assigned to any virtual controller slot.

Getting Started

  1. On the Dashboard, enable the Web Controller server and note the URL (e.g., http://192.168.1.100:8080).
  2. On any device with a touchscreen and browser, open the URL (Chrome, Safari, Firefox).
  3. Choose a controller layout: Xbox 360 or DualShock 4.
  4. The browser controller appears as a device on the Devices page. Assign it to a virtual controller slot like any other device.

Tip: On mobile devices, add the page to your home screen ("Add to Home Screen" in the browser menu) for fullscreen operation without browser UI.

Controller Layouts

Two layouts are available, matching PadForge's existing 2D PNG controller assets:

Xbox 360

Full Xbox 360 controller with:

  • Face buttons (A, B, X, Y)
  • Shoulder buttons (LB, RB)
  • Center buttons (Back, Start, Guide)
  • D-pad with 8-way directional input
  • Dual analog sticks with click (L3/R3)
  • Left and right triggers

DualShock 4

Full DualShock 4 controller with:

  • Face buttons (Cross, Circle, Square, Triangle)
  • Shoulder buttons (L1, R1)
  • Center buttons (Share, Options, PS)
  • D-pad with 8-way directional input
  • Dual analog sticks with click (L3/R3)
  • Left and right triggers

Both layouts produce the same input — the layout choice is purely visual. You can switch layouts at any time by going back to the landing page.

Touch Controls

Buttons

Tap a button on the controller image to press it. The button overlay lights up while touched. Touch zones are enlarged beyond the visible button area for comfortable use.

Analog Sticks

Each stick uses a virtual joystick (nipplejs). Place your finger in the stick zone and drag to move the analog stick. The stick overlay on the controller image moves in real time to show your current position.

  • Stick click (L3/R3): Quickly tap the stick zone (touch and release within 200ms with minimal movement) to register a stick click.

D-Pad

The D-pad is a single touch zone. Touch and drag to select a direction. Supports all 8 directions (cardinal + diagonal). The appropriate directional overlays highlight as you move.

Triggers

Tap a trigger zone to send a full trigger press. Release to return to zero. The trigger overlay fills visually to show the press.

Connection

The web controller uses a WebSocket connection to PadForge for low-latency input. The status bar at the top of the controller page shows the connection state:

Status Description
Connected Active connection, input is being sent
Disconnected Connection lost — tap the screen to reconnect

Each browser tab maintains a persistent pad ID so that reconnecting after a brief disconnection preserves your device identity and slot assignments in PadForge.

Rumble

When games send force feedback to your virtual controller, the web controller forwards vibration commands to your device using the browser's Vibration API. This requires a device with a vibration motor and a browser that supports the Vibration API.

Requirements

  • PadForge and the touchscreen device must be on the same local network (Wi-Fi)
  • The web controller server port (default: 8080) must not be blocked by a firewall
  • Landscape orientation is required — a warning is shown in portrait mode
  • For analog stick and multi-touch support, use a modern touchscreen device

Technical Details

The web controller server (WebControllerServer.cs) is an embedded HTTP + WebSocket server using System.Net.HttpListener. It serves:

  • Static HTML/CSS/JS files from embedded resources (PadForge.App/WebAssets/)
  • Controller PNG overlay images from the 2D model assets (PadForge.App/2DModels/)
  • Layout data as JSON via /api/layout?type=xbox360|ds4 (generated from ControllerOverlayLayout.cs)
  • WebSocket connections for real-time input and rumble

Each connected browser client is represented as a WebControllerDevice implementing ISdlInputDevice, making it appear in the input pipeline alongside physical controllers.

Related Pages

  • Dashboard -- Enable and configure the web controller server
  • Devices -- See your web controller and assign it to a slot
  • Controller Slots -- Create a virtual controller to use with the web controller
  • 3D and 2D Visualization -- The same PNG assets power both the web controller and the desktop 2D view

Clone this wiki locally