You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/UI_GUIDE.md
+54-27Lines changed: 54 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,20 +1,24 @@
1
-
# RaspiMIDIHub — UI Guide
1
+
# RaspiMIDIHub -- UI Guide
2
2
3
3
This guide walks through every screen of the RaspiMIDIHub web interface.
4
4
5
5
---
6
6
7
7
## Routing Page
8
8
9
-
The main screen shows the **connection matrix**— a grid where rows are MIDI sources (FROM) and columns are destinations (TO). Tap a cell to connect or disconnect two devices. Purple cells indicate connections with active filters or mappings.
9
+
The main screen shows the **connection matrix**-- a grid where rows are MIDI sources (FROM) and columns are destinations (TO). Tap a cell to connect or disconnect two devices. Purple cells indicate connections with active filters or mappings.
10
10
11
-
**Offline devices**(saved but unplugged) appear grayed out with their saved connections shown as dimmed checkboxes. You can toggle offline connections on/off — the settings are stored and applied when the device is plugged back in.
11
+
**Plugins**appear in the matrix alongside USB devices. Each plugin shows its icon (from `icon.svg`) next to the device name. Live **rate meters** on connection cells show MIDI message throughput.
12
12
13
-
A pulsing **▶ play icon**appears next to devices sending MIDI clock. If multiple devices send clock simultaneously (a common misconfiguration), the icon turns orange as a warning.
13
+
**Offline devices**(saved but unplugged) appear grayed out with their saved connections shown as dimmed checkboxes. You can toggle offline connections on/off -- the settings are stored and applied when the device is plugged back in.
14
14
15
-
Tap a device label to see its full name in a toast. Renamed devices also show the original ALSA name in gray.
15
+
A pulsing play icon appears next to devices sending MIDI clock. If multiple devices send clock simultaneously (a common misconfiguration), the icon turns orange as a warning.
16
16
17
-
At the bottom: **Save Config** persists the current routing to disk (survives reboots), **Load Config** reloads the last saved state. **Export Config** / **Import Config** let you back up or transfer the full configuration as JSON. Disconnected connections are also saved and restored.
17
+
Tap a device label to open its **device detail panel** directly. Renamed devices also show the original ALSA name in gray.
18
+
19
+
The **"+" button** in the matrix header lets you add a new plugin instance. Select a plugin type from the list, and it appears as a new device in the matrix with its own IN and OUT ports.
20
+
21
+
At the bottom: **Save Config** persists the current routing (including plugin states) to disk. **Load Config** reloads the last saved state. **Export Config** / **Import Config** let you back up or transfer the full configuration as JSON.
18
22
19
23
20
24
@@ -30,15 +34,17 @@ Long-press (or right-click) a connected cell to open the connection panel. Here
30
34
31
35
Dismiss the panel by swiping down, tapping X, pressing ESC, or tapping the dark overlay.
32
36
33
-
Toggling a connection off in the matrix preserves its filters and mappings — they are restored when you re-enable it.
37
+
Toggling a connection off in the matrix preserves its filters and mappings -- they are restored when you re-enable it.
The mapping form opens as a sub-overlay. Mapping types:
45
+
The mapping form opens as a sub-overlay. Controls use **wheels, faders, radio buttons, and toggles** instead of dropdowns for fast editing on stage.
46
+
47
+
Mapping types:
42
48
43
49
| Type | Description |
44
50
|------|-------------|
@@ -48,48 +54,67 @@ The mapping form opens as a sub-overlay. Mapping types:
48
54
|**Channel Remap**| Route all events to a different MIDI channel |
49
55
50
56
-**Src Ch / Dst Ch:** Filter by source channel and remap to destination channel
51
-
-**MIDI Learn:** Press the button, then play a note or move a knob — the source is auto-filled
57
+
-**MIDI Learn:** Press the button, then play a note or move a knob -- the source is auto-filled with visual feedback
52
58
-**Pass through original event:** When checked, the original note/CC is forwarded alongside the mapped output
53
59
60
+
61
+
54
62
---
55
63
56
64
## Presets Page
57
65
58
-
Save the current routing as a named preset and recall it later. Useful for switching between different setups at a gig.
66
+
Save the current routing as a named preset and recall it later. Presets now include plugin instances and their parameter values.
59
67
60
-
-**Save:** Enter a name and tap Save to snapshot the current routing
61
-
-**Load:** Activate a saved preset instantly
62
-
-**Export/Import:** Share presets as JSON files between devices
63
-
-**Delete:** Remove presets you no longer need
68
+
-**Save:** Enter a name and tap Save. If the name already exists, a confirmation dialog asks whether to overwrite.
69
+
-**Load:** Activate a saved preset instantly -- routing, filters, mappings, and plugin states are all restored.
70
+
-**Export/Import:** Share presets as JSON files between devices.
71
+
-**Delete:** Remove presets with a confirmation dialog.
64
72
65
73
Note: After loading a preset, tap **Save Config** on the Routing page to make it the boot default.
66
74
67
75
68
76
69
77
---
70
78
71
-
## Status Page
79
+
## Devices Page
72
80
73
-
System overview and device list.
81
+
The Devices tab shows all connected MIDI devices and active plugin instances.
74
82
75
83
-**System info:** Hostname, version, CPU temperature, uptime, RAM, IP addresses
84
+
-**Load indicator:** CPU and memory usage shown in real time
76
85
-**Connected Devices:** Tap a device to open its detail panel
86
+
-**Plugin instances:** Listed alongside hardware devices, tap to configure
77
87
78
-
88
+
79
89
80
90
---
81
91
82
92
## Device Detail Panel
83
93
84
-
Tap a device on the Status page to open the detail panel (slides up). Features:
94
+
Tap a device on the Devices page or tap a device label in the routing matrix to open the detail panel (slides up).
85
95
86
-
-**Device info:** ALSA client ID, USB VID:PID, port types
87
-
-**Rename:** Assign a custom device name that persists across reboots (stored by USB topology)
88
-
-**Port rename:** For multi-port devices, rename individual ports (e.g., name a DIN output "Octatrack")
96
+
### For USB MIDI devices:
97
+
98
+
-**Editable title:** Rename the device inline from the panel header. Custom names persist across reboots (stored by USB topology).
99
+
-**Port rename:** For multi-port devices, rename individual ports (e.g., name a DIN output "Octatrack").
89
100
-**MIDI Monitor:** Live display of incoming MIDI events with note names (e.g., "Note On ch1 C3 vel=100"). Uses direct DOM updates so it won't interfere with other controls.
90
-
-**MIDI Test Sender:** Select channel and port, then use the piano keyboard (one octave, adjustable with +/- octave buttons) and CC slider for testing connections without physical MIDI input
101
+
-**MIDI Test Sender:** Scrollable multi-octave piano keyboard with multitouch support, plus CC slider for testing connections.
102
+
103
+
### For plugin devices:
104
+
105
+
-**Plugin config panel:** Full parameter UI rendered inside the detail panel. Controls include:
106
+
-**Wheels** -- scrollable drums with momentum and optional labels (e.g., note names on the Scale Remapper root selector)
107
+
-**Faders** -- horizontal or vertical mixer-style sliders with optional scaled display (e.g., "0.5 Hz" on the CC LFO)
@@ -98,10 +123,12 @@ Tap a device on the Status page to open the detail panel (slides up). Features:
98
123
Configuration and system controls.
99
124
100
125
-**WiFi:** Current mode (AP or client) with clear status badge. Join WiFi or change AP password.
101
-
-**Ethernet (eth0):** Configure as DHCP or static IP with address, netmask, gateway, and DNS (8.8.8.8 added automatically for static).
102
-
-**MIDI Routing:** Default routing for new devices — "Connect all" (every new device connects to all others) or "None" (new devices start disconnected).
126
+
-**Ethernet (eth0):** Configure as DHCP or static IP with address, netmask, gateway, and DNS.
127
+
-**MIDI Routing:** Default routing for new devices -- "Connect all" or "None" (new devices start disconnected).
103
128
-**Display:** Toggle the persistent MIDI activity bar.
104
-
-**Software Update:** Check for updates, view changelog, one-click install (requires internet — easiest via Ethernet cable, which works alongside the WiFi AP).
129
+
-**PWA Install:** "Install App" button for adding RaspiMIDIHub to your device's home screen.
130
+
-**Reload:** Force-reload the web UI.
131
+
-**Software Update:** Check for updates, view changelog, one-click install (requires internet -- easiest via Ethernet cable alongside the WiFi AP).
105
132
-**System:** Reboot the Pi remotely.
106
133
107
134
**Safety net:** If the WiFi connection is lost in client mode, the Pi automatically falls back to AP mode within ~90 seconds. Run `sudo reset-wifi` from a console to force AP mode.
@@ -112,7 +139,7 @@ Configuration and system controls.
112
139
113
140
## MIDI Activity Bar
114
141
115
-
A persistent bar above the bottom navigation showing the latest MIDI events from two sources — left and right. Device names are truncated to fit. Clock events are not shown here (they appear as the ▶ indicator in the matrix instead). Entries auto-expire after 2 seconds of inactivity. Toggleable in Settings > Display.
142
+
A persistent bar above the bottom navigation showing the latest MIDI events from two sources -- left and right. Device names are truncated to fit. Clock events are not shown here (they appear as the play indicator in the matrix instead). Entries auto-expire after 2 seconds of inactivity. Toggleable in Settings > Display.
0 commit comments