Happy new year !

@Christoph-Hart Interesting, I did not know that! Looking forward to the designers whining at me about Figma pixel-perfect accuracy! 🤣

It might be worth performing this rounding/clamping in the UI fields too, for consistency sake. I totally get it is a JUCE baseline thing, so I'm not going to whinge about sub-pixel accuracy or anything like that.

@resonant Yes, your version clears all extended attributes on a file. Mine only clears the quarantine one.

I would recommend caution using the -cr option without knowing exactly what it's removing.

@Chazrox

https://docs.hise.audio/scripting/scripting-api/rectangle/index.html

I also posted a video about it on Patreon a couple of months ago

https://www.patreon.com/posts/using-rectangle-142597554

@dannytaurus Nice 😀

@David-Healey @ustk Function name changed in PR.

@dannytaurus Nice

@David-Healey Roger that 👍

@David-Healey 😲 far worse than all I imagined 😁

Got it working nicely with a WebView. Very easy to implement but I'm a bit wary of using it.

I notice using CSS throws an 'experimental' warning in the console, but WebView doesn't.

Are WebViews production-ready? Who's using them in plugins right now?

CleanShot 2025-12-14 at 09.20.29.gif

@dannytaurus Looks good

For my future self, or anyone else who finds it - I ended up doing this with a button instead of a label or panel.

const btnPresetBrowser = Content.getComponent("btnPresetBrowser"); const pnlPresetBrowser = Content.getComponent("pnlPresetBrowser"); // Show/hide panel containing preset browser floating tile inline function btnPresetBrowserControl(component, value) { pnlPresetBrowser.showControl(value); } btnPresetBrowser.setControlCallback(btnPresetBrowserControl); // Update button text when new preset is loaded from preset browser const UserPresetHandler = Engine.createUserPresetHandler(); UserPresetHandler.setPostCallback(function(presetFile) { btnPresetBrowser.set("text", Engine.getCurrentUserPresetName()); });

@dannytaurus oh, didn't know about this feature. I actually like it 😬

@David-Healey said in Multi-shape and multi-colour SVG:

@Felix-W said in Multi-shape and multi-colour SVG:

This is an interesting approach, but Base64 SVG doesn't seem to work on the Button component. I've tried a few methods, but they haven't worked. Does anyone have a solution?

Got a snippet?

@Chazrox said in Multi-shape and multi-colour SVG:

@Felix-W It does work for me. Post a snip.

@dannytaurus said in Multi-shape and multi-colour SVG:

@Felix-W Try this (put a button in the UI with name 'btn1'):

Content.makeFrontInterface(100, 100); const pathData = "260.nT6K8CVlCT8A.H0Rk3ATIQOIYSfkMRTT9Afpx.lLtHfB6Z6ksFSUJT0vlJK.EbVJpUguquLTnXHEtqrJPciLg4S+NLGZRXbYf3.Szf9aHlOUJ2NiU7kuPTra3JBT3UJIvAhWP+M7qx3rDPg1YonTJoPtm4w5dbuWDZ.mZ80OUFQHA2M4T1eLBOfSXbhS8mXZ31fVu+5yAaOtSX8+pMvK6rzks.ZPxHJP4cLWy.j0LDpC.fgMhoviJeqv3pQkNdIFRQnm5.0HlJenz.QWMr7cPLCSLfexWqQroCgOsDH8UiH+Fv72EP+kAabjNmZAIYNHjb.xa1hrLd7DvYgazbTtKX1AfTA"; const logoPath = Content.createSVG(pathData); const laf = Content.createLocalLookAndFeel(); laf.registerFunction("drawToggleButton", function(g, obj) { var a = obj.area; g.drawSVG(logoPath, a, 1); }); Content.getComponent("btn1").setLocalLookAndFeel(laf);

Aha, that's great! I might have missed a few details, thanks everyone. I've created a button based on this; let's take a look.

REC_2025_12_13_03_47_50_949.gif

HiseSnippet 4772.3oc0Zk0ijibbt6UaK3drWAI.+jep09zrtVPTEKdTDBFV7rXw6qhEY8h.uOKdeTjB6+Y+OvlUenYFMi2c0ZHCahFDUlYDQFYDQ9kAynUZJ8BZaKat692YLUEb28+SOnOUzESF6jTb2Ap6t+27fnSaWPySuzEwTkSaaf+c2e+uZ+sNt+wu9tme9O92IbxcJ7B9PW2cmYYhWfPxkjtOzqxejOIOmwwOvH4xGQMze7fWYAYYdY+h97qdX8cUNdYNQARN2H6qd3NVm136t+e8ADjsXA6bQ14sdMxZzsvHXXvgtAXAtN6b8B.W63Dh4rnj+ZZ+jtxF8Nmtf1EgRT5OoGWNV7xDXlzl3lGbqwl6zWl4W59Nx3jbek2LNs2c28esxGLU+pWLU+yOHl3m7W5+Clre6yC7zG33iMZ2+U+Xpzl+FTo6+HU5qeQk9cOn60jT08gQtoO+iObnXwCF5r3a9XU4EZu6qz+WdfrbghhNfKNYALMKM9Kb79MqW+8Os7569Cey69l2s3gZ6dZvo4oJmtXJmNG4hm92d5aw1sEnv.geGoYF6b9d.qnUmvvYGwE.jKHB0x5XmaY2rUlHFXi5tTuK97iVEa6cI7AnKtRnDBftGX1tEnmS7XrpfCXEs7A1caZffupGhYvKMGpktWz.mNmBaG4.foKqpFEaAMSyPpkPxHw0TES21NuLKCGKOrzPIeyNd+H58RJJEyJzTF.zrpTP3ryWq1FSxZ3xRvLSbY+5EZnFMvaoTyNPXkGQPMRaXrOgfTXPA.moffyHrYq0UJsTVxyPUNiiTFT1WokMhL0lktx5LpxX3BvHSURzJfSKGei9TlTzPytMJIPGWm0Su2nfsRHJrA0zRGtc20rJCG3wFINOSoUGOqsxYyJG68dYmk7EzqQAUEGq60i.8mykEaYpCn7OqCEK1avstN2z4LbffO2N1TmVLQm78Ab4MWKpOU4YuydXI1nlzwhYZphRVOPZROqUsmFpUZcny480cm8mWgRUiYddUKbGpEP9v58NBGZrSsZBENHXi2rpBcdB5Xc9dEIdP2Sd0ydnMm1kryeJtMCdE1UMjcC8RcrnIiCtA9mp0lUwFz2ktoQdpZJdes7TApeh2o8qw.KuDW5zjbdUWmNSoXfYcN7DTmfydLttUPFvTpLQN4bm1Up6jEmtAzuQZVIeOHXxbtllKHgnBK4DekkWp.g7VYqRiMm..newAddiEwEwMNfIGENWE5DyXdY5XX6A2y1iLH3c1AMmkOpsyZkgc0JWS1xcGMqcT6z1UoymH.BNA6pWAd1prfJaDVp9Z1NchyjYBoiFPM68DYHSmGZ7NYVV1Vc.QsZUSu+IUGrylqFVqfwmX5s2FocM1V2cJTZAHFaVSuY6diQ8rFH+yslPmmcHCyiOuk0lRwFHjxBfffhCPfZnvhwlDXDmHRPPjxjsREvCnvYBNgDDT1EeGN8dYTE0pSha1jCjHhUfUYxkgwrDVd4voI.ay83axFhAyRv2BvEI4uimVoRbWIFx1tKV6W0h0.d0laS8IR3qCsigHaqh.f5yIoSb55NdYl0n.orPf+RgkzYwd3XevACiyDHZ7AsAZBx6WUjZmNOWEUBwPhe5vtngFkCjjw5y8JhEb9jU9jXrG6JvkbIPh.oI2sCvvqbuwEfRQlIJwSBgSlgbZCT4QjgWMRsEnRZf8AqkgCUFZBTKJMYI7FvqgINPIsKkeQObFxzAihX.4jbgkGsNs8jBPxEpyIUXzMqOnJ50iuYaFokwA0q8cHyAnsiyrWjQnSIX36VkBbPiMIkqLFHEuTgLjT7fDVu.54wDkDrqSGiDsi1i6AIcUayNUjc.aClROPDRJjtVsohDXMij20UNZlokEZ14qrKMi5HiB12SqDWoAzMS6CsF+a+CeIzyvvavmaVCs4U7yMaYmIYAJNqfVLvNzvPuuoHzNkgqRGHAVojSHi5fD9TdYYyAj7Fd3JWqyQ3L.0is.tr.GHFFsNiL3dNTHOW.FhYn1vwVnxguMdTG+rr4tNocJnG0HXQKhhIXbcUT7KwG.RSCiJiHKnXlCGcalJwuZUvbsUJ2V3pXyULiPMTnM0l3GNXpvKaLL.vNjjQcdvJRaKstVCpkZBqw0J6tERl2N.jkBjxPkayFS4NnloVwpFGBDAXscLIKkRjenXfz35wSZwztyEi3LJETzsIBW0zPCIIohTWfouRHYbNMsnTEOgHCUJwEDsyM3vAekC.k1.3dv4iz0TGRF1OsuNyX01b94xcVWPNe5ZqnZKVle2ZzpikB1qmR4QJp2nG2a6TBkscAKeKD3osiqf20VAYksOp2w4ztC0Yyhmb3Mk88EwV6SsAyz125XOV8MDVWYucWQQBk6ObJH.lY8DGcexk1pfRLaYlk8O6BaN2eDx2.EUmlekU7zbExbG.KgzJ3gKHQaiur4jYGGKATBOV1lK7Gm.0fl7EtbpDDKvDy2vzua2FdvSvK195qfZWVWIliJrSudMT+DmJF.TfjGR.LcOUlUv1SkZMvWVVkacvrYJOAWfbLt9BXavZC+FpSx6f0tVrFYYm+AYmLnt199pcn8YZwrIJlqa4kKAaOqddWhdiDpx9LdHpCl1FoPDx73..DO6R4sPUhvISXRvIjCGIjNo1A3XXtCHglet.mmSpHTUe2RnEwd2lhlv3DBgYWCTkQBtwdQBzQTmiI6YYqKhVuxl3bc4Q8ZLKN1ZLG5UJy6ZQ4OBJ3zpbdIguVIFDMvZsXmFmUZsXnEHiLl7WaDMAmbNY5yonZUR5Io3icByUhGtzAQpcNwISOOtCZxNSJcMh6ZN4TwkTvTq6RDv1Fej.HmqZTeVcAD.PKDmkUo.X4P+jq1Ih.T6YoutfnUDUvfOi6zzK0TJZXqCHErj1ILHiX8ksDvEbyQg6U.MN23k.3D4nWp4QedWZM6YOllb7y49DnYCjWEIA1xkFo1fpJtMwltbXvVStBeU7Jd+LTil5t7vqK3+ag1heA.ZUNIShie+wKTTbyIkEmeAMt7Tai+nK75bztMfmPtHuc.BLcwmm6Jxua2nBJWY.lLe7UjvYpc7QbVgc3383ArGCmAhjxPEgoHo2An3cf9zkk0kOJUDuz3gSJzkVUQQj51sSrVrdrvKolmhPVhqaPE0USayZinfzMfMnEHY2dYG0jlAnZJyZNlUPxCKvwGyApjNLab7ntPKygpRDGk4Kp0z7gHc5HSfL5IBEanIoEZbk4v8SAjffmE5RMpiA5TEDSVIRdgK35lhbHWwsmME0TRbOYefemppuhTm8UJ7Q7IKjdwbBf5KxQnAWlh2JVQzwu2r6niW818iS.oEUTg7d3h9d.eYv3gkuy4EzXnOfFaPufFmoXT92JZ7xlgTV.NBk.g7MRBWXXSJOj32gixs1jIAdiVsEpQ3lji805xTLq96JdbeveOwicW.Eg+T7Xis1QRdSK6thSU2l.krVqJvchFd1uYxqkGZSdg4JMYvy9qqLxafsul4MeD4vHXS6Lpl65VKTTDdzsA6vLW61bMY.rssFKcsFbdcKc8d4dlUmkIbBpEjapNs5n9BFU2kNeaLugKfo08xdIv1YwfiSlq6MV0rOQ7DnuhYKX0R3lOVYbVfvn840dvGAnvuDfyD3NxEzsOl2+bfMTUHapb21SmC5LDC3yjQFc8y7QVYCgnZCAswo2Mnje7ROW.umY8FqqSyxslWVIUSAQltBZtcU4ITMi3cQAYbiUA4GkS5gtXm5Wlzc5PmuOH1QcnQM2cy07GRL6m74uf1bLGYCFV0loUlbGhEHrOB1gl5u7YQkqkkFgGH8L5R0SsxTUyIABAVr63iDLxFVCCEiVgCjKYuOcLkWggm9mMtLtsoZDB6xon8GE8CCaVRbd0kCEs4lhsvIkgMv8GQIUAAu1a3M0rlnb8TKHrUCuWO2gtwtc7qgmR516X0xNswxSt2yFpDfNJSZFB.BJ.ZBpo3RWKxrlb2QIaN3b4KGgUVV4GqQU1LHAwzBKwA3yUodCUlh3UTYE...RbAtb0M.JtgK4+qSFQGelRYeyHFrbSItijITs7YS4H9hfRKrnoDpRNEm8KIANjCeAVa8rtp5bm8dKFgoyGF5nLU5bA.tnHNeMKPEOEPOnRVRB4.1XPsLRqad7N30gX66VS4RcRjlcEnqhi6z5V3TlHBOY5LGHJ5I0ZnimVivbI1T2x7bzIjbpjKixbCBZhsqUlcii.LOrd4i+TNz7RBxGUNtkwviDSsBsFWxi.MB7.CLLNqW4BhOPuHCH0wSBwSL5zGrIrGvcsqtJvDq150iTKGnvZsIgctyrfva90DjwRq23ChjcKA4DFPo8Rak8ZzQ48BG0IZwOtpaFNsHuqGWMfQsbK5FaWM1.d8yo3sX8J3jCfAZKe8W5IMuJVdaEtYfsJ5vIqzYjZGTMTBfffG1znzE14t29.xJUGX7PuovWROtlrsRO7LoD80U1ZRuldr0nYTEYbvdPSkXikzimVROd9+1zi+Q.kcU.J+klhb337lHnY.aAQ64IwvSkatZY.ZdlN4BwBBErmGbz1UbGvo7mUTwIkjXY6mAr.zzFFlGvMHHWvXk17rLLHgL2OIv.wXZGvob.yE4XcXJEeQ1dNKK.psiZDhVK9bz3ETX+lBUJtQYCvERN6ZEpoAnQRLIPoRHss3J6wTVUkPE.AzEF0hyosL1hyAUweXIKqyyaAV.fii2nxXuf2NDgGOTfSwYiumSTSaddY2cjlvpym77O00mRIWPENKDNP7+rbj+ewLjMH4AhCm5wRu9+GyQ9ySQlgEEfgeqKMDQ5X0HS1wk7iFIDOODGSxYMaHmdpZ.eOOGew1B.Rw8zxFMgZRY+eAj3qaS3k.rpJXD01iqv.vhyDFBfurNucMEtard6ZJZd8ZJFXPb5iDW2BYIJVGfPZ20Grji7D2xpRsHovPGADXS9pLMUOZW3xB1yAalxiryY9PNx.BQRR6voQ4ZkL1hXrlbynLzJsSPRzHU0GJDDjY5BPALCcifDhGE6AqzIHngs33bylNJH2RUuws2RzqI2s0jneiXfbzPO+f.m3kykyWhhnVNoFRugkyjTaAPdtJbbPr.lgJ1.+HoKrQEXptfwLY3b1USuqcspR4rdigdDmpXOnyRJEZZpwnRTxG0UhvaionLPcRsXy4HZMi8bE7nrMySiCvdqrM0l8lmJhiGsvXDX16msO7rNgHc04rxL83yvXLtHljgKm606uCpzcqCkdBJJmACGaCiaNElBQWVSN7fVbaGmfXplEU+Uni85o6Wydgjb+Dr.A7UujrlUIaV.kWkePmBX4Du9CMpW.VjB20UNR7wpkbftPV8lG.aiCnjIU7q9XP4WQkKKTVvjW.he6ph8ZBb5BzM2+9ObSv2ti3WIOL7ml9vvu6MP+xET9eZFVH5Cb7xQC+blkW46McK2I7y3PnzyIWnrLCuvmIHH+8ubc2KjBzDDkbqBHL8EdcKe506+V+FmQixnn7.h9ttxhu86eJ7sAi99mJcS+tu4c+4u4cOs7b6zLmkoaoS.mkoZQrO2+yuRBe+s9Gbx6C9tm64O+tGecfe+sQtYV9tW550QVdd7oHfapvsU4Ktku+Imu+oMKKwaj73O7AJe9GO9R2A4sAuMi9kiEuH2GeQtO97eejbew+8ED7yR6Yg87OdUsd7iX8Uuxa793mnUu75UE6w2LD+vyueSC+8eAixiup4+EKxKy7iO9I5r7e0b+LI2l4On0elI3UA81J6SWKetY3uHt2rA23+weTdd7Gdac93sm28158ou4c+vKwYuELFEzQVdoprXow6+V2thMe62AzFz8YgmKAl237svtksmRkcAxEu+6d2h57tE4+WOTX3WbraybSYddPyWb3aknq4Giw2WzewMn46e5U+0qDd28e8mVmqe8Ou5b48hg3iHrr3PQRmbUvqsYJy8uU+pa+9yqJ1cuZIuUerW0vER6dt5X+lWqN1KaZuK4V8Ae3lM9tm08OtTl2c7vMri2jxh.Wljpfltjaqk6oBFR7BdolaO9.UPaVWY0yz9puaQx+Ty40OtNoSebiwD+t36t+g68WZDGjDE28Vq697Z98aePrzuO2o6SKA4shy95.K9qOote2psWQaR2zGuh+antjq+QqK4OWU728fRRmW7WVG+pufNt3L96gN9Z0b+lGnCCC759fB90OvX8Kszs+DSuVYeWRQjnSWSxRbvCR8WzK6a7BVl8hhEbka96u5Vz7KsWeq8MKfdPg+yM9OWddcvM2Ze+qCt4sAu6hiWS4ex6k8.2pW7+vy8rnSEOWO8GeP7V6m9rn+6t6Rhexexy6SE0mwH3uTF29KkQneoLB+KkQjeoLh9Kkwc+zLd6+t.79txKurs4t6DUneFs596oKbVh.eNZ8t+KnCFMdL

@David-Healey Oh, and I still don't really know how to open multiple arbitrary script files in the code editor. I'm hoping your new course will get me thinking the HISE-way for stuff like this. 🚀

Hmmmm I started using it for the modulation matrix controller, but there were things I wanted to do that I couldn't, so I wrote my own script panel matrix controller using LAF instead.

LAF is - I guess - a subset of the JUCE graphics API, so I'm more comfortable with LAF. CSS hasn't really fully clicked for me yet, if I'm honest. I've never needed it for anything else I've ever done, because none of it was web based and it was all Python, c++, JUCE, Lua, and C#.

@iamsteinco I'm afraid I didn't get around it on my Mac. I compiled HISE using GitHub Actions.

It's a bit of a process but I eventually got it so that every time I push to my HISE fork on GitHub, it built the app on the GitHub servers. I would then download the ZIP, un-zip it on my Mac and move the HISE.app to my Applications folder.

The 'real' solution was to get a Mac with more RAM. I recently got an M4 MacBook Air with 32GB RAM and it compiles HISE in about 30 seconds now - no sweat!

If you want me to send you the files I used to build HISE using GitHub Actions let me know.

@dannytaurus yes, if the menu list is longer than the ui it will be drawn outside of it, like in your image.

@d-healey Mainly because the default method of showing the octave numbers doesn't really work for small and large key sizes, but also partly to avoid using LAF. 😜

Since I know I'll want control over octave numbers in every plugin I create - and I probably won't want to override anything else about the already-very-nice-looking keyboard - it made sense to me to bake it into HISE rather than using LAF every time.