Angled Sliders Issue

[trillbilly]

@d-healey

HiseSnippet 2196.3oc6Z8zaabbEeWItNVLwNQE8TOTLknodUfjLIksRKKLLk0ehDpkrfniQJBBbGt6PxAZ4LD6N7eow.A8V+BzyEn.8aPA5w7AnGROz68VAJPA5wBzCtu2LK4tqIoLEacpcfHrj1Y126M+98l27l2LzmFJ8XQQxPK6Ud7vNLK62wo1Pgp0tsnbg0Q6YYeSmioQJVHwz0CF1gFEw7srsW9ivNrWImk9y+79OfFPEdrjtrrdhj6wdHuMWkz6oU+Y7ffCn9rGyamR56T8HOoXWYfrKfmkcJZ0g5cNsI6DJJ1RNV1WaeetRFVSQUrHK6bOP5OrVKYegQ9mvi30CXXiRV0.CY59.YfOhX7YqcawC7OcDuir.idZhWXYiW365bL2mOt+Duw6oeAIQiz9C6kxBuky.uRyBdSAR1ofTNCjV0olWHuiJ4MHddamiDvjSCJ31SCEirVK8GdamckfDB0lsomyNHDZLVC2sKVbcB7q09o4ye6auyg6U6LRs.tOKLJOLUDoH8ngj.ZCx8HiLiWHCX2CkdzfGJkmuiv+.FKv0XBxt0pQZHCIpVLRet3GjGTdyHFLlAbAqlZX.qVKFS4VH+lQZLFoGu7+x7qTGlsaFJ6J72vCbNgUvQ2ciMp2zDS.CwJsogM4hJjxeXmAjhcF.coBohHXLaWgDJQOu6FkK5yZhhWWFBFeiPpOuaTERohEeecuC1HpE0W1uBZCRY3m6.+D1rN0E7Hw+aSzu7r7YAZkJ0YvfwP.6YbIUH25VfU6y8UspPZSG3BiSuVqS.WjG976S9fXpziFzks1ZZnMlsULCbohkVe6ex5ktycWmTRO1iYawMuqlpSkN.Bymu.5+SlxNWHqGASZe5nYslL0tx1cjBngagcTJXzOWTuvZqmmL4moq0dLO5vKqR05FofEOWV0NiEvnQLsZeFPMvk6dNgKLLas7qbNFUMQTHDsk0QbJUvBJkJ7M6vXds14YdDspaAZPfr+tvuwIonBqSJra.GdZcxgxdPpveDYuPZSXpo4Kn5o.UUmI6pffc2FcEdJtT31bMLZAVcbFqMnOr3fpH35AhRRZAQU5kKcPqjO+JM2rAjdbmf.2hCJp+fggYGmikciXi.Xx.w5ArROX7FlFa5g.m4S9hufX5vGPN3+.YPDggncCfEMZHHfUQz.9mCxO31CIcjQbztQfrnybvIv6AeowPCH2FThGgtT2B5nezaXDcXFQGlQzVLdyVJirwhaVacn9EfVaW7hTXBXW.RIETfj.XR8gjnt0gLCfeQzTKjYHHFaYrRetpEwmgYzhPw9Db9f54AKJUiyhQEMCXiXEfMCy1f35BKRg+pcJqAqvSygTPsA22O.LidotYHQy1lpZEQfAhGjFd0Ysn8XQPzw4LxPYWReJfEWThsI7HBjqyW1dsLtsiD9rA.xNFL4lf.MYtlGwQzcH.ssWSmQaqTvBBhROtbsMb6ytUP.otTBKe3JBEvgRAnuNzHRZBb0nGi+Rb2JXqkHvFItOyffhpQADPYxcgHWuD9SSg8OCCoeBlZzMEGLQae.jKbKcxX.+PVwXJ7LyJBXSKbOKbwcnLH8lVX+35dc0LXXzwReLhAxiTP+NLbJq3ku.wKWHd3zYNyy0amQFsviHEiSoFiEWuQYYVmXx5iKK0iLxVP7Pd8tvlUltLpGKJP5xwq60ZTdRMJOSMdFfyWZVezfw.cbVjI4fgx5z9Sgwi1NXwHrV6KCemgByltIaWMc19B32P13sqlBcS1HawHbr9ILXiRuDFOKMlMkSuY6zI8DrvP63samBsS1Hdwncr9WlY5YpxrId5xElNwmfGf8RQySjJ1iDtZt.UTQdwW0nwTeWrsBXgS8034aBuHEcEcaWmEl1ShBBE8m8jDWa9NIQbAooDTJNRvUOpCKtcxQgJMkycXE6cgSfjKFgfnJ84OtY74OLmOvh6iG9XbFCKMAhOK2Wdu7+s6aMGFHuynEgYz+u9657OlK8gCqNNdNiE9E+wu+eYNsPRfQFK7a6bu+98s93i1ipn3Axh8Lf2pCKTwwIE68X8fS2ZNd1J.UhNWI6XY6LNvDr+b47FjbH3ed0gfErOEdTWR032T8oUM0tjH6IUifY5GyFndfb.dpuH77UHoNTFx+b.wz.qQmdBT6ZO+4O+iQE4JV6jd2ZqsZjs2xX2qt5p+araEX+Ll345AetHYpI3I4Xv2N3XlfvIY4u9aKrL0BkIY4u+MIV9VFVdiQ2nBdrJMIuti4HVSPv3FeUspwjzw9WAsGQPG6eCzJ6oFsr+dNy5TiVVSd+Numy3RNSecS3crE+BXmiL2wCdONBnB7gouCtW7NnxM6cNJN0qHap6KLmvcUmS4JuVSGuKME7BYVeUi23az6FN62nAySk.1bNG7IW3028+bnbcCTdKmSj7HlFDeGyyjOhIXgnyrzEbCqe87dCqcl6aX0d4rb1Y9JzHaTYJ4eDDn2iy5+Rtx0buptx0uQC2ekt57RbA1ous32cTLl91b0vDdFKEOC5NVJjcZIEbuzwRmwfJwa1jElFySkHlZW1saXuLAi5c6mnWivw8PrH+oplddHqGj3MkfGB7Lo8Orp1bi63e8mqFuS63t9xpeU71Ri6J2WWceOILovtHG+he07NyYvwMhquinWB95cd6aNBqlYjWuA66Xpo7MA+56Npzv2Hbr2bTIduI3ZupTiIgh4Kdn4wTHKNTAqyIcaWC1o2iAHQ.00h6uauDVKrocQrM5YpwD95FX0xwurD11N9kkF8xKa4Lk++a4L49urblqJc40gRWJeUoKWU5xUktbUoKWU5xUktr3kt7MwXzl5EJepW72GMLwcccO.uE5+SrshywXaRoLeYC5OsgREdpmWVSMghkWTE2ZQU7NKph2cQUb6EUwObQU7G+xUDqjamtJYayRVKqiOce8WNjs89BJDwqWcX8ePbi6nk

[d.healey]

@trillbilly value * 20000 Why not set the slider's range to match the attack knob's?

[trillbilly]

@d-healey I tried, but then the knob wasn't functioning at all. It would only function/slide if I have the range set to 0-1.

[d.healey]

Ah ok I see what's happening. When you move the slider you're not actually moving the slider, you're clicking on the panel and the panel is setting the slider's value. You need to call .changed() after the value is set.

[trillbilly]

@d-healey Ok, Ill try this. Am I calling ".changed()" to the panel or to the slider?

[d.healey]

@trillbilly Find the bit of code where the knob's value is being set (it's in the panel's callback). Then following that you need to add .changed() to the knob.

[trillbilly]

@d-healey In the panels MouseCallback I see what I believe is the bit of code setting the knobs value.

knobs[sliderIndex].setValue(Math.range(xNorm * 1.3, 0.0, 3.0));

If I try adding "knobs.changed();" or "Attackknb.changed();" after this I get an error anytime the knob is changed that reads "Unknown function 'changed'".

I've tried this below each other bit of code within the panels MouseCallback as well with the same error message.

[d.healey]

@trillbilly said in Angled Sliders Issue:

If I try adding "knobs.changed();"

knobs is the name of the array. You need to refer to the element, just like the line you see for setting the value.

Try knobs[sliderIndex].changed();

[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?