@CatABC CSS can definetly do it, here's an example

If you resize the button you'll need to reajust some settings.

HiseSnippet 1253.3ocsV01SabDDdOfKp1sMpH0e.qRUULQ.4rMPHmaUI7VKp.gVSRe4Kn06MmuUbdWq81CraT9uzeh868CzYu6r8YraB0R8PfXlclYe1mcdYuPq3PRhRSbpd4v9.w4ybaOTZhNHhIjjSNj37X2yXIFPSyUs+v9rjDHf33r72aU3TYER12e8c6yhYRNLQEg7VkfCmJ5ILSzdwd+nHN9XV.bonWIq2ZuS3J4ApXUJhmkc8H8Y7qYcgyYVyVxk7CrjHhyybazHjuqm2tMatsGi0Lfw1pNz7kP3Ng7s8doWPms8ve1g37niBDFktsgYfDhyJ6qBF1NRcqLeCdqHQzIFrB0IswcNW8wp3.6QzpkbPjHN3hQDUBAixESnskyosuz8LQfXr9Iz2Wjs.chGkIPmklFdKOE7p+uAu4.ImRPZkbHspaatVz2LYEKd9T2Sj3sYHCumJCkbaIK8SttGnPKjlM6wtFNViBi8n1NddqSw+rVqp32CzP7RMwPugoocpS+V5Hu5BlCT85qjnPsmrepwnj0eh0gm+f9r1QOPCH0QiUpqoLY.MDfXZnB2pr3M0lmo4TVXILvyb+TEmEeJFhWICNFCPMKHFa9lI.dvhERnsYXLzNB.DuUqtYRFkkaG8cUo32sh.SjOdv6OnUlhHPzMx3Sat0HMcvb5tZUpLvm9UbNuEMWsRG.ZepD4iVkzrglEHRS7o0ewnHzWkHLBkzmpgXlQbSgCFMSNZEVbL0ayFITfk.anRM4lvS0XhfOFBg8pJWYOltq.8odFpq9djXeF8xHfxEZdLPuVp5Pe1ym9.662APdFJN37bB0m9zmdePx5jnhSMi.opuOcauuNWJFBsjyX5pf+Zry84uIZtGsLNTk40aiDlxjBBzd94+KRXvuUaCzs0lk0rvYdz1ergPF.CPJZDFFrQRDKPcqO0i1n+fre0c6vp4sd1Oa1.C+6sEIHW9KQfjxi.90PvrD4nEd2roGa0X2sC2pEEiw9woPoEyxwwztDamCaLee04G16cOkS3Y4m1ndl5FfZlbUaTYRZKoO2nFgNnKhkBaOKLCQJXyW1ZVSYbapYgsktFRvhMnF5ytYTzCohGqFqaKCmoPcbQ5ZsBSkb6sHxJmqLvqk0Vq56pVA2A58WJLbtqYaJnUwwfdtKaGVo+PNVSl1qCnWG61fWViMDaHOcW9G8v5xWTRUxPk7Dov759Pg7GdLEonImc5PABQSMYyFdbwrg7ttDAFjJtEsfIYvu7bcxaN4PlgMJPXLw8oOnMB6ww4P3FbHe9PmJtGBIWiE4Y1VzcGm57.11AS1xq1a3Xg+TsWmtidTPkGc2c28FqZr.u2DsMa1LbZsMrpWc0U+aqZCLvLUHtypMqYCww042Qg7FMVouovgrWbPlctJNQWEjh8QldLu8wPEKfYESMa0NVz1iYXYR8+vreuO3r+GJDW08BggGMeLtzbvHde++AFKdwzm6dTXHvMS.3JtG+qK5yi9Ha+OisxExtmwLZAlm4ddZu1X1.GvcWJg3D6E+R1ZlbYOqrkAZCxfLAaRSwh0sxNEKVezhjdLtVcEOuRy9lrOISChIY16WqfOjFkoyTfQH8vmHdEmOcnlwwFKpiMWTG2ZQcb6E0wcVTGewh53tebGsuf+UoFUu7xFB4rKNJqgniyQRFlAlksR9G3VIAK.

Enjoy!

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

Figure it out, you just have to click the edit button and when the tags are flashing you can select your preset and click on the tag you want to attribute it to... that easy

Might be a stupid question but I how do I link preset to a specific tag?

@Mors I've succesfully build the most recent Develop Branch with Faust 2.74.6 on Windows 11. It might be a deeper problem or the Develop Branch you're on.

@rglides Hopefully, thanks for the suggestion!

My Faust Fx seems to not be able to play anything when i'm loading them into Scriptfx.

I can play with them in the Faust IDE and compile them into hise and change the knobs value (even exporting to DLL works) but there's no sounds difference whatsoever.

Everything is correctly set when it comes to the Path and the Build (Release with Faust) so i'm wondering if someone else had or has this problem currently.

Thanks in advance!

@yall Okay great!

One last thing, what's the lfo module name in the scriptnodes?

Btw, thank you guys for your help! @DabDab @yall

@tsempire Nice work! it looks really good and it is really intuitive, a lot of folks who use Knobman will certainly appreciate this newer approach

@Chazrox Yes I got this error often in the past month (and twice while I was writing this ) but it get resolved with a refresh or within 30 sec generally. and now it sent someone message there as me for some reason

@Christoph-Hart So i've compiled the latest branch to try it out and it looks really cool! my only issue is that when enabling the Spectrum Meter in a parametriq EQ it crashes. I suppose it's because of the CSS or maybe I'm missing something?

here's how I did it

HiseSnippet 1406.3ocuW07aaTDEe1jrUXSQzhJHNAqRTUSPIEuq+nN1BgahioVzzZpCsbqLd2wdGk0yrc1wIwTUUNvA5UNwQtxeCboG3uBN0abkybAdy9g8tdcKUQ.9fkeeMyu2adyu23dBtMIHfKPZEOZpOAocQ89SYR28cwTFpaajltd61sQ6M0GGDPbPZZq9YJSZEVCE94O9z8vdXlMYtJD59bpM41zwT4bs8Z84TOuNXGxQzwo7tRqt1b19bO9D.FqpWB4isOFOhbGrxsUzQ2BG3hz9H8pVksq3bCGKqp6VyFWir6P7vglkcpToV8cMKuKtR8ZjRUQZW3.GpjK5KwRR.Ras83NS66xOkEsA2mFPG3QTBln9vNGotC2yQkhJsn8codN8RpOAHXU5MuZsZT05J5GRcnyzOupcoPCFyiHcATakrva0LvyLM7JkBdKARZofzZQP5x58sETe4bKJ77l5cYRhXHFNmRCkHeQqXrl99bvCl75iwGS5H.gYQrYsRk11.9ZqlEUefiq.owIXgQmdFehQRfiHx84i84LPXy063wwRJazQTOh45wQlNVO7vTAaKHPw31bar2s47iuIyoCg3soJNvwqGP.33QYj9xodj9tDBrEEKd8gTO.jiDXe2hOtXgAPmyHAeByogwFVVVMAUbgCQzvvz+Li.tG0wXiJUpzrPhkcDXG5jfFFk8OKz8y1IvE6vOsgAkAaqQIHPvlgo5GC7fcnYwmjcqazX.YHWPTPvNJgZXbsq0LMf1wFNHAbrQ4xkyZfNFZ1anpIatyNQqZOrzcqTf2ZN3wXLXXLVLhxx.Z52.U6FFwYEnJMLuEl43EhuEx5pktZyEpa0qWWUdR1hpwaQtxHgPVnfopPJnVcYUpHHzvkeBQj6rJLqx4abYsA1VROIa0MtZIHOZBgYOcqlK8v2G63DVUhQUyW5odtrqZ0pKI6JmM6JH49ML1wrTXUL9D9TWpTUY3.OFUNMtFCIW7sfN8Tsy4Z0g17sZNbBCxUNyfytCWRtKaysToMDswhlFNbo1TWnDbOOhXolUbuhWUfaxlLd.QrMTg8lPl4HvujkzR+kSZklSM9.KkibVWFUdWeB6kwzhhIEfe8kcaikXESWrNvOehPRUPPqM4DXNSDuWA81jfigyiPeiogf4YxXh5HltzrRHJPA915YHpPmkdvzzYBOePqX.DsaumdaAdzHLjwchuwxHdnAiROGCZCFmHeQcKyZUrpUpdsxoLXonlqWsZsx0KYVCElrZ2S+wEMLVeVIoqy5M.Qr.FHJEzGYbvWXt91JW5xbHmstpCLTDFf4wO8AbwwAPuGALLD6EPJ9DzoTGo6rr4EOskKgNxc9z4W32RRNSlf1BW3ufOQisyMgAlswcl3gkYG3odVPrAngJyTF0jDV.bWH8yF9WaJ3qKDurdOpz1c4XbkkfQns6+BLF+1g2R+fgCI1x4.bM8Ne0+COT3CRtvr+DwIjCdT74W19qL33NSFG0kqt2qoCoyd.Aco3J029Kuy61RovLQw1+vogJrx9LQlS4EUTYthKEFR0XEF0+vMdtRQsjE86+0eNziar3ZTeQE6t3hZNCpO62hgZBV+5O9GeVjlbf0LGZMyAWyD7h9c6KEhWyD.it5UdPjO4PrYNHalCyVIXt0e99WLbksRv7O8zuyKxmbX1JGlsxf4NcN5.lh0Jp+Z0W69KyWc6883STbnGhg9GfBUG5X5CLI1Dn6lALigMNqnn1ijKojUPpOIrQRWSQ3DazTIqEazLw3+K6wXrsf+P6nQgpKNuQnFHuYg+ajB5GpjMLQgiGSyULFdv+CssytT4Bz57FX4yafUNuAV87FXsyaf237FX8+4.U+eraNQxGGQ8iPG16fnwsZotQf9ajvCcHC

@tsempire Nice work! it looks really good and it is really intuitive, a lot of folks who use Knobman will certainly appreciate this newer approach

@WannaBeGUD What Christoph said on my latest post was that you need to have the most recent develop branch in order for it to work, so if you're on the 4.1.0 Master Branch it won't work.

@DanH If I remember correctly it's the CSS styling part at the bottom

HISE | UI Components | Audio Waveform

A UI element that connects to a [`AudioSampleProcessor`](/scripting/scripting-api/audiosampleprocessor) and shows / modifies its content.

(docs.hise.dev)

@Christoph-Hart I'm on the Dev branch from May/June, is it too old?

I can't seem to open these snippets it keeps crashing so I don't know if it's just my on my end?

HISE | Examples | UI Snippets

Examples in the category UI

(docs.hise.dev)

HISE | Examples | UI Snippets

Examples in the category UI

(docs.hise.dev)

@Christoph-Hart For sure, and it doesn't help that my current project has lots of components with shadows so it's an issue to be expected & Can't wait to see new CSS integrations hopefully soon!

@aaronventure I should learn about that part of hise for sure! is there major limitations that I should be aware of?

@Christoph-Hart Good to know I'll try to avoid them as much as possible then, do you plan on expanding more with the CSS side or that's mostly the final form?

@d-healey Yes that's a good alternative too!

HiseSnippet 1854.3ocsXE0aaajDlzILWrZZQMPenOcXgBNToFIAQJQYI46Pisi0cFM1QHJInGLLBVQtRZgo1Ufbki0cnOdue+D5Ok9e49Cbujm5CoyPRIRJIKqXfRaQvcmY18al8aVtC65KcXAAReM8buY1Dll9SL5MSnFc7HJWnc5Kzz+JiynAJlOIpqilMgFDvb0z0eveG6Pe2GpEd8++gindTgCKoKMs2I4NrWxGyUI8184+H2yqC0k8F93TZW+4m5HEGK8jSA77.ipZSnNWQGxNmhpsig1+fFLRS+6Mrsp4T2ceWKK6VMbnMXsFPGLvrla85MZ1xrVKZ8lMXUs0zezItbkzumhpXAvfdjzcVuQxOHhlf2wC388XXCSsdvLG0s1wi3dtcmGbBzzzeX2jP0ChBUeiwYbW9h9SBYecn.RhEoCZ56rIHY9Y.I8TP5gQPZOidN97IpDIHd9BiSEvJ3.Jr1jFJQ5psSumXbrDzPnpLldEqiOzXgEEZTsZIBbq3A4fKXEJPQtl5S7uxj72HyMbHScrb7Do.ZTH+OJj8MyCVjVcqMptUV0oddXuAfMW.yTIz9KWiBH2HTo34rDIdzxnrGcPpI2wmAw9WJcnduTJu5PgaGFyqPl4+5IqXPWpZTVkN70G+9tupGnoUEqCH4xwEdbAiLXpvQwkBxzItfg873tL+Pycl6zkfAvaJqXt+cNBbEd65IUb7XTebRhaGnn9pyYen2z9g1WsBrX.2tcMLQMLC0HYj8PekDp5ghgdL.wkspTy9fLxo9NulJFhRqWY+CHjkreLWbnuCHsZEyXof74.g55BRKbAHDgX3slg2trTznjbkfjMHh7r4y3yHKhaHy4cXj6bo+XpG+ewbKTj78jBK.e4XqJttH.tphg4vEzdJe4UL24A15kHWbYFiRl0.lpmZlGq2HFCytlv7UyJjObMDsG3cAS.t2D7YXL94zYJAKV+eaHevG.wIhg.SIFHG4KotNgayVHhOjm6luMI+JVluTjXp+v.PgKxu.hHyODN4uL2OidwJ1VgpTTmQuQtHyKLPVHclDLHH7WisttujC.T.PDHX4iX1wtFYRTHXY5dzVFPxGF+NML2HIJVHetJAg6.EMHwYB8g87G5KmJbaSd5.a7uHtdeoOnUah.fd5dJ6Sc4SCZSrq9WB6OV1MkCFQckencBCq5jaHVvulvO+g8oErpaCIKMZf2rQtZ8hkHY0uN7yrQhAntV6C2vmpVo1JFXB+pMWeLaM5+Jlw4rYthoYdRvwT9TQvDpOrvDmcCjLNPaKC77gh1fOoTxwQxTraTy62ggaVG2ONHbbym13Vjv7ZEPXzf3P1Xf3vAQVfaAaXAzzLqAsaSGnVrT3Ds8Wax28cQVOQtXn6GH8lp17BwhYCh2GrlE2lvascxt3hAOXj4tfXSXsu0c5Uq5B8YCj9rOaeHEzPhJ0u7PzgvWPU21kMrD4ocrOrwg13CM1uSKqhKaYY9X33Jswj9BkKuXyghYiF0WDMtkv1crFJgiEwUyZiasdPxlUajw23VY71EKsJe2ZC780DxGIudayeKGS1epSeWal41f+ZYQjM5.0BuUK1AVJCDcVjfmxfVsP2n9hT7MDgxlxljotduNaFy157LKVyAUO3VGyLT3shY1o49MCYlcZTa+iKtDSYqiyMu0vbik3IMxtu3JA403bT3PQWyRehmTT4V1aKWdi6d+Yt28Vuy8s3LKsTsrSsuMZY9n2ClCTjTfime5.Bm7WWbF2JdLwP0Hnym8r4GHbtrK3Whu7bkCqBuTEQ0hSZJEmKUrWIJfCvtvjRVVzfAqUFdFWeomG7d80IFKQyeSFVPLcbelepyyFpHTRR15bdz1UmS790oTTJNUvUuZBKtcGomKV+B97pUEoEelcn9nchQHnpJr5nuJt5nnCnnwgA4OYDV1fVH3iKE8W+y+m+2Ons0Fakw3nq2d5KnJJViVLbhOxHGiD5ufcMTUbTEa6Z7BVvUJ4DXhVbtLM8GGMoe4754nBlW3b9XivmM0tI8DNKciOvcUPYxF5+zNZZiX7giTyawUrwyKvd2G8wO9wOgFjzqU5t0Rgmu3Nifovy+74yR2XAd9u5owC1J.VleCbRlij2fEj1eXB39zm9zayBNr2Z0pMXMPdu8162vtwSEkYHVwQdxctZdCBtuUOLnZn2Mc.8WzR6.XqkbfqmSp+iyWVsn+u13Lo6TOpJ62f.+5LwBfD1LE9iE2imvXV5udymwGln5F+vDaKD2ynKW4LZ8Xbm0fQLm9O.LF+4b9RiSFLf4nR.3CM57S22ucycL8uVNUwECOip74Hg67oi6AqzNLX1EP9c.Rv1AotQsqhswHPOlvMrARHhEZhs0iEZNWn1Xpiu78NQ6igevnGG1CfIQ3GTaWiyv1DyU2.aL2k+dGmrC0JFZceMr180v52WCsuuF139Z392WCad2FhedwCmB0BFk1nocV2SBegit9IBJv.CYqZ+N3oNwm

So far my only issue with CSS has been the shadow causing lag in hise especially when there's a lot of components.

this one is pretty detailed so maybe i'm doing too much too

In the snippet the lag will be present the more you zoom in (for me at least) and I suspect it's what causing clipping issue inside my DAW though I could be wrong I need to test that part further.

I'm having issue with fonts used with CSS components on Mac, it just load the default font. Any recommendation on how to make it work?

Here's how I do it on Windows

.scriptbutton {
    background: transparent;
    border: none;
    font-family: 'Outfit Light';
    font-size: 30px;

Thanks in advance!