Angled Sliders Issue

trillbilly

Hey Gang,

I have sliders I created angled at -20 degrees. I have 5 of these sliders stacked vertically for an AHDSR. The issue Im running into is since the sliders are angled, I need to have a larger slider "panel" or "area" in order to show the whole slider. This causes an issue because the slider areas overlap, which blocks other sliders. Is there a way around this?

ustk

@trillbilly As a solution, I can only see a unique panel for all sliders with a smart mouse detection using some basic trigonometry

From the top of my head, I'd say that I see a hypotenuse, so you should be able to compute the position along this line just using the X and Y. Or the angle and the sine of 20° for instance. Probably something like Y = X * sin(20°), no tested...
then when you get this, just allow for a plus/minus a few pixels above and below.

trillbilly

@ustk Ok thanks. I have yet to do something like this so I have a few questions if thats ok.

So I would add each slider to its own unique panel and set the size of the panel to the current size of the slider, correct?

As for the "Smart Mouse Detection", would this be a "setMouseCallback" function or Math.toDegrees/toRadians function? Or both?

EDIT: I tried this and was incorrect. I have a feeling Im way off with this.

const var Attackpnl = Content.getComponent("Attackpnl");

Attackpnl.setMouseCallback(function(event)
{
	Math.toDegrees(Y = X * sin(20));
});

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:

https://docs.hise.dev/scripting/scripting-api/scriptbutton/index.html#setstylesheetclass

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?

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 ?

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

https://forum.hise.audio/topic/10501/css-discussion

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

Angled Sliders Issue

CSS

36

1.9k

10.6k

92.8k