I'm currently working on a synthesizer and I have a satisfactorily working one, but now I'm interested in improving the GUI. All the code is currently written in C++. The synth is controlled with a MIDI controller and 2 trill squares so right now all the GUI is is the current position of the two squares (p5js sketch). I'm interested in extending the GUI in two directions:

  1. More informative block diagram/signal chain - display fft of base waveform, (animated) filter frequency responses, ADSR envelope, all in a block diagram that demonstrates how different modules are connected and visualizes their effect.

  2. "Advanced" controls - currently the timbre of the synth is dictated by 4 parameters, but I wanted to add toggle-able controls as an "advanced" mode - allow access to all ADSR parameters, filter resonances, and frequency modulation parameters.

Having both of these would be nice, but if I had to prioritize one, it would probably be the first one for now.

From what I've seen in the examples and BELA library, there seem to be 2 ways I could go about this: javascript sketches or a PureData patch (integrated with my C++ code). Up until now 95% of my experience with BELA has been using c++, and I have little experience with both MSP/PureData and Processing/Javascript. Given that, I'd just like some advice to point me into a direction and I'll figure out the rest. Any help is appreciated.

    RyanGo PureData patch (integrated with my C++ code)

    The GUI part of Pd does not run on Bela, so it couldn't be used this way.

    RyanGo "Advanced" controls - currently the timbre of the synth is dictated by 4 parameters, but I wanted to add toggle-able controls as an "advanced" mode - allow access to all ADSR parameters, filter resonances, and frequency modulation parameters.

    This should be straightforward in p5.js .

    RyanGo More informative block diagram/signal chain - display fft of base waveform, (animated) filter frequency responses, ADSR envelope, all in a block diagram that demonstrates how different modules are connected and visualizes their effect.

    This sounds like fun. I had some code around for showing frequency response on a GUI. After half a day and half a night of refactoring, it is now here:

    https://github.com/BelaPlatform/Bela/tree/dev/examples/Gui/frequency-response

            giuliomoro

            Thanks for the response. I've also noticed that the IDE doesn't seem to mark errors in the javascript code. Is that normal? Sometimes I'll run the project and the GUI doesn't load at all.

            giuliomoro This sounds like fun. I had some code around for showing frequency response on a GUI. After half a day and half a night of refactoring, it is now here:

            https://github.com/BelaPlatform/Bela/tree/dev/examples/Gui/frequency-response

            I don't seem to have the Fft Library on my BELA. Can I just copy the files from https://github.com/BelaPlatform/Bela/tree/dev/libraries/Fft into a new Fft directory in ~/Bela/libraries?

                  RyanGo I've also noticed that the IDE doesn't seem to mark errors in the javascript code

                  yup. Syntax errors for C++ projects are given by the C++ compiler, so it won't work for js files. I think there is a ace.js extension for that, if you want to look into it.

                  RyanGo Sometimes I'll run the project and the GUI doesn't load at all.

                  If this is due to a syntax error, the browser's inspector window is where to look for that. Also if it's a runtime error: keep the inspector open while writing guis.

                  RyanGo I don't seem to have the Fft Library on my BELA. Can I just copy the files from https://github.com/BelaPlatform/Bela/tree/dev/libraries/Fft into a new Fft directory in ~/Bela/libraries?

                  maybe. Just update your board to the branch that contains the features you need (namely dev in this case).

                          giuliomoro

                          Ah fantastic, the Inspector seems very useful. I'm also updating to the dev branch as we speak.

                          I also had a handful of questions about how guis work.

                          Is there some sort of limit to how much data I can send to the GUI buffer? For example should I try to keep all my calculations in the C++ code and just send the results as buffers? It looks like I'll be graphing an FFT, an FRF, Fc vs time graph, and an ADSR time graph.

                          What sort of timing constraints do I need to keep in mind? Ex. How often is the sketch's draw() function called? Does the ControlDataCallback happen outside the audio thread?

                              RyanGo Is there some sort of limit to how much data I can send to the GUI buffer?

                              I feel like you have asked this before... No hard limit, but at some point something will choke. Sending data takes Bela CPU time and parsing it in the browser takes the host computer's CPU time. None of those is infinite. The one on Bela is more sensitive to peak usage, so sending large buffers sparingly, while overall more efficient (because it minimises the overhead associated with sending one packet), it may cause local hiccups due to the spike in CPU load associated with a large buffer.

                              RyanGo For example should I try to keep all my calculations in the C++ code and just send the results as buffers?

                              Well ... it really depends on the application. For instance, sending a buffer of time-domain samples will cost the same as sending the result of the FFT on the same buffer (assuming you only send frequency bins between 0 and Nyquist), but it would be cheaper for Bela if you were to perform the FFT in the browser (in my example I don't do that because a) I don't know how to do FFTs in javascript and b) I only send one buffer every update, updates are "sparse", so overall there is not much Bela CPU usage). On the other hand, if you were to display the average of several FFTs, if you do the FFT on Bela you can send only one buffer instead of several, at the expense of running several FFTs on Bela.

                              RyanGo d? Ex. How often is the sketch's draw() function called?

                              As fast as possible or at the specified (or default) frameRate(), whichever the smallest.

                              RyanGo Does the ControlDataCallback happen outside the audio thread?

                              Yes it does, which is why in my example I can run plenty of non-real-time safe code in there.

                                        4 days later

                                        giuliomoro
                                        Alright, thanks. I've learned a lot in the past couple of days. So basically the javascript sketch is run locally on the browser rather than on the BELA's CPU?

                                        alt text

                                        The GUI I'm trying to make is pretty complicated (see above for reference) so I decided to try using the p5 instance mode like you had in the frequency-response example. However, now I'm running into issues with calling loadScript, which is used to load the Trill js library. I can't call it within the p5 instance (not defined), and trying to call it outside the p5 instance in a separate preload() function seems to be getting a 404 response on the load.

                                        function preload() {
	belaLogo = loadImage('../images/logo_bar14.png');
	loadScript("/libraries/Trill/Trill.js");
}

                                        Based on this thread: https://forum.bela.io/d/1319-how-to-use-seperate-js-class-files it seems that loadScript can't be used with instance mode since it "alters the p5.js main object.?

                                        Any other tips for structuring the code of an extra-complicated GUI? Maybe just skip the instance mode and make more js files and use loadScript?

                                            RyanGo So basically the javascript sketch is run locally on the browser rather than on the BELA's CPU?

                                            Yes, that is the case. It runs on the browser and takes whatever resources your browser has. Files (like the Trill.js libraries and the p5 sketches) are made available via Node.js but the communication between your Bela project and the GUI happens through a web socket.

                                            RyanGo Based on this thread: https://forum.bela.io/d/1319-how-to-use-seperate-js-class-files it seems that loadScript can't be used with instance mode since it "alters the p5.js main object.?

                                            You are alright (I think), since the p5.js object is altered after its declaration, new instances don't replicate this alterations (also because we contain all the p5 sketches within an Iframe, which makes things slightly messier) . I have been looking at different ways of doing this and I might have to create a static altered p5.js library.

                                            I can take a look during the weekend to see if I can wrap something up. If I don't get back to you, just send me a reminder on this thread.

                                                  4 days later

                                                  adanlbenito I can take a look during the weekend to see if I can wrap something up. If I don't get back to you, just send me a reminder on this thread.

                                                  Hi Adan, did you manage to figure this out? I've also found that trying to use "on-demand global mode" by declaring new p5() at the start of the script also doesn't work with trying to use loadScript() or loadImage(), probably for similar reasons