Dato DRUM Web Visualization

A browser-based visualization of the Dato DRUM electronic instrument. SVG elements light up and animate in response to the physical device over Web MIDI.

Setup

Serve the directory over HTTP (ES modules require it):

python3 -m http.server 8080

Then open http://localhost:8080 and grant MIDI access when prompted. Connect the Dato DRUM via USB before or after — it will be detected automatically.

Debug mode

Add ?debug=1 to the URL:

• Renders all element IDs as text overlays on the SVG
• Logs incoming MIDI messages to the browser console (clocks suppressed)

cc  7 = 84        # CC: number + value
on  36 v127       # note on: note + velocity
off 36            # note off
at  36 p64        # aftertouch: note + pressure
transport start   # transport command

Project structure

index.html                          — page with annotated SVG inlined
annotate-svg.py                     — one-time script to add IDs to the raw SVG
dato-drum-faceplate-drawing.svg     — original SVG (do not edit directly)
dato-drum-faceplate-annotated.svg   — generated by annotate-svg.py
css/styles.css                      — base layout + state classes
js/main.js                          — entry point; debug overlay
js/midi.js                          — Web MIDI API wrapper
js/controls.js                      — MIDI CC/note → element ID mapping
js/visualizer.js                    — applies CSS classes and transforms to the SVG

SVG annotation

The original SVG has no semantic IDs. annotate-svg.py identifies elements by fill colour and position and adds id/class attributes, producing the annotated SVG that index.html inlines.

To regenerate after editing the source SVG:

python3 annotate-svg.py

Then rebuild index.html by re-running the inline step (or update it manually).

Annotated element IDs

ID	Element
btn-repeat	Red button (top) — CC 17
btn-random	Yellow button (bottom) — CC 16
knob-volume	Green knob (left) — CC 7
knob-filter	Blue knob (right) — CC 74
knob-crush	Crush knob — CC 12
pitch-knob-1..4	Per-track pitch knobs — CC 21–24
pitch-indicator-1..4	Rotating tick marks for pitch knobs
pad-1..4	Drum pads (TL, TR, BR, BL) — notes 30–61
play-outer / play-inner	Play/stop button
swing-bar-0..2	Swing indicator bars — CC 9
step-00..step-39	Sequencer step LEDs
step-center	Centre step indicator

Step LED mapping

The 40 ring LEDs (step-00–step-39) are assigned by polar angle from the centre. The exact track-to-LED grouping is TBD — verify with the device using ?debug=1, then update TRACK_STEP_MAP in js/controls.js.

MIDI mapping reference

See the Dato DRUM MIDI Implementation for the full CC and note mapping. The relevant assignments are encoded in js/controls.js.