Visualize MIDI mappings on screen and save mappings to localStorage.
I have successfully implemented on-screen MIDI-binding visualizations, a relative control sensitivity calibration engine, and complete LocalStorage persistence for your custom DJ controller layouts.
🎛️ MIDI Hardware Mapping & Calibration Improvements
Real-time Bindings Overlay: Every map-eligible mixing control (Volume, EQ High/Mid/Low, Pitch, Filter, Crossfader, and Master Out) now features an integrated mini MIDI status badge. The badge dynamically displays current hardware mappings (e.g., CC 10 or NOTE 60), provides an instant trigger button to map parameters on the fly, and allows you to clear bindings with a single click.
Aesthetic Configuration Dashboard: A slide-down control dashboard is now accessible via the MIDI CONFIG button in the header. It enables real-time tuning of relative encoder sensitivity (from 0.1x for ultra-fine precision to 4.0x for high-speed parameter sweeps) and displays active MIDI port connections with a registry of all mapped parameters.
Persistent Layout Registry: Custom sensitivity levels and MIDI mapping arrays are automatically stored in the client-side database (localStorage). Your customized studio configurations will persist permanently across page reloads and browser sessions.
Replies
1. Ableton-Style MIDI Learn (Interactive Capturing)
The mapping system is built to be completely intuitive and visual, matching the exact behavior found in modern DAWs:
No lists to browse: You do not have to select from dropdowns or assign numbers manually. You find the parameter you want to control right on the virtual deck interface.
Instant Capture: Every interactive control (channel volume faders, crossfaders, pitch sliders, 3-band EQs, and Sweep filters) now has a dedicated, subtle MIDI label next to it.
Capturing State: When you click the [+ MIDI] button next to a control, it transitions into a pulsing, bright-orange LEARNING... state.
Hardware Binding: The console enters a listening mode. Simply move or turn the physical knob, fader, or encoder on your hardware controller. The console instantly intercepts the incoming MIDI CC, maps it to the selected parameter, and exits the learning state automatically.
2. Visual Mapping Overlays & Highlights
Once assigned, the interface provides continuous, clear feedback:
CC Badge: The pulsing LEARNING... label turns into a bright, permanent orange badge displaying the active controller address (e.g., [CC7] or [CC22]).
Visual Map at a Glance: You can tell with a single glance at the console which controls are currently linked to your hardware and which are free.
Instant Unmapping: If you want to clear a specific binding, you do not have to open a setting page—simply click the small close button [ × ] right next to the orange address badge.
3. The Centralized MIDI Configuration Panel (MIDI CONFIG)
We designed and added a brand-new MIDI CONFIG utility panel next to the initialization button:
Interactive Registry Grid: Shows all currently assigned mappings. You can easily inspect your full configuration or selectively delete bindings. There is also a CLEAR ALL button to wipe your map and start fresh.
Encoder Calibration Slider: Includes a slider for adjusting the step sensitivity of relative endless encoders from 0.1x (for fine-tuned precision) up to 4.0x (for dramatic, rapid sweeps). You can also easily reset it to the 1.0x (Default) speed.
Hardware Port Detection: Dynamically lists all MIDI input devices connected to your browser, confirming successful Web MIDI handshake.
4. Persistent Profile Memory (localStorage)
Every layout adjustment, custom MIDI map, and encoder sensitivity setting is automatically stored in localStorage.
You can refresh the page, close your browser tab, or load a different audio set, and your custom hardware bindings will be waiting for you, fully loaded on startup!