Grid of buttons?
-
I'm testing GUI-O by trying to implement a user interface for a MIDI based percussion unit.
I've already got working a UI to set and assign a MIDI instrument (drum pad), and also to an 8 instrument sequencer. I used the spinnable list widget here. It works OK, but it is a bit clunky and difficult to get the right sizing though.
The 2nd part is a sequence editor, where on the x axis you have beats (usually quarter beats), and the y axis represents which instrument 'fires' during that beat. Ideally I'd like 16 beats (4 bars) by 8 instruments, so I imagined building 64 buttons on a grid and using the on pressed event to toggle whether or not an instrument plays on that beat.
I initially tried to implement the button creation in some nested loops, but it takes an extremely long time to create and render the buttons (and I cut the time back by only doing 8 beats by 2 instruments to test if it would work).
Do you have any better suggestions on how I could create this type of UI? Have a look at https://drumbit.app/ for an example of the type of thing I am looking to do.
Thanks
-
Hello,
I see what you are trying to do.
Could you please explain:
It works OK, but it is a bit clunky and difficult to get the right sizing though.
The sizing is always in % of screen width / height. The position also. Where did you encounter troubles? The reason I am asking this is that I will try to improve this widget based on your feedback.
I am planning to implement a drop-down menu in the next couple of days. Maybe this would be a better control for you?
Regarding the grid - there is currently no alternative. Creating the button grid is the right way to go... I can take a look and possibly implement a grid widget - I image it could be useful for other purposes as well.
What is your communication type (BT, USB, IoT)? I image that rendering itself is not a problem. Probably, the bottleneck is the communication...
I initially tried to implement the button creation in some nested loops, but it takes an extremely long time to create and render the buttons
How long is this time? You can show the loading screen with @sls and @hls command (please see the manual) to make this loading more user friendly... I know it is not a final solution, but should help you a bit until I add support for new widgets.
FYI - one of our users made a virtual mixing desk, see image below
Best regards,
kl3m3n -
@kl3m3n I'll get some more concrete timings for you later today.
I think a drop down list would be a better and more compact solution than the spinnable list, but I'll keep playing around.
I'm using BT. The idea is to not rely on say a Wifi connection and a BT module is fairly cheap. I wanted say a phone or tablet to link with the percussion controller to change parameters and control what it does.
I like the look of the virtual mixer - quite impressive.
-
@granta The latest update means I can't continue without upgrading to the pro version. I'm still unsure that I can build the UI that I need
-
@granta Hello,
I understand your predicament.
But please understand that there are 32 different fully customizable widgets available in the application. There are also numerous hardware "objects" (RTC, GPS, senosors, etc...) available. A lot of work has been put into the application. And the DEMO version was fully unlocked - meaning there is no strong reason for a user to upgrade to PRO version and support further app development.
Please also understand that I am a single developer and that the app development is currently a hobby for me.
The DEMO version is meant to give the user a "taste" of any widget, i.e., how it behaves and reacts.
P.S.: I will add support for the grid buttons widgets as promised - this will of course count as a single widget in DEMO version.
Best regards,
kl3m3n -
@granta Hello,
I have implemented rectangle grid widget (|RECG).
Please see the latest manual (application must be updated to v0.12.2). I would appreciate some feedback on this.
Best regards,
kl3m3n -
@kl3m3n I've just returned from vacation these last few weeks. The RECG widget looks like it should work, so I'll check it out in the next few days
-
@granta you can also use drop-box widget
-
@kl3m3n drop down box looks to be easier to use than the spinnable list.
grid of buttons also seems to work much faster than drawing each button individually. Just need to fine tune the size of each button and the colours, but I can set each button in the pattern initially, and also set individual buttons interactively.I'll also have to see if I can load my settings from a CSV file, so that I think might be the last thing to test out, but looking very feasible at the moment to complete what I wanted to do.