Timer Callback Method in LAF
-
Hello everyone .
Is there a possibility to integrate a timer callback for the default gui components provided inside the Custom Look and Feel?The use case for this will be to have an animation when an interaction happens.
Example (pseudo code):g.setColourAlpha(0.5); g.drawAlignedText(obj.text, obj.area, "centred"); if(obj.over) { startAnimation(int milliseconds){ g.setColourAlpha(0.5); g.drawAlignedText(obj.text, obj.area, "centred"); } }
Everything could be implemented from scratch using panels however , I do not want to neglect the usefulness of the default components.
Even if it is possible, how much will it affect the performance of the plugin?
-
-
I don't understand what you want to do, could you explain the end goal?
-
The end goal is to have a button that has animation like this.
-
@Sawer Maybe the webview would be the way to go here.
-
@d-healey Ok, Thanks!
-
@Sawer yes it's possible to do it, here it's working as a compiled standalone on mac.
It's 4 Knobs with the same LocalLookAndFeel function
I only tried the animation stuff so I didn't do anything else in the laf
HiseSnippet 1415.3ocsX0kaabCDlqs2jtp+fFfd.1HfBHgpnrxJ0sHto1N9mBi3+PTZPKDLRo1kRhQqHE1kxVKBBPeo2idAJP6i8sbG5wnuzaf6LKojVIK0HqzH3HGNy2v4aFRNbnOKR5yhikQDKmmkziQr9H6ZIBU6caS4Bxg6Qr9T6cD7tTEWJNTbDsI4wI8nwwr.hk0peGhxxYMR5m+YqGSCoBe1XQDxykbe1Q7tb0Xoms8S3ggGPCXOi2MC5Gr8g9RwtxPYefQqZ6Q5Q86PawNghvVwlXcq8C3JYTMEUwhIVq8XYPRs1xKEZ7OmGyaDxvAUH0fIRK9.YX.xXTJY217vfyFF4wDXVNabdXUcd3yrOlGvGIOa9.U3N1hr4CqUljdqNA8pjkddYn2LnjUFJsllR2wtleDumZrFjOen8gBEKpIER6YohFKYke6116JADBU4tzNrChfAirnvFddkbguJtYtbPpOV4dAMx8IhFwtOxs9PCawT6J61SJfAExCZyWrTN2q8YtvqbCwu9MDe07EOGB.SD.Bf8o.+Gh2OhAKGGI8ogGIkc1QDb.iEV.iYM1xQrV7XHmbPegOtSuP9fH5kOUpnQI0B4Arn7kbaNTYqRtxFurXtWky492GbRrLjUtWDGXiJBypnVX1cZUtIrOemvPTR4Fsz6rQM4b.W5RARhZn.A2TKJtGiE.hq3YDPEbX3c4w6wZxErfBffhta4549PTmAkOjOxDwSjgPOvCJZPplb1T3bsunELvjmvijQm13kLeUghfSTFC4B+IMEDfFqh5y.Xvngg.t4eRnohPv4G.3xCvSkXLXPxjnGjfPqC6LM+bNXvfjzzFuoaZ.0VdAKpXNGXMvQUNloRo8tzvvFPIiBiVq.HoXbhujq7a6ZnBJIUriOMlYn0CSE3ny3v2eQ5hwlZoojrNHE4iQlii92HoFg28aco0W+7hZUuxfbXRIeB5og1qck2vgFe.VWB8+P27Z8uZ.KOcLhxP8jEk5SOsi49XxWz8yA1W8b2GAzZdgvf.1zg.N4SEEXlBmpEKJRmyoih6MmEfrS6Dq.ZCb+l4y8jYw8pSwcuaR5eAIt2bx8KDqG712zLwFyqQ4TAXQB3nhH3ordv0YpigaQfKWwBg.hzu0mlfxd5ySEp5kJtEdBSW8RWNQw5pGVwnGKzseXHuWLqP8AI08N+daTBNzVuR5+ox53+NGA+5gGiu6zmi0AVeQftN.Nw5hNXIlMMTS1SyL8TgrNWtlxH2BcfRPo2bAyVGjuWqfutXOZwvxCtRwIRE6TrNAvfbuNm6zpZ1bl5vJsQxvPjIyPsgiy2vBh9cavhJA22F1mMBHbY+jcPXO+NHx1fiutveFfX6Zb0o8Xh401CwbaA1.jgU.TUZuFehoWC8keDNzRgsMj+Hoz0zwl6u72+wVjEvzaglV4cv10eGrs5Lr86ObOphhsYYxAPdoGKRwwTt0drKfdV0Mc4XuGKtCrqKMIYtRkXc62RZZv3lZ+wsSxN3Rdfp8HAa+Sa2lwa0NSywGt83SWfzaQ98qtJUwB4dSpdr+eSXV+yWB+e0qto9e8L9+malw+uI5l6+q9SxM0+Uy3+eUkM9SVB+S9Ks+udG4vaAjA8CopIef.9pHiB3L+DckicdKh4pjruZ5+sWMrnT7N1mgMCMaNtxL3HbR48AGMu05is2uYSncywDbM6C9g2OOrh7TYeEWz5XpJhC6RrOoe2ZvJsOC7tPvBwZtVqfa2zi8vwXFnFbwY5fqfOFkUvwVFkUFpjzk5GIegut.E9ZtOHUBvIQ5CYcrOFG6NpjnssWYORW3gkuv2GC+6AErmsMquD1TcIr4AKgMe4RXyFKgMe0RXyW+eZC9l9c5qj5+PGvB5wmse5UDVV6KnvNqzcgj+E.MD1kF
-
@ulrik here is it compiled as an instrument (au) in Logic
-
@Sawer I tried some more and I think this could be a way to accomplish what you're looking for, in your example the animation start at two different points at the same time, this is only one.
I hope you can make something out of it and extend it to your needs.HiseSnippet 1909.3ocuY8zaaaCEmJops1acnEXe.T8I6sjLamzzg1tVml+TDzjzr5rfUDj1QKQayFYQCI5D60kgceG2odn.CXG14cr2BvNuOCaeD18cn68HkrkTrSbLVmQhb3i+d7868H4iOwrsuvlEDH7IFY1oWaFw3CMq1yS1b4lTtGY8UHFW2bIOdKpjK7V2aCZcxC60lFDvbHFFS+HDkQlKQTe96G7PpK0ylMPDgrqfay1f2hKGHc6JOl65tF0gsCuULzKTYcag2xBWQGfQSaVjzlZe.sAaKJBaJShwkW0gKE9UkTIKfXboGJb5Uso3HOM9c4A7ZtLrQIRUXfzhWS35fLFkRVtI20Y6HOOf.ix1ChCSqiCer4lbGde4wiGXGVCzHd7vXpjza5DzqTb5ULF8FBkLhQoKoozMLqZ6yaKGzCxmOvbcOIyuNEB6wohFKYpeOq4xB.gmbtVzCXq4CM5qQ9EKVbFK3Qg6lMKD5CjVGR8sdrWs.quvZuHEavjKKZ0V3AMxmC5MWgYxZcpOiDdoKH9xWP7ymqv9IbfpsYLGvCFtFpdyAtbLEjr1iFOzYR3Ozsi+HgichvyFwHfgvFmX3s8Yv5iMD1T2MDhCVxyYMFyMOpiF6b9rF7.XRZsNd13Vu74b7oG8Tgj52qpK2g4maFq5Qc1XFKQsWVH6qxlATzhBlBZOGELyc0hBz9G5IHa2k51gg1Si2iC8cSdvJr5bOlSdPPAqGXUz5NXegnrAObT9LZMtSz3ISNZRbrV0qAzHzywc89Oo1KY1x7E.iHCUj6YmTUP.przuCCfAs56NvnjDpRDBNWW.WN.tRRnBc6kDc2dHz8fE+E2Gf1sWHNGveRhDkfXqScCPRfsAvYyvqao76lhCY9ExlAB9YjyEvjJuaYpqaMH4U99SR.DElLAGwk1MsBYLJQINiMELfl82QIHidhAd9o372c0BUtxdfPj6gxxjQ+MxoH3V22htW48Kn64Ug.ihb45g1IRcsgJF0LzDf1yfVOxJGq+pFLGdPnnXDu2XR7zi5HX97ij4ccXoYNNnoHOFevQY7HuZLSS9YGdTO9nlf7J7V2yp3Hi4Ci4ymh4EuHw7wi1EGc.+73bGOG8Fgjz9ThUF5TRC2Ng6eiDAaQjh1p8HpDPC0IUBvDNv9IOmmxZCm9J2DNzCpEPq0wpmY09wMUaRi1egVf5q2FlWkqOVJOsIaLWMHAKTNSO.hZmcj7.LsFV+gNmlj0R2rTDf5PkKq55xaGvxuW2d6Ub+YKAwW3uJo+qxpe2WiWqSCZmf.N0COYHO9XHDB7SMcztWV7GcRlalNKyPlBzYNihygg8DHRG2UCeZ+sVCcCDf1Uep.GEXJvVR8Z3B9bYv8lQsia1EzaFlcAXG8hEta+QbMAdNHXbZGWYNMnOad8fNvf5uBlCRG1bI21MoJJHYcCA.42la9BZsvS+Vxk2.blc..8QBi8LV4rgyf70GoeFSgkOKuJu1gJ7InNGhSMaI7aQc4eKyAbtYrtUnuVBSeUtukR6pklH271mgapHyRA6n7Vbq7h5neb9DEA1QnJT4XU0G0E9V4O.N0TUOGr14.jUmppCcEGnFQGUYI71RHYOAOyBVuk83rVo6pd8g1GVbfuv0EWiMjtCW8MZEy60oUMFDRTNcefPIvIqq1bz0UGureacsJw.huDCW9j1LuQ8x.jvBbfZvuRHq.nRUE3eTXE35JvHbnPaSSH9QTzM78X9qeo8e7.xXn5kQUKkPW3yFUFacKmV26cxXq67o0M2Xo6ULUITSq7ViIow5OSq6BiotXdyz5tdExWs9JTIEeiovINXxrMyWxw0IFqvNDd8S86OkwbEVvAPRP0LaXoqDirmyba29l6G9xJ8FX6UpbD2Q1bf.mJMY7FMkwwOH6CH8xuC9fcDKmDJ99+5e9On3nrunLxu8tuGkg4IHFW07YLWWwQ3py9D+Zm2JqALm7r3L+4oX9IMlTlKDBEyaQSXKrlhpPly3WMPKtiiKaaQ.G2xGeJLtaCl4GG31WybYp2gz.qc4rj99Gcd6LFvmSpE224o78Jeyj56uZCh12ieEHO6jDgBB4BEJNIQn3sD9fPgZ8O6hDClO9JWZrXfke5X.KcL.VQLVwf27l2b5XP4jwfxUFk+dpnyO+5W+1GDOFzsa2eJdL3Q9rdIhAYO2LUwVH7cwBBvrbpsuOOcP.VZlvutekD9EenKyCqDX2gjebLHcXFxQv4Ssw874LrX672ZNbNuvXyYUl4QvYXs0+ibFNO3z2a10M2T3zwkJSdMd3cWF1AtpL9cmg2OlGrZsWbK9e1c6MtT7FlaiWTvv43TCgivgfuO3X3MhdMyUqWGJXd.Auj4Ze86mq+j.EnK4dM1jJ84vZAys5zpJjSvlAV2yi4h0.ZLEVsltcQrMFApBuGkpAlwJryRXaivNKE0Ibnksu3E15ZOv6b8pJI.m7TW2bFyMw1V8KQyzr3bEgbcN7WXait+rkHjgqS4IPm4m.cVXBz4VSfNKNA5b6IPmO+L0Au48k5HE5+cDvD5laupp5OCiU8nvJK0pPx+B.0aeFC
-
@ulrik What a pro!
Thanks so much!! -
@Sawer a better version
HiseSnippet 1905.3ocsX8zaabiEmxIS1noaBZWzO.LFEEiBjUjjcSKZPaj+aWiZm30x0sAFocolgZDqGQJLCkcU6FfbYOzKEHWJPODf819YXu4EnseM5Gf8xdeOr66QNRZFYoXY2sCfkAIeOxe+duGe7QtWrxmmjnhIEJdvfdbRgeuSyARcm06vDRx1aPJ7GbVUJ5xzBkba4Nr1z5j0FzikjvCHEJbsOBkqPwqSLe+6GtFKhI84i6hPNTI746H5Jzi6cuFerHJZKV.+.Q2LRuRis8Ux0UQp9.ltlSUROl+wrP9iXnXK3PJbiMCDZUbSMSySHEt9ZpfAM6nNUZk+PQhnUDGaTizDlHa2aohBPDi8RVuiHJXugbOg.yxdisDWyZIdSmcEAhQ8O1h75lAni0Hq8nvB4g20xAuZYgW0LvaJPpPFHccKjdCml9whd5wif340b1Vp4wsYfYOKTrxRV3mtoy5JPBotRW1w7shgFizv69UqVlB+T5AttfoOQSOgES+XYqD5GPOZnhgb85pt8TRng2hvnKVprK8beyT7ZWR4qeIke4EK8zbDnYONO.Xvz0vL5h.kGqvF7vXNOYlpjNddkVKpe7L0.GLu3epHP2YlxaFEUvcHQ.hg63FqfeLGBq1Q4yh1QoNdUYvVbdjGpiU1Jw7PQB3a2puzG2y5sXPL6z8UZV7flQh.d7hkosGNXXYpp0WVx8abKBJRYvRAsqvfk4A1t7A7MKDihJBJkJoFD6NhjM3sERdfmtD8gzMkgPiTXi6ziebquj6q8JQeepdzRzWNgxltvInJHmoQprAvJmWTrGTx1rnDNHM1FDFM2mBRZLpHrOjE0miVphtEEsoFv2QcBOtjaQf9E0UR3ZCDWmEE0Bx53MxLAhXjo3Pn1iEmvg8PdFKxtPpLQSN3yBRZJfreqihwi2mCSIP06Q8pUeISLWFjTBwRwh3eHdrS8GNLNLqfnHlkuXJ80w84FkGAnp1l.IzpdFV3Ym9mMbMPGIPQYv97dPlL8tPBDHupUrmY900hj6nqHRLyw98kRgLDnva+1z6XrztoqBK1Zr7VFybfKi0rdmIsq4PXJ96KCrduG3ddLalpvJsf.Y37lAPuFWq0ycu6UbzwQt4raUSWuvJwJL2q2tLvwqU6yBDLYRZHUY5Qrip+z6UuLkczxv+epg4gny2dpim8eIUNsiPySGsM3g2WgvFLe9ZlLLh6kNSKcZY5R3jUld5cSm26hspmxlYgnkdUPJrRHqeRBHHlFwC+IaHgQBvYZMPirMi.maNJg9jVg1FVUmNg.HXPQ8mtzJVzrzJ.Qt+n42t6kp4ekNcE1Rgot.2IqejdwTJrrcQlhMUn6rZTuNLCjvowNRYZ0JKmxJLe0pQhPH73.PfQRBycY5h9PhmXataKj9iLYvz3K375ZaV+UQYOKaKcWTmSPq6iTwcYQhulG.LuL8cRMD0pOzkZVViiXF1fZWI9+tuB9a.1pIGXLCGU0.LD3Yw1PSyApdn04YlCRZqhodGSERyI5vVjiQTctCPrGdfZLLmGUIejRyeLl7C1V49LW5jC0t8TGCOpHVEEgwkSY3zM5yVQOY+ts3fIwP5QBBEAkuxJmYWYU1B+7smbkQPrPVg9w83xYUNHI83NnJralhJPTsoFramVCl8vTh.J0xwAreDCbSqjk9W+W+yGRlCUuApZsb5Bea0Xt0s9D5970Nat0c4b51nca24R2emi4nrIA8aNWftnS5AbSh61yImwLgStzuUi4C2lhAlhxex1avzLrl6TGODLziGqEXbVgM3m.WfwVANB+jigyqLQFoEBQJ3dAwFe0Xd9mZLX7ZuQiSMPZTGAM5vEgcxbSocZLNSFz6M9uvG1el7aX2e3e+W9OX2CSyi8Q91e1HJlmwb2IRFHeqKJlbLlIOIKl+7Iv7YgShYfiyElUJkAycY4VKn70dMg7uYuVYWQ.jkeOUh.SVLdjsajkvu3EuHCguky5L4IrD5gB9o439sun8TiwyYsxxcwDbuwe9px8uYGhk6Yu97SNKmofPtTlhyxZJ9wuiLae+sun7BYhWYY3OMdR9ymj+Pzvbw+W9xWdd9WOO+q2XVb8bVl+1O7C+iGlk+at4lY3+Mb9nX9fb1.2KL+Vlff+RFi.3gmXS6metMsa2na9mEIGudqoFhmV+vgSI01HP+ZyQd0Y.6ysu8BgMjRNKre92O+v94mLKW2deai4yKjloeFrAB79U5DdxkvIrci4MxwdByrhbN9WKnW4R.5UZPN+KH85N6pB5Gwz4ePK7U7RG.cVYeEI7khjfSbP1U7+aux07Bw2vYOg1uyzw3BSAivg4+Vfwz2F7VNa1tMbIhw.75Na8Y+17PfD3RKZ3V3vsGiEPrfyi52sIjkymCqtTxivZgKr.V0pscUrMZAZBWPzz.yAmNXMrcgzAqMbP3HX+X0W3aKhBe8waZ5Avjz7vqEc1EaSGUppiS0JUgr2Ahuv2Go+R0HjoqS8qfNKeEzYkqfNuyUPm6eEz4cuB57duRcv2fd09Zk8sP.G5t6sooJ1BE1TxfHKSTH4+Q9SZV4
-
Another possible solution is using a lottie animation
-
@d-healey yeah, I thought about that.
Actually I was wondering:
- What if is possible to create the whole frontend interface using the webview?
- What are the possible implications or problem arising?
The possibility of it could accelerate the frontend design process(Figma to Web), because then it is just about using the default components as backend of Hise, putting the webview over it, and attaching all the callbacks.
Is it a feasible idea ?
Maybe I should take this to a separate thread....
-
@Sawer I think Christoph said it is possible but I don't know anything about it
-
@ulrik Thank you so much! Incredible
-
Is it a feasible idea ?
Yes theoretically it should be possible (and I think Output's arcade has written their entire UI using a webview so the raw concept has some approved real-world use case).
Feel free to try out this attempt and report back any issues - the idea that the webview might be used for shuffling the UI design workload to a web designer is definitely a tempting possibility.
-
@Christoph-Hart amazing. Thank you so much!