Graphics Functions



  • 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...



  • 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.



  • 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
    


  • 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:

    1. use local control = ... instead of var
    2. 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.


  • 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.



  • 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
    


  • 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):

    1. No need to define the paint function outside the factory method.
    2. Add the name as parameter (this is important as soon as you want to duplicate the control).
    3. 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.
    4. 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 🙂



  • 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 🙂



  • 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".



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


Log in to reply
 

13
Online

572
Users

2.2k
Topics

17.4k
Posts