Angled Sliders Issue

[Christoph Hart]

New version:

HiseSnippet 2100.3ocyX07aabbEeorVmPVmzHf7GvTB33k1Tz7KIqR2.SqupErkCQnhqARLbFt6PtC3xcH1YnHYZLZt0S4Ru19OgAZtmi8bOzSE8Of1K8dOj9dyrj6tRTwQBMEQPThyLu2a98dyu2a9nSjvkIkhHqbENY9XlUtaX2cdnxeOeJOz5n8sx8t1GSkJVDwz0tyGSkRlmUtbW6WicjK+5V5e92OXWZ.Mzkkzkk0yDbW1S3i3pjd6z9w7ffCodrS3iRIcy1G4JB2SDHl.34Z1UsFScGRGvdJEEaMaqGQk9V4ts88ZzaGOOup6P85W0amso8tWUO29M2tI0i1+W5sk61UaxZVyJ20OviqDQcUTESZka8cEdy65KlFZlfmwk7dALrQMqtvLa59PQfG5hXuV64yC75rHPIs.qzIIrcMSX68sOl6wW1eR368zCPRzHc.L2ZYg20x.uZogW0TvaEPJWJHstARaX20MhOVkLBhmel8QgvpYeJrNkFJFYsV6eTvdOAHQnpxH5P1gQPikZ3rc0pkIveJc+BEf0JohbJMhDP6S9PxB0biXf27DgKM3IBwvGF5cHiE3fpb26R1qaWReQDQ4yHS4g+hBfxUjLXNB3grtp4Art9LlxoXgJRMljAbOVTgeag78.5vfHwjPuMcgfQTKb1c1bydCLjFXJxOhFMfG1hTa6wyHUGOC5REQCkvbNpEIRfQZmMqskGa.JdOQDX7Mind7IxVjspdScmy1T5S8DSaglfTG9zD9DMnG0AB.w+VoNXgWUHKNa4KN0f1kHYqEHYUdf9eaNhOygGRjvLTlL0mqXjZUuY4y5ekV3MbEW.llFD.vnljvnR1l7vU.mV8XfqyP.4ZVfZQt0s.6Lk6o7aQFQm4TqZ0S8KSfELW762jb63I9TZvDVI8zlf7Vl3P8s1p7hO.H1IcvugNtuxXKfvhYYOCCE8j.+4SWPfFvT6IFMVDBMbJ9XX3ZEKUt.47+bwZT+RqQiKsFMKV5Efm.gWmgDX0S6HkJjeHxmOG+G34Y86NzPVPsTINYmAyv5Xk4qnUcJBK4ho6A+EWPjEKSJ9PfDjzQV46.kgTerXhBxsb5OIzE4MNCJgzgBuBkMszGKlHYKLUh3rSA.oUAxeQRxj.HIRmAGBYUz.9Wv7Hyt6bxXggYJKjG8vYOEFFbPsApLibWPGtD8SmhZ5GhVsjyyH47LR5y3C7UZQMBaX1OR2MnSy5Wr3mCvEghSAEIIPkzaNQNoGjUANa3.sPlIfXrj1HS4JehGCKsIQodNQIHTWWHePsrbFMbP.K1e.bY7oMINN0pTE9uNZTBxsRi+kvrO2yK.rgNEyLenMGQU9RBLK7fzPqGymdJSRB3CYj4hIjoT.HNnDaS3RBTivSLpT530QgdrY.rNFrXEX7ALGyWwIzYNfqsKoqq0.oE4ARoTDvpLNhirwS9jSLgzB4Q9NGLTUx8IbxuxP6qDvBGn7gdtycfoE3JmwBfFeXFj7AeP7pstfodNyqM0mxeARFS1JnijMwSn2iz4MZGxCHEM0fKRZQJpAMTTLOuugGWwMf6ND3qe4WFqmWDcPLjWJjzm2WsOrOLLfdj7KRRkvtyGK7nAmvlAaZMdhxAGVKS9hioQfPKyhKBHHNOtLAVjgzKfkPXiFq.VmJBoRH6YPfnGM.1K.pXxCwyBXL2Lv.UKieMOpNr7BFXYRFPVXjHFvs4mxPBIt7eFDXrybvNaStCwIcfKKQDZVsRyFH+774RIPf2WS2DvA5hgCvzLreH2.odZmqLAFeJbJOzkMXvjv257k.Jmx8fbr9zIApkNoNBEIFkl7qfHOA1i1X2XL1hTuYYSO33PaCYJkG+BbZeFtklCtrl+UkIKpwkQLGwPbmWbqujkVfZHFpaG2Q9UXe4B6CqBR1gABpxIdOz6qU5U540z.+DwTShBwl3HvuPX.LRZukqWrblxtEDM6IDvtGPrkBo9JETvnGzPhK8TiVivZ3IU2TvY3jfMRJWYlDTTclOjIX1mtTgueWJUcCSc8aSf5ZMv89ghFvWKYR0z6prHtRDgOUnXeTnS7VNEHmcn98W4XX9VjHHfEsxgwaND88onS3jQ8XQKWHiEDNcb1ibaewG4N8MBhO6TJAEgGExUezXV3EcOAq3ZF3MFhQEHpRe372M9v4c0wZKNbF72xVeTGKMfwaE8mt9el29O9Wef0OXkqmnL8quwe6u74+qKgxMRTFU8quw+7RnbyDk+l86730+l+9Cr9ji1mpn3kShCDPvYLKRww3dt8YmBWMzbUk716yjCUhwv5wxRWvcUdiwpYKu8X6m0ddRim2VhaefWm8QhH9W.yOMvBqciks2ULCuxyhiUCpc8e2q286PMMUSRtS5AsgyhOJQtFMZzG6Oo25X2arwF+GrarzShveG7i1JWBep9E4Se0mcY8oW6+SDepwE5Se9k1m182+SCep4E4SeauKqOs6e30++wmdKiO8NKdX.7jIZW5ssMmRIkO8sY7om2VuYcB1dY6yf1u52zN6USrx8ysyb0DKqy+FEumMbVJ7z4YexD7gkhG.Jpm4cJv2h.u+67zO7z+ydGkenPbC6Nbkq+pw3Zq.iPUveLvX7qO8N1GzuOyUk.v0sO74+37TSVlqSN.NOPDG3K1Ocxnt.oykAydHvhvMUysFx7LsqhswHPWVnmtAxMiGrF1NW7f0VLn0Hpaj3ktlcev225s08.XJT+Vf4sOFaSRsa4h37HtG+kttYM04Tr9UUwFWUEadUUbqqphaeUU7dWUE24MqH9ZnObhRLxj1XYcbmCzGSHWtCBo.CTyVs9ufDhd3C

• shift text box input
• hover state with transition animation of colour & margin. That this is working is some advanced stuff because I had to artificially override the pseudo states for the sliders to indicate the hover (as the mouse doesn't hover over the slider anymore because the panel overlays them).

Do we have documentation?

Sure, but I have been cooking on this bad boy for months without telling anyone. Same reason as always: I needed some time to work out the kinks but now I think it's ready for people to PLAY around with it (I would still be a bit cautious about using it in real projects as there might be some breaking changes occuring over the next months).

• https://docs.hise.dev/glossary/css.html
• https://docs.hise.dev/scripting/scripting-api/scriptlookandfeel/index.html#setstylesheet
• https://docs.hise.dev/ui-components/plugin-components/knob.html (scroll down for a list of class ID's & other selectors)

Is it possible to assign dynamic classes to components?

Yup:

HISE | Docs

(docs.hise.dev)

[d.healey]

@Christoph-Hart :D proper themed UIs! I think I'll give Rhapsody and my libraries a make-over next year.

[trillbilly]

@ustk ohhhhh, this makes much more sense. I thought you meant put my filmstrips into individual panels and was hella confused.

@Christoph-Hart I'll take a look at this as well when I get back to the studio. It sounds super interesting!

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