Angled Sliders Issue

[trillbilly]

@d-healey Correct you are. Much appreciated.

[trillbilly]

@d-healey Hi David, another question about this. So I have UI buttons that change the color of background, buttons and sliders. I duplicated the CSS sliders and grouped them according to color. Everything works as it should except the CSS sliders do not stay "Linked", even if I use the "Link To" option in the properties editor. Is there a way I can ensure all of these get linked and keep the same value (Attack links with other Attacks, Decay with other decays, etc)?

Is there an easier way instead of copying the sliders panel multiple times that I can just change the color of the sliders when a button is clicked since they are scripted?

[d.healey]

@trillbilly said in Angled Sliders Issue:

Is there an easier way instead of copying the sliders panel multiple times that I can just change the color of the sliders when a button is clicked since they are scripted?

Yes, that's what CSS is great for. Just swap out the class for a different class that has different colours. I haven't used the CSS stuff in HISE yet, but this is how it works in web dev.

"Traditionally" in HISE you'd change the colour properties of the component, but I'm guessing this isn't needed when using CSS.

[trillbilly]

@d-healey Thanks. Im trying to understand how it would work. So something like when a button is clicked it changes from "laf" to "laf1"?

Here is the CSS and the LAF functions in my script. Am I correct with the above statement?

const var laf = Content.createLocalLookAndFeel();

// CSS for the win!
laf.setInlineStyleSheet("
.scriptslider
{
	background-color: var(--bgColour);
	margin: 27px 0px;
	transform: rotate(-20deg);
	border-radius: 100%;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0);
}

.scriptslider::before
{
	content: '';
	width: max(100vh, calc(100% * var(--value)));
	background: rgba(101,69,145, 1.0);
	margin: 0.5px;
	border-radius: 100%;
}



");

const var knobs = [Content.getComponent("Attackknb"),
                   Content.getComponent("Decayknb"),
                   Content.getComponent("Sustainknb"),
                   Content.getComponent("Releaseknb")];

for(k in knobs)
	k.setLocalLookAndFeel(laf);

[d.healey]

@trillbilly Are you familiar with CSS as used on websites?

[trillbilly]

@d-healey Not at all. This is my CSS introduction.

[d.healey]

@trillbilly Might be worth exploring it a little bit, even just watching some YouTube videos.

With CSS you can dynamically assign classes to an element - a class is just an identifier, but one that can be assigned to multiple elements, so it doesn't uniquely identify one element.

Any elements with that class will take on the properties defined in the style sheet.

So if you change the class you change the styling. In your case you'll be better off using an external style sheet and defining different classes for your different styles. Then just swap out the class that's assigned to the components and they should take on the new styling - again I've not used it but this is what I'd expect based on the documentation and how CSS works on a website.

[trillbilly]

@d-healey Ok, thanks. I will have to dig deeper into this later on. I appreciate it.

[Christoph Hart]

Just swap out the class for a different class that has different colours.

You can also use the component's colour properties as CSS variable:

const var bs = [Content.addButton("Button1", 0, 0),
                Content.addButton("Button2", 0, 50)];

const var laf = Content.createLocalLookAndFeel();

laf.setInlineStyleSheet("

button
{
	/** Note that you need to use the background-color
	    property instead of the generic *background* property
	    as it cannot deduce the type from the variable statement. 
	*/
	background-color: var(--bgColour);
}

");

for(b in bs)
    b.setLocalLookAndFeel(laf);
    
const var t = Engine.createTimerObject();

t.setTimerCallback(function()
{
	for(b in bs)
	{
		b.set("bgColour", Colours.withHue(Colours.red, Math.random()));
	}
});

t.startTimer(300);

[trillbilly]

@Christoph-Hart Awesome, thank you.
Just out of curiosity, trying to link the scripted knobs/sliders via the Property Editor does not work. Is this simply because they are scripted or something to do with the CSS implemented?