Change the slider name and value placement

Oli Ullmann

@Mickolos
I think you have to use "drawRotarySlider" not "drawLinearSlider" but I'm not at my computer right now...

Mickolos

@Oli-Ullmann You're an absolute legend Oli, that worked like a charm :-)

rglides

@Mickolos Yes, it was the settings. I messed around with your original code a bit, made the laf local, also just added the setMode at the top, it's not necessary to do this but I like to script the addKnobs (or add whatever) in my references so I can easily work on small parts and then copy over to a larger project without having to manually add everything every time. Anyway, this should help.

HiseSnippet 1637.3oc4XEtaaaCDVJMZaIqqXcXO.DF6GxqttVN1cCHna0Iwtyn1IFwIAsHnHfQh1lyThFRzMwcnOaaOR6MX6HkjMcrTRpw19yLZUD4cGuu63cm3wdgbWRTDOzvbqSlMgXX9Pq9yBDi1eDlFXz9.CyGY0EGIHgn3o1a1DbTDwyvz7AuRNg4VaZn98m+7dXFNvkrXJCiy3TWRGpOUrX1du70TFqE1ibB0Wi6ZursKOXeNiOEvyCrpXLA6NFOjbHVx1FVFleVSOpfG1WfEjHfm83dy5OheUPL+mQinWxHxANF8gEJdZi8GQYd8Rs0HCCyM6svxePrk+sVcodz4yuvC70JBnERn6CL231fjym.jL0fzlwP5wV8cCoSDKnHwyWZ0N.1PFfAWsNTh40XiW8Pq84.GAhx93wjVgvf4RX+7JUJgfGE2c6sA2cj.8dbH50A7KcPu.kJH1ySNkcAEgBkPNRwbjhEya4Hh3XbvPhsZ9RnJkq3nSruXFifhWfB5D5x8jy2gFPvg.kafhp4ghponXm4nn5BT7zT.tDRppijyHgBpKlUPm3JnQCNG1nayKd6E8NpOfoZ00Q5YM5b5BZN00HcRy2bxE6eTmiN8XkoHCmiJe0HpfnuB86z9flGuJi7Po8DR7xf48d0p76gCGOLjLKC16133WmkJtjA4UKYoiCt7hNMZo45cCIP.cGN3u5v4iaD30hPX1fCJg2xgjgTYggVSCbETdfcAuP7UGyE3vY8YTORHrgMHgHxdXID+xes31+FB9ss7gTwXPkvzkwf51cNkm8L0FDZO.mCC4SC7Rvth5P49V7Xj8M8L..i4Y.TioIiQmDQrwIytzh2NHPVUKYcZKH9Hmh2TA1KsMk0hirOudID7O74UeG5opbA746.u5T4c55UeU0hQlul.0Vfy2tPiPJDjVBUsxMf8Af+E7ZroDjfbsXgSDbd59wjETtczfQGFP7NAX2tKVLprxaZKYUsPEKgNWlxTRsHfEj7hD+5A4v7Ebg3BHtrPVnRLh.AQfWM.pUitjv3wyoTx5Y9N0JlmkHguzCDC9E.dQBql83TOevqBD5BYPPjPOdDUFpN2sFAQxBvuVsb8cmOIAhEeQBouGUE9+be4g7PeLi9AhG.EEGo3OjK+5.xFDFfrJP4YnpIwIvax3jkhMSfT1A81YkduTn4wxMYh2wDWATLgQrmqS.Y0i08NpfVGGv4.FHH9GUKwcjdGWmbkz6EY2YmYq6ySKCihWkkMRI5avXYkVmSV.Z.MLR7OQFFc.xV4m9I0FSQox9EdH8CfLXlhkXyasRuhyshiSyLjbNNRryD2i7vOZZM+zj6UpRF4I4mj7Q0SBCJxA3Ice6+kNh7BPxM9PlBbEjBjj3Ua2knbcJk7JeXeE5InZEyg9SPUyvUkWt+0kj46WM2nqAVX8TKCouGmyVrDwiTHdmLrkYoTdZ7ex0jFIwcQ3g5s7LtLMra+6w2Ku.3Blk9Q5ZkPizcBpZeamdzmgRk4OgGPjgWwG.tnDBqbZnjZkfv4Ka06R14GQhGbHWPNJvVVFcqsgruaRZvfLoIUdHmwHgYRV1kU3sIncvT+KIgkhqpNmQnMjk6s4yte813F6KzXjGzNfJNZBIYbKNyS1yh78U6DxHwYB8DsQBBAVEpNhdTRGQw0DLnvh74VpsHCE3068z3dKb0aJ7a+CiSae.Vfk8kk.G.hSj4GROg4Aj2CM1F2k1VVGPhFK3ST3MYyG5j9NQ70FlVldf5lk9hO0yiQROIhVu0+tO95EC+tWFMcv.50plhgvc+HAnh19PuxFlei0oPxrGY.dJSfhFCcwxnAigxfbE+WQ8DiRU3HBc3HQ5nHXKSVrbO90xFJMzrlGcmtvkslRlvxIa7xvbaqz5J2W66s+2Xe95WeArkuZC3Pq+buoLrX46CPdwGIDjlgdS3xFsC.yal9Ei7IbIAUt0KI39BwGa0iJbGkMF2HCLJy09W.iIWsxWY0bv.nT7B.toUq2rt2ixcndnzufFLDNERnLBx5vo98gub3R.sCs7whjQCaHKODOthbrzCzGNdtZveA+RH5HGalPzIkngO1Mjegab8E4k27EpY.LEntqpsr5JGixnpDjBPuv0c4kZEAqttBty5JXs0Uv5qqfOecE7GVWA+w6VP4U80Xpf6Gm1XXzsWS0GBLMaFfgHPUzpweCvt.peI

Mickolos

@rglides Thanks for your help. One last question:

Is there a way to target all knobs with this?
const var Knob1 = Content.getComponent("Knob1");

Currently I can only add one knob to this, do I need to duplicate this for every knob or is there a more efficient way to target all knobs?

Mickolos

@Oli-Ullmann -
....And how do I show the decimals in the new knob like the default shows?
Screenshot 2025-06-09 at 7.15.08 PM.png

rglides

@Mickolos you can write

g.drawAlignedText(Math.round(obj.value * 100) / 100 + "", [0, 0, a[2], a[3] - 15], "centred");

although this can result sometimes in a value like 25.100203344 and I'm not entirely sure how to solve that

For the laf to work with multiple knobs, you can write

const var knobs = Content.getAllComponents("Knob");

; and it will get any component starting with Knob and followed by the numbers, so Knob1, Knob2, Knob3 etc. You can do this for any naming convention as long as it is followed by a number. You would need to do this in addition to addKnob, if you use also want to use that. Then after the laf you can just write

for (i = 0; i < knobs.length; i++)
{
    knobs[i].setLocalLookAndFeel(knb_LAF);
}

rglides

@rglides This is stuff I learned from @d-healey - watch and rewatch and rewatch all the videos :D

d.healey

@rglides said in Change the slider name and value placement:

you can write

Engine.doubleToString() is probably a better choice, or even better obj.valueAsText (I think that's the one).

@rglides said in Change the slider name and value placement:

and it will get any component starting with Knob and followed by the numbers,

Almost, this pattern will get any component that has the word "Knob" in its id. To get Knob followed by a number you need Knob\\d but I'd try and come up with more meaningful names.

rglides

@d-healey haha I just came back here to update my post as I found somewhere in my project I was using Engine.doubleToString. totally forgot. And thanks for the tip on \d, although my solution seems to work for me, maybe if I open/close it'll stop working, I don't know

d.healey

@rglides said in Change the slider name and value placement:

although my solution seems to work for me

It will work if all your knobs are called Knob followed by a number. But if you add a knob called MyKnob it will also pick that up, or KnobForDelay, or any other control with the word Knob in its ID.

rglides

@d-healey Ah I did not know that, ok cool

Oli Ullmann

@rglides
@Mickolos

@d-healey has already said it all. :-)

In addition to “getAllComponents”, the following should be said: This function uses regex to select the corresponding components. It therefore makes sense to familiarize yourself with it.

With const comps = Content.getAllComponents("^.*(Knob|Button).*$"); you can, for example, select all components whose name contains "Knob" or “Button”.

With const comps = Content.getAllComponents("^(?!.*Slider).*(Knob|Button).*$"); you can select all components whose name contains “Knob” or "Button", but not “Slider”.

And with const comps = Content.getAllComponents("^(?!.*Slider).*$"); for example, you can select all components except those that have “Slider” in their name.

rglides

and @Mickolos - Using David's tip for your specific laf would look like this

g.drawAlignedText(Engine.doubleToString(obj.value, 0), [0, 0, area[2], area[3] - VALUE_Y_POS], "centred");

rglides

@Oli-Ullmann Useful! Thanks Oli!

d.healey

@rglides said in Change the slider name and value placement:

Using David's tip for your specific laf would look like this

I think obj.valueAsText is better because it will include the same formatting as the original knob.

rglides

@d-healey You're right, although Engine.doubleToString sounds cooler :D

Chazrox

@d-healey said in Change the slider name and value placement:

or even better obj.valueAsText

wahh? Nugget!

Chazrox

@Oli-Ullmann This is great!

Mickolos

Thanks everyone for your input but none of those new suggestions are working for me. Obviously because I'm doing it wrong.

There was a lot of different recommendations and any combination of them seems to break the code from affecting the knobs. As a noob, I'm not sure where and what to place everything...

Heres what I got which compiles okay but does nothing to the knob

.------- PS: I don't know how to make all the code appear in the black box so it overflows at the top and bottom on this page------

Content.makeFrontInterface(1000, 1000);

const comps = Content.getAllComponents("^.(Knob|Button).$");

const ValueLAF = Content.createLocalLookAndFeel();

ValueLAF.registerFunction("drawRotarySlider", function(g, obj)
{
g.setColour(Colours.white);
g.setFont("Arial", 20);

var area = obj.area;
g.drawAlignedText(obj.valueAsText(obj.value, 0), [0, 0, area[2], area[3] - VALUE_Y_POS], "centred");



var a = obj.area;
	
	// Knob Background Colour
	g.setColour (obj.bgColour);
	g.fillEllipse(a);
	
	// Knob Inner Colour (Item 1)
	g.setColour(obj.itemColour1);
	g.fillEllipse ([5, 5, a[2] - 10, a[3] -10]);
	
	//Knob Marker Position
	var start = 2.5;
	var end = start * 2 * obj.valueNormalized - start;
	g.rotate (end, [a[2] / 2, a[3] / 2]);
	
	// Knob Marker Colour
	g.setColour(obj.itemColour2);
	g.fillRoundedRectangle([a[2] / 2 - 5 / 2, 3, 5, 11], 2.5);

});

for (i = 0; i < knobs.length; i++)
{
knobs[i].setLocalLookAndFeel(knb_LAF);
}

Oli Ullmann

@Mickolos

I don't know what exactly you are trying to achieve but this code is now working:

HiseSnippet 1247.3ocsV0saaaCElJIpa1aqXcnWrKIL1EJsdNV1wKdHqnw4G2YzjTi3zfBDDTPKQIyYJRCI5j3VTfcwdd1qvdV1avdC1NjR1VtIHo0.yvFl77624vCOG1MV5QSRjwHqhmNYDEY8018lHTC1a.gIPc1GY8P6iHIJZLNkztSFQRRn9HKqUeglfUg0PlO+yy2kvIBO5bRHzYRlG8PVDSMmZ2cdIiyaS7omxhxI8l6zwSJ1SxkiA7rpcUzHh2PRH8XhVrUrQ+JIY.x5I10o90Z1jzXy508Z9yM81xizj541eqp0HA90aR866uYiMIHqGbfOSIi6oHJZBXzck9S5MPdkH0AmwRX84T8FWTOvyojQ6Mfw86NM4jfPVq0cdpZ0zT0isOh4ylQedJ6aMLvy0HeRyZk6BRteFPxJGjVKEROxtmWLajZNGMd9J6NB3DLf.mM4gRprnU990r2SBRHTUhHCosigMyzvod0pkwtUqt91EKBmOIJ7PgreB9Y3oJERUs378jQijBXehSoWBRTZtBmQ3ioG1pcNc7hoP7enzivOTJG1R32lR4NZclJckXZHSW50drvSwjBmR9wjqNQpHwS5wY9z3RkwASYFVFK6+aqW78ECqjPUo0QNo+kT4pALEErtgWa.DNkZEyHbvB0Lg1kjXLA.EfQvLUzKApgUztrEmEJn9mRuV4nYdoFgsRz6KiOGROvWsBmW6hrE0u.VUxChzXpeoY1eAiWnXgM1.qSU3cgB8vX4XgONEvEKjKHvFm1OLcGXLfY.bE5.NmMJg5PVeAi0QHzWWyTsihFgcWeACZrGjOhR25dCShcNuQYL7UGR3eDN90KqCKcqdwTuYb1Qj3gf25JSX5SghEzwYBbBofXsVkFamRgBQ1yxn+DbM32r73wx3HBm8NpO3HiDFzDK0WPvNflPN1fiMv0xfAr5hEC5LbbKYuOJXqMOXOQmvo9mP8TDQHm5LyM.RZj5t5lzfqKbbBQCn6GzGlARHyxfHp51XF9WRuQTgSEgpA.km9TcYng34rKzP4FE5SKx0VbZILVJNVpnuR3nUuPwOTD+wrBBtUd5aUwRNmFeqr08YiuKEcDii5SiKiMmHyDD5qrXypG7o0rxK8RdNAkhNBl5UinY6aK495lP502r0FJqKgtIWFBAQUlVbOLqEWZC.DCLxWXqKAbQFvme5C50c1mnHSMCXQvKinwJlNXr1mdILcJsyYA68oICUxQFYy5jAd6dc50yb3ue9NSl68eXmD0Dcp4AFAQQLeeNc58jbiM+KnE2ndP8ul16e7e9h+9c+wyixOYEghHWmePax3f.10lQhPcbThBvVmHXRIx56reMb80mFPFyU3jgfc3LwPn4kzH+ULe0f415zcFPYgCT4oft4bEXhlzeLmnVbLm9A.YLzwT9YK54GBHVmjG2eFy9pdmy99Tg3ir6xTdCtcLtxsfQnT4+CLl8hguw9ff.nayb.tlc62rrOO3dbOzcSwDgGQfpCnVw93wQ8f9edTv6vDBNXbaqUzW1R2WUuWmA5AsbMa9W3SFSW8dqLltSYB0kdwx25kdEU+ljuzPAvjv7lsBviGg83a4tIbef8VOuEM0MTr1xpX8kUwMWVEarrJ9SKqhasrJ179UT+B1ViUxnzqMHzQcOvzK0x5.AAp.MUqn+CnJNxYI

Change the slider name and value placement

7

1.8k

11.9k

103.9k