How can you move tabs?

Processing Libraries
1

I use the controlP5 library and did not find how to change the layout of the tabs. Tried various tricks but .setPosition is not responsive.

p30109-142822.drtia
p30109-142822.drtia1920×1440 169 KB

3

import controlP5.*;

ControlP5 cp5;
int myColorBackground = color(128);
int sliderValue = 100;

void setup() {
size(700,400);
noStroke();
cp5 = new ControlP5(this);

// By default all controllers are stored inside Tab ‘default’
// add a second tab with name ‘extra’
cp5.addTab(“extra”)
.setColorBackground(color(0, 160, 100))
.setColorLabel(color(255))
.setColorActive(color(255,128,0))
;

// if you want to receive a controlEvent when
// a tab is clicked, use activeEvent(true)
cp5.getTab(“default”)
.activateEvent(true)
.setLabel(“my default tab”)
.setPosition ( 120, 230 )
.setId(1)
;

cp5.getTab(“extra”)
.activateEvent(true)
.setPosition ( 120 , 280 )
.setId(2)
;

// create a few controllers
cp5.addButton(“button”)
.setBroadcast(false)
.setPosition(100,100)
.setSize(80,40)
.setValue(1)
.setBroadcast(true)
.getCaptionLabel().align(CENTER,CENTER)
;

cp5.addButton(“buttonValue”)
.setBroadcast(false)
.setPosition(220,100)
.setSize(80,40)
.setValue(2)
.setBroadcast(true)
.getCaptionLabel().align(CENTER,CENTER)
;

cp5.addSlider(“slider”)
.setBroadcast(false)
.setRange(100,200)
.setValue(128)
.setPosition(100,160)
.setSize(200,20)
.setBroadcast(true)
;

cp5.addSlider(“sliderValue”)
.setBroadcast(false)
.setRange(0,255)
.setValue(128)
.setPosition(100,200)
.setSize(200,20)
.setBroadcast(true)
;

// arrange controller in separate tabs
cp5.getController(“sliderValue”).moveTo(“extra”);
cp5.getController(“slider”).moveTo(“global”);

// Tab ‘global’ is a tab that lies on top of any
// other tab and is always visible
}

void draw() {
background(myColorBackground);
fill(sliderValue);
rect(0,0,width,100);
}

void controlEvent(ControlEvent theControlEvent) {
if (theControlEvent.isTab()) {
println("got an event from tab : “+theControlEvent.getTab().getName()+” with id "+theControlEvent.getTab().getId());
}
}

void slider(int theColor) {
myColorBackground = color(theColor);
println("a slider event. setting background to "+theColor);
}

void keyPressed() {
if(keyCode==TAB) {
cp5.getTab(“extra”).bringToFront();
}
}

4

We kindly ask you to please format your code. This will make it easier for other community members to help you. If you need help you can check the FAQ section on code formatting. Thanks!

ezgif.com-gif-maker (1)

5

Hi @Vadimkuzmin,

You can only move the whole tab group (ControlWindow) to a different position.
you can test by adding ie.

void mousePressed() {
  if (mouseButton == RIGHT)
    cp5.getTab("default").getWindow().setPositionOfTabs(mouseX,mouseY);
}

the above moves the (invisible) ControlWindow upper/left for the Tabs to mouseX/mouseY on pressing right mouse button.

Cheers
— mnse

1 Like