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?


  • administrators

    There are two things that help you in this case:

    1. Use the parentComponent property to set a child / parent hierarchy
    2. 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);
    


  • Wow very astucious this parent link 😄

    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 😄
    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.... ?


  • administrators

    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).


  • administrators

    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? 😄



  • 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 😛
    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) 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;
    		}
    }
    }
    

  • administrators

    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


  • administrators

    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
    

Log in to reply
 

1
Online

315
Users

919
Topics

6.0k
Posts

Looks like your connection to Forum was lost, please wait while we try to reconnect.