Enhancement - mobile responsive GUI

[siraaris]

I use the GUI a lot via mobile device on WIFI to control volume, mute etc. It would be pretty neat if the UI was responsive to mobile use, albeit with reduced / graceful degradation of some/much of the existing desktop functionality (as most of the complexity of the UI would only be useable on a desktop or maybe tablet).

I can also imaging that (on mobile, used as a controller in the above) that switching between pre-configured YML configurations would be useful. Can't think of anything else on mobile, as for the fiddly stuff one would go to the desktop version.

So a mobile version that has:

Basic info - rate etc. Volume, Mute, Dim Volume, clipping etc meters (love watching them) Switch between YML configs (i.e. use a different config for electronic music vs classical/natural).

Just a suggestion for the future!

Aris

[JWahle]

Thank you for the suggestion. I am currently working on this. Initially, I did not plan to include the meters or any other info, just basic controls. (see https://github.com/HEnquist/camillagui/projects/2) I'll experiment with it, though.

[siraaris]

Looking forward to seeing what you do. I think in this case simpler might be better. Depending on the web code it may be possible to encapsulate into a mobile app later.

Aris

[JWahle]

I just pushed an implementation to the develop branch, in case you want to try it out before the release. The button to enable compact view is in the tab bar at the top right.

@HEnquist FYI

[siraaris]

Very nice. I ran briefly in dev mode. Noticed that refresh resets attenuation to 0db, which could be nasty.

Some usability suggestions:

• As this is likely to be mostly for mobile, the oft-used function (volume control I would say) might be best positioned at the bottom of the screen.
• Consider making the controls (esp volume) larger, so the slider can be controlled quickly and confidently.
• Hide the Equaliser if there are no filters named Bass/Treble.

Are you planning to add VU meters, and information eg Rate, Clipped etc?

[JWahle]

Thank you for your suggestions. They all make sense, however they all come with their own problems. Maybe you have ideas on how to fix them?

• As this is likely to be mostly for mobile, the oft-used function (volume control I would say) might be best positioned at the bottom of the screen.

Nice idea. The problem is, if there are to many configs (8 on my phone), the "quick config switch" may take so much space, that one has to scroll to see the volume slider. Of course, I could put the volume slider on the top, if there are more than 5 configs. This would disable the feature probably for most people.

• Consider making the controls (esp volume) larger, so the slider can be controlled quickly and confidently.

Makes sense - I'll see, if I can do that reliably across mobile/desktop and multiple browsers. Unfortunately, styling these sliders is a pain.

• Hide the Equaliser if there are no filters named Bass/Treble.

That would save some space. I left it there, so everyone can see, that this functionality exists and has an obvious way to get info on how it works. If I hide it, where would users get the info about this feature?

Are you planning to add VU meters, and information eg Rate, Clipped etc?

Is this necessary? The information is just one click away and on my phone it takes up half the screen with 2in/2out channels. The default view basically has you covered - minus the quick config switch. Is this the only feature you miss in the default view?

[siraaris]

I think VU meters are nice to have but by no means necessary for a minimal remote control UI.

Perhaps config swapping could be limited to specific configs defined in the camilla-gui.yml file?

[JWahle]

Perhaps config swapping could be limited to specific configs defined in the camilla-gui.yml file?

I also thought about that. If I make this configurable, this will be directly in the UI.

[JWahle]

I just played with bigger sliders and it is as bad as I expected, so I'm not going to change the slider styles. Here's why:

• requires 13 css styles from https://www.cssportal.com/style-input-range/ (which generates cross browser slider styles pretty nicely)
• the styles still need manual tweaking and I don't possess an apple device
• the styles don't account for disabled sliders, so I probably have to add another 13 styles for that
• bigger sliders look silly on desktop devices. Since mobile vs desktop detection is not reliable, I have the following options
  • add a manual switch => too much work on my part / additional complexity for the user
  • use the styles only in compact view => inconsistent slider styles normal view vs compact view or another doubling of the css slider styles (so 4*13=52 css styles altogether)
  • only slightly increase the slider size, so it looks fine on both => not much gained here

All in all too much hassle on my part for a little improvement.

Perhaps config swapping could be limited to specific configs defined in the camilla-gui.yml file?

I also thought about that. If I make this configurable, this will be directly in the UI.

Not sure, if this is really necessary. If people don't keep around too many useless configs, this should not be necessary. For the sake of simplicity, I'll just leave this for now.