LAF ScriptSlider?

[ustk]

@d-healey Sorry but I don't understand what was the problem... Everything seems fine here...

[d.healey]

@ustk If you use it with the attack knob of an ADSR for example the skew is totally off.

[Christoph Hart]

Oops I thought you were talking about the center point of the circle :)

I think the obj.value should be normalized (or at least an obj.normalisedValue should be added) that takes the skew factor into account.

[ustk]

@Christoph-Hart @d-healey There's a valueNormalized but I might have made a mistake (or not), so this is where obj.skew might help.
This is the formula of the valueNormalized I've made:

(s.getValue() - s.getMinimum()) / (s.getMaximum() - s.getMinimum())

so this doesn't take the skew factor, hence 0.5 isn't the middlePosition of 1,000, but half the range (10,000 in the case of a 0-20,000 time knob)

[ustk]

@d-healey @Christoph-Hart This is what you want, but since it complicates too much the formula, I should either add a valueNormalizedWithSkew, or modify the existing valueNormalized... ?

laf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    var width = obj.area[2];
    var height = obj.area[3];
    var stroke = 3;
    var mark = 4;
    var startOffset = 2.5;
    
    var valueNormalizedWithSkew = Math.pow(10, (Math.log10(obj.valueNormalized) / (1/obj.skew)));
    
    var endOffset = 5 * valueNormalizedWithSkew - startOffset;

    Console.print(obj.skew);
    g.setColour(obj.itemColour1);
    g.fillEllipse(a);

    g.setColour(obj.itemColour2);
    g.drawEllipse([stroke / 2, stroke / 2, width - stroke, height - stroke], stroke);

    g.rotate(endOffset, [a[2] / 2, a[2] / 2]);

    g.setColour(obj.textColour);
    g.fillRoundedRectangle([width / 2 - mark / 2, 0, mark, height / 2.5], 1.5);
});

[Christoph Hart]

Yeah, valueNormalised should definitely include the "deskewing", otherwise you can just use the normal value.

[ustk]

@Christoph-Hart Alright, correcting...

[ustk]

@Christoph-Hart @d-healey that's fixed and pushed, so you can now do this:

laf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    var width = obj.area[2];
    var height = obj.area[3];
    var stroke = 3;
    var mark = 4;
    var startOffset = 2.5;
    var endOffset = 5 * obj.valueNormalized - startOffset;

    g.setColour(obj.itemColour1);
    g.fillEllipse(a);

    g.rotate(endOffset, [a[2] / 2, a[2] / 2]);

    g.setColour(obj.textColour);
    g.fillRoundedRectangle([width / 2 - mark / 2, 0, mark, height / 2.5], 1.5);
});

[d.healey]

@ustk Woohoo! Thank you both!

[d.healey]

@Christoph-Hart Merge?

[Christoph Hart]

@d-healey Merge.

[Natan]

@d-healey @Christoph-Hart so Is This Stable To Build?
https://github.com/christophhart/HISE/commits/scriptnode

The Top One, Is The Latest, Right?
71f75e5 <<< This?

[Christoph Hart]

Yes, that should be fine.

[A Former User]

This post is deleted!

[d.healey]

I'm convinced that LAF is the way to go now for a custom UI without images.

[A Former User]

@d-healey I was experimenting with Lottie graphics yesterday and was totally blown away by its looks and possibilities! I don’t get what LAF is exactly tbh. But it looks really nice too!

[d.healey]

@vewilya I haven't used rlottie much but what I have done with it has looked nice, very smooth animation.

[ustk]

@vewilya Be just careful with Lottie since all actions aren't rendered/compatible with Hise. So complex animations might not work, keep them simple.
Custom LAF is a way to redraw the components (sliders, comboboxes, etc...) with fully customizable graphics (shapes and colours). So you don't necessarily need to recreate the components from script panels for full customizations, the original ones can now give you almost anything you want...

[DanH]

@ustk We seem to lose the 'boxes' around the option buttons when using laf - anyone else come across this?

[ustk]

@DanH Unfortunately, when using custom LAF, Hise LAF isn't separated from plugins LAF. The recommendation is to write your custom LAF and then deactivate it (comment) when working on the project. Then reactivate (uncomment) before export.
I'd like this to be different like many of us, but Christoph said it would be a nightmare to modify if I translate well his words...