Angled Sliders Issue

[aaronventure]

@Christoph-Hart

Nice! Great docs, too.

Question barrage time. Sorry!

One thing I didn't quite get is when using a "class" converter to refer to a CSS class, where does it look for the class? In the entire script? Do we just import the css file as .js like we do with external scripts?

Are the shadows using melatonin?

Now that CSS introduces animation, component fading still needs custom implementation with timers and color mixing in LAF with the timer alpha since the fade method is broken. Do you know why it sometimes "skips" and instantly changes state?

[Engine] fadeComponent method is inconsistent, sometimes instantly changing visibility · Issue #481 · christophhart/HISE

fadeComponent has been demonstrating inconsistent behavior for a while now, with no apparent trigger. Assigning components to two panels and then triggering fadeComponent on these panels back and forth results in the panel (and as such, ...

GitHub (github.com)

Until that gets solved, fading a CSS component consistently would require writing to the property with the timer (instead of calling repaint) and referring to the var inside the css, right ?

[Christoph Hart]

@aaronventure Maybe we'll split the thread into two so that poor @trillbilly doesn't get flooded with a CSS discussion after I shamelessly hijacked his question for adversarial purposes...

CSS Discussion

Taken from another thread: https://forum.hise.audio/post/86350 Nice! Great docs, too. Question barrage time. Sorry! One thing I didn't quite get is when usi...

Forum (forum.hise.audio)

[orange]

@Christoph-Hart That’s great! Lots of possibilities are available now.

My favourite: No need to use timer objects for fading zoom in/out UI elements

[trillbilly]

@Christoph-Hart Thanks, I think I got this to work in my current project. When would something like this be safe to use in releases?

@ustk Thanks again for the help and docs!

[aaronventure]

@trillbilly said in Angled Sliders Issue:

When would something like this be safe to use in releases?

General experimental feature guidance is to use it in production whenever you're ready to lock down on the specific HISE commit for that particular product, or ready to do refactoring in the future.

[Christoph Hart]

It‘s not so much stability issues (in fact the scripted LaF is less stable because of inherent multithreadung issues) but rather consistency of the rendering that might break in the foreseeable future because I picked a wrong default value or wasn‘t aware of a standard behaviour that you would expect.

[trillbilly]

@Christoph-Hart Awesome, thanks!
I used your CSS demo. I am having issues getting sliders to update their amount.

Im using these sliders for an ADSR. I have scripted the ADSR functions but cannot get the sliders to return the correct amount unless I change the knob & hit compile. If I do not hit compile, the slider stays the previous rate and never updates.

I have tried adding knobs.changed() to the CCS script with no luck. I also tried adding it in the script for my knob functions with no luck.

Where am I going wrong here?

Thanks again.

[d.healey]

@trillbilly said in Angled Sliders Issue:

Where am I going wrong here?

Snippet

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