First I would recommend examining the following files in the Rack source code:
SliderKnob.hpp
SvgSlider.hpp
SvgSlider.cpp
Then I’d create 3 new structs for (1) the slider widget itself (lets call it q8fuelSlider), (2) the background (q8fuelSliderBackground), and (3) handle (q8fuelSliderHandle: the part you click and drag with the mouse)
namespace rack {
namespace app {
struct q8fuelSliderBackground::OpaqueWidget {
NVGcolor customColor;
q8fuelSliderBackground();
void draw(const DrawArgs& args) override {
//your draw code for the background
}
};
//then another struct for the custom slider handle called q8fuelSliderHandle
struct q8fuelSlider : SliderKnob {
widget::FramebufferWidget* fb;
//you dont want an SvgWidget, you want your new custom background widget
//widget::SvgWidget* background;
q8fuelSliderBackground* background;
//you dont want an SvgWidget, you want your custom handle widget
//widget::SvgWidget* handle;
q8fuelSliderHandle* handle;
/** Intermediate positions will be interpolated between these positions */
math::Vec minHandlePos, maxHandlePos;
...
You’ll probably want to copy most of the code in SvgSlider.cpp so that your slider behaves the same way.
Hopefully this helps you to get started! Good luck!
Yes, that’s somethings I don’t like to do in general. If in Rack 2.0 some “native” widgets code change internally, I need to migrate each changes for my copied class.
Instead, if I keep the max I can out of the already code, to extend it is better to maintain.
All I need here is a sort of nanoVG path to NSVGimage (or easily, NSVGshape).
Hope there is somethings, else I will follow your suggestions.
I understand this desire, but in the case of the component you are trying to create the code you’d be copying from SvgSlider is quite trivial. Your custom draw code would be more lines than what you’d have to copy.
Another option: according to @synthi in this thread: Buttons, SVG and layers - #4 by synthi it is possible to interact with individual elements of an SVG. I’ve never tried this so I can’t be of any help, but perhaps you could create some “template” SVGs, and then change their color in your component’s step() method as Antonio suggests. This way your component could inherit from SvgSlider.