a must-have web app : MIDI interface designer

E

emmanuel63

Well-known member
Hello,
If you build Teensy synths and MIDI gears, you certainly use various apps to send MIDI messages to test your projects.
A few months ago, I ask my nephew to design a web-based application to create custom midi interface. He ended with a super user-friendly app with which you can organise a complete MIDI controllers set in a few clicks !

Here are some of the features :
- a nice collection of MIDI components : slider, knob, buttons, drop down list, labels.
- customise MIDI components : controller number, input and output range, offset, name, color, size
- magnetic canevas to align nicely the components
- save and recall (.json files)
- bank of pre-made layouts
- "edit" and "run" mode

There are a lot of benefits of using a web-based app : no third-party software, no coding, you can share your interface, cross-platform...
It needs more development, but I think it is a really nice job that deserves a thumb up (my nephew is only 19). If you use this tool for your personal projects, consider the buy-him-a-coffee button ! And of course feedback will be very appreciated.

Here is the link :
https://midiconfigportal.netlify.app

Emmanuel

midi-app.png
 
Your nephew is talented. Kudos to him.

Yes web interfaces and Web MIDI are super nice for quick prototyping and in fact I went the same way more than a year ago to create prototype and quickly fiddle with it. There is one problem though. Even though Web MIDI is standard, Apple doesn't like it and if you try to use web app using Web MIDI from say Safari (on iPad or whatever) it simply doesn't work. Also Firefox has some issues as it requires "addons" to be installed because by default Web MIDI is disabled.
That why your screenshot shows Opera browser, since it is essentially Chromium based.

Also one usability comment: the way how rotary controls are implemented now makes them difficult to work with. It would be better if they did not jump if you move from left to right. Observe how rotary controls are implemented in other interfaces. It is difficult to move mouse in circular movement. Rotary UI should work with linear up/down or left/right movement and not require exact circular movement to use it.
 
Last edited:
You are perfectly right, web-midi is not (yet) supported by Safari. I don't understand why, almost all other browsers are compatible. Any way, this is not a big deal since very good and free alternatives exist, like Opera ;)
Yes you are right, knobs are not easy to use. It will be corrected very soon !
Emmanuel
 
Nice and simple user interface for adding controls. And it's FAST!!!

One issue I found:
On a PC WIN10 EDGE, I added 1 slider and tried zooming IN-OUT a whole bunch. Sometimes the slider ends up off screen, sometimes in top-left corner, bottom right corner, at extreme horizontal left or right. Kind'a random as to where it would end up.

Just curious..., what's the programming language?
 
Thanks for feedback Bill,
Zoom in / out and canevas positioning can be improved, that's right. There are a few tips that help a lot :
- the + and - button to zoom by small increments
- and the shortcut : SPACE BAR + mouse to slide the canevas

These buttons are not present in Run mode at the moment. It will be fixed with coming updates.
Emmanuel
 
Ahhhh. So that's how to interpret the text at bottom right corner of window. Doh!!!

The SPACE BAR + MouseButton held down makes for a nice sliding window. Suggestion: could be simpler with just mousebutton held down (like Acrobat Reader moving a page within a window). Maybe the spacebar is needed as a qualifier to this function?

Any hints on the Group Select button? (button only appears after a control is selected) I'm not sure what it's supposed to do.
 
Great!

I think this is a good start and a useful tool. Possibility to share it makes it attractive (besides the mentioned restrictions regarding browsers)

Some suggestions for improvements:
  • Button with ability to send midi note (not only cc messages)
  • Button should not send a zero value after the configured value. (at least this is what the monitor there is showing)
    • (Button could have the option to be 1) momentary with on and off value, 2) toggle with on and off, 3) trigger with only on value)
  • Button should respond visually and by sending the data in the moment of the click = button down, not on release.
  • horizontal sliders
  • configure midi channel per component
  • more:
    • option to send program changes
    • adding a midi keyboard (or pre configured group of buttons)
    • adding a midi keyboard which is playable via computer keyboard (not sure if this is possible via browser)
    • some sort of radio button group or something like "live.tab" in Max MSP
 
Hi Tom,
Thank you for testing the app and feedback.
It is possible to send a program change via the drop down list component. Simply check PC instead of CC.

All your suggestions make perfect sens. I write all of them on a ToDo list ! My nephew (Achile to name him) spent a bunch of hours to code this app. The first intention is to demonstrate this tool can be useful. Now he must decide if he wants to go further with new features, improvements and maintenance. He is a student and he has to... study !
But showing interest by reporting bugs, asking new features, and being positive is a strong motivation for him to push this project further. By showing appreciation, you certainly encourage him to go next step !
Emmanuel
 
You must log in or register to reply here.
Back
Top