HISE Logo Forum
    • Categories
    • Register
    • Login

    Best way to destruct UI panels?

    Scheduled Pinned Locked Moved Scripting
    20 Posts 6 Posters 769 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ?
      A Former User
      last edited by

      So I have an init script that reads the number of installed expansions and creates a panel for each one that it finds. However I currently have to manually delete them before exporting the vsti (so that the plugin starts with 0 as the user won't have any expansions until they install them).

      Is there a good way to destruct these automatically on plugin close, or before exporting?

      Y 1 Reply Last reply Reply Quote 0
      • Y
        yall @A Former User
        last edited by

        @iamlamprey you can also try to hide them when opening with a button that closes them? If I understood correctly . button.showControl (value); you set the default button to 0 and when opening the panels will be hidden. sorry if i misunderstood but just in case ... :)

        ? 1 Reply Last reply Reply Quote 0
        • Christoph HartC
          Christoph Hart
          last edited by

          404 Not Found

          favicon

          (docs.hise.audio)

          Use this approach for dynamic content, your solution of creating static panels at onInit is messy.

          1 Reply Last reply Reply Quote 0
          • ?
            A Former User @yall
            last edited by

            @yall I've already got a button to open/close them :) the issue is it's still drawing blank/empty panels before the user has any expansions loaded

            @Christoph-Hart Thank you! I'll get to reading

            Y 1 Reply Last reply Reply Quote 1
            • ?
              A Former User
              last edited by

              It's so beautiful 😊

              favicon

              (streamable.com)

              Tania GhoshT 1 Reply Last reply Reply Quote 2
              • Tania GhoshT
                Tania Ghosh @A Former User
                last edited by

                @iamlamprey stream.jpg

                Tania Ghosh

                ? 1 Reply Last reply Reply Quote 0
                • ?
                  A Former User @Tania Ghosh
                  last edited by

                  @Tania-Ghosh weird, it's just a short video of the UI working properly :)

                  Tania GhoshT 1 Reply Last reply Reply Quote 0
                  • Y
                    yall @A Former User
                    last edited by

                    @iamlamprey it seems to work fine right? can you publish the snippet of your project? normally in the expansion example there is not this problem of panels

                    ? 1 Reply Last reply Reply Quote 0
                    • d.healeyD
                      d.healey
                      last edited by

                      I do it with a single panel + paint routine + mouse callback. What's the advantage of multiple panels in this use case?

                      Libre Wave - Freedom respecting instruments and effects
                      My Patreon - HISE tutorials
                      YouTube Channel - Public HISE tutorials

                      ? 1 Reply Last reply Reply Quote 0
                      • Tania GhoshT
                        Tania Ghosh @A Former User
                        last edited by

                        @iamlamprey hmm.. I know. I always love to see what everyone is doing. It gives me the potential to learn HISE properly.

                        Tania Ghosh

                        1 Reply Last reply Reply Quote 0
                        • ?
                          A Former User @yall
                          last edited by

                          @yall I can post a section of my frankenstein code

                          /*
                          First we create a Viewport so we have access to a scroll bar (we can do this with scripting but I just drew it in)
                          Then we add a big "master panel" inside the viewport that we'll fill with all of our buttons.
                          Any changes we make to the Viewport will also apply to the child components (such as hiding)
                          */
                          
                          const var Panel_ExpansionsItemHolder = Content.getComponent("Panel_ExpansionsItemHolder");
                          
                          const var expHandler = Engine.createExpansionHandler();
                          
                          //Grabs the names of each expansion as a string and pushes them to an array.
                          
                          const var expansionNames = [];
                          
                          expansionNames.push("No Expansion");
                          
                          for (e in expHandler.getExpansionList())
                              expansionNames.push(e.getProperties().Name);
                          
                          //Populate List
                          
                          const var expButton = []; //I used an array to store a "button" for each expansion, you could probably do one giant panel with XY coordinates.
                          const var expButtonHeight = 55; //The height of a single Library Button
                          
                          //We'll make use of the Panel.addChildPanel(); function to populate our list.
                          
                          //"Libraries" Title at the top of the list (not a button)
                          
                          const var expPanelTitle = Panel_ExpansionsItemHolder.addChildPanel();
                          expPanelTitle.setPosition(0, 0, Panel_ExpansionsItemHolder.getWidth(), 20);
                          expPanelTitle.setPaintRoutine(function(g)
                          {
                              g.fillAll(0x1B1B1B);
                              g.setFont("Arial", 12.0);
                              g.setColour(Colours.white);
                              g.drawAlignedText("- Libraries -", [0,0,Panel_ExpansionsItemHolder.getWidth(),20], "centred");
                          });
                          
                          /*
                          Crawling the expansion list and populating with buttons + images.
                          
                          Note that these images are filmstrips so this has mouseover/click down animations.
                          
                          They also call custom functions on click down, which I won't put here. Basically these custom functions handle all the expansion-loading, image-swapping and sampler-setting-uppering.
                          */
                          
                          for (i=1; i<expansionNames.length; i++) //We start at 1 because 0 is "No Expansion"
                          {
                              Panel_ExpansionsItemHolder.set("height", 20 + expansionNames.length * expButtonHeight - 55);
                              expButton[i] = Panel_ExpansionsItemHolder.addChildPanel();
                              expButton[i].setPosition(0, 20 + i * expButtonHeight - 55, Panel_ExpansionsItemHolder.getWidth(), expButtonHeight);
                              expButton[i].loadImage("{PROJECT_FOLDER}" + expansionNames[i] + "_button_base.png", "panel_" + expansionNames[i]); //Appends a bunch of strings to return the full file name.
                              expButton[i].data.imagefile = "panel_" + expansionNames[i]; 
                              expButton[i].data.expansionName = expansionNames[i];
                              expButton[i].set("allowCallbacks", "Clicks & Hover");
                              expButton[i].setPaintRoutine(function(g) 
                              {
                                  g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 0); //My panels were 185 wide, you could use getWidth() but I got lazy :P
                              });
                              
                              expButton[i].setMouseCallback(function(event)
                              {
                                  if (event.clicked)
                                  {
                                      expHandler.setCurrentExpansion(this.data.expansionName);   
                                      load+this.data.expansionName; //This is our custom function loadSomething();
                                      this.setPaintRoutine(function(g) 
                                      {
                                          g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 110); //Offsetting the filmstrip to the click-down animation
                                      });            
                                  }
                                  
                                  else if (event.mouseUp)
                                      this.setPaintRoutine(function(g) 
                                      {
                                          g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 0); 
                                      });                  
                                      
                                  else if (event.hover)
                                      this.setPaintRoutine(function(g) 
                                      {
                                          g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 220); //Offsetting the filmstrip to the hover animation
                                      });    
                                      
                                  else
                                      this.setPaintRoutine(function(g) 
                                      {
                                          g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 0); 
                                      });         
                              });    
                          };
                          
                          /*It's probably not the most efficient or performance-considerative, but it works for now. I should also probably add set("isMomentary") to the "buttons" so they don't wig out, as well as remove "storeInPreset".
                          
                          I'm also hiding this whole viewport with a simple button that sets Viewport.showControl(value) and offsets the main GUI panel by 180 or whatever*/
                          
                          
                          1 Reply Last reply Reply Quote 0
                          • ?
                            A Former User @d.healey
                            last edited by

                            @d-healey I'm using image files, it could probably still be done in a single panel using some cursor XY trickery but this is easier for my noob brain to wrap around :face_savoring_food:

                            d.healeyD 1 Reply Last reply Reply Quote 0
                            • d.healeyD
                              d.healey @A Former User
                              last edited by

                              @iamlamprey said in Best way to destruct UI panels?:

                              @d-healey I'm using image files

                              Me too, downloaded from a server

                              f16c00e4-2d41-4de7-a46c-ff7447b40c30-image.png

                              Libre Wave - Freedom respecting instruments and effects
                              My Patreon - HISE tutorials
                              YouTube Channel - Public HISE tutorials

                              ? 1 Reply Last reply Reply Quote 0
                              • ?
                                A Former User @d.healey
                                last edited by

                                @d-healey And that's all a single panel and you're using some XY position detection thing in your callback? Fancy

                                d.healeyD 1 Reply Last reply Reply Quote 0
                                • d.healeyD
                                  d.healey @A Former User
                                  last edited by d.healey

                                  @iamlamprey It's not really anything fancy

                                      Panel1.setMouseCallback(function(event)
                                      {
                                          var x = Math.floor(event.x / this.getWidth() * this.data.cols);
                                          var y = Math.floor(event.y / this.getHeight() * this.data.items.length / this.data.cols);
                                          var v = x + y * this.data.cols;
                                          
                                          if (event.clicked)
                                          {
                                              this.setValue(v);
                                              this.changed();
                                          }        
                                      });
                                  

                                  Libre Wave - Freedom respecting instruments and effects
                                  My Patreon - HISE tutorials
                                  YouTube Channel - Public HISE tutorials

                                  ? 1 Reply Last reply Reply Quote 0
                                  • ?
                                    A Former User @d.healey
                                    last edited by

                                    @d-healey Nice! What is this.data.cols?

                                    Then just do stuff when value = 1?

                                    1 Reply Last reply Reply Quote 0
                                    • d.healeyD
                                      d.healey
                                      last edited by

                                      Here's full example.

                                      Peek 2021-04-14 21-21.gif

                                      HiseSnippet 1218.3ocsWs1SqTDFdVf0PqRhGievONgDS1dnT1hbNdh0SNUJfV0BMTNnIFCYX2osSX6LM6NEXkfZh+w7Wf+V7ef9Nyr25EHjlv9g1NuWe1248V6FJ7nQQhPjUoyhGSQVejcuXtbXqgDFG09.j0mYOHj4uc.IVLQt8X36AghIbez9wiIQQTejk0peqRZqRqgzO+661mDP3dzbRHz4BlG8GYiXxbpca9CrffiH9zyXiJH8dMa6I3sDAhI.xV01EMl3cEY.8XhRrUrQVevg9LoHrmjHoQHq01W3G2an3FtQ9yYQrKCnpC0Q8.CYHejHvWgXEUTqgr.+toQfHDXkt4wiUMwiO0tCymkQOOt7wZF3bMJFOrV4wfW8hvy8oCOqBvaMC7dgcOuP1XYNGE19P61bIMrOAtBJBKirnU9Ga6VBPBtr1HxUziBgCYZ37ZW2p3W45VowFk2nLbQDIwG+9NWz9rC6zC+V7ttZF6rC9bF8lwhPY8TwxH.hk5gATYKwnwBNbvYyLI1rRpU5R3zfLSXN8f5aXqU17yZ9DIolmHHBzYuYHOXhDdq.F0cmWgeh4KGB7RHC9QSwoBNES41dFsiX+FMWyoM3134QPCL7jYhHJ7hLjxFLTtY0EHMdKrSd.edvTA+RrybvYqEXoJlfbte6BouxSgJYFm5zeB2SxDbmAU1n7cFHp9ruHD6vf2O2FXF9qyu7giasUEiP2Y9R8bMIDeKHNnymikCYQSC0onXhQasHh6f2EBd4LzuU.wFS6oXvScHxg05GHDgfO2YA9zYFyTzgIglYLKAL6uba04jCTMt5LnZ1y+pNJmZMHx8Vi.PJ04jfITHk5c3Ap3uomli4KPfPZbE7WsPd9jvqz7K.z7eMnVen04opNwT+SodRBeP.0gTEuakFZotu78yd62QLIh1hDDbIzNM+5mdMTZUo7ckKdYVHDq4W61z.cgBkWNanuQ4G3ZxXi3B136zE.ZiTLY+AM30fAuUcaLmWMxn+f0Gm3Ju.l2UT+Jlj0r3lVynz6kqSreFGugPbj56jFCSYphkowKrferPROg6nhYkJeeY7rr52eg7TszBEAAzvExVMDL7wTzgOYzkzvpP7.PelfvzfoG2X+viaJNMzyzgsffBdaNSdxXJ+gFBgRZKqFGkfJPTodXzmjLLh5m1kGw7USixZ5iz.u3ZAn229.3dL0bfkAuMlFJYpWDqCnWCqMXl0Ux9.ZzURwXsrISDfMAdxN+1LG+meey3bTzq4Mp74LBM+illtyYT96vlS4y0M9bizoupJLs6V21TsUvWvSbwCiIgfMJXrhPbFf76yBj27WMgxWwMoEwQJPzRkpGgOgGDC6TM2NBvlJB+IAD4zqun1YKgAjjM0dBpcA3QLYbwc5dV1o4oB2WX2kI8FtX7txBvKjP8bi2jMD2v9v98gFv4fcM6i94m+0AQlw3CflrgLHcy93Ii5ASN7n.R3PRnpQf0JpRVyYW0Yc9Nk6qO7evSBy5pyVILqmxDMh3EJtvyTnq1AccME.Sb8p3kr6nNiyprsscq4hFAqFegmmJTrMf8EqytKgNewRnydKgNuZIz40KgNe4RnyadTcT+qjuYhTLxTl.D5dntCqk0gbBjkoyHQ+OP0q78f
                                      

                                      Libre Wave - Freedom respecting instruments and effects
                                      My Patreon - HISE tutorials
                                      YouTube Channel - Public HISE tutorials

                                      ? 1 Reply Last reply Reply Quote 1
                                      • ?
                                        A Former User @d.healey
                                        last edited by A Former User

                                        @d-healey You could even make those squares link to your patreon :winking_face:

                                        d.healeyD 1 Reply Last reply Reply Quote 1
                                        • d.healeyD
                                          d.healey @A Former User
                                          last edited by

                                          @iamlamprey Christoph showed me this technique in one of my livestreams (I think it was the second one).

                                          Libre Wave - Freedom respecting instruments and effects
                                          My Patreon - HISE tutorials
                                          YouTube Channel - Public HISE tutorials

                                          ? 1 Reply Last reply Reply Quote 0
                                          • ?
                                            A Former User @d.healey
                                            last edited by

                                            @d-healey Livestream! Yeah... I like that idea! It's been a while, hasn't it? 😬

                                            1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post

                                            65

                                            Online

                                            1.7k

                                            Users

                                            11.7k

                                            Topics

                                            102.1k

                                            Posts