Some indications to make small popup
-
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?
-
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);
- Use the
-
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 ^^ -
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.... ? -
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).
-
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);
-
Thank you so much Christoph!
Just have to adapt it now! Thank you thank you thank you! :) -
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
-
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
-
This post is deleted! -
@Dominik Mayer I have an error on that post, I copyed the code twice by mistake in it middle, recheck code. ;)
-
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 ^^ -
This post is deleted! -
-
@Christoph-Hart how would you go beyond two panels with the example code you provided. i have 16 i have to do lol
-
@mwplugs :
add 16 panels, 16 buttons (or more or less) and1 - 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; } } }
-
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. -
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.
-
nvrmnd i figured it out. however i do need to know how to add an X to close a popup panel
-
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