[controlP5] How do I use two Tab groups ?

cgocgo
edited January 2014 in Library Questions

Hi, I made a program with lots of controls with controlP5, related to a winch system. The controls for one system are organized in three tabs (setup, path, play) . Now I want to add a second winch system, and have one group of 3 tabs on the left on the screen, and another group of three tabs on the right of the screen.

Like so:

[setup1 | path1 | play1] [setup2 | path2 | play2]

and still can see path1 and setup2, for example, at once.

How do I do that ? controlP5 is so rich I can't get my head around the groups, controllerGroups, and so on...

Thanks, Charlot

Tagged:

Answers

  • How 'bout?

    import controlP5.*;
    ControlP5 cp5;
    
    void setup() {
      size(700, 400);
      cp5 = new ControlP5(this);
      cp5.getTab("default").setVisible(false);
      
      int tabWidth = 60;
      int space = width - 6 * (tabWidth + 4);
      
      cp5.addTab("setup1").setWidth(tabWidth);
      cp5.addTab("path1").setWidth(tabWidth);
      cp5.addTab("play1").setWidth(tabWidth);
      cp5.addTab("").setWidth(space).setColorActive(0xff02344d).setColorForeground(0xff02344d);
      cp5.addTab("setup2").setWidth(tabWidth);
      cp5.addTab("path2").setWidth(tabWidth);
      cp5.addTab("play2").setWidth(tabWidth);
    }
    
    void draw() {
      background(0);
    }
    
  • cgocgo
    edited January 2014

    Hi, thanks, but no :).

    In your code, if I click a tab on the right, it hides the tab that was shown on the left.

    The idea is to have two independent groups of tabs, it's not just a matter of layout.

    (I just found my example has a mistake, I'll edit it if I can)

  • edited January 2014

    As far as I know groups of tabs are not supported directly. There is the possibility to add certain controllers to the global tab to make them always visible. You could use controlEvents to show/hide controllers manually (but then you would be basically recreating the tab functionality) or create another custom solution within a single ControlP5 instance. I suppose the easiest method (read: requiring the least custom code) is to just use two ControlP5 instances, one for each independent group of tabs (see code example below). Additional features with regard to tabs (groups of tabs, adding controllers to multiple tabs, tabs and subtabs) would be very useful though, so perhaps you can also file an issue/enhancement request for this: http://code.google.com/p/controlp5/issues/list

    Adapted Code:

    import controlP5.*;
    ControlP5 cp5Left, cp5Right;
    
    void setup() {
      size(700, 400);
      cp5Left = new ControlP5(this);
      cp5Right = new ControlP5(this);
      cp5Left.getTab("default").setVisible(false);
      cp5Right.getTab("default").setVisible(false);
    
      int tabWidth = 60;
    
      cp5Left.addTab("setup1").setWidth(tabWidth);
      cp5Left.addTab("path1").setWidth(tabWidth);
      cp5Left.addTab("play1").setWidth(tabWidth);
    
      cp5Right.getWindow().setPositionOfTabs(width - 3 * (tabWidth + 4) + 1, 0);
      cp5Right.addTab("setup2").setWidth(tabWidth);
      cp5Right.addTab("path2").setWidth(tabWidth);
      cp5Right.addTab("play2").setWidth(tabWidth);
    }
    
    void draw() {
      background(0);
    }
    
  • Thank you, that's helpful. I did not want to use two separate ControlP5 objects, but if that's the only way, so be it.

    Thanks again, Charlot

Sign In or Register to comment.