Trying to make a template with 6 tabs / pages

[SteveRiggs]

Hi all,

I'm trying to make a template that has 6 tabs / pages to start from each time I make a new project.

I started with this code that @Christoph-Hart put up on this thread: https://forum.hise.audio/topic/117/multiple-interfaces

HiseSnippet1098.3ocsW0taaaCEkJIpaVatXsnO.p9WN.YNxzsNIMXnsNqoHKKIdyAAEXHniVh1lHRjFTTIKqHOD6MsuAaWpOr7GxIVAX5GFl268Pd3kGp6UckBWZXnPhL9tyucLEY78l8tkqFcvHBiiN5mQFO07DRnhJsSL041wjvPpGxvX8OpMXTYCT7yWeaGhOg6RyMgPWHXtzekEvT4V+y2cLy2+PhG8bVvTQ+p2cjqfefvWDA7YcSGzXh6UjgzSI5vVyDcMidSHxvwrEtg7pl8+622.dX+l5lNW7ZZiFcOtwjmq4iis1oQCjajTR4pK.3HCSi+EdLL+fGSIj8TDEElyM5H7ts2HwMb8R2DcAKj02mlLnGvoDFcDGRECHtzIg5fPGLh460MKUFhfYqadhc8jD6KLOg4wlXOOA+CwNryQLcJ1XsGEMOT36omfkPOion2FIz6Yl8bkrwpbOZt87TqKgcINQq8OOw7.AjY3pFAjqnGJgASxT0a43rkM7yl6W0ppkEbFGprulHs6Oro8OYmgj340kvo90qA1qskcLnM22Z6ss+ieo2YmpC+RqrnCoZpNlJULZHrfA5Pxf9kpV110tg4oFU6M5kdqXCinrgiTfE7NoVXJZPhfKNtVsauSam8ZOuSr1aqc2cu81ocKbUq6Ro0147JeWcLWzet8k1T8ZwN.1gWXmE64A2aY3S1ciIZI8AhfwBN7Gfgwa94IW5TmSuyIyytNQJkfWul1SRdeFxoM+fbKEaB0jDOl3iRQzXMqVjSIy3LTBuTJggosYqBHEdUHEtLjBe4LhS7RDm3hEm3UPbhWMw4hJL77JL7xTX3TEVSmEjX3URhgueIFtPIF9xAQbWESvsE7SEJ5Y75aZ8EqJV2YMumACJxklYRguOUVjWckB48.qNOJnOUtEje7inwwEdCS4NJ0wlUsp.1p3RBo5KruA9udbEXabDODxC19hgLW6QTITHog1UeIkb09v+tKCX7koXnU0ATZ7ZgeNbfF5yg50tN4k30xX+9otwy69ko9eLKL9dW3W9.q7CuvSxHKt5v783y2kDJPi6.EBT5a1BmVqVgS2j6GSEnfeDmoNaLcx3D4clEGzDY8zlxkySaMVFWPX4lVrZMJ8NqtshzvgPUwUseZZ84d9LOpDwfpxeiYrJEEehMcqXnkAN4kswfehoVhlg0znT3vyule8snUlv3BH7hco.8JI7h7IpYafR2HZpC3sByzhhtMDdHSc6zzpDcU4TXWUMK5bZEo6yL6pewTw7csB3Kbv++MeS6Qsp4GFLf5pxI6FlG9oGaCokfJ+tHRw3COgnjr+BDdmFEzC56xkBLgCkcC0hw0zZwjwNYhydTtmSVO8oNapGaj5rYlST.wUJ9rahfT2E72FaA3DO96Kp.enCL1dh7Wy6.n07O65pSD+Hv7hQfKMhVkFwqJMhWWZDsKMhcJMhcuGD5uC58QJQPx0BD5+.qLuud

... but I can't seem to work out how I would add more tabs / pages properly.

I've tried copying and pasting the second half of the code and changing the values from "tab2" and "bg2" to "tab3" and bg3" and then off-setting the x axis value so the buttons are properly spaced in a line, but after hitting compile in the script editor, the new components are added into the list but the knob and background image from the 3rd tab / page show up in both tab 1, tab 2, and tab 3, and the knob and background from tab 1 show up in both 1 and 3.

Here is my edited code snippet below. Any idea what I'm doing wrong?

Thanks again

HiseSnippet 1748.3oc4Y0raaaDDlzxzwRMJnIHG5kFvHzB3fl5HQ5Hamfh33eRfapsErbBBPgQ5ZxURKL0tDjKsiafuzmndo2649zj2f1YWRJRJQ8CcRaJZ0ACtyreb91YFN6rqa4wrv99LOE0xGcgKVQ85Zsufx6sUODgpr61Jp2Qau.GNw0AqeD5DecD0VuEpK1W+HrOWYyKbQ99XaEU0ROWfQs77Jxeu+IahbPTKbhHEkWwHV3efzmvSj9Sa7BhiyyP13iH8SM6U1XWKFcKlCK.3WIs5JtHqSASuORLs4zTTWXGaBm40li3XeE042jYeQ6dryogy+UDexINXwfFJsgWTn3mwbrELV7rxV8HN1sh8C9JJpZsR7JkB8J2VaOhMYf7DuymKUnmfHs+PctIQuFooW8Ymdpon27gz6lZss7Ht7DMBtcqHoigcgJUl67E01hQ4XJe49nSwOyCFrKL1qCxBuzZ0qee8l0qeuGWsR0JUf.hOW+Ljm9Ican+c5wHQ11sPTryR0.40tuN.xDvT4AOP+G+91GruX5GWId19XAUcwdbB1GLXewThg9tpUz0qcNwl2q1izE1WJnGlzsGGjzLVBgi6Glc.RMqa1r4pMqudygUZHzZt1Zqu9pMMMpV4xHZ8fDdkrpdAkcxPqKgnkpIU.ryXjUlTyTWaw3CWctHOXtaw56xnvC.CkK9gIWzqNgdvWfCwtMC3bFcoZBMg98LjSHdpbKBaH07P1D1y8XAtBVMJmjTXm829XQ9PlLBPiwXImAXfFl4POiYgdFEgdFGmIM0XLooF4mlZLCooFyVZ5n4ZFCmqYLtbsA9qF0GIayXlx1Llb1lQtYaFoBsUyFaMGar0T7cQybhslyRr0rHwVyrwVywDaMyO1ZNCwVyqZr0b3Xq43hslQ0QxIzZNSgVyIGZMyMzZdbm.pEmvn5L59LN9.5R2qx6pTtxkUFVSmN4oRvLOliC1KOshMu8l.rknA8OA6cev+3Dfkyy+bB2pWjh6UsRYPVYKjOVTV9QvyhwkgkwtTevOn6v5Rrz6g8vKu7xBUm3gQm9X3oKiAJKYJgVULgBiWTdKANPCQbXoZmEtUcsX1+3H0FCq9tQ5uJF1XhF9tSwxS2vC7HiZc38c082EDJPiKgLDn6krsGoM91iR28lU32GolHitKkvOvEGMdzllTh9nBZeZgnzQXpbYyS2HpMo1NDarmBAZN5ZZxzHEoKMc6qJiCbX0PI3EzD4PwX0TKDNiqHNyg456ehxLuPMJvBcDvl4.9k6tMhiD8pF42SJjAx1FeFbHfvNWKqsM1+TNyUFXhphontXnQqF2WqnttzlZZvWFJuM1+bg3g6.OHqUCutEzKERgvZ0BIudtPIIcDJjBB9srRMhD+GBwBlOfMZSMQQRnamlPCUXNl4JojrvzRgxtLEOjrCYXlNG+V3E8YZ6AmGQdprhX.iPC7KS2.2PamNcvVb+Qsg1zxKk1Xd0IXizutqMo.uwUKveVbcjjLzBEdG1OYOtvqQdd+7WJlWskRg3s4Pokik2lJJidlR3jsL6.GDO6wcEmwORAr6dlCTJNzH0mvuHcUnO3y.ma47Yjt2TqknAi746b4vWvC+2MeitQgpQeRkP140d1q+3d8ASiJeYHUtkVaNr4beBsaaTeWn8NIepnEMpwGiK4wclujmVdXGFxtM4mSMseeiMC.+kWVo+5FRS8z9r.ZFaEw7CwtXDGB+ovr3FGdnr3yvnd+SjIKG4grNEbEoUb.EC9cd503VdLe+NvxQ9t7SqpUfWWguJQxg3yvd9YksePeH1SghBhVeTEkBdoOVDqIV6g3dj2ld1RqTGJnJh2eslwJKm82YG.+oy2Hdb8sjiCgzn3PLJNDyhCYkhC4gEGRyhCY0BAILQaOjq3KFwMRNTOsWa15oEdAx8GRMyMIcG7xCkjszapoNHWTR8T2+YN2d3BeBtbyFezKr+guOToYqX5Tt+0xwbrMQDp1gdFT6BjDd8qai6fBb3wRyVGcOFk41iQIVYqT.e42sK1KM2ycA8TNGJTkH41abH1ACGIKQzWswOPnXjW1BfExWzX18ESJd8EZgzUWT7W++F8OT5+88OLIW2Mh5dPGrtG+e4w4qqIK8qKZO4SEUOjEvg1Nh25WC5OnMzSjENcWBhiADMtd74GZio1xA+I7KRYi3VJDJaDqTwJ9UAqsnmkGTWsDlJ15P1VrCzrhS5TZenyKAkfs29Ggk8QVdr2XEdADBttnTBvRp7e7WY33tvX8A2whv61G1o5MVVhOC9Vv+lOBiBivrvHVovHdXgQzrvHVsvHVaBHDsE7z.NqeXQQPPqcBSjT2YPhTIk+BnYjqeI

[Dan Korneff]

@SteveRiggs I'm not at a computer for a bit, but I suspect that the original code puts all the components for each page within separate arrays, and then calls the array with a button. If your new components aren't part of an array, they will stay visible.

[d.healey]

That thread is old. Here is what you need to do.

Add one panel to your interface for every "tab" that you want.

Add one button for every panel.

Store a reference to each of the panels in an array. Store a reference to each button in an array.

Make a custom callback function and assign it to all of the buttons.

In that callback function you need to use array.index() to get the array index of the button that was clicked.

Then hide all of the panels using the Panel.showControl() function, and display just the panel with the same array index as the button that was clicked.

In last month's Patreon tutorial video I covered a version of this, except instead of hiding/showing panels I changed the text of a label. But you can easily modify it for our purpose.

That tutorial is now public on Patreon.

There's a poll on my Patreon page at the moment for next month's video. Tabbed interfaces is one of the topics you can vote for

[SteveRiggs]

@d-healey @dustbro Thanks guys. I'm not familiar with how arrays work yet but I'll check out the video now and try and work it out

[Dan Korneff]

@SteveRiggs I highly recommend @d-healey video

[SteveRiggs]

@dustbro Ok nice one. Just put it on now. Will put my feet up for a bit

[SteveRiggs]

@d-healey

Hi again mate,

I just watched the tutorial video through again and tried to follow along so I could apply the steps to making tabs and panels for the pages I need but I've made a total hash of it and I'm stuck again (sorry about this!)

I just joined up on your Patreon and voted for the tabs video, and I'm going to check out the scripting 101 video next, as its clear I have a lot of learning to do still on the scripting side.

I'll put a snippet below of what I have so far. It's probably total rubbish and loads of stuff missing but I can't work it out.

My script watch table list doesn't seem to be showing up either which has confused me a bit as I cant check if the right buttons and panels have been saved into array lists.

I've put all 6 of my buttons in radio group 1. Not sure if that's the correct thing to do but I figured I won't need all the buttons turned off at any point so maybe it was easier to do it that way around?

Heres the snippet anyway. Any idea what I'm doing wrong?

Thanks again

HiseSnippet 1046.3ocwW0saZbDEdVrW2.sTkH0K5ka8UfbpEfAZqb+g.FGgZ.iJ3jVEEYMr6fYjWlY0rylXTTjpTus2zWh9nzWkdaeCZOyN6BKDLJqiKgqXNmy278smYNybl9BtMw2mKPFYGNyifL9DyAyXxIslfoLTmSPFegY2.WpzykXMDOx2ZHwWZUwZLWXUOzBp4LOruOwAYXryiUvLxtKJ72+7CMwtXlMYgID5obpM4IzoT4Bq8a7iTW2SwNjgzoIhtZiN1bVKtKO.j3NlkPdX6qvWR5gUgkwDYrWaGpjKFHwRhOxX2lbmYClveESG+So9zQtD0fxnAvDoMeJ20QoXkUTqITWm9woBeDLK8WjX1QmX9LytTG5b6KRP2Ozg0BDIyGFY1j7JmTdkVq7JsN4YjPd6pk2CLGXKndxEdTZ6iM6vjDwXLrDjTV5XQY9iLls3PDL4gSwWQNU.Clinv2TpzCspWqTwiymKeNXg.V4eIVX067tWz77gCOq2.quyp9wIbMJPJgAf4m+B.UN01jBTXXoisnVeaRnfgCNnXtWmyB9Eg64zW.wFKoKIxV7odbFLnv9MCCYeqCfI7fxEKdbt2rhl5+ndsexaIIOLi3tYEoAtjfzn1jd5qhXY4nRSTlKkQrFGvrkTNyhyzBurZVDb2B1wSwCA44FPJlO2qymKKVHvyNjxbHWWPkvyFN+G5C6UhQpL+FEGaJAUd+hG5qrGhoE10cDTxTXUYnlqDZrGWRNiUP80mE9PV0y3wqyUzT4RDqyqpRVrAXEXASGQDwYgn3fMzKWwXdyULIKns0ojDAxYcXT4YdD1MUlihxiPE0dQhBBUFVO8oQ0S5rFhBkMYMiRgnPEm7XNTJfWIFtoQH5T.8naOzp2dn0t8PquBzy6bBVhUmfEk5gkCOhPRUqzFmPdIb0f97rrlmP7uRx8fqjluGGY7QuCqNWqn6ZfsYw79Jpibxh0qeowDB8xIIt+46aHvNT9iE7.uUVWSA0UzT+2e.n9HM0OyX6ScUM0+0G.pqootdlsO000T+m24Tuml57w2mqtEHj46YF9+v82K5lZ17A+ZyFKKf6+6qJfO+2ZjFppr8n5nsGUU2dTU6lnBcmSU82yup2tiRnuVtSfKVtbytpN7ib.WmuTWkpNGY9T4rj6seu6.ds2b+NJ2GX1mJsmrd8lYM5EtZ5+a8F8dh7lsGOlXKWH1cMO8muae7vZkxOwCjT1kcwRAUcFVufoCfmWYS.kvTM8pNNKi5dd83RwGuMfvbBG7uvuHmkUiMhbVN1IZJ1VvuvV2nf5EK2KzBnIV3C2xZ1UM1ZdqTJcOEdF0E11pDwWBJe8HpjZDGkZDUSMhZoFQ8Ti3qRMhudCHTuY8QAR9TcYAXne6vdyLLZyvvtpvcfn+CT.0Q7M

[Dan Korneff]

@SteveRiggs you're pretty close. You have successfully created arrays for 6 buttons and 6 panels, but your function script isn't quite right.

[d.healey]

HiseSnippet 1073.3ocwW80ahbCD2KIa5AsTcmTenOt8dBTth.BPaE8ZoPRNgZgfJjSW0oqolcMfUL1q10atfZOoVU025mi9b+H0OB8aP638OrKbjnroEwpnHlwyOO+7LdrGOvQXRbcENHsriVXSPZum9vEb4rNyvTNp6wHsORumGiJsYDiQ3wtFiHtRipFSDNFM70fZuvF65RrPZZ68LELsr6i7+96urMlg4ljXUHzyETSx2PmSkwZGz5qoL1oXKxH57DVWqUWSAuifI7.JtmdYjM17R7TRerxrL5HsCNwhJENCkXIwEoseag0hgyDulGX+yotzwLhRnBZHLQApOUvrTLVoE0YFkYMHJT3hfYYPbfYuf.yGn2iZQWpON.8P+ALhQjLdnk41nWkjzq7cmdZIn29Az6Q5CMcn1x3QTb6c06xkDmIXHEjjVA1hx7GYz6H.K3xRywWRN0ADVhnvmUt7SLZTubwl4ykOGjHfL+UXGi9m26h1mOZzY8GZ7TiFMSLzXOoDD.0u7UMShwFyIrk5yo19TfBhkaZPM97jSIn3vCKl6Gymy.9BmvWReEXbDWmRjcDysEbPnvia6axiMNDlwCqTTwVEx.Oda.Gnr3svE6wRtJy4RGAqClwFCa8JH3AtKTewl4dCDanbFkSLl3wMkTA2XMqJXF4zm.AClGoXd05KKSXhYFTqqAJF51RTtE45ylDCQwqrveqGxBVekXD9T4rffVvBHLxsRLnjKrmKhM9N7oFTf7Jidi+7C+OA86Kjjy3EfzPtrvJzX8glLYiiE5AFwYiCqJtctMfE3dyGSbhhRQFB6xWsLR+lKiRVkaFj1SXnf2kSkmYS32TwEJbuBTlcPHq.Sk9EYueXQVPxEQgZor5ABUP9TN4YenT.uZDbcMezo.5Q2en0t+Pqe+g1XMnm28XrDqNVKLzCoCahijpxzZGStBtuH3Ptr5GSbuTJrg6oVVGizdm6P1453Ly22ZQx6idM0RNKVw20ZFgNcVhKm9hVNXKp3YNBO60xuofBUSPg+hsSnvQInfs2NgB0RPge3m1ITndBJ7m+xNgBMRPgx+1VfBGDPg7QMEntFvmAOP2+2qTOfPwD3ma2ZUB7veecB7g+ZqMrZuQWU8+lqtJ5jcs8RiWOZm30Z6DuV+l7JZa50F++sVe6tYgdpEVdLrb0FsUutHb.nsgU5nU00J2kJWjrjXqz88cktORe.UZNay7MyF3KbC31lugukIu9ISlPLkwjce8Sew1+gKnuU3Io7o8vRGJr8Quu27gvS6LI.S3pVUUMEjQ0NQfb4nlDFR3V9B+C7ENXEkrV3fUhFDMGa5HtvLneD0qkdfuFfSb+GMlUumR1XYGaJdOGdB2Ellp.wGCLeyHplZDGkZD0RMh5oFQiTi3SRMhO8VPndu7W4IEyCJK.ECNwuEPMsS3XXWk+NPz+BPmvnPE

As @dustbro said you got pretty close. Since you have the same number of buttons as there are panels you can just use a single loop and constant for both.

[SteveRiggs]

@dustbro @d-healey Ah that makes much more sense! Amazing. Thanks guys. Good to know I wasn't a million miles away I'll keep on learning. Hopefully it will all click properly soon. This helps loads. Much appreciated fellas. That's made my day.

[Natan]

@d-healey Sir
What if we want to make the Buttons open n Close the panel and Do the radio Style Aswell?
Any idea?

[d.healey]

@Natan Don't rely on HISE's button groups for this, handle it yourself with a loop in the button callback.

[Natan]

@d-healey Have no idea,
I got 7 buttons, and each one Opens a specific Panel and Closes other ones, Also They set All the Other button's Values to Zero Once they Get Clicked.

It's A little Out of my Knowledge

[d.healey]

@Natan

Sounds like you have it already, what part is missing?

[Natan]

@d-healey
I write it down in a dirty Old-school Way.
Like if This = 1
This.setvValue(0);
That.setvValue(0);
That.setvValue(0);
That.setvValue(0);

And so on...

Tyring to clean Up and optimize some of My code parts, And need A example Like that to Study, And Translate it my Project.

Just one If This button=1 Others Value=0 And Hide Evrything = 1 , Expect the One That Connected to that Button.

[d.healey]

@Natan Did you see my video about creating a tabbed interface?

[Natan]

@d-healey Nope, Where is it

[d.healey]

@Natan Give you 3 guesses It starts with a Y

Edit: Starts with a P

[Natan]

@d-healey Haha, Will Def Check it out Right now Been at your channel A Few minutes Ago, The New HISE SAUCE name Is Very Good

[d.healey]

Oh actually I was wrong, seems that video is still only for Patreon supporters.