// utilizar la libreria ControlP5
import controlP5.*;
import processing.serial.*;  // utilizar la liberia processing.serial

// definir la variable cp5 del tipo ControlP5
ControlP5 cp5;
Serial serial;                // definir la variable serial del tipo Serial

// el mensaje que deseamos mostrar en el LCD
String Mensaje = "";

// configuración inicial
void setup() {

  serial = new Serial(this, Serial.list()[0], 9600);  // inicializamos el puerto serial a 9600 baudios
  String puerto = Serial.list()[0];                  //definimos la variable puerto de tipo cadena
  size(440, 140); // tamaño de la ventana
  noStroke();     // no dibujar el border de los circulos

  // crear el objeto ControlP5
  cp5 = new ControlP5(this);

  // crear un tipo de letra, y su tamaño
  PFont font = createFont("arial", 20);
  textFont(font);

  // crear un campo de texto para ingresar el mensaje
  cp5.addTextfield("Mensaje", 20,20, 400,40)
    .setFont(font)
    .setFocus(true)
    .setColor(color(255, 0, 0));

}

// dibujar cada frame
void draw()
{
  background(0xFF444444);  // color gris del fondo
  text(Mensaje, 20, 100); // último mensaje "enviado"
}

// actuar cuando ocurra un evento con los Sliders
void controlEvent(ControlEvent theEvent) {
  // guardar el nombre y texto del evento
  String nombre = theEvent.getController().getName();
  String texto = theEvent.getController().getStringValue();
  // muestra en la consola los datos del evento
  println("evento: " + nombre + " / texto: "+texto);
  serial.write(texto);
}