bit101 / quicksettings

JavaScript library for making a quick settings panel to control code parameters.
MIT License
458 stars 52 forks source link

Overflow for too many settings that don't fit on screen #45

Open cdcv opened 6 years ago

cdcv commented 6 years ago

Thanks for this great library! I am creating a mobile app that has a bunch of settings. Currently, the settings run past the bottom of the screen on mobile, a bigger problem when the user is in landscape mode. I tried making changes to the .qs_main in css (eg adding overflow:scroll) but this didn't work. How is it possible to scroll the settings, or somehow deal with more settings than will fit on the screen. Also, for landscape mode, is it possible to better use the horizontal space on the screen for more settings? I would prefer not to have to deal with multiple settings panels, although I guess it seems that might be the only approach. Thank you for your help.

ricardocanada commented 5 years ago

Sorry you have had to wait so long for an answer. I only discovered this great library a couple of weeks ago, but I am using it regularly now on OpenProcessing. Are you aware of these settings?

settings.setWidth(100); // or any other width you want for your panel settings.setHeight(100); // or any other height you want for your panel

These commands must be issued after the panel is created, but if you include them in setup() , they will take effect before the panel appears.

I think setHeight in particular might solve your problem. You can set the height of the panel to stay within the screen boundaries, yet keep adding controls to it and the panel will become scrollable as soon as it is full. It is not obvious to the user that the panel can be scrolled, so you will have to explain that clearly at the start of your program. I wondered if I might accidentally activate buttons or checkboxes while scrolling, but in my tests, that hasn't happened so far.

I find setWidth a real bonus when all I need in my panel is buttons and checkboxes. The default panel width is more than twice what is needed, and thus blocks valuable screen real estate. I assume it defaults to a width to fit sliders, even if you don't specify any.

Regarding enabling horizontal panels, there is another issue posted making that request. It got a positive response from the developer. I too prefer to keep controls at the screen bottom, so will keep my fingers crossed.

Good luck!