I’m setting up MODEP on a Raspberry Pi 5 with a Soundcraft Ui24R over USB, processing four separate vocal channels and returning them to the mixer. The Ui24R exposes 32 capture and 32 playback channels to JACK.
Setup
- Patchbox OS Bookworm ARM64 on Raspberry Pi 5
modep-mod-uipackage 1.13.0-3- Ui24R: 32 inputs / 32 outputs at 48 kHz
- Chrome browser
Rendering problem
With all 32 audio ports plus the MIDI row displayed on each side, the hardware jacks overlap. Connected ports also show an extra plug graphic, making it difficult to see where the cables actually attach. The four audio routes work; this is a visual problem.
The layout in html/js/pedalboard.js evenly distributes hardware ports over the available height, while html/css/dashboard.css uses fixed 56 px connector artwork. In our desktop view, the row pitch was about 21.8 px before the pedalboard’s 0.5 scaling, so the graphics could not fit their rows.
Local workaround
We patched those two frontend files to:
- Use compact hardware-port graphics when the available row pitch is below the stock connector height.
- Align the cable endpoints with the resized visible plugs.
- Suppress the extra disconnected placeholder graphic on a connected source, while retaining its interaction element.
- Keep expanded multi-connection input plugs inside the port area and attach each cable to its own plug.
The change is scoped to dense hardware-port layouts; plugin connectors and audio routing are not modified. Initial checks covered the normal browser view, a tablet-sized viewport, and an input with multiple connections. The live audio connections stayed unchanged during the rendering fix. Broader checks of low-channel-count layouts, zooming, and cable dragging would be needed before proposing it for merge.
Would this be useful as a PR? Is BlokasLabs/mod-ui on modep-1.13-ps the preferred target, or should it go to upstream mod-audio/mod-ui or another branch?
Before and after screenshots below.
Before
After
