Product Designer from Germany living in Spain. Working in the music industry as a GUI designer since 2019.
Creating audio software and User-Interfaces.
Nice to meet you!
Hey there, i am Straticah, a professional GUI Designer from Germany. (Working at Noisehead Audio)
I am giving away 3 Analog Knobs i have rendered to work perfectly with HISE for free.
This is my first free kit here maybe i will do some more in the future!
Have Fun! 
Hey Guys!
It has been a while since i shared anything of my freebie work.
Here is an Interface Mockup from 2023 that never made it into a real product so i am sharing it for free as inspiration or to reverse engineer the UI components. :)
Have fun!
Check it out here:
Figma Community Project
Hey there, its me again for a second GUI Kit.
As a thank you! to the helping HISE community, i am giving away a bundle of analog styled knobs, sliders, switches and buttons that i have rendered to work perfectly with HISE for free.
This is my second free kit here and i currently plan on a bundle of LAF and json knobs - but i am currently learning the HISE workflow so this could take some time.
If any of the assets do not work hit reply on this post and i will update the link.
Have Fun!
Today my partner Viom (Producer) and I released our first VST instrument.
You can see it in action here:
www.eraformaudio.com
Completely build in/with HISE :)
I usually create fairly basic effect plugins over here (also HISE)
Thanks for everyone who answered my thousand questions about expansions and webview :)
Hope you find this post interesting! best, Julian
@Matt_SF
Figma is also very nice and easy if you need animated graphic elements. These are not 3D rendered but the shadows and gradients makes it look like they are.
@Morphoice isnt adsr with bias control confirmed to be a HISE update? (at least its what i got from our adsr thread and the HISE meetup?) :)
I will also need something like this - otherwise i cant release this beauty.
But we are currently just working on other stuff because the retrigger was also buggy when using as a global mod in the mod matrix setup.
@d-healey Thats an amazing idea, i had something very simmilar in mind for all my vsts but also had no time for that. Would love to help with design if needed anytime soon :) And ty for your video about using images for expansion in the browser thats so cool!
Hey @Matt_SF so my setup is always the same for my Knobs. I use a cold left light and a warm right light and balance them out how i like it. In addition to that i use a HDRI image to give glossy parts an interesting reflection or to brighten up the scene. Usually the hdri is not visible (only its effect) but in this case i have enabled it in the viewport.
I render each knob step in 250px size and import the sequence into photoshop to add contrast or add elements. For a VST Gui i would always go GUI res x2.
Lmk if you have any other questions :)
@DabDab good idea, i would love to share how i am doing it, it is not that special tho. I think i will make a thread here in the future to show my workflow. It is basically CAD with Fusion360/Animating in keyshot/rendering frames/converting frames into a filmstrip :)
@d-healey you are right that did the trick :) next step would be the lottie, but i guess its not possible to include it like a svg in laf. Maybe its possible tho to get the coordinates of the ruler and display a panel there with the lottie on it. i managed to make a mockup in hise how i can imagine it.
If anyone else has an idea how it will work to update the panels position to the laf playback ruler let me know. David and me tried our best ^^
HiseSnippet 6060.3oc05ksirikccY1UkBccc2vsrZAX3mRTv13VHJQwofjgaHnhyCAYDL3PPFQ0ED377PPxfSBBPvO6G7S9KveD9Q+I3OE8GXyHy6Pd69VktU4RVxARfjbuOCq09rO6y9vyQsoxKnssp4t6+Bio5f6t+W8f9TYWLcrSR4chL2c+qdXvoOHrpo3NpoZm11.+6t+9Oi+l96+hO+tm98O7WS4j6T5E7dQ2c2wpDu.4jhjt2KU8a1ljmy43GXjT7hRi9MhdUkzU4UWWvxm8.3c0NdYNQA6btUrewC2c+eBqeRWUidmSWP6c2+4TU9S5wUCkOW9iIsIt4A2dA5N8kF5YwbU492P7Mo2QGmj6q9VN2d2c2+f56s.e1yVfe6CJI9IuS96sD+lmT736qwKsG2+K9gfGzKgG3GEdfeL384u.de9yv6O8Aculj5t2q4F19W8fXYWPSnyxPvKg0yk8tew+i+cOPWsThxNfBmr.tlkWdWMdMJL3W+HLL3W86d0xnPa2ixjbO9W8HaYTRY.fWSvBm3yqbcxet8jqpxHK84BBxe8RcdSkxq55RBVp2WhrYMLPoA1VBZIpDV.frFdf5VN08xTB6orAnU4PznSST7Vcvj1RVbpElTqnJUWTLsN8D2lc.b.PtLFZ.Vzpf.pPlzlgCL5BGHkDy3S6IMQBY4.1OEdQ3PWHBebYX5vgjs0pwh4g.YoijRGUI41OCPxRIDRx.H3ZntyEcVHtjjQJqjw.fAzuNhRach3YWfARNM6Cz65TSjb6IMJOQdXxSN4ZXXwlRCRRRQ5Q1z08n6RSaPzLyY1fQ2JtU.8fkRirdUC2VR3pYpQOzsXMQRBWp2raN8TdLbinlsC6fNbvUzc0dSUg80g1R6jxS7HOTctolZLVtF8n7kg.wQFz8yvdPsjdFpyCtZQQzx6jDTbSg21K2RsVfBUgkmMUto+.YE4zbTcHy9v3jsF1HHw723ZYsALsRLRAooDIqwdJCJIjx9dRl3kJgJI6ZSJGGxvyxTeSpJvv.aSYDqqcbBkFs3RYGXsmQh25hfPQNoTWuluQFTtQdRd7XrXViYWQybRazEz.zq6GsO4LdQ1QNF8T.1FLgikl0GZTqKuL2z4bH.shXek9Eh7IW+z0TwGKHlkOUrQrcOQvpYLYQu50kUXlsNnoVJ3qubMISs1jskR4bsh3remYhcT9YFEWvJMsY1SXW1KVakIctovY2UIgJSZuiWGVIgsO+z47lNT7Vc3oNG6LPiyjUZ0gxn6.ASc2lrRNIbN27TAWytobBKRRcBXOvF1TvrJmtNjvpAbNLSyVgyabAOu+XO.kh3AVsPpsTJKdbd5Q8p7c7ovTdVVtU3qiwpL7k1err8DX9ImzIvl8inGQ22vYVIKlIEvccbGHb9ppJmnKGVUFbgKe0wSmWkyZx1stxqb+ksBVGgNe9HMrVAFW873TqhxIkfs5ljQ0KFNXObX6cEX6ypKhrpRaOtN28R6HpVME04xL2REKpZvcGOMYTyUXrI4z7obgKrLDRBq2A5IVU0FhXoWMYlQrqle1LSbs+ljLoNlL2Kl5na4W2khA44ITH5qO1wbY7BXnEIJTanMiByQUs1vvcjvoiAMmQJQZrOQCac8HlSw1ATkDtpgswvJmNQBLV1PQyuKj5HyvhuGBmamnZWnMHDAx.NNgNuS5tfhEdBwlZ4PVcrsutWoUeayL0kkYFgtX6B1Oe7RXSdEFgJMuCV7JzcWNpt3.5YUfIctXGTkt+Z3FNofip9jhsE57SzdmTf5.QOxOYuwgMcV9npbFbaRVF+D1Dpi.NTPE50CDRfiAIqyr2fw0kmspK5hmSqyZu8Cs0xGvZNAejKF6fXrPGuYVPFpRZuzjiPjYNr5HjXlsF5vngYpB5Z9rZKOkw0mSMsNyYuFDZtSqVLPeiT0Q+Qj50hNolDiqohjhW2CKavWKSB.jFBHHilZCPwvHiGQkJ1dQFBPmbeZDIkGWps5hFIgvPV.xPRfPF..fP.tkRu7.mFCm.CfqAHuZRb2n4lFhU9r4Ss5m2B2msQCKUNmMc337wy7DGpzcY1W5MjnGVyQCEeX13L05rfzZdCFKIWkcJXlBMC61KvfW00iHRdJcNzfAJMzNUoSobTjLWmKYuHRGPbvTKQRp3Tvl1S.R6ZoBBNNscZ9L3Z0YkQdCJaCrlhiaSgEGGU3.pKrf8ZrqSgNq5NVZ4Py033yPSe8fvJJo8cRtTBM1jcinhWEf.7ioxq3D3KyRyCS6mi7LEU6SxOR5LDSaaFBMUMu4.QdblDp+PNjZAsPJYyN4UvqCIKv5EJWFNBXUlghvOodzIaGRzgQJ+7AoklspVOSXbnCMp6jzg0HGR5EpqFttBhYeGdsYDReq0lVdFI58LPtGrUAOZ1huWKr5LZR2FNXxIpRElz.O4gyoxWt.HV.jSUmCneMa.eErMeu2Af8CNl7F.d3PZy600mFNhKWoLoEZOjmOGOrNpowOHZKAtY3THleu5YfYQQP.Ec5dOObPLnfFwcgc5zrHRFkqDXjxqI03vQ6LBph3Z32zyv2DObFgaaoENZtEkRcFI7lU3vW.WxLoQGqvKsSdGeqFqAE1UgPoBpcCtEADqJtTEIotoJz+njQdspnRmtbn8ASw9y6V0IK4BxJxty24X9d0dgN5tw0RpQGOAF4qdz1.I8TTQV2LEFljQWBqRe.Hpogf4Ivs.Ppa2V3SuR9BlwhewLPjPMq53nY9AJQIMLygX7tk0TgAbh2EA0CjBPjyDSz6RFOZbvlmvulp1kS3jcRsgVgnRucuqWGDDBzF5zhLYtwtvhxItTYW8ldZBbvi8Ywxvnsz3UQ6CRm1egTFcKvoJbvZmM91XHmDFfq.R0.2m4UuWaDbjDZxXGSSqRuoXcWksfLwUgK61DYEfHxjO.TYZlTtVmgIWjLhya8dypM.XnqzpgItr95FV.NtNuHdlUaaWeHo.ToRllTe0.KYQ7gsyRp4Icm77nmtZGYA5YhTMRtqheGp8EYdDGMeZ7yxa2q5tkSeXmJrVbu.dvPE9dlypkcpaNgRPDJTt4rIwj.oBgyAQLQz3vU1dZHcocAWTibsmoKQz1B3ScjRqzpaE7ByKGlgwmhhACUXSwWqmHLSbRkFNGUBbYVzgSVkdUJG1IkpnNLozUb0GRjqEg6XMFzV5AcZWjp0QNHxIv9rvb9WOcIh1rGINqTrS+LIi9dZQdUt3MxqzbTttz1W5OWoFUA3dvfFa2LFe047nDUu3xVYbu1jnj.lwvqhPWyQwbSn.zxxhBNCUD0UmrFPA2XX.sQU1izTN4X5b+FQ7VhVagPGJXP+P8CvzkLjWVRiBLq3bbWCI7UsxEmdUlczm5IZa3DjiXQHNtcwqPcEVnLyFXhJrMNfWhyjUxY.fr6oLIPgwB03LzDCopuTFDKsP.YXAWoQGeWM7UHdk7vRcHtpBBS5H1Phrm7b8y0KHhL.IcpT2Vblv0WLvavSmbls0KpaScDddxQ8ocMJncVY9LEzlDI.r78EcHMxbRDsrbgN0nI5H5klzm4w0Z2YyHfjMiCQFoIUWZAYhrOrNUmhfkBSipCEC1+J2V4Sb686BRMIAwYW2uyCSWH4f1VOIQQd7HghU3o1rqhQ.L8kC1.UI6Y3m4edEgUYzE5YTuc1SUnU.LBQIY5CnqH4wEETWxDFNAJLHGicKoLk19vvXlsCWcEuzCZFzWJky1LEB64ccrgVcCzxvrU5kPpUF3bLtbIYKQFXD0lXbamAQNehkTBwpsg1eOvHFy.5kLXC.BniJlWUxBVhrNKlc5rz4NkHMzMm1SnvB1QSGZ1v22NCOIqHRlXSfuR2zpoOwnsSL8HWdnpvk4CVgEFgmUlTrMTjwBLNIhbtZVWSDuF.yx2QOx6hUm1YerNsKNIPoVBzCrQ1YmnLVBebpD5xFBoTXoiJTT6hHxq0rt5rE1M.95nrBeLbN+UPmIvnyWtrRoNXGZQXSCmVzfpsXvItAKLPldec41AEmMLMVELTSWItdY01qwMXIILVrgJ64q1s6RN2RFpqKKcvlOEe3PpbJh.QEn0rsAEiWEOeqL2dLXOSYWeVBZpZiMAsXUqjvCwIsD3BzbpfbDlH7OUOBMH3ZyxNiTUIeM+njnoIdfE6jIP0LxPgjpUZJ6orp7QYLY6LLJRKVqxVGYjqnzyKwhSwNVXVpENzDaEOfLJbnQlgWc+JpQMDcMjsMKtMqxx6isoHIOZuM.ik1fnQjQ5pBJ+4U56kHJRZUoils65A1sT7fs7VDdSGfvOKt8nRsayrGtQvHgxXUJs6FRMcOqnFpDLg9qH6cAS725gBjnmGboIGhj7ZaQVzlgqasfN2eJdSXf0FyP8A1vwxqT0XF5v8SQl.yBpa1dzMhZk9TRm.zDX+ABubHa43MMtsjI6JC6aAksiPaFSJkTQ.kccf1TUiA2ZRxLGrdK.kgrjXebFsRuBV35nvlBU7BxSafBQOasBYDRYdbmJKRlYRLQj7YMfwJflx7PsMM8E9TiSm.YC6VB3BweVnDHBKWd+xFn.PYo.G1prIjwX8jFKm.HsjiFB5tMVIUQtrUMkjbGSyhG2RuuJDWWEvX+tFO5hy5DV..K9q3P6LN6NQkr2BlHgXmkEHcnig17pzKWjk1LBtScBkZ8Izj1vDZ.pRRhrDtlgCCrDjaOXxe.YjiEXk0N0yo0FFX1IXaKiuhlLsMhCKk..xhWxqayXT6XMK9n8woh1oxsqNGGeN2FRZqR+liWohrRKn2GGQD2i.XqlMNEefITMI2ZVFeUZStb67EYrjrRb+bBDwrbdIxIfLAOOzDjCnt7ZTB6Q14kMcPEEXPfS8.Ge3hiuZU77ZKmKWOMKroOVPsAyKkNFQOnZ0P6UVLCSdEsALda7qDrdkpSwZdan3R2k5WGy04PXhn4gaQ0zFIgLBDVtAbYowJWCETp3oLj8HWYSOaydrzwi1KHZcN.mGDH35AKTW.t3LUekgHFhShNTBVF0IhaURXWaodIpUXw2cSVwEQPxchwaVMft+.XXiOEPoK4RLNoSVm.URQX7OQ.ownUndT+3p.kZox0KI6FpBCjUAoUaSOPxxBEMfMjDTqqsKfRQcjKY0grd0AizbETfoKtj.aNiZex11LtiNPp8BaxY4UXcdbUPBaXOyJCfLe3LhQkRh0YD60N7quDiQXi6H.0WLmr657UaLII0TC.LRV+0IdE5KjwTMTuWf5bmkZLYOikniQUI.FeT3Po25Nb6Hippt5AuRsrks5CbUmWklZu1ApkMXvFnipkiPxtg.j.7RkEQWUe6oUtQKSVsOpQZvqsxRoCccTLqbDvDXhXIWcIwvIUWOncMG4gsD7bcoIm4bOkNDXc9bd5LBkkDnvo406DEpUmVk4d7zQWgvTHPUPbfApR.gKpLqLUcjcKQUnJopEkc6tdFe0E.284yPKKBt6PdfEyUMn05pZpH39aNga0qik3sArv3rks1ZwflV89VoyW2gbjvj1kk6PnbUkzvFLrkzW7HOnkiaOLVLAEAGkpzyYDYQEuKveslAo0R3NWdyc3brZC8Wxsqc3y6.v1dwBn0nLBRZmykoyCfGQZGOXMoChZvUipiNXhS1m5kXYvF01dviedmT40C5gV31Nc6Ss4pE8I32peIT0ZKrPdDXB8QD.h0ST6KnLvYL5hDwBj3HcsuH3OdYUx9cK6TRmuaq50vM7h37QtRyZSynTALlCNKyvHIH1iXi3IraChJgUnsYp1AFRqBxQ.ncz6kPR7515RA4MOoXMHVivyhfWYvEOdfzmxMPTIvKBVRITKITrQ+PX5HLuStZHN.J1d.uZfMNX5oGbVMA6HiKe5BMLwZ7CsWWbD.6Nenu2u8DOV514kTYMyGxPwu3x.wvcA0WUBd3vQMmxwyBG4.VCMGCsmq4L2w7oxj8PQH0g8G1HRZy1eFALxtNiIv0EM.57giqwLTf6nO22IvWznTYaqzSuMdxq.Hf5TbHcZpNXX19IHKQPO01EpA7k+tWs76u7ujrLovoKop7QUmxf7129QL6cZdVB7i+UO91OYZTPGcUQcU4xKu9KeV8W9U+tW87S.sAcuq4d8yeEzWnryoo61G6t40H29.qunROIk1IO20wK60gWK8dpE9pW829pu3FN5Wfvq6hSZuAfiN4WCd8W83pGg9pG+O7HN5u6UewS5Zeqt9u5EhdGfV1Mcwy5d0e26+VsuilH+vzD4czD4GhlHeOzD4e1n4xPL80llEl7nZtyzst9Q0p1jakcQqLIGPSPTRaWPC2aQzW523LXDesvszIIW6ZdPyW90O9N.G80OV4lt.6Ge0Wrz5K1wp7.f5ljEqUWysui9M02PWzMn87gY7ZvQLPtm9sn4wke2n73BkWJLv3agzyph.tg.4jxfWO90Ot7G3ScIfSSfy2h7ce8iv.OYauU12xyOIp3TFE7Qoxyi.NuAN25mk17Cv+y+qEvorK4x0fg3jtfm43stPq5ZoefuVfW2RejG75u04aA+tkQO3u9QmuE51SPOd6Q3u6w+hGQt8DxsmfWHCzsCc3MCXOynOEtrj5X22CU9Xv9E3cQIW0MO68iSQAkKMBzy1y2vEx7jnx.+acvsQRftkG95G+Vja3b8W+H9x+fVuf6urIIJt61DimGA9D.spSW7GAzO929NOhObH3Yzx233mr3Aykjm+5uEbj.DGClki6lUD76d1.u3iLxwcSJ6lmsyOai+tm4U3RUu04OQn5kGduC06mpr76sH6wpxcUcA6eyzyW828pG+CUEF9Q0cKHRSU9xblOp5mCM7CTwWWtXqBZ95Eqwxr72Uv6t+y+vCV6gu+CV6km6m2ywzdQAqJEKS51WGT98cZf28l.g2c282+FTc28+IcOcra+4u4X2Hu5mTY81SDMw+1wB9Axft6IB7xCB02oy4t6+O9.8+oeuY6RxG+dp.mN2lpeOSPaVWU8u+x0kniAv.CN820batp9snoKb89aU+IIrk92dW85u9t6LEYt0huAkK.dgD0AMKwiWrO2yDzm3E77gE9EO7ltXwL9tP62c+qdlS+52dTh2BU+DW9kO7zyP2M9R7O89WX9lgD+t3aP4+9B3hCtMU31a+WVTtLSq3sGg6u5ATXbBnMfK4H9BEv+AZbqZ7CZzSlegA627MOKUaw6+Z66ki7M28BN7u9G83xK3z+9u4EbR78b5+5GvowEk0u0+Pz+1QC+TS93Rxh0OsrRPCzcsNE04AhKgAGe106VbiOzL.irFYCz2u8wM5she0CPX333vPq+iMZaP2fgCu4kZP9CZnp5kcN8lCYtcw0+1RIsu0c+81te4+Hi+vuvV82e7E1p+9Cu2V8e6tWZq9s+zF++wfJj+HT8v8+mWd9mYD8Gej6+pGLVlC1VWsL48oSa+W+BAPev4s+N4jEKqL9hK9.w+y+vaHvm8oEH6iDl5GIBg+W7HD4eIfveyCJU9Wyc59v67wsK5xaTrrd0G.zaWfhxk72ld4Eg4GADA+YAh+oOnlz4E+ww3u3ifwkEN9mBL9lqOyu9A1vvkzAeO.+7G3r+AuqL+rz8+Yus6eJD8sHzuwQ6iFz96+pL8+5S8pLU+IeUlzmJ8VFddYK9MOMls3o6kkTF8R+mavjszYg+9uDAZUUc2R+5kxzeZkmmxUXo4+fRGzujmwKag+g+5krHeyso5SLSjhalkmSAovY7sYejufuOH8j7m.76xN49O6S9hP8i3dZ84+yv8z5SGd++AQSt+d0+n652u4A8jadPrk8A4KyWdBi+aVRYLz4Zd2ak9gSVTpJqpiqJS79P+stkMEEEz7Rr+QIDYW2hO+6k7a+Fsf7.m1fWlb1szVbZ9voL+nrEPe51henwq+sO7Lbe71L7G++lwsezWGPn+oZEgO6SZEge1w6O8UG94AJZUW6Vhzp3r3ndKV1tqE5KAn8BVPR4sO.3s3W+ha6A742Aea3M8fR+md4+8xu2nD5162+FkPuU4+OoOJb7Zp9a7dd2o27k+kOIYg2kOEa+KdP416O9tsg9vCf.fKwx8S9a77tYt+Kft6tOdcf+ITGjeB0A8mPcV+SnNX+DpC9Og5P7CVmaKFQdsq54uS4x.phJ6S6e+96e2572+Y28+AfvPnpN
@HISEnberg Yes HISE tutorial then custom UI instead of the simple HTML list.
I never compiled as standalone tho?
here is my adjusted script from Example:
Its probably not usable and makes it even harder to debug but might give enough context.
The HSIE example worked inside a VST for me i believe.
/** Custom User Preset Browser using a webview!
This example project shows how to use a webview to implement a
custom preset browser using a HTML webview.
It supports bidirectional synchronisation, so if you load a user preset,
it will update the selection in the webview and vice versa!
The state here is just a single knob that will send it's value to the webview to
be displayed.
The HTML side only consists of a javascript file that defines the
callbacks and populates a standard HTML select element. You probably want to use something
more fancy in the end, but the communication will be pretty similar.
*/
// All const var declarations must be at the very top in HISE
const var userPresetObject = [];
const var expansions = Engine.getExpansionList();
const var expansionInfo = [];
const var wv = Content.getComponent("WebView1");
const var webroot = FileSystem.getFolder(FileSystem.AudioFiles).getParentDirectory().getChildFile("Images/preset-browser");
const var uph = Engine.createUserPresetHandler();
var expansion = null;
var expansionPresetFolder = null;
var expansionPreset = null;
var userPresetsFolder = null;
var expansionFolders = [];
var presetPath = null;
var pathParts = null;
var webviewInitialized = false; // Flag to prevent re-initialization
var expansionFolderName = null;
var folderExists = false;
var j = 0;
var k = 0;
var expansionObject = null;
var rootFolder = null;
var folderName = null;
var wildcardRef = null;
var sourceArtwork = null;
var artworkFolder = null;
var targetFileName = null;
var targetFile = null;
const var initTimer = Engine.createTimerObject();
const var startupTimer = Engine.createTimerObject();
const var presetTimer = Engine.createTimerObject();
//Content.makeFrontInterface(600, 600);
// This is required because JS will mess up the "\\" path on Windows
inline function getEscapedFilePath(file)
{
return file.toString(0).replace("\\", "/");
}
// Let's build up the preset database. For our example we'll use an array of
// JSON objects with a `name` and a `file` key that will be consumed by the Webview and
// populate the select element, but you're free to attach whatever other things you might need
// Get root presets
for(userPreset in FileSystem.findFiles(FileSystem.getFolder(FileSystem.UserPresets), "*.preset", true))
{
userPresetObject.push({
"name": userPreset.toString(1),
"file": getEscapedFilePath(userPreset)
});
}
// Get expansion presets
Console.print("Found " + expansions.length + " expansions");
// Collect expansion info for the webview
var expansionFolders = []; // Track unique expansion folder names
for(i = 0; i < expansions.length; i++)
{
expansion = expansions[i];
Console.print("Processing expansion: " + expansion.getExpansionType());
// Try to get expansion root folder and look for UserPresets subfolder
expansionPresetFolder = expansion.getRootFolder();
if(expansionPresetFolder)
{
Console.print("Expansion root folder: " + expansionPresetFolder.toString(0));
// Look for UserPresets folder within the expansion
userPresetsFolder = expansionPresetFolder.getChildFile("UserPresets");
if(userPresetsFolder)
{
Console.print("Found UserPresets folder in expansion: " + userPresetsFolder.toString(0));
// Get presets from this expansion's UserPresets folder
for(expansionPreset in FileSystem.findFiles(userPresetsFolder, "*.preset", true))
{
userPresetObject.push({
"name": expansionPreset.toString(1),
"file": getEscapedFilePath(expansionPreset)
});
// Extract expansion folder name from the preset path (0.2.2 working approach)
presetPath = getEscapedFilePath(expansionPreset);
pathParts = presetPath.split("/");
// Look for the expansion folder name in the path
// Typically: .../Expansions/ExpansionName/UserPresets/...
for(j = 0; j < pathParts.length; j++)
{
if(pathParts[j] == "Expansions" && j + 1 < pathParts.length)
{
expansionFolderName = pathParts[j + 1];
// Check if we already have this folder name
folderExists = false;
for(k = 0; k < expansionFolders.length; k++)
{
if(expansionFolders[k] == expansionFolderName)
{
folderExists = true;
break;
}
}
if(!folderExists)
{
expansionFolders.push(expansionFolderName);
Console.print("Found expansion folder: " + expansionFolderName);
}
break;
}
}
}
}
else
{
Console.print("No UserPresets folder found in expansion: " + expansion.getExpansionType());
}
}
else
{
Console.print("No root folder found for expansion: " + expansion.getExpansionType());
}
}
// Convert array to expansion info for the webview
// Metadata for known expansions: descriptions and tags
var expansionMeta = {
"Hardware-Lab": {
"description": "A collection of distorted, textured sounds with that classic, vintage synth touch. Expect experimental tones, heavy synth sounds, glitches, and that analog character processed through hardware pedals.",
"tags": "Analog, Bright, Vintage"
},
"Immersive": {
"description": "Cinematic sounds inspired by legendary film composers like Hans Zimmer and Ludwig Göransson, but also epic composers in the rap industry such as Mike Dean. Cinematic, Melodic, and built for epic atmospheres.",
"tags": "Epic, Melodic, Cinematic"
},
"Pro-Essentials": {
"description": "Your go-to expansion of proven sounds, first designed after studying the sound behind various hit songs of popular albums. Everything from simple and essential sounds to carefully processed and reliable tones.",
"tags": "Essential, Polished, Reliable"
}
};
for(i = 0; i < expansionFolders.length; i++)
{
// Use the expansion handler approach - get the expansion object
expansionObject = null;
for(j = 0; j < expansions.length; j++)
{
expansion = expansions[j];
rootFolder = expansion.getRootFolder();
if(rootFolder)
{
// Handle Windows/Mac path compatibility
var rootPath = rootFolder.toString(0).replace("\\", "/");
folderName = rootPath.split("/").pop();
if(folderName === expansionFolders[i])
{
expansionObject = expansion;
break;
}
}
}
// Use specific metadata if available, otherwise fallback
var meta = expansionMeta[expansionFolders[i]];
var expansionDescription = meta ? meta.description : ("High-quality presets for " + expansionFolders[i]);
var expansionTags = meta ? meta.tags : "";
// Use HISE founder's method - generate complete HTML with {EXP::...} syntax
// Use exact expansion folder name (with spaces) for {EXP::...} syntax
var expansionNameFormatted = expansionFolders[i]; // Keep original name with spaces
var expansionHTML = '<img class="expansion-cover" src="{EXP::' + expansionNameFormatted + '}artwork.png" alt="' + expansionFolders[i] + ' cover art" onerror="this.style.display=\'none\';" />';
Console.print("Generated HTML for " + expansionFolders[i] + ": " + expansionHTML);
expansionInfo.push({
"name": expansionFolders[i],
"type": "expansion",
"description": expansionDescription,
"tags": expansionTags,
"htmlContent": expansionHTML
});
}
Console.print("Total presets found: " + userPresetObject.length);
Console.print("Total expansion folders found: " + expansionInfo.length);
// Debug: Show what we're sending to the webview
Console.print("Expansion info being sent to webview:");
for(i = 0; i < expansionInfo.length; i++)
{
Console.print(" " + expansionInfo[i].name + " - " + expansionInfo[i].coverArt);
}
// Grab a reference to our little budddy
// That's a bit ugly, but we grab the image folder by getting the HISE project AudioFiles folder
// and then doing some next level-hacking to get a subdirectory of the Images folder which I think is a nice
// place for web stuff...
// Call this to make sure that there is no intermediate temp stuff being carried around
wv.reset();
// set the index file (this is already the default, but I'll call it here so that you know it exists)
wv.setIndexFile(webroot.getChildFile("index.html"));
// Enable caching for better performance
//wv.set("enableCache", true);
wv.set("enablePersistence", true);
// Initialize webview with proper timing
inline function initializeWebview()
{
Console.print("=== INITIALIZING WEBVIEW ===");
// Wait a bit for webview to be ready, then populate data
initTimer.setTimerCallback(function() {
Console.print("=== POPULATING WEBVIEW DATA (TIMER) ===");
Console.print("Current HISE zoom level: " + Settings.getZoomLevel());
// Now we call the updatePresetList function that is defined in the Javascript of the Webview
// (and tucked onto the global `window` object).
wv.callFunction("updatePresetList", userPresetObject);
// Also populate the left panel with expansion info
wv.callFunction("updateExpansionPanel", expansionInfo);
Console.print("=== WEBVIEW DATA POPULATED (TIMER) ===");
this.stopTimer();
});
initTimer.startTimer(500); // Wait 500ms for webview to be ready
}
// Add webview ready callback to ensure data is sent when webview is actually ready
wv.bindCallback("webviewReady", function(args)
{
Console.print("=== WEBVIEW READY CALLBACK TRIGGERED ===");
Console.print("Current HISE zoom level: " + Settings.getZoomLevel());
// Send data to webview now that it's confirmed ready
// HISE should handle webview scaling automatically
wv.callFunction("updatePresetList", userPresetObject);
wv.callFunction("updateExpansionPanel", expansionInfo);
Console.print("=== DATA SENT TO READY WEBVIEW ===");
});
// Note: Scale factor handling removed - letting HISE handle webview scaling natively
// The webview should automatically scale when HISE's zoom level changes
// Initialize the webview with a delay to ensure it's ready
startupTimer.setTimerCallback(function() {
Console.print("=== STARTING WEBVIEW INITIALIZATION ===");
initializeWebview();
this.stopTimer();
});
startupTimer.startTimer(200); // Wait 200ms before initializing
inline function onKnob1Control(component, value)
{
// This just simulates the communication from HISE -> WebView
// (the function window.updateValue() is defined in browser.js)
wv.callFunction("updateValue", value);
};
Content.getComponent("Knob1").setControlCallback(onKnob1Control);
// This binding will call the given function when the Webview is
// calling the loadUserPreset function (which happens in the onselection callback)
wv.bindCallback("loadUserPreset", function(args)
{
Console.print("LOAD FROM WEBVIEW");
Console.print("Args received: " + args);
Console.print("Args[0]: " + args[0]);
Console.print("Args[0] type: " + typeof args[0]);
Console.print("Checking if args[0] == '__REQUEST_CURRENT_PRESET__': " + (args[0] == "__REQUEST_CURRENT_PRESET__"));
// Check if this is a test from filter click
if (args[0] == "__FILTER_CLICKED_TEST__") {
Console.print("🎯 FILTER CLICKED - BROWSER CAN CALL HISE!");
return;
}
// Check if this is a request for current preset
if (args[0] == "__REQUEST_CURRENT_PRESET__") {
Console.print("=== REQUEST CURRENT PRESET FROM WEBVIEW ===");
Console.print("getUserPresetList() returned: " + Engine.getUserPresetList().length + " presets");
Console.print("uph object available: " + (typeof uph !== 'undefined'));
if (typeof uph !== 'undefined') {
Console.print("uph.getCurrentUserPresetFile available: " + (typeof uph.getCurrentUserPresetFile === 'function'));
Console.print("getCurrentUserPresetFile() result: " + uph.getCurrentUserPresetFile());
if (uph.getCurrentUserPresetFile()) {
Console.print("Sending back to webview: " + getEscapedFilePath(uph.getCurrentUserPresetFile()));
wv.callFunction("setSelectedPreset", getEscapedFilePath(uph.getCurrentUserPresetFile()));
} else {
Console.print("No current preset file found");
}
}
Console.print("=== END REQUEST CURRENT PRESET ===");
} else {
Engine.loadUserPreset(FileSystem.fromAbsolutePath(args[0]));
}
});
// This binding will call the given function when the Webview is
// calling the savePresetInHise function (which happens when saving a preset)
wv.bindCallback("savePresetInHise", function(args)
{
Console.print("=== SAVE PRESET CALLBACK TRIGGERED ===");
Console.print("SAVE FROM WEBVIEW");
Console.print("Args received: " + args);
Console.print("Args type: " + typeof args);
Console.print("Args length: " + (args ? args.length : "null"));
if (args && args.length > 0) {
var filePath = args[0];
Console.print("File path received: " + filePath);
// Create folder if the path contains a slash (indicating subfolder)
var userPresetsDirectory = FileSystem.getFolder(FileSystem.UserPresets);
Console.print("UserPresets directory: " + userPresetsDirectory.toString(0));
// Handle Windows/Mac path compatibility for folder detection
var normalizedPath = filePath.replace("\\", "/");
if (normalizedPath.contains("/")) {
var folder = normalizedPath.split("/")[0];
Console.print("Creating folder: " + folder);
var folderCreated = userPresetsDirectory.createDirectory(folder);
Console.print("Directory created: " + folderCreated);
}
// Create a File object from the path
var presetFile = userPresetsDirectory.getChildFile(filePath);
Console.print("Created file object: " + presetFile.toString(0));
// Save the current preset to this file (remove .preset extension for Engine.saveUserPreset)
var presetPath = presetFile.toString(0).replace(".preset", "");
Console.print("Preset path for Engine.saveUserPreset: " + presetPath);
// Call Engine.saveUserPreset with the path string
Engine.saveUserPreset(presetPath);
Console.print("✅ Engine.saveUserPreset() called successfully");
Console.print("✅ Preset save process completed");
} else {
Console.print("❌ Invalid preset data received");
Console.print("Expected: file path string");
Console.print("Received: " + args);
}
Console.print("=== END SAVE PRESET DEBUG ===");
});
// This binding will call the given function when the Webview is
// calling the overridePreset function (which happens when overriding current preset)
wv.bindCallback("overridePreset", function(args)
{
Console.print("=== OVERRIDE PRESET CALLBACK TRIGGERED ===");
Console.print("OVERRIDE FROM WEBVIEW");
// Get the current user preset file path
if (typeof uph !== 'undefined' && typeof uph.getCurrentUserPresetFile === 'function') {
var currentPresetFile = uph.getCurrentUserPresetFile();
Console.print("Current preset file: " + currentPresetFile);
if (currentPresetFile) {
// Extract the path without extension for Engine.saveUserPreset
var presetPath = currentPresetFile.toString(0).replace(".preset", "");
Console.print("Preset path for Engine.saveUserPreset: " + presetPath);
// Call Engine.saveUserPreset with the current preset path
Engine.saveUserPreset(presetPath);
Console.print("✅ Engine.saveUserPreset() called successfully for override");
Console.print("✅ Preset override process completed");
// Send success callback to webview
wv.callFunction("onOverrideSuccess", currentPresetFile.toString(0));
} else {
Console.print("❌ No current preset file found - cannot override");
wv.callFunction("onOverrideError", "No current preset selected");
}
} else {
Console.print("❌ UserPresetHandler not available");
wv.callFunction("onOverrideError", "UserPresetHandler not available");
}
Console.print("=== END OVERRIDE PRESET DEBUG ===");
});
// This will attach a WebView function call to anytime a user preset is loaded
// and will update the selection (window.setSelectedPreset is defined in browser.js)
uph.setPostCallback(function(presetFile)
{
Console.print("=== PRESET LOADED CALLBACK ===");
Console.print("Raw presetFile: " + presetFile);
Console.print("Type of presetFile: " + typeof presetFile);
Console.print("Escaped path: " + getEscapedFilePath(presetFile));
Console.print("=== END PRESET LOADED CALLBACK ===");
wv.callFunction("setSelectedPreset", getEscapedFilePath(presetFile));
});
// Handle request for current preset selection from webview
Console.print("=== BINDING REQUEST CURRENT PRESET CALLBACK ===");
wv.bindCallback("requestCurrentPreset", function(args)
{
Console.print("=== REQUEST CURRENT PRESET FROM WEBVIEW ===");
// Try to get current preset using Engine API
Console.print("getUserPresetList() returned: " + Engine.getUserPresetList().length + " presets");
// Try to get current preset file from uph
Console.print("uph object available: " + (typeof uph !== 'undefined'));
if (typeof uph !== 'undefined') {
Console.print("uph.getCurrentUserPresetFile available: " + (typeof uph.getCurrentUserPresetFile === 'function'));
Console.print("getCurrentUserPresetFile() result: " + uph.getCurrentUserPresetFile());
if (uph.getCurrentUserPresetFile()) {
Console.print("Sending back to webview: " + getEscapedFilePath(uph.getCurrentUserPresetFile()));
wv.callFunction("setSelectedPreset", getEscapedFilePath(uph.getCurrentUserPresetFile()));
} else {
Console.print("No current preset file found");
}
}
Console.print("=== END REQUEST CURRENT PRESET ===");
});
Console.print("=== REQUEST CURRENT PRESET CALLBACK BOUND ===");
// Trigger preset selection update when webview loads
// This handles the case where plugin reopens with a preset already loaded
Console.print("=== PRESET SELECTION HANDLED BY UPH CALLBACK ===");
// This is just a zoom factor combobox that demonstrates the correct scaling
// of the WebView - HISE handles webview scaling natively
inline function onZoomFactorControl(component, value)
{
if(value)
{
Settings.setZoomLevel(component.getItemText());
Console.print("Zoom changed to: " + component.getItemText() + " - HISE will handle webview scaling automatically");
}
};
Content.getComponent("ZoomFactor").setControlCallback(onZoomFactorControl);
Also make sure if offline you have persistance and cache enabled.
I also clear the exported_webviews folder from time to time
If it works in HISE it usually works in VST build aswell at least on my end.
The scaling and initializing bugs i had were both in HISE and build.
@HISEnberg I wanted to try if next if having webview dimeansions not fixed but using something dynamic like VH or REM like in web context would fix scaling.
No i was not able to solve this onfortunately - I shipped my VST without scaling. Which is a bummer but the issue kind of hit me last second and i did not ahve the time to do a ton of testing :)
The rest of the preset browser is working like a charm no issues there.
At the beginning of this thread it seemded to be fixed for @Casey-Kolb tho?
Since i have not seen so many webview browsers other than HISE example does this issue also occur on your end? @HISEnberg
@Chazrox We used sample robot to do the multisample recordings. It essentially plays MIDI and records/ crops the receiving sounds. That way it is also possible to have some analog end of chain effects - or make monophonic synths polyphonic. :)
@lacroix The samples took nearly a year - the development was around 4 months i would says :)
@HISEnberg we have MIDI scripts but you are able to bypass them (glide and pitch envelope)
Good to know that there is no issue on your end.
A single wavegen work fine.
I will remove more and more from my project to see what causes this.
Strange is that is only on one OS in one DAW.
@d-healey Somehow I have to compensate for my poor programming skills :)
thank you!
Today my partner Viom (Producer) and I released our first VST instrument.
You can see it in action here:
www.eraformaudio.com
Completely build in/with HISE :)
I usually create fairly basic effect plugins over here (also HISE)
Thanks for everyone who answered my thousand questions about expansions and webview :)
Hope you find this post interesting! best, Julian
@HISEnberg Good idea! and +1 for the FLStudio impressions free = lots of users :)
Enabling "keep focus" did not change the behaviour.
@Christoph-Hart said in WIN FL Studio: Notes cut when playing with PC-Keyboard:
Am I understanding this correctly and we are talking about playing notes on the actual computer keyboard?
Yes the common FL-Studio user is producing on a laptop. +30.000-70.000 users each DAY
So we have a couple million potential users that produce like that :)
@Christoph-Hart said in WIN FL Studio: Notes cut when playing with PC-Keyboard:
Have you checked whether this happens with other plugins too? Some computers do not allow more than two keys pressed at the same time, maybe it's a system wide issue?
The issue only exists in this combination WIN and FL Studio - it does not occur on other plugins. We have tested on 3 different WIN - FL studio builds so far.
I can provide some more varied testing (variable generators/adsrs/projects) after tomorrows launch.