Change the slider name and value placement

[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

[rglides]

@Mickolos You could export a snippet, it would be a lot easier - In HISE go to Export, Export as HISE Snippet and then in here click the </> in the menu above where you write a message, then replace the ... with the copied hise snippet. You can paste any code with the same method, but a snippet would make it easy to take a look

[dannytaurus]

@Mickolos You're missing the * in your regex.

Instead of
const comps = Content.getAllComponents("^.(Knob|Button).$");
use
const comps = Content.getAllComponents("^.*(Knob|Button).*$");

The dot is looking for exactly one character. The * modifies that to look for any number of characters, including zero.

The way you had it will only match components that have exactly one character before the word and one character after the word, like 1Knob1 or ZButtonZ.

If in doubt, use a regex tester like regex101.com. Put the regex in the top text field then add some example component names including wrong ones, to see which ones the regex matches.

The next image shows that the only ones matched by your original regex are the last two.

The next image shows that with the extra * in the regex, ALL the names are matched.

[dannytaurus]

@Mickolos Other than the incorrect regex, your code seems have a couple of other problems:

1. You put all knobs into 'comps' but then later loop through 'knobs', which is not defined in your code.
2. You create a look and feel called 'ValueLAF', then later assign one called 'knb_LAF', which is not defined in your code.

I realise these might be copy/paste inconsistencies and your code is actually correct. But just wanted to point it out.

[d.healey]

The problem is you are trying to use code without understanding it, what you end up with is Frankencode which is little bits and pieces copy and pasted together.

Start by not touching copy/paste. Instead write out your code from scratch, and only write things that you understand, if you don't understand something, look it up, or ask here for an explanation.

[Mickolos]

@dannytaurus Thank you.

[Mickolos]

@d-healey Yup that's basically what I said. And what I'm doing.

The problem with your suggestion is whether I type or copy I still do not understand it right now. Hence why I'm asking for advice here. I have manage to solve problems already but the only thing that is helping me with this seeing the code recommendations here from everyone, which then allows me understand what went wrong or what new functions are possible.

Remember I am not a developer but I want to learn, I am digesting your videos, forum posts and dev glossary, but I do not know what the possible functions are, what functions are outdated (the that global style I started with from your video), etc. Some information to what I'm trying to do is just not out there at least in a way I can search or find or understand it.

[d.healey]

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

I still do not understand it right now.

Lets go through the code you don't understand a bit at a time, rather than dumping a big example on you and letting you try to wade through it.

Which part of your original code you posted (the stuff from my video) do you feel most confident with?

[Mickolos]

Thanks @d-healey I really feel like I'm wasting everyone's time at this point so don't feel obligated, and no rush. But I still very much appreciate the offer.

Here's rglides suggestion which worked. In green is what I loosely understand, I red is what I don't.

Here's the updated version with rglides suggestions for allowing knob values to have decimals and to style all knobs globally. None of these updates I really understand fully.

Here's dannytarus recommendation to target all knobs:

...
In summary

1. I want to target all knobs so I don't have to duplicate code.
2. I want to show knob value with decimals. (This is not an issue of the slider properties, as I've matched it with other knobs that show the full character amount).

I know there is a combined negative effect of code I added to the original which I did not account for but can't figure out what it is.

PS: I don't know what a snippet is and how to use it.

[d.healey]

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

I really feel like I'm wasting everyone's time at this point

Not at all, this is the purpose of the forum :)

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

I don't know what a snippet is and how to use it.

A snippet is a snapshot of your HISE project - it's presented as a piece of text - that anyone can copy and open in HISE. You can create one from the Export menu in HISE and you can import one from the File menu.

ValueLaf is the name of a variable - a variable is a place where we can store a value, and we give it a name so we can identify it and use it in other parts of the script. It's a good idea to give them a meaningful name. The const part indicates it's a constant variable, that means the value cannot be changed later.

// Some other examples of variables
const name = "David";
const age = 38;

Console.print(name); // This will print the value stored in the "name" variable
Console.print(age); // This will print the value stored in the "age" variable

In this case ValueLaf is storing a look and feel object - and object is a collection of data and functions.

ValueLaf.registerFunction assigns a specific look and feel function to the local laf object stored in ValueLaf

function(g, obj) this is creating the look and feel function - a function is block of code that does a task, in this case it will draw the knob. The laf function has two bits of data we can use which are g and obj. Both of these are objects provided automatically by HISE.

g is a graphics object and gives us access to all of the functions in the Graphics section of HISE script - type Graphics into the API browser in HISE to see all the functions available.

obj contains properties that are specific to the component you are drawing - different components have different properties available. To view the contents of obj you can write Console.print(trace(obj)); within the laf function. This will output the contents of obj to the Console. You can remove this once you are finished with it.

To access a property in obj, you write obj. followed by the name of the property. For example to access the knob's text, you can write obj.text.

Knob1.setLocalLookAndFeel(ValueLaf) assigns the look and feel object stored in ValueLaf to the knob - basically it tells the knob to use the laf you've created.

const var knobs = Content.getAllComponents("Knob"); - This is getting more advanced. Master one knob first, get it to look the way you want. Then come back and we'll talk about applying it to multiple components.

I recommend you read everything in this section of the docs.

And especially this.

My scripting101 video might also be helpful to you.

Then go and write your laf function (from scratch, no copy/paste) and apply it to one knob - make a new project for this that you can just play around in.

Once you've done it, or you've got stuck, post a snippet of where you are up to. When you post the snippet use code tags so that it's formatted nicely on the forum.

This button on the toolbar will add code tags for you.