ControlP5 Vertical Toggle

Processing Libraries
1

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

image

2

Hi @Ghostsss,

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

Did you try the last solution?

3

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:

public void toggleValue(int value) {
  println(value);
}
1 Like
4

Extra Information for reference.

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

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);
}
1 Like
5

Just for clarification, keyword case doesn’t require parenthesis on its argument.
We can also replace variable key w/ keyCode:

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