I’m looking for a very particular GUI component, and hoping that it exists already in some third-party context perhaps. If not, maybe there is something similar that I can adapt.
For context, I’m making a real-time beat-tracking application, using some great code by Adam Stark (https://github.com/adamstark/BTrack). It’s going to be a rhythmic tool that hopefully offers a unique way for drummers to practice their timing.
So the GUI I’m envisaging is basically a speed-ometer, like this:
The meter will display the BPM of the incoming signal.
I’ve had a good dig around on this forum and did find this as a possible lead…
…but it’s quite out of date so I wonder if anyone’s aware of anything more recent, or has any other ideas. I’ve worked on a few JUCE projects, but never took the GUI aspect beyond the basics sliders, text buttons etc.
I have some code from an older version of a tuning app I released which essentially does what you’re describing. I also found that JUCETICE example, back when it was not so out of date however it didn’t suit my use case well, and at that time I was only beginning to properly learn C++.
The basic idea is
Work out the angles for each of the labelled meter positions
Draw the meter labels (using a rotation transform)
In a timer callback, use the current value to set the angle of your “needle” / pointer, and call repaint on your component.
You will also want to apply some smoothing so the needle doesn’t jump around too much.
I’m unsure what you mean by “film strip type widget” – would you mind elaborating? I’ve had a look at the TAL NoiseMaker and I can’t identify where that component comes into play. I don’t think any of the GUI elements of that synth would be useful for my purposes, but am I missing something?
@adamski thanks for these tips, really useful!
Broken down like this, it seems a lot more simple than it did in my head. A good exercise to cut my GUI-design teeth on
a film strip knob is starts from an image file organized as a film strip - horizontally or vertically. The Tal-noisemaker example is the code for an horizontal one I think I remember.
You load the image from yout component and display one “frame” of the image, based on the current value…so if the param range is 0-1 and current value is 0.5 you display the middle frame.
You can keep the frame up-to-date either by updating the current displayed frame everytime you receive a parameter change, or you can have an internal timer update the frame based on the last parameter value, to keep the frame rate constant.
There’s a tool called knobman, which is available also in web format, to make such “strips” - here’s an example of a VU-meter (which is a speed-O-meter for sound )
The image the OP posted can be easily generated with draw calls, and even if an image is used, for the background, the only thing changing is a line (or elongated triangle) for the “needle”. So a prime candidate for procedural/vector graphics IMO.