@Christoph-Hart yeah, here's what I could come up with!

• The model occasionally thought you could add child panels directly to viewports.
• It didn't properly cast/convert the raw result of vpt.get("scrollBarThickness") for calculations.
• It hallucinated a scroll event listener/callback for viewports. I needed to prompt it specifically to use a 30Hz timer loop for position updates instead.
• It had the most trouble with local, reg, and const. Especially in long generations with multi level functions, it tried standard JS var/let scoping, leading to long runs of compilation errors.
• I mainly used Google's Gemini 3.1 Pro via Antigravity, but I also tested Claude Opus/Sonnet 4.6. The Anthropic models had a couple fewer issues, making sense if the MCP server is currently tailored to their behavior.

I had checked out the viewport's multicolumn mode. I built this as a ScriptPanel recycler to have high LAF control over individual buttons and icons for a custom preset browser. I wouldn't be able to get the same component styling flexibility with multicolumn mode.

I'll try out the LSP server! I've been following HISE's ai journey and can't wait to see what's next! Being a dev who uses AI to assist in most my work nowadays, it'll make HISE development much much faster and accessible lol. Love the forum, but I dream for the days where I'll ask Claude to explain why my function call is wrong and @David-Healey can enjoy his vacation instead!

The MCP server in antigravity is amazing, but there's a couple things HISE struggles with against AI.

• Absolute positioning is a bottleneck. Is there anyway to expose JUCE's FlexBox/Grid to hisescript? It would be life changing. If the model can just write relative values, it wouldn't have to guess pixel coordinates anymore.
• Can't wait for scriptnode to work with MCP. Having models build scriptnode networks from text/json, or piggybacking faust, will make that rodeo a lot simpler.

I can envision HISE's future as a sidecar rendering engine alongside your everyday IDE, which wil be where the actual code writing/editing and prompting happens. Having HISE run in a headless like manner to compile the plugin, fix errors, and run tests would have massive potential. The LSP and MCP server are great starts for this.

Hey!

It's been a bit since I've HISE'd but I wanted to get back into it and decided to try tackling infinitely scrollable viewports. If you've ever tried creating many ScriptPanels inside a viewport, you know it quickly gets annoying and inefficient. Here's a Virtualized List solution that uses Row Recycling. It has a constant memory footprint as only the number of rows visible in the viewport + 2x the overscan amount of panels are used. It uses a 30hz timer that only processes panels if the scroll position changes. I'm definitely planning on using this within my custom preset browsers!

HiseSnippet 2752.3ocwa17aabbFFeorYpshcfSQOzCEAiYQBVIqPubIEIkUbskknhHhkDgHscBLLLFt6Pxsd4NK1conYKLP+SHG6w1a8XOl9EPO1i8RA5wbrGygbnnWZemY+lbUiGgMjDvFbmOeley6LyyHvsiCUi35RcjJrduY1DoB2nX2YVdi1eD1vRp8AREd2h8HtdniZ2skzilYiccI5REJbkOkUfBW+pR7OeyCdD1DaoQhSRR5oTCMxiMFa3EmZmG9YFllGh0I8LFmnz0dXaMp09TS5DPLWonhjMV6U3gjSvrhsVQoivtijJrYQrV0JJJ0pqWsOF2WWcmZCHUqWuVkpC1QoFdGbckcpqTqhTg2oktgG0oqG1i3JU3pOhpOq6H5TK+N3oFtF8MIrGpH0E5Y+jOjZpyFhrTk1ejgodmPJ4JAsRmXlcEel8iJdrgtQT5wr6V7LPw0HI.KrVZ4ckTxqRR4ojPdYHoBIjzU8kz6WrqligsWbN9ykss7HNCvv7TRo3WVo0zduh6SgRX4UdL9UjCcfGhpgbcEksPv+swtquNLWAAEm7jieY6dsNtK59nsUTT1MH8yN8Yu7nVs+zi5AYTKJ4m1t0y5b5Y8RlGj4528tnSeZqy5t+dmfLbQdiHnRsszm354LCA3wRG6nWBY6f07fHJz.pC5bCGuIXSieA1yfZUl0FOifbHV5DGnEflYL1ZFh7ZOGLxgN0Eg6SOmf16jCP8Ilzo7t4beFib0bHD+VoGqt1NjyAJ3hbIDCqgHVSUpuIDQVBMwZ.DASzQt1TnDSGQrX0mZZxJo6DaP.CvtdkCF0QCs6ipnrKJA55r2IsdLicGi8FUViXXJOOhtaBVtA5NH4nVaSj5FPqEzbGCgbO0fL0l53AMX3rHVWOLU4RIKSosfIL1+fIyjoW1k.kbpgt2HdQxN+QDigiXswbxcC+Iyd.YAY4A0CXgM1hXhLrbMzIAP2usBj99QkLkt6vplbonbgdCDLSOQI4KFaLLq6sOcrM0B9BTtzizEqQ3vqVSn4PffMIXHzvgRGyis7mM6icluhQi63.+MSNAEsvfOlcgAzyewtqyZR4ywNHCHAHBv.8IIl9gmuyc1X8e45H3CqT1YxgynS4eqDDDXvQgw78MqAruPlDCxzEMELRlQzfMiNQG6gKCqpfUojWC58iq3mSzfvL8f3w39ACB92BFDUXQfAso4EIb6xCYYXnWZizEMT3UUTRmQjvqpjVvlr9FDlYBwxGrc.v3cFchGvG4ASrzX6oHObCj+rB6yvxrU86YZJy1bYN.7gHUz8g4VzCPJu9vCqx+ftG+gZ7OABwukfdz+fNYVA7+jp.5N3omQz7jetBepl2k.FdFaHKuQbBGwGpxa7B.lkCGsuIbTyCBKaOwcjrMj1aBiN0mLd7rCfQv7An59An5AAn7Hb3QH9LfDQ0zuUKEskSGGBLpPsrXaY+SYyux5v+UYC+90vB1bD13N.snI1..I9g1bYx43VnPhtAZtED9ikmGW1WjXNDVAe7oc6gZeLaun8NoGpSqyNDs+Qs1+ytWXIN0xbFruN+3P91POoMxX.+aA6PAGQnwNSAJGbxnwPKXOdOJBi1zhLcSl1JG0XP0blZ3R1BoSQVTX9vZ3s44Bso77KPt88SNxXkJNvZwESgec2DkgGXOqTLgxZweDPB0QTg+YrfyO5ihqchI3jQ4I5rfiFgtzyYBIQODffmvlBYm3ow7i.62Grj08dy0ZwK87aXO3LYnUiBkddnndQhN4MHX5l7corAXnP9ageD6zkfsc8Fg8BsB.KpQzAn9zIV5twM+h7xtrCwlsOfb3xnrBboVc4GNHmbGa+yK5PcOg5LlebdhCLG5KYxTHeCVa7Ega.GUeOpG1zuc8WPCsg7EbDC5im+P2ciB6Vrc9D3.yLadk4jf+P3KfbROX1bwZmdgW2I88X9xPf4JGWML3EhhlBSET6IlvZ7v4jM41u1LsAfX.XeVb7O2Mz.SJ0QNTV2cNDD5BJgVdqNkM8ROVogfudzCf8agZkTFvATYrnBFvrylLgBLlpOwjhFAtSMItHKxPX4.2EA30D7.N.1+1bVp9hih8B2ZAliki68OLgXYF8R9Tx7hE0B6gF1xaEOnRFJCZ+LvUqCeQKruF69WN2C468mD4SjerMP88wLKPZuBcvos5hN4zdnAFNDXAPPDxsWmeNOXzsaXDC2HP4H699oy6FHmVVCgURkAi1fp4IdZ+eN6LNlqoKZYFub4wZM1xizUE1SNk3mO3X9QVpZGOKDugPBTmP7rsr3eIjmxoFarAepR6gc7KuL28BaV6PpCboGCKXDgMQCbfKDyl+LwyXatoQcb7C0RJk0SfxSndjSs3T75f5Pym0fAYlWPbfYvDv7YGO0bAUT1Zx39DmsfoMS3.jvBBWQM88dKdw26M40x07cSlnfTq1.SN0lXcQWVWJvBJ6NxApBJpG+Fx+vhyG4KY.WF98JlLhRhq8j+MMjdRa1gVgsHz3PGZyVUwFKENfbNbCU+6fe8hGPbeEroBurAGOJU3GHR++ZfOETgtcV3W31dgF+c91B9Bx2tKKkuLHkTq.Xh+er1Z+m6z829frzwMC+KEv1BgKg2sXzcE76eov9m8k4bnufhiz2Wuf9d3MuBOkBevamLBuyiRJYDLWf9yObAojT4+ezgbvTYJbbsz5feOkXcveLPGqGhihYgijxNRCasfF9f.MvbCIU3mT7BbRWoIKtVHZUIKZczxmVUDiVUxEZoJJsTyhV1KeZoJFsTyEZUUTZUMKZ8qW9zppXzpZtPqZhRqZYQq+5xmV0DiV0xEZssnzZ6rn0+Z4SqsEiVamKzptnzpdVz5V+kkNspKFspmKzpgnzpQVzp4xmVMDiVMxEZ0TTZ0LKZ86+pkNsZJFsZlGzZ6cDkV6jEs9mKeZsiXzZm7fV0Ud6n0Mhs4koYdo+vRBW2H1d5aka9TBOO.VEgAVl94kWA.qhf.KWbzWWUXfkok9Nq.foJHvxES80qJLvxzU+qWA.qpf.KW70Wulv.KSi8+lU.vpIHvxEq802VXfko29+1J.XaKHvxE280qKLvxzd+2rB.VcAAVtXvudCgAVlN7+w+wkOvZHHvxEO90aJLvxzj+CWA.qof.KWr4WeGgAVl97GsB.1NBBrbwoeCgc5qloS+ub4CLUAc5qlKN8aHrSe0Lc5+Uq.fInSe0bwoeCgc5qloS+udE.LAc5qlKN8aHrSe0Lc5es+zxGXB5zWMWb52PXm9pY5zWYE.LAc5qlKN8aHrSe0Lc5+4q.fInSe0bwoeCgc5qloS+e0J.XB5zWMWb52PXm9pY5z+2sB.lfN8UyEm9MD1ouZlN8+6q.fInSe0bwoeCgc5qloS++8J.XB5zWMWb52Db5u3KTzsJdL6G7H1K862D6s.KHCCpUpWpH1KNjkqg2rjukX41K8zaqDe+hcL7zFksFWKCMBSSeenwfWUraVr0.1uLzXAd0hG94e+7dgI4+FML7XrmiAKP5jIi6Rm3nQfd2h8qxkESsF6mIm+yJgQ8cIV57G9uvmfLqvdtPPlUByTZLVyg9RM+ebcrWFsqwSAzjE+E265EOl8Lpxh+T5Fana7RMszM0BUT8xVwpW1JV6xVwsurUr9kshMtrUr42cEYu5h6MwiN1eYijzwcZw+oOVnPKKLDAxiVk9e.xmeLdB

Enjoy!

P.S. I decided to test out the HISE MCP integration with Google's Antigravity for this snippet to see HISE's new AI-assisted development features. It works great! Although I had to tweak prompts and correct a couple javascript hallucination bugs, it was crazy to see Gemini integrate with HISEscript. Can't wait to see where AI integration goes in the future, it's definitely worth it!

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!