Look and Fail

[A Former User]

Hello :) I'm trying to port Christoph's vectorized slider into my L&F, and I'm almost there, but the pointer isn't rotating:

https://i.gyazo.com/cfef9db3a8b6639cdbd9950ffc0cdc40.mp4

If I move the g.rotate to after the "light grey component" section, it rotates it to the other side, but I can't get it to work when dragging the slider

if any L&F gurus know what's up, I'd be grateful :)

const laf = Engine.createGlobalScriptLookAndFeel();

//Slider

const var ringData = [110,109,203,161,243,65,12,2,240,65,98,96,229,189,65,90,228,19,66,152,110,74,65,94,58,21,66,180,200,178,64,166,155,245,65,98,6,129,197,191,162,69,192,65,33,176,242,191,121,233,76,65,154,153,153,64,215,163,180,64,98,158,239,55,65,74,12,194,191,168,198,
	181,65,6,129,245,191,229,208,238,65,207,247,151,64,98,152,238,19,66,240,167,54,65,16,88,21,66,221,36,181,65,184,30,245,65,164,112,238,65,98,0,0,245,65,104,145,238,65,72,225,244,65,33,176,238,65,156,196,244,65,217,206,238,65,108,180,200,233,65,227,165,
	185,65,98,92,143,252,65,250,126,146,65,109,231,244,65,236,81,68,65,215,163,211,65,172,28,6,65,98,104,145,170,65,125,63,101,64,242,210,83,65,119,190,119,64,33,176,6,65,176,114,16,65,98,63,53,102,64,170,241,98,65,201,118,118,64,209,34,178,65,143,194,15,
	65,68,139,216,65,98,102,102,80,65,156,196,246,65,209,34,151,65,156,196,251,65,201,118,188,65,139,108,232,65,108,203,161,243,65,12,2,240,65,99,101,0,0];

const var sliderRing = Content.createPath();
const var sliderRing2 = Content.createPath();

sliderRing.loadFromData(ringData);

sliderRing2.startNewSubPath(0.5, 1.0);
sliderRing2.addArc([0.0, 0.0, 1.0, 1.0], -Math.PI*0.75, Math.PI * 0.75);

inline function reduced(obj, amount)
{
    return [amount, amount, obj.area[2] - 2*amount, obj.area[3] - 2* amount];
}

laf.registerFunction("drawRotarySlider", function(g, obj)
{   
    var ringWidth = obj.area[2] / 16;  
    
    //background

    g.setColour(0x33000000);
    g.fillEllipse(reduced(obj, ringWidth * 2.0));
    
    //center black gradient 
    g.setColour(0xFF333333);
    g.fillEllipse(reduced(obj, obj.area[2] * .9));
    
    //arc
    var sliderRing3 = Content.createPath();
    
    sliderRing3.startNewSubPath(0.0, 0.0);
    sliderRing3.startNewSubPath(1.0, 1.0);  
    
    var start = -Math.PI*0.75 + 0.04;
    
    //unfilled ring
    sliderRing3.addArc([0.0, 0.0, 1.0, 1.0], start, Math.max(start + 0.08, start + Math.PI * 1.5 * obj.valueNormalized - 0.08));
    g.setColour(0xff111118);
    g.drawPath(sliderRing2, reduced(obj, ringWidth), ringWidth * 2);
    
    //filled ring
    g.setColour(Colours.lightblue);
    g.drawPath(sliderRing3, reduced(obj, ringWidth), ringWidth * (1.6));
    g.rotate((1.0 - obj.valueNormalized) * -1.5 * Math.PI, [obj.area[2] / 2, obj.area[3] / 2]);      
    
    //light grey component (defines pointer shape)
    g.setColour(obj.hover ? 0xFFc2c2c2 : 0xFFAAAAAA);	
    g.fillPath(sliderRing, reduced(obj, ringWidth * (1.6)));  
});

[A Former User]

Ok got it, updating the code if anyone else wants it :) (I needed obj.valueNormalized not just valueNormalized)