Angled Sliders Issue

[ustk]

@trillbilly It is one panel that will handle four virtual sliders using one mouse callback.

Before trying to do this, you have to be able to create a simple slider with a panel, only one, no angle, just a horizontal bar. Store the value in the panel's value object.

This doc example should get you through. It's a rotating one, but with some simplifications, you should be able to draw a minimal rectangle instead of that big ellipse drawing chunk.
https://docs.hise.dev/tutorials/ui/index.html#scriptpanel-slider

Once this is done, make two, then four sliders within the same panel.
You'll have to detect/check wether the mouse has been clicked one one or the other slider
The values of each can be saved in the panel's value as an object

[Christoph Hart]

oh that's a fun little excercise. Also a good opportunity to show off the

CSS

renderer in HISE that nobody talks about...

HiseSnippet 1742.3ocyX07aaTDEe2ztsMFZUiDm3zfkJccU9X8GIMXDpo4KZTaZivkRQnppw6Nq2QY8LV6LNwFnBNfDG5MNvUt.+Azi7wA9W.INvQNwEtvQj3.7dyXm0NIzVGIPcUryNy79326Mu2adi2ISFxTJYliag61uCyw8k8ZzWnSVKgxENasti6E71lpzrLhcpU62gpTrHGW2S813DtSeZGyyebsUooTQHKeJGm6I4graway04ytyJ2jmltIMhcWd6Qnt1JaEJEqISkcA7bJu.mNzvcosX2lhjMkmyMnpDG2q3c0pMWNJJJXYZTbPzxKQad0fnv3ZKUiFQieinECWJnFqVYG2yrQDWKyZnoZlBD5pxn9MRj6KrJ3dbEuYJCGT1oAnY6zNqkvSi1YnyQ433d5cxcUmx5pdEus4Q7ClO2kcQyBjbNF0o4N0SCRkm.H4NBjNsERy30HLi2QmuBhmWxaKArCFSg8lQghkVmoZbVu0j.EB87so6x1LCFb.G9KEDLKA9pzaVn.r+nzj8nYjTZL4sHCYKLiAVysjgzzaIk6dcQzlLVpOxxBKPVqQCRrLinSXj84hWq.v77JFniTtf0P2Ok0Hgwz9EKLuxfIUJOhkU3iJLcSHDnUlrqHZtPvYjUG0t+by0rkMPATwzsoYs3h5jxK1oGInSOXJcFUn.c1tNIShdZ+4JuXDqERdSYFH74xnQ7tp5jECtjYxdyoRnQx8qihfTA9TC9j0pI0Gb.C9a9JfDdTgwwY85MYftXHdCsdj5jKeYPp6yizI0Iso87KGDrWxrDvCEhueIxUFXI6QS6xJUxfrCL15VEWYwEmc3GP4KOp0V0XnGmw.3qPghiuesqP1TA6XevvsrVL8Zx1cjBXfewaBKWtXoYKPN5y+NGUlXNpNwbTqXoG.VB3e82kvEVCoTgo2EifNRDGDYMtcuCUvRKORn53ZvtrwWYeEkpeQZZpb+0fuwcDUwYIEWKkCuMK4Fx8fZguNY8LZKXan0gXcGnFf9cjc0PfsebWQnlKE9sJggFPlv6vZC7CIBTMAi8IZIIABgLoFcPoTnvzslOFpOd8zT+fdUpDGGDXR9dz3ZZaYWEaHDyUEaOvtLpiGaGLeHBcVD4i+XhchH.6fGDnAwDFQ1MERQLfP.4LzT9GBz2ag9jNREGkqBnEcm8tMrN3MsBpGYAfItBcp9EMA6n+vRZ+wHs+Xjlv3sRzVZGPtMU5FlE.tpU4owvQfcQn.TZQRNfIM6STcaB0A.+hnkgHqJHVYYkx9bcBIhg0uTHY2G2QnggPNn9fZVTQqT1PqBvl0xli36Wd9.3+FmRIHgdTaXDnFyihRAwXxrspDEaapNQQ.EwSGEdMYIz8XJH9XWFourKYeJfEejhkHbEAprEIaWZL21VhHVO.YaChbdffVLe6qnF86CPaoRlBXUGAVPPzn5kajg+9rKmlRZJkPBDWSn.NzZ.8MgAJoMz0fdL9K2cqgCNTfLxceVkfjZPADPYqUgH2jD+Aif8Gfgz2CqD5OhMXi1tBAbyUw5efA.uZJU9Ha9vv3dhTbaolcGguI1GJARN7RwwG6ZXcgLYZJK6XWFaQI6ownuna6lrrYI153CIDNRd7y4Oyy247CN+XDBkhsDb8c5vFLdSYZDd9M99Q6JvYPcNrkkAHDHUa5N3BC5Nngwu6vAgbVOSkeGC3wVwd74exubwG+SWy44l4J4LCp+W+sF+1Dvb0bl+g+7ae7W88+7Dvbsbl+lat828ye8ueMm2cq0oZJ1cz.GA3b5vxzbbOvcc1dP+n1dkl1aclZWsriiq2AmH.MK8L8U8.FbeevV6iu.5xQgsvf8NeCYF+CA8RScTvN3cY8zqJ6g8ZMreEPum4Sdxp+M1vqsPTdCvarBWyZmSW0pUiw4ymsBN8LyLyegSqAomS7eCOFoLA1RkCYKYSts7jjWPrkpGxV9rSfsr5m+hgsT6P1xWN41xpewS9+wVNq0VN+vadfMnXLky4YaVAskAZ+Gu2J8yGb+ULcLjisGtxgP6m9dqLdmXNtup2+VmXvEKOx8gfahIivtDF+5Y3EWGr.TKer6Dg26Q.mo0ezK1NA2YK3odmsmWHNi2NbcXxwiwoNFLBE79u.iCto6481HNlEpyA3o8179mzq09LTus64VPa.YbLM31ca2.h+BYf1EP.kByHlBCBsiCvwnGnASDYFfgoCVrLN1cvhkGtnSaZXl7gg1CZv6ReNyL.lDleqgo81FGSJO1Yalm1vU6eXX33h5HLV4jxX0SJi0NoLt3IkwkNoLd0SJiK+rYD+kWtdWsrsMswwY6c1vzQfq6FBJDAZhVc9GvkYvcA

• Use a single panel, calculate the index of the slider you want to move from the mouse position, then call setValue()
• No trigonometry was required, just calculate the y position to determine which slider you want by subtracting the slider height multiplied by the normalised x position. Yes, that's basically trigonometry, but yadda yadda...

[d.healey]

@Christoph-Hart said in Angled Sliders Issue:

renderer in HISE that nobody talks about...

Do we have documentation?

Is it possible to assign dynamic classes to components?

[ustk]

@Christoph-Hart
Holy sh!!!

[ustk]

@Christoph-Hart If the days of trigonometry are over... What will I become ??? :astonished_face:
Well... Earth's still round, so we still need trigo to make it turn! :beaming_face_with_smiling_eyes:

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