Drawing an arc for the knob LAF; where am I going wrong?

d.healey

@Mighty23 Check the Y position of your knob, it's not visible on the UI currently, same with Knob10.

Mighty23

@d-healey those are knobs that I should eliminate at the "final" version, they are only for "debugging" reasons.

Since knobman gallery doesn't work anymore, I decided to start studying how to customize knobs via code. The result I get is knob unstyled, look at knob16.

d.healey

@Mighty23 Knob16 is not visible on your UI

If you move the Y position you will see it

Mighty23

@d-healey ok I understand now what you mean, the fact is that there is no Arc visualzation, only the basic implementation.
I made an embarrassing mistake, is knob17. After the adjustments, the arc still does not display. I expect the knob to draw an arc of color ".textColour"

HiseSnippet 4589.3oc6b0DabijclskorTaOY7r1aBPNjvUXxhVd5oMI6+iiG25WKkQRtsZMd8tdMzR0r5t4H1jsIYqelAdgQ.BvDDDjcOt216AXurmBxk4TR.1CaBxobaOky6obIAX12qJ9SQ1rkZIKOFy.ICY00uuu2qduW8whkTSG61DWWaGgLytywCHBYtgXqis75sTOMCKg0WVHyLhMcHtDOgEOdflqKQWHSlodH1ZlYup.8qe+CVTyTypMIpJAgmXazlrgQeCunZa13iMLMWUSmriQetdWpw5sssVx1zdHfjoDkEFn0destjszvtcEQgLSuhtgmsSKOMOhqPlqtns9ws5YenEq+Owv0XOSBVPQnELQrpW01TGQLVqvR8LL0aFnwtBvrzLR+mho+2VbSCciv5irC2j1fTzH3sGYtRb3MUL3ovCOYN3kBjxvAoqxfz6I1psiw.unVP7bcw0s7HNcz.yNOTX8U3J296HtjMzCKuB801mrpCTHbD4TTJUJuTEE04uW1r28te7VOZwVRarvpYyBKDtdRlZcjtuTvDz1g.50F1s0L2v1d+ErzWkPLyAik06Czbj9XK68TpxMntDukr6Ov1BJjaNVyyghCl6BNjtFt.XVcnUaOCaqbyo6nc311dZNG2xzPm3LWdoNAM1Muj8de57Y+7rRvWnzz.AAUUPCP18n0R+u6dWokg4QxqGQZOvEpqi8PKcIhoow.WBsKcK3h.Cc0xgyvdcYEl+d9M2AbQWgMfbZyOlI2vxh3bhyqgGoOqnRpS8yTjyKgeq8L0mK8gRpzOVj8wmmPtKoY1dnIrFPEtCXlP6hjlUWSRnMwELddfcQ9d3PZgkLr5Jo4IIK4noanY4F1WBXUtujpzcj1TyqWglqCeBQ8AZlCIaY6zWyz3yH5zYZEKc+4Q829pfYRpisCr.YZFhFecjVjjCDPdomQ0s6Jo5qZvmd93rnVDht4oYJUiYJ2lz1KWnL.CWMlr.KYs7RknVwWBey78vIcDWXvWDcI47i2yyZcqN1i0Q1u84h47Ovx7DGje6wGDLSKB9nmjjv1owLFVlFVjvHBIaKebfC0w1LW6fwkWhtFhAKyZzQJGsjz8uujx7PMy5iDzXjatCXokfPMOGXH2CZ+kyl8k2K6on5r0GpfAOSSLRKWRDMVTi5zEDp6nY55C6SD0Ly3XQMGhPTGsBs3POOaKkwtB42d7k0VZdCczfMCfgQ2KEGzJc5fNqyE1X7wrMQe3Qo0+0zbzaaC6gsoFMc4SUiOvUdbpRgtGfzpOMAzFY1TlHYpLFWPe0exWLkoKlg1.bAIXqqbQqkTiwXZakGOlFFEzo2wWlp+U5PJLnXTDE1TB.EV+ofmv9k8jbcC8uR20Mt8Glt2A1K+NYwj+KsvFqH8vOY8rV.CJWfMEQ5GYa2eMMKHIqCtvD4Ur45as6O5QOZSbqiB0JeuXssvSCZSsfbrlvp2s0NqzjNN03ia8s1YksWcgkVY2ev5KuyZPWPFGioKqsx5Obscf9TTQEbz3kAf4lZVDywFBF1CzGcV9wBDJ51k3rrlGRV3Y..jyqHWOuRoh4UJJmWUoV9JUghUgOVA9Y47UfeHWajpRL.nGx9+KklRTUXOGsoDhod8TgWQrJ470qDJf30LJBPHWApoXP6Ym8jwX7AjBPiIwwfSY07pp4UpEIj30LVbpTVYLcHcXFz+TvYLIRwoBn7f4W54TmiTbOZBzeFgoKVYt48GBWGKXZqoCLo6iNU43bvX8MzWDCWaBO3f211CANXjbQLYmO6rXBGdJNre3V3PCudKXNnmVTM8.pO4kx40yvsfNHmB8rO.3c98+9RQUA4CrODnQ0cdoGfAvR+kX337zrKLdRT0gSM.hYH+Hf9I86mSyKxTgjI4oSNpW4FfJFvC2xWCnkSf.jTt08BaDTwMsG5RVBzEafJmkzClaQaHmU+sM51CTeGfD81DWfoIqKyAXeNF6S+JxKkvV7LfbGkXWfPbHCPKcN+j6YmMBxgqGQ7aRrHwfWPF0vUIxAfufudlz1eeIZqrRrL3vNJrgTnsoQ68I5vPoikaveFH1V9DzaQ7Pl4tXpLDNa.Cl9zTHOFtYqOhtOYP3r4Pfcor76FeGw01vdA098Ry6.aKZJvRzv.Cst1VZXBV5SB39BGubIxdemjYy+fQRdemjUP0FpDZOzwA.IpnmrtOaPXYSiinY7ko05qSQZ5Sk9HonR+PlhwOtX88N7.Xd3ADRnLTYP.1Amzz7COoogovgXMPS5qcTK3oMHqp0lQFjaCLffFgXsH9vot9bSXOeTpyJ+5jeXVZNVePjwKDLwF1G.5Tzt1viJMe58y2UnugUN95ymPkFyn+P+g2ousdhwGJb1PSSnNvyzRRLr.BJ4CoiDIZz1flfcr+DWfPWL6juaN37v6C98tez.n9NznlYCcLc4cLi5IUhuzODMHuPrjO3SalM6cta1rbbj2x1i7HqbTtvPyRIapSmTaymSGvUK0lwiOy4jFXNqg82i3vyDG6nPlqF+fpDG+AUweNZsYttbczFdVOCuGMfXMtSWSv2eWPHy07QEzUO5QZ8G4ejVLFrBF5BYlUzmNq.Ex7Gknv3FN6jhnC+Zh3S4qd9F76Jtu0dHoRG14qctljYDYmyv4az2LNDRZE9hecCgIxH5+P3ACWLyIBfjCEeR3j3+2+.gOYcjjCd5j9qov57.himA5BkYYxAFsIrypbVwkIt66YOf1WeV5BYllI12I3jLw8eoR85hg6GKbDuM6X9BGZn60CUlu.ppGAIOfkp.JWlavIlqONwLq3.KyMwixcLB4U+zuzWH9U7e7yaDHnf9+20H5fnfZm927+7+9UX8bGOEe0dji7h57W8UzJEBNtQ95FngIm30CNqh.W8yNN8aFQ5mKxqdkZDodeo4HZyiaDWgErRnd+EePgzTufpuv.sJGne0eOGnAMXDHlPKd0KR.5+j+r4RCzAUOwfdlIHOEms984g86m.1MFjD1+jOsAvKuuqGL2q2WqKHo+bwOu41O5udkk1Y2UezFKux1uDxGvjTgAVcmbje8Swbyi6e1f3l6Qstw0ju7uIg49e5e8+9eKEycP06Y6.421VS2XnKu8gUeKf2Oez3DqhWKtJtg1dgpH8y7p3W5vqhVI8n9IiDW7W0Xhww24T2MJBGRwvwNMvrCz21F6jmfMuE.9R9YPaafZDv1JZDMZ35QFvYx9k+hew+7CbG1oiAzKQQI8EE5anqaRZZ6ZPmuvwJ2XPv9xqSy4FdbWnMWqOwiPaXZQ560KgIZuQLQ6MAdu8gYhZCndutQrF8mFoe0C+Oe.PRoENKQNGuZqI27+NS794Q1we4OM8kAtNGyVcawQOA13FsrhzSGbSXY3rZURU8m.q+XrlSrg6cOcNLQVra9OjlEKqXydvrIs5SiautgXzYOmzN8PS68zLW4wmbfdhLNin+PMomxmemUnHstwEQ76dfKPk8IHQml1CFN.iXWXO3I5SlIC1h9+ymAUHZu0jShiKU6eaZlQQw0Zt5jZAEE2.57a.mrTMxiwIikj55hq5PdwPhU6iAarEOMU9rVew+UxrVT9jbYsV6yF2Zzm9u23rRw3DIDGgpe2Oieo3iRFw8QiDw8Qiju6OcDitA95oP6M99QseniM5TEoxu9aeSovlPSFCO4wRg8UtmMJrmi8oOH3AHYO4QloNCLAKMwTpD7RpZv9qudzWirumAOK5yKEA5F+iwA8ow49U6NAdVnLRmBXDjS2oKEBsA1dlzX1d5mikq5UbpwqdRbPOeoOOtd0nXweLpF9WVmQyGQwkjhh5ooEBid2Wto3l153MeH9UwA4o32.lyf+9uf2wEKHWxw7VhKr6myjBw2SrogW6doiwqjBFgPk2DXz+VM8NhrWtaD.upHr08alqvD+sp58BNVfV8zFP.Qxt5RQDP4gvRCcNfccuVzPycCRGOd6CV21wimDDVCpnILA7OEyF1GFqJXWnMYTq86xsa7nCHNtZ8GXZ.djQSWi32qMAAjZW7q01BC8r6lnWza415VCF5w6ysriwAbj0ebCjhH+clip4qZXBau6FyQXpIdkP4jcDXu9otapAIXv8a2B3B.IBaS.+.KHgKd.fYtBxtgUVNHscKhkNs.v+4q7aTAKmwuQkfF4c1xxVr+tQblkXjlk7W3SkMMuGvVDuCsc1GYA4RySsamiTEVFTc5pUzJw+++RinZSZXM7VlLfe2h6zX4k1cQiA1lZNI5YhwFxk+aCqG9Inx5my2eQHFAyTt4fY9BwnCTd.dB2NjcraZpcbNl4daM7Ewsmoc68QpAidJz97YWD6Qt19p144vpm9aRF9vi6Vv2KldcNC8nuFKy2JuXH8p04H7DHrmR38ZhxEf+Ir.9p5vMFM72x.VSn00z173AviaYzllkj1i.juPe6gVdAveMM2czLLw8XZMzc.fuGY0B5L8t4B43yrEMQ3zLd8GiuLXbuJ738gbZDmBsC2ffGpQdIzj+8vDr9OXhKy5iya.2KlkCfYe5963s2cJrcl8fA.TBYE0cNd2CIdJBiEOtPJZuSUh2PrjZsR0qpVubwDfMcXbEFLDifw.TzmhYI9LOop7U3T42MPk2suwQfgMl.uIUfP7Pgi5noOhYerJL+kbNND3NldnF+R.oiqvvBDEvYUeB6X+mRTkxffuqSKR2.0uGyHtAXTfLoBsNDI4rilSWhGUD7U3+5BrHznc23E8MKrCF.sIz8TalxoQIb9lSzFO94jSswqbcPIHk4lFV9poHFVJro1QgkUfxn43ZhrpPt.8gTSAWv7Q7so.H1Z70g0XGRgtmr6zjs7dkXZwTbZwzQZwLhenhbREAK2J7AyuMTF5C8KkR0kUTp.oS2mbXvS+eKwxEJoppVUtZ0R0JoTTtt.ysfZM4LCPRnzgQRi4LhnDOav.6PQYE4hPGpWGsOxJA7I6aa60CIy4O+SKphytvW+FkaHtM9qKAaZiM4B7giwbAi0B8WA.9nuaHtt6SvVaqYFLifgNVJLzc+MWJro3j00D0G1u+wwETVw9zaLvPynY38EWPWmd0tAvIsbqlA7BvKSdOBDETnvHd80KUuB51m.nI70O2QrwZH95Qrf2vrGWF7dYvaJAuowhQ8BgES4JppJUpelYwb8PVLJu4owby3zXTd83wDnxeCmGy0C2xW4hiHy0CSEo7VhICuZcdyFdpqvWlM7RpLA4wBnx7FJO1zbBaFFWFkuMSlgOCxkwuWF+NV1L9QDtGzYWxKRtidG1wTWvu0yVnGdhUljiBtCgAG4c3GgOrtkN4H7sR7gJI1SaZN6lXjcy2pFY0lEpvecLwBkpZ85xkPe3hkpUsVY+Epn2fcxc+RWh2htlyVETpqJWWsNm3ukX8B0pieUQoV4hxpUKNJPpTppR0ZJUKJWorRsJTfLk3iCVav9TUtR05EKWSsdw5kJUrRLzvkd3ZfkpVLCvzhzJ3hF3lVUkZ0qUSslhZY.+pkFmRldVmyqq+2EmMYvnCtjpkKWotpp7YPzkhEFDk.LNMtf7emE8IkIcVwUrz1yDbBN07phr9yhETtLT4sTnR4RPptp0pIWUoT0JJpW.gJAYG+ZH13OlFaTm8U0pUJUSEh5u3CNjeaFbT7xfi2BAG2RTsfZ0px0ponHWSod4x0echMlL05alQGkdaFcT5xni2RQGUJUVVod0ZEqUoXc4pWFc71N5309HDd8dj5YDW143e.wK4p4jcHcibbnwNotfGW+aQJbxWi8YTeyLCObYGhd3kC+zPerBmk2vL8hFDCogFAgj34phugQh5DfD5dEraH9ESF4nDfkgbMUpHWoXsZ0JVRdRW2COcfXfmOIeJ3eiKd7WtTQkBUfGqTsjpb0JUKMg3O5Y1lbE3ZhMIZ6qbwpBmEelHtzmUPq91GzklLPeU1FcTKMcW0IXO3KNS4HuKkX.R8qA.UZL.5bruv442UW9KM3LmiKwox3tDmzaFKwY4VMEVvyC+icV7+vOd6F3eL1z5QzzGoksIlDMWRh5WuwN8bHt8rM0+l6cz7qCYzWqsi8t9uIV5ltzZ.81hdO8mUbSrrTJ+9122P2X21siOUiLP0y6.KddGXoy6.KedGXky6.qddGXsSef3eGR8osgYSDD1r4JzX9LYBXZCQgB+AXgRf6H

The knob displays and rotates as expected but the arc is still not colored.
I'm trying to adapt to this logic:
https://github.com/christoph-hart/hise_laf_library/blob/main/Examples.md
alt text
As Warm and Drive are colored orange and blue, I would like to be able to draw a white arc, assigned by ".textColour"

d.healey

@Mighty23 I don't see anywhere in your snippet where you're drawing an arc.

Mighty23

@d-healey this is a version with the code posted in the main topic

HiseSnippet 4741.3oc6b0DabijclskorTa6Ldh8l.jCIbElrnkmdZSx9+0wia8qsxHI2VsFudWGCsTMqtaNhMYaR15mwvKLBP.lfffr43dauGfbH4zh8xbJI.6gMA6o81dJm2S4RBvj2qJ9SQ1rkZIKOFy.IAa0r9688d068pupXI0zwtMw001QHyraez.hPlqI15HKudK0SyvRXskExLiXSGhKwSXwiFn45RzExjYpGf0lY1KKP+52e+E0L0rZShJRP3I1FsIqaz2vKpzlM9DCSyU0zIaazmq0kZrVaaqkrMsGBHYJQYgAZs2SqKYSMrYWRTHyzqna3Y6zxSyi3Jj4xKZqeTqd1GXwZ+SLbM10jfOnHzBFHVwqZapiHFKUXodFl5MCzXWAXTZFo+Swz+aItggtQX4Q1gaPqPJpG71iLWJN7lJF7T3gmLG7RARY3fzkYP58Ea01wXfWTMHdtp3ZVdDmNZfYmGJr1Jbo+kaJtjMzBKuB801irpC7PXOxonTpTdoJJpye2rYuyc9jMezhsjVegUylElHb8jL05HcOofAnsCAzq0saqYtts8dKXouJgXlC5Kq06q4H8IV16pTkqScIdKY2efsE7Pt4XUOGJNXrK3P5Z3BfY0gVs8LrsxMmti1AaY6o4bTKSCchyb4k5DTY27R169Yye8ru75YkfuP4oAhBJrfFfs6d8rrJtycjVFFGIudDocAWntN1CszkHllFCbIr1zsfKhLzWKGN.61k8v72Mn9NfS5JrtjSa9TGbCKKhywOtFdj9rGURenelhbdI7eZOS84RejjJ8iEYe74wj6RZlsGZByATg6.lIztHoY00jH0w1gVrlS6HyiKXI8.Sj7cw92BexvpqjlmjrjiltglkaTiIfM5dRpR2VZCMudEZtF7ITE1WybHYSam9ZlFeNQmNTqXo6OPp+5WGLTTLzYnoYH13MZjNFVj.HJM.DQjnGnLheVSnA4BLYzoZm1a2yn8dVf2OzZElNEUjcmQ0e3gMzb5ZXgcnLsCRV1dRtCc7muFnTPSWeAm14dVXiyKw+Q+oEvXDqzhiT5yyyr24QK47TgEIqQcdnlUps3.CudRE7HG563jtmTT8QNRtdN16wLUCTxK8Ro47BrGy88iawdU5tvVDhtYnuKcdijCvedomQ076Ho5qsvmdNmjGiWtZbu7sHs8xENRfEqFaDAm7Z4kJwbvAnkkkY.G1QRv.YJvDFbYY10yZMqN1iMMie8yEK0z.KyisS90GuSvHsHjA43jDVOMilgkI5gGjuRx1xGGXWcrMy0Nne4YS9ym8kYm0niTNlqv8.ez4gRl0GInwH2b6yVz.RD54.c4tP8uZ1ru5tYOAUmMCQELj2vDyClKIhFKpQc5bB0czLc8g8whZlYbrnlCQHpilgVbnmmskxXmg7qO9zZKMugNZvR0P2nLcvNsRmNn25bgUFuOaQzGdXZs+gZN5ssAFFanQWL6opw63JONUoPWgVZ0ml.ZiLZJSjLUFiKnu5O4SlxzIyPa.NgDPrHWzbI0XLl5V4wiohQAc5M7Uo5ekNjBCJFEQgUk.PgkeB3IrcYONW2P+qzccia+gg65.SqamEWMdoEVeEoG7oqk0B325BbcIR+Ha69OTyBxH6fSLQdEar1l67idzi1.WKuPsx2MVcK7zf5TKHGqJr3cZs8JMo8SMd+VaysWYqUWXoU14Gr1xa+PbIRfO3XZxCWYsG7vsg1TTQEbz3kAf4lZVDywFBF1BzGcV99Bz851k3rrlGRj6Y..jyqHWOuRoh4UJJmWUoV9JUgGqBerB7yx4q.+Pt1HEknCPKj8+NkpRTTXKGspDhod8TgWQrH470qDJf3kLJBPHWAJoXP8Ym83wX7NjBPiIwwfSY07pp4UpEIj3kLVbpTVYLMHcXFz9TvYLIRwoBn7f4W54TmiTbOP9MiieHqKbMrfoslNrOm9nSUNNGLVaC8Ewv0lv1571xdHPJljKZeFymcVLgCOIG1ObKfT0VvbPOsnR5AjexKkCHd4VPGjSgd16C6J3688jhJBxGXe.v4p67R2GCfk99X337zrKLhRT0gSM.9WHAIXqAz+8bZdQlJjLIOcvQ8J2.TwfcIY4qAzmSf.bCSV2MrRPE2vdnKYIPWrAxbVR2etEsgbV82xnaOP8cfs3rEwEX9yZxb.1misa.+BxKkvV7LfcmLEw9BwgL.sz47Stmc1HHGNeDwuIwjDCdAYTCmkH6C9B95YRa+8jn0xdhkAGVQg0kBsMAJwDcnqz9x04OGDaK+cL0h3gaUxESkgvYcnyz85h7X3Fs9H59zAgilCAVkxxuY7MDmaCaET52MMuCrtng.ehFFXn001RCSvR2Yl6Kb7xkH68sSlM+CGI48sSV.UanRn8PGG.jnhd759rAgkMMNjlwWlVpuNEooOU5ikhd5GxTL99Eqs2lG.yC6PHgxPkAAXGbbCyO73FFlBGh0.Mou1gsfcaPVUqMiLH2BX.AMBwZQ7nCb84lv1FTpiJ+7jeXVZNVeXjwKDLw51GB5Tzp1vdklO8146Jz2vJGe44SnRio2eje26z2VOQ+CENqqoITGMqtjDcKffR9P5HQhFsMnIXa6O0EHzEyN46lCNO79fe26E0ApuCMpY1PGSWdGynVRk3q7CQCxKDK4C7euJa1aemrY43HuosG4QV4nbggpkRVUmNoVmOmNfqVpUiGtoyw0wbVC6uKwgmIN1PgLWN9wHJN9iQj+TNaybc4ZnMrWOCuGMfXMty9Tv2eWPHyU7QEzTO5AN9G3efiLFrBF5BYlUzmNq.Ex7Gzqv35N6b7nc+Jh3t7UOac98D2yZWjToC6zOOSCxLhryY3r06aDGBIsBew+ZCgIxH5uI7ftKl4XAPxth6DNI9+82W3SWCI4fmcr+bJLOOf33YftPYVlruQaB6jjmUbYh6dd1Cns0mktPloYh85AmyLt9KUpWULb8XgC4sYGw+vAF5d8Pk4Kfh5QPxC3SU.kKy03DyUGmXlUbfk4F3AsOFg75exW5KD+B9O+GaDHnf1+21H5nnfRm9W8e++7UX4bGPEewQmoFV5W8UzBEBNKX9xFngIm30CNqh.W4yNN8aFQ5mKxqdkZDodeo4HZyiaDWgErRnd+4eXgzTufhO2.sJGne8eGGnAMXDHlPKd8KR.5+3+z4RCzAEOwfdlIHOEms9C3g8Gj.1MFjD1+3OqAvKuuqGL1q0WqKHo+LwW1bqG8WtxRauypOZ8kWYqWA4CXRpv.qtSNxu5IXt4w8OcPby8nV23ZxW9Wmvb+O8u8a+2SwbGT7t1NP9sszzMF5xaeXk2B38yGMNwp3UhqhqqsanJR+LuJ9kN7pnUROpe7HwE+EMlXb7GdhqFEgCoX3X6FX1A56BkcxSvh2B.eI+LnsMPMBXaE0iFMb8HC3LY+7e1O6Wbe2gc5X.sRTTReQg9F55ljl1tFzwKruxMFDrt7ZzbtgG2EZy05S7HzJlVj9VWSXh1cDSztSf2aeXjn1.p2qaDqQ+gQ5e9A+W2GHozBGkHmiWu4ja9u9Duddjc7m+SReZfqwwrU2RbzSfMtQKqH8zA2.lFNsVkTU+Iv5OFq4Da3duSlCSjE6F+8oYwxJ1rGLZRq9z31qqIFc1yIsSOvzdWMyUd7wGnmHiyH5OTR5o74WYEdjV13hH9c22Enx9DjnSS6ACGfQrKrKri9jYxfkn+e8YPEh1aN4j33R092jlYTT7gMWcRsfhhqCM9sfSVpF4w3jwRRcUwUcHuXHwp8QfM1hmlJeVqu32jLqEkOIWVqG94iaN5y9OZbZoXbrDhiP0u6mxOU7wIi393Qh393Qx28mLhQ2.e8Tn8Fee01OvwFcphT427kuoTXSnIigm7Xov9Z2SGE1yv5z6GrAR1NOxL0ofIXoIlRkfWRUCVe8Mi9Zj88T3YQ2uTDna7ODGzmDm6WuyD3YgxHcJfQPNcmtTHzFX6YRiY6oeNVtpWyoFu9IwA87kdYb8pQwh+UnZ3eUpFMeDEWRJJpmjVHL5MS5FhaXqi2Kk3WTJjmheEXNC9amDdCjrfbIGwaIN2t8TSJDeewlFds6kNFuTJXDBUdafQ+6b10EYub2H.dYQXo62NWvL96716Gbr.s5oMf.hjcwxhHfxCgkF5rO6x3sngl65jNd71GrrshGOIH7Pnflv.vuKl0sOHVQvpPavnV62ja03Q6Sbb05Ovz.7HiFtFwu0gBBH0t3W5vEF5Y2MQqn2Aw0rFLzi2maYGi84Hq+3FHEQ9azHUyW0vDVd2MlivTS7Lgxw6Hvd8Sc2PCRvfq2tIvE.RD1l.9AVPBW7..ybIjcC6Y4fz1sHV5zG.9OekekJ3yY7qTInRdmsrrI6uSDmYIFoYI+I9TYSy6ArIw6.am8PVPtz7T6z4PUgkAUmNaEMS7+8KaDUZRCqg2xjA7qVb6FKuzNKZLv1TyIQKSz2Pt7eaX9vOAUV+b99SBwHXlx85LyWHFcfxCvS31grscSSsixwL2aoguHtcMsauGRMXzSg1mO6hXKx01W0NKGV8zeSxvGdb2B9dwzKaanG8UXY9V4ECoW0QGgm.g8TBuWQTt.7svB3qpCWXzveICXNgVVSayiF.a2xnMMKIsEAHeg91Cs7Bf+C0b2VyvDWio0P2A.9djUKnwzaNMjiOylzDgSy30eD9xfw0pvi2GxoQbJzNbABdnF4kPS92CSv5uwDWl0GG2.tWLKG.y9z02w6V8TX8L6AC.nDxJp6bzNGP7TDFKdbgTzdmnDulXI0ZkpWUsd4hI.a5v3RLXHFAC7NiJbBlk3i7jpxWhSkeu.Udm9FGBF1XB7FTABwCENril9Hl8wpv7WA83Pf6X5gR7eBHcbIFVfn.Nq5SXG6+ThpTFD7McZQ5Bn9sXFw0AiBjIUn0AHIms0b5R7nhfu.+WWfEgFs6F+QeyB6fAPaBcM0lobZTBmswDswieL4Ta7BwG7DjxbCCKe0TDCKE1P6vvmUfmQywUDYEgbA5ColBt9+i3aSAPr43qBywNjBcOd2oIa58Rwzho3zhoizhYD+HE4jJB9bqvMleK3YnMzuTJUWVQoBjNcOxAA69+lhkKTRUUspb0pkpURonbcAlaA0ZxYFfjPoCijFyYDQId5fA1fhxJxEgFTuNZejUB3S1211qGRlye7mVTEGcgu9MJWSbK7WlE1vFavE3CGi4BFqF5ufF7QeWSbM2mf01VyLXDACcrTXn69auTXSwIqqHpOre+ihKnrh8o2XfglQivGHtftN8dfCfSZ4VMC3EfWt+dDHJnPgQ75qWpdEzsOAPS3qeliXiUQ74iXAugYOtH38hf2TBdSiEi54BKlxUTUUpT+Tyh4pgrXTd6Si4Fwown7lwiIPk+FNOlqFtjux4GQlqFlJR4cDSFd05rlM7DmguHa3ETYBxiEPk4sTdro4D1LLtLJealLCeFjKheuH9crrY7iHb2uyNjWjbE8NriotfesmtPO7DqLIGFbGBCNx6vOBeXMKcxg3ak3iTRrl1zb1MwH6luUMxpMKTf+7XhIJU050kKg9vEKUqZsx9STQuA6jq9ktDuIcNmMKnTWUttZcNweSw5EpUG+phRsxEkUqVbTfToTUkp0TpVTtRYkZUn.YJwGGL2fsopbkp0KVtlZ8h0KUpXkXngK8vU.KUsXFfoEoEvEMvMrpJ0pWqlZME0x.9UKMNkL8rNmUW+uCNZxfQGbIUKWtRcUU4SgnKEKLHJAXbZbA4+NM5SJC5rhqXosqI3Dbh4UEYsmEKnbQnx6nPkxkfTcUqUStpRopUTTOGBUBxN90PrweDM1nN6qpUqTplJD0e9GbH+tL3n3EAGuCBNtonZA0pUkqUSQQtlR8xkq+lDaLYp02LiNJ8tL5nzEQGuihNpTprrR8p0JVqRw5xUuH53cczwa7QH7lsk5YDW14ne.wK4r4jcHcibbnwNotfsq+sHEN4qw9TpuYlgGtrCQO7xgeRnO1Cml2vL8hFDCogFAgj34xhukQh5DfD5ZEraH94SF4nDfkgbMUpHWoXsZ0JVRdRm2COcfXfmOIeJ3e8ye7WtTQkBUfsUpVRUtZkpklP7GsmsIWAthXSh1dJmupvowmIhK8oEzpu6AcoICzWlsPG0RSWUcBVC97yTNx6RIFfT+Z.PkFCfNCqKbV9c0k+RCNyY3RbpLtKwI8lwRbVtUSgE77v+XmE+OKm2pA9GiMsdDM8QpYKhIQykjn70ZrcOGhaOaS8u4dGM+5PF80Z6Xui+ahktnKsDPusn2S+YE2.eVJkee66anarS61wGpQ5n5YsiEOqcrzYsikOqcrxYsiUOqcr1I2Q7uRr9z1vrIBBazbEZLelLALsgnPg+evc.WnB

d.healey

@Mighty23

Mighty23

@d-healey (quite) fixed!

laf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    // Draw the background ellipse
    g.setColour(obj.bgColour);
    g.fillEllipse(a);
    // Draw the inner ellipse
    g.setColour(obj.itemColour1);
    g.fillEllipse([10, 10, a[2] - 20, a[3] - 20]);
    // Calculate the rotation angle for the arc
    var start = 0; // Starting at 0 radians
    var end = 2 * Math.PI * obj.valueNormalized; // Ending at 2π radians for full rotation
    // Define the arc path
    var p1 = Content.createPath();
    var arcThickness = 12; // Thickness of the arc
    var arcMargin = 8; //  
    p1.addArc([arcMargin, arcMargin, a[2] - 2 * arcMargin, a[3] - 2 * arcMargin], start, end);
    // Draw the value arc with .textColour
    g.setColour(obj.textColour);
    g.drawPath(p1, PathStroke.curved, arcThickness); // Changed from strokePath to drawPath
    // Draw the needle
    g.rotate(end, [a[2] / 2, a[3] / 2]);
    g.setColour(obj.itemColour2);
    g.fillRect([a[2] / 2 - 8 / 2, 0, 8, 40]);
});

HiseSnippet 1230.3ocsW0maaaCEWxIpnwasXEXG.h7WxCdN1NYIAvnXIwwdvHeYDmUTffrBZIJYNSSJPQkTugBri1tA6JrivtAaORIKYO6klXf4hVv2m7G+oGeO19RgGINVHsr25loQDK6uzYvTtZT6QXJ2p2oV1u14BbrhHQopNYZDNNl3aYauwOnUXu0lVle+02eBlg4djBUVVuSP8HmSmPUEZ6ezYTFqK1mbCcxbdu2Q87D71BlHAvyFN0shvdiwgjKwZ2J4XY+hN9TkPNPgUjXvmSD9SGLR7.O0+2QioCYDsPCqAPhRUa0dDk42e1YM1xxdy9Em7MRO4esyETeZt9BF3qLFPEQLOGXW5wfTimAjrmCRalBo23LvSRiTEVz34Kb5wgOHAXfpmGJo9ZU58NNsEfGbUsI3wjtRPHOB28qWuJB9mJsZUt7N6b1kWcx.z4G2sLv8wJz8XI5LtXXiCPuEMKMgDUawjHAGDb2N071UZMWHLbvb96II.abtvCyNWHFeL2uKgvbgHJCNVSRBo5RptIbOEUvc21Whe3ZgBKmNfQ8IxsqhBlYLrJRL7mqT9WKife5MCCaEnpFF1lVFs6rC5THEH0HBZHTzDJEIbeDgwnQwDiKg0h0mBcwkqN3ggoBUZkYN.JJ6jFfKtxx4kx4vsfGKkTEYRpXiUl0aa.Tu9u3aadG5aQMMK2Mc4cEaYaLyKgALnYek.unIBDlGxHn.gznFK8xIjXf4T.oTukN7AZIJODgUn5HI1mh4w49R.d4snlnuAcAVMpV+dvJM3uGyRHWJjSvL5uP7MYpC2OKOM+ieaVlLHHHgwxQVNUQBnbxLzghf7musQMVp9nOX2M6Ta9rJ8tYD0aLGJ0AmazzfgBUhfkN3v5KvxPJG7+Pi6HisnF0v99GK8buM2kpn4Wl8E.N7Knc2kzdW0T5spl4VQYgg2Lm2GnpQnZJxGypIVYMRg47RDcwugKhZTEoWLPIEiI07Rj2S7qt.uTwbHgdS7PhOJPJl.nS6sNNjRflkrkvImP7YypaMe4HtvIpJ5VCWrCpY14GVcWN19uJvatPA90DOkadd.F7vz7A02GVEsmo19S5a+osNzYcolCPiAviWA+Y1MejfeoPQth6pu7uU4OUF8uMEDrRa55LofwHxUZVO1Q9XA5xSlLjHql9wM2Qnu7hM6ewSqYuWZY+bNJ383T0UQjL4tBlutItd8xiFrxt2.CIJkgPvUkYDwqyFQj12zhBI4kNFZdeKC5meZr0SO5CVQz+XuSwJrdTUFf.PFQfdMZtv9Tx8vr9zAWa4bJIdrRDYPb1jCfu97X9iE63OczzBA5QOP8UixU76COZDgFNRMuFqmydcvb60el772qkGWCOTP3qabu3qGzOSJy.TksvHa8XYdLUMc9mQ8LdRQ8G8IEOUH9Fm9Tk2nUiwRq.i5Bw+GvX1CwdkSmf.niRA.2zo66W2Wc8Y19qEI5YkvrPIEpGbtLYx.n+lGQ2ikSXPxcrKou5jJWWKqYfAPySiveC+xL1PKamYrwLiVSvdRwG7Ru6oep2KMZ.LwMurcK3I1fLpwx24l.u77CddKlpkBr45F3tqaf6stA9cqaf6utAdv5F3ge9.0+GCNNQIljdswx5h9cL8Hss6vwPEnoZ05e.SOUr4

now I "just" have to resize the inner ellipse and find a way to calculate the right arcMargin

d.healey

@Mighty23 The arc margin and the arc thickness are the values you want to play with. I believe the thickness should be the same as your ellipse x/y value (10) and the margin should be half of this (5).

Mighty23

@d-healey done, final version:

//KNOBS LAF
const var Knob17 = Content.getComponent("Knob17");
const var laf = Content.createLocalLookAndFeel();
laf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    // Draw the background ellipse
    g.setColour(obj.bgColour);
    g.fillEllipse(a);
    // Draw the inner ellipse (smaller)
    g.setColour(obj.itemColour1);
    var innerMargin = 20; // Increase this value to make the inner ellipse smaller
    g.fillEllipse([a[0] + innerMargin, a[1] + innerMargin, a[2] - 2*innerMargin, a[3] - 2*innerMargin]);
    // Calculate the rotation angle for the arc
    var start = 0; // Starting at 0 radians
    var end = 2 * Math.PI * obj.valueNormalized; // Ending at 2π radians for full rotation
    // Define the arc path
    var p1 = Content.createPath();
    var arcThickness = 12; // Thickness of the arc
    var arcMargin = 8; //  
    p1.addArc([arcMargin, arcMargin, a[2] - 2 * arcMargin, a[3] - 2 * arcMargin], start, end);
    // Draw the value arc with .textColour
    g.setColour(obj.textColour);
    g.drawPath(p1, 0, arcThickness); // Modified line with 3 arguments
    // Draw the needle
    g.rotate(end, [a[2] / 2, a[3] / 2]);
    g.setColour(obj.itemColour2);
    g.fillRect([a[2] / 2 - 8 / 2, 0, 8, 40]);
});
Knob17.setLocalLookAndFeel(laf);

Drawing an arc for the knob LAF; where am I going wrong?

23

1.7k

11.8k

103.2k