[controlP5] How do I use two Tab groups ?

cgo

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

amnon

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

cgo

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)

amnon

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

cgo

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