Speed-ometer type GUI?

Hey there

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.


This look like a very good candidate for a film strip type widget. One example here:

Also: since it does not seem to have adventurous gradients/shadows you might consider using an svg for the film strip, a lot lighter in terms of size.

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 :slight_smile: 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.

@fefanto, thanks for your reply!

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 :grinning:

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 :slight_smile: )


I’d have to respectfully disagree here :slight_smile:

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.