GUI for Processing

Use the following classes to create useful graphical user interfaces for your Processing sketches

Dial class

Create simple dials with customizable features.

Button class

Create simple rectangle or round buttons that latch or are momentary.

Slider class

Create simple sliders with customizable features.

Dial Class Documentation

Setup:

Use the following outline to create a new Dial object. For examples purposes, myDial is a generic name for a new Dial object. This generic name should be replaced with a more descriptive name for the Dial and the variable it will control.

step 1:

Copy and paste the Dial class into your sketch

step 2:

Declare new Dial object as a global object:

Dial myDial;

step 3:

Identify the appropriate constructor for your needs and initialize the Dial object within the setup method of your sketch:

float myVariable = 0;

void setup() {
  myDial = new Dial("Dial", 400, 300, myVariable)
}

step 4:

Add the update method within the mouseDragged method for UI control:

void mouseDragged() {
  myDial.update();
}

step 5:

Assign the variable to controlled by the dial position within the draw method to update on each cycle:

void draw() {
  myVariable = myDial.getDialValue();
}

step 6:

Display the dial within the draw method.

void draw() {
  background(255);
  myVariable = myDial.getDialValue();
  myDial.display();
}

step 7:

Customize dial if necessary using attributes from the attribute list.

float myVariable = 0;

void setup() {
  myDial = new Dial("Dial", 400, 300, myVariable)
  // Add customization attributes here
  myDial.dialColor = color(23, 44, 20); 
}

Attribute List

Use dot syntax to access individual attributes. Reminder: myDial is a generic name for a Dial object used for example purposes and it should be replaced by a more descriptive name in a sketch.

Button Class Documentation

Setup:

Use the following outline to create a new Button object. For examples purposes, myButton is a generic name for a new Button object. This generic name should be replaced with a more descriptive name for the Button and the variable it will control.

step 1:

Copy and paste the Button class into your sketch

step 2:

Declare new Button object as a global object:

Button myButton;

step 3:

Initialize the Button object within the setup method of your sketch:

boolean myVariable = false;

void setup() {
  myButton = new Button ("Name", 400, 300, myVariable)
}

NOTE:

The Button class constructor requires a name, the x position, the y position, and the variable controlled. The constructor parameter order and variable types are below:

(String name, float x, float y, float value) 

step 4:

Latch button: Add the update method within the mouseClicked method for UI control:

void mouseDragged() {
  myButton.update();
}

Momentary button: Add the updateMomentary method within the draw method for UI control:

void draw() {
  myButton.updateMomentary();
}

step 5:

Assign the variable to controlled by the button within the draw method to update on each cycle:

void draw() {
  myVariable = myButton.getValue();
  myButton.updateMomentary(); // If using momentary button
}

step 6:

Display the button within the draw method.

void draw() {
  background(255);
  myVariable = myButton.getValue();
  myButton.updateMomentary(); // If using momentary button
  myButton.display();
}

step 7:

Customize button if necessary using attributes from the attribute list.

boolean myVariable = false;

void setup() {
  myButton= new Button("Name", 400, 300, myVariable)
  // Add customization attributes here
  myButton.setButtonType("ROUND");
}

Attribute List

Use dot syntax to access individual attributes. Reminder: myButton is a generic name for a Button object used for example purposes and it should be replaced by a more descriptive name in a sketch.

Slider Class Documentation

Setup:

Use the following outline to create a new Slider object. For examples purposes, mySlider is a generic name for a new Slider object. This generic name should be replaced with a more descriptive name for the Slider and the variable it will control.

STEP 1:

Copy and paste the Slider class into your sketch

STEP 2:

Declare new Slider object as a global object:

Slider mySlider;

STEP 3:

Identify the appropriate constructor for your needs and initialize the Slider object within the setup method of your sketch:

float myVariable = 10;

void setup() {
  mySlider = new Slider("Name", 400, 300, myVariable)
}

NOTE:

The x and y parameters use the default rectMode(LEFT) indicating the slider is positioned based on the upper left corner of the slider.

step 4:

Add the update method within the mouseClicked method for UI control:

void mouseDragged() {
  mySlider.update();
}

step 5:

Assign the variable to controlled by the button within the draw method to update on each cycle:

void draw() {
  myVariable = mySlider.getValue();
}

step 6:

Display the slider within the draw method.

void draw() {
  background(255);
  myVariable = mySlider.getValue();
  mySlider.display();
}

step 7:

Customize the slider if necessary using attributes from the attribute list.

float myVariable = 10;

void setup() {
  mySlider = new Slider("Name", 400, 300, myVariable)
  // Add customization attributes here
  mySlider.setOrientation("VERTICAL");
}

Attribute List

Use dot syntax to access individual attributes. Reminder: mySlider is a generic name for a slider object used for example purposes and it should be replaced by a more descriptive name in a sketch.