Processing ControlP5 example 2: Style and setValue

Updated code in 2017 to work with the version 2.2.6 of ControlP5.

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

controlP5 styling interface elements

Download the zip-file ( with all the examples ) :

This example is pretty straight forward. You give some style the controlP5 object with the ‘ControlFont’ 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.
// ControlP5 Example 2 : Style UI elements and setValue
// ControlP5 by Andreas Schlegel : 

import controlP5.*;
ControlP5 controlP5;

void setup() {
 controlP5 = new ControlP5(this);
 // change the default font to Verdana
 PFont p = createFont("Verdana",10); 
 ControlFont font = new ControlFont(p);
 // change the original colors
 // add the elments ( see example 1 for the parameters )
 Slider s = controlP5.addSlider("slider2")
 // change sliderMode of the Slider object. The default is Slider.FIX
 Numberbox n = controlP5.addNumberbox("numberbox1")
 // change Multiplier of the Numberbox ( default is 1 )
void draw() { 
 background(0); // background black

void controlEvent(ControlEvent theEvent) {
 if(theEvent.isController()) { 
 print("control event from : "+theEvent.getController().getName());
 println(", value : "+theEvent.getController().getValue());
 // clicking on bang1 sets toggle1 value to 1 (true) 
 if(theEvent.getController().getName()=="bang1") {
 // clicking on button1 sets toggle1 value to 0 (false)
 if(theEvent.getController().getName()=="button1") {
 // dragging slider1 changes the value of slider2
 if(theEvent.getController().getName()=="slider1") {
 float value = theEvent.getController().getValue();
 // prevent warnings at start
 if(controlP5.getController("slider2") != null) {
 // changing the value of numberbox1 turns knob1
 if(theEvent.getController().getName()=="numberbox1") {

8 thoughts on “Processing ControlP5 example 2: Style and setValue”

  1. ¿Can you add image in background for one listBox.?

    Now I have this: setBackgroundColor(color(100,0,0));

    But I want a image and not a background color.

    Sorry for my bad english.Thanks

  2. Hi, how do i make differents sizes of fonts for my buttoms? I set only size but i can’t do it for other buttoms in the same scketch. All buttoms are the same size that the first buttom. Thanks!

  3. hello sir
    i want to send the number to the arduino through processing gui and i have used the text field for the entering the numbers (integers) how to send these numbers to the arduino port the code which i have wrote i am pasting here please guide me

    **removed code**

  4. Sorry, I don’t have time to answer questions about integrating technologies together. Try to make baby steps. First see if you can send information to Arduino without the GUI, then start using the GUI.

  5. You can load an image on a controlP5 screen, as background, and then generate controllers on top of it.
    def setup():
    global img
    size(900, 600)

    global cp5
    cp5 = ControlP5(this)
    img = loadImage(“rbtarm.jpg”)

    The Knob(‘m2’) is placed on the image and work as it’s supposed to.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.