Look and Fail



  • 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)));  
    });
    


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


Log in to reply
 

10
Online

1.3k
Users

4.2k
Topics

38.3k
Posts