Angled Sliders Issue
-
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...
- Use a single panel, calculate the index of the slider you want to move from the mouse position, then call
-
@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?
-
@Christoph-Hart
Holy sh!!!
-
@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: -
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:
https://docs.hise.dev/scripting/scripting-api/scriptbutton/index.html#setstylesheetclass
-
@Christoph-Hart :D proper themed UIs! I think I'll give Rhapsody and my libraries a make-over next year.
-
@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!
-
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?
https://github.com/christophhart/HISE/issues/481
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 ?
-
@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...
-
@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
-
@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!
-
@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.
-
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.
-
@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.
-
-
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
-
@trillbilly
value * 20000
Why not set the slider's range to match the attack knob's? -
@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.
-
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.
-
@d-healey Ok, Ill try this. Am I calling ".changed()" to the panel or to the slider?