# ControlP5 Vertical Toggle

**URL:** <https://discourse.processing.org/t/controlp5-vertical-toggle/39091>\
**Category:** Libraries\
**Created:** [October 5, 2022, 8:28am UTC](https://discourse.processing.org/t/controlp5-vertical-toggle/39091 "2022-10-05T08:28:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ghostsss](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ghostsss/32/16483_2.png) [@Ghostsss](https://discourse.processing.org/u/Ghostsss)\
**Post date:** [October 5, 2022, 8:28am UTC](https://discourse.processing.org/t/controlp5-vertical-toggle/39091/1 "2022-10-05T08:28:14Z")

</div>

Is there any easy way to draw the controlP5 toggle vertically ? (as shown in following way.)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/a/0a7482c93879613aa63fbb686f591f3d0e549812.png)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 6, 2022, 7:47am UTC](https://discourse.processing.org/t/controlp5-vertical-toggle/39091/2 "2022-10-06T07:47:19Z")

</div>

Hi @Ghostsss,

This is the linked post from the old forum I suppose:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/7006/controlp5-how-to-set-toggleswitch-vertical-check-switchmode)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

Did you try the last solution?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 6, 2022, 4:12pm UTC](https://discourse.processing.org/t/controlp5-vertical-toggle/39091/3 "2022-10-06T16:12:15Z")

</div>

On my system (MacOS) I had to change:

from: public void display(_PApplet_ theGraphics , Toggle c )  
to: to public void display( **PGraphics** theGraphics, Toggle c )

and add another function to get the value:

```auto
public void toggleValue(int value) {
  println(value);
}

```

---

<div class="post-metadata">

**Author:** ![Ghostsss](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ghostsss/32/16483_2.png) [@Ghostsss](https://discourse.processing.org/u/Ghostsss)\
**Post date:** [June 6, 2023, 7:53am UTC](https://discourse.processing.org/t/controlp5-vertical-toggle/39091/4 "2023-06-06T07:53:37Z")

</div>

Extra Information for reference.

One can use a RADIO BUTTON with 2 options to achieve a vertical toggle button.  
check out following example.

```auto
import controlP5.*;

ControlP5 cp5;

int myColorBackground = color(0,0,0);

RadioButton r1, r2;

void setup() {
  size(700,400);
  
  cp5 = new ControlP5(this);
  r1 = cp5.addRadioButton("radioButton")
         .setPosition(100,180)
         .setSize(20,20)
         //.setColorForeground(color(120))
         //.setColorActive(color(255))
         //.setColorLabel(color(255))
         .setItemsPerRow(1)
         .setSpacingColumn(50)
         .addItem("50",1)
         .addItem("100",2)
         ;
     
     for(Toggle t:r1.getItems()) {
       t.getCaptionLabel().setColorBackground(color(255,80));
       t.getCaptionLabel().getStyle().moveMargin(-7,0,0,-3);
       t.getCaptionLabel().getStyle().movePadding(7,0,0,3);
       t.getCaptionLabel().getStyle().backgroundWidth = 45;
       t.getCaptionLabel().getStyle().backgroundHeight = 13;
     }
   
}

void draw() {
  background(myColorBackground);
}

void keyPressed() {
  switch(key) {
    case('0'): r1.deactivateAll(); break;
    case('1'): r1.activate(0); break;
    case('2'): r1.activate(1); break;
  }
  
}

void controlEvent(ControlEvent theEvent) {
  if(theEvent.isFrom(r1)) {
    print("got an event from "+theEvent.getName()+"\t");
    for(int i=0;i<theEvent.getGroup().getArrayValue().length;i++) {
      print(int(theEvent.getGroup().getArrayValue()[i]));
    }
    println("\t "+theEvent.getValue());
    myColorBackground = color(int(theEvent.getGroup().getValue()*50),0,0);
  }
}

void radioButton(int a) {
  println("a radio Button event: "+a);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 6, 2023, 9:52am UTC](https://discourse.processing.org/t/controlp5-vertical-toggle/39091/5 "2023-06-06T09:52:07Z")

</div>

> [@Ghostsss](#):
>
> ```auto
> void keyPressed() {
> switch (key) {
> case('0'): r1.deactivateAll(); break;
> case('1'): r1.activate(0); break;
> case('2'): r1.activate(1); break;
> }
> }
> 
> ```

Just for clarification, keyword [`case`](https://processing.org/reference/case.html) doesn’t require parenthesis on its argument.  
We can also replace variable [_key_](https://processing.org/reference/key.html) w/ [_keyCode_](https://processing.org/reference/keyCode.html):

```auto
void keyPressed() {
  switch (keyCode) {
    case '0': r1.deactivateAll(); break;
    case '1': r1.activate(0); break;
    case '2': r1.activate(1); break;
  }
}

```