Some indications to make small popup

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

mwplugs

works great. i want to have double click the waveform display open the popup instead of deleting the loaded wav now.

Christoph Hart

Thats not possible unfortunately. But you can hide the filename and change the colours in the latest version.

Christoph Hart

But you could overlay a transparent panel and use its mouse callback for this. But then you‘ll loose the ability of dragging the sample area.

Dan Korneff

Is there any documentation that details the visible property? I'm looking to use buttons to hide/show controls, but the scripts above look foreign to me.

d.healey

@dustbro Yes its use is to toggle control visibility. The page == p part is a shortcut for if page == p and will be either 1 or 0

gorangrooves

@Christoph-Hart said in Some indications to make small popup:

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

This was a great solution that works well and is easy to implement.
@Christoph-Hart I was wondering about the following:

Is it possible to remove the close (X) button in the top right corner of a pop-up panel, on per instance basis? And if so, what code do I need to add?
When a pop-up panel is initiated using a button, it can be closed in 2 ways: by clicking on the button again or by clicking on the close (X) in the top right corner of the panel. When a panel is closed by clicking on the X, the button that originally initiated the popup stays in pressed state. How do we reset the original button to its unpressed state simultaneously while a panel is closed by clicking on the X?

Thank you.

d.healey

@gorangrooves

Is it possible to remove the close (X) button in the top right corner of a pop-up panel, on per instance basis? And if so, what code do I need to add?

Just use a normal panel (disable the popup mode).

HiseSnippet 853.3ocsV0sSaCCE1ozLQ5VQCo8.DwUsRLTKCXShMst9GqZCnZkgl1MLShaiGI1QIN.UHj1iFOE64XuAcGGmzDfBp8B5cme9Nmub7mOt8C3VjvPd.Ry3nw9Dj1KzGLlIbZ4foLTu1HsUz2GGJHAlJWMG6iCCI1HMsk1S5PynHJ92+9XSrKlYQxbgPGyoVjuR8nhLu9M9B00sK1lbD0KW1a0nmEm0h6xi.9rjdMjO15L7HxAXYZEzQZOqiMUvCFHvBRHRqXSt83AN7KXp7OlFRO0kHMpiF.ER4tK20VxXoWTKGpqc+zu6PDTk9YSgkTSgWouO0lN0e1z3kwALyPjednU3wnW87zq17SOsbzqnhdqpOvJf5KxhH41y06wfCpgX3HHOsT4hJ7WM8VbHClXCO7YjtAfwTDU1oVs0M2tVsp6VtT4RvAQnv7bbfYeLi3V27CloXGQDs3d9bFXTYMU30TnnLWJiXNLhYInblIm0LRH3r5RrAb2JVo.WGpsaDoZ4RWUtjI7SUmMBgoUZxpL1UEe1cOo7qUciPh3XY9YnLjvJW55XlMGvSZaKrq6oftqxcIurl49xNfKHGxpTszUkLJc88hLb3rBkTJWRvrhJuND7Hvpvh7NkDjN6RxCTE2V1o+vxt72JrTijbIxY8XTwg9D1CIFQIyQorLgTPphXQ4JIhR0TCQAsmgdxHDEy376JPeuWar.mVHnlPe7IABp7SPqM4bXwgRsan2lDdlf6C6.ld3A6Bli1d4zVdS+Fiy5+mabA0V3j43WMbHzQN41R89FnbMyP0rxoW7jp03dsrtR4lqUn8x0p+7y6zpaX2sUl+tAUP7RW7Y7rzkmYd2LuaA4RQVxSlLgD699qIfkUb6HWr31avjqsSB.xqaspPtNfEREiyeT8jrVado6p58oBKmYy2Byfufh5oluIORTVuyvgDKQFYKp28GO8uHf9FORPYi1GKBnfrS+fHuAfZvh.LgAhQ4N.sBxaqJ6ZRa4jY.gYGa.hlIIAqKs0RBVOMHxCaEvOwRcGW9Lzxwd.NwheM1.9aAfs4zq1Rd6AuMdhkkbP7Zf4yFwlKLh2rvH1ZgQr8BiXmEFwaWXDu6QPH+iHeJRv8TWK.G86DuRUSqCCCppXEH5+DH4o+C

13

1.8k

10.4k

90.8k