Help with SvgSlider

Development
#1

The docs for SvgSlider are sorely lacking. I’ve checked a few examples and even busted out the source but I’m having trouble positioning my own SVG files correctly.

Does anyone have notes or can explain the right way to set up a slider with custom graphics? I don’t understand how to choose the values for margin, max and min handle pos, etc. I was able to get everything centered by trial and error, but when it all seems working (correct capture area for the mouse, etc.) the background SVG is missing. I can’t get the background to appear AND have everything lined up at the same time.

Thanks!

#2

don’t know if this will help, but my “Organ 3” does something like this. organ-three

#3

I’ve definitely checked out other examples. I want some documentation explaining what the various parameters do so I can properly calculate everything and have both the knob and the background appear properly and be correctly placed on my panel.

#4

well, good luck waiting for that :wink:

#5

:frowning:

#6

If you could share your code I’m sure somebody could help!

#7

Here is my setup code:

//        math::Vec margin = math::Vec(util::in2px(0.276, 0.217));
		maxHandlePos = math::Vec(util::in2px(-0.276 + 0.04, 0.000 - 0.04));
		minHandlePos = math::Vec(util::in2px(-0.276 + 0.04, 1.772 - 0.04));
		setBackgroundSvg(APP->window->loadSvg(asset::plugin(pluginInstance, "res/components/slider-45mm-bg.svg")));
		setHandleSvg(APP->window->loadSvg(asset::plugin(pluginInstance, "res/components/slider-knob-black-red.svg")));

When I used createParamCentered everything displays correctly in the right place with the correct offset of knob. The only problem is that the sensed area is only the size of the background. (2x54mm) How do I make the mouse sensing area bigger without causing the objects to move? I tried increasing the component box size… the sensing area does increase properly and in the right place, but the drawn components get shifted up and to the left and I can’t figure out how to make them go back to the right place.

#8

I found an example here - VCV Rack API: /home/vortico/src/vcv/Rack-v1/include/componentlibrary.hpp Source File for the BefacoSlidePot which is a SvgSlider.

Looks like you are missing setting correct box sizes, which seems to be required.

image
image1478×204 23.9 KB

Don’t ask me anything about this, I have never done or used this.

#9

btw, the rick and morty facebook page has many references to pickle rick!

#10

I messed around with the stuff you highlighted but it just ruins the positioning of things that were previously fine. I’m sure there is a procedural way to supply a knob and track image and maybe the actual travel (since the track is always longer) and calculate the needed sizes and offsets, but so far I spent a few hours with no better understanding of what’s going on.

#11

Okay I have made some small progress:

    // set the travel and position all the components
    void setTravel(float travel) {
        travel = mm2px(travel);
        math::Vec margin = math::Vec(handle->box.size).mult(0.5);
        float handleX = -margin.x + (background->box.size.x * 0.5);
        float handleY = margin.y;
        float trackOffset = (background->box.size.y - travel) * 0.5;
        maxHandlePos = math::Vec(handleX, trackOffset - handleY);
        minHandlePos = math::Vec(handleX, trackOffset - handleY + travel);
        box.size = background->box.size.plus(margin.mult(2));
    }

This makes everything work well except that the track and handle are offset up and to the left as soon as I set the box.size to be big enough for the handle and track. (for mouse tracking)

Attempting to move the slider or handle box positions result in no change. Attempting to move the background box position results in the background disappearing.

Please help!

#12

Is all of your code available on GitHub?

#13

Could it be possible that you forgot to call the overridden method of the base class in your draw() method? This should be called for every method that gets overriden so they get executed. Or maybe you forgot to override a necessary method that you need to and add there required changes to make it work correct.

e.g.

class MySvgSlider : public app::SvgSlider
{
public:
   ...
   void draw(const DrawArgs& args) override
   {
      // my draw code goes here
      app::SvgSlider::draw(args);
   }
   ...
};
#14

computerscare: no my code is not released yet the entire code is below

qno: no i don’t override draw() - the examples i saw just had confusing settings for the various positioning parameters, and even looking at their SVG assets didn’t help me to understand it better

Constructor:

        setBackgroundSvg(APP->window->loadSvg(asset::plugin(pluginInstance, "res/components/slider-45mm-bg.svg")));
		setHandleSvg(APP->window->loadSvg(asset::plugin(pluginInstance, "res/components/slider-knob-black-red.svg")));
        setTravel(45.0);

the method to set the travel:

    void setTravel(float travel) {
        travel = mm2px(travel);
        math::Vec margin = math::Vec(handle->box.size).mult(0.5);
        float handleX = -margin.x + (background->box.size.x * 0.5);
        float handleY = margin.y;
        float trackOffset = (background->box.size.y - travel) * 0.5;
        maxHandlePos = math::Vec(handleX, trackOffset - handleY);
        minHandlePos = math::Vec(handleX, trackOffset - handleY + travel);
        box.size = background->box.size.plus(margin.mult(2));
    }

I’m trying to make this so I can just have it work with whatever SVG background and handle are provided. The only manual setting is the track length, but I might even try to make that depend on the background SVG length. I just can’t seem to get things centered properly when also trying to increase the box.size to allow the margin area for the mouse interacting with the handle. It only works when the box size is not changed by my own code… but then you have to click only above the background track image to adjust the slider. (boo :frowning: )