Add background and forground image to slider knob?

[Mickolos]

I want to have a bg image to my slider knobs and an alpha image overlay which will rotate.

I want to replace my current bg colour with the bg image, and replace the knob marker with image with transparent bg.

Here is a breakdown of what I'm trying to do:

Any suggestions?

PS: I don't want to use filmstrip as it covers the text and knob-marker and doesn't allow for a rotating overlay.

[d.healey]

@Mickolos You can achieve this using look and feel. Another solution is to use an image component underneath the knob and a filmstrip for the knob marker.

[Mickolos]

@d-healey Thanks for you input.

Yeah there is a look and feel there and I've I've spent hours trying to add an image component as a background, but asking a non-developer to just use a look-and-feel and slap an image under the knob is like asking a non-mechanic to build a car by just using an engine and slap some wheels underneath :-)

I've tried to leverage the code you showed in your video about adding an image to a panel, but can't seem to apply it to knobs. I watched the video bout the film strip but like I said this blocks/removes the name and value text.

Plus I would assume it'd be better practice to just have a single instance of an image in the code which i could also apply globally to all knobs.

Here's the full code for the global rotarySlider styling.

const var knobs = Content.getAllComponents("Knob");
const ValueLAF = Content.createLocalLookAndFeel();

/// Rotary Knob
ValueLAF.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    var knobSize = 50;
    var x = (a[2] - knobSize) / 2;
    var y = 0;

    // Background circle
    g.setColour(SLIDER_BG_COLOUR);
    g.fillEllipse([x, y, knobSize, knobSize]);


    // Value text
    g.setColour(TEXT_COLOUR);
    g.setFontWithSpacing("Inter_18pt-Bold", 12, 0.08);
    g.drawAlignedText(obj.valueAsText, [0, 0, a[2], a[3] - VALUE_Y_POS], "centred");

    // Label text
    g.drawAlignedText(obj.text, [0, a[3] - NAME_Y_POS, a[2], 15], "centred");

    // Marker
    var angle = 2.5 * 2 * obj.valueNormalized - 2.5;
    g.rotate(angle, [a[2] / 2, y + knobSize / 2]);

    g.setColour(SLIDER_MARKER_COLOUR);
    g.fillRoundedRectangle([a[2] / 2 - 2.5, y + 3, 5, 11], 2.5);
});

I just like to know what line of code I need to add to replace the bg-colour with my bg-image, and the marker indicator with my transparent image (both outlined in blue in my original post). If someone can let me know the code I will be able to understand what the correct solution is in this case, and in the future.

[d.healey]

@Mickolos for putting the image underneath it's a no code solution. Add an image component below the knob.

[Mickolos]

@d-healey Ah, I didn't even know there was an image component available the interface designer, thanks. But...

It seems strange doing a "no code solution" for it because I have a lot of knobs in my preset and doing this manually for every one and seems very inefficient. Would be a lot easier if I cloud load image layers into the knob itself, like you would with an ellipse shape and have it update all my knobs with a single line of code.

Plus this solution still does not allow me to change the knob marker with my image, and using the filmstrip removes the knob value and name.

[d.healey]

@Mickolos said in Add background and forground image to slider knob?:

t seems strange doing a "no code solution"

I only offered it up as a potential option - I wouldn't use it myself - and your original post didn't tell me how many knobs you needed to apply this to. For one knob it's not a bad method, for more than a few it is as you say very inefficient.

You can load images into look and feel objects, that's probably the way to go.

Here I show the basic method, with a button, but the same applies to any laf object.

I think your entire design could be done entirely with vectors in laf, without using any images. That's the route I'd try.

[Mickolos]

@d-healey You nailed it. That's exactly what I needed, your a legend Dave, cheers!