Add SVG to Panel Using CSS Renderer

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.

Gab

@Casmat A work around that i've used is to make the icon as font with a website like fontastic and its working great

Capture d’écran 2025-02-21 234907.png

rglides

@Gab oh this is such a nice solution!

Casmat

@Gab Ahh! That's smart!

Add SVG to Panel Using CSS Renderer

25

1.7k

11.7k

102.0k