GUI Question regarding SVG objects

Development
1

Hi Everyone,

I am doing some work on my modules and it has occurred to me that they look too “pristine” and “brand new”. Nothing like real ones. So I thought I should add some random scratches, paint chips and faint fingerprints to them. Just so they look more “natural”.

Thought also about having the screws added on random rotations, like on real eurorack case.

However for some reason, the scratches I drew (using inkscape freehand lines) won’t draw. And also, I have tried many different ways of rotating the screws (I had another thread about that some time ago) but they won’t appear anymore when I apply rotation to them.

I might be missing something very simple on both cases, but I think I am on that brain-fart-blocking-moment which prevents us to see the clear solution right on our face.

Any help or insights here would be deeply appreciated.

Thanks, Marcelo.

1 Like
2

For rotations, I’d suggest you look at SvgKnob class in rack it will give you a hint on implementing this :wink:

3

SvgKnob might be the easiest way to rotate “screws”, you would just need to work out a way to set them to random values upon being added to the rack. Keeping in mind that depending on a screw type you would only need to rotate per axis, phillips / star head will be 1/4 of the rotation, flat 1/2, hex 1/6 of 1 rotation.

In the constructor the rotation would come from :

//hex
minAngle = -0.16  * M_PI; 
maxAngle = 0.16 + v * M_PI;

Perhaps a variance can be added here? v being an arbitrary number between 0.00 and 0.16

I was thinking of doing this also some time ago but decided it was not worth the hassle as subtle as it would be, I kept a few screws as knobs though.

4

Yes, I tried this on my code:

		TransformWidget* tw1 = new TransformWidget;
		tw1->addChild(createWidgetCentered<_Screw>(Vec(0, 0)));
		addChild(tw1); // The screw appears at the very upper edge, partially visible as it is centered at 0,0
		float angle = std::fmod(0.0f, M_2PI);
		tw1->identity();
		// Rotate SVG
		math::Vec center = box.getCenter(); // Not sure here
		tw1->translate(center);
		tw1->rotate(angle);
		tw1->translate(center.neg());

I think what I am missing is the “rotate in relation to what” part of it, thus me being unsure about the box.getCenter(). If I set that angle to anything other than 0.0f the screw just disappears. Everything else seems to work fine. If I leave the angle at 0 I get the screw back at the right position.

I have the feeling that I am close to what I want to achieve, just missing the obvious “center in relation to what?” part of it.

And regarding the chips and scratches, won’t the Rack svg lib draw freehand lines?

Thanks!

5

Ok … now it just got weirder. If I do this:

		TransformWidget* tw1 = new TransformWidget;
		tw1->addChild(createWidgetCentered<_Screw>(Vec(10, 10)));
		addChild(tw1);
		tw1->rotate(0.0f);

I get the screw centered at position 10,10 … but if I change that angle to 0.1, or 1.0 or whatever number, the screw just disappears.

6

Does it disappear if you set the angle with a temporary knob with those values? Not sure you need to centre it, SvgKnob is already centred.

Another way to go about it could be calling random upon being added to the Rack and overriding everything on the panel except screws void randomize() override {} in the component constructor. Of course doing this would mean it would not randomise parameters, but perhaps there is a way to override the override after screws have been changed.

7

I actually followed Rémi hint above and used code from the SvgKnob class… but I must be doing something very stupid, as I am not being able to apply rotation. I am not being able to achieve the level of knowledge required apparently.

8

I like the scratchs of Neo by Lindenberg Research

9

Well what does the constructor look like?

10

Played with trying to accomplish a turn of the screw for a bit tonight. This code is tantalizingly close to rotating a SilverScrew, without actually being correct. Has anyone worked out this scenario, please? It seems a shame to clutter up module code using a fake knob to do this, or by drawing five or six screw images at various rotations (but with either the job would be long done at this point). Thanks for all kind suggestions and corrections!

struct B444Widget : ModuleWidget {
    B444Widget(B444* module) {
        setModule(module);
        setPanel(APP->window->loadSvg(asset::plugin(pluginInstance, "res/B444.svg")));
        TransformWidget* tw1 = new TransformWidget;
        tw1->addChild(createWidgetCentered<ScrewSilver>(mm2px(Vec(15.0, 15.0))));
        addChild(tw1);
        float angle = std::fmod(0.0f, M_2_PI);
        tw1->identity();
        math::Vec center = box.getCenter();
        tw1->translate(center);
        tw1->rotate(angle);
        tw1->translate(center.neg());
11
1 Like
12

Thanks very much, @stoermelder, I really appreciate it!