SNES Controller Studio

Browser-based timeline editor for creating and editing .DAT recording files used by the RP2040 SNES Controller Man-in-the-Middle Replay Device.

Open index.html in any modern browser. No server, no installation, no dependencies — everything runs locally in a single HTML file.

Getting Started

Open index.html in your browser.
Click Load to open an existing .DAT file, or start editing the default 5-second blank recording.
Use the timeline to paint button presses, then click Save to download the .DAT file.
Copy the saved file to your SD card and play it back on the device.

Interface Overview

Toolbar (top bar)

Load — Open a .DAT recording file from disk.
Notes — Open the notes overlay to add or edit free-text notes about the recording. Notes are saved as trailing metadata in the .DAT file and are invisible to the RP2040 firmware.
Save — Download the current recording as a .DAT file. The filename can be edited in the text field next to the Save button.
About — Opens this overlay.
Repo — Links to the project repository on GitHub (opens in a new tab).

Controller Preview (center)

A visual SNES controller that shows the button state at the current playhead position in real time. Pressed buttons are highlighted with a red overlay.

Transport Bar (middle bar)

Play / Pause — Start or stop playback at 60 fps. Playback auto-scrolls the timeline to keep the playhead visible.
Reset — Move the playhead back to frame 1 and scroll to the beginning.
Zoom Slider — Adjust the timeline zoom level. Exponential scaling provides fine control at both extremes. The minimum zoom fits the entire recording in view; maximum zoom is 100 pixels per frame.
Status Display — Shows the current frame number, total frame count, and the RLE event count versus the 25,000-event device limit.
Copy — Copy the frame(s) at the playhead or within the selection to the clipboard.
Cut — Copy the selected frame(s) to the clipboard and remove them.
Paste — Insert clipboard contents before the playhead, or replace the current selection with the clipboard.
Ins — Insert idle frames at the current selection (duplicates the selection length as blank frames).
Del — Delete the selected frames from the recording.
Clear — Set the selected frames to idle (all buttons released). When button locks are active, only unlocked buttons are cleared.

Timeline (bottom)

A horizontally scrollable canvas showing all 12 SNES buttons as rows. Each colored block represents a frame where that button is pressed.

Legend (left side) — Displays the button names in the order they appear on the timeline. Click a legend item to lock/unlock that button.

Canvas (right side) — The main editing area. Shows button data, selection highlights, the playhead, and second markers.

Timeline Interaction

Mouse Controls

Action	Effect
Left-click	Move playhead to that frame
Left-drag	Scrub playhead across frames
Shift+click	Extend selection to clicked frame
Right-click / Ctrl+click	Paint: toggle button state under cursor
Right-drag / Ctrl+drag	Paint across multiple frames
Middle-click+drag	Pan the timeline horizontally
Scroll wheel	Zoom in/out centered on the mouse position

Keyboard Shortcuts

Key	Action
Space	Play / Pause
Ctrl+C	Copy
Ctrl+X	Cut
Ctrl+V	Paste
Escape	Close overlays (About / Notes)

Keyboard shortcuts are disabled while typing in the filename input field or the notes textarea.

Button Locks

Click any button name in the timeline legend to lock it. Locked buttons display a padlock icon and a reddish background in both the legend and the timeline row.

When locks are active:

Paint skips locked buttons (you can only paint unlocked ones).
Clear only clears unlocked button bits; locked buttons retain their state.
Copy, Cut, Paste, Insert, and Delete are all disabled (buttons greyed out and keyboard shortcuts blocked). These operations affect time/frames globally and cannot be applied selectively to individual buttons without causing desync.

Locks are reset automatically when a new file is loaded.

Recording Notes

Click the Notes button in the toolbar to open an overlay with a text area where you can write free-form notes about the recording (game title, level, required setup, etc.).

Notes are stored as trailing metadata in the .DAT file, appended after the event data. The RP2040 firmware never reads past the event data, so the metadata is completely invisible to the device.

Notes are saved automatically when the file is saved.
Notes are loaded automatically when a .DAT file containing metadata is opened.
If a file has no metadata block (e.g., a file recorded directly by the firmware), the notes field will be empty.
Files saved with empty notes contain no metadata block and are byte-identical to firmware-produced files.

Event Limit

The RP2040 firmware supports a maximum of 25,000 RLE events per recording buffer. The editor enforces this limit on all operations:

Paint rejects strokes that would exceed the limit (the frame reverts to its previous state).
Insert and Paste show an alert and roll back if the result would exceed the limit.
Load refuses files with more than 25,000 events.
Save refuses to generate a file if the event count exceeds the limit.

The current event count is always visible in the transport bar status display.

Frames vs. Events

A frame is one 16.67 ms poll cycle (1/60th of a second). An event is one RLE entry that stores a 16-bit button state and a duration (number of consecutive frames with that exact state). Holding the same combination of buttons for 120 frames produces just 1 event. Rapidly alternating states produces many events. The event count determines file size and device compatibility, not the frame count.

File Format

All .DAT files use the same binary format as the RP2040 firmware:

Offset	Size	Content
0	4 bytes	Magic ID: `0x53454E53` (ASCII "SNES" on little-endian)
4	4 bytes	uint32_t event count
8+	4 bytes each	RLE event array

Each RLE event is 4 bytes:

uint16_t state — 16-bit SNES button state (active-low: 0 = pressed)
uint16_t duration — consecutive frame count (1–65535)

Button Bit Layout

Bit	Button
0	B
1	Y
2	Select
3	Start
4	Up
5	Down
6	Left
7	Right
8	A
9	X
10	L
11	R
12–15	Always 1 (unused)

0xFFFF = all buttons released (idle frame).

Trailing Metadata (Notes)

The editor optionally appends a metadata block after the last RLE event. This block is only present when the user has entered notes.

Offset	Size	Content
end of events	4 bytes	Metadata magic: `0x4D455441` ("META" on little-endian)
+4	4 bytes	uint32_t byte length of UTF-8 text
+8	N bytes	UTF-8 encoded notes string

All values are little-endian. The firmware never reads past the declared event count, so this block is invisible to the RP2040.

Browser Compatibility

Tested in modern Chromium-based browsers (Chrome, Edge) and Firefox. Requires JavaScript enabled. No external network requests are made — the tool works entirely offline.

License

This project is licensed under the Mozilla Public License 2.0.