Some indications to make small popup

Dark Boubou

Hey!
I have not enough space on my UI to add knobs for my effects parameters.
So I have designed 'settings' buttons.
I would like to know how to make a popup when clicing on that button.

In my first ideas, we need in On Control to add something like

     case ReverbSettingsButton:

{
Something that opens a pannel with a picture on it and knobs
break;
}

Then the popup would appear if I clic on the button?
And then I modify values, clic on a button on the pannel to close...

So I need a 'If Opened and clicked then close, if Closed and clicked then open'...

I don't have much ideas, I'm not even into Java language...

Also this would help me to open a preset pannel because it takes the same logic... Nope?

Anyone can help me with giving some lines examples.... Or do I manage it alone?

Christoph Hart

There are two things that help you in this case:

Use the parentComponent property to set a child / parent hierarchy
Use the visible property on the parent component to hide whole pages.

With these tools, you should be able to build a multi page interface:

Content.makeFrontInterface(600, 500);

// This is the first page
const var Panel = Content.addPanel("Panel", 38, 55);
// [JSON Panel]
Content.setPropertiesFromJSON("Panel", {
  "width": 376,
  "height": 238,
  "itemColour": 805371658
});
// [/JSON Panel]


// Just a dummy knob
const var Knob = Content.addKnob("Knob", 20, 28);
// [JSON Knob]
Content.setPropertiesFromJSON("Knob", {
  "parentComponent": "Panel"
});
// [/JSON Knob]

// This is the second page
const var Panel2 = Content.addPanel("Panel2", 38, 55);
// [JSON Panel2]
Content.setPropertiesFromJSON("Panel2", {
  "width": 376,
  "height": 238,
  "itemColour": 822018048
});
// [/JSON Panel2]


// Just a dummy ComboBox
const var ComboBox = Content.addComboBox("ComboBox", 176, 96);
// [JSON ComboBox]
Content.setPropertiesFromJSON("ComboBox", {
  "parentComponent": "Panel2"
});
// [/JSON ComboBox]

const var Page1 = Content.addButton("Page1", 40, 10);
// [JSON Page1]
Content.setPropertiesFromJSON("Page1", {
  "saveInPreset": false,
  "radioGroup": "1"
});
// [/JSON Page1]
inline function onPage1Control(component, value)
{
	Panel.set("visible", value);
	Panel2.set("visible", !value); // the !operator negates the value (true becomes false)
};

Page1.setControlCallback(onPage1Control);

const var Page2 = Content.addButton("Page2", 180, 10);
// [JSON Page2]
Content.setPropertiesFromJSON("Page2", {
  "saveInPreset": false,
  "radioGroup": "1"
});
// [/JSON Page2]

inline function onPage2Control(component, value)
{
	Panel.set("visible", !value);
	Panel2.set("visible", value);
};

Page2.setControlCallback(onPage2Control);

Panel2.set("visible", false);

Dark Boubou

Wow very astucious this parent link :D

As I'm not using pannels for my main controllers, I have to create one?
So, if I undersrtand: a pannel with my UI picture on it, knobs linked with it.
Second pannel, knobs linked with it.

A small if/then condition making a face appear/diseapear
Omg I would never have been able to code that ^^

Dark Boubou

Ah no I can't add pic on pannel :/
I have to find something :D
And how about seting a condition in 1 knob intead of two? 1 clic=1 clic another time=2 clic another time=1, etc etc.... ?

Christoph Hart

Yes you can:

http://hise.audio/manual/ScriptPanel.php#113images

But this might be complicated for now :) Just use a image instead. You can also define images as parent components the same way (I just used Panels for convenience).

Christoph Hart

With one button it gets even easier:

Content.makeFrontInterface(600, 500);

// This is the first page
const var Panel = Content.addPanel("Panel", 38, 55);
// [JSON Panel]
Content.setPropertiesFromJSON("Panel", {
  "width": 376,
  "height": 238,
  "itemColour": 805371658
});
// [/JSON Panel]


// Just a dummy knob
const var Knob = Content.addKnob("Knob", 20, 28);
// [JSON Knob]
Content.setPropertiesFromJSON("Knob", {
  "parentComponent": "Panel"
});
// [/JSON Knob]

// This is the second page
const var Panel2 = Content.addPanel("Panel2", 38, 55);
// [JSON Panel2]
Content.setPropertiesFromJSON("Panel2", {
  "width": 376,
  "height": 238,
  "itemColour": 822018048
});
// [/JSON Panel2]


// Just a dummy ComboBox
const var ComboBox = Content.addComboBox("ComboBox", 176, 96);
// [JSON ComboBox]
Content.setPropertiesFromJSON("ComboBox", {
  "parentComponent": "Panel2"
});
// [/JSON ComboBox]

const var Page1 = Content.addButton("Page1", 40, 10);
// [JSON Page1]
Content.setPropertiesFromJSON("Page1", {
  "saveInPreset": false
});
// [/JSON Page1]

inline function onPage1Control(component, value)
{
	Panel.set("visible", value);
	Panel2.set("visible", !value); // the !operator negates the value (true becomes false)
};

Page1.setControlCallback(onPage1Control);

Panel.set("visible", false);

Dark Boubou

Thank you so much Christoph!
Just have to adapt it now! Thank you thank you thank you! :)

Dark Boubou

Ergh ok I have a small issue...
I adapted the code, but when I add a knob, the parent link doesn't work, even manually: it makes the knob with that property disapear...

Here is blank project very simple with the code adapted:

//Set background and pic background.

Content.makeFrontInterface(1000, 639);
Content.setToolbarProperties(toolbarData);
const var Image = Content.addImage("Image", 2, 0);
// [JSON Image]
Content.setPropertiesFromJSON("Image", {
  "width": 1000,
  "height": 639,
  "fileName": "{PROJECT_FOLDER}BCC.jpg"
});


// Experimental adaptation


// This is the second page, reverb settings
const var Panel2 = Content.addPanel("Panel2", 266, 252);
// [JSON Panel2]
Content.setPropertiesFromJSON("Panel2", {
  "width": 444,
  "height": 167,
  "itemColour": 4278190080,
  "itemColour2": 1509949440,
  "textColour": 4091805696
});
// [/JSON Panel2]

// Just a dummy ComboBox (From your example)
const var ComboBox = Content.addComboBox("ComboBox", 285, 15);
// [JSON ComboBox]
Content.setPropertiesFromJSON("ComboBox", {
  "width": 137,
  "parentComponent": "Panel2"
});
// [/JSON ComboBox]
const var ReverbDamping = Content.addKnob("ReverbDamping", 275, 272);
// [JSON ReverbDamping]
Content.setPropertiesFromJSON("ReverbDamping", {
  "width": 170,
  "parentComponent": "Panel2"
});
// [/JSON ReverbDamping]

//Add the open/close button

const var ReverbSets = Content.addButton("ReverbSets", 855, 425);
// [JSON ReverbSets]
Content.setPropertiesFromJSON("ReverbSets", {
  "width": 32,
  "height": 28,
  "filmstripImage": "{PROJECT_FOLDER}O OF.png"
});
// [/JSON ReverbSets]

// And now visible/not visible function

inline function onReverbSetsControl(component, value)
{
	Panel2.set("visible", value);
};

ReverbSets.setControlCallback(onReverbSetsControl);

Why does my knob disapear but still exist? :D

Dominik Mayer

Hi Dark Boubou,

Seems that you simply copy&pasted some knobs, right? One thing is important: That every Knob or other Element has its unique declaration.

Therefore, if you copy&paste stuff, make sure that you change the names of the const var foo declaration and the attached Strings "foo" to a same new value.

You also have a missing comma after '"height": 46' in line 44.

I hope this helps you out a bit.
btw: when you want to paste code in the forum you can surround it with three backticks ``` before and after, and it will show up in a formatted manner. That makes it easier to read :)

Best, d

Dark Boubou

This post is deleted!

Dark Boubou

@Dominik Mayer I have an error on that post, I copyed the code twice by mistake in it middle, recheck code. ;)

Dark Boubou

Found it!
Hehehe in fact when you add button, you have x,y .
If you connect it as children to something, x,y become xparent+xchildren,yparent+ychildren.
So the knob got out from the interface, that's why I couldn't see it :P
I'm so silly ^^

Dark Boubou

This post is deleted!

Dark Boubou

:)
https://youtu.be/aAUzE086zE8

mwplugs

@Christoph-Hart how would you go beyond two panels with the example code you provided. i have 16 i have to do lol

staiff

@mwplugs :
add 16 panels, 16 buttons (or more or less) and

1 - solution 1:

inline function onReverbSetsControl(component, value) // *for one panel (reverbSets in this example). so you must do that for each panel you want to add*
{
	Panel2.set("visible", value); // *visible*
Panel3.set("visible", !value); // *not visible because of "!" before "Value"*
Panel4.set("visible", !value); // *idem*
Panel5.set("visible", !value); //*idem*
etc. ...
};

for each panel just change the "!" for the visible panel and invisible panels.

2 - Solution 2 :
Use the first script that Christoph gave 6 month ago, but don't use the inline function (delete it) and use this in the OnControl:

function onControl(number, value)
{
	switch(number)
	{
		case Tab1: //Tab1 is the name of your button, change it with your own name
		{
			Panel1.set("visible", value); // visible
			Panel2.set("visible", !value); //invisible
			// Insert logic here...
			break;
		}
		case Tab2: // idem of Tab1
		{
			Panel1.set("visible", !value); // invisible
			Panel2.set("visible", value); //visible
			// Insert logic here...
			
			break;
		}		
*etc. ...*
	}
}

3 - Solution 3:
if you want to use just 1 button to control all, always in the OnControl:

switch(number)
	{
		case Tab1:
		{
			if (number == Tab1)
	{
			bg1.set("visible", value);
			bg2.set("visible", !value);
			// Insert logic here...
		}
		else if (number == Tab1)
	{
			bg1.set("visible", !value);
			bg2.set("visible", value);
			break;
		}
}
}

Christoph Hart

The shortest solution is to use an array and the for loop to iterate:

// Store all pages into one array
const var pageArray = [Content.getComponent("Page1"),
                       Content.getComponent("Page2"), 
                       // ...
                       ];

// Call this function with the page you want to show
inline function showPage(page)
{
    for(p in pageArray)
        p.set("visible", page == p);
}

page == p will evaluate to true for only the page you want to show, every other panel in the array will be hidden.

mwplugs

nice. so im using small edit buttons (x17 actually) to select page of 7 knobs which edit each of the 16+master (quick edit). i like the loop option but what would be an example code linking the buttons to the selection of the pages. also alternatively for the larger full edit popup over nearly the whole gui, i need to put an X to close it.

mwplugs

nvrmnd i figured it out. however i do need to know how to add an X to close a popup panel

Christoph Hart

Ah, you might also want to check out the native HISE popup system. Check this:

HiseSnippet 892.3ocsV87iSbCE1NalVRff.odjCi1SYknQy.rPkppJaxxVEA6RTCrp2Pd83jXVO1ir8rKADR8uudi+S3Tu1973YRl.CnMHgODk2O8me9687LQqnLiQoQ3q+hkYLD9FASWJsKFsfvknwGhv2L3XhwxzgdUCWlQLFVBBi24ObJvcZiJVe72GRDDIksVEBcphSYOimxsq0l83mxEhiHIrWvSq48Cd7XpRNRIT4.d1IHBkQnmSlyNg3bqU.5BN6RCBGEb+6MPed7Yu8fAex5x2NB9cNn+BwvXsYeFHhn4ZMSZOEBGgCv+GrvAOIgaU5oVhkA4bmgpjkSWntT525S4F9YBlSHFMEvjWMZzBtHYRUYyfP31SVWD2wWD+ofi4I7U5WWLuUggv0QTubhasIjZuAjh+RP5HkHwkfu.7v0fWaO7tcvTplmYWawgsqGLVB2yyHvMXcX48E05evAiTfGR6fTx4rizfvpH5+vnn6FteTzd+Zut85B2iFa3EDc3DhjIhC+svpXmyriToYJIHzeWu4c8QwkBtjENKWRsbkLTIGlasJYrKVsRzmVE3cgbKxY60q6650sCeV+JwNgvxmzAFnzcfYhJKOq+Lhvvb6RGF7mM8iJTFVkiNedeAZZFvkHZ28FXb5Kv0HhPbFPU6+o.1krZmlSTV1yk82q6651o66+LKyl0joxTIX5lr55fzekv5KySOioqpWk9ALgMoZ+vUipQ8kjZNpjikb6yyXkxqIiwMPFQk0TGsrDffq1BR4MKIk9JHhCIoSPY4DUf95yUPub7gDKoJQPNg8Iiosb2wAeH6BXtims2I3Pl4bqJCFgr5hDNxWgs8MtoEifcao6OP6E5RdhcgS3uAgEL97EVmzcPEGtUI+G8IuWUilinUj6qE3Ic9TOnJ0utdp+2MR8G.Itmb5SCF2B848zvjEURtfX2bbiaDcoAfWrQesq2UZ31k0GguEyfhZbFTiW6WQ3d6fIbKcQy3sUC3Et9+di2xI58BdxrYLpcMXaGbze8sN9dKfxepxsb47iIVM2wYNIOcJ79HkAHQBzAiiizxw97xQNYWkYJSlDU8ZWowXmLtzXbkQTJgpUuh5aHcuYbsBM.ljEu71A9D.PNbUenC2ovCYuhRcEheFPdyQbusNh6u0Q7fsNh825Hd3VGwi15H9kuRDtuZ3fbqJ02VfP+OcGNoJA

15

1.8k

10.3k

89.9k