Processing ControlP5 library example 2 : Style and setValue

kasperkamperman — Mon, 08 Mar 2010 20:50:22 +0000

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>


Related posts:
Processing ControlP5 library example 1 : user interface

Processing ControlP5 library example 1 : user interface

kasperkamperman — Mon, 08 Mar 2010 08:18:48 +0000

ControlP5 is a GUI and controller library for Processing. You can easy add controllers to your program. You can download the ControlP5 library at the site of Andreas Schlegel. After downloading und unpacking you can copy the library in the ‘libraries’ subfolder of the Processing sketches folder.

The library comes with a lot of examples, but it lacks a bit an overview how to use different elements together. In this article and example an overview of some basic GUI elements and how you can handle their events.

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

controlP5 basic interface elements

Element	Description
	Bang : A bang controller triggers an event when pressed. parameters : name, x, y, width, height `controlP5.addBang("bang1",10,10,20,20);`
	Button : A button executes after release. parameters : name, value (float), x, y, width, height `controlP5.addButton("button1",1,70,10,60,20);`
	Toggle : A toggle can have two states, true and false. Where true has the value 1 and false is 0. parameters : name, default value (boolean), x, y, width, height `controlP5.addToggle("toggle1",false,170,10,20,20);`
	Slider : A slider is either used horizontally or vertically. When the width is bigger, you get a horizontal slider. When the height is bigger, you get a vertical slider. parameters : name, minimum, maximum, default value (float), x, y, width, height `controlP5.addSlider("slider2",0,255,128,70,80,100,10);`
	Knob : A round turning dial knob. Counts from 0-360 degrees. parameters :name, minimum, maximum, default value (float, x, y, diameter `controlP5.addKnob("knob1",0,360,0,70,120,50);`
	NumberBox : Box that displays a number. You can change the value by click and hold in the box and drag the mouse up and down. parameters : name, default value (float), x, y, width, height `controlP5.addNumberbox("numberbox1",50,170,120,60,14);`

variables and setup

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
// ControlP5 Example 1 : Basic UI elements

 

import controlP5.*;    // import controlP5 library

ControlP5 controlP5;   // controlP5 object



// array to store 7 colors that can be changed by the different 

// user interface elements

color [] colors = new color[7]; 



void setup() {

  size(330,260);

  smooth();

    

  controlP5 = new ControlP5(this);

  

  // description : a bang controller triggers an event when pressed. 

  // parameters  : name, x, y, width, height

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

    

  // description : a button executes after release

  // parameters  : name, value (float), x, y, width, height

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

  

  // description : a toggle can have two states, true and false

  //               where true has the value 1 and false is 0.

  // parameters  : name, default value (boolean), x, y, width, height

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

  

  // description : a slider is either used horizontally or vertically.

  //               width is bigger, you get a horizontal slider

  //               height is bigger, you get a vertical slider.  

  // parameters  : name, minimum, maximum, default value (float), x, y, width, height

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

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

  

  // description : round turning dial knob

  // parameters  : name, minimum, maximum, default value (float, x, y, diameter

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

  

  // parameters : name, default value (float), x, y,  width, height

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

}

The draw() loop

In the draw loop you don’t have to do anything with the controlP5 elements, since you’ve added them already in the setup() function. In the draw-loop the rectangles are draw, with the color value from the colors[] array. The values in the colors[] array are modified by the controller events.

1
2
3
4
5
6
7
8
9
10
void draw() { 

  background(0);  // background black

  

  // draw 7 squares and use as a fill color the colors from the colors array

  for(int i=0;i<7;i++) {        // loop through colors array

    stroke(255);

    fill(colors[i]);            // use color to fill

    rect(10+(i*45),210,40,40);  // draw rectangle

  }  

}

controlEvent

The function controlEvent is an event listener for all the user elements. In this case we only want to listen to controller events ( if(theEvent.isController()) ). By getting the name ( theEvent.controller().name()) ) and the value ( theEvent.controller().value()) ) of the event we can program some logic ( if/else ) and change some variables in Processing ( in this case the values in the color[] array ).

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
void controlEvent(ControlEvent theEvent) {

  /* events triggered by controllers are automatically forwarded to 

     the controlEvent method. by checking the name of a controller one can 

     distinguish which of the controllers has been changed.

  */ 

 

  /* check if the event is from a controller otherwise you'll get an error

     when clicking other interface elements like Radiobutton that don't support

     the controller() methods

  */

  

  if(theEvent.isController()) { 

    

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

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

    

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

      colors[0] = colors[0] + color(40,40,0);

      if(colors[0]>255) colors[0] = color(40,40,0);    

    }

    

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

      colors[1] = colors[1] + color(40,0,40);

      if(colors[1]>255) colors[1] = color(40,0,40);

    }

    

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

      if(theEvent.controller().value()==1) colors[2] = color(0,255,255);

      else                                 colors[2] = color(0,0,0);

    }

    

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

      colors[3] = color(theEvent.controller().value(),0,0);

    }

    

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

      colors[4] = color(0,theEvent.controller().value(),0);

    }

      

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

      colors[5] = color(0,0,theEvent.controller().value());

    }

    

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

      colors[6] = color(theEvent.controller().value());

    } 

    

  }  

}

kasperkamperman.com» Processing – kasperkamperman.com

Processing ControlP5 library example 2 : Style and setValue

Processing ControlP5 library example 1 : user interface

variables and setup

The draw() loop

controlEvent