{~} Anna Kaziunas France

The Assignment

• Write a user interface for an input &/or output device

The Project: Using a GUI to Control Processing Output with ControlIP5, Firmata via Serial

I created this simple interface to control turning on and off an LED that is attached to a microcontroller via the serial port on my Mac. I wanted to see if I could get the ControlIP5 (used to create the GUI), Firmata and serial libraries working together before I tried using more complex hardware. I intend to experiment with driving multiple servos and possibly tinkering with bluetooth using the NXT library as an “cheap” way (it’s “cheap” because I already own the Mindstorms hardware) to play around with bluetooth without buying additional bluetooth modules.

The Interface: Default / Initial State:

The interface is simple – the Turn On button turns the light on and the Turn Off button turns it off.

The Interface: Button Rollover State:

Here is the overall hardware setup:

Here’s the Processing code:

/*-------------------------------------------------------------------
 * Fab Academy -- Module 09: Interface Programming
 *--------------------------------------------------------------------
 * Assignment: Write a user interface for an input &/or output
 * device.
 *--------------------------------------------------------------------
 * Purpose:  This program is a test to get the controlIP5, Firmata,
 * and serial libraries working together through the serial port.
 * This program uses a simple button GUI interface to turn on / of an
 * LED.
 *--------------------------------------------------------------------
 * Anna Kaziunas France - 30 March 2010
 * Combined / Modified example code from:
 * controlIP5 buttons example (included the library download)
 *------------------------------------------------------------------*/

import processing.serial.*;
import cc.arduino.*;
import controlP5.*;

ControlP5 controlP5;
// we have to use controlP5.Button here since there
// would be a conflict if we only use Button to declare button b.
controlP5.Button b;
Arduino arduino;

// Variables
int ledPin = 11;
int buttonValue = 0;
int myColor = color(0);

void setup() {
  arduino = new Arduino(this, Arduino.list()[2], 57600);
  arduino.pinMode(ledPin, Arduino.OUTPUT);
  size(640,480);
  smooth();
  frameRate(30);
  controlP5 = new ControlP5(this);
  controlP5.addButton("Turn_On",255,200,80,100,70);
  controlP5.addButton("Turn_Off",0,200,160,100,70);
  println(Arduino.list());
}

void draw()
{
  background(myColor);
  fill(buttonValue);
  rect(20,20,width-40,height-40);
}

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.controller().name());

}

// function buttonA will receive changes from
// controller with name Turn_On
public void Turn_On(int theValue) {
  println("a button event from Turn_On: "+theValue);
  myColor = theValue;
  arduino.digitalWrite(ledPin, Arduino.HIGH);
}

// function buttonB will receive changes from
// controller with name Turn_Off
public void Turn_Off(int theValue) {
  println("a button event from Turn_Off: "+theValue);
  myColor = theValue;
  arduino.digitalWrite(ledPin, Arduino.LOW);
}

Skills Learned

• I learned how to find, utilize and manipulate additional Processing libraries that enabled me to create a simple user interface from a computer to a physical object (LED).

Tools Used

• Processing, ControlIP5 & Firmata libraries
• Arduino ATTMega, LED

I saw a project in Make magazine (issue 17) that used the open source software Context Free – download it at: http://www.contextfreeart.org. It enables you to make scalable artwork using their simple code. Neat.

I gave it a try. The code is easy to adjust and modify and can be rendered over and over to produce different images. Below are some of the configurations I came up with. I still need to kick the tires on other patterns.

Context Free code Used For the Green Tendrils with blue ends – all other colors are just hue variants:
startshape TENDRILS
rule TENDRILS {
ARM { }

ARM { flip 30 }
ARM { flip 60 }
ARM { flip 90 }
ARM { flip 90 }
}
rule ARM 98 {
CIRCLE { }
CIRCLE { size 0.9 hue 500 sat .6 b .8}
ARM { y 0.2 size 0.99 rotate 4 }
}
rule ARM 2 {
CIRCLE { }
CIRCLE { size 0.9 }
ARM { y 0.2 size 0.99 flip 90 }
ARM { y 0.3 size 0.6 brightness 0.2 }
}