How to create a curved arc'd slider with panels?



  • Had this in the back of my mind for a while now but not sure where to start....

    Can anybody think of a way to create a curved fader/slider by drawing using the panels within HISE?
    Or alternatively, how to curve the individual pngs within a fader filmstrip using Photoshop or any other software.

    This kind of thing: alt text

    Cheers



  • @LeeC Trigonometry is your friend here
    Think about the full circle, but draw only the angle you need



  • Thanks for the response @ustk.

    I found this 'Pan pot' snippet in amongst the forum so I'm going to see if I can rework it somehow.

    HiseSnippet 2378.3ocsY8taabbD+nrO2J0Jijh7oBTfM5CEGcnnHkiaZsfQ0+SXhkEgkpaBLLbVd2Rxs9tcItaOIwHn2j9PzGgf9o93z2f1Y1cOd6QdT1PHlRf3tY2Y1eyryL6rC6mJCYYYxTuFqd9zILuF+V+ylJTiOXLkK75cnWiG5eBMSwRIFR6OcBMKiE40nw89ZjPiUuum9y+8utOMlJBYkj9gcekjGxdNOgqJo1e2uiGGeLMhcNOwY1e4t8BkhCjwxb.O2yui2DZ36niXufhSaEeuFO3nHtRldlhpXYdMt+9xnomMVdovL+Wwy3ChY3Kc8NCDjg7wx3HDwHUuCFyii5Wn2YdfT5WZEtmwJ7Y9mvi3ynWZM9D8.jRNbsGMV41fWWW304CGdMbf28Mv6S8OKLkOQUNBhseieOArQMjBaAtvxLWuUx9c9GHgYHTsSnuicbJ7xLNB1tSmVD3ql6r9Zl+1ZKxAoLPUHemPNX803hXtfQFlKBUbof7NfZepfEGHfMnVjqZQl1hHG7OZt9ZWu9ZD3SrLjFSfcUUpLdGCM6ajmQJPCMJZd4zzNYy2ESLigp7DVphyx.7m7smc5KBHF1rKI9YiK4Qpwa7TDLs0O2xYvwL9nwJ6nlWbGlFGKu7.36Af2WFLsMNHlCO0h7MxKf3f+H4vT5nQbwnMbYKidAqmneJC.IvjJMm4NbBWXWQ3oJCPupX.5UF52TU6sFr1QTEscDaHMOV8JZbNCLgHetj1oFVl3XpC0an8opwAlM5xkw78Va0G70UjTYtB1sqJNz9ii9RyfAEtBAiZZlnydP4SneD3rmVRgLBEkIROnyUGe796g+0bGxR3euzPGBWPSIBYZBMl+SrnBSQfZLOq8HlwPDzjrIofRf172rIYqxYEns70MqJF+BDr8W04e+uHbA4kzHRv186s0iaVEQf3doTA.4Dv51VIgIxohr.fyBQVL0TIjg.Cgd1B5wirxYIbrGr+Ab85RLab0at01sbTDqKNP8M6rDSpVhPzrLE3iQhjpxgG01LZPwx1pB.bUmkIWL3gnjfqSxDlHyconog0rTa1Ez82+5UYsPEl.+iRMSQSA2VsQupsSOxoCGBtbfoa61OYGC2cIGCH5b4D89a6mneES0kUke.umOFx.HfTsf.5ztyeYmElweG2FfQ61tC3RsM78ipvXEUXIpyIPVYRVdJiLUlSzYRzp1Dvg5yKmoda1DY2NLlQSCVpABx9FlGiFeTNLQj0.QFBIO0zBySSgDCfZ.deU0JX5yrZa5ZD+Bq94R6Qy6IuiqZBPIYlxgK6OwRkl0jDkRuLiPIPFko.tnlCWjCWzWwEP5fLHTIXFwVyCxNs61bdTrWTTgbIWxgcL7kQ7KXBfDDZQASDWkAKOJjLLf2ZwB5PZ2tMY6G0uWSWQ5ta.GjAYpBds6FeKxBuo8UJe5MUQdqR8zce8Wj0oSMBe1R.lGcd4uF0Xvm3XnJsfW24pg1OsHcAe+VjGq+1kdQhG8xDzrjv2nyCEz7MtZRQfqfcIIgoFKAuRlJOUXCjAmVVDYfLWDkUtIEJAG0PLBG7OpycGcYwHEaJRW6Efj80hKXNjtf+gwYrvCIHOiYeAjoNlgN.JB.SrQuPxiHWx3oH7QPCUDzzMwFJK8IsNPo0LHtfUatDF0GSu7mtorvMqtbHaHVuFEyBnKlgLfMldAGNzkb4XviGyxjwhQqJkLQNIeBreHxA27EN1+DIXJJJJp7beFD3nV7re9PyHP5IPaXQNlkqqdzA.SrvIsQ1jNXVloDbIIZITkmRyYDTZcww+yc5ui06lZLZ7gDKDij4PM45R7Zdsq2PgOks7p2dwbKTvFtEdsw7GJpmVVAdpHjZmZ3XpXDKpJxqeCel4E7vFcq11Cpj+OhCoYfKnQxy.eU3U5Ho.pOGECjZdxDYppF8GF8vBNeFobk+dHG6lc0mDTR7G1Yda3BvHCpGfq3WvUSs64CnvUUHPV+R2fTzZTOXNyg+mgWY4CtrtEkW4gVNpXEMdq4Wy2uBhI1LZQPLd0W3DELiQ4QMZkqYMngcYg6r97M87Bpye+KpA4slWkqP.sJKZCVPS5MBDLyI.Tu0lUj2CHqUorpLBdjyv9muPr3bZ5btoElPs+eoGvhSpZDUw5snNUtmDaKeBuPi8jlZmZNbyVn5jTldpslUWIkL.15Fp6+QKxfbkNUpYXoHdZsBCJYfAGZwRcyhUjA1VBrhm.iWRcnEnvkfWhdawVujDFD2pXwSCVplqwmUeUo7QiXoY1yPMW8tXgWxZUWpn4Rjdyb2TszWxbTtyc9uonaB32.4Lk1WGuR2yb5gvF.gMzUn.+es9VMOU2SBycYLOCt0Ocyt5mnW8T8CtIgeZG.PfEv11h2oaaQ4Rh01204xviv6flLQJfWB1PO5FFi57s5PJzidfQoBBK3pkwWsrgGfRT5hVIYONhcSTaXuQuP2JTLWRVujyN5sJRJNy2AnuPpXmJBZt10qs5Z2rFY9gFNr1wrBLlkV6vXm5RuMFCD4ICvnDiRWLQuF2uZOw7WdOwbaYWnwt3LQonmfqNEtL4x5Tlm0X540XEKpfopzcLa8hNlg9Zd7H.H9vNhmFsksf7ne1adNenkyyh4QrTMq+Je8dPML+25cHjmFaZmEKksqBncH6BdHyzBuU8Ojk8NkbhFr1cduFqc6v8J3gF3ZMs3AcfBHtG7eLfvyDt3RwsyTHaHeUaxkWieu+xZxkWhtIuO3e9+Lef.O70Hqv8b.+CeuVrqJsVZcn7kg73jLHY0jdIzQfP9C9W2+km9sGcv4u83Se9gG8xa1OlJfZIaOAvTgVaYmu6LsdFEve7LTdYkD+wcSjQLzVB1UqdUzo5e1nWyZbMjxexYvoqt82NKe3P9Un62yAtihhY8kXUARgql3sX+Z+D+SjQX8AUakL1+b6.nLb6YK1WVrhiotq+Gk9K+gB2O0uOWENtd7tRM3ECC+HiWa25W2+ngCgawTB166e72+wu07dl9fNBpUKE8K7eA3yA2tJjgEy.QtX9tFqfAIl26TD0BkSFoeAinrC1sH1DGrawfdIzvT4asGmh+d.+ZME.SB8OKxp9mfuSlkNx2GteN5exeaXHZJ1Dvd87r8cfmGeG34KuC77j6.O+o6.Oe0cfm+7sxC9KDsWtRlXBS.B8ORerPiFGInfWl1iz6+CvSCLtE
    
    

    Still not sure how I would attach a knob (circle) to the slider though...



  • @LeeC - you can knock up a png in knobman for this pretty easily.



  • @Lindon yeah for sure... I'll probably just create a circle in HISE for the knob to be honest. I just can't get my head around how to get the knob to track the curved slider.



  • Ok, so I got my knickers in a twist with my Trigonemtry so I've decided to go back to basics with this one. Massively appreciate the tip @ustk but unfortunately I'm no further along 🤷

    Alright, so the following snippet contains 2 vertical looking sliders drawn using paint routines. I'm hoping to achieve the following:

    • Get the slider in Panel1 to curve (arc) to the left
    • Get the slider in Panel2 to curve (arc) to the right
    HiseSnippet 1197.3oc6W0sSibCE1S.SWRKUck5sUZTtZREgcxzMzJgVQVBIcSW9IkPY6OZK0LiShEyXOZFmEnHj5iReL5k6c80nZe.p5aP6wimjYBDBnHgTkZG3hb7wmi+NG+YeNtSjvkFGKhPFKe3EgTjwGf6dAWNnw.BiiZuMx.iedjKZqKBIwwTOjgwBeoRkwxKhR99qM2h3S3tzrg9t5GIXtzcXALY1ncp+RlueKhG8PVPtY+z5scE7FBewP.FKfsQgD2SI8o6QTSq.FYrTSOlTD0URjzXjwhaI7tn6.wYb87OhEyNwmpDph5BNRObKgumBwpQQMFv785LJbiQfW5jE7KnC9OFuKyiMd7rjvGknvLyh74CiByBdUyCO66O7LxAuE0v6w3ttQrPYlFE1debatjF0i.aA4gkdtnBuXIbCALCtbs.xozVQfvXKrV21dUyZ11k2nXQXaHVZ9FRjYGBm5W07YlirrOU1PDDJ3ffUIs5RJaz+bsXprCjrjGHFJYbpUugbWISvs5W9xhEMgu9p4n2ksjCXwJWZU5j95gJUV4L875AzDvObH6b.0UR388oV+..S3+QV9JlmbfU4rAdAk0efzp7qW0rpcluxVS6ya0xN4CzpU5EQNaGEZulWehSkp2XozCZeyUbUy0S83LhSljFb8HUkn4zyNh3OjBoZqq6XyJvFSYymXl4l.x4kJa9oiGIwVq6J0U6lftRM6JiV6aDpUplvIfTYMv0WobOi6CIJyQaqlB9K4hSppnGQBeK2QbiUgnBbY4hWVb4LpgFlZMaLVQDMTQYTv+JXIlNUKYYJUVmTSVrFDe+SfaHrlDCk2Xkh5+tFM1Y1zXmLZry+Si+OIM14towN2FM149SiclEM1YLMNG31SHo6ysRfQwqJZdcU85MUcotxmFMU0pxuQyxPK9vfSnQ4SBpIB0glrPG91KzkuNrqNijahBdaNSteHkeak+PooQnPXgTTASUlTF7CSKC10m4QiPLnZ26gStJ.k.3zVK90vm8tMQ2aiclv3+3q+s+bSz2zdahjnJFmBG.hgzHISE8FaSeCzkitz7x3sowmJEgPRZ71NxXk6Dwmm0HDBcQdA3PPPrDLqc.zLDx3SvW14f8+plMN73V6uy1MO3psf9tNk5sVHuO5LEmG1RLdGX5fjiGJolfDra1U4m3Lu+S0CDdTUyc.IFAGGy071aikzvtrelluGu3g85wNWsasCJf444S6HhYJZSdHixE5KoC8UF0yh5vRRj+Hr99+7g9d0yB8e400GGLe+DAiowjKwJ24VZ1RDFlaIf.ZNyt+9D.Zu+0lcyG5uUlKzq+iyL6dylNgVeEdC8IxI6GV8HfTEJXluwSUykb.9SjuePZR99B2Gi6vjtClNdKLE7pt14AFuoO4XEbyd8fZbYfcQbqu8g+8EHcKN82k.jWfqf2C3wPccWJfDNvfT2uaTPw5zx1JYUloKk6kH72vWpxpJYiTkUGoDn9tQhic0WAqdTyiRFAvDO4scKi2UIaN9haL1dMa0Q.1wttpTQE.6S2Fm4vlOaNr4oygM0lCaVeNr4ymCa9hYZi5YtOenTDnOl.CzoYRMPCilbBvxRXjn+w1q.Hw
    

    alt text

    It would make my day if somebody could modify this snippet to achieve this... I've been going at it for hours to no avail.

    @d-healey I got the snippet from your Patreon so if you have any knowledge (and time of course) on how to make these sliders curved it would be ace.

    Cheers





  • @d-healey thanks for the response and the links.
    I'm new to drawing with panels and adding in the trigonometry has rattled my brain!



  • Hey @ustk @d-healey, could you guys please tell me how to make 'Panel1' in the example below have a completely transparent background?

    I don't seem to be able to stop it from being black for some reason.
    Obviously I'm being stupid by missing something obvious but I can see it.

    Cheers

    PS Always happy for anyone else to chime in if you see what I'm missing

    HiseSnippet 1654.3oc0X0saSbDEd1P1TrgTUj5CvHtZcHwYWGBTQDEmeacABV07SkPH5jcGaOJqmwc1wwwfREpR899Hzmm9BvUUha5U8l9FPOyL65cswIfRgKpikimyOy4672rmwMkhPZRhPhbJ8vQ8oHmK61ZDW0c6tDFG0XGjSY2C4hCTzDEZqQ8IIIzHjiyE9FMemRyiLu9m6rEIlvCo4jPnGKXgz6w5wT4TaV+tr338HQzGx5UP5qWuQnfusHVL.vxEb8Q8IgGR5P2mnEaNWjyB6FwTBYKEA.CxY9sDQiZ0ULjak+wrD1AwT8h.TKXirj2SDGoQrlJZ6tr3nlY9bBB1kl4QfKXi.eo68YQrwzyiDeggANWihwCm4NK3ETDd9e3vyo.7l2Buq31JTx5qx4nw1kbavUTYaBjBJBKqrn49iRtaK.I3pp8HGR2SBKFqg2M78WFutuekMVr7hkgDQhBeDQhuKj4Cv2FmoZGpZaQu9BNrv6pFtW0pCiGy3Tb6A7PESvwBtgqVQoH1KLSqkg8Md.sxhke4hkK0jvowAUkz9PLV4o2pSLa2YZvpIZplMdaRb7APgh2j1yho7+x8HqEOUWxxN0mRQGXslZ388hAJvG8x7QuNU.e.CuLeV3qFKknHR0CZ2FTGLWspquwXVDY3C6xBOjC4Of20qVaBdOgEo5BzCxzwtoqt5S5xTTsDKNAY7lQQXUWCG7PFnqdQG1QTNPhRvDdDloRvBCZRvLNVRhXDN1yGWsZUbskZ1nRNz6WL.EB6fh1jn5B4GiH8CpRhh1TF58TnrAdG.ue1x3U.mbYsmlJWGahR2R6Y+WR0gZWPGdwoux7AUWVBlSGh6QUcEQXIUMPxSLtRRHIlFgOPLfGkj6ggBojFp.eARG4fGP5lZu91ZfBo2sLp4U6l9Y1MSjm5+LsTEVcMbf+zBELgPAoB8NNPjjLLYbZvaPBMcA.k1RQOL4.wQ.MAlbjfEgGRYRsapcNFuSkzPldaLA69PTMypKiWSGUyLot3DOUI2jkDaA8X4EJlvRsSKmlKCWH6Af4EznGqaR0kf3UrGBnCjFh6OVlrxghAAvWBGDC6sw2oPcWZglIBXRZCfjFWYOFXrkAIG2prRwNmqA0S93klnaZooA56hC8Yb3jARKNdAUJrFLMKQvPm7H.TjzSqZmk3LaPQzbeHHAGYdr2XhKOMB8qF.ghOtMi1RvZmRiVA6ubNZOi1tQz3XwvYjv9nz1Urkq1+ma4pUrkq3ozYtw6quC2fyoRbHSFFSyarfnOqehtg5kGeKHONR+g7V07OYh8MUrpGq67t9ZXvss0eghDuoaNWBuNzbVrRbEqvMarZsJ.6f0VeCClVyGe6uFGBccP+PZotdltzlRQ+UhosUFHjgfQoH3Z1sLgw+OX+fZZ6qKxGjjY+rHhABVnULRLqZ3NRJkOYhnS01vzj6Z2KumNN9sR12jqBozwN0rIKK70mY2+xmTYiBixruPQe.2qR4WVtT4SJimlU61yjW5vHwT4LYqG.VdVJ5wGz6.pLajoLAgIAmbTS2SeTyhSBGZO7uffBdCNS8f9T9oM.JJ8IFvnnykhJPTkYPzOOcPzVwrHpDwf4M+LWyCKPF.W7p.noUdwroX0yXYz8ht14slT4e8u+q6fdTicHJhdb3T3.PrOUpXZu2YG5Qv8LrCGWxcGZxgPIMXnwi0A2g4zL5kb2Bld7djQfCbbQ.Op3BE8XU1USJsvagWZpvfL8rTqoIiPu8O0jGpmdar1+1uTuKk0oa9Ufd0OW+fNm0too95W+Z+z31XmXg2aXO2Cd0ipm6AuJodOVTTLsoHgoKwx8s2bmD0nXy099Vgj8BH7RhmvpW98luxs5u2qfUQe2zd9aj0mL37iI0SHGQavaBmIS0BtfSZHWzm7S5p.m4lLv.QYzrC9yHSkQsX7NiF5cuYEb+NQjd5kIuzm9ltoLzwth2tReCJNDSGU7lveRtI3GJbuhaSlJr6rw6by.u5N6Ow3M8d0K5ta61vfC4fcd289gO8WhFYu3VG3gSRFTr5t+fdsfpgPJfD3w0w5iPclS2rYW6qWqiLsfQqLKzMooLCzqcRYFjwD0iDJEOOzdJm9l6WzPAvD27CXTx89503wGu455W0GA8krmGFpCEq.Xe15T6bnyZmCct94Pm0OG5biygN27bnyWcl5n+sb1bfRzy1l.DZtq4wLNN6xIPUlohD8uBezRhC
    


  • Try g.fillAll(0x00000000);



  • @LeeC You had "opaque" enabled in the "property editor"



  • @ulrik you're a legend for finding this!
    Would have taken me hours to stumble across this.
    Thanks!



  • @LeeC I'm glad I could help 😀


Log in to reply
 

13
Online

1.1k
Users

3.8k
Topics

33.4k
Posts