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

Mighty23

I'm trying to make an arc in my knob. I'm taking inspiration from the snippets in the github repository but I don't fully understand how it works. My code returns an "unstyled" knob.

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 = 10; // Thickness of the arc
    var arcMargin = 15; //  not sure
    p1.addArc([arcMargin, arcMargin, a[2] - 2 * arcMargin, a[3] - 2 * arcMargin], start, end); // not sure

    // Draw the value arc with .textColour
    g.setColour(obj.textColour);
    g.strokePath(p1, { "thickness": arcThickness });

    // 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]);
});

d.healey

@Mighty23 said in Drawing an arc for the knob LAF; where am I going wrong?:

My code returns an "unstyled" knob.

Are you using local look and feel (you should be), or global look and feel?

Mighty23

@d-healey mine is:

const laf = Engine.createGlobalScriptLookAndFeel();

the "basic" version (without drawing the arc) of my knob works, I have to restart HISE to see the result, but it works. Should I set a local look and feel instead of a global? Checking the API I only find this:

@d-healey said in Drawing an arc for the knob LAF; where am I going wrong?:

Are you using local look and feel (you should be), or global look and feel?

d.healey

@Mighty23 Yes always use local LAF if you can (there are a few places where only global will work but for the majority of components you can use local).

Mighty23

@d-healey
This version not works

//KNOBS LAF
const laf = Content.createLocalLookAndFeel();
const var Knob16 = Content.getComponent("Knob16");

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 = 10; // Thickness of the arc
    var arcMargin = 15; // Margin from the edge of the component
    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.strokePath(p1, { "thickness": arcThickness });

    // 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]);
});

Knob16.setLocalLookAndFeel(laf);

d.healey

@Mighty23 Can you share that as a snippet so I see what you see?

Mighty23

@d-healey

HiseSnippet 4695.3oc6b0DaajjctokaYIJOy3Ys2M.4PRuBSVP4gCc2M+ONdL0uVJi9gVTi2YWGCMsXWjrG0ra5tapelAdgR.BvDDDjcys81dO.4RNDDjK9TR.xgrA4Ttsmx48Ttj.37pp5eppYSJJZ4wXFHYXa1UUup9du58d0WUcQU2wtIx001QH0r6cZOjPpaJ13TKuNK2QyvRXiUDRMiXcGjKxSXoS6o45hzERkZpGgqM0rWWf7yu8gKoYpY0DEUjfvSrMZh1znqgWTo0q8IFllqooi1ynKSqKTail1VKaaZ2GPxThxB8zZdnVaz1Z3lcMQgTSuptgmsSCOMOjqPpqujs9oM5XerEs8Owv03.SD9AEgFPGQKdMaScLhwkJrbGCS85AZrq.zK0iz+on5+cD2xP2Hr7H6vsHUHEIAq8H003g2TbvSgEdxLvKAHkhARWmBo2WrQSGiddQ0fwybhaX4gbZoAlcVnPaqv0ty2SbYanEVd45pcHZMG3gPIxnnTnPVo7JpKb+zou289js2YoFRat3ZoSCSDtdRlZsjdfTPGzzAA50l1M0L2z19vEszWCgLy.xRa8QZNRehk8AJkXDpMxaY6t8rsfGxLOs54wCGz24bPsMbAvrVeqldF1VYlW2Q63cs8zbNsgogNxY9rRsBprcVI6C9hER+UokfevilFLPPQ4z.jceRoj+4d2SZEnej75fjN.bgZ6X22RWBYZZzyEQZR6btXfgc0xf6gCZSeXg66WcKvEcUp.YzVXHctgkExYj8qgGpK8QkD65mpHmUB+Wsmp9LoORRk7w7zO9rXi6xZlM6aByAjA2ALSX6hjlUaSTnMwELddfcQ99XQZfexvpsjlmjrjiltglkaXaQfU4ARpR2UZKMuN4puA7ILpORyrOZaamtZlFeIRmzSqZo62Op+6mEzSRsrcfIHSyPz3qijGQYfAHqzSI518jT8UM3SOaXVTKDR277LkpblxcQM8xDNFfgqBcr.KYkrREHVwW.+k56g6zAbgAeQrKIie7AdVaX0xdnNx90OOmyeOKyQJje87BA8zRfO5nFIb8jXFCKSCKTXDgjskONvh5XaloYfbYkHyg3fkYMZIkg7jzCdfjxBPIy5iDrwHy7GQSKAgZdNfH2Gp+Eyl9E2O84n5z4Gx.Cdll3HsLwQzPQMVmtjPcKMSWeXORTSMiCE0LHBi5nYnk564YaoLzYH+54mVan402QCVL.DirVJVnUa0B6rNeXk7xrKRu+II0900bzaZCqgskFIc4moxK3pONwQgrFfzZeVLnMPuoLVioxPbA8U+wexTlLYFZCvSHAKckIZtjXLFRcq93gTwffN4F9hD8uRFRgAEChnvphAnvxOG7D1tzix0Mz+JYWWd6OzcuCrV9cSiS9u7hatpzi9zMRaALnbA1THoepsc200rfjrN3IlHuhs1X68+o6ryV3kNxUo384pawOKnN0bxbUgKd+F6sZchbp7xsw16s5tqs3xqt+OdiU1acnIXFGCoIqu5FOZ88f1.7Q.GM1w.vbcMKj4PCACaA1GcVVYABEsaibVQyCSV3o..jypHWMqRg7YUxKmUUoR1RkgGKCerD7+EyVB9O4JCTTLAfVH6+mDpJVQgsbvphMLUqlH7xiKRNa0RgC.eICh.LjKAkjOn9zyNZLxKPB.kaDGBNkUypplUoRzfvWxPwoRQkgzfjgYP6S.mbiHAmJfxCleomQbNRv8nNP+Y.lt3ByrfuHLMLmoslNvjtK1oJCiCFssg9h3v05vFG710tOvACkIhI6BomEmvgkhC8+bycrgWmEM60QKpjN.0mrRY75X3lSGFmbcrOB3c9i9QRQEA4CrOFnQ0dAoGhCfk9CwgiKPxtP4IQTGF0.Hlg4GAzOI+8Yj7hTUHdRdRmi0qL8vJFvC2xWCHOGCAXR4V2OrRPE2xtuKZYPWrApbVROb9krgbVc20ncGP8c.Rz6hbAllzlLOf84orO8KHqTLawSAxcDhcAChCpG1RmwO4d5Yifb37QD+lXSRT3EjQMbVBcD3K3qmws8OPhTK8IZFbXEEpH4ZZZz7PjNHJQVFg+RXXa3SPuAxCyL2EmJCCmMAgI6lByigo25hQ2m1Kr2bPvpTV9Misg341vVAk9CSx6.WWTWfehDFXn011RCmfkrS.2m63kIV166FOa9GNPx66Fu.h1PFgl8cb.PhUzQq6yFDVV23DRFeYRo95Tjl9YRerTzS+DphwJGWauKK.V.1fPLkgLFHfcvn5lexn5FpBGh0.Moq1IMfcafVSqIkLHyBX.AMDxZI7lSc84lP2eTh8J67jeXVRNVeXjwKDLbh8gfNEspMrUoERtc9tBcMrxvVd1XpzPj9i7EuUWa8XxGN3TQSZPcf8zhhIV.AkrgzQhFZrsAaB1y9ScABcb1Ie2bv4g0G7G9fHAH9NjnlYCcLcYcLiZIYDegeHZPdAtjO3calN8cuW5zLbj211CsiUFBWXnZo3U0pUh04yoC3pkX03iOyYTBlwpe2CPNrLwwMTH004OnJwgePUrmiVSpqKSCsg85Y3sSOj0vNcMAe+cAgTy5iJnodjiz5c8ORKJCVACcnMh9zYEHPl8nDEFl3zSJhH9MDw6xWcxDdFhvJxwkNSsKfzk3jtVqV+fWNNR+dhGZc.lPqC8r8dcTfxSlz2hGBwmAZ+OLby.2Dn+A.DHtXpQBf3hh2Edb7+aenvmtAlfE9jQ88m.erdHGOCr6apUPGYzDQOmzYEWA4dnmcORa82gfPpooC66DbJp309Ii5bhgbADNg0lcJ6CGan60Ir.o+lZcPXxKQMwqVp2kY3laXC2rh8rL2BebxCYvN6m8R9A6W+KFXv9KpEcXXPoS+u8e++7Jb4LGQFawdnS7hZ7qdEoPgfi7jsrdZ3Djr5Ai0Qfo7YGl9MiH4y4YUuB0hTuWZNf173Z7JrfUL06O3Cykj5ET7kFnUY.8Y+kLfFzfAfXLs3rmGCz+N+dymDnCJdrA8LiQtRFa8GvB6OHFrq0KNr+7unFr2fttdPeuQWs1vH86K9U02cm+3UWdu8WamMWY0ceAjWfNR45Y0d7Q9bmi4lE2+7d7l6Ast7ZxK+yhYt+a+m+u9WRvbGT7A1NPdtc0zM56xZenk2.16Aaz3Xqh2fWE2T6fPUj7YVU7kNrpnUbOpOef3h+nZiMN9dm6JhQ3PhCG6UCmcf7F+nm9EPfP.3r4mIsoAVi.FeQRTqlqGpGiI6W8K+k+iOzseqVFPqDEkzWRnqgttIptsqAo+BkUtVu.tAaPx8FdjaXatVWjGhTwzhj2sXLSzACXhNXL7d6B8DwFP7dciXt52MR+cO5+3g.QoF3dIx43rsGey+6d9bJhLf+lujw9+4tg1+5HsCUkH58Hs+puF1eAnFlGy7RtoiaJFcjw7yG2fhNgKOKRIFKxu9OMIKxbh60Anhzw1TezFDAgI2fT6kbFjs4MH2QbvCvk2vvBxw137NiMMvHs7W8yRNpkowmGzU4gdZQxAZuEXjtnAQIFsLFAqCI3arMbu24S8Mxhcq+pjrXoEq2A5MvEWXL88SK9HS6CzLW8widFN1BTCn+PIIyPfkHF73qngoI6u9adH3qc7Sv7iqa2qeObn4hGXeDJ9Be.it+Weh2gn81iO2elUl+yuXNdC2PJJtY80dS3qknsdH9ZzLIyItlC548QVMOkKi3W+2WiM0xW+eFOWKY2HLoVV+KG1T0W7uV6hRLcjamhYAjeN6LxGGOv6iGHv6iGXUxe2AL5F3WrJ1diey91OxwF6aEoxu9j9Ha7IllL5cYM3FeNy8hswmIfc2QAG8Aceqol5Br+gBiMQbX6hwTMfU1q2ldhruW.OKxtsi.cs+ZdPed6T6r8GCOK7Xj7FGhfbxNcIrMn.aOczn1dxm4RYcFiZb1S3A8BE9Jd8pV97+IX0v+ZlMX9HBtjTTTOOsPXvas0sD2xVGemc3uDYXVd9UfyYvdysv2NKKHWxorVhKsaV13Bw2WrtgWyNIiwqk.FgPk2DXz+938NhzqkPD.utHrB9alKeG68A78CNToFcz5gfgjdo6h11BKDVtuyQzKp3RFZtahZ4wZevksKe7jfv5PA0gNfcuuaZeLWQvpPaQ4+52j6TamiPNtZc6YZ.djQcWM9ajof.lgG+Exbw9d1si0Jx8ybCqd88X84Vww3HFF0OtFloH6s8jn4qYXBKu6x4HL0XOSnLZGA5KNs8VZPBF75saCbAfDgMQfefEjvEez0otFljC8Y4fz1MPV5jG.ZPuxuRE7yo7qTInRVmszzI6ueD0YIJ2YI+I9DIUy5ArMx6XamCwrfbI4o1u0IpBq.pNY1JZl3+6epVTowMrFdqf5wtZwcqsxx6ujQOaSMmXsLlrgT5+tv7geBpz9478mD3HXlvcdM0WKF8pP5ge2LNn8rqapcZFp4dWM7qP9.S6lGhoFL36OwmO6R3VjooupMIulko+1jgO7E0H36EStHxgdz2fl4a0m2mboPcDdBD1SH7dCQ4bveDVD+RlwKLZ3ujALmPJqts4o8fccYzjjkjzh.juXW693UQovecM28zLLwqwznuaO.e6X0.ZL4VkC43SsMIQ3zTd8mhuFC30pvuXJHmFxIWyvEHXgZjWBI4eGbBV+Ml3Rs939Mf6E0xAvrKY8c78NeJb8T6AE.3QHsntyo6eLxSQXn3wERQ6cti3MEKnVoP0xpUKlOFXSFFWiBCwHXzCOzmiYgumGWU9ZLp76Enx6203DvvxMf2hLfP7PtSZooOfYenJL60ymGBLujGnD+m.RGWihEHJfwp9D5KMZJQUBCB1lNsHYAT+VLi3lfQAxjJz3XLIm8zbZi7HCAaA9urIKDIZ2k+QeyB87Av1DxZp0S3LLElr9DaiGdexn13ur.AOAoL2xvxWMEwgkBaocR3yJvyXywMDoEg4BzERME7UiX.eaB.3limClicP4ZOZ2owa58ZbZwTLZwzQZwLhejhbbEA+bivMleG3YnMjeTJTUVQoDjN8PzwA69+1hEyUPUUsrb4xEpTPIubUApaAwZxXFfjPICi3FyYDwi3ECF3FjWVQNOzfpUw1GYk.9jcss85fIy42+SKph6cgu4MJ2TbW7WzGZ2x04Brgibtfb0P9xqvF8cSwMbeBt1lZlA8HXn4Rggc2eykBaJlw5Fh58618T9AJsXWxccouYTO7AhKpqS9RI.fSZkF0C3Ef+ZPzAAQA4xMfWe0BUKgc6iAzX95SbDKWE7yGbAugYOtJ38pf2DBdShEi5kBKlhkTUUJU8ByhYtPVLJu4owbKdZLJud7XBT4ukyiYtvk7Ut7HxLWXpHk2RLYXUqIMa34NCeU1vqnxDjGKfJyan7XSyLXyP4xn7cYxLrYPtJ98p32gxlwOhv8nV6idd7UzaQOl5b90dwB8vmXkI5jfafZvQdG9Q3CaXoiNA+VI9HkXqoMMicSLxt4aUirZyBE3OOFahRUsZU4BXe37EpTtRQ+Ipn2fc7U+RdDuMYNmNKnTUUtpZUlg+1hUyUoJ9mRJUJlWVsb9AARoBkUJWQobd4REUpTh.joDebvbCtMkkKUtZ9hUTqluZgB4KwgFlzC2.rTU3L.SKRJfIZfoaUUpTsRE0JJpEA7qVXXJYxYclTW+uOt2jAiN3RpVrXopppxWfgt.WXPTBPdZbA4+tH5SBc5rhqZocfI3Dbt4UEosmFKnbUnxaoPkhEfTckqTQtrRgxkTTuDBUBxN9MPrwOfDaTk9S4xkJTQEh5u7CNjeaFbj+pfi2BAG2VTMmZ4xxUpnnHWQoZwhUechMFO05amQGEdaFcT3pni2RQGkJTTVoZ4J4qTJeU4xWEc71N5309HDd81R8Lhq3b5OF4Ee1b7NjtANNz5728e5v8cHEN9qw9BpuolgEtzCQO7Nhednm6gKxaXlbQC3PZnQPHNdtt3aXjnNFHgrVgn350WS3xIibTBvhPtlRkjKkuRkJ4KHOty6gmNPc9uCGQI4S.+ad4i+hExqjqDrsR0BpxkKUtvXh+n8rM9J.8qtixkqJbQ7Yh3ReQAs5aePWX7.80oKzQrzjUUGi0fu7LkC7tT3.j52..pvP.zDrtvj7M8l8RCNyDbINUF1k3jbyXQNqzntvhdd3eM8w+qrz6TC+qQPsNHM8ApYWjIRyEEq7MpE8EFi42Q.e65NZ9MwXzUqoi899uIVxhtjR.81hbO8mUbK7yRI7aJhtF5F62rIeWMffpSpf4mTAKLoBVbRErzjJX4IUvJmuf3eC55SaCmMQPXq5qRh4SkJfoMDEJ7+C3YgYQ

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);

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

29

1.8k

10.3k

90.2k