Graphics Functions

Christoph Hart

Panel.set("saveInPreset", true);

If you set this property, it will save the value before recompiling and executes the control callback after compilation with the stored value (after setting the value internally). By default it's disabled for ScriptPanels, so you need to enable this specifically.

The general rule of thumb is: Enable this property for everything that controls sound parameters so you want this to be restored when you load user presets), but disable this for GUI controls (like buttons that toggle the visibility of UI pages, etc.). And definitely disable those for buttons that load user presets or you get an infinite loop...

d.healey

I just realised that it wasn't set for your example, but for I already have set it in my own project. I shall investigate further.

d.healey

I think it's something in my factory function but I haven't worked out what yet...

HiseSnippet 1643.3ocsX8uaaaCDVNMBXxadXcXO.b4OFr2bjkiS5ZSPPahSbmwVZMp6BZQwPGsDsMWjHMnnbhaPdI1S5dC1NRJYImXGDWfI3XKd2Qd28ce7Womf6Shi4BqRe4amMgXU5qr6OiIG2dLlxr5dhUou19LbrjHPFQGOaBNNlDXUpzidoRPImMszO+yyOFGhY9jbQVVmyo9jeiFQk4R+yW7qzvvN3.xaoQErd2Wz0myZyC4IP77HaOqIX+KviHuBqLaCaqoTxkwVk7rasiq3hlC9zQtpmiUe4416L2STuM72cGbpVg6a6fmcjqkehPPXxygtaUxtz+BOkrOMfJ4h9Rrj.i4lGyCl0eL+Rlw0mSioCBIpFMs5CwjQbWF.ECw9jBlZ0dLMLnWFTFaAiVubf8QFf86rOiFPmKOGf+FsBTdOJBwk139BylqJL6vCCTCvJBuREBuMMg2is66KnSj4ZTw12lJcEQmQo0F+cY61b.YXR2H7EjNBnwbjp5S77pi1wyq1AUJWobiF8fLWhD7DIkQpTdTHe.NDcAiOvn4PzvDlujxYUGUC0nwKMFLoX2PLBIHFI4nQbz.xPtfnGAjuffUcsR4qqT1QNlF6NhHqtEggAbJXqZnCODIEIDzyQibiIRCeqp2Uc5bzQGs2yZVCs+szbjWpFHAbF4NDXumFFRmDSp9gl0Qvmb+bIMPNdqZa2pnvwD5nwRkz+HcLVzwszO0N.AY6IXwEnWJHyz1EHvW9Y6q5nVFLGFHAWwfppsK.KwtLtHBGR+DI3bbH.G+Hpo6tsfeNCKG61qaczGtimZryx7TicLYkSkxHjNE3x0F6e1y1s8tOYYXepFM37FRvRJA.8pE72SgO5H4FcRCqkDKQSwBfXL.HUFBFiDVErE9bsNo1eO3USlneUyxdigjs+bNYcTDks+1MUL4H7U6qeIfLDmDJ0v29d2.QXiFsUzOCUzP16f8gouylSoqTlxBUD3LAEhqqpilUGwG7W0LrWUrCYgTvCg3OaFFNHvX9VPdsUcjpWok4TiU.XVMSOdt520EoELIsBZrwz3tFgCC4W1F9d.rZbLX7VsCova0Q+BeJruvOfNQfGMhxFs0c6bLdJoKqmf.sftpJ920H.aSiA3sknFeUlZ7UKnVSjKVF.XRYWQQ2Z35Un9VUYawBdFM1oQCzIjgpxDF4ml5vxLiwSo.sDc4XBCMimfhIgDeIXzD9jjInHBKA10YQOdFOIljgeUmuzFYJTLgBsipR6PGhLRb8UfKIPownREL8AXDl4Q.5rJKGJ3Q5lQpwFo6h1z7o2ZMm.6SjgKqbluNmuQ8EILlj617PJfm.ye0UccX4bsi9GsI4i6BEhuGlpOkSM4Q1PVL.u85OGhptpwZ6BK5n3J0fcERc7nLBRskXUsCz9zonugBhdPWguLLfT7H8aErfJfF.aOEFL1B0Gn75mDpl4qpJwDVLURmRkyRKXCvvNlHXxddMTfYiHlAPMOOfFKUGdBvgb27NHoxa89CLKvl833rPq4Ai+X0PqQCDrwXwvI2eovODVmj644AQCzddtdZr3ttn.WUJBUbL0tzcGhTMa3GEftfLCANeLIL.E.5S4.nzBwCw+65kE.5xvRxz6iJo2CSivUW4TheZIw.rwfKrxdSWO8p4+dbJLZJYT1sNDhBc0arpWXOinoSOxkKLwKmUB9891D9APqOX0vwb1cl+S4yFhrS9ZDBhNS5FEQBn.uMbV0TS0pMTnfTYpdey70FEDYhfkswjZ614akwYuhKIulUsV4qK6T9lx2VyvgKSUayPERDKSq5RBh6oaUYIQCHh5lhTlcvYeW7jykeXmb12rKaAC4rtLp70SHyaaRxLIdVySthhxSphR0IyRLKWzcOttU5N+pCtmZNXpTer8JYGaWch.KJbpbaa3XAVZrH+pUu+EV28H+vEO3ApUsV71Hpa0kp.v4ENuu5L8p0RlU7VeqwUT7V5UTZtrb9AFtO1tGU5Od4w6FKIdAP7+63M8BeUrOc3P3zA4A6l1cd2m6s6ViPwbXlQvZfB5U.g3UIQ8gSs3SfHgAzjX0cf2PwqLs8TsUHSeBKvK6BxoJapZWJUYyLkVQXeA+ioqAntR4Wnk.wDSeYcG6yTsQMyXhp3NBtm6G88U.w1Pju7dryZ2iVqcO1cs6wdqcOdxZ2ieds6wSumdn9mJbThjGYlVXY8eTFlgnE

Christoph Hart

The problem is that you're using the normalised value in the paint callback, so while the actual value is restored correctly, you're simply not painting it - it will not restore the complete object, but just the value passed in setValue. The other data should be either constant or derived from this value.

There are a few other issues with the example:

use local control = ... instead of var
Why did you use a global variable for the paint callback? Just handle it like the event callback. In general I advice to use globalvariables only when necessary.

d.healey

Aha I see, so I'll have to convert the value. What's the advantage of using local, is it just for encapsulation?

I'm using global because in my project that the function is taken from I'm calling the function from within other namespaces and it wouldn't work unless I set it to global, but actually I had to move the position of the functions to before the other namespaces anyway so I think I could set them to const var now instead of global and it should work.

d.healey

Seems to all be working now, thanks for your help. Here's the latest version for anyone interested.

HiseSnippet 1599.3ocsW01aaaCDVNMZXxadXcXec.r9CCxaN9k3zr1DDzl5T2YrkV24tfNTLzQKQayEIRCJJ63Fj+y6ev1QRIK4WRPcAlfih38B4cO2w6H6I3djnHtvpvW7l4SHVE9R69yYxwsGioLqtmYU3qrOGGIIBjgzylOAGEQ7sJT3duPQnfytV5m+4IOCGfYdjLRVVWvodjekFRkYT+qm9KzffNXexang4j9fm10iyZyC3wf8bO6FVSvdWhGQdIVI1N1VSojYQVEZX2Z+ZhKaN3CmVS8Ls1qwQu9rZ21ikWrPPXxK.0sJXW3egmB1O2mJ4h9Rrj.y4tOi6Ou+X9LlYoufFQGDPTCZZ0GrIC4tL.JFh8H4D0p8XZfeuTnLxBlsdY.68L.62ZeN0mtfdF.+0ZFnLMxCwE14tLyl2lY1gG3qlfaw7Jjy710Xd22tumfNQlwQYaeSB0aw5LLs146JZ2lCHCSVKDeIoi.Fr.obOrQipn8aznxwkJVpX858.OWhD7XIkQJUDh4QRzTr.cIiOvv7DzvXlmjxYtipfpW+EA7A3.zj7ZhXDheDRxQi3nAjgbAQOCHOAAqTsTwqKUzQNlFUaDQ5Vlvv.T4WtB5jSPRQLA8DznZQDoIkyswUc5b5om9vG2rB5nU3bZiDNfO3Lp1PHA94AAzIQD220rJB9ksNyn9xwkqrWq7DGSniFKUT+yj4X4Etk9oxwHvaOCKtD8BAYtVNeAd1m7ZUE0x.6NJ.lwEg3.5GH9WfC.++DjapVZBtUP6kadBorxU.3OSJfF9pxaRJkOoMWAWkp5t5R8Cnl0NnE7uywxw050sJ5cq4E02eSdQ88MHFL8HjFd3xsNt93GeP6CNbSw0DNZf+2H9aH7BYusf+dD7SaI2nAz7osC.jzj7xHAtfrvuq0N0QOD9z3I5O0Yv+lIA9nE46UQ.HdzdMUaT..9H8G9jg33.Sf4nF2.VX85sUo1lzbydoNXOn5v7EaWJUjxBTaNRIjyttpJZdUDeveWwryHf6A6o.+PJ3AfGjtEF66aTnL3YkqhT5kjDkHrBBSiZ5Yrl9acXZIQRhgFYLCVWHbP.eVa38.nbeDHb41AT3qpnelOEZ778nyD3QinrQkWW4H7TRWVOAAFAppB+qKjJE0XCvWafMjSmvFe0Rr8wRbs7AB.lTxkmzJSWubQXWkr4C4oIxN0qiNiLTEnvHuDWGJhMFOkBIlnYiILzbdLJhDP7jfPS3ShmfBIrXng1xq3473HRJ94tnvIYJDLgPsiJV6PGhLTp4o.WhuhigkxX5CvHr2i.IzJubnfGpGFplajVEsn5ccZTQy4LnQTJtrRkDsmdi5EIHhjsXYFhOOF12pi0Ziw4ZG8+zhjsPKA+O.1hOkSMVe5TlXVQoq8l00XQoBKH53R2vPhOE1SEL2cYA7FiYiH9Knpckj2JOBkyQfzyDOvHK.nP7vKNPsYUAiQDVDURmRkySP3AXnGJB1elA5B0BZl.UYEeZjTcbJ.ZyVl2BkdyF8GGapIl933bqixAsIoARQfJ7oZu1cHRMrtWnO5RxbDMBpYE3i7A9I.MJAaxYUK9rN5vZMxfIz5Kqt4CYVZphtGf1ccu0Dpebw7Wc0lMKQP0ORWa72iHZ5InIksxwEfCHfzMmTUEWxBQ2wPEfsvxevZY42YdXpdUN14SL0y.oNYodpW2rnJhfHiErzR3pVSKJ6yYujKIuh4Vo30EcJdSwU4Lb3lX01LUADwl3pNut3NTykEGNfHpZBAoxAGCc4CwV7i6Prdl9Q4Djy5xnxWMgrXrwISozvZgykmTlSkmp1Y1fXYjV+jyVI8HUmgNQbPTo9DzkROAsp2oEENfrsMz.0RiEvsb9rz6DYs9oug6.v8UkKV9hApKXkv.v4kN5s530pZJyyeArs31BM13sEZtIe9izbuucOpza7ls2c1f8Bf3+21axcuJY+7gCg9nYF6t1cd6m5Es1BSwz1eDTuSPuBRHdYbXen+tGArDFjlDotN5Np7Jy3FpwJjoOg42H8tpILapFWHgYyTlVgXOA+8I0.T2t6y0T.ahou2rCbAdXLpYZlnxtCgqb9dOOEPrGX4aVi82ZMZs0ZbvVqwC2ZMNbq03m1ZMdzcng598mFK4glsEVV+WhWE+5

Christoph Hart

I've took a look at the code and made a few adjustments according to a few best practices (this is basically how I write all my custom panels):

No need to define the paint function outside the factory method.
Add the name as parameter (this is important as soon as you want to duplicate the control).
change the name to createXXX. Then you need this parameter order: (name, x, y, ...). This trick allows the interface designer to recognise it as factory function and allow moving around the control - click and drag it in edit mode and note how the x and y position get updated. If you duplicate the control, it will just copy the line (and even copy your object argument). This makes building interfaces extremely convenient.
Some minor coding style suggestions which save you typing and makes things a bit more clear (I left the old code in there so you can see the difference)
.
This is the updated code for the knob:

/** Creates a vectorized knob. */
inline function createVectorKnob(name, x, y, obj)
{
	local control = Content.addPanel(name, x, y);

	control.set("width", obj.width);
	control.set("height", obj.height);
	control.set("allowCallbacks", "Clicks, Hover & Dragging");
	control.set("saveInPreset", true);
	control.set("min", obj.min);
	control.set("max", obj.max);
	control.data.defaultValue = obj.defaultValue;
	
	control.setPaintRoutine(function(g)
	{
		// this.get("enabled") == true ? g.setColour(0xFFAAA591) : g.setColour(0xA0AAA591);
                // Better:
                g.setColour(this.get("enabled") ? 0xFFAAA591 : 0xA0AAA59);

		// g.fillEllipse([1, 1, this.get("width")-3, this.get("height")-3]);
                // Better:
         	g.fillEllipse([1, 1, this.getWidth()-3, this.getHeight()-3]);
		g.setColour(0xFF333333);  //Dark Grey
		g.drawEllipse([1, 1, this.get("width")-3, this.get("height")-3], 3);

		var normalizedValue = (this.getValue() - this.get("min")) / (this.get("max") - this.get("min"));
	
		g.rotate(normalizedValue * 1.43 * Math.PI, [this.get("width")/2, this.get("height")/2]);
		
		//Dot
		this.get("enabled") == true ? g.setColour(0xFF994C46) : g.setColour(0xA0994C46);  //Red
		g.fillEllipse([10, 30, 8, 8]);
	});
		
	// Define a callback behaviour when you select a popup menu...
	control.setMouseCallback(function(event)
	{
		if (event.clicked)
		{
			// Save the value from the mouse click
			this.data.mouseDownValue = this.getValue();
		}
		else
		{
			if (event.doubleClick)
			{	
				if (this.data.defaultValue !== void)
				{
					this.setValue(this.data.defaultValue);
					this.repaintImmediately();
					this.changed();
				}
			}
			else if (event.drag)
			{
				// Calculate the sensitivity value based on the value range
				var distance = event.dragX - event.dragY;
            		            		           	
				if (event.ctrlDown) //If ctrl/cmd key is held down
				{ 
					distance = distance / 6.0;
				}
            	
				var newValue = Math.range(this.data.mouseDownValue + distance, this.get("min"), this.get("max")); //Use this value in paint routine for rotation           	
            	
            	if (newValue != this.getValue())
				{
					this.setValue(newValue);	
					this.repaintImmediately();
					this.changed();
				}	
			}
		}
	});
		
	return control;
}

const var knb = createVectorKnob("knb", 0, 0, {width:50, height:50, min:-100, max:100, defaultValue:0});

But the idea with the object argument is really nice - I'll think I adapt this from now on :)

d.healey

Thanks Christoph. I was passing the paint routine as a separate function so that the knob creation could be generic and could be used for many different knob designs depending on the paint routine that is passed.

Yeah I like passing an object into inline functions to get around the 5 parameter limit :)

Christoph Hart

Ah I see. You can still override the paint routine with another one by call setPaintRoutine again but this way you have a default appearance "in the box".

d.healey

That's a good idea, and it will offer a working example too. I shall do it that way.

Graphics Functions

32

1.8k

10.3k

90.0k