Multiple page?

alexaudio10

Hello,

I guess it's done, but I admit I do not know where to start.

I need an interface that has multiple pages! Someone knows how?

d.healey

Easy way is to just use panels, easier way is to use my tab class (it uses panels too) - https://github.com/davidhealey/HISE-Scripting-Framework/blob/master/libraries/tab.js

I'll put a demo together for you later today

Christoph Hart

The basic procedure is to use a ScriptPanel per page, add all controls as child components of this panel and then just toggle the visiblility of each page in a button callback (or whatever). I'll think about adding an example of this to the repository because it seems like a pretty common use case.

d.healey

Here's how to do it with my tab class which should also explain how to do it with panels since it's pretty much the same thing just with some added helper functions.

HiseSnippet 1588.3ocyXEtaaaCDlJMpsxstncX+eD9OyAnKwlJoccECqNwMYFKoIqNMaEEEAzRLwrQVTPhJooE80X.8e6wYON6MniGkjkrshicPJvLPPDOdeGu663Qch6EJbXQQhPjwc1+7.Fx3tlcO2W1ei9TtOpSajw8L2gFIYg3DQqed.MJh4hLLtwVf.CqEQ5e+6urN0i56vxEgPGH3Nrs4C3xboAO623ddaRcY6yGTP6UeVGGg+FBOQrxetgYCT.04D5wrWPA0VvDcJmcVDxngoMY4vSZ16CsVV+q8IOYW8COts6pNG7ZYqS2K92O30Gs7I8hasLxINLj4KOPAGYXZ7E0OCym6xkhvtRpjor4hqKbOuaewY9IK8A7HdOOFLnIpqxmRDuovyEBd3YzF84dt6kQgQHkU1KmPuQBg9sl6vc4CkmSr2WOANGQQp0Xgo4dMuhtmQA2awD26AlccB4Ax7Y.e6aRkdAdWxjnE9NKStuiWrKqdsOt016tdqsOr6Furyd6e3l6tc6m+xO4w6ERC4rnUjzdK+tnZK8zpUpVYCguTkPVNhI+UF+39x5j0ZjLkZKPjDeJMDqPrdrTpFi+Y7ad6SwqrR1Xo.6zm5eLCTpZkbMeSi2pTNy7TW2D40qk7ebyZOD2rA7GrZEv0b53H.tGUFPxzAZq.ZmuhUqrxJsbcw8xCjPpKWfONTDGLVj.zS8Z542BlF7gIb6YPIxEpzXzcNQ2JLjdN3cQpMgZVFK58NliLBy80FOkpgzpJp2m1qdM0y.+pB10T+QZ.Q8ZY7UJEOl9jonOoD8sKW+LZUEMxPgmlWAetYw.zqmmxLM2mK8Xily1l1i4Uu1vYSVDskKBJgECnvYIaHFDH7UOnzE7wiYx8n9LuNt0SImkVBHxsXRrrOC2oMVbDn42GgC.EwTeWbbDCykXZjVmDKq0SMxCbpxbfy3tx94K6e.CGcQ2gdBK2F5mhTmgh0HyVMckyjVWxdODS01u05ppEfBVYkjyjyPMLBp2QYQOUjnXdJ9nXeGIWskG39DMwNdpyLvTINRnV9.AWEdpoGj3e7HbDePfGKbogaoV9PssS7EtjMHYsgLx62bym7jFpeC2gbgpSlP+KZGBYxcHjotCgT9NDxbuCoIjrJC9kjeKCRwjFoVgJtoSmMZ.DzkqNYB8uH5zdR5zdpzoc4zo8bSmjq2BN6upEb1WPtytVgS+trbGjMtb0Iio+vxTg+KDR1t90WpxGqXU4SUFeliNpro1HIiqJZKaVnitvo.qte7fdrvGp1e3EyT5UshUzYboSeb5TpiBr.oVNzHFdj2G9SfXKHKDoBsrLfNuDADgkUuPF8D81yIw2rT7MKEukUYVfTpEHkXgJVeppJ9UcYMZabUls13bRpTJnnvuiOWta.a33jjWljFngIshhxSVEkpSRknVtnI6cDkV8p5h7lopqTUp6g7docKlvSHtpGwJlYMbgzY5hel.ZdvSFGepqLq3smA7USwqOURC+NlCeqXF9aYpei3LilTBZxLi1tDz1Hzq5zlJoPm7ooCUJJfEJ4vlKi1rSUesURe8VlsYQmHEAHiaO7nSkwGcU0mfpW06ZF3CmLA8vgdO7UR.ScN7fxqQ5CxTV8l+SJG1W21NH4uRkjejCHEg97WFUJon3dhPWVXW9GXIRS9063bC.ejFH6zrRjDOBh7gQyslk72nAi9CPG8EJiE7SDpvAzij+GhqxLvljqE17ynRYyTwkylWclibUXNxzYNxHLm0Lvb1WGL2mQkxbYhKm4lCpx9pPU1SmprmapZ0qmR1wkRFo3rTpZd8z09egmZNKu3R6nUxbT3g7OfFLrwUyvoGH72W6FNsd4QFWtgm7dftu4NB2XOpbzqnBthuzIT8wMxk.0AdATDWddw2sOG2aUiRu2plk06wL5tOvbOnSxx82EJweUU5es82zaArp4yO5HliL2YWzby+7pdkeygq7RQrj6e7NTYHG1d7h3AcU0KNLkm3qpOifcJK.60RF2Hq5rKy2sQ1sklNYSXrQ5jMylDMf5DJNL6SAUj5s0RT9ju9lasL2AFm2KH32C3t7Ccb.h3GTdd4HHyMB64FwpyMh0laDOZtQ734FwONEDvMM2JVJFjTVfP+GRRAhkB

alexaudio10

Thank you for your answers!

Yes, that would be an example. D.healey's script works but the buttons do not work to open and close.

How do we add children's components?

d.healey

To add a child component to a parent use the parentComponent property on the child

alexaudio10

Could you put an example? I have a hard time doing what I want ... I know it's simple!

I only want that when I click on a button, a page opens with new control.

I found in the API parent parent, but it does not work.

A big thank you for your help.

d.healey

That first example I posted shows everything you need, the buttons work for me so I'm not sure why it's not working for you.

Here is a simpler example, I've added a child component to page 1. Important: by default button 1 is active but page 2 is displayed, some extra fiddling around would be required to fix this but I don't think it's necessary for the purpose of this example. Click button 2 first then button 1.

HiseSnippet 1099.3ocsW0saaaCElx1Zq1atXcXO.B4JGfr.Ik3tATDrF6T2YrlT241rrqJnkniIrLofDkS8J5qwdl106kX2t2frCIkrjskMhG1DR.n9N+vuygGdzwCh3dj3XdDx3Kd6hPBx3KMGtfIlzcBlxP8u.Y7XyKwwBRjkFpyhPbbLwGYXT8kR.i50Ppm+9G5fCvLORNDBcMm5QdEcFUjiF97ehFDzC6SdKcVAsO84883rt7.dBvmpl1nPr2T7sjqvR0pXhlSI2EiLrMOw83noNi9syOV9byM2P+E0pQ13j233wOs2ut37NuYpsCNZZOjWRTDgItFLGYXZbO7XX9BepfGMTfEDvmU6v8WLbB+NldqulFSGEPju3fFBbRCi5NgF3OHKsEiPF0FjmDqpShei4kTe5R77j4WoDXkaQwzoQkUoTsUnjy1nTOdfuzAagdFEnWMM8dh4PuHZnHWhjaecJ5VXmVHpxeU0rKmIfz4wwDwORn2NQzxss8gOqYilMfCvXg0bbjUHbv4XclUlxXe+AXFIn0AJIGbjkM7mzJ06Rm05fIJ2AxbsWWzcTewDPxIaHgJHyzUMRm9gdvisc61aUK2MTacd6tUd6tFuc2Nuc2Juc2Buss60Km2tai24pUj2AiBTG9qR8WgGIodlvBrOCRuKgX4Ejt7YgbFr.zK8XZ8sYThPvYqcv1QA15fTg5cw0QsOoX5sIB6S4uLhmDB53Ttuc2kuk4.m1q6c2x893DlmfxYVb1UbA40rVG13iMp23SMVWx3wkIRxhHdP.IpLoxlWQ6vrVrjYiHQGAgVPBQoGcrUJp0YmkkJOrYi5eD9udgh045q5PXHh.aeVlX20EOFGDCxaT+SfJDX8NcVp1a0a5MCbFDPP2hUaG03g0NxSezUPQNqOiJdcHY465SiLDazxSghP4Y+hnprdIpkCsYOPTZ4DzMrZp5vJgpW3iS65oKyPTnWWcyzSFj5jq3W3P6g4tqadJQJZdyTyUWSUV2vL6hYl4EPPuq+EXAV1UOMjfvLjDInxCHiKHygu1p6wW27BR7TAODNGWdsFfWceUc1T66mappXPeP9ARIUWjsP2aCL8y9iznP0RSBbjgFHuGkD8cn6ueUT2hvyypaztWFJKom4CHsrICWq4UdvfJf8ncG4t+mD42iJMxSgQaFo6r7aUF8mvh7NbR+ZjWVsG9MMR+8Gfe2bzAX.FteR.Vr5TMxIASE.8.WYtg9x5zXpXQw6Q6wnN1kNpiSYWyefz8IlCnBuIky2JkvWnH8+a9lN3XSyWLdLwSjS1Zl8t4e6Th6AU9Ydhfxt8RrHhJKOtJY1Pn70i.LgA2ThkUJUjkZ52syJMGRX91YCUmJzQ9tQpPmLgnYXuH968zs.kil9HEBvIlZ.+5vuz.d2ZYeWIumAyK+dOOYh3aAlWtEt6sEmr2Vb5daQ681hmt2V7c6sEe+NrP9iSNOQvmouVfP+CyvxzSB

staiff

**hello !
not working in the last github HISE version because of starting onInit: "content.setheight: ..."

you must replace it by: "Content.makeFrontInterface(..., ...);"

;)**

d.healey

I'm using the latest version from GitHub - built on 6th December

Christoph Hart

Content.setHeight() is still available so it should not be the culprit here.

I found the smartest solution to handle multiple page logic is to write a function that shows and hides all pages at once and then just call this function from every button callback with the page you want to show as parameter. The advantage of this approach is that you can also put a function call to this function in you onInit callback to set the default view (and change this during development while you are working on a certain page)

staiff

sorry for that, but just downloaded this repository (6Dec) and tried, but: NO. With content set Height i just have a small Y black rectangle, no interface.
as i wrote before.

funny ....

for multiples pages , also see: http://forum.hise.audio/topic/117/multiple-interfaces

tried this snippet, and with some ajustments it works.

your setheight:
alt text

the content.makefrontinterface:

alt text

Christoph Hart

Content.setHeight() sets only the height, but the width is zero. So you need add Content.setWidth() or just call Content.makeFrontInterface() to save some typing :)

d.healey

I was just working in the Main Workspace so there was no need to set a width.

alexaudio10

Hello,

I have two versions, version 1.1.1, which I keep for my old project (there are .js commands) that does not work on the Other. And the last of github that I compile.

On both it does not work, I have no idea why. When I click on the button, no page closes or opens ... Nothing happens.

In the last example, I do not see the green scriptpanel. Yet, nothing to do with the buttons .... And that's on both versions.

I can have misery!

alexaudio10

Good! It still does not work after several hours of work ....

Here is the code:

const var page1 = Content.addPanel("page1", 18, 290);
// [JSON page1]
Content.setPropertiesFromJSON("page1", {
"width": 300,
"height": 200,
"itemColour": 4294901845,
"itemColour2": 4294901845
});
// [/JSON page1]
page1.set("height", 200);
page1.set("width", 300);
page1.set("itemColour", 0xFFFF0055);
page1.set("itemColour2", 0xFFFF0055);

const var page2 = Content.addPanel("page2", 103, 0);
// [JSON page2]
Content.setPropertiesFromJSON("page2", {
"width": 300,
"height": 200,
"itemColour": 4278255445,
"itemColour2": 4278255445
});
// [/JSON page2]
page2.set("height", 200);
page2.set("width", 300);
page2.set("itemColour", 0xFF00FF55);
page2.set("itemColour2", 0xFF00FF55);

const var button1 = Content.addButton("button1", 0, 210);
// [JSON button1]
Content.setPropertiesFromJSON("button1", {

});
// [/JSON button1]
button1.set("radioGroup", 1);

const var button2 = Content.addButton("button2", 0, 310);
// [JSON button2]
Content.setPropertiesFromJSON("button2", {

});
// [/JSON button2]
button2.set("radioGroup", 1);

If anyone sees an error, please help me! I based myself on the HiseSnippet you sent me!

d.healey

Well I can see you're using JSON and control.set() you only need to use one. Also you've only posted the contents of your on init callback. What's not working exactly?

alexaudio10

Hello,

Everything is now Ok! It remains for me to focus on my plugin! Thank you all.

alexaudio10

Hello,

One last thing. When I recall my presets, it is not page 1 which comes back (bg1) .... Why?

Is there a way to say that page one is master?

Christoph Hart

You need to exclude the buttons from being saved / restored in a preset. Just set the „saveInPreset“ property to false.

Multiple page?

31

1.8k

10.3k

90.2k