How do you program the events handling, the maths, the curves rendering, etc.? How is this done in JUCE? How is this done in VSTGUI?
Curve by Cableguys:
Voxengo Curve-EQ:
FabFilter Pro-Q 3:
Adobe Audition’s envelope editor:
How do you program EQ-eqsue interfaces in C++? For beginners?
-
- KVRer
- Topic Starter
- 4 posts since 30 Oct, 2021
How should beginners in plugin development approach coding GUIs where users can drag points to form curves, like equalizer GUIs?
How do you program the events handling, the maths, the curves rendering, etc.? How is this done in JUCE? How is this done in VSTGUI?
Curve by Cableguys:
Voxengo Curve-EQ:
FabFilter Pro-Q 3:
Adobe Audition’s envelope editor:
How do you program the events handling, the maths, the curves rendering, etc.? How is this done in JUCE? How is this done in VSTGUI?
Curve by Cableguys:
Voxengo Curve-EQ:
FabFilter Pro-Q 3:
Adobe Audition’s envelope editor:
-
- KVRist
- 296 posts since 1 Apr, 2009 from Hannover, Germany
It's hard to fully explain this in a forum post, as there are a lot of topics involved. But none of them are particularly hard.
Basically you have to figure out the geometry of what you want to draw, and then draw it. For curves, it's basically datapoints that you connect. So you need to compute which x and y coordinates represent which values of the function you want to draw, and then draw a path across those datapoint coordinates. In many cases you will want to add some interpolation to make sure the curve is smooth enough.
It's similar with handle-based graphic UIs. Basically you need to do the following:
1. On mouse down, save the difference between the datapoint coordinates you want to edit and the mouse position on mouse down somewhere
2. On mouse move, correct the mouse position for the offset computed in Step 1. You then get the position where you want the datapoint to move. Convert those graphical coordinates back to the parameters you want to represent, and modify the parameters.
3. Trigger a repaint, so the changed parameters are displayed correctly.
If you have multiple handles, you need to manage a focus during the drag gesture. On mouse down you'll select the handle that's closest to the mouse and is within a certain distance (optionally).
You can also leave out the drag offset outlined in step 1, but the the handle will jump as soon as you start to drag.
That's basically it. None of this is hard, but messing it up along the way and tinkering a lot until it finally works is totally normal. The most important thing is to get the geometric relationship between the display coordinates and the data right, in both directions.
Basically you have to figure out the geometry of what you want to draw, and then draw it. For curves, it's basically datapoints that you connect. So you need to compute which x and y coordinates represent which values of the function you want to draw, and then draw a path across those datapoint coordinates. In many cases you will want to add some interpolation to make sure the curve is smooth enough.
It's similar with handle-based graphic UIs. Basically you need to do the following:
1. On mouse down, save the difference between the datapoint coordinates you want to edit and the mouse position on mouse down somewhere
2. On mouse move, correct the mouse position for the offset computed in Step 1. You then get the position where you want the datapoint to move. Convert those graphical coordinates back to the parameters you want to represent, and modify the parameters.
3. Trigger a repaint, so the changed parameters are displayed correctly.
If you have multiple handles, you need to manage a focus during the drag gesture. On mouse down you'll select the handle that's closest to the mouse and is within a certain distance (optionally).
You can also leave out the drag offset outlined in step 1, but the the handle will jump as soon as you start to drag.
That's basically it. None of this is hard, but messing it up along the way and tinkering a lot until it finally works is totally normal. The most important thing is to get the geometric relationship between the display coordinates and the data right, in both directions.
-
- KVRian
- 621 posts since 28 Feb, 2011 from Sweden
Have a look at splines. At least JUCE can render them, no clue about VSTGUI.
David Guda gudaaudio.com
