# How can you move tabs?

**URL:** <https://discourse.processing.org/t/how-can-you-move-tabs/40520>\
**Category:** Libraries\
**Created:** [January 9, 2023, 10:56am UTC](https://discourse.processing.org/t/how-can-you-move-tabs/40520 "2023-01-09T10:56:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [January 9, 2023, 10:56am UTC](https://discourse.processing.org/t/how-can-you-move-tabs/40520/1 "2023-01-09T10:56:15Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/9/89d7a7041ea31d8c7f400f85b35228ed1caaee43.jpeg)

---

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [January 9, 2023, 11:04am UTC](https://discourse.processing.org/t/how-can-you-move-tabs/40520/3 "2023-01-09T11:04:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [January 9, 2023, 1:37pm UTC](https://discourse.processing.org/t/how-can-you-move-tabs/40520/4 "2023-01-09T13:37:00Z")

</div>

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](https://discourse.processing.org/faq#format-your-code). Thanks!

![ezgif.com-gif-maker (1)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/4/34521338de6902479873291389bf53a11d12237d.gif)

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [January 9, 2023, 2:52pm UTC](https://discourse.processing.org/t/how-can-you-move-tabs/40520/5 "2023-01-09T14:52:12Z")

</div>

Hi @Vadimkuzmin,

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

```auto
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