Replace Velocity/Pan dropdown with radio buttons

[jack-sprat]

Hydrogen version : 1.1.1 Operating system + version : OpenSuse 15.3 Audio driver + version : Jack/ALSA Enhancement request

---

I think usability and visibility of the UI would be improved by replacing the current drop-down selector for Velocity, Pan, &c. with radio buttons. This would reduce required clicks.

What would be really neat would be a settings preview of each option on hover over the radio buttons, and/or change label font to bold (or coloured) if settings have been set manually, i.e. not on default settings. This would provide slick feedback as to whether each instrument has been configured, just be working through the kit with the down arrow (a nice break from the mouse!)

TBH, I'm not a fan of the use of the 'LCD style' label here and its use is somewhat incongruous: elsewhere it is used for configurable values, not for selectable interface visibility options, so I think its use gives the wrong visual message.

If switching from drop-down to buttons means that the panel needs to get a bit taller to accommodate all of the options then that's no bad thing as it's currently a bit difficult to set values 'delicately' (cf. https://github.com/hydrogen-music/hydrogen/issues/1581)

Thanks for listening - great project/product.

Thanks devs - JS

[theGreatWhiteShark]

Hey @jack-sprat ,

Did you also compile and run the latest version on master? UX did change quite a bit

I think usability and visibility of the UI would be improved by replacing the current drop-down selector for Velocity, Pan, &c. with radio buttons. This would reduce required clicks.

In the upcoming version it just requires a single click ( + cursor moving to select + mouse button release to apply selection). Also, you can now use the mouse wheel to change selection - although combo box changes position for the NoteKey property which indeed is quite annoying.

What would be really neat would be a settings preview of each option on hover over the radio buttons, and/or change label font to bold (or coloured) if settings have been set manually, i.e. not on default settings. This would provide slick feedback as to whether each instrument has been configured, just be working through the kit with the down arrow (a nice break from the mouse!)

I'm not 100% sure I get what you mean. You are talking about the bottom part of the pattern editor as shown in here, right? Those settings apply to the individual notes and the default value is already indicated by a dedicated color (the colors involved can be customized in the upcoming version too)

[jack-sprat]

Hi @theGreatWhiteShark , no, I'm just using the 1.1.1 release from the build.opensuse.org/multimedia/proaudio repo (I'm still just a casual user, not yet a bleeding-edge chasing enthusiast ;-).

After posting my proposal I saw your announcement of the updated UI (https://github.com/hydrogen-music/hydrogen/discussions/1402), which is definitely an improvement - I might have to bite the bullet and try to compile the latest version (TBH I rarely have any spare time to do music making, so finding time to use the tool outweighs finding time to build it myself - I should finish building our house first!)

To help you understand what I'm describing, in this mock-up, I can see what options are available, and that only Velocity and Pan have been edited from default (they're red and underlined).

If I were to hover the mouse pointer over, for example, Pan, the Velocity settings would be momentarily be replaced by a preview of the Pan settings .

Does that make sense? With this UI, I can see all the settings just by pointing (hovering without clicking anything), and only need click an option to make that the active view if I want to change the configuration.

I've never coded in C++, or tried Qt (until today), but looking through the Widgets source code it appears that no radio button element is defined, and in the PatternEditorPanel source that the 1.1.1 release uses an LCDCombo widget. I'd need to spend a good deal more time figuring out Qt before I could do anything meaningful to help, I'm afraid. It's certainly an interesting challenge, and I might have time next year...

[theGreatWhiteShark]

With this UI, I can see all the settings just by pointing (hovering without clicking anything), and only need click an option to make that the active view if I want to change the configuration.

It's a little bit similar to using mouse wheel to cycle through the views in the upcoming release but still a nice idea.

About highlighting the property which as altered for at least one note: the main use case for this feature would be to quickly identify changes in properties of the notes other than the currently selected one, right? Like e.g. it would be evident whether a probability > 1 was set for a note. I wonder whether this could be indicated by altering the outlines of a note in the pattern editor (to highlight a change) and adding a tooltip for each note that displays it velocity/pan/lead lag/noteKey/probability properties.

in the PatternEditorPanel source that the 1.1.1 release uses an LCDCombo widget.

These custom widgets are dead now and we only use widgets derived from the shipped Qt ones now. Speaking of which, the classes still carry the LCD* name which itself does no harm but might lead to confusion as it is not based on the previous "LCD technology" anymore.

[jack-sprat]

similar to using mouse wheel to cycle through the views...

Except without using any mouse keys (wheel) and with being able to preview the exact settings of interest just by moving the pointer (click-free)

About highlighting the property which has altered for at least one note: the main use case for this feature would be to quickly identify changes in properties of the notes other than the currently selected one, right?

More like, being able to identify which properties hadn't been edited/configured, i.e. are still at default, without needing to move mouse pointer at all. So, in my first mock-up, I can see that Lead&Lag, NoteKey, and Probability are still all on default straight away, with no use of mouse, i.e., as I work through each instrument in the kit (which can done with up/down arrow).

The tool-tip solution seems a little like overkill compared with the much easier 'hover-and-preview' approach, which could probably re-use the same code as the 'switch view to selected property'.

In general, my proposals attempt to provide more information with less interaction, i.e., reduced mouse activity. And, by using preview (as in 2nd mock-up), it means that settings can be checked easily without having to select (click) each property individually.

Working these two proposals together, I can use the keyboard to move through list of instruments, see what's been configured at a glance and, as required, hover mouse pointer over each of the 'edited' properties to review all of the settings without a single mouse click, and without moving the pointer back-and-forth across the screen. Joy - the perfect UX!

These custom widgets are dead now...

Fine. Dead to me too ;-) - I guess I was just trying to demonstrate that I'd made the effort to look at the code and try to see where and how my proposals might fit.

[theGreatWhiteShark]

More like, being able to identify which properties hadn't been edited/configured, i.e. are still at default, without needing to move mouse pointer at all. So, in my first mock-up, I can see that Lead&Lag, NoteKey, and Probability are still all on default straight away, with no use of mouse, i.e., as I work through each instrument in the kit (which can done with up/down arrow).

Okay. But indicating change with the label of the radio button would only show that there is any change - to at least one note. If you e.g. forgot to set the property for a single note you would still be at a loss.

The tool-tip solution seems a little like overkill compared with the much easier 'hover-and-preview' approach, which could probably re-use the same code as the 'switch view to selected property'.

Well, implementational details enter at a later point. UX comes first ;)

[jack-sprat]

Okay. But indicating change with the label of the radio button would only show that there is any change - to at least one note. If you e.g. forgot to set the property for a single note you would still be at a loss.

Point taken, but I think you'll never know if you've tweaked enough (occupational hazard, I'd say) so, as a first reminder, this at least helps identify what hasn't been touched at all (which may be intentional). And then hover-and-preview over remaining items allows quick check of what has been configured, prior to deciding that further modification is required. Still with zero clicks.

[theGreatWhiteShark]

as a first reminder, this at least helps identify what hasn't been touched at all (which may be intentional).

The tooltip thing I suggest was intended as a complement to another tweak in which each note for which at least one property was altered is highlighted. E.g. the outline of the note could be drawn in a different color.