Hi,

I use Inkscape to design GUIs for virtual musical instruments/synths, two of the interactive components of these GUIs are sliders and knobs. Currently I have to recreate the sliders and knobs in a program called knobman which produces an animation strip with each frame of animation as a separate image. Like this: https://image.ibb.co/iWPsjk/knob.png (256 frames in this one but usually use less).

However, I'd like to be able to do this directly in Inkscape. I need an extension or script that can duplicate an object/group X amount of times and with each duplication adjust one or more parameters (angle, opacity, height, width, scale, etc.) and finally arrange all of the individual image in a sequence that can be exported.

I'm happy to pay someone to write this script for me and expect it to be released under a GPL license.

Based on the example you linked to, there's really no need for an extension to do this. The Tiled Clones dialog is all you need in this case - although more complex designs might require a little more lateral thinking. To get you started:

1) Create a circle with another inside it to form your initial knob.
2) Group the circles.
3) Rotate the group to the right start position.
4) Select the group then use Edit > Clone > Create Tiled Clones
5) Click the Reset button at the bottom left to put all the fields back to their defaults. Enter the number of rows and columns you want (e.g. 256, 1).
6) On the Symmetry tab, select "P1: simple translation".
7) On the "Shift" tab put a value into the "Shift Y, Per row" field to adjust the vertical spacing of the clones, to account for the stroke width. Click the Create button to see the result, then the Remove button to undo. Iterate on the value until it's right.
8) Once the vertical spacing is right, move to the Rotation tab and do the same thing, putting a value into the "Angle, Per row" field and iterating until it's right.
9) Export the result as a PNG.

That's the basics. If you want to precisely control the size of each cell, and the amount of rotation, you'll probably need to be a bit more careful in drawing the original image, or might need some maths to work out the rotation amount for the number of images - but it's nothing very tricky.

Once you've played around for a bit, ask back here if you have any more specific questions. And if you find you no longer need an extension after all, you might consider donating some of that payment to the Inkscape project itself

Xav wrote:Based on the example you linked to, there's really no need for an extension to do this. The Tiled Clones dialog is all you need in this case - although more complex designs might require a little more lateral thinking. To get you started:

1) Create a circle with another inside it to form your initial knob.
2) Group the circles.
3) Rotate the group to the right start position.
4) Select the group then use Edit > Clone > Create Tiled Clones
5) Click the Reset button at the bottom left to put all the fields back to their defaults. Enter the number of rows and columns you want (e.g. 256, 1).
6) On the Symmetry tab, select "P1: simple translation".
7) On the "Shift" tab put a value into the "Shift Y, Per row" field to adjust the vertical spacing of the clones, to account for the stroke width. Click the Create button to see the result, then the Remove button to undo. Iterate on the value until it's right.
8) Once the vertical spacing is right, move to the Rotation tab and do the same thing, putting a value into the "Angle, Per row" field and iterating until it's right.
9) Export the result as a PNG.

That's the basics. If you want to precisely control the size of each cell, and the amount of rotation, you'll probably need to be a bit more careful in drawing the original image, or might need some maths to work out the rotation amount for the number of images - but it's nothing very tricky.

Once you've played around for a bit, ask back here if you have any more specific questions. And if you find you no longer need an extension after all, you might consider donating some of that payment to the Inkscape project itself

Wow, thanks that's excellent. I've used the clone tile tool before but didn't realise it could do this!

Here are a couple of tips to help you with this:

1) To ensure each "cell" is the right size, draw any non-circular knobs inside a background circle of the right dimensions. Group everything, then create tiled clones of the group. You can give the background circle a fill for clarity then, after cloning, go into the original group and set it to transparent before you export.

2) For calculating angles and such remember that Inkscape 0.91 and later lets you perform calculations inside most spinbox fields. E.g. if you need your knob to rotate through 270° over 256 images, you can just type "270/256" into the "Angle, Per row" field and hit Enter.

I didn't know about the calculations within spinboxes, that is very helpful. I have another query, when I scale a rectangle that has rounded corners using the clone tool it doesn't seem to scale the rounded corners as it would if I were to scale the rectangle manually so the corners end up all stretched out which I don't want. Any solution for this?

I just figured out if I delete the original object then I can adjust the rounding of the corners for all of the clones - why is that?.

Broadly speaking a clone is just that - a clone of the original object, preserving its shape and size. The tiled clones dialog is a simple way to create clones with an additional transform applied. The underlying clone is still identical to the original, but the transform then scales or rotates it.

Adding a transform to an object is not the same as modifying the original object. In many cases it may give the same appearance, but not always. Think of it like drawing your image onto a rubber sheet - editing the original object is equivalent to redrawing the image, whereas adding a transform is like stretching the sheet to distort the image.

Inkscape can still help with these sorts of problems, but it will require a bit more preparation and thought (it's what I meant when I said that "more complex designs might require a little more lateral thinking" in my original post). One approach is to create a start and end shape, ensure they're converted to paths, then use Extensions > Generate from Path > Interpolate to produce all the interim shapes. This has the disadvantage that, having converted the shapes to paths they are not longer editable as rectangles, so adjusting the corners becomes much harder.

Another approach is to create as many copies of the shape as you need (e.g. using tiled clones, then Edit > Clone > Unlink Clone to turn them into real objects), then select them all and use Extensions > Modify Path > Interpolate Attribute in a Group. It requires a bit more technical knowledge as to what attributes you can interpolate, and only works on one at a time (so you might need two passes for width and height, for example), but does work on the original objects even if they're not paths (despite its location in the Extensions menu!).


As for why you could modify the clones when you remove the original - that turns them back into "real" objects, rather than clones. It's essentially the same as using Edit > Clone > Unlink Clone, except that the behaviour is dependent on your Inkscape preferences (there's an option to delete rather than unlink).

Aha the unlink clones was what I did then, I then just selected them all and entered the roundedness that I wanted

Hi,

I have a slightly different problem now. I need to make a vertical slider. So basically I need a rectangle that gets longer in each frame. I've been using the cloned tile tool and changing the scale parameter but it's giving me weird results.

Here's an example of the kind of thing I'm trying to make https://pasteboard.co/IxRrN3F.png

Thanks.

Think I might have figured it out, just needed to play with the settings more.

Interpolating rectangles could work. Or tiled clones that are stretched.