Widget of the Day for Y'all

clevername27

This happy widget is a drop-in replacement for a HISE standard button. Sample usage is for a close-widget.

Implemented using LAF.
Use the Properties inspector to specify the four base colours (border, off, on and glyph); the other colours are created algorithmically.
Includes a brightness function that improves over JUCE/HISE's by allowing brightening and (not just) dimming.
Mouse-over effects for off and on states.
Matching gradients created for button surface.
Separate, clearly-named variables for all graphics parameters.
Copious code comments.
Remove the glyph code for a simple, circular button.
Dishwasher safe.

EDIT: Revised as per suggestions from @d-healey and @ulrik.

Screenshot 2023-03-30 at 2.01.43 PM.png

HiseSnippet 2812.3ocsZ8taaibDmxNp8jtdE2AzBbebgwgF4FacRxJ1N0M4rsrrs5IaKXIm3ff.2Ujqj1yTbUIWZYgCA3t9j0Gg9HzGg6S8qsyrKoDI0erpaBQPh3NyN6uY14e6xzvUXx77DtFoxzZz.lQpeS5libj8pzixcLpcjQpUSWz3vQCnddLKiToV8DjPpLOwP87Ke2gTapiIaxPFFuVvMY0484xIi1X+umaaeL0h0h2OB2k2ulovohvV36hKVAiATyaocYmSQ1VIsQpeUUKtT31TRkLOiTO4Pg0nl8DCcz7+ZtGusMSizlffzCerv1BQLNpQkdbaqFgJqmAHkFST8U0p9uK8YbK93wmXB9REAxjYD0djZk3va0XvqXT3UHB7lAjREAROQCouJcSSW9.4DJHd97z0bjL2NTvrGEJZdMV4e+6SWQ.b3Hy2mdK6XW3kwyH21EJrAYqBEVeurY+1E8PZcwE0+9ZsHUt37lsN37VMIKj+rp+P1L5C4HlmBUbgS.8V8XdLBro6IoNROB0kQ7AMfzQ3R56aykCrYjgbqtLfJ2gH6wHRgv9VtLuVFeDexNMjOsVypjJg3SwvQrNbGllxXjmOq5mj2T6nSp15FvDcYqqIujTXuYP3s.ghIH.+SqSgwKkX7SqV6jSaAD1Z9aQjCuDY57pMaB6O0u3pKIGbze4plsNq54sHKTaOzk2sG3cP.6sEuOgFXrgcAtSWxy91MIcbE8IExW.r6jh4KjmbkiM+VlZqPYDP4r1PtrmVXNfy4ZfkwhsAvC2izw2wD2yIlTGB01S.ajltLJry2d7LxG3NPrEhAZGApsMw2wUXaCNDA68nXI8X.UzCQ1S.BYXOgheaF00APcdEhNFnytm1Gbf1fr+URuaINBIHIYOpjvnl8.g0efvABMfe4aaQZix21lN.8.kh+DJFSU1nCbcoid28uG1GNiJ6k2k5zkkKAsmEQcNv5G78j8AYuAZ61.sbXPFGrcfyyXSxa.yVSdWGl0DiWNetibqR57faLSgtN4GylMC.Ov07NlqTYahNMbyBs1H1HhNQT0N1BJ5ulwVXRsipefxomrWdo30LyxjXHAfeF0Zdjf3xrhHg.QeIX0dYLCVg2uGLkXL7rWNSEBjMuCIWLV+ynka8jxGFauo48UJCbRdgw1CW+nHRAwIbsW1PcpssOaZk5PXzDZUw3ZkhikTsT7lTuBVBTwHSycRMKf6oUshwTMjsHaXccYLmo0tSvgSndkhqdZVVR8SybRELbUldqSSIoJFx+z5XoX5nhu8lNPXrWu1WmzF5h.RffgDwBRFaONmMLHrYRH.l1CCBhFkOND3Rlz2ERZByvgMLv7AhyUO9X4sW1OrG4gJsVo1kUpWcyqIGdUqVWbN4gpRsrkVgTus8kRHKC7KJwxULXSHMpKafMT6uuJY.jjjpyhqYMOoljLvEpJqJG6gIQPo8z6eJASwCymRL4tl1r7pz0HAP7VtzgNj9TGeHq8HEqDLSmGAS2KUo9gzqnnF.8dvLk.WlvhfYRTBRmRzgB07GgRru.QH0cDVEQ32sGYjvGkiJqbOLALJXUtMX+hEBOzA.ZQBVEImg8L3M.VMga9YZ2pERNXeGRuOX.TCIfYI6dY.ArPlpjiVm6ZOZPOTlY9DzCREn5njg195Gb73kUWYNOoAt8g5tCTvSQouvxG5Spsp+OzhC8P4pJhhRyk0m6.8+BEJYJ6CX4swBm5BpPXCRAdwE6B.JRFY0P0F7JB5IAPyM5M+qOT6YgwK5tKMUXtNFOUWHt8.GqiYL6b5NKg.ltbOnqSPmrHV5NnvUA8avFMFWPLTYC7bGGqmO6TKdd2.gdbvjysFJtVhtcsYZVVaiwRNW2MHh1+fpx4LbC3RN354QUQP5f7S.0mB1Vn0Bqvvq6XDG3vHIf4SU1ZJj.3NXGQa4NkgoKACDrn4QpuKVGcueunL+FtEDvLMuptBiyJb1BW40yfWcOmyf42NOleaHysEtVL2PPTJXz6OA8waPsrvcnWR1N13P9EyawpApD0OOfVOzcZRqLGSUwVXp+hAbz0kZwwBTSyzlExuUP573aOGpvmlRSlLvwMHma27drffzbnZ1taX+JYBpsCNE5onyagSoCb.zp11bnUubuKSTK6FjrYvmnFv3iorSwGRuY+dr9f9YFJQSe0YtBAECbb6igACACYuI96gcu4isGSwNQgg8vCTlWWrE0w6nP4cvUlfVTEQs+93pXHSbIqudfR6Q9.gYCRbYmQQXFAgA5p8Zu8w6YXiJ5LOHNwjDXZjIQDQvJRIDpIbOlzHA.fY66j.4KR.pFnBQcEHwguTmjos5nFwLvsGQfD81iPOajEkb2TqMQzxNTcoCcTBHlDFsY199TV24zCeXmK5j8xghwwFAnzKFLAHvA7EEdzwByK.iRwf5rNPmQZAsXflTg1X9l20Gmo.Xu++OKwbi+e1hW8n0EC2ECkU9rpj.gP5XH3FhpmosHLtMyLC5SF1qhj0OySySN0XYGhmeXxncfiAyd+iLCEdPyIIrmMzWLO5L8aRxEgm+Xo0mMpmhMEtmUFtq2TUYPQInM49vVp9V.7X5B7PZArQNUNkgTGYP+j91n2UXtikKS+jtylb1zPKYGtKr.dRWwsr7YxRfIiMGTGx3lKt0LyyhWoairjorUYxr4BYRaze.IoMmyURIJqBpT.A3eipYfgT.MQsPUa4A8Cp+yS0VBMaB9msBFP9CO3sO9+dSz59UwLV5rOEizoZWzIJnsxbqEPeM.DA+D8xlpO1o59DAc1wssJbNWHYW3ja8r+H3J9grjjj5zYlzPPothK2YRFufb2EMwbN98ayfrP5VBBYzH0SheUzom+UQG8lxM01nHLJbvliuX.yYd2etQfg0vH0JAnBXUptz5eavkVqsYFbKiTamd.0gYeS8Cda0Kuo14Mtp0MMtnwUMtADJjQueSls5HY2TAOkxgh6u4jqpYnzuneYAikXsxjNXOM4z+kuy3pZGQkT7t1Cv+jSMBicD6NtISey6YRCGu9VnbhRAC7bLR8Y5k8KBuWdTqTqZ4kVCeCbvLwvafdwMteB39l8GM4kZ62SEcMdj+g89Cwv6wCP966eWzOr.ygB+1R+RpUmOhqSaGf3sVZD2hKsYI.7O0IJfMLR.XiWk.vF78wT2Fo95zkNhbVsipQd8A0upJoY05Uqz5hKMF.mUwQFA4OJSpQDA74er8Gmn969yQU+uN49kQ4jpe4.0ekzFbuyBumCc30GGMORq+3mwqboh6tUwcKWd6HTPBE2o3t6ry1k2pbLi0uddd1KuexwvKrE5X+pobr6lvP8S+79ebLGXH9CG1VZoE8YLG+DNAw0suIotsOKgt8u9oo0sGi0kZaKFVA9a7RN8vuOYEan.qG4OPNEamN19ZlkHQ4DU5e92hnR6+WS5EO09GLxz9ck2p3y25EI86JW5EEK9hc1FHDdbc8v6raos1EHXXL8G.8KSeFdOWTY7uGK9QnCH.UFi8QPwOzoiGWNJZh+OZej1kEheU5FboYuYiwUlAFwBoeBvXvm19KRWsCdArS.3SRe70eZ9N1FWJ7kPqfmQktbvyJ8498aBa1lLX0c.ecryjTqfEy0uW.eGs.MYNVpW9OvS.wh36oBHVLjnQepoq3FSc2.3GO+yTi.XxQ8+afLoOCemLtIfzoKjufQetE+FSST82DZqY1yoziXNa8HlS4Gwbd9iXNa+HlyNOh4r6BmC9eghC7giSqCGfAZTU0LVpTUCadI0pF+WVUbO2A```

d.healey

Looks nice. I noticed two issues.

You're including a font from the project folder, if the user doesn't have that then the script will fail to compile.

You're using non-standard parameter names for you LAF function. graphics should be g and widget should be obj. The auto-complete doesn't work with those parameter names (not sure this affects the obj parameter actually). I found this out myself years ago when using e instead of event for mouse callbacks :)

I've never seen reg variables declared inside a function. I don't know if there are any downsides/benefits to this... @Christoph-Hart ?

clevername27

@d-healey Hi David, thanks for your feedback. What do you recommend I do for the widest font compatibility?

d.healey

@clevername27 A snippet should be self contained, so I wouldn't load any fonts inside it.

ustk

@clevername27 Just a little suggestion
But of course, I know you wrote this code for beginners. It is good to see how things can be reduced/simplified

This:

local componentBlue = colourArray[1];	
componentBlue += brightnessAdjustment;

if (componentBlue < 0.0)
    componentBlue = 0.0;

if (componentBlue > 1.0) // would benefit from an else if statement here
    componentBlue = 1.0;

colourArray[1] = componentBlue;

could be better written:

local componentBlue = colourArray[1];	
componentBlue += brightnessAdjustment;

colourArray[1] = Math.range(componentBlue, 0.0, 1.0);

Or even a one-liner

colourArray[1] = Math.range(colourArray[1] + brightnessAdjustment, 0.0, 1.0);

ustk

@clevername27 Like Dave I'm surprised to see the reg declarations inside the function. But if it's not an issue then I'm sure LAF functions in general will largely benefit from this increased variable speed!
Just a shame we can't nest namespaces because the 32 reg limit will be quickly reached in any small project if they're all in one unique LAF namespace...

Christoph Hart

@ustk the limitation to 32 slots is one of the main reasons why they are so fast :)

ustk

@Christoph-Hart Sure! I wouldn't need more anyway... When I reach that number I always get back to another design because it means I overdid something... (By the way, it would be cool to have an alert when reaching the limitation because I already struggled multiple times to find the origin of a bug while I was simply having too many regs within a namespace )

And what about declaring them inside a LAF function like @clevername27 did?

clevername27

@d-healey Thank you - I simply don't know how to do that with fonts, could you please tell me?

clevername27

@Christoph-Hart Are these literally register variables?

Christoph Hart

@ustk yes good idea, I‘ll make it throw an error (no idea why I didn‘t do this earlier, lol)

Christoph Hart

@clevername27 said in Widget of the Day for Y'all:

@Christoph-Hart Are these literally register variables?

no, there are about 20 layers of abstraction between these variables and the CPU registers…

clevername27

@ustk I've added your code as a comment - thank you.

clevername27

@d-healey Thank you for your suggestion - I've revised the code to use 'g' and "obj".

d.healey

@clevername27 said in Widget of the Day for Y'all:

@d-healey Thank you - I simply don't know how to do that with fonts, could you please tell me?

You can't, if you load a font in your snippet then the user must have that font. So don't use them in snippets.

clevername27

@d-healey How do I draw text then - don't I have to specify some font?

ustk

@clevername27 loadFontAs but just give the name of an embedded font (that you can find in the property of a Label)
If you just want to draw a text for an example snippet, just do:

g.setFont("Arial", 14.0); // or whatever embedded font

inside a paint routine (or LAF function), you don't even need to loadFontAs...
And if you just ignore this line, a default font will be used anyway so you don't even have to bother setting a font (but then you lose the ability to set its size)

Christoph Hart

How do I draw text then - don't I have to specify some font?

If you don't call g.setFont(), it will default to Arial or whatever is the standard font.

For a "real" project, I would always embed the fonts, but if you want to pass around snippets that need to be self-contained, you can just assume that the user has installed the font on his system and if it isn't found, it will fall back to Arial (or Comic Sans MS on April 1st).

ustk

@Christoph-Hart said in Widget of the Day for Y'all:

(or Comic Sans MS on April 1st).

d.healey

@clevername27 said in Widget of the Day for Y'all:

@d-healey How do I draw text then - don't I have to specify some font?

No need to specify a font at all, it will use the default

Widget of the Day for Y'all

17

1.9k

10.7k

93.2k