Hey!

Was trying to style a label using CSS for a label as there's no LAF, but I can't seem to change properties when the cursor is hovering over the label, unless its focused. It's also noticeably slow to update, which I'm not sure if its just my computer. Any ideas whats happening here or how to fix it?

HiseSnippet 1138.3ocsV0saaaCElJIpn1cIXAnO.BY23LDmXYGmebwvbiS7lQSRMpxJ1cEzRTVDglTfhJIdE8cnuJ8MXuD68XWNfcg2gR1VRItoCFsN+.yuyO76b3gmC6KEtjnHgDYT9pwgDjw2Y5LlqB5DfobTuSQFaXdANRQjVoPmLNDGEQ7PFFq9KZ.iRqgR972+7IXFl6RxfPn2JntjyoinpLz9seEkw5h8HWQGkS68a2yUv6HXhXfOqZVCEhcuFOjbIVq1JlneEGEfL9Qy59Cbq6eXiirO193C2+Xa6lGMX+Z0c8ZdbiFGzvyu9Q3CNBL5Im4QUBoiBqHQHi0NQ3M1IPbKOcCdKMhNfQzKrQNvNmB2Uv7zgnFE0Ifx75OKQEg.uzOKssZZZ64lWP8nywyReeeh.qLKxm.MVoH8Vs.8rySuZ4n2BnjQNJsVJk1zzwURCUYRz74Yl83vooOFNmxSkTcQq7OqZ1Q.ZvU6NBeMoqDVL2hJ0qUaGql019EkKCGUQJqavRqywCHLaqexZlgCIpNhQgBNrnxVoh2pnMrArNQQ4rwURfbv4BWL6bg35Wx85RHrJZqRcvtQDvYJxcps1wZqNNNo6aheKu2dVmMBSY68Jx3Tb3+9kS2Esk83LJm3nFyHNADsmJWpbIVhlue8xkrfOCDROhrpD6QiiZYYeP3cunfnVV01sY3cVQBF0yRNb.tBjNl96t02dt1PY6PoHl6U0ENz.6tut0ZLW4oZ.IkJUqpCuzK.ykqgphYzg7VVLhuZFdH1yixGVUiUjryjHoCCxI5CveqOMlaEHtgH2Y9RegabTVh3Ky+CuO++gtIexsQTdXr5Q7oRh4QgXIb5+UOVSHF3ZU04zqo9mbzqUqHBi3pnB9BHYqG43cpKuMfpHINDJk1pXg5CpiSqDAk7i4o6ofeoPQdMux1keO3fOT159h78WnL8MFofwHxEJV2SU9XFVgGOZ.b3CkbrXxbEg9FEaFY94aFkuWoa5E3bJJ383T0qCI7OWGTzza8v29sdmhUXcGroXfdgDohpofwojaf4Go8yJYdJI5ZkHDFELu8BL2RkHc8Yc6vbBCQgdZO0L461n6xOPZb9E2R8TAY.z1ADccTFRu1o27cn+QgwZonuIoSQdbnhXzrAXkdxjIS9qhn0yCixEEOqXTjTIMMJRqpxGEG2NWT771Eih+bvChhSaquXkLAcvvL58wqPSdHo2XiOkfl0JRiB.SVPnr4la9uoyzev3GXvmvKlgUEmFpeyvTAPUYgQP5wL7HpZb92T7UaD4+WJtoYepxMXwbbkEvQn18aAGm9vh0MOy2GZSkQv0L696eadEA5MhXEzM8BrRRg5MyKiG4.G0tDX24vcIcWAiUzUtoqqoWqy.NDtWxBn1dxTg150FSEZOSHZD1UJdmaZuH8SWdZBBvIdxy7JAu2DVaYiR5OkOOOBdI06bcK5pGXX8k0vFKqg6urF1bYM7fk0vCWVCO5Kan9gtuLVIFkdsAgtn+YIM2MLNiigJvjpUz+AU5.XF.

Edit: also noticing that if I have my cursor hovering on the label and zoom in/out on the interface designer, the label gets updated

Thanks!

@Mighty23 I'm just curious to what the benefit of using an svg would be here for your use case? The hollow mooon svg holds an image element inside it with png data. Hise's converter tool only supports path data (that I know of), hence why its not working.

@Allen I was actually thinking about this same exact thing a while back, getting features for image analysis would be useful. My use case is finding the most common color in an image and displaying that within the ui.

Yeah, I've had this happen to me really sporadically, when playing the keys, sometimes one note would hold until its tapped again. For me it happened most often when mashing some chords really fast.

@d-healey One question, should you use just one panel in the viewport or generate a new panel for each list item you have in the viewport?

In my case, I'm working on a custom preset browser and will have multiple laf elements inside each viewport plus mouse callbacks for hover and click, what do you recommend?

Option 1: Use one panel and using row height + for loop, you draw elements within that panel. However, I'd need to make this parent panel on All Callbacks to get mouse position if I want to have a hover/click effect for each list item.

Option 2: Generate a panel per list item and enable Click + Hover callbacks and do hover/click effects like a normal panel.

Thanks!

@Gab Ahh! That's smart!

@d-healey Ah ok! Thanks a lot!

Hey!

I'm wondering what the best way to style a viewport is nowadays. I saw CSS functionality, but I don't think I'll be able to utilize CSS until there's a way to draw objects within components. I know you can put a panel inside a viewport and style it that way, is that still the way to go for customization, or are there dedicated LAF functions implemented. I found some drawtable methods that seem to go with the viewport, but I cant get them to do anything that styles a viewport.

Thanks!

@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 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 I couldn't get it to work, the paint routine seems to overwrite the css definitions

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!

bada-bump is there any update on this, didnt find any related commit and messing with it in hise beared no luck, dont know if I missed something or if its still in the works?

@d-healey hmm, no way to make the center transparent?

@d-healey just a question about hise's box shadow:
is there funcionality to make a shadow like this (like a colored vignette - transparent middle)? 100% ok if not!

@d-healey Thanks! Yeah I'll have to do some modifying. Could you share a snippet for the one you made? How did you inset the drop shadow within the key?

@d-healey

to replicate the inset property of the box shadow... would there be an alternative? I asked a while back on the state of CSS for the keyboard floating tile, but I'm unsure if it has been implemented .

Hey!

I have this keyboard design I'm looking to implement, but just don't know the best way to implement it. Here's what it looks like:

And it was designed using CSS:

white key active {
background-image: linear-gradient(-180deg, rgba(255,255,255,0.43) 0%,
rgba(237,237,237,0.00) 95%);
box-shadow: inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 3px;
}

white key active {
background: #FFFFFF;
box-shadow: 0px 2px 24px 0px #FFFFFF, inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 3px;
}

black key inactive {
background: #B8BBC6;
box-shadow: inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 3px;
}

black key active {
background: #E9EAEC;
box-shadow: 0px 2px 35px 0px #FFFFFF, inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 3px;
}

keyboard main bg {
background: #C8CAD0;
border: 1px solid #979797;
}

knob bg {
background-image: linear-gradient(-180deg, rgba(255,255,255,0.43) 0%,
rgba(237,237,237,0.00) 95%);
box-shadow: inset 0px 1px 33px 0px rgba(255,255,255,0.50);
border-radius: 22px;
}

I do have png versions of the keys, but I was thinking of using LaF to recreate this, but then after getting a good way through it, I realized it may not be the most processing efficient to go down this method as hise started slowing down a tad:

	const var keyboard = Content.createLocalLookAndFeel();
	const var maskWhiteKey = Content.createPath();
	const var maskBlackKey = Content.createPath();
	
	keyboard.registerFunction("drawWhiteNote", function(g, obj)
	{
		var areaFill = [obj.area[0] + 0.5,
						obj.area[1],
						obj.area[2] - 1,
						obj.area[3]
						];
						
		var areaBorder = [obj.area[0] + 1,
						  obj.area[1] + 0.5,
						  obj.area[2] - 2,
						  obj.area[3] - 1
						  ];
		//Console.print(trace(obj));

		
		g.beginLayer(false);
		maskWhiteKey.clear();
		g.drawDropShadow(areaFill, 0x80FFFFFFF, 16.5);
		maskWhiteKey.addRoundedRectangle(areaFill, 3);
		g.applyMask(maskWhiteKey, areaFill, false);
		g.endLayer();
		
		g.setGradientFill([0x6EFFFFFF, areaFill[2]/2, 0, 
						   0x00000000, areaFill[2]/2, areaFill[3]
						   ]);
						   
		g.fillRoundedRectangle(areaFill, 3);
		g.setGradientFill([0xFFFFFFFF, areaBorder[2]/2, 0, 
						   0xFFFFFFFF, areaBorder[2]/2, areaBorder[3],
						   false,
						   0x4AFFFFFF, 0.39,
						   0xA3FFFFFF, 0.62,
						   0xFFFFFFFF, 0.86
						   ]);
		g.drawRoundedRectangle(areaBorder, 1.5, 1);
		
	});
	
	keyboard.registerFunction("drawBlackNote", function(g, obj)
	{
		var areaFill = [obj.area[0] + 0.5,
						obj.area[1],
						obj.area[2] - 1,
						obj.area[3]
						];
						
		var areaBorder = [obj.area[0] + 1,
						  obj.area[1] + 0.5,
						  obj.area[2] - 2,
						  obj.area[3] - 1
						  ];
		
		
		/*g.setColour(0xFFB8BBC6);
		g.fillRoundedRectangle(areaFill, 3);
		
		g.beginLayer(false);
		maskBlackKey.clear();
		g.drawDropShadow(areaFill, 0x80FFFFFF, 16.5);
		maskBlackKey.addRoundedRectangle(areaFill, 3);
		g.applyMask(maskBlackKey, areaFill, false);
		g.endLayer();
		
		g.setGradientFill([0xFFFFFFFF, areaBorder[2]/2, 0, 
						   0xFFFFFFFF, areaBorder[2]/2, areaBorder[3],
						   false,
						   0x4AFFFFFF, 0.39,
						   0xA3FFFFFF, 0.62,
						   0xFFFFFFFF, 0.86
						   ]);
		g.drawRoundedRectangle(areaBorder, 1.5, 1);*/
	});

(just tinkering around)

So what's your recommendation? Go with images for all keys or continue to implement this in LaF, is there a more efficient way to tackle this in that case or will I have to continue using masks/dropshadows which seem to be the possible trouble maker when extending it to all keys.

Thank a ton!

@HISEnberg Yeah its coming back to me now, I got it to work after leaving out tempo sync abilities... I'll do some more testing myself, but it seems to be a bug

@HISEnberg is it crashing/compiling for you? I just resulted to leaving it out of a soft bypass node