Adds a easily moddable vector slider for hise.

HiseSliderMod.js

const laf = Engine.createGlobalScriptLookAndFeel();

const BORDER = 3;
const PADDING = 10;
const GLOW_RING_SIZE = 3;
const GLOW_AMOUNT = 3;
const BLACK = '0x000000';
const RED_COLOUR = '0xFBFF0000';
const BLUE_COLOUR = '0xFB0023FF';
const BORDER_COLOR = '0xDFDFDF';
const INDICATOR = '0x6b6b6b';
const UPPER_GRADIENT = '0xF6F6F6';
const LOWER_GRADIENT = '0xEAEAEA';
const INDICATOR_THICKNESS = 5;
const INDICATOR_LENGTH = 15;
const INDICATOR_BORDER_RADIUS = 2;
const INDICATOR_GAP = 8;
const SHADOW_COLOUR = '0x3e3234';
const SHADOW_RADIUS = 4;
const SHADOW_OFFSET = [0, 2];
const SHADOW_PADDING = 5;
const ARC_THICKNESS = 3;
const ARC_COLOUR = '0x000000';
const ARC_PADDING = 10;
const LABEL_COLOUR = '0x000000';

laf.registerFunction("drawRotarySlider", function(g, obj){
	
	var a = obj.area;
	var ka = [PADDING, PADDING, a[2] - PADDING * 2, a[3] - PADDING * 2];
	var sa = [
		PADDING + SHADOW_PADDING,
		PADDING + SHADOW_PADDING,
		a[2] - (PADDING + SHADOW_PADDING) * 2,
		a[3] - (PADDING + SHADOW_PADDING) * 2
	];
	
	if (obj.text == 'red') {
		g.setColour(RED_COLOUR);
		var ra = [PADDING - GLOW_RING_SIZE, PADDING - GLOW_RING_SIZE, a[2] - (PADDING - GLOW_RING_SIZE) * 2, a[3] - (PADDING - GLOW_RING_SIZE) * 2];
		g.fillEllipse(ra);
		g.addDropShadowFromAlpha(RED_COLOUR, GLOW_AMOUNT);
	}
	
	if (obj.text == 'blue') {
		g.setColour(BLUE_COLOUR);
		var ra = [PADDING - GLOW_RING_SIZE, PADDING - GLOW_RING_SIZE, a[2] - (PADDING - GLOW_RING_SIZE) * 2, a[3] - (PADDING - GLOW_RING_SIZE) * 2];
		g.fillEllipse(ra);
		g.addDropShadowFromAlpha(BLUE_COLOUR, GLOW_AMOUNT);
	}
	
	g.setColour(BORDER_COLOR);
	g.fillEllipse(ka);
	
	g.setGradientFill([
		UPPER_GRADIENT, 0.0, 0.0,
		LOWER_GRADIENT, 0.5, 100.0]
	);
	
	// SHADOW PATH
	var shadowPath = Content.createPath();
	shadowPath.addArc([0.0, 0.0, 1.0, 1.0], 0, Math.PI * 2);
	g.drawDropShadowFromPath(
		shadowPath,
		sa,
		SHADOW_COLOUR,
		SHADOW_RADIUS, SHADOW_OFFSET
	);
	
	g.fillEllipse([
		ka[0] + BORDER,
		ka[1] + BORDER,
		ka[2] - BORDER * 2,
		ka[3] - BORDER * 2
	]);
	
	var arcPath = Content.createPath();
	
	var start = 2.5;
	var end = start * 2 * obj.valueNormalized - start;
	
	var arcThickness = ARC_THICKNESS / 100;
	var arcWidth = (1.0 - 2.0 * arcThickness) + arcThickness;
	var stableSize = a[2];
	
	arcPath.addArc(
		[arcThickness / 2, arcThickness / 2,arcWidth , arcWidth],
		-start,
		end
	 );
	
	var pathArea = arcPath.getBounds(stableSize);
	
	g.setColour(ARC_COLOUR);	
	
	if (obj.text == 'red') {
		g.setColour(RED_COLOUR);
	}
	if (obj.text == 'blue') {
		g.setColour(BLUE_COLOUR);
	}
	
	g.drawPath(arcPath, pathArea, stableSize * arcThickness );
	
	g.rotate(end, [a[2] / 2, a[3] / 2]);
	g.setColour(INDICATOR);
	g.fillRoundedRectangle([
		a[2] / 2 - INDICATOR_THICKNESS / 2,
		PADDING + INDICATOR_GAP,
		(a[2] / 100) * INDICATOR_THICKNESS,
	 	(a[2] / 100) * INDICATOR_LENGTH],
	 	INDICATOR_BORDER_RADIUS
	);
});