@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

@Christoph-Hart Any luck so far?

@Christoph-Hart Ahh I see! Adding that would definitely be useful, I'd be probably adding some borders, box shadows, gradients for each key. I was planning on making the active state consist of a white dropshadow on the key, and having a subtle animation between them would be nice if not too messy, but having the rest would be great!

Hey!

How can I use CSS for the keyboard floating tile? I couldn't figure it out as there are drawBlackNote and drawWhiteNote register functions and I don't what to select. Tried selecting divs using the setInlineStyleSheet but no luck. Any ideas?

Thanks!

@d-healey hmm how else should I go about it? I can only think of resorting to a ton of panels haha :face_with_tongue:

Hey!

How do I change the hitbox of the floating tile keyboard for each key? So basically, I'm doing custom LAF on the keys and one of the things I'm adding to the keys is a box shadow, so I'll need to extend the floating tile into some blank space so the shadow doesn't get cut off and this allows the user to click the blank space and activate the near key. Is there a way or an alternative that can help me?

Thanks!

@ustk This is sweeet!! Thanks a lot!

@d-healey Yeah saw that post, was hoping there'd be a simpler way by now.. @Christoph-Hart ?

Hey!

I was wondering how I could put an image inside a rounded panel and the image be in the confines of that rounding? I know that fillRoundedRectangle() only draws another rounded rectangle within the parent panel and doesnt round the parent panel, but even if I'm increasing the border radius on the parent panel via the property editor, it still wont work and even with a child panel..

HiseSnippet 890.3ocsV0taSCCE0taAVKeHPhGfn8qfT0TaYrgDBArtUTErQ0Jf3eH2X2DqkXGY6rsBh2Jj30h2.353zlT1XLpD8GS49kumq8wGuQJYHSqkJDt46lkwP3a6MdlvD2OlvEng6iv206Ph1vT9NW6MKin0LJBiW6UVG3lqiJ98imuGIgHBYUtPnOH4gr2vS4lJuidwq4IICHT163o0xd6WLLTJ5KSj4.dVyqCJiDdBIhcDwlVCOD9FGP4FoZrgXXZHm8jzYiikmIb4+AtlOIgYM5hFCKjyMpeLOgNZ9rpQH75ipl70bS9C7NjS4K7WsCbuh.9UUTeO.23pfT2+AHgqAo0cP59diCU7LSUDKdtk2PAbfLk.a00ghKWTica30WBYHLakRNgMPAFKpHXmNcZ6C+4gOsUKX6Va7Okn7y7el+7hhXl9xzLo.LB1bDQvR5tIjdsr68GSuDvKJpUVusRjD5vT3fLXSdZzVYhH+HIS6GyTrMa6ac5RcKMCJkKLGKyMbAKXZtHzvkhfnG15KsZZ6MAZsIlqs88MxPRxdxbAUGXGnlQ1UvwfB5b9fAur2S1Y2scQlBjtis4xnGyBMDQTBKfz1uWQks9ZIXuFPXxU.AamnJxYUyKLgSZ6Ca51vPWluf9RwQRC6shfhEt0Wa4+6glN8RiY24UxjDl5RCauUotpBCD4oSXp1vYYRNaQh.saYt7Mtdb4PGQnVhRwPA271LVo8.YB0xQseeQlOpjIAe89g6SLD6kgRePdYLkgagCde1ofZh6pQSu8Y5SLxrhbKoeH7Flhn2wqFODwgVugmiShNGg8veG50L6G.dPmwolXqw2.iXFOJ1XsZiQnIREkoNlP4455BUN+i4edIwtkPxM+SH4t08TfmpUXVciE3htDtrVYDEzj5y87wCcQUDP+RRySHlkE0rp2kA.1wRJIV0BglalUWc+ePoqyUpzccg388FwMgwWNFabIXDNA9efwx2Gti2ASmBBGU.bcuAebUeL3uzdm5SzgDihaYrGkmNFD0BYP2EvAs1xDZXu63r6Xss6.iYBZgwOgekA6ZswkA6NOHJkDpjeJzoIXeAZiBO.lDEO31Dd4Gr86hJzIpuOmBOH9ovvkWpKTXuUsvGspEt8pV3iW0B2YUKb2Usvm72Kz9+q7xbiL0csAgNbzAEBqX7ABBv.KXqneAD7GBSA

Thanks!

@d-healey I see! Thanks for your help!

@d-healey Ahh yup, will put it in objects!

And yeah each component would have different paint routines/callbacks, I was intending on using it more for a general animation use case and being able to apply it to any panel

@d-healey Yup, on windows, not able to type in the label, on Aug 13 commit

@d-healey

HiseSnippet 5025.3ocsZ1ujihjb.u6819BOs843tH7+61ye0i0bLBITizNdsWfBjPHjnz2nKt3BDfPfP.BPewcaD9QyOA9YwuA1YpVS2p6Yta2chvytwL+prxpprpJqrpRTFow1tYYwoWc8aFdLw8pq+GtYvwn7kRKs7itRkb00+i2nakk6ld2ihDOlXkk45b00W+qZhBt9Me6Um9y+y+gnUnUjs6yht5pww91tc7W6m+rTiePyOLTwxwcn+5Kzl6GTsiijhCi2B1yu5lxWkXYuxxysqEp12byUW+qkc7yiSGjak6lA5HF6bbvx38QOp+X+L+4gtXB1qF.UzihuRZoeniwm5qYWc00eqwy87e0i87+oaz8c7eR9yi.+1SYb2yk3xwfq+l+VlD6u.S55KLou8QS52cy.6T+j7myAsm+9aTifIjEVvP8klxi5d027e+OeiTLnQTNyZqUtJoPhmJw8OTt76uC9q28wau0OJzOx8tEairy8iityJII7Xq3ctoBQ9qsPY2aGuNINBpr2e2bqLWb5IsqaFjbIp3EosBSVZMHw004wzIv.XtRziIrC8sW8Xh2c6e9N7O29lTWu6h.I288Ph+7su4MO0Be2qZLHumatu60MMj6yM928ZCAx8ro7cuvl.4mspu6Ry6127ivPyadpey3Xkaw7j4.15KLsO9Yp9rwA59RK8yU9YaET9kF9GuEGk9R5CpVlo7WL+SsGj+BqvLWne7RUxbyMvQf9waygY96+zL+8du6jl+4S+M9GOT2GWKd+i+SFyZ+C2muzO6UiHu+tmE9b28RomL528tO9Tsewzv8dOp44b+wy+6ma3XvhTIqvv4PTgms7Wa39Kt69WYOu6oLeVsOW0GGY+2tiko76dsseWou+0hNMM8bO5GehbgA9eAM3+NNU94M3u+mWC9TxWW9u+Ncq7kLoVQdtutMeO1ju+TG8iurBRcOMyb+kSB+0L7u+6wZ3t+xe4tuPNO2mxxiSNM0c+O4Lrd7Vvk5ylgc2A4+kllOkAyokttNu6TjDlyKju+BWpOqm7X4dbkx+x2e2OSukWoFLBeQ87wOW0rbqzGcZumsb4x28AHp66d87GNX7i2d6G9vnLXiND5D6EeKrOHDUbmU5c91wnDn09TLcObc44Qs6e647eKTOeon2mZjy579SIJePQQnJ9eOmlvSZnT6bZlJmomCN79mmmd2qiQnDilQuCG8bid66uq1k8QOFmTq8Bg9dQtNCcO.J1Bz4O.Nev+yUgguF3FxyT6O996dqMT6otNu8StIuxH9hVfbjGDFiINwMZh67L+b26e6x77jru6CeXQb510LvLgKi0VG+3mp3aws99vGF3lCw.8xtCO0w4Q7DXMySxedH2N0E1c2.xDchedx4R0IfmATj2xUoJGSdYkIFcDoCJF2URUwtQIgGYO0o1FARcTKLR40aRTKL6pSrlYQZR1WY2b8forikZRzym3nGXFrUfdfUZpTlReKihoajYgyBfLw7DKmzdlQPTQWfosjMMF1mcJv5oBSMHPPdf812XhQv5tAujWR0slXPpNMg0X51LYhp6tD8hYUMEnsqsblz9v5zNBzkUMLeIOlnnIPqzuMvr7UUEnyRHn7iIsDnJLLn9EVMEnQC4mJsWQuiBvQb.GpxSDnK3q.LK6FIApuwI1yRTfxFf73IZBBzobUwxF7PIFJm9CnNCSavPEW1.0g0tNCcPYQnsTFYvyPanz5jcJ8.Cs63tnbdXp.zeDJe91pLTiXajSVWggFkDh7dOVFZRvNz9qaWlgdbzCXYmNufgNjWAFGF2w9HCc73A3XRvhCLzZdKP4Ig6AddNJOb6NFphbcjW9vVFZ6ocrP4sANZvbfU.UYn7Eon7fCYLzEb0AlsUFvR8Xl+RNTZhGnS+MKdEGsaACsjRAxGzAtU65HGl6xPclo3AsU6A.Gv1C3wdO3vPqL2DkuaMvrZ9nbtI.WWHCkyzA3n5r.GJS.1nNyRf0X.tWo1H2G4RBiPdFpSUIWfYWhkcjTLvJISAdaiCnN4Q.unfG3wY7.K4q3Cx8GB1V4VF9nuwNfGFXBL6pdX+53RTmnC.OkcCJumIz2ERJ.d7HokLTO85HeXGvKbkC.8c87g4QXQCpyn.FZp5HfUz5rhgZ5NG0opbHCckiOvrCDWCiaJIn7Rs.d1gWyr6mBy0qHkWIoF1IA7AlYUekT1l15FCaa5yYPJnRDSqNy5RrtjKcvPhjwrcNvMPV9H0EXITG6oEdOo+rWwAScW2WhruYa+tELaf1T7fXrj95vNFA5G5WyHkq2AUifYCV8J1l3CbLeHviBFBbwlHf2uWAkuHAX4sbsLHryRAl5jAbyY4HKrDYmc.KLaBvKCO.rZhdKi.giE.qej.bOoJ.Gyx2D58i4.Nqb4lFASyd.3U62BbfRCrraR.tjGyCP86GBrQIQfWMyuowvF1xHS8ZZTrsdSfyZs.pSMm1.KvfbkFcPcp.bfoaOrd1tDaqRTf2GtBpGKmgnN1wP8zjeLv5CxgxJO0D0Qo.3Z6s.1rRMf6p5.LmuXKigw1KP80zf90w7k.WdyPfGwGf5raTKHlq1pWw58szLBZ0nG+q3cqzLHzl8QlrWynPryPfG0oNpSmw7n8zFmGaNEkueBvM3MAlCbvLHsxr.VsaYP9zI1.G+.Q2f39fCv06MR2HPybAvlsBA4814g0yxJfbKFerdlo10fDnFviiUV.aqsB3UyyAlWND3LWgdFEUpdhKOD3lAqA11JpmwvUMiP6TmumQPaejWoZX.iOrHGqEXXTLWLF0wnJHmnfb7nNTCRh.xzIK.taYTeZ+BpQvgEH6I0puA3qib40V8g9xBrck4yAtcAZO50EFXD3vf7HWBv7UQ627Bd+BmwFC2FAiUKyTqL1fH5Ni2vjkUlXVKUo2vbdWXOoQU1Cqaa1JPftyn6AoxSaMCFiSg1egWgBwaKUqWvTKXmChfcEsdEIk2A6wUz4nT8T5bve0gEmONTYtAYZmA0g1qEt+cIyM0M1vUpIwbRe2dCGh60ytpnBD+ncifyrZndu8mYNmGxg4Zrbl0Y0HBJGG1iXk5vzgnFrVGrCCegNDtVEc5QnwBRTkF0OHk4Ir2.NbVFzW45pc3r8aaVzgHHw0pWvNJU5S80pKFHQ20bydIN64kMJDvwksTacRYsZJP6wWcPWhZOG0Ww4QS6RDFuA4w11cIlKYQlLdYWh8gRHqzecWxdRy1.GYjBkcZGjqYruKIdSu1mzgsKgqgAxyF7.HmdhEGxziv4qib6Ax8HprsPV.ykpJh7A0dfbGtS1SoAfb1bjY1OsGYzfkHWctMvUFfbj3xdjUARH63E1iDauuEvaqlzi3sxF4zlag5oTySr9wdDy7cMAVpcEPe1IH2luVOhv7533ioeCP9ROj6TRvfHzifbotxFDtUq.K2peeH5nbpLxAsfU7vd4Dr+tGVQRsDQtRCfUWVR5UbM6RFDc19bceIGVQfRnAaqh6WHRnjrIZHmWRFjONrBvKxZRI0WwfLb.RJYemYvnsUKq1TRYiikA1elFkXVUCY01c.cTCJ.9PLvTM9i.OiCYogH2nJxU2b.XmHfi2Igb8l.ycvZO1tSf5jJWrC3tSf1ROuCxCZB1fPwpsXeYMXabyKkC7PNvlqmah79GjfxtqHC6ivYYgwJCjUGA8c0oYfWjUQJOvs0PloBrmppXxFfaWvZPVI2F4hfivIdM2j.7b0cFjXwtHGtLElWjODCb0cQf70SPt8XjYG9ZVbxCfeX1l.Xe1oTVXtteafO5yCqgrNDIQm1ojQvftMw8DufMma.VbnXcNHdnEvED1CbeRmI4QujWxw2Bze4D3LBxcg1QsZwjtAxEMjncpTrBhSTQpMgZhmyPUIY4.B8fUpuDrumLMvr4hpFm7ODZmIh8SYH5sJOyN8WxJNf+G2D9bjiA+RgRbY.SVKi5vA6CYYOUD5+l7a.tnN3eq6If7FbrvbNrCOwZcHrdPd3vXf6tAVmT1XYDvsCg0OqlcbMvhS2.icUahbfvZXr6faHd2EeXcnY2GVALrqNTV5LjYFXBq8DqGf04RHZmWfOx4ov5badcj6eDV4Gqy6CbJKrhp9rbj2UAhW3EFfbuJPbDt8NHWuL3wq1XNx4Ef2oolKxiJ.uGSyUHupLDmRd8VjobP7KtC0QtCiSWhWsdX61RyDz4gUHyNaHD6aeIjGb.hIJuTZ0qXEMHFZbjVBb+r9jI5DyS2UhCi2teT7LI57gEFCe7NVm3y22h1lBdt8FXBL2dL98xt8.V0g.w0aIpfxwX7mua2IN3Duzd3rcFAMEDXMFf6MHrZJb71MMYjn75cl.9PaxpKRErCG7Rl0wA3s48AVYhFvc5VpOxE7hT2Fa5i2QwD3bQSTdiZOHRqYqfxymBrz.3.ov8CNTCpyUKo38vTANYLEY14bPYSXNwoUEoU82Y.s6FtJfbhmAddbIj60Gka1lUj1qIw.qmtkEoKyX6A0ObjMQ5NRBvJc6cTjx20A3PwNGDoMzGf7VEXOzPHJOTOtk1JRs2WpKnuKatHUzrBxbax.a6gs.Gx4lJR8mEibZ+MfMv5eReRhHUANENdWvxQhzoIVHeX0ZQppjIxYiBEokslf5OSdkHcCdmcnuvGb9t7Wx5is1atTkTlqJAi0cA2edpJYTsZH2wlUkD+.iLvbyXZSx3ai7wAsaSp+vTjGpLrMQuRh7o3X1sIdaXT.lmttMwbzLjYh10lreWEjWtmqMrVbZSfUxD0HdQ0QlZpoQ1yspEvQECzHpgTUfYqaAxCYZC75i9Zj5GOfb5vMfb4HMfq3d.3AK5f6KLfSiTdnkNtWv1RP8WZZWrOdPF7Caa1CiCao0gHmXYf2eI1.jOZAE3xyFAmioTX+Sk0rCYj6VXkj0t01cH6WyMDimI30gXpKOF6i79P8P5OA3Qlgcf1xENMh0zwQcHzi4lXYOFCkseC7tUc2m.mYh1EuaUR2MfbOGardz.NqRtCtmXLpiRI7NW8CgxRY5g2yJPBqSSmkX8H.skIIyGsGWvFTKWK.XY2Ef831LD26fAr4xkwS9XYJA8Eur4Q3dnwCA8qEf6oT6POnNMNs2Txh1cHwAaw8rVdj.xS2i6qYk1PiDOeOt22vNU0H1axw8G6MbObVvdw3dnCkSf4k5Kv8V2rXoFwb6Hb+2kqmoQxl0D2WVypuFQtZYj43Ug4WFObebotBZDtMsv85EMp1lHTNE49jssIwizwyCzOcE3+zJA4EpyA4pR34GVX2G1IZ3TjOF2pMYzpXjKssgJQnFKxQ6KTIpFmN6w3cIfucnbkO4ySKo72hMlLUkruA4TYG2Uk3UuAVmwSIpDS9Bj24VqEQsdHx8x10hvILB4MhqaA6OTBs4PO6Vj89qNcNGsgsHlsZgLinVKX9cM1emqHB5aHdpuOiCNedISb74gF6ZRDFjiiaYki.48Kgis7kVzjnJqibEGyljQGmfi+oC5C5rxEmWV4pAbP.NeEJI2jDyEhyiGXJoPT2FhyuMmxoPj6Efy6Nsg6VnF3h9C4S2pPnbSiOU1MJj8lFn+yQs0fbpB5WUeuuBb94ZqPcXWnP3JxP+P8YNJDaNWz+TydNniLE8aOVZlBQGVAg9Lh.ue8dzOmKvDZ2Idn+e3ZjEn35Bq1fNwGXv0K80sf68TcGtNhYGTmdtd35qQGf1xrnOttq9.OExJIYb8nyv.nrlUGg97GAalSLCW+psC5K5Z935Zs16f5owLb89FlxP8DMDiC7P+Zv8pFZfwGjXXfwvNcw3FZMUZRjm2EimzecmlDccJFmYh6.XrMdLF+YP9rljrZNXbI99Kg4E0DLdkbmDXdzoJFSa9zCMIqXZibNaMfq5fw8VsRB7e5TAiGF52A7YjFf73si.eL+CX7yIMcaQD1MBY0jHv+YKu7oyJdnEbmh0HWQkG3AiQdijBrVnTKjEEMTIbQkvX6ijlA918OEm+vWbufhoqDd6Gu8xeoXlvXKGkz303OY78u92PF+woewO++W32i9y9D.eRmepOCvmz6u1mBfm7hz+zeJf23wrvOL7zOM9k8j2e2e34OsCXtS7cve77OT42eOaclprU9WYYp8gJu68uPqVt9dKyOqVClZeRo6dtL.eNi+3ujOT.LxkEG5xjjhedq2J832L5xOIvSeD73ntw4t8vurHz+t8Gu8tWm0hEew7vYmz3vP7Sc8Ex97GA6udAuOZ654touGl3C259jhWc829xmXvu9m2SLv9QmkKTLNRMxOuWh64zJwgN3SG.4O+AIb0YuMfFohdl3aT3rLPuD2zbezbtl3ty218wWrvatg3lsJON4pq+lmbQASN+Tt+lO8dFrhbCux2A0+7Gm5pCO8PP9OG+CGeNA8G1i9NWc8MWq.oWdxE4Sot5mSa7at4BO+KZm+qve9sym+1L9s2nG6rMzJ+kOUD7MwbNCXx8EuOC7MXDk4me7x2Lyuf2OR4+luejetl3u6FC+b6keYa7a9B1HLs++G134Wcyu4F4EKbsye1.+1aTl909Da9IZ9Ge1Cd5vcP8A+fa5tc8f3so1tPqGAtKY3782ftUOltLlFGAF3F4bJw+K7myYxhou9blreJyqVaYmF+mrebIM9td96NIAronSOio2biNl9N1qNsL+xw409N9+Ia6WVUeVAq70VvpesEj6qsf09ZK3CesEj+qsf0+oKH9JvD1lG+3dpfB5FxmhKd80xQVfG3Iu0q9+vNfQxI

Its kind of messy, but should show the usage of what I'm trying to do

Edit: updated snippet

Hey!

I think I've been trying to fix this issue for hours and it just wont play nice! I have this:

namespace HoverAnimation
{    
    inline function applyHoverAnimation(component, baseColorNest, hoverColorNest, alphaSpeedNest, paintFnNest, clickFnNest)
    {     
    	reg nest = 
    	{
    		baseColor: baseColorNest,
    		hoverColor: hoverColorNest,
    		alphaSpeed: alphaSpeedNest,
    		paintFn: paintFnNest,
    		clickFn: clickFnNest
    	};
    
    	component.data.baseColor = baseColorNest;
    	component.data.hoverColor = hoverColorNest;
    	component.data.alphaSpeed = alphaSpeedNest;
        component.data.alpha = 0.0;
        component.data.hover = false;

        component.setPaintRoutine(function(g)
        {
            g.setColour(Colours.mix(this.data.baseColor, this.data.hoverColor, this.data.alpha));
            nest.paintFn(g, this);
        });
        
        component.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();
        });
        
        component.setMouseCallback(function(event)
        {
            if (event.clicked) nest.clickFn(this);
            
            if (event.hover != this.data.hover)
            {
                this.data.hover = event.hover;
                this.startTimer(1000 / 60);
            }
        });
    }
}

I'm basically trying to make the hover animation stuff modular but as you can probably see, its a mess from some debugging. I saw this:
https://forum.hise.audio/topic/5370/possible-breaking-change-local-variables-references-inside-nested-function-definitions

which made this somewhat harder and now I'm in a mess trying to solve this, I can't store functions in component.data and reg nest wont work as all the icons that use this fcn will be overridden by the latest call of the fcn. Local variables wont work due to scope issues, i'm completely lost and I believe there is an easier way to do all this and another pair of eyes would help!

Thanks!

@aaronventure Thanks a lot! Didn't think of the mix fcn being used for that! Here's some code for anyone else stumbling on this, allowing you to smoothly transition between two colors on a panel component based on mouse hover:

const var icon = Content.getComponent("icon");
icon.data.alpha = 0.0;
icon.data.hover = false;

icon.setPaintRoutine(function(g)
{
	g.setColour(Colours.mix(DEFAULT COLOR, HOVER COLOR, this.data.alpha));
	g.setFont("Oxygen", 50);
	g.drawAlignedText("TEXT GOES HERE", [0, 0, 100, 100], "centred");
});

icon.setTimerCallback(function()
{
    if (this.data.hover)
    {
        if (this.data.alpha < 1.0) this.data.alpha += 0.25;
    }
    else
    {
        if (this.data.alpha > 0.0) this.data.alpha -= 0.25;
    }

    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();
});

icon.setMouseCallback(function(event)
{
	if (event.clicked) Engine.openWebsite("https://forum.hise.audio");
	
    if (event.hover != this.data.hover)
    {
        this.data.hover = event.hover;
        this.startTimer(15);
    }
});

Is there anything that should be changed? Is timer callback at 15 ms ok? It was a good swift transition with that amount.

Hey!

Got a question, so I've got an icon that changes color on hover, is it possible to smoothy animate the color transition in hise?

Thanks!

@d-healey For anyone else with general hise svgs looking wonky, after fiddling around basically to get the svg to properly display, all the render data has to be specified in the path data for hise to correctly render it. Since the svg im using above stores many of its render properties in attributes when taking the path data, those attribute data will be lost.

To fix this, I saved the svg data in a .svg file and opened it within inkscape. Clicked the path on the canvas and went to Path -> Stroke to Path which basically took all those attributes/what we see and generated a new path that outlines the stroke, then save as optimized svg and take the path out of that svg file and use that within hise to get:

also had to change area to match size of svg path dimensions in inkscape. And used fillPath instead of drawPath in hise

HiseSnippet 3608.3ocsYu1ihikdG.mZltVscmrQ6Jk88klWUiXjE2unUqRar4NFrAiASTzFiswXvXSgMWi1uq4iP9Fj7+uouT8L8NIpU1Qyr6Od34b7wmyy4.3R8PjsabbzgLO7V8q6cy7v+3iStFlrVZskeXltxYd3e5QEq3D2COcOTiq6shiccx7vCeeaF3g29lLo+y+0+RCq.qPa2OGJSFiHea2A967S9bT0222OHnkkiqt+tWkco220NJTJJH5HFOe+i4xr2xdqkm6PKl128XlG9MMc7ShNLIwJwMNyCuoQjy0IqiNGdOeC+X+kAt7E4yLAcz8vshBb3HlQyHs1OvQ8i22wYPun94Ygu+9rv+7iJ9N9eJ9mmM98ouwSetEud93gu6KGde+WL7x+5gWtWM79JCoGd0P5M2GR+gGmXeveexmeGNd9GdraHVbVYgo8WOTtmalu6c+wGkhPFgIB6r1515.dwmZwyUxk6mdB+O+3e5cuCS8wIOs+o+7SerA1Gbw8gpUx5mQB2e+SVGdZOhHakXgT+ghUpTSHIWfiRnfVwKSVHc9Kr4gcBZ4aqCaX0GVs.cqn8ABZUELX7N8furYFiWOZqfl6ZS11Q8fOUxhwa7xFAsA6cnWL.d9UO37KS7EztpukdnFbYkHlStaqEzjbho0Mg2HegWqS08DzRDJv9WYKsVU5SCfOlWzBdYtUXLmzFN+TW3NkTXb2dvA55vF0x6JnMRvBt0kMvUK6w7EzgijhX7Cxv8MOw1lOuCFykKv1tdObifrL9YW3pKZuDdqA7sYifaILBdg0LXiFco23x3wxvaNuiwEa.uR7DimU.t73hz6DY7MB1nOKJw9+VG37WaCWpgF8LENFTLYN95vsF6AaXXCeRMhwS1Q29Liu+JGa4Jx11VD2WIlBN3Z0TEV8Ra37tqnqOjwmdAdc0ozqah4srurDNPZA7l99L+7GgGrHh4TrEl+KYbD1PxMcMJWZ+TD9jQYFOZLVG6MOK6mJwvsjkcga2Cq6EL6.muyN3j4CnKKi5DYAU549v5ilv7saf5pJMMfMjWC63OmtSCTGtd2Blu+Z3qZKY7wRntUXsMbqgafqLyg4n0D04KuReulue9etac5Ze4ulyoOPVSvK0WyAu3bZ+u0PQVa0NdcCZV.1QxhdzrgxZaaZxbpmGtSBG+A8MFg7qMIsetA24lZ50Zrpr15wJLmZGgUM6xwrw.MYspcZx6qB6fUWKv3KZLFw2Vgy40rfunmmyyl2fCOdhqWG5OQVadg8LmqdvUOrg4DlGdllCWi50SG4ucFyWeI7k8pLmwQvcF1+WyUKBunhDaa61Sk0NsrJq8tLA135M3VkcfWJDSaGBq0bK8hSvsjrY9GyCOnhN8xJvESFvbVUG1wUNsexBqNrJ22smNn5U37mpAe4kWXbkxv8r8oEyA2XrE2eoj.iICF+7V1m86y8imrfCGKwb5qBastB2iKIwwV0qzV2v8XwUG34CFafqpskmIjaL7RUGFuZVLe5YOiN9EX0xpLmAFvurqW5YTYw5xs.YZucbMpXcdNl6PXAmRomSdCqu4mciwmZBWO3HiaTC0CsF7BiuZEb8163YikZ.Oxxm4rcCpkbZsh4D1DdXOaFua.p8pErf42uErr8blyssnVs7AdddqdMguXLkVaCpsKtfm4GLTB1nD+bg66ERt7yrhgU4bqZHWp5s4Ck+Bu8rSCrCHG8KwKaH60n.s29EMjM0KQuLbNhunJ8ocFLtfI7kP8Fx1hMoK7xXzmq5QO4rZC4ymUomWZH5+qynsjUZHKtwkNYbeXoPZ+McQ9COSOnba3lUnKMoUC4nflKfqdVFWqipzazkPbmkzBUEaH28RHscnPC4lg4n6sHqnrY8FVvi0pKJKdUkVZXMQ4sRtzaUqJJWJNlV1rhnbzwpz61UFss0fkb7Wsjnb7QK5kyfEidgtbwhnsGqPmeEbj3.a3oinsVRaJCaV4.cSAXEmZzBoVPv4Ww5RvZ9pziTXeJ4QexF9ryY5q23X3rnKrwXL11VViVOOb27dzAqv8h35yzs0v834JBqfiay6cAUZMYLmHdzgNpUcdsho2ODygQUKS2cIlaOOqiGWWRvbdtwSoiag0hyu3QO2GqQaWESGIi0NyiEoGuGqolFRqgani05ZSTniDQMfYfActKCZHOcfKs9NVyHui9hCpkDURnqOG0XlauQ6OE0ddCJSOTG0jZhYoeQeNqqj7YchApgap0hdqIpsEeoCsoMq4U6Q+hG1KbVnu+G2W3I8KrvHbR+Ww5nPWtqYZ+LX1UU4ZkR6e8E4P7fzqqwxBvNoim5KKwO8HcbVzphpr40zwexbbxQ2w4nGLIKhmM89Ununlb2poyC4y1PSNp6JZqyX1QLZFssaKD2ZX58d2NHtuL8sicQbgxb9OPqulrY9D5qI3SpJ0zmdP6gH+yFzqWLRSNWotoqcgpH+0UWktWVSSN9PBcusiQ7q9+Z9h+Dz+JSocVpiwfZK5NilpIeFe8Nt+pBr37cz27LPNdyRqUEmgSSsaSWcArmRgzZ9X3R2BnyVBVzvfNLKbz0lotNaqZNt+pQAFOYCctPXSMcZYc3tUjnuTDWWujqb+q7LXwDeZgiXrMs5D58Bv0rjoGL.2KSGkimObPi2iyCr938dzfkexw+ReYElCsEGRmy.ysQiEncai47sMtld91EEL9mDPuvDqQwsVP2pROL1bGROdNVSKYKkd91413doYIdNYiVnFvy3HcmYn1vaR.84MnlwqlMsxQgz4M5S4qqJK5Lh9PkppxmM5RaTuLpOwQVbdHaQXmr7L+F0yiZ9jJzwUtoJGcoH87hWPc6K4oMtcB4OO8yQR2ir89mu7YeadbzLodpxpcuUA+ZqWYyVU5ptoPe5b4uzUU9pFs198HtfEcy0q6pp6ti1ycAxQo.cI+wvs6kiwO0C42aUpaIg35knU1Uoi5F2o4gimbqipd3MZMkXDOxn.r3z.X6JzMO31QUN65hbrMwDtsRI3tCl.erTpmo.eJrLrct1vMVTgimcMfcTpBO8Xs1p2J2nFGOCJ0VciZYZEgbsUkMtVmW29mQ7FIY4bRbLhOXuPU0CaC2i3Q6DgMqtisMnAczV3BakfEO4CqGHy7UWCubWSXs9dvMiZAOc0JzmMeoM74QqX+D2g1jwsO1EtacFe04dv0ph1JqdsO8Tz+5d2F.WpCtt25lSgWqoX7Hm81P3nJQvEtNhwKe.8ytyprs3m3ntoE9cfX7HdC4zOZLi2tH7Kqmv3aqh92dgNr2bQLuYpNkWqUsvZwTYC33Z8g6kmVLQCqcm1NCN2oYcTuUe7b1OMc35RM5o62.WdqI6GmWfWzeAs2E3NIzJWJw0WEK1+CEQMSo8zJ46.eUdImm2oBGZQ2zadW0a5GS85UnNLWV5ZggvsUr489sSndq6LZOoRnsEsos0E6g0HO5zZ9M6+EVrZ0FZeEqozTh69oOuTQB+Zayz3QSQ7binMwuiDmLIQW55V3fqbr4cLVRSe+J5RqyAusG84A0P+r3LueEOHKqsQYJsYV7sE2HkmyOwMmvOgQOcdqlIh2+HmOw2qEwiZSqkM.dkMmyMwueVStvIttnU4B9Fz2DmkNlKh15ox0Nk80PbYat9FstQS7466zSW6Z2TSW8DqGL05i38JLNsOGAaWk0OQ9iapsYr.sW3zln+avZLO84HGE4QoqWKP7sxrlza0RjeGYVqdNqMxQPJsFV1EdlHqsiNBuYVVV+KJrBwGTi6Kxki4jsL2unoQWsH2GoM1A4On.2e0rD6+J439tRMsfmjSJMNFOabxw8okFav6w7b+a7jIvEJx80cqh6qMyqlteev.DepXp06g3iBp+q3tRsvb05XdFxTKQ3c444L0rqxe0hH849EvbdzPdVTzV7ME1TvlmQYd3E34GSO6xaKVuzknijcQ7yl7rttymi9I+EdFn2R74Qa1OL87vI8P7ww7LybUw2cZysgzhVUjztoekmwdN4JbgEzlkdA0XdMoEq5CO8JOqtaQKXiMomymLA0p6lmddtWeXrEisUSB4Tq2sJeXuf7nt+L6Os0O7md2dgfHKmVGh1wGZ1ye7om8i7cvpaniTzgP2CwOm+0OHN9f1TsBcCx+pmHmmahTzt8Qg3EO+C2e6efs4NEhcSTs7CSFGcLwOz84UGCsS7iBe16Ge2+w6dK6S9T6RV6Gy9ZPjsUPCNDheN8R+VO1E2eBrOe++KVHv2ach2A2qHCjvJ+ffzmI39e5o+0749I9u0v+UH2+FR3u9ie7Z9TT3vnD2QgOmdse2e8cO8yeqUq9puGuaODED3d3q917gFe3WqgOGdb2R2C+DlCCN59oDy7va9xGO6i+se7ru9oGaeex+UIFE1MzOYzd2v+VOS4LeXECZZWtZymo6Ghg716dHwmCgGjcO4a6d+I791Gkci2lDsOM2OrLm4geSR569693y+kK0Y7cx7vu8w6K6Yt7omg96W89qe9Ap288m8cRV+o.+6wuesKWM+Tj+y8uOyu7QM+6eTIx4XfUxW9ju4i6+CuAlu+hG2Lejxgw9IWe8eNf+e6wg++0g3e3QU+D60e8w328UFiXU4uGiwO7GQ328XyUqbsS97.7MO1Z9ee9KFj49VdOEqjC9nd3wgG2MAaescwUODUIrd+guiUl2ecN9ZNCLwMzI8E+23e9valmu9gO7l4+3alYmk8gn+h88cY7OSwuMMBFSgo+EZd6iJ70OkOS5NuWOOuy2w+uXa+kc0ungE9VaXwu0FV5asgk+VaXku0FV8asg09eug7Opk3wjnc221jIihZyzisd3gl3qVFbuZMy+CXZD9FJ

@d-healey I was just using a simple example svg for this that could be drawn but I would also eventually be needing to use more complex svgs in the heroicons library: https://heroicons.com/

@d-healey This is what i'm getting in HISE:

And on a web page:

The middle bar for some reason is twice ish the height of the others and I couldn't get p.roundCorners() to work properly.. Any ideas why this is happening?