How to use panels to switch between groups of samplers?

cadrose

Im new to Hise and learning as I go, huge thanks to d-healey for the youtube videos!

I am trying to create a toggle switch that switches between 4 panels that have images displayed within them.
I would ideally have this switch between 4 containers that have multiple samplers within them. I would imagine by bypassing the containers in a similar way to how the panels are being displayed and hidden when clicked. Ive tried adding buttons within the panels that bypass the containers but it breaks.
any help would be hugely appreciated.
Thanks

HiseSnippet 2544.3oc6b0sTajbEdFfgEo0r05MakJWjelB6sJQAVnYFAXBYWK.IvrFLpjXcryVaozLpkTWdzLploEXVWtxM4IHOA4QH2mKRdJx0ad.RU9pbK4z8LiTOBg7.FiV1LtJWlyo+666z8oOmSijK65Xh87bbkjSc3ocvRx2Qo5o1zVa0BQrk1snj7OWYWaJ1sAxDq5cBgZ1RUKaNoMOsCxyCWWRVdxcX8UN0TR7+71GsIxBYah6qRR5YNDS7dj1DZeskK7Dhk01n53CIsE5c9B6Z5XukikSW.WSpjSpCx7knl3mhXcaBEI4oKUmPcbqRQTrmj7Ta5T+zpsbNw1u+Oi3QNxByDzjpBSju5scrpyPLSqzVsHV0KGxeOII4Opbeqwj9ViOWYeRcRO88sJeJuA09iPzdHOQT3MYD3oIBubBvaHPRV.RS4Co6pT0zkzg1uEFd9396RQfheekl3eMsxVNPOroYaidIdaWPn2HxjOWtEUWMWt4WO8roAauGU8XjqZGjM1xS8KU+1ua8YgVZ33plg.xZqqRT+cpKC+yBKLu5qmMsJ7G+t+sjGn8cPeBWtlX5VNs63XCBYlqLqOys.Y90O2Xx5AVH1nbcrxz.Y4gA37F+tMaZFdL655ByBeNfU3AZbTQrsH1X0FcsMoDGaUG6M6RoN1ZgykY3xuHvJqt34mMc.hIMTyvUo9k.o5QjvlhrdeErdyGhWwVFJvUWZoGSpiU63hOl3z0yef8m9AnRzkZAFV9hf0JqE1tIsEaF224XrJ0Q0F+JpJwtN9U8mv2Ivntc8wE6fne24CFrvugaGG9FVfsbt4y5wzymqsPVVGAtjYFzTCaXoWZIeRraavi0aokRqBp3BpZfT+SW7toM5SJv5tdZ+ehs9kA2OZEmtTXCOS3Fdllym90oSEzKKGTc9pkYtWWtxAecosNr11GrWwRUdygXWWXBzx90k2YtEUmKTlsFoSwfDBPCsEwiAk8bLQVa5z0ttWFliQpzoZlstK5jfYu2nWTEsnJ3+.cRM8ale8T83q944q9n4qdO9pGK9pGC9pO.e0eu3qtHeSw3aO5Zbd5ZLZ5ZzitFwhtFwftFCPWi2K5ZDktuK9lez7MeO9lOV7MeL3a9A3a92K9leH7Et3u+cqO0ghOvNCGioeSZ0AapQig1VvEDVX2g1LKA.2QMvL1caeD1M7F7vNBQEiFpU4hC0JlIfo+djPGcr20lPOnC19hxOPJXiEBKOQ.pftR4Ak+jffx9WGJQfXuoTBtaThCYwjgjtngW0BhY3xG9Go7DamiF1f+lcKhnHVxAA.B.YGrKkv3ubQHdiI1OUgTJEwduj5zARXp2QQHWA+Ec1vDIXmz3q4LJ9WhJ8JwE7zdB+P2BmPpSa0Swe8zBsvjlsnhcgPwsCSdK0zRRmki0Pes5hp6DZf2s9ElpYGjKj3GzvtbL5mdizwg6rxSJcIHm90I4NS5qFF4NSZwyStzJUQs6.N.5QITJkR1HfH0uHFMy6fQFWqaWmcugtcclOiDwUp2Atxe8hq+yvw0+kqdzGFFo2o.He6+nOHeKf.u8cZCyCxETKOQTLKMLL2fX01iBKE+RUI4eixfWZeDTYzKU6X2LK72AYycu6c4yDExuS3P1Ymw0dTyyqSjrJuy6Rtf8i+oaAOJtSUx2GdQSg+82+mejz4q8.p5wodWKDMZoPr5+BZ.tzNR8GLGZaOB8Tw5Cu1pOJtP7tJkY2lLbLNwPvH6N9O.XLnpxYUJ0nA1j1GfSor8y+vTBo3x+K8W9OSoJ0EiZSraFbkDGC8tfR65n39Nwt39xtXVVNBG+XmIKrYWvF4FU6eq.eo1nMjGSj0J.4UvcvHJrMKLlYJToxNtNc6L3nd6i3GJNzEpjALEhMbfMFr0TQNtkqimWCfN74xSroxccaxrU80TAeL10Kptm1sMreaypRC7UkkYQx8vr8Wh49H3RiHdm7UI2gH9d7DJ9xZCHqOfrw.x4GPd4AjWY.4U6KKqD872LwKup8Qc328KzyMIAmxf170H9LLG.FpiI3SD00yTygivy5LjGHY5OTuYyTwygazOozsfqPi7DSoBwXUBaGqj8wfqInggwOCRlrApqEMTazqI12w1oSKGahYTGA3fcylXWQrOTBsAkB9g8074EpfsvHOAO46WXOnPIjaT+6KksP6R+baCc+5Wn3CWU1capuO6a2nGyFYXvIiUXvqc7d0CIdiZ59jffipvp6R+Q997cT3Wmqxh9Ntfp+yZzLLxlBD9qJDx2DKFDbBVfUe4bLYFfphsqyEfbbOKnQsvHlrF0BaTxLbp.tE7y7RikmDGTREjcmEDK1R7HsGjXACRPTNIO9lZaVjI49Q3QsaihXglwuePXvJNrzBTjq.MrmySvmxD1CDdLIPvukmwVSeB8XRfvehYV7yEIjOaSrB9sZb34JUnJ5Up6ZCkSzkUDhp+4OOPUcxwj5cQVdKUcimWamJk0LpU8aJWoV0C19PsZabu70V9gYOAcrTwtcrHlv1JyPHcNR7GEIwePjDlWMRT8ZiDasRsU0iCGLD4vBhbvXbuQT7d50zWMNj3QhjXMQR7nwOILpYrVbHwSDIQIQR7jwOI.WBs3PhWHRhphj3EiaWhsWt1JKGGN7PQNjWjCObbuQrC3RXDK+5hhjnfHIJN9IgQs74GBIt7kZqmTpcRo1IkZmTp8nK0VOoT6jRsSJ0NoT6e5Wp8zmKSvRhYB9aEyDrzUKSvJuOYBVayMpT4E7LAqsAjGXrxHupHE1WjBOeLSgMgBihU0c2WjB+ZQJb+wLE1RqlVrJoPWjBKJRg0FyTnndM8UhCE1SjBaKRg8FyTnDbPJV6BKHRguPjBKLlovNvAo0FcYcybAeHouC+SWKHci+aOUdxQ8AfJVeTnGVgAI4+eKHOxItskG40SoS8cB4kNsiPhibEpLMWna3O7W964JTDaghXz98Q+v87hBCwQcWnZLWZYGKj6fl7IutJKZpXetfQoaO0CwJoEL42l.L+HwsG.+orO0c+H.t2DUiHXR9Uw6gVMRdn0+u+gV681nrSFrGdcpjGdM4gWG4CuZj7vqIO7ZxCul7vq2he30KexR4SRVJIYojjkRRV5xkrT9jjkRRVJIYojjktEmrzMAJuIVi1HSWmZl9eOyY1iY3Z.KgM+WZVJk8Yxp89BlOsxZ4xlSpMDPrloIya6AZLqX32a+5058sVVR9iYeqRG341EZ1++xdBDq4ufSyinAyuM6KH7CzxwWMzqXsXrB7yVNmHzRKRyV8Zx6kXnselhdV8kyqmeMCiUysbN8GZHw9dqx5FLDMIB+848OBlSBRvstis0oAGHGN80Couhx4Y+ELFiqvXxeEFyxWgwrxUXLqdEFyCG4XXYUsQWpSa+XJfhxk78CkK0yObRo+GfuLtJ4

Screenshot 2024-05-27 at 19.15.04.png

d.healey

@cadrose use midi muters instead of bypassing modules, this way you won't get audio dropouts when switching

cadrose

@d-healey ahh yes this makes sense, thanks, would you be able to point me in the right direction as to how I could approach scripting the midi mutes to disengage when a panel is shown and reengage when the panel is hidden?
Thanks

d.healey

@cadrose Start with this tutorial for creating a tabbed interface - https://youtu.be/_s7LTRz8pEc

Then all you need to do is set the midi muters from the button callbacks.

cadrose

@d-healey ahh yes Ive watched this video a few times now, very helpful!
one thing that Im struggling with is I'm trying to achieve this functionality with one invisible button over the panels. Should I be using inline functions with if, else statements to control the midi mutes? Ive tried a bunch of ways but had no luck

d.healey

@cadrose said in How to use panels to switch between groups of samplers?:

functionality with one invisible button over the panels

Why?

cadrose

@d-healey So the idea is when you click on the panel the image changes and each image represents a different set of samples Like so:
https://www.youtube.com/watch?v=kIcjBmqocYc

Ive managed to get the rough functionality of the ui thanks to the info youve shared, however im struggling with getting the one button to control the midi mutes in the same way its showing and hiding the panels

d.healey

@cadrose said in How to use panels to switch between groups of samplers?:

So the idea is when you click on the panel

Why do you need a button? Just click the panel.

cadrose

@d-healey apologies i'm not the best at explaining things.. Im using the button to toggle between the 4 panels which im currently using as background images.
the idea is the whole bottom half of the UI is one big button that will allow the user to toggle through different sets of samplers using the midi mutes.

d.healey

@cadrose Ah I see. You need to get the references to your midi muters in an array. Then you can use the same index you are using for the panels to control the muters. In your callback you want to loop through the muters and mute all except the one for the selected index.

cadrose

@d-healey ahh ok with ya! thanks, this is very helpful!
do you have something on your YT channel that covers this?
In your callback you want to loop through the muters and mute all except the one for the selected index.

d.healey

@cadrose It's covered in this one (jump to the Scripting Samplers section if you don't want to watch the whole thing - but you might miss some context).

https://youtu.be/dG-7K8cZoLI?si=cLIRgJfIgOCPO6Ah

cadrose

@d-healey Hey, Ive watched this video and many more a bunch of times, but I'm still struggling to get my head around (in your callback you want to loop through the muters and mute all except the one for the selected index.) I feel I may have bitten off more than I can chew for a first instrument idea.

Content.makeFrontInterface(400, 700);

const var panels = [];

for (i = 1; i < 5; i++) {
    panels[i-1] = Content.getComponent("Panel"+i);
    panels[i-1].showControl(false);
}
    
var currentPanel = -1;
inline function onButton1Control(component, value)
{
    if (value == 1) {
        if (currentPanel > -1) panels[currentPanel].showControl(false); //Hide previous panel
        currentPanel = (currentPanel + 1) % panels.length; //Move to next index
        panels[currentPanel].showControl(true); //Show panel
    }
};

Content.getComponent("Button1").setControlCallback(onButton1Control);

const var muters = [];
muters [0] = Synth.getMidiProcessor("MidiMuter1");
muters [1] = Synth.getMidiProcessor("MidiMuter2");

if (panels ) muters.Synth.setAttribute(muters.ignorebutton, 1);

d.healey

@cadrose

Here's a simple example

HiseSnippet 1311.3oc6Y8+SaaDE+bBtqIsisNUMse7JZRKnVAIgttIwpZf.TEMBjQnrIU0Ucw9bxINemm8YVPSHs+D2+HSp+Gr8NamXaHjEhz1DsI+.j22e26du2mSJc7kVzf.oOxnzwm6QQF22r64B0flCHLAp0NHikMaSBTTebLqsO2iDDPsQFFEeolgQokPQed2K1lvIBKZJKD5DIyhtOykoR41ow2y378H1ziYtYz9oMZYIEMkbYHjOEMqh7HVmR5SOfnUqfIx3N6ZyTR+tJhhF.5rsz97tCj+pHV+SXArdbplnFpK3nX1nlCXb6NiNqAHjwG0I8jWL9j+Py1La1X9oUfOMR.N0hr0.iBSKkpcCRIiLozRwozCL6Z4y7ToRz4y8LaIfKDGBTpylJw5hJ7mELaJAMDp0bImR2yGHFaQkmUs5SvveVcyxkgxcfB6FBxZYGfeNN5tes9TUK68YApJqnO4s0xWAzOi5Zke8a.W3H8wUFhYhwtY0xkhUYMuvfAUF6xbU2JCWUm.qu9iv8TBcDR7dBE39QmAvzs37lRWOo.nCprRhN5TJS7S3Bge3ZATk1beIuIgy6AsQUjhDERD.FWpLSvYBJ1ITXoXRA9xJUwZTXeB9LBOD79uUtDWZQ3PHsoCg7Lwh0hnOzI0jnHTJJAYfdU2Dyve2X04TQe0.f2ieLjxfWSpZul8Fc5ukR4y5Abpjxl0WH8oaGpTRwS.m8nmGmDqtId80wGK62mSiuF9p.brx3dQZCdOItIt+D8gQmV4cQnOTCbbvR0.XhO11fxktn7EYJQGHUzCEUhJEkunL9xhbblnrjRJm5OQw5cA9SyvJhP2dT+rWDZEggk7Sf2Y1l.shauxnnTzRvTG5QSn2Sxs0SV5ue04UTR+I7sW0ZGhhnGgS3A54Q8ULc5XrC8LXGX7.cIycnAmpjdfWG2QCorJR5xIi6w2vHFD6xlI2aUQCGuo72+gFmmkHfbFskniOEtX0KBTzgv+uqYzfjdWyMJR0ttHg94oGoZ2zHU+5hTC5ziTc.D4JKKg0zR6PNQke2sFjJQ.zNkagodonHfoNOKH1MXgd0otPeVSwGX1gorFL4brvDxQnQ6eibLAF7iM20wgZoRSvkL26mlWLuYO7KGG96Y1E1HGAZDE7OOhF+iP6.9kTA0WW7pMkmg7Gy5yP7l4mgbnkBB+w9DQfmLHmi6RcYGCc7AYY9p..zk9KGouMyxuoj3OQQu6E6AGxIZSWhJzOpsXKWYnPkqMnX96gklsMe4mHxn+DdTxR+O7Nopy96jJNpoY76Thxj6mRmuU4xUr490Zoa+MJjfOApdsq7V1LK1MJBAK60OZF7wmX5vF1UEZcpFkM3xNAcaXmXtKuRixwtLWONcWwYTNfaFkieF.T5PB4pQbyeO1VJjdCjBlU1BvQT3MS86S8yl6S7.AutBdSXJmG13HJmRxNa+kM1GlII9PchNm0ha9C9m380WXFmtX8dJ7sWrrhueikcjLTwD8aSflP3cMlGD51EfPrnPzEBJGbtoQA8piX5pZ5XLDgcDweAeRDVSSajHr1HgyKdY8E3kKvKmM7x5KvKeu.ur9B7xE3kKvKmO7xMVfWt.ub1vK23V.dYh6VfWNE7xMVfWt.u7Cd7x+KhgKwxW9Vq3ER59z6FwAN2hnem2Rls0z3ZWcCjKr08sVV4c0ULr97Z3FyqgOcdM7qmWCe17Z32LuF9s+yFpAE2JTIciGMQn1c1M5WFyvXWAA5xilHP+MjTnrn

cadrose

@cadrose Hey Dave,
Thanks for your patients. This snippet has helped a lot! The one thing I still seem to be having an issue with is when I try to index to the panels array it breaks.

HiseSnippet 2431.3oc6Z01aSrbEd2DVD1bCsftppenpctAtpNJAauqcHPobIu4DxkDhkctHnHj6lcGaOJq2Y0tylWJJp+U5Og9On8mR+CTI9T+Z5Y1Wm0wXVBo3VZhDhLm4smm4bly9bFnoK0.64QckjKr2INXI4uQo8I1r9q0WmXKs05Rx+BksrYX2t5FXj2QDlQejZ4pRqdhitmG1TRVd5M4iUtv0jB948OcUcKcaCbpIIoWRIF3sICHrTqMW94DKqMzMw6QFHL55KukA0dMpE0Gv0zJUkbzMNPuG9E57gMkhj70aXRXT21LcF1SRVYUp4Is6SOxNb7uj3Q12ByanJ0FVnPyaPsL4Hlac2CwtGRvGIZSZs9DKylwmIdRvF0L8DZ5vSnuUYGhIIwd5I0OOnCT5LDOijmJKjmNCjUEgbUAHOBHIK.oqEBoaqz1vk3vR6gimal54x.kvwJM0cJnrFEFgMq7.8Cva3BMRlQo5Uqt.ZopUm6wEmoH3O7XnC0cQN51XKOzSPu4sOdFnmtTWTIBzV8wHB52iVD9q4meNz6loHB9Ib3ugbe02BiId65gYqQG3PsgFklsIeLyNOYtGet4T1CNg3yxkZUpqtkGFfyogCalhb7X365BqRvZ.6v8UgEgXaQrwnt91FLB0FQsW0mwn1pwqjQ7lu.vIKe7byTLBujtnRAlPOAnTBMh6Jyt8CvtMWLZE6YjvFUoxyHlXjiK9PB02KbhoK+PDI6VMOGKeezdU1Ba2i0muh6PODiXTjM9XFhXahONcA+n.i45GhKdXX3vClLb9dZfucztqnyxYmqrG2dvZsltk09vkzRCeTCtqhQQOC7gPqsL4wNAoX3K6VlaS7f0jewYGd+yBSPX3QAZECCyNFnXxxLWwBgCoriuW+RIKYlKmkNdNNBpT46P6yr46PzpG0JaL4JVVI7zSfnY1+nYBa+w47.n.r+e5gjvjdG7mBVTCcqPeKf13Pff161McZA6SgjaiUCuMFA1jHF9UyhEdWwBQmcug7VNIVgwbI6CVJkZlzyl5hCQ4Bvh8cOIDDAQLn8n85YgCcF+VOT3fQ6GLZX0qTIZmi1fWxoDGXYWDeW3jnaWDk0G6FMauhENE38oEi9oRkvq.aM.9BfWkJEQfofFHUnUZlofgoN9rLANyveiCqlPpaVKpOC7Mkh8Mk5MWQ3DJZTVTcyfcqzruqYqc+wFqsWmM1c60az5z8vttvBnV9Gat4rKflMtcP.SANjzAzv5S73PYatebUpusoWopgdqdkMc0OJZ0Sl8BH8EPPtWXPnhmN2iKjvWsyyWswyWsD9pkK9pkC9pMDe09r3qlHeKv4aBcqcd5Va7zsVBcqkK5VKGzs1Pzs1mEcqkkteL9Ve77sdBeqmK9VOG7s9P7s9mEeqOB9BhFRSC9BJCuqco.LV7zhng6pa2Q1WTZSKr6H6lKnzcbSrjs+f8wtIIaiFHnnZbJKU+PJKMB8QBCjZukMgsqC19CosTJxwxkzEgJXnr.Ac2JRPWX5WIBnaqfRzWLjBfrn3ZoeZq00Y5wKD+q8tTGrKivof75ffCCbnRwBJqi8NfQc.pkDMIIWLbamIVGIOXIXWugRXdPoiE2vSRZ7O7W9HhIqehg+xIK2GS50mINDBCOHVOegqKIcVUdGoV0DM6DeFskIubjDoApPY.tPE.Ae9myjF15fqvjePlPja9QHhlHQd+S+7HxYR+vnHxYRKbdhTTos9.GHdU6CQiCiCsjmVjQE9HLp1kpq4r6NRWyYgL5BBw5WtP7eNZH9uFGDuYNtWIFY72x.Rh2NzAv5n6BlkmJKlkFEl6RrF3AhpbBRGJI+aTFNc69PMxGfbr6UF9yvr41291AqDCz0KDuc1YAV2u24sIc9pBg5Qol9V5rrEoxqVOpCHkXlJC4U+Y6QXmHdGY3JWuV9pbc7EVmW3dakl7mbXz3cpQfWHI3+owaz6.LiRitcwFrTvdMkMd0XK5+RGJ+pPnbGk1LWr9.hcunrLA3IImi5kwy03j6mqooKlqynM4OILr+9xq5CmWtYs9WWNXqVY.njHydEg7VXGrNCb+By4FK2p0ltTemgm06eZPvxdtPgXvQgXG6ZigyclHGWyk540EnSvZ4I1USe2d7ypTKsvGB0Ek01K7G.9dad8XvWSkk4eH1Cy80DiczgK+Yx5ErKU2SOveOkRXa0gZqMT6ZC0t9PsWbn1OXn1Kk1VVIar3MxmxlczcBxgKLxUIQQYPegVF+CqUM8nN.NBOT2+68haQP5lo5RBPRFcJYPwz4FEpiEEBxEmJGxEukhXA7iPyXNVielRWxwsY9FGvkh6MhE4K1GctbbdEhwXaBO9sg8gPhJvBGi2ATF2U22hEaMqebGpM0oO0lXjMs.bMuWOrqH1GIgVgwfrRoV91kagsv5dBmm2a4sgB2zcyls6S5rP8S9oiGo+5WpDBWDOSO5qCwBS++8hEF2Q2shjJffc2k8e494uQI3iaHtVjIETCelkdwemWADCzFD.YfEkDLEOOaX6p71b.0FaaFz.TteVTmpw5G3cpF2ojQ7RAbK52CpyWdZbTMifFXKPYhkXHsGHyhCI3a9RdAN0A7uSKmp2Qev.8LmP2HbbfnfVTtHIE4VPGaSeN9DdisgFOiD0HrmWx2yPB8LRTi+L+XITYVLe1fXE8uZ2dmq.n15Gi1xFJRxmWZEJL9yCLYRNjX5qa4Uo8JupylsZpVqS6epYqNs2ci8T6rxcq2YwGV9H8CkV22whX.t0fx8NGI9ihj3OHRBiKFIZeoQh0dPmkzxCGpIxg4E4PsIsiX86p0Qao7PhmJRhGIRhmN4IQsN0dTdHwyEIQCQR77IOIfqDp4gDuVjDsEIwqmzWI1XwNOXw7vgGJxg5hb3gSZGwlvUhZ45d85hjXYQRr9jmD05Tu9HHwm9COnc0COb0COb0CO7k4gGzt5gG9p3gGzt5gGt5gGt5gGt5gG95+gGt94zE2PTW7uSTWbiKlt3VeN5h6r5JsZ85.cwcVATEmq5SZKRgcDovqlvTXUnLwbUq68DovuVjB2aBSg0T6nlqBrzDovBhT3QSXJrtVGsGjGJrsHE1PjBaOgoPCHPJWdg4Eov2KRg4mvTXSHPZT2E9RjecftgKsiQnPXdV1aDXAxuZGPxBJ6vaiR9+500UdT0xUkF.R86XXv+F98gONL5IoEOIEkbOmZWf4T+BLmEu.y4AWf4rzEXNObrygWk0J9L5fP8cfglMB+lnbijuINsz+F8zryuA

Im assuming its clashing with the first inline function? I'm not sure

Ive currently commented out the second inline function that is causing the issue. Any help is hugely appreciated.

d.healey

@cadrose You should load your images into your panels within on init, not within the paint routine. The paint routine is continually fired every time the UI refreshes, on init only happens once, and the images only need to be loaded once.

Then you should refactor your code a little so you are using a single paint routine for all the panels - since they are all doing exactly the same thing there's no need to duplicate the code.

How to use panels to switch between groups of samplers?

28

1.8k

10.2k

89.6k