Add SVG to Panel Using CSS Renderer

Casmat

Hey!

I'm starting to use HISE's CSS renderer and want to display an icon on a panel. I achieved this through the fillPath fcn on a paint routine, but how do I do this correctly in the stylesheet. I tried adding a background image property with a url property that holds the path data, but no luck in displaying a icon on a panel.

HiseSnippet 4565.3ocsY18iiajb.WisGiySxEbGPdIuMv4k0V93JJQIJ4EA4HYSJQRQI15apffCTjTheIRJQJQIFb+Om+CbpRyLdmYsgu6VfLOr6OUc0cWc2UWU2rMOl53kmmdr1cOL6ZlWs69mue50jBeIe6fjZpjZ28ubugcdg2wGeRj30L67bO2Z2c2W1GEb227U0t82+6+oncrchi2GEUq1hz.GugA6CJ9nTy+rdPbrhsq2rf8uRat+rpSZhTZb5Ivd9x6aTKy1Ixdm2HaTsu39ZCry8qc22euKKG61tN1c5xx0zwoYW9l83c7r2t0qCaadtta41Z6znYs69ZY2fhziSKrK7xgFUL085T+zxjm5fEA4Aah8vevVaJzyOItljePrq4KSN40pc2WY9wopu7oop+06MBbC9Y4ebJ6ObqfG+XMd8j1cewukIw9OfIc2qLou5IS5Od+TmiAYEerDzd9mtWMAVAgoDu2XJOoasuP8e6doTPijBl81QdJGge7y03ccZz3GdD9mu6Ce3gO7.rBkW73Y6iOlw93+wiuTOaWWS6Du328sYre6O7HTCP+GdV6L6Bebo8U56bzCF9lPAu66dSi9rpD6BaP8ukqYKNlhFJKMGJRmVsXjjphSu5BOw6TW4XFJMTsx7HuQehZk0HCh8ZaReRYyyaLBWwtPpOwnXoqQnU3IA5EVoUR4JSrMqVcPlElnPlXcikyzVaFlTMBX5.YKyYSXWArwQgUljSEA.uqr2Ryv8iBeK6SMrWZRZsJi0b0obYhp24Lip0srDnZs8WKUF2kNTf52xz5s7Bhht.s4DMfY4aoJPWmQP4WyFHPUXXP8qr6KPSlwuRpTwXnBvIb.GqxSDna4aBLK6AIAZf4Mdmsn.kMD4EK0EDnq3Zg0MrScFJmQGTmYG6wPE86g5v5zkgNsgHzWJyM4Yn8TFbyNk5vPGsXDJmGVJ.8mix2bpEC0L0A4r8MYnIYwHWtikglEdFs+tNMXnWm2Aq6pMULzY7Jv7vhgNWYnKVLEmSB2dgg1d2VTdVbIvaJP4wmNyPUj6hremSLTsUCsQ4Z.mLcCvJfpLT9pin7vK4LzsbcAlcPNvRiY17VNVZ4NPmIG19Ibx4sLz5JUHew.3AZcQNtvig5tVYGzWZSANjcLvK10wkg1biEJ+7dfY0CP4bKAtqPNJmYHvIcYANVl.rYWFef0Y.dbcMjmfbcg4HuF0okjGvr9XcmKkBrR1JfO06BpSQBvaq3AdQNOvRAJAf7fYfs0XfY.5abF3YgV.yFMFGWW8QcRt.7J1Cn7wVvXWHqB3Eyk7Yn6L5h7ky.u0SNDz2aW.rNBaZPclGxPOpNGXE8gQLTKuMnNsjiYnQtA.yNUbOLuojgxqO.30W9TlsbErVGQZDIoFOLC7AVa2MRJ+flg4LMq.NSREUhXYOb8Hh8q45WLkH4Lm1.bOjkuR8.VB0wYU0teV+0eBGtxa+DIRYesfQULGf9T7hXpjw93glgFWlz17H23KplgqmF8IrCI.3T9XfmGNC3pCI.WVpfx2lAr7ItAlD10GAl5lCb+0EHK3ir6YfEVuDX+3K.qlYLvLT3ZEvFWI.OVpIvor78gQ+BNfyaznuY3p7N.GUdB3PkdXcOjAb8cLcf1OHFXy5h.GsNnu4rdNxHS202r5T29.mOXKzl5tZ.KvfbydCQcZBbnk2XrcN4i8UcJvkwQP6X6NC0wIEZm97K.1XZATW4UVnNJU.2tzFXqlsAdjpKvbAhCLmk5rE0WWGFWWK7AtwgY.OmOD0477APLW8nOgMlXqaFNn2X9OgOGoaRn8mfLoT2rRb3LfmOrKpyvE7n8ngqi8WgxKWBbOdKf4.GLSxfbafUG0.juZoCvocHFlDuNt.2c7bCyPcqs.aMHFjO97Nrc7aBxsYBv1Ys5HSRnZHONWYCridDvQaJ.lWNF3bOgwlUMaciaLC39g6A1wNYr4rn9IncZvO1LTK.4HUSSX9gE4T8PSypMhonNls.4DEjSmOjZRxDPltbKviZf5SmTQMCurE4cRClXB95H2Xu8DXrrE6WY9Bf0pP6wnqvTyPWFjm6Q.luEZ+VuhK25tvb1oDXtxOWs4BShn2ZdSKVVYhU6iJimUv6A4jl2rD121ePn.8r4nKRMVMXMLGeD5+s6pTH6NQ0GGtxFxbPDbZpOtJqwYHGW0vqRcOR2.9qtr35wklaLIqFNsKzeCv720sNz07.W89DqkS7FOaFlqmMppID+PqW3yrZrw3xmYN2NEvZMVOqtr5DAkqyFSrO5xLjnFt2.rCy.ggDtAUCGSnoBRTkdcuHkuSnzjzSIGFqbizu7r86XUMjHHwMXb3YJU5kwZqsSknm6enThyYSCyJAbd4D0wfzPusBze7slNhnN1U8S3hjUiHBKNf7BGmQDKeVjIK7GQbtTGYkI6GQJI80.Nw7HT2UCQtsY4HR5gwZ2zgcDgqmIxqm1AjSuwhyXFS3BLPVap7XhJ6.jEvRophHeQcLH2k6l8TeJHms.YlxUiIym5ibqMN.2bJxIh9iIQgRH6tKdLI0ob.vmZkMlrKxA4i8OAsS892XiqiIVEm6CrjVSPe1kHqw2dLQXSWb9wJnGH2eGxCqKXRDFSPt9HYSBWTDX41Sl.QGkOJib3.XGOjKmfi2RXGI0VD4l8.V0utzmvscpaRLXmvM5sbbSAJgFdpEluPjPI4K0QtntLHeQbSf2l2mR5FwfLb.RJob3ZX11dfsFkzv7ZCfCVqSIVszQVUaHniZXEvWRAlpyeE30bHKMC4dsPt0gK.6l.b5YIj61GXtK1kX+tDZSpb0YfGsD5KihgHOsOXCBUQmvwxdv131Tu.3YbfM2svB4xNRPcOWkiiQ3rrvbkIxpygwt5pbvKxt5HOvZ5HyzDxopJlc.XsJVSRjrFxUgWgS7ZcHC3MpmMIohiPN1+HrtHeIE3VmS.46Whr1BjYm8or3xNfeX9gPHO6JJKrVOQC3qA7vdH6KIRzUCqaFNcTeLm3qXqMlfEGK1kChGZCbEg8B2K5rrH4srOG+.Pe+kvYDjGA8iZqpkiBkq5IQG1rJBhSzTRiPsvyYnpj4OkPuXeLPBx6ISCs5usk4M+CAsbQbbJCQuU4YNa7VVwE7+3VxWfbJ3WJTmKGXxdYTGNHOjsyJQX7awe.3ptf+swNAjOfyEVafL7D68wv9A4YyRAdzAXeRCS+Df0hg8OQqutGXwUGf4tV8QNTXOL2cwKFu6R.rOzZTmHfgr5PcoqQlYpEr2SraH1l9PztcgAHWbD1m6vaf7jqvN+TC9.fOxB6n5tt.4yMg3E6hCQdbSHNBWoKxca.d7p81fbQE3cZo6g77Jv6wxJB4nFPbJ48mPlxAwu3tzE4gLtiH6ZOF62A5VfNchPlc8LH1WYcjmdAhIJ6KE8IrhNDCMMQOCte1DxRCh0s6JwgwaKmmtVhtYVk4rmti0M946aQ0nfm63oV.yUhwu8GMFXUWBDWefnBJGiw+7c6twg2XemYqOaF1WPf0bJlaPHZEb71C8Yjn7FCWB9PGx6JREbhm9Vl00E3SES.VYoNvCGUeBxU7hTudGlf2QwB3BQKTdu1cDoscTP4Eq.VZJbfT39AWZCsYjOEuGlJvYKnHytgCpaFyM9XKQZqfylP+dfqIHmryDOOtDximfxszXEoi6SLw1YTCQpeN6Xn8girIROSx.VYz3qhT9Qt.GKN7hHsmwTjOo.4Pign7P63U+jH0or9HPeO1BQpnUSj4NjC1VmS.Gy4cTjFrNE4iSN.1.avM8IYhTE3T33cAajHRWkYi7kn8hTUIKjymGKRaXuD0esbjH8.dmcXrvG97c4eMarvtzxWkzfqEAi08Jdxlipj4sai7PGVURZGFYf4VynQx40P95TMMR2NqPdlxLMhQyL4awwbzH6Nvn.LOcuFwZ9ZjYRNqQJO2DY+RNMXu3p9.qjKpS1kzEYpktNojKZ.vIUS0IpwTUfY6ZCxiYz.d+0.cR2qWP93rCfb4Dcfa5cA3oaGh4ElxoSZLy1.yEbpNz90WMBGiWjA+PMqwXbXa8gD4LaS79Kolf74ao.2X8b3bL0imbqtVCIy8NA6jrOu2YHobO2LLdlvtgDKC4E3XjO.ZGxjk.O2JdHzWdvoQrWsHYHgdsvBq60TntS5g2sZTYFblI5H7tUYiN.x245fsiNv4MKbwbhonNJ0w6bMIFpKkYLdOqPIrMsb8w1Q.5KKRd.ZOdfMn1ncHvxdaA6wqeLl6fAr4FMvS9XaIAikc4aRvbnoy.8aGh4TZeYLzll2xMksUaHIM7Dlyx+JAjerDyqYermNIcSIl6a1vV5DmCEX9wwyJgyBNNEygNSNCVW5tEysdXquNw5zbL+q+905j708w7x51SzIxsZfLGuJr9xrCyiKMRPmvcX.lqWzrkFQnwQjmPNoQRmafmGXxwHv+YPFxaU2.xUkvyOr0YBjIZ1JjulNPiLOJE45m5oRDZyhbRYkJQ071YOVbNC7sika9hOOstxuEatbkJorG4VcWLRkrqaOrMSWQTIV7UHe1q8.hZ2XjGmed.gSXNxGD2O.xOTGs43cNCHkAQ2Nmi9rADqACPlQTe.r9tGGuaTDA8MEuM1WyAmOutEN+zo249DgoE37VdiDP9j53bKe8s8IpxFH2z0pOY90k37+woS.ch7v0kHOcfCCw0qXI49jTtXbc7BScEh5oXb8s+JNEh73Pbc2UCtagZnG5OTr5jBgxsJ8VcOnPJsLQ+mq56A4TEzupaYfBb941QnNraUHbU4nenwZWEhCmG5ep6rAzQlh9sWquVgX.6fPeFQfK2Wh94bgVP+tbG5+GuGYAJtuvVCzI8BCteYhgMbumVmw8QLmg1bm2Nb+07KPeYUMA220c5NERjjLtezcVHTWqVyQe9qfMyIli6e0OCiEC8.best1Ync5sF2uefoAzNIyv3.clzFtW0LSL9fDCCLGNbDF2PuuReh7lQX7jI6G1mXXPw3LK8lBysoKv3OSKV2mj21EiKwOwGVWTyv3UxCyf0Q2VXLsMqtzmDwngbAaafa4hw8hhj.+mgMw3gwACAeFooHu3zbvGK3BF+bYeuADgyyQVMKA7eNwKe6rhWF.2oXOxMU4Ad5BjOHo.6EpO.YQQSUBWRcL19bo0fu8jaw4u7qlKnZUjv29gGd4qDyDmZ6pbLcO94he2q+1wu4iJG71u87NuBoz8YoIvOt88p+3Wp9EsY+Eep5goN1wCSSiDRbU77hwOa8C2TkI2qPMINHwaZw0Xuo9ddPy9fav4G+ed3a1X6Ds6X5oD2+jSZb5we7widte3gGg+JNZmjGTDjl7iO9op8XCl14O5Ym68gG9qOfM1O5md16HzjXU+ks5Uu33zRTYb3fFFZW+Bq9lEil96+9WzwzNHoXR5oBXD7tsmRbPK5c69tG.q+8ueGpxSuIy6d5+xYJ8CJ7fF4a1wrMHN91Ww+kI+e3w+qB+fbbRdYfK948eey+z6X6xzhs42yxz98M+te3EEF3Eryu3YM5wz9kxe7ipC7yE7eCc3e869v2+9Gd3gWrxGSSFkV3MN4c2rVXv+3mVz1s+pkgKtGSii8N9qVL9vTG+sp36RNsei2we.7XhO48yJV6tu5sutyW+22q637ju1qTLMQMInXbl2y+VIM1Ee0Fj+kuETsmcVAZtJ5+iOOzyx.8x7NVDflycDuyANdO8XQey8Du7nhzra597FhZ286JtU5u+kmRBeVmZAPW+U2mwV6Rs6t+N705t9BrY2KOY2270+zO8SyQYf+w9WjdSqFeTRyWDU3co3iJAU8eu1u7Es9C2aj5dJ1t3sOvF9ziOW.rt7lW0Be4Jbe00W+zj+C7paM9Me0s+dMw+38lAEN9+513W7qXivJ1+eXiO+Vk+96k2t0yo3iF3WcuxpO2Gl7uQ2+TvjcFvkSCP+kQm1OEVkc7fdOA7lxw06u.8Ze52MdwUZpWhaimcF9omKjE+8cOWH6KEVausywz+hyS6FwWC82cSBXSI2ds3u4dC72OxV61NzWOOuOvM3u3371l5WTwletUr0maE49bqX6O2J14ysh7etUr6e6Jhuctvohz8OssoVMCS4agzt6N4DavC7l2Zs+O.h13rA

Thanks!

d.healey

@Casmat Can you mix CSS and paint routines?

Casmat

@d-healey I couldn't get it to work, the paint routine seems to overwrite the css definitions

d.healey

@Casmat Ah ok, that's the same issue with CSS and laf which is why I'm still just using laf.

Casmat

@d-healey I see, I had animations using LaF but they were pretty messy and thought using css could tidy my code up, guess I'll have to stick with LaF for now

Edit:

HiseSnippet 5422.3ocsZt2rpabj.miiOohO65s1T09Afx6e3qM9nqdgdbuwYijFDHdJwawlsRIjDfDBI.IP.ox248aP1tEb74w8FmDW0Z65d+oV8LSO8zS2ivi49DW+zzj8kt6ggm25W5t+06GbNNak1Jmf3RFjR28uceGmzL+8kuJR87VmzTeuR2c2upNJ3tu5KKU7O+u+WpNQNwt9OKpTowIAt9sC1Dj8rTy+PqfnHcGO+gAadg17+AC2jXsjnjCf87qtmtzVG20NK865fp8E2WpgS5pR28826wvyrPx0QPhgm00kURjUVz02YwBeAlph7RK3W33RyV5tecMufrj8Cxbx7SgNUMw67fUI4wWGfwAoAyi7wGXJM.F4qhKosJHxy7ImSZoR28klO6p9UWcU+G22IvK3mj+rK6eu3EketEuzoc2W7yYRL+SXR28BS5KuZR+16G3tOXa1yuAsm+k6MhgUPvk3+JS4ptk9hgkuWKAzHNiZiyZe88vC+TKdm.M8OTF9iu6ie7gO9.rBklU9ny9xaYJ+ikepcNddlNw9Qu6a1x7M+PYnEf9ObS6sNYqvk1Wnu6deX5aBu3ce2q5zapRbxb.0+FdVNdpLZ8IlsUsFbYbWMCcW4JJW4kFScMC0ZabwbuXm5DiK1c6Pbl4PpSxYONuS3TlwZ0Icxl30IzN7fh0IFsoZo58cLuLcWMFvQgLwtfqss4Lyv3KcA1pQMayg8YlBbm8JSMIGxB.dYt7DyvMcCeMuxpiyDSB2zsLlSOjViX3ebamKy3rUrZVc0Ls7HIq1JVq3LseMOln2RwhseSfYD4LTrlskfxOusghkNEEp+Em5JVwCEmpkq2osNvw7.GYHRTrVHxBLCyNMEq.yBdoiphESHximzRQwZJOG11PgJTV7cDPcFtWlxRckLpCiqDk0.ZUXrzGYJRYIq2nvN0Dnr5NtKJWDVJ.8GgxmefixxLwE4saXorh2Fgb9RFJqsgGQ6Wxklx57HArsSmegxZnnN3GF218Lk03wCPeR3hSTVUWt.kuMJG34Yn7nCGorzqIg7JgCTVMm11Ak2D33AyAVGTkxR7xdTd3oTJqE7R.yzHEXsdTyeMGoMYInS+cKdCGebAkUE8KHepCvMZJgbTlOkk2L8kvX0b.vgL8.d7RAOJK141n7ia.loU.JmeBvRJonbp1.GKw.bTMBvlRTq.tEEv8pzD49HWQYDxyPc3z7AlYE11QZI.qucJvGjOg5jEC7hKh.ONUDXs.8.PdvPv1naXFfwFGAdXnMvLq6gyqyqPchOA7Tlcn7d1vbWY6EfGORaEk0xNRHe5HvK7qEB56uL.VGgMMnNiBor1aLBX8VsWSYY6OG0gqVDk0Zu.fYFntA7a5aQ4UZ.7rSukYxmBq0qIzq0LhZuEhAl4HsVKcWyNlCaZGvaRtXoQrcZOqKw4kbkSlZjTpCyAVF4Zms7AVC0wc5kk+j9ydCGN0eSeMRd8lAcuPsCFS0SpIZc1D01Lryo9UM2y26jgY3rAqeC6RB.NQLB3QgCA9xtXfyy0Q4K1BbsC7MLILy1CrkWJv0mkgrxJj8NBrxrI.uJ5DvFa6zvLT47Ef6bl.bOMVfSXDqCy9w7.mRSW2LbZp.vqyO.bntL11caAtxRJAn+Ch.1rhJvqmET2bnraMjsVV27xAo5.m1XAzms7ZBrBExrxsQcXANz1uG1OGVgiUEKfyiVC8ii2PTG2DnepKNF3NCxf1VapMpi9Efql6.rMaUf6Z3ALefZCygItKP8a0BlWmyVAL8tg.ORLD043nFPN2VqeC2ouSKyvFx8DeCebcKShU89HSxaYdQs8PfG0VB0o8XQzdZhqi0mhxym.rrnMv7P.lIoQpCvFcoA4Sm3Bbh.oiIwWvCXodi5XF1xdAv1Mh.48NtD6mUrfbGp.relYz0jDZDJh9JGfcasF30yy.VrVDvo9J8LuvxUvzCAtd3Ffcch6YNbc8XzN6H1yLrY.xqMLMA+CCxIsBMMuLWMA0wjCjSzQNYTaKSxVEjslr.3tzn9V8uXYFdZAxK0Zz2Dh0QldiSeXtr.G2ZhY.27BZOcjTFXF5Qg7HeBvhbn8a+BNeg2XygGhAe0pTC1wlDU+Yhl1LL0H1U2q2aXlnOTSZDaNrusdiPEqilcOoQOswLvGuGF+EKunSVdvpUuvoNPkChhKaqdW1ReDpwco8YMo8Vyg3UOFb83D6bSxz1CjfwqAV+th8NIyc7UpSrmz2u2vgXsdl0WXg7GMkCuwFQc5kei48Dxf0Zrc1RLsHJ5mG1i3r2ipMwHbSGvNLCTZS3abocOhUhhlktrzIszkJ4lDY8TXtx2s0oa1uq8k1DEM9F8BOZYo8zbkaw.Mqi02kqw6Nm17hB5WNX41gP2ppNLdhbC5RL54Y7FNKdZWhx3cHO10sKwdECxjwq5RbOUAY89a5RxI0aBbr4dnsSaibUy7tjjc8ZVnCSWBurIxyFH.xsJX0gT8H7AcPt4fZ8HFLMPVAeqkgJxmL5Ax83KrmJC.4LYHSkOsGYzfUHyM2EX1AHGqtpGYcnFxdKi5QRbya.7Ats8HKW6h795Gf9oR8Bty4dD6ri0AVqIKnOyDjaJVsGQYtD5erCjA4qVhb6JJlDkdDjqzslIge8Zvxc52GxNVaeMjCa.63gZ4Db9lC6HsbTQlUFXiUUzdCW0shIoCSe9tuliXUrHVgG3v5EpDKR5jVHmUoFHebDKvKRqaQjVSgLb.RKRd6Yf21ogSSKBs4YZfCl0xhXy0BYilsAcLBu.7oDfsZIdF3Y7HqMDYYNj41cBXuXfSNpgrTcf4O4jii6DnOspc4Hvcm.iUmr1HOnNXCJWVe.mKa.aiedkLfGxC1rTlMx4BZPaOdIEmivYYAekIxFif4twzTHJx4xdQfa1BYJVnlpg51c.27BiIYcslHeI7LbhW6caAdtwQSRhZWjiVsGVWpcJAXtiwf7MSPt4XjYF9VVch.DGltKDpyN0hAVq62D3yAhvdHmSwZVSaWwLbP25XMwWv1yMAKNRUhGxG5.7EByI9mzYRV7q4U7hM.8WMANiPstv3XvcYR2vZWj0rZydYMjmfUqIwxFOmgg91UCHVmb1GnA08pYEZWeAmYQ7gRyTUbdVCxdaHRcryqYcOH9iehXFxIPboRE9TfIapg5vC0gbbmpByeawc.eQBhu6rTA4cnuvdNTgm3rIB1OTa3vDf6tC1mPatJF3lQv9m0yNuAX0o6.eGWcjCU1.9tS9Q32tD.6Cs6JrFXnpNzVqYHSMvF16oJEh84JHa2xv.jy1C6ycE6fb+yvN+jNhA.umA1QIMKC4irP9hkQgH2iExivm6grDMDwaHOG4rKPzocKejGcAhdrsWi7ZZHOUsMGP1hGxeweRB41TdcIKq1CG2FsrAcDViLyrgPtu7JHO3DjSr1Js0ug0aA4PShasE99r9jIcH1EeqDOluMeTxLMq4CuXN752XUv29dKqlVPjauA1.ymi4uW0sGvFdDHudCUcTNli+121UvgE7J2gyNZFVWQgwb.VaPY8T33s6pSoYI1o8DHFZWpjpkhazfWyLdd.eHqOv5SZAb6tU5i7EQUKe4c8wuQwF3LUaTtbUAUqpt5n7ro.qM.NPJ78AmpB845UV32gY.71wVHyLmGZ6VpBdOmpEWvQSXb2wyBxIKMwyiqgbu9nb6lLpV8pSLw9oKsp0pTldP+CGYS05HYKv5c6cV0RrqGvQpsOoZI2Y.xGzgZnQPVdne7qbP0xMuRWPeelLUKUaVj42kB1lvAfi382qZELKA4882A1.SPg9jspV5vovwuEjNV0Z5VGjOsdipkglMxoihTsnclf5Oq1ZUqc32rCyEwvaeK+K4NicxsWYPn44HXttWv8mu2fLpZUja6xXPRDnpAL+LpljTwlHedPylDIgoHOTeXSRG1s0Jxi41jrbGkNvhVaZRrGMCYp3iMI4GYQdUNeSXu3z5.qmp1hrLVBYK6VsH47qa.b7kAsHFQVF.yH4.xinZB7lyAsHRmOg79g6.40haALq+IfGrnMVWX.eKB8PmNXsfCUf9uxzt3b7TMHNrocOLOrSq1jZacLwueIwDjOZgEvzyFAmioRT+h1Z2lLx+.rSx43F21j7M7Cw7YJKaSr6TaLNGECf9gzeBviriZCikObZDmoiiaSrNmYis8bBz19x32V0MeKblIqt32Vss6NP9ROWreZAbJalGVSLA0QuB9MW8if1ZQ0C+NqPMrOs8Vg8iBLV1jz.zd7AavftZHv07W.1ie8Hr1AEXyzz3Iebr0f4xxz4wXMzjgf9UCwZJUO0C5SyhZSaWzrMII7.VyZ0YBHeeNVWyYubKRx7br12v1bsHt6xv5i8FlCmErWBVCcXssv5hzBr15tEqZQrOLBq+tZyrVjzY0w5xsb52hTiiFYdQCX8kZIVGWqqRKB+tFXsdUStlDE58H2mbnIIYTG77.82uFheZrE4EFyA4FZ34GV31GpDMbJxmSZzjLZcBxUNHaPTpxfbb9EChgYwYOFebKDaGUi8oXdqJ5+br4joFjbYRQaG20frTRF6yjoDChs3EjO5WsAwPJB4doGaP3UFg7N0MMf5CUPaNZoaCRdv5hy4zZXChciFHSo1pAr9tAmuy0UA8MUKl6y3gymWwF8OBxGqSTFjg9sT5XPd+JnuUrxh5DiZcPl0ytNYz4In+e+f9fNq8w0k09s.NLDWuhzpUmjvGgqimnpnSLNDgqu0mxqSp0KDW28ZBeagQnOFOjM8fNwheZRQa2oSxsMw3mys1.xszw3Jo7.c37yUWi5vrPmveIEiC6LySm3x6iwmsbmC5TyBiaOWYlNoCrCBiYTANeSNFmyGZCi6jkX7ezFjUrv8ENMAcRNQg6W52wA9tGti39HpiPetzeIt+ZzIXrruzG22IMXoNYsVMb+n2vPns1bivX9yfMyqlh6eacDlKcZEf6qa07HzOxyv866nng9IdHlGPneU36pFZh4Gznn.eX6tXdiV00qSpMuKlOo+l10Ic5Xg4Yl3O.7sIiw7OCxlUmjV0CyKI1eErtXrEyWUq8VXcziCyoMe5o5j0TMQNioJvbdXdu0q0f3m1rX9vnf1PLi1.jGeXDDiEbByeNoteChxwQHarMFheNHVq3rhmZ.eSwFjYMDAdvXj2ooC6Epz.YUUSCBebEL29HsYPrc+h77m9r0BtLcsx27wGd5WIlJJwwSeexF7mK9cu72N9U+nxAu92ddoelVxlsIwvCE+d0fxu+6QknR8yLcBhy5mbHKH1+cKND6lEjD+tke2C+4G9p2+9knJW+eQw6t9WoT4qBx7g93qVRsHHJp3G09Ia4GJ+emsJHEGyIAd3u186Ye7cLRTbLreOCU02y9c+vSJzvOX4praZHSU8o2W9Y0A91K9efA7u7ce76e+CO7valpLexuyd6DWmn1IIqUh8z88ivey8GJTEmNFwQvbcP14H+Aq78AexW+fWvwx+4u9gxkyQq9Ck4o2d5i3yqJLxWHXti65k6SND68nK3P1+gx688JdS1dm3z.z88gOQqxzTUSK66j5+1NIXiyR+OT9v9n28G+FOXo7CERde5wkUNsI5iGxVH8C+N3oxvSwo+32tJKa6Gd+6yyyox4nR1u78rzzzn9ea4iA94pIm9wuktLcYVd3+91e+uCWaJ68ie6FFFJZQoxrTrUcejlRlQPtZY5GYnDjk.fRPfkmAdThGjC9bAA9HPOFQQQ1xXaY4v1QyHC+CnOCK9VFdIQ3A1pxBBvyrxBRBvyb7hBBNhT7xrBkw+hqLZTz3.KIvhMopHMGC1iLBUu1gLUgm33pxTsn6A6BdlGphfOSKwIKAVDXILUwghShUhwArWQd4x3eU81P.yPINFnIRLRbB3bPlkQBmCUkEE+Ls.TkmiQfE7MbR7RQPKgwBcIxbbBtvXKyKKWXDhnXFQZVzfYYkDJL7p7EOC+ofLLoggAmzUw931+xPwvIIhcEC+U2G58nqJwwiVJLmEjQWQUVN9m5Izxk3YDKVbjY3+rS1Owz+6MWei2AcmhUexc5VrhJilBjABsRv.PmMMGsLtn87pAKM9dNFlBOEKCZ1B7zWMe5pECArfww9zRM5njXJl6zREsQ7ZrBK.3aeN1QVfI5MQdnugtnwxz3PHywVU3VXZ4WEztBepJtrIyTEW0JeMD+wag32z9wag32FmG+owgtHtlsHfDVyvfZA5mMvGuYfEFJWQHJD.iSdn473aqJ77j+wWL4EDJbrLEtJHvpHbmgsZgirvw93MGawpRQ.2eqfbbYTTF69qKi35Nmnzi+MW2eJP4waAJOdMH+wmBxe7VT9iEA4OdKH+waA4OdKH+wmCxEX3vfbAb1baHtEjWjjnHYP4ag3OdKBu7sH7m5lnWXDP7M37EoEkwlVUBaLbXup73bRpHHiGxMH9hIPQn9OyT9Zn9O4id70d0hTOLbWCH44P6Uhsvj4noKVK34K7vWy7fIyjjulL6E4xdwZbQGJwd0GdMvQ7Z.CKqvyYGe7V1wqIWAI2B89byfWEpdYyS6tEb3n.UkJC+0UUg.LLiS4Oi7GA4W912+6+cXQhe+eDp++lZP682BkM+P43ja3aUXaxSE1b8w+Gk+12mFbApgAEXyfSS7wxk+5G9Ke8CEUU+vpji96uVa8SKcd1OJJI+iEpiGK4oCk7IEvKJdiUwe5DJkSh6lj42K9cEmT4g+xCke6qVr3y9N7nB6Shh72+YeMdGM1+y0v2EeXyb+8+.b9inC9+jhkt6Ke8Ec3W+O1Ecv85IWdghIwFwAY815e6Y8jHO7BLf7mdsHJc6nO.Mx.OJHdSItICzaq+9r.zbti3eLv0+58l3qtm3mtNKYagt2NaXo69MYEu8qe5VUf2vgRAvP+k2ukozoR2c+c3EW47Sv7kOc6U9pe8e8u9WGgxfyFt4IoEZQ+rD1mDk4eJ6Ykfl9eV5SubG+622Iw6PjS1quqI3sv41Kf0kWcAOvKwAdDryu7V57OwEPg9m8Bn7OpI9au2LHyc0m2F+hOiMBqX++gMd6Z6702WawBe2rmMvu7d8o+RuiN+cF9qeHwxNNY6Cv3ktG1L.Vkc8gQOFhlRw06u.iZu9L8SgRC7i8nuEL7Wu8RF746t8RlmdYoMNt6S9StW2MhWLneSgDvlhKt3Te08cvmKyTpXG5K8yaB7B9Sttutq9jFx9Ksgb+RaH+uzFV8WZCE9k1PweoMT5ueCwqQlxgrjMW21TpTGyZEozt6tZwNPDXQzZo+OPA4tWC

d.healey

@Casmat Could you do your animations with lottie?

Casmat

@d-healey hmm, I didn't think about that, would you consider it'd be more efficient and better to use than what I currently use:

namespace HoverAnimation
{    
    inline function applyPanelHoverAnimation(panel, alphaSpeed, clickCallback)
    {
        panel.data.alpha = 0.0;
        panel.data.hover = false;
        panel.data.alphaSpeed = alphaSpeed;
        
        panel.setTimerCallback(function()
        {
            if (this.data.hover)
            {
                if (this.data.alpha < 1.0) this.data.alpha += this.data.alphaSpeed;
            }
            else
            {
                if (this.data.alpha > 0.0) this.data.alpha -= this.data.alphaSpeed;
            }
        
            this.data.alpha = Math.range(this.data.alpha, 0.0, 1.0);
            this.repaint();
        
            if (this.data.alpha == 1.0 || this.data.alpha == 0.0) this.stopTimer();
        });
        
        panel.setMouseCallback(function [clickCallback](event)
        {
            if (event.clicked) clickCallback(this);
            
            if (event.hover != this.data.hover)
            {
                this.data.hover = event.hover;
                this.startTimer(1000 / 60);
            }
        });
    }
    
    inline function applyComponentHoverAnimation(component, data, alphaSpeed, clickCallback)
    {
	    data.alpha = 0.0;
	    data.hover = false;
	    data.alphaSpeed = alphaSpeed;
	    data.timer = Engine.createTimerObject();
	    data.bc = Engine.createBroadcaster(
	    {
	    	"id" : "Component Listener",
	    	"args": ["component", "value"]
	    });
	    
	    data.timer.setTimerCallback(function [component, data]()
	    {
	        if (data.hover)
	        {
	        	if (data.alpha < 1.0) data.alpha += data.alphaSpeed;
	    	}
	        else
	        {
	    	    if (data.alpha > 0.0) data.alpha -= data.alphaSpeed;
	        }
	            
	        data.alpha = Math.range(data.alpha, 0.0, 1.0);
	        component.sendRepaintMessage();
	            
	        if (data.alpha == 1.0 || data.alpha == 0.0) this.stopTimer();
	    });
	    
	    data.bc.attachToComponentMouseEvents(component, "Clicks & Hover", "Optional");
	    data.bc.addListener(component, "Component Listener", function [data, clickCallback](component, event)
	    {
	    	if (event.clicked) clickCallback(this);
	                
	    	if (event.hover != data.hover)
	    	{
	    		data.hover = event.hover;
	            data.timer.startTimer(1000 / 60);
	    	}		
	    });
    }
}

All I'd need is an animation from one color to the other and I can animate that during cursor hover(based on your lottie video), then use a callback when clicked?

d.healey

@Casmat said in Add SVG to Panel Using CSS Renderer:

would you consider it'd be more efficient and better to use than what I currently use:

I'm not sure. I try to avoid animations myself so I don't have much experience with benchmarking them. You'd need to test it and compare.

Add SVG to Panel Using CSS Renderer

40

1.6k

11.1k

96.9k