Highlight / Pulse the instrument button when its associated instrument is played #70
Description
Feature Description
These are the instrument buttons:
Each instrument button belongs to a specific instrument. When you click on it the bottom half of the UI is used to configure that specific instrument. Or in other words, click on it changes the "Selected Sound" to be the one that is associated with that button.
One improvement we can make here is light up the button if its associated instrument is played. The active state is already a glow/light up effect, we could pulse to that state when the instrument is played. If the button is active, maybe we pulse to slightly dim it for a short duration?
To play a sound while developing, you'll need cmajor tools installed in vscode:
https://github.com/lilyvanoekel/percupuff?tab=readme-ov-file#building-and-running
Run Percupuff using Cmajor: Run patch in the command palette and note the keyboard interface:
If you drag your mouse over the keyboard you should hear some of the drum sounds play.
Motivation / Use Case
It's a nice effect, but might also help to know what sound it is you're hearing, and where to click to configure it.
Alternatives Considered
No response
Additional Context
This ticket does assume some Cmajor knowledge, but it might be not too bad. The data needed to work with is already present in the front-end, have a look at view/src/components/instrument-config/MidiAssignment.tsx, specifically this part:
useEffect(() => {
const patchConnection = getPatchConnection();
const midiNoteOn = (midiNote: any) => {
if (isRecording) {
updateParam(midiParam, midiNote.pitch);
}
};
patchConnection?.addEndpointListener("noteOn", midiNoteOn);
return () => {
patchConnection?.removeEndpointListener("noteOn", midiNoteOn);
};
});