Processing ControlP5 library example 2 : Style and setValue

In this example you’ll see how to style the GUI that you’ve made with the ControlP5 library ( see first article : Processing ControlP5 library example 1 : user interface for the basics. )

controlP5 styling interface elements

View the sketch in action at openprocessing.org.
Download the zip-file ( with all the examples ) : controlP5-examples.zip

This example is pretty straight forward. You give some style the controlP5 object with the ’setControlFont’ and ’setColor….’ methods.

In the controlEvent function we use the values of some control elements to control the value of others. The setValue method is useful when you want to monitor variables in a visual way.

• Slider1 controls Slider2.
• Bang1 sets Toggle1 to 1 (on/true).
• Button1 sets Toggle1 to 0 (off/false).
• Numberbox1 controls Knob1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// ControlP5 Example 2 : Style UI elements and setValue

// ControlP5 by Andreas Schlegel : http://www.sojamo.de/libraries/controlP5/



import controlP5.*;

ControlP5 controlP5;



void setup() {

  size(300,260);

  smooth();

  

  controlP5 = new ControlP5(this);

  

  // change the default font to Verdana

  PFont p = createFont("Verdana",9); 

  controlP5.setControlFont(p);

  

  // change the original colors

  controlP5.setColorForeground(0xffaa0000);

  controlP5.setColorBackground(0xff660000);

  controlP5.setColorLabel(0xffdddddd);

  controlP5.setColorValue(0xffff88ff);

  controlP5.setColorActive(0xffff0000);

  

  // add the elments ( see example 1 for the parameters )

  controlP5.addBang("bang1",10,10,20,20);    

  controlP5.addButton("button1",1,70,10,60,20);  

  controlP5.addToggle("toggle1",false,170,10,20,20);    

  controlP5.addSlider("slider1",0,255,128,10,80,10,100);

  

  Slider s = controlP5.addSlider("slider2",0,255,128,70,80,100,10);

  // change sliderMode of the Slider object. The default is Slider.FIX

  s.setSliderMode(Slider.FLEXIBLE); 

    

  controlP5.addKnob("knob1",0,360,0,70,120,50);

  

  Numberbox n = controlP5.addNumberbox("numberbox1",50,170,120,60,14);

  // change Multiplier of the Numberbox ( default is 1 )

  n.setMultiplier(30);

}



void draw() { 

  background(0);  // background black

}



void controlEvent(ControlEvent theEvent) {

  

  if(theEvent.isController()) { 

    

    print("control event from : "+theEvent.controller().name());

    println(", value : "+theEvent.controller().value());

    

    // clicking on bang1 sets toggle1 value to 1 (true)      

    if(theEvent.controller().name()=="bang1") {

     controlP5.controller("toggle1").setValue(1);     

    }

    

    // clicking on button1 sets toggle1 value to 0 (false)

    if(theEvent.controller().name()=="button1") {

     controlP5.controller("toggle1").setValue(0);     

    }

    

    // dragging slider1 changes the value of slider2

    if(theEvent.controller().name()=="slider1") {

     controlP5.controller("slider2").setValue(theEvent.controller().value());

    }

    

    // changing the value of numberbox1 turns knob1

    if(theEvent.controller().name()=="numberbox1") {

     controlP5.controller("knob1").setValue(theEvent.controller().value());

    }

    

  }  

}

</pre>