Processing Buttons and Sliders

Introduction

Buttons and sliders are usefull elements in a sketch to quickly test different parameters or to make an interactive application interface. It's possible to create you own buttons from scratch but there are also some interesting libraries available on the web like the library named controlP5. You can download ControlP5 from www.sojamo.de/libraries/controlP5/. This library has a range of interface possibilities like checkerboxes, sliders, buttons, and toggles.

This tutorial will focus on the application of sliders and buttons and how to customize them.

Basic sketch setup

We start the sketch by loading the ControlP5 library into the sketch:

import controlP5.*;

We define a controlP5 object which is named: MyController

ControlP5 MyController;

We define three integer global variables who will be used later in the tutorial.

int R = 40;

int G = 200;

int B = 200;

Now we type the following in the setup:

void setup() {

size(400,400);

MyController = new ControlP5(this);

End the Setup Function with a curly bracket

}

Making customizable sliders

We now focus on making sliders.

A slider is created by typing the following line in the setup:

MyController.addSlider("slider",0,200,128,20,100,10,100);

As you can see it has a lot of different parameters.

A.addSlider("B",C,D,E,F,G,H,J);

A is the name of the controlP5 object we defined before: MyController

B is the name of the slider and also will be displayed right or below the slider, depending if it's a horizontal or vertical slider.

C and D define the range of the slider. A is the minimum and B is the maximum.

E Is the starting value of the slider.

F is the X location of the top left corner of the slider.

G is the Y location of the top left corner of the slider.

H is the with of the slider

J is the height of the slider

If H is smaller then J, the slider will be vertical. If J is smaller then H, the slider will be horizontal.

ControlP5 has default background and foreground colors of the sliders: a dark blue and a ligthblue. When active the slider is a lighter blue. The text color of the slider is by default white.

You can edit these color parameters by adding some extra lines of code.

To set the background color:

MyController.controller("slider").setColorBackground(R,G,B);

To set the foreground color:

MyController.controller("slider").setColorForeground(R,G,B);

To set the active color:

MyController.controller("slider").setColorActive(R,G,B);

To set the label text color:

MyController.controller("slider").setColorLabel(R,G,B);

"Slider" in all cases can be replaced by every name of a slider you want to refer it to.

R, G, B, should be replaced by integers representing RGB colors. Instead of RGB values.

You can also select a color with the color selector application of processing. Select a color with application as shown on the right image and copy the value after the Number sign symbol (#). If you want to use this color for you slider foreground for instance. It will look like this:

MyController.controller("slider").setColorForeground(#FC0000);

Just some examples:

(#FC0000) = a red color (#0BFC00) = a green color (#002CFC) = a blue color

Using a slider in a processing sketch

We will continue with the processing sketch we started earlier in this tutorial. In this step we will make three sliders to change the background of our sketch. We allready defined the global variables R,G,B earlier in the sketch. Now we will type make the sliders to change them.

In the setup, type the following sliders with a range of 0-255 after: MyController = new ControlP5(this);

The R (red slider):

MyController.addSlider("R",0,200,128,20,100,10,100); MyController.controller("R").setColorForeground(#FC0000);

The G (Green slider):

MyController.addSlider("G",0,200,128,20,100,10,100); MyController.controller("G").setColorForeground(#0BFC00);

The B (Blue slider):

MyController.addSlider("B",0,200,128,20,100,10,100); MyController.controller("G").setColorForeground(#002CFC);

Now we start typing the draw function:

void Draw(){

Choose a background color:

background(R,G,B);

End the Draw Function with a curly bracket.

}

Using a slider with PeasyCam

Now we will show how to use PeasyCam in combination with PeasyCam and openGL. Continue with the previous sketch. We first need to import the PeasyCam and openGL library:

import processing.opengl.*;

PeasyCam cam;

PMatrix3D currCameraMatrix;

PGraphics3D g3;

In the void setup() we have to change the 2D worldsize into an openGL world size:

size(800, 800, OPENGL);

And define a PeasyCam camera:

cam = new PeasyCam(this, 200,300,100, 500);

If you start the processing sketch, it first looks that there are no large differences with the 2D version from before, other then that the sliders are located at a different location on the screen. But when you start using the PeasyCam navigation controls, you will notice that the sliders are a 2D projection in a 3D world. The problem is that you cannot longer use the sliders as they are projected on the 3D world plane.

To solve this problem write after you defined the sliders in the setup:

MyController.setAutoDraw(false);

We will make a GUI interface (Graphical user interface) function.

In the void Draw() function add the following line:

gui();

The GUI function will be as follows:

void gui() {

currCameraMatrix = new PMatrix3D(g3.camera);

camera();

MyController.draw();

g3.camera = currCameraMatrix;

}

The sliders are now locked again. To test that the environment is still 3D we enter a Sphere and give it the stroke color of the R slider.

Type in the void draw() function before you call the gui() function:

noFill();

stroke(R);

pushMatrix();

translate(300,200,40);

sphere(50);

popMatrix();

You now have a sphere with a radius of 40 moved to coordinates 300,200,40 and it has no fill but a stroke color of the R slider value. Try to navigate with PeasyCam around the sphere.

Making buttons

It's time for a short introduction to buttons. We will ad a button to the sketch that can turn the sphere on or off.

Create a button with A.addButton("B",C,D,E,F,G);

A is the name of the controlP5 object we defined before: MyController .

B is the name of the button and also will be displayed on top of the slider.

C is the value of the button. D is the X location of the top left corner of the slider.

E is the Y location of the top left corner of the slider.

F is the with of the slider.

G is the height of the slider.

Before we create the button, we will first create two global variables.

The first one is: int On_Of the second one: color CL

int ON_OF = 0; color CL = #00FF1B;

The default color of CL is green.

In the void setup() function we add the button with the name : "On_Of" after the sliders and before the MyController.setAutoDraw(false);

MyController.addButton("On_Of",10,20,60,80,20);

The button is now located above the sliders. You can allready start the processing sketch to see the button, but it will not do anything yet.

In the void draw() function we will make an adabtable forground color for the button, that can be changed if the global variable CL is changed:

MyController.controller("On_Of").setColorBackground(CL);

When the button is pressed, the public void On_Of() will be called. We will now write the following rule if the button is pressed. The global integer variable ON_OF will be used to determine if the button is on or of. Wit some simple if rules we can change this value between 0 and 1.

public void On_Of(){

if(ON_OF == 0){

ON_OF = 1;

CL = #FF0022;}

else{

ON_OF = 0;

CL = #00FF1B;

}

}

If ON_OF = 1, CL is Red. If ON_OF = 0, CL is green.

The only thing what still left to do is adding the rule that determines if the sphere should be displayed. For that, we need to go back to the void draw() function. The rule we use is that if ON_OF = 1 the stroke weight is 0 so it is invisible if ON_OF = 0, the stroke weight = 1; Type the following at the start of the draw function:

if( ON_OF == 1){

strokeWeight(0);

}

else{

strokeWeight(1);

}

The complete script

In case you made any mistakes the whole script of this tutorial is placed here.

import controlP5.*;

import peasy.*;

import processing.opengl.*;

PeasyCam cam;

PMatrix3D currCameraMatrix;

PGraphics3D g3;

int R = 40;

int G = 200;

int B = 200;

ControlP5 MyController;

color CL = #00FF1B;

int ON_OF = 0;

void setup() {

size(800, 800, OPENGL);

g3 = (PGraphics3D)g;

cam = new PeasyCam(this, 200,300,100, 500);

MyController = new ControlP5(this);

MyController.addSlider("R",0,255,128,20,100,10,100);

MyController.controller("R").setColorForeground(#FC0000);

MyController.addSlider("G",0,255,128,70,100,10,100);

MyController.controller("G").setColorForeground(#0BFC00);

MyController.addSlider("B",0,255,128,120,100,10,100);

MyController.controller("B").setColorForeground(#002CFC);

MyController.addButton("On_Of",10,20,60,80,20);

MyController.setAutoDraw(false);

}

void draw(){

if( ON_OF == 1){

strokeWeight(0);

}

else{

strokeWeight(1);}

background(R,G,B);

noFill();

stroke(R);

pushMatrix();

translate(300,200,40);

sphere(50);

popMatrix();

gui();

MyController.controller("On_Of").setColorBackground(CL);

}

void gui() {

currCameraMatrix = new PMatrix3D(g3.camera);

camera();

MyController.draw();

g3.camera = currCameraMatrix;

}

public void On_Of(){

if(ON_OF == 0){

ON_OF = 1;

CL = #FF0022;

}

else{

ON_OF = 0;

CL = #00FF1B;

}

}