Custom smart components - best practice

Useful Tools and Components
1

Hi Guys,

in 2020, what is the best / recommended / idiomatic way to implement a custom component - advanced rotary slider:

  • with drag&drop functionality (making links)
  • custom graphics
  • label on top and value on bottom
  • displaying a range values (e.g. total range 0-100, highlighting selected range 30-50 with different color)
  • showing label on top and value bottom
  • possibly combining button and slider (on/off trigger)
  • showing small hint or menu when pressing Ctrl
  • Attached and responding to AudioProcessorValueTreeState

I would prefer option which is simple yet flexible and open to future enhancements and a general concept/approach which could be used for smart buttons or other components.

Considering options:

  1. Slider with other separate components created by a factory pattern
  2. Class derived from Slider with additional methods and graphics rendering with separate custom Look & Feel v4
  3. Class derived from Component with composed Slider, Label etc incl paint/resize graphics rendering
  4. Any better / more preferred alternative or how to chose recommendations?

Thank you for your help in advance!

2

Hi Nelo,
As i just did this a week ago, i could help here :slight_smile:

testren
testren1066×633 140 KB

Fist, i had look at this files:


here, you will have the base to get some image custom rotary sliders, as well as some full vector knob :wink: great start, isnt it ?

then, as you mention your needs, the value and the knob “title” can be easily added within:
for the value by example:
Slider_Img_1.setTextBoxStyle(Slider::TextBoxBelow, false, 60, 20);
Slider_Img_1.setRange(0.0, 127.0, 1.0);

then create a label:
addAndMakeVisible(midiLabel);
midiLabel.setText(“MIDI”, dontSendNotification);
midiLabel.attachToComponent(&Slider_Img_1, false);
midiLabel.setJustificationType(Justification::centred);

and finally, in the resize, only theknob ! :
Slider_Img_1.setBounds(600, 70, 66, 84);

hope that helps :wink: have a nice day
uriel

3

I’d avoid option 2, Slider is already enough of a beast.

By your description, I’d go with option 3 because it sounds like you consider that as a reusable widget that communicates as a single entity with the rest of the UI, and handles internally all the mutual updates of the composed Components that make up your complex widget.

Option 1 is a route more apt if you see your set of composed components more like a section in your UI rather than a complex widget. This is the choice I’d take if I had to implement a channel strip for a mixer, for example.