Step knob using vectorized panel

Hello everyone.
Wanted to recreate this steps size knob using vector base design.
I tried to implement it, but got stuck in the drag callback.
I'm attaching the snippet to maybe see where something can be corrected.I'm also taking the change to ask help for the two buttons and the screen since I wanna do that as well, and not ask the question later on maybe.
HiseSnippet 1216.3ocsW80aiTCD2aa2J1BEwIwi7fUdZiTHMo85AhJDGMskKb8OQWNJHgPmb10Iwp6ZG40aZCU86GeO3K.eCfw16lc2lboGQfevM9mmY7OO63Yl1SJBnIIBIxw6sylPQNeha+Yb03NiILNp6IHmO08BRhhJwVnimMgjjPCQNNa9CZ.GusPlwe8cGShH7.ZADBcsfEPOmEyTEn8d4qYQQmQBoukEWR5m+xtABdGQjHE3yltsPSHA2PFQujnEaCWjy1mFxTBYeEQQSPNacrHbV+wha4V4ulkvFDQ0KZi5CFxBelHJTyXMJpyXVTXu76cBBrRuBuvlVuvm6dAKjMGuva7YlMvEZT1e3rQU5sYE5098QukPImRTZKKkdla+.IahpXGMe9X2tb3iyPB31KSEqrnM9SW2NBPBtpYL4F5YRXwbM7eQqVMvvT8i1AFLdDiSwCS4AJlfi6SidsOG78Mv20.Oq9N2uiWjHfDgGJAT72hyMMILrGgSiJK8Q6fgQwTtrIT8UXBUpXzDfOw+X+qtLSQqj2al8pcKKTMtF9avsAZlgMlxFMV8HvDxTZWdOIErsYq7MHQQha6.yCf.oD8V05Dwfe1.+JwTHllvCwmHIiFw3ipYUxL+PY5qFyRZFRTjlwfR1MLd.ycAhLTuQjp.WmetqyeT8x2joDId.3tLFZDUct1IdrHkGl3eX1IYDhvGEo8qsxvF0TJzwR9WPTiapDugDxH7D36V8F3eM2b+r1O4WGuGd+FyOiWYbTVzeCWetAAJaeg4a+SRyYTsWpPhPI41SihXSRn9CvMvGVcqy0WzUdzk.0p2.ePqRVwNyF5qjoTqaxCBrV488f03958zWXuUbi89O7J+vhwTUChtPjlPyiSKhhnSgGL4QRFBAtMCXy.cXLMrtENebe0k5wd6g0OO.lRwSIQov6a3MmYYr9TwFKsndEA8gP9qqMZVDAaV6m6lxGOTcYNkwYbFbkixHLPTuEeZoO.HnHypYVKaNyCV0AVLIopTI25QOZIB7XnGfLdPwlDEV+tSmoiKzOQM47pkstVCSVF79lLjyyKJ3WJTzq39lLh6.ece7VCGtz8zo.khnHpboaqqFJWkh97z3ATYC6Gx4BBkHpV2Y6Or5NA1LxkDTv6xYpqlPyVu5BmnrT555UYLDDUYpVsad0JcYADCrgmalWEYXe4lDP+T2SfXfb6.lrnBAfcBcJzDgsJnm6IzjaThIFYimH3ZB3r6Sep2gbbcBgCal9G+A7iABYHU1m86UHiEUm4IMoLNSQiy6Mwa6EQ2uLrhdmZQgMEzz.gY.1pYkQJWJSi6jgWsRFx4Kbe+ExfNrVn6AnuEQXZDQUsYFcGbYa.QZU5fP2k.OgolUtCu+Ec3zZkc37gRwm41ioBFubNtwR3HDD8+AGy5KbW2SGNjFnJH3Vtm8KqaSfOwwa6pXDTKTxzQuWlF2GhnBnvoyg.7Dcf7F52g10szq0df9TdnYweCirMaqW6jsY67MQwj.o3cA1Wu5NO+HCBvItooaOn6eXMtc9qVW2VMaghglfeWPf95+kPpgkqy9qgNGrF5770PmCWCcdwZnyWsF570qTG8++w2mpDw1mC.PuSMYOcbNkSfHKSTH5e.yrSoo.

@Sawer you wrote
Clicks, Hover and Dragging
but it isClicks, Hover & Dragging
, subtle difference but annoying to find 
@ustk Ok, should I just set to
dragging
then?
But then how can I move forward ?
Thanks for the suggestion 
@Sawer said in Step knob using vectorized panel:
@ustk Ok, should I just set to
dragging
then?No, you should use Look and Feel. Paint routines for sliders is 2020 technology.

@Sawer non you've chosen the right callback, just it should be "&", not "and"
I'm working on a snippet.. 
@dhealey said in Step knob using vectorized panel:
No, you should use Look and Feel. Paint routines for sliders is 2020 technology.
Well in this case you are right, but I have plenty of examples where you still need paint routines. Essentially every time you want a more complex behaviour that involves storing an object instead of a simple value.

@Sawer here you go
HiseSnippet 1302.3ocsW80aaaCDmJIJXxacXEXOsmH7CCxoNN1oIYCyXXcwIY0qMIF0cYoXXnfQh1lHRjFhTNwqHe+1Gm8MX6HojkriSagwp.Ls48O9i2c5ty8RDAToTjfb7d8zwTjyW31eJWMpyHBii5dDx4KcOkHUzDrkzgSGSjRZHxwY8eQSvwaCj44e9oCIQDd.sfDBcgfEPeIKloJn16YufEEcBIj9ZVbIo26YcCD7NhHQJfm0cahFSBtlLjdFQK1ZtHmMONjoDI8UDEUhb13PQ3z9iD2vsxeASxtJhp2zB0GLjk7IhnPMh0TQcFwhB6keukHvJ8J7Bqa8Bes6orP1L5Ediuxv.WnQY+gyZyCu0mCdsJCulkf2RfjSIHsgERO1sePBarpfiFOetaWNDbFP.2dYnXkEsV2Mc6H.I3pFwjqomj.alog+AMaVGCK0ZWAdX7HFmhGjxCTLAG2mF8BeN36qiusNdZsJuqhWjHfDgGj.Tw+HN2zjvvdDNMprzsqfgGyRtXRpF8ioIJFUBPI9W6e9YY5Xk7clUup2vBUiph+AbK.gYzFQYCGoVfnjLg1k2KgB11vJmAIJRbSGX8JHGRpYUsSDC9Yc7yESfz4uEeTBY3PFeXUiJ2UFwlKnAuPfW8JQpB7L94dF+g0xPqm2PsT1bVe6WxFSo5CW6TMXYXivDxMGGEwFKo9+wtM1uN1rnFwjMFRU+t915Wa6Rjdt4xpo8m0w6mAMO65DRBlvGFoi.mRTiZzq6N6g2dltWPhRo901Jm2AsKzSGguLWu.gz2XnZKHwaxkPx3yKQ4azK09jEtC6raV.vyCVuGS7SxPvV3OJEycCeHtvs2h6sVlpybfyEimOPepHURyyWJhzzIPh6rns9K1.rkZi.c9DMzxsH6M+Ymcv5rS.PT7DcHANLQrYar9vvF8mSEC1CIJRiPnngINBQhEhqsmoxcVDk+rH9fXDjn5kmoZhtgLoRWiFLaIotD7eE6dSM7N38a1NWGN8F3nyAxBv6I1DkDQJOzO250L5NSOqDPdD02RqNFp67TqT5OFCKyugVYlwcliIXj1DgZOfm85euXZBUklvsQ01UtSWVCZoHUX88PWOiKtB.joxV0r8UqaJnf2MqN3hkAE7LA0kwRDQ9Ah3wBN3spaiqlBi.SoHh1XbBTvv2R2ffLkskILFXVV1hVVe7kN1yDJ54bei4q.W1EYMXvR4kYrHZxRYq64l79TzmmFeEMo7kSKHzHZ9tatOb2sxMeCrE+KInf2kyTmOlxenVxnrNF5NgYnBDUY5C9n79f5FNHFzsyyMyMhLHt73Gneq6QP9Ztc.SVz.BncDcBLdhs+pm6QT40JwXirYQX339vm5sfuvIDNro5e72vOtRjDRS5y9q4.ik5qHgrTYY5LEMNepGuMuO0cKSVQuUcegM8K0DByHXaVVlR4NkZ5NYzmuQIx4aben9jvja2apDXdHQXZDQM+PR5ICyX.4VyMYhd5CtjolVdxw+2lb5iEhO1sGSELZ4XbskfQHE5SAFyl27QtGOX.MPU.vMbO4xOMCWhriyLDpJmvz4tmkF2GxmBnvoygza861NqoeKztuodu1CzmxCMa9W3IiYK8dmLlsxYhhIAIh2FXe2UOQ6mYn.XhaFl2C9WEvdbq72Ycca1nIJFFt9sAA5q+1PggkqytqfNOcEzYuUPm8WAcNXEz46VAc992qN5+WyOmpDw1WG.B8N1T6zw4XNAxrLYgn+Cvedi8p
But I agree with @dhealey, this one would have been easier using LAF


@ustk Outstanding man, your problem solving is fantastic.
What's your thought process on creating this. Especially all the mathematical expression? 
The knob will have 3 different colours. Is it possible in Laf?
Yes, you get all the colour properties of the knob component and you can hardcode any extras that you need.

@Sawer here's a LAF solution: (the knob's range is 03 with 1 increment)
laf.registerFunction("drawRotarySlider", function(g, obj) { var a = obj.area; var half = a[2]/2; g.setColour(obj.itemColour2); g.drawEllipse([2.5, 2.5, a[2]5, a[3]5], 5); var angle = Math.PI/4  obj.value * Math.PI/6; var lineX = Math.cos(angle); var lineY = Math.sin(angle); g.drawLine(half, half + lineX * half, half, half  lineY * half, 5); });
Basically the process for the panel solution was to find a way to divide the usual value into 4 discrete values 0,1,2,3 for the 4 positions.
So I round the distance to get only integer numbers, and then limit the range to what you need (in your case 03).Then for the paint, well, it is a matter of trigonometry so you have to know your PI circle on the fingertips.
 Zero degree angle is on the right. So the top position of your knob example is +PI/4 (value = 0).
 Then the displacement is 90Β° in your example, so PI/2.
 You divide PI/2 by 3 (because 4 positions mean 3 slices), giving PI/6.
 Substract this value from the starting pos (because going clockwise in the PI circle is diminishing the angle).
Then compute your X and Y along the circle (cos & sin). The PI circle is 1 radius (half diameter), so multiply X & Y by half the diameter of the panel to get the pixel coordinates. Draw the line from centre to coordinates

@ustk Wow man! Thanks a lot.
This would work as a template for even more styled knobs. Just by knowing the concept 
@ustk You got me tripping on this lol.
Wanna ask what are the core important mathematical notation I should have in order to be more proficient in these things?
Like setting the right variables, creating the right mathematical functions?
I really like using the paint routine, but I always get stuck in these things that make me take pngβs from knobman , by that sacrificing quality (which I donβt want anymore). 
@Sawer Well, that is basic trigonometry (I say basic in a way that it is generally the first chapters in trigonometry books I imagine). You don't need advanced math/trigo for this.
But I think what you need to understand is just a lot of practice, trial and error, and time...
Take my snippet as a base, and start to modify things, see what it does.
Add more steps, change the angles, play with arcs, lines, and all the paint methods from the API... And you'll get it soon or late. Again, time and practice. It took me a while to be comfortable with all of this.
Another point is that I ALWAYS use pen and paper. We tend to forget this nowadays as technology surrounds us like it is the only answer, but big things always begin on a simple sheet of paper 
@ustk Thanks man! This is golden advice!

@ustk
Hello, I think I underestimated the complexity of what I'm trying to create.I've learned a lot with the knob snippet and revised some basic notations around trigonometry. But I underestimated the complexity of this little widget I'm creating, Specifically when trying to connect callbacks to paint routines.
I really tried my whole best and I got stuck.
I'm back here again to ask help again to look at the snippet created and see my process on what I've created so far, already knowing the final result I want to get(based on the picture in the first thread) and give me some insight or show me how you would do it.HiseSnippet 2057.3ocwYstaaajElz1zao5lEo.8W6uHLJVHmHKQI4Kov6EGeQoFw1RHJNaJLBZoHGIMHTbHHGYagTCzGk9PzGf9HUzWf1yY3vaRTxJFM6xjHk4LmKey2blYNbTm.lMILjEnnp+5I9DE0+pV2Id7gGMzh5ob5wJp+MsysB4j.iHQGNw2JLj3nnpt5KPAp5qoHd90+ygVtVd1jTQJJugQsImQGQ4oR6bvKottsrbHulNJi1aevo1LuiXtrw.dVUyTw2x98VCHWXgpshlh55m3P4rftbKNITQcsCYNS5NjciWj9ugFR64RvF0U5BNJRbKlqChXTpxQCotNchG2gJfW5jxBqFwBeo14TGZh7T13whNLRsHKentRd3sZN3Uedvq.HolARqEAouPqqc.0mm1ChmOW6TOXxouEP6YgRjtJq7aOV6HFngGu5Hq2SZE.MRrn7tllULfO1b+RkJAbeH23Zq.CepkGy3eYDa4.B+H1HelGzn7Fhd2.LI0fPh6Kmq9Xm4U2EPGg3MWKj8m2nK8mq9W5mW0iAFetJiclW81yW41SqZ+9yW298QkKUqVmSe9Esw+y.WXBojfvpFR3cfrH9qXi4TOR49i8r4TlW4AaVRW+C55vm550p8BzlyYA9Co1FmzuOwlK5YP09vplm65V17Vyutk3ABWTW8HCndmYMgDT1LUH61CcGGTtdhDhmSjRIR.T8h.KGJLBZAtu7Ul21X2HmWwvL5u2ZdbrjFMAA02y7cIN.AELj7fEXuBfpk2.WB3EgkIZWw3YKJhBmu6NMRiXqVlhmhhnSf0MyDQ9PZHNebFy1x8Pr2PXbCwELVZojewMSBM5JTIERQ65TN5qvp2LjxIYgbKFNE+JVOFmsA3yXVVhmWStE5V3z5aXT4puFA8NUL1A+NA6EFpAAjIy0YMhcVyhb1TJ2LV4cVBk2NV48lQ4h9HCAdFww3L5fg74xdSHttraRCMlibhqK0ODRMdljZpmKl2OyLiSZNiSJRqcVJs1aVsxQ.2gRE+oVstDWhXk6K8X8Joa.OQehazs3k4nVenzTC2z7+M22nVsHxCiEpsbhKArMpBHU7QbF++k5vGVdysxH5aH3zCJCV40DgtvU4+ZZHTeO7OBHzyEN2MQsbj0NXn2of3arkQ85yBAg32MMDVhguPObKWw5aXS2ys3Cq14zZaCtLNJuwxcLo7lOItuc2Oigt.8+1XCsYgkEdZyoU4aiUIj5MkJ4lBNCmMmZPWqQEoN53WyzqwSkn3IEzGLNZVn4wb2b7dZ2fGhFAOoHayLyKruT1b06h6S9Ybt64rwgjirbc6Ao.oIujqgsqyj.ieS6aDIupsK098DGY+RcLx7TqlQn00D.kD3XTXNyne.ajn4HLfFBOj2FwHxwhaU0ANwVLSCyTSMyuepM2IgU7yLnDlDEG0lrHTjB3PC4XQqfuyn2aApMs02toQMXOx8SLxibC.fX3LEHeZT5T.tKa4X2K2UIwvHUfzMR4HYhC9ZlcGXguCiGpQZko+DNxdH5FmnyzkLQloXw+vssD0Tcw3Q8HAnLQcaQMA7Teeol5xhuV7FYH+UzV1hcND.YNUFTz4zlv4zMjFU79BkJ9T3FlxtRNaSNfpXbk3HlsQcf8qDa.I2COy3Ce8ifYS1wjD8OjNGDP7QhnbFxOyxmD+wsBh7X4llQgpVMnn0CGy4LuR5W5+wQoyL9Q970ATYEVoGDHO2BRfDJlLPiB38rfFiJs+LqiiF9woGOEyOPA3hoXg+aisM9geHIE5eB0YkToPL8IexllkQNthUGpkNj4Rp5GfT7FOUhgMDiETiYlBhFdXJsnN+X9Ea7olgEqZ4rWAkuZ4AEX9LyMyy4wf3OCVeqORVOkxS46sS36hH6s9XHa3sj5Io51KAQW59JrdAkUmsX01WrQkqfCyvkxvW0a7t7LNbpVo1KAmCXp.FGQJZM7N53K0Evbku+D7xb4jJdIh6vvcm3kkQBAdWPIiHzdALxGPjtnRbmOYjiKZ0pHxHFRwv39HhY4A.eSOfEAeJpAIg6JIofX+Zv7tfwIsw8Mww4ckLltq98KrOoacw2Gsfti1KcAFV1StYunjhDEUTWK+0vr9xcML1QuUeFEYdm5Q4s8Ix1K9djTjWK.7+t7zigZBv6wQJCzymDvoHbTOlbM0lDcqN5ZGSBeOm4KzUdWB.j4hdeT7c9X4QbUnPn+KZhaSP41rWx1jrMtAKvTQUS8mgFCEkChs9Ink55YBwmMuPrtFVLX1H7UGLI6szIiPrfKNHNJoR7sBffjIZw31BqtON2DHi+t1QXRXXEiugcMrk0+v3XnfqATuAHed+fUWSd967v6Od0z38zow6O97+2g20ztzOCTOn6BgZ0Yn1pKOTejDpFs8bmrbnacM7.r4guC994G7k.3+Ifu0zZmEc+RurIle0zr2teZXO84gNMMXmt+u.uqi2QScUkYu43GqcNyYrqEO+EYi2durCXa0b2dLdCwdgT9jr2t+Gwsaatva2dYg3Wn0gxsGVLFWo.LB6v8o.ixeSfGoEcaro.bMsVu8g9C.bOgOpJhAPAmATHiRCpnqKTwfMAhtGjvEh6ouBdnSTaSrMx.cIdNhF+N7H6rN1VU1Y83NUFYYGv9N6nCSwe0gOSHAvjm3GbQW6brsQcEwArXBtYUSkQTG52YaiC+sfyAK1lFO.aZ9.rY6GfM67.rY2GfM68.r4YKzF72d54i4rQQKG.AcNQTogp5IdVPlkHKT4ODIi04M
Thanks

@Sawer Ok so you seemed a bit stuck on every part. Let's try a different approach and take the different elements separately, and don't add any other element until you get the previous one up and working. Or you will just clutter the script as well as your mind.
Some hints:
 Why do you use 2 panels for ON/OFF, when one is enough. And why do you simply use a panel when a button with LAF can do it in a much simpler way
 Same thing for UP/DOWN, 2 momentary buttons and a LAF are enough.
 For the main knob, you used the paint routine I've made, why not. But remember what @dhealey said about using a slider with a LAF instead this would be easier (even if you got that part working already, it might be easier for what comes next)
 Why do you use panels again for the piano selection where buttons and radioGroup can do it easily?
As you can see you use panels everywhere, but you don't even need one.
try to use buttons, and focus on their interactions before making any paint routine (or custom LAF in this case)make:
 a simple 4 values slider
 4 radioGroup buttons
 2 up/down buttons (momentary)
 1 on/off button
Try to connect the slider and the radioGroup buttons so they update each other (and after that with the up/down if it is what you want).
You can focus on the LAF only when everything works. This way your script will be easier to understand

@ustk
Will apply this tomorrow.
Thanks so much for giving me clarity.
Really appreciate your patience and time helping 
@dhealey @ustk UPDATE
Just applied what you guys advised me to do, today my workflow changed completely.I managed to do almost everything with such more ease than yesterday.
I've learned a lot today using custom lab by watching David's videos, but what I've learned the most today is how to work..
By following the steps stated yesterday, It gave me more clarity and a path. @ustkThe whole project is not finished yet and I'm surely know I'll be coming back here as always to ask questions and help.
However Just wanna thank you guys, I'm becoming more and more passioned. Hopefully by consistency and PATIENCE, my proficiency will scale up (I repeat, hopefully :D)