LAF dropshadow and scale? + FREE Knob Snippet

Straticah

I have two questions :) How can i create a drop shadow below my circle panel?
And is it possible to create scales around the knobs using laf? see my example.

HiseSnippet 1793.3ocsXs0aaaCElJMps1acnCXOrG1CDFX.NoNtR1IoqnncN2bWPZSyh6kUDz0QKQayFYRCI5zjsUf8SXuu8yXOrG2iCE6Gy19CjcHkjEkuzzks5GTBOWH+9NmCIOR6EJ7nQQhPjUgGdx.Jx58sacBW1aidDFGs8lfb6cDsw2asln0OY.IJh5irrtvcUpsJLOR+6O+70IADtGMSDB8XAyidOVelLS5dM1gEDzj3SeHqug0K2XaOAeCQfXH.kKX6fFP7NjzktKQY1b1HqKtkOSJBaIIRZDxZ90E9mzpm3k7X6eLKh0NfpF3hZASTr3lh.eEhURQaziE3uWJkiPvrrWV.3BwAfOx99Le1H4YAhqpUfy7vLdXMWd3cgbvy0DdNFvaJPxx.RyGCoOztkWHafLSiBOum81bIMrCAB6lPI1Vzb+7ks2P.VvkU6SNj1LDFLxixq53TAuriyB2pn520uN9dBORfJQWDREQRbnPRBO44AjN3ai2h2kwoU8Bo.+tafnMIHdctmPb3Zb+lTZPY8bAyDtU.ymFFULaJpFR6xhfEu4PtmjI3kK4GRd49ZChMuTEbmTkcqfEsewBE+tTvsVnGdGtncwBrN3xftpR5wR7suMtDn54pxwR3u+6wSnYyP1Qzoq5Ijv9xdkVnHF98c5mGQBw6.zMMvEy28HxdJxkZw.2yzjPBuKErRsn8IGiWJ9+X7XSFYWDve4C5zIhB3BWq5xYSAIz6g8XdGxgTNnyopS8bJeByW1CT3V0Al9ZvyEy4SrwIq0.2pdATRnNGUPMCTt+n0cISXbsj4xT1hZ3eDIXHcWQXeR.6ao9iQEPKLUkJAKvHTlDAHPLJC6ubpRCEC49pXPlHE6HGT+YFKjtPkzlFfeHjJKVnaU.dwmanqJXRZ+3gt.SiU2DxTkK8fiOoKki2m1cX.QUr4txB2BqLQUHtV.qKm5qlzQUWPM6f.0dEc0B3QoRKTAe.4.mmUQiqkHGTS+u0RD.+ojGTTDR8KAStBuELdpdLNfa2MdPRsCjmH99v5U9fb4+qiqUAOUIwkAWKmxYp..3R4RrUfj8JKjjxxkNG.UzqAYHHG.fpKUttJAEUNMyAjdB+NCxEGp0aUF3VYzJTAaLmiUDmtD5G67NO1XFZVRsk6yfHT1NkqoEoyrEKNqn0NyLXgG4mNPc2PhOCpVZBWIV9fxNG2rYssZ1bqaBUYtpimcpdiEyhM0eVEsuZCuwpJSWPk9bVzL7ccb8UUmG3pbe0EM79YSlE14sOITbzNP0izCg6INhFld3pW.XO0O87zoVQn1WkVST3bBGbZQwqLNWHdpTW3HokGkwfsq4CN0xOwffrvxrQZhAcfD09pDK0eepmDNhOfVd7EH4n9LnuDTy3NwxNgYNUqcyUxalVpS8JSXoCTKfqmqhBxPuBd7pj6yS9kdgJVv2UHoOfWVcmZghPjabUc5LUcpq4BEAAzvopV0FW3axwx7g8aSCqf0WdLxPn2l7MLYO6FlL6myK9VWCCE7s4L4CFP4ypKOTxU0PyUykfJvTot0pOHo0p3VPPLnCJa6GCFngaRCpeyuV8QMPuEtdIaUOJt4bF9UtA5QauIQRTs2k.F.fCngRlh6VaROB5UNtYuB1aRiNTJF.S2Fh9CDbEzsJFunWIsUPBmFnWyKZuNzpL53rk6oMNwbvKUm0Azx5GsPndTV2dR0neGT1VDBPee3XngQYtb0FwxaAWxa1Pe1cqfzK9Ie7GeZdo0LEiLv96MKreYa8+6ZhdlA5+stonOU61MRYPlj73p2W+jogKPhV7zo7xSkxkZjcHPxbfFmaEOCtUyfaMdgYlgMN2tyDb6NiwsTRLF21emu3eM29yO2jEW4L1ML67iJBodWjQ8ZiFUuUCYVu0DFAcBaVYFMrSGFHYda7mNNm9oS+f+ZxhtW+5WqYpOsCYXf7w41m8CeYizFNTHZkZNN2r9p2bk+U0hKav0eKzjqsGOe8zIxWO8sqV7RW5RZwSu5ZZYK2FSO2tcCSt89mA2palGkFbqAcbts6Dba2ySsXdVfmAKtiQdqvEO8z3CPxGc96+3WvyXu2a3f3+S4x3R6h1oufIxDkfEOZx5ySS.+XE5nIem9qZeegO7lHx7ehA05jn.tFM260qd2cdDSdh4l3+29tCusP7Cs2iI85McLN2Tvn5V22AXL4q0bE6s5zA5EKCfya27qd27oYPPueRFu68IxP0wV16NreKHw6QgUmC6uTswXMmpFMdriZrJBzBZHUOPUejnzUM1JQoapRnxwKT7bu3dMTeOnKqk.Xhq+TXEruuZLdTSF11P+fn9Le1y87TzeIWDZ59T6b3S8ygOKeN7YkygOqdN74FmCe9r2nOpuJ3ZCkh9waG.A6sktYOKqs3DnxRWEh9G.LloZF

Feel free to share my knob that is a modification from @orange s LAF collection. If i am done with this i will share the result in the collection aswell :)
Any tips and tricks are appreciated.

Christoph Hart

@Straticah The most sane approach to this would be a monochromatic path with the scale lines that you import and use Path.loadFromData(). You can compute the scale but there's quite a bit of trigonometry involved.

Matt_SF

@Straticah You have 2 options here : either 1) draw everything in the LAF function or 2) draw each parts in different panels. It's your choice but with option 2, you'll quickly get lost when building big GUIs .

I changed some things in your original snippet : if you're painting everything in one LAF function you have to leave room for the shadow and the scales.

I did it quickly, there should be room for further improvements.

HiseSnippet 2489.3oc6Yr1aaibjxwL4jxcEIn8yEKDPQkcjjondDmllbxx1JmgcbbsxkzTC2zUjqj1ZJtpjT1wMW.xOp9Cn+.5+jh.bn.8yoyr7snjegK.EEU1lV6ryNumYmc4ANBClqqvQIW9Wd9DlRtuVs241di1bDkaqryV.b0cE8I6sQWkNmOg55xLUxk6VOCmNW9kUje9wusC0hZavhAon7JA2fsGeL2KF5As2kaY0kZxdIebBrazdGCg8lBKwTPTtkplxDpwIzgr8oHZKopj61aax8DN87ndLWkbK2QXdduQhyr8w+UbWdeKFNnlROfP9f6JrLQIFgpr4Htk4AgprqBPkChM.2x2.7KTeN2jGAO1PbO4Dj3Ujzdjaozh2sRId0RJdZIDu4HR4RHRK6KR2WsmgCehW7Ln7bW0cr8XNCnfYOon3iqxR0+4paJ.Lr8pNldBqqCLHZEkZooUlzPSakGWnvZqQp45QDS73BaxugroCCzBBkLgZyrHmMhaLh.9GOvT3R7FwHtinlhyJ.vf0cJ0gLw1pmDF4IjPtNj4soX7DgMLnTwHLJhrLZTUWl2A.c8NTL0iayJMXpsAJGkFtRg2WH+ZqAjQxSov7qcITP5JjGYJEXl2HtKxo8DFTqNho1ltkpgZUdbsFgZhE8blCwSPl5xHCoScc4TaReqoNDPkSnR4GVsOaH2dObAkFPsbYHwFhxoe7YIs2AFO4G+YF.gzaaYwm3xJQ8AExgN.CJUqU0.LY1l9zEF9AzLLiEDTAl6EZAkXDYAki9RXAkxKh.5OoGoebvvQxg0ggyZR51cql3O9V9gUcDXlPomS8FU0SbH0DrFtkpTqg1JkIGc1Z5kIiVS+3XK3gHmYlGxL7n1CsXkPjpTqLAhSAjqocL7nZfmcfvoDGjEsGS3jeKLI7+G7fUJjGz2Exb80yv5qOu+PgEqcqe8zMspMKSfeA9z7BTtlWIkqY0VWOsa9b+C9wkPEAY3.V2OQL5t1h90VX7obVL1LdAuRXsPzg4JFvqWBAmPLoULSIgAwjGuR.8P81472ZQGjfj9I3xksmPbxF1lcYLKL+RJMXHZlIiIDfFHEWNRnLR5YwMYNtEhmopCTovEpn1MLiqnoC8rCkH3idwxj3zwxDQ++LlSFm7A.phoiWV5lrZFwjM.Rvk4xl7ACXNfIPlM6RDCjfOAzZ+0BECfJdOgbTsVf2E96rJ0wXC3YH4411LmNBGPNQu5Q5Mfv8FHlMVGwrw5yAScIl.8zkzrojlMinoa3t.R9pqg3fzbD7TV1.Tinpx6EVUtOLB1db1BzX4yqVE4tcqog+jshru.ckKKiB3VfSzeOAYA1+eot+GsT20y4ICciBMvDMXqzNOKH53YNvRgzwtfTT5HLsl6wF6Gy.7URHMYAfDSnGLwniyF2JyeC6iIluxLQxv.tErU9bj.LL0uIk.dfoqHvFq2nSyHFWQu0b3cxBCYEArWw9xIWHmap2rSqlyvY8N00p+vrbFqYNONC8mVUKK60sMuH1OeKrluHz7gM2t05yX0W.+0i4uuueCGC4NfExyGPJg7wi8NOxSdBoHL0awiDUj7C+.IyLa4vOkM+odM0Yr2nhqTf.edu7obi1Lawc.Dfh0mBwXRsKEEGHEfErGyX56HU7+F21GkH7bgsq7dwfAfoDvVuZiXRPcLdIz8+I1vwNvzzpZ5ol70bSObSJHkBHuN7b0TqwG4.dMoVUCKFMnLKRAnvaDeqjTLdP.sRBaUo3eJ0ZJaegyXpE+uxLmQUfYARUrHvfHq.VR.0qXAOda0PHhPoPqZs.Rhd78n8gy+7RvgkdOfYRui1Npq.ar4Eu67gLaxgrgSsnXG.0ZrxiIgQZaXwGZyLQhFECAMRLwBOUlLl.VQwhX0G5QX0XTRqfMETlD9r9wv+JZ.tdGlIzDku.m3I9XVAt+P+AAQHf2fZZB7qzQo7xqQzAyuuAoL4hmx28+fzXUI.iU0uJ3.JRkTtYndQUbq0fHmDN2IP78FPjN3l.gGZlL3vJmkA6KQ08cDxzkIPUlP5VNpaLvLOSfbHKjO18+ZrbIMbUvzy0A6WbV0CjfjwGEJrHa4tILkIL.A1pBwFzz0YkMBouc2ta+nUv9FvJrUe3pw1v5GWVtVIhOrEh5JnyUa0jl40H0ag0NvNPp1Z0Dq93rdqcudNqvxziDmB6YFT90vBvhYFVwM+7hWvbxvHl7gnbckBRf7+gXKef9DzyQjeBR0SaRzSSW.PrwXwRZ.ByuOnYnWvlAwRNzjjVsLrMCZZU0eTyznIgpUubFL0fH.RcYw9O.wQ9W3g7Szg6D16K7Xuvtj7lJJ.lpYmZvf4NGtymivxBaZeNSi2tnyEsvR1SG2m4TlH2OIBQkbKm9d7TW783k7ZFM72HNAhB6cr4duXBydQW9nRvt2JJ4VJPp.T8j232OK3F+7ODoB2DjDU3npJRwM3dS+3+79eWakqvRuip7vvoV7e+W9u60V462YKpGEu0w.gADvILGONp641hcJ2f4eGj4U2h4dhmXB70nCwqj6t9L8aBugR7Flj771pcnFmn7t3638MsOO4fyvpaw.Nu8HFe3nD2ULuseWdXO4Scigeu.38f8+SdeywaHCPu8m9zm9bZn5IAeZneL2sTtJpyWoJ+dsjJzVIUH6YUncxnP6zNsHN5O954Ih.DI34q8Mlq1Wrcbgf.Z3+IgtU3RzM8j51NIzs1hY0smlQ2d5L5VnRLitc3te20V29wuMoV7MWRBxhB3dpzBg2ZdTG4Jo0pO96lUq.HPeyIIn6zAC3.jkUI+pY0s6bm674rwggNYS1.5TKuWkHETxfvVSPIqotl1ip25QMS42t8h7a2UM5VzSn1e78Icc+oYbcs+CYTxiZecx.ZjjUzKLC3MYhRdyUKCHzRN+X54EiTaA0J1Yd51ETgLgt8WRG8bEzM+.rBpgGFTI12Jk9uewQGyDls.6QRc4quD+T8jYBlICIlLqtreFcY+eJxleZ6j5+m+ruJj1m9u9G+Mxh7ojT9N0KNKPdQcKJK.Jrj0aoj88rcO0mKLgyr4k909g9xfIfdHR8t1v2mlsK267jkq9I6cAdUEw6qd.2yXz7kwkliLhsb7EPFCdCpei51CF.cdFKfKq182+k40kp3+RuF9bpmCVXVc+oi6AAWFLf61PLB1CWtkvbG+wZ3XzBzCZ+VN.hL+bvj0vw4BlrV3jP1ogi3sF9MZgui1uRBAjIa4qmNu5ywwjnNrTUgteUFyM4u0v.U+J0TTl+ZzuAqo9MXMMtAqo4MXMstAq4g2f0r9EtF7M0uwTOwX+zA.vAaK6zMWtssw2zfLJT4+X7qJHK

Matt_SF

@Christoph-Hart I remember rendering the scales with a path. It didn't work out as expected (just an arc but no scales), but I could have done it wrong.

Christoph Hart

@Matt_SF Yes it's easy to mess up the aspect ratio and then you'll get a scaled egg.

I found that function to be pretty useful, you give it the dimensions of a path (using Path.getBounds()) and a target Rectangle and it returns a rectangle that fits directly in the target area.

/** returns a copy of the `area` rectangle with the same aspect ratio 
as the `otherArea` rectangle. 
> This is useful in order to fit a path into a given rectangle without skewing its aspect ratio.
*/
inline function withAspectRatioLike(area, otherArea)
{
	local ar = otherArea[3] / otherArea[2];
	
	local w = area[2];
	local h = area[2] * ar;
	
	local x = area[0];
	local y = area[1] + Math.abs(h - ar[3]) / 2.0;
	
	if(ar > 1.0)
	{
		w = area[3] / ar;
		h = area[3];
		x = area[0] + Math.abs(w - area[2]) / 2.0;
		y = area[1];
	}
	else
	{
		w = area[2];
		h = area[2] * ar;
		x = area[0];
		y = area[1] + Math.abs(h - area[3]) / 2.0;
	}
	
	return [x, y, w, h];
}

Straticah

@Matt_SF wow that is sick! great job, looks like a lot of work getting it to align perfectly looks great!
@Christoph-Hart thats true, dont know how to use this yet since i am a beginner but i can work with what i have now and explore this in the future thank you both :)

Matt_SF

@Christoph-Hart Ah, awseome ! Thanks

Matt_SF

@Straticah said in LAF dropshadow and scale? + FREE Knob Snippet:

@Matt_SF wow that is sick! great job, looks like a lot of work getting it to align perfectly looks great!

Haha yes, I had to fiddle around with the values but once you got it...

LAF dropshadow and scale? + FREE Knob Snippet

39

1.8k

12.1k

105.8k