Funny slider?

[IsoWalle]

Is it possible to make a "slider" like this one in HISE? Don't really know what it's called.

[d.healey]

@IsoWalle visually yes

[IsoWalle]

@d-healey Yeah, but could you have a slider that ca move seamlessly between three points instead of one?

[Christoph Hart]

@IsoWalle with a Panel sure...

[civet]

@IsoWalle My funny dirty code is here:

Content.makeFrontInterface(400, 400);

// distance squared
inline function distance2(p0, p1)
{
	local dx = p1.x - p0.x;
	local dy = p1.y - p0.y;
	return dx * dx + dy * dy;
}

// angle between two points
inline function angleBetween(p0, p1)
{
	local dx = p1.x - p0.x;
	local dy = p1.y - p0.y;
	// convert atan() to atan2()
	local a = Math.atan(dy / dx);
	if(dx > 0)
	{
		if(dy < 0) 
			a += Math.PI;
		else
			a -= Math.PI;
	}
	return a;
}

const var points = [
	{x: 200, y: 102},
	{x: 100, y: 275},
	{x: 300, y: 275}
];
const var radius = 200;
const var radius2 = radius * radius;

reg dragger = {x: 200, y: 217};
reg draggerRadius = 10;
reg values = [0.0, 0.0, 0.0];
reg valueIndex = 0;

const var canvas = Content.addPanel("canvas", 0, 0);
Content.setPropertiesFromJSON("canvas", {
	"width": 400,
	"height": 400,
	"allowCallbacks": "Clicks, Hover & Dragging"
});

canvas.setPaintRoutine(function(g) 
{	
	// draw guides
	g.setColour(0x40FFFFFF);
	for(p in points)
	{
		g.drawEllipse([p.x - radius, p.y - radius, radius * 2, radius * 2], 1);
		
		g.fillEllipse([p.x - 2, p.y - 2, 4, 4]);
	}
	
	// draw dragger
	g.setColour(0xFFFFFFFF);
	g.fillEllipse([dragger.x - draggerRadius, dragger.y - draggerRadius, draggerRadius * 2, draggerRadius * 2]);
});

canvas.setMouseCallback(function(event)
{
	if(event.drag)
	{
		dragger.x = event.x;
		dragger.y = event.y;
		
		// limit the drag area
		for(p in points)
		{
			if(distance2(dragger, p) >= radius2)
			{
				var a = angleBetween(dragger, p);
				dragger.x = p.x + Math.cos(a) * radius;
				dragger.y = p.y + Math.sin(a) * radius;	
			}
		}
		
		canvas.repaint();
		
		// calculate distance between points
		valueIndex = 0;
		for(p in points)
		{
			var d2 = distance2(dragger, p);
			values[valueIndex] = Math.round((200.0 - Math.sqrt(d2)) / 2);
			valueIndex++;
		}
		Console.print(values.join(", "));
	}
});

[d.healey]

@IsoWalle Yes, it's essentially an xy controller in a fancy package

[Natan]

@d-healey Why it doesn't remember it's the state?
once you hit compile it jumps back to center :/

[d.healey]

@Natan Not my code.

[Christoph Hart]

saveInPreset must be set to true.

[civet]

origin

Maybe it’s a kind of XYPad um..delta?

[Natan]

@civet It looks Nice :)

[IsoWalle]

Thank you all for your replies! It seems like it's quite a bit over my competence level, but maybe something to start learning.

[IsoWalle]

@civet I tried messing around a little with your code and I noticed that it takes the value from where the mouse is and not from where the "dragger" is. So if you click and drag and continue outside the "triangle" the value keeps changing.

Any way to make it stop?

[civet]

@IsoWalle said in Funny slider?:

@civet I tried messing around a little with your code and I noticed that it takes the value from where the mouse is and not from where the "dragger" is. So if you click and drag and continue outside the "triangle" the value keeps changing.

Any way to make it stop?

Sorry, I just wrote some dirty code to prove that it works.

It takes more work to finish a custom component, such as redraw the appearance, encapsulation with namespace, configure parameters more flexibly, etc.

And there are many other implementations.

I just modified the code and added some comments on it, hope this helps.