Vectorized knob with outside circle



  • Hi guys

    • I made the vectorized slider in the left picture (below). But it needs to be like the right one (a circle that follows the inner dot - outside)

    • Also for the knob value text on the Label I tried Label.set("text", newValue); in the event.drag but I couldn't figure it out.

    Any help will be appreciated.

    alt text

    HiseSnippet 1874.3oc0X01aaTrEd2jtUcMDDf3KvmFrPWsFb8KIoklDEHo1IbsfVrvzBUnpx3cGaOjcmwZ2wIw2pHwuB9D+X5Oo6+f68blYWu653D5MWAh5V6rybdYdNuLyYNa+XoOKIQFaY698ymxrreamAyEpIclP4BqdcsrW2gZ8v4SoIIr.Ka60+Jjfs6srze92e4CogTgOKeJKqmJ49rugGwU4y9yG707vvioArumGUf6sOnmuTzQFJmEiKVKqoT+SniYOlhrslik8sOJfqjwCTTEKwx9VOTFLevD4YBC+OkmvGFxvAssF.JxL8wxv.Dw3rVclvCC5mYrIVfV5ma5qaL8Ov4Q7.9h4ycAuql.IWhh9C60tN30tH7Z85CO6Bv6VF38dNC7i4SU4TPr89oydEnyPzZsu3sb5HEJlP0HhdB63XXPOXb7HpOyayVspSfeps2FUL+ChIIJxozXx.dzzPFF0aS1mnSNZLloNZzHluxqpgLQSuJJetjeCcHKDEJakAw5HilJEv.upFxUyWyMpzrYePOJRrblhKXEU1IB4PCw8IilI7UbovabMRyleUnbHMjLsnjDAiEjPTRxXIYHajLlo0.wOlQQQ2nxK2nhqZBOAQkWUlfBAofp0H6uOQEOiQ9Rx3FIHfwLSuVm2p0gGd381ocMxtKQ43iSo.Vh63Fif77iBC4SSXd+T65D3+4qyY7.0jp0t6VEmbBiOdhBm84o5nr5MepsGQSKHld1B8uccx1qR+OXk5+AOuNYKiC2EcpBYbDMj+uXAOkFB179DuLozS3Uib2B5IhKpVCb44bAyQOu5p3BsCMbik3FCukWpOkztw1aA+4QTHgpeu5je5RVQyMWkUzbSiWBTOA9zrYWo5+wX4g6j5RuTr7vV6ry1c199qJVt48pS1A91V+UChK1q7lkSDCAmnIWUvB8PQvuuTaQ619dv9LicXdVmz9clb1cWjhWm.9vcuaabWI3e2cq6WmDvFQmEZBK615BHYnYyNXxrIw1r+gKBwj+r8GE.x40IyqSjC+kZlL+PoOrmA.tJVFVXKJMHvHPUvTpVmfxklvjxL5txhPZM1P+r1gUhkz3kgGyfKyDMLTdVG32gvo9I.yU6DxgmpS9mxSYwj+AoaLc7XtXb0KKbB8TVOQ+XFLBDEC0WlILczfA3oUPFxeSISOuD4.ph1nnaGbSHeEmZI00uP3zC4sX7MKo0sYSRW1HLPQI9olNbH0D5obHIjb1DlfLWNijvBgiXAllJmNaJIhIl0nQixq3ijyRXY9OuEGLxNEBlPn1Ei0t7QDyLM7QmKK.oXHgfY.3Fg8YLHCFsxQwxH8vHT2DsHZV06vzdEMktPItL+xRmZnszKveXgIr7EKGHAxYvdTcrVCF2W5p+ilk7Epj6+igsymJ4FzmoxTXkjs1qVVChxXNloiK8hhXAbXGT3buxL3OgJFyBVLq1TR+EsHRACAROSs.CufCEhG9yBwslnaLgIR3J9ob07TO7PJTcl.6Oyc5w3BZT.dNR.OQg2pBbs4KyOBGylO5Y6YN+K6iq6UNpfqMMMPEGhgOr7YuQDbXS+n.xIr4DdBbBUX.I.nm5nIo9lBnZwiMI2uQqb2D4xKqtPC6rrTE848Zy06JSn9rE5u9xEVJMAV6QeR3SRX54S8lbwRWG.t..QWHBOUrDBIWyPzgs.4e7kxxKmGhRrxLxLMTaO2++RBcyyBwetXwAJwL0rXQ1o4XYo7qTsbIAo.NXuigSO+raiU233RKNT3JenYbnREyGNCJhWj.9alXKpDt5a5gkRpYJypW2EmWUDLnRJfxGKUruU3UqxKq3V4hJjkIMZzJokprPV7JIi8dDecB5IlEMjEmYXYLBWBu7s7ct5a4WrIDei+n.iRQOAW8sSYhq5t+VoNQrKfTTArpz8.rQVO.XMZKNbEeGGvEZoQadSUO6UVOoWWXiUlN.0AKwTVrhin2tK6TnEMSeEtNcYImnjSgtsVDzrrqb8q34vC1eHrVyydPeM.Pc292RaCzTyu3Lkq1aY+QNWU0dqh01wUvFDOR244s+8+i4Cr8GG9IYscV.72tL30sZnA+cbLscf3O0a8qe8AyyccO4fL6vLwqd5AKriT9O3.qK2cFzinL.Ozubii3tjTBPdVoVyv1uvJCyK1M8eJcS95B22yoOW4OY03csUfWH85Oa7l1a9FNlFNyA6sbN9G+KtQ76r3Ujr3bPMTdGmhcAeMusjm8ptrPZIG3OTJay5YGrh2mROAr4P0WFRiW18udYad8Wuik9CdeHWeNBZRj2XxoeeGsK+MI.qSIdyAvuqCTa3uAv0zl0X39kwbr5zimEM.5mxmAPU.Euvp11qg0ILiagiQ.MfIBzCvhJoDamUyAI1Ni3eIqQD0OV9hzKygaMuidFvtE5WIpqyivwj1YU8cbZ0nETbLf+Bee7fw6B9mUKyl2.Y15FHy12.Yt2MPl6eCj4yuAx7fqUF7sCe3LkLxj+CSz+H8sursOx7tnvsBV+WTvQERG
    


  • @Fortune I don't know about the first question but for the Text label I would set it here if you want the value from -100 to 36

    inline function onknbControl(component, value)
    {
    	SimpleGain1.setAttribute(SimpleGain1.Gain, value);
    	Label1.set("text", value);
    };
    
    Content.getComponent("knb").setControlCallback(onknbControl);
    


  • @ulrik Thank you so much!

    This isthe latest version, I did like you said 🙂

    Also I realized that middle point is not in the correct position. Is it possible to set middlePosition for this panel knob, and also decimal values like 0.1 or 0.01?

    HiseSnippet 2021.3oc0XzzaaibkzNL0TacwtE8R6oYEJJnZk0G9izXa3t1Q1NUnaRDVsa5tXQP5HxQRSM4LBjijsZfu0a8TuzeL8T9AzeL8dOj9dyPJRJK6l5hcQiRjLm48w799MO1KV5yRRjwV1te47ILK6enS+4B03NiobgU2SsrW2gZ8j4SnIIr.Ka60eJBv18AV5O+yO6IzPpvmkukk0Kkbe1myi3p7c+CG+63ggmSCXeIOp.16dbWeoniLTNMFOrVVSn9WPGwdNEQaMGK6GdV.WIi6qnJVhk8CdhLXd+wxKEF7eIOgOHjgKZa0GXjY6ykgAnDi6Z0YLOLnWlxlXAboWtputQ0+INOiGvWretI3i0.H4TTzdXu1cIdsKJdsd+EO6Bh2CLh2m3z2OlOQkCAksOxoqPwhGRAWPQwxfq0Z+0OxoiDvPnZDQufcdLrXAEda2pUcx16zp1gaVw7OvYjnHynwj97nIgLzc2lbDQGUzXDSc1vgLekWUCXhFdUj9bJ+b5.VHRT1ICj0QFMQJfEdUMfqlelaVoYyd.eTjX4TEWvJxrKDxAFfGQFNU3q3Rg2nZjlMeZnb.MjLoHkDAiEjPTRxHIY.anLlo4.wOlQQR2rxa1rhqZLOAkJupLAE7NAUqQN5HhJdJi7YjQMRPAFCI8ZcUqVmbxI6se6ZjCVBx4mmBAzD2QMFBA3mEFxmjv79110Iv+yOmK4ApwUqs0NE2bLiOZrB28Uo7nL6MepcHQCKHld4B9uacxtqh+Odk7+wupNYGiA2EMpBYbDMj+mXAujFB57QDuLpza3UirUA9DwEUqAl7brf8nWUcUXg5gVbikXFg2xG0ujztwt6.+4YTHfpW25ju8FZQysWkVzbaiUBXOA9zr4oR0+k9xS1O0jdCe4Is1e+c6r6iVkub68pS1G91V+UKDWeX4jkKDC.inIVUvB8PRvuuQqQGzdOHOynGlm0AsegIl8fEg30IfM7fsZ2pUC.GvBevNOpNIfMjNMz3XN.fbMDPzrYGLf1Dbaxg3hPLAHKGofvbUcx75D4f+XMSzenzGxa.gWEKCKjlRCBLDTETmp0IHcoAMoHilrLujliMzOqMZkPI0mYvwr3lHQCCkW1A9c.TxOAPtZmPN7TcxuUNiES9EjSioiFwEipdShSnyXcE8hYvJfTzceSjvPRiL.OsBvPLbJX5UYQtYXDPUzFEs8fkBQs3VKwwdE7pdHtEcyYwttMaRNkMD8UThep1C0pFSmwgXQxkiYBxb4TRBKDpzBHMQNY5DRDSLsQiFkOwmImlvxLgdKpOxlA9Sva6htaW9PhYmF9n8kEfPLfPgoOXIgzMFDHiZ4vXYjdYDxahlDMp5DMsUQC4TnEWlcYohGZM8Z7GVXBK+vxEj.4THUU6t0Bi6ab0+QiR9AUx7+oPV8LI2H8YrLUrRxN6USqQhxPNlo8KcihXAbHIJbtWYD7GSEiXAK1UqJo+hZDofh.QnoZfAWvfB9C+ogX1IZFSXhDthOiqlmZgGPglzDHEM2nGiGngAX4j.dhBuUEXZyOluFp1lu5aNzTFL6iq6stpfoMMLPEGhtOrKZ2gDbYS+n.xEr4DdBTnJLfD.vSMzjTaSAoZwiMIOpQqbyD4lGqteC6xrPEcYes55cqAT+pE7u9x8WJsA1BRWL7qRX58SslbwR2J.tG.Q2OBKLVRBI2wRzfsPx+zaDkWNNDoXkQjYbn1gt+uED5lGEh+b8hBJwL0zXQVAcr6T9MqVtqfT.016XvzyO6RY0MFNS+ATSLsHz2T60yR8byR8MUIAOop9NIEthHpumnTw7ASgl9EAf+lweThMW+yT.VwtBKdW3bxatt5KOhclpY5bq0gE09JpXHSJnwOWpXuP3Uqxap3V45JjkAMb3JgkxrPV7JAiywDeWD5IlFMfEmo6YHBWnu7DCN29DCEGnw2XOJfnTzUvUuXBSbayQXkZDwIJRkJ.UkddhMylm.a4awgoFbb.SnkVZyGPa+2Z8UcOERRy3AvN3HlvhUbT5sOkMCF2yLihqyorjKTxIvorvoYYW41NwJNCd5qMKupvDjucdwE5qX.Rm8+.VYtKAt5eAqFHiCXweAMfOMo3Dnl86C25r3tbEKJaRS2G9pevE+4x6tMt8eYieyy0X+9H+FK1Un37SARlm8PpH69v+V5QmI146T9xOV1+Lma6xOVEupCdB1.4QEmB+adKTJDY9OOSUKH7tkEdctlV32vwjJVzz243bS+wCOdH3uMChugyKtZ9HHRC2puZNFe9PHxMLvBShyMqu6cu6uiTi6hjs016A0KLjUxerywV2bHWXTaY.16r772XMjT.PJVoAcwgYwFryK9RI9NYn72Ww8Sb5wU9iWs7t1JjWHy56Z4M8UbroiY78bg8ANm+0eO+9L1XwaZZQWBsn7ibJ9NEtiW5z9u8TVHsjA72mlvkkPb7JdsTcEPdkpmLjFur4e8x575ueUj+O7Zkt6XDTkHevDS+iczl7OjDXcHwGNB7G6.sU9+.w0Ls5H3Z5wbrw1ymF0GJs6y.QU.88vKrXuF1pvrtEtFEn9LQfdAzA3co.am0tBA1NC32KmQD0OV95z6Diolan2Azagtglqyyv0j1YW3wwoUiVPe0.9q88wBiaA1mUSy12CZ14dPyt2CZ16dPyitGz7quGz736jF7krexTkLxD+Caz6L8EOssOy7l8vTAq+M3+ZQGE
    


  • @Fortune Still have a few things to adjust, but here's an example (inspired from Hise documentation)

    HiseSnippet 2549.3oc0Y0uaaibDmzILHxs9Px09Os+0dBEETIxxRxw4ZrgwYG+Qq5EmHDml6BBLtthbkz1PwUfbos0EjWi9W8cn8QHnOQ8Mnclc4GKoo84y.2gFEaGxcmY1eyG6L6NZXjviEGKhrra7pEyYV1+RmiWDJmt2TJOzZv9V1224TlmTDwoAecnXDYcqmtXNMNl4aYaeq+HRlciaao97e9pmRCngdrhgrrdsf6wdFeFWVL5ecmulGDbH0m8J9LCpezNC7Dg6IBDI.jtkSWq4Tu2QmvdNEIaIGK66bfOGfywRpjEaYe6mJ7Wb7TwYgZ5eMOlOJfguzy5XPP5gOTD3iHFG0Zuo7.+gYpdrEHkgEFhaoMD+Zmi3977wKLH2SMAofCS6g8RWE75YButWe3Ya.uaqg28cN1KhOWVLChsOOczKAc5IsV59+Jm8DgRVnryL56XGFAuL.dOZL0i41ua21D3Os1Zkk0+C7IwRxozHxw7YyCXnWuGYahJToyDl7fwigfD2l5oIp4alw+ZqQ1KhA1ChJ.5gjmQGwBH7PhHjQNi6CBXkk4gAb30wIgdRtHj7Nf1gzPVfaH36aSNuMYQahXzeq0JK+9UVtQfviFP.jIiDAvJ0H8Q.VY5F02upDPLQfO.8YTEyPi3bVjjyhASwr+7wu34tDMOuWSN9oIfT4zlahXni541FSNkwmLUlNq9EyooAAhy1C96HHdNFHq4dAb3o1j+j3TVD42S1OhNYBObRSS1homxFDNLhAfDXRFkvLmdFOLcEgmJMA87rInmC55GP8tQgQpiOUR63yFSSBjulFjv.yFRt4PaUk94F1VOkGcHUN0MS1fedWees2sJqAJWdIWihNkqABIZ9rQAMKbQMtd9mBFuR+D4Ajtc1vz9fVmyAtcKSS+MZYR0BfpE.UEtTSSoRiGBQ5RRjHQBAuFJMBZbpWpmwMKr1cRK8BX.X4TdLtIxsIKjBIG7a1hr81JmM4qHSPYoyH5187tc2c2c23I8ZQ1rxLGdX5LaUH4IcFCoYOHHfOOl491dsIvOEKm1P0Z00MGLMPFF8jxhp7ho+zZKhII9QzyJVsMfkaiZWut0ufcOoMYccViLYh4bBEQynA7um4mEo5lwsZ.2VjUMjGtonUKxZET4p1OTGUZWY1hQfH39eY2+8+ByM8RpOws+vAqsdqxvAj0KER.EGAA+cjBfPNML1E3zzfgjFIfx.XxrsufR7fT4bIbrKr8B35sWv3sV+5rcq0+DCAU7DnPJIB4UEQ.eLhuPZ5wzy5lsrsKA.k4ogoz12j6eLws69jz.lKD2ta2m7jGs2id7UD29HHdoGVTRGRcRE2VgRhIWIRATUX1bVXrodSi7pQuWsG3HtbkuVCJp1D3GTpwRZDr8WEATxOpl3EiGCZJ3F62YispQXHg.td0TnRPHTsFnramtquUUB9FUBpsI85zEhg6C+8Ak3aqkMw2QPEcRbRDirPjPTkNTXcNDt9Ekcd5r5c7BXzHHMdIw.UW8RBPSHxLKzOUMIigTvpw7RhhfDz.Jg.5RXFnNW2W0zT7vTzaN1Cpt2nLNlkqN3Z98rHgdAIXxlXBk.4WW.fhpO1fXbl6NWHlnQsmE144lOX6pHramdULEXUsTgBGWAbE3KS3mxBggf8oTv3vkwvZihHFydjZqb6R5zoCo+CFNnUsldnN3tQdtu0zc1lbg2TQ.EOcRYP2tPEasUsYr0+WbmylxkrJZmJdNjcFYFSNU.tYlLIJLM9FhBX9jQhjP+3Bc2S.ddOLvGr4k77XPVZtKS0DxR7TkLxyIqzC2VUvh1mlYqcShYou.RTE2QGAGWB2hSOUv8Imw3QHhQbBmcpUkZQpimXfi143qHIZJPprkJa2+GJNDLd9l8YiwCoRwcGpixQFwlROkCFWxYSg3AbKWLK.MNTxbw7j4fYMLABBJe3fiDftkcdvhSGvfXJITuoAdBWb84i0iA6QAjw7Kzv2WT1Ra6vyJprV5sG4aSmgKEQweIVJrK9v0SxJsVoxZQ3zGxeJGSfIdxU.n8JkAwmCQrvUCIIwfmBdkNQDBmfGEBr+d9bQjrjDvvIbx8yXbaRwx9svF0U6oxkTL3aLBlpECwPQAtjeJWtH0JMhBWMBtGhggKhFNgUKRN1f8swaHcMOjwxWPZEY7LztRJ6ZUWweHcC2AqU.2.7x1PFIbeRQpJkd05hPgcVluWkbTQlacAGOrFX2tp1VZ.zf.p+JWXQkryyu1wAgv0dXv5j.mg3UhikQP7gaFrfB9lUhKG3ptUAtcxsIJQ3d.4BtJSUMdCl.JCyXChJLJNKACLrxJFWhOHxO2b8EWXuRYaa4sCYtron0sHX6BznDYblHyVrpgPEA.Aok1wagjl+tNJSfKWCkQiXJJameFFJYDDlLlFC28uMYThTkXSOsHLXQcxBptwfBArHyrKYoCSOskjOCluXzwovDtLd8pbJxFLaFCxLHYAKbuDkVgsTUEBUlLgEEmVTRe++rUs9ExS4A7MyrUN61GxuiGdCOcwPi1L7grxAlcE4cgif.4hNVzbLOJVhc6.BI6ug922qNA+l81.NHq9b65mgsMatp53sv9kMW+wsIlWBeyt.X.8NsCJ3ZTffp8LQDBHYOMVcwCAKBYn6VEqk12DiN3fAZ6JAiH33YtlSf+MiMTogeytN9D7PEoR1TQaoOtgZsyKrYBHTPFH84BI6EgtsV98K2XYv7WcpwiqctTgEvhpcZrchQWEitgIyFgA6ZkKiPK6aWtwcNWdi6L6qnm1pXPnHbPHW9B39GWV67rRMkXi8RQEPpT0VuUxZqGFGYw8sr+EN41XKElK5V5a9n0eYv9PhvLIABsnUIvX6yNk6wzMLrgy9r32IEysrWJ2AZYu70YcOGrG1+FXEWj8fJVFD5c96oc4UGQaNxLUmguy+3+p+.A23q+tzYM6rEJTaXrxMIyx925bYMICsg4pvcJqBp9JoTgOqPEd1n.TKRsb67hcVff4elBlLsQO6Ge4NXYDK665f6K6z0x5h8e8dNGI7wpukaMLtwIcBHrqTyWwFrhUyWX1u7eR5W70Et22YHW5Msd7tTM3Ehy9oFuoceeEGcKkK.6scN7a+YtU62M+qDIO0nBJeliYetuhuOj27w8YAzRFvuoTnl0a1oluwjAgPztbnHfFU07eqx57stdYo9A9FOt5XDTkHexDS+4NJS9mR.V2dmOY.78bfhD+e.b0sVeBbokHNVf54IyNFtGtGCOjMTECKhauDVtU+dW7cDPvkp7UufkkRmrWVMHbxdYS9yxZLi5EI9tzSXhaMuqZDPuCUeomMbNBemzKq7uiCVSZF2m+cddXhwUA6S87z+Fvy52.ddzMfmMtA773a.Oe4Mfm+vUxC98+tahTLSG+CCL7.0wvrsOP2Ibbqf0+Cf2MJmH
    

    As you can see, everything can be embedded in one widget, so no need to add/set a label manually



  • @ustk great snippet, thanks for sharing! 🙂



  • @ustk Thank you so much for this awesome snippet!


Log in to reply
 

5
Online

491
Users

1.7k
Topics

13.0k
Posts