// Se utiliza las librerias ControlP5 y Serial del Processing
import controlP5.*;
import processing.serial.*;

// Se define la variable cP5 del tipo ControlP5
ControlP5 cP5;

// Se le da nombres a los tres Knob y al Serial
Knob PerRed;
Knob PerGre;
Knob PerBlu;
Serial serial;

// Se necesitan inicializar el valor de los colores RGB
// en este caso lo hacemos en 128
int Red = 128;
int Gre = 128;
int Blu = 128;

// Configuración inicial
void setup() {
  size(700, 550);  //Tamaño de la ventana

  cP5 = new ControlP5(this);  //Crea el objeto ControlP5

  // Crea el Knob del color Rojo
  PerRed = cP5.addKnob("R")
    .setRange(0, 128)
      .setValue(86)
        .setPosition(100, 280)
          .setRadius(100)
            .setNumberOfTickMarks(20)
              .setTickMarkLength(8)
                .setLabelVisible(false)
                  .setColorForeground(color(255))
                    .setColorBackground(color(0))
                      .setColorActive(color(255, 0, 0))
                        .setDragDirection(Knob.HORIZONTAL)
                          ;
  // Crea el Knob del color Verde
  PerGre = cP5.addKnob("G")
    .setRange(0, 128)
      .setValue(128)
        .setPosition(250, 110)
          .setRadius(100)
            .setNumberOfTickMarks(20)
              .setTickMarkLength(8)
                .setLabelVisible(false)
                  .setColorForeground(color(255))
                    .setColorBackground(color(0))
                      .setColorActive(color(0, 255, 0))
                        .setDragDirection(Knob.HORIZONTAL)
                          ;
  // Crea el Knob del color Azul
  PerBlu = cP5.addKnob("B")
    .setRange(0, 128)
      .setValue(170)
        .setPosition(400, 280)
          .setRadius(100)
            .setNumberOfTickMarks(20)
              .setTickMarkLength(8)
                .setLabelVisible(false)
                  .setColorForeground(color(255))
                    .setColorBackground(color(0))
                      .setColorActive(color(0, 0, 255))
                        .setDragDirection(Knob.HORIZONTAL)
                          ;

  String puerto = Serial.list()[0];
  serial = new Serial(this, puerto, 9600);
}

// Se dibuja cada frame
void draw() {
  background(0xFF444444);  //Color Gris del fondo

  fill(Red, Gre, Blu);
  rect(50, 90, 600, 415);
  fill(0xFF444444);
  rect(55, 95, 590, 405);
  fill(Red, 0, 0);
  ellipse(200, 380, 220, 220);
  fill(0, Gre, 0);
  ellipse(350, 210, 220, 220);
  fill(0, 0, Blu);
  ellipse(500, 380, 220, 220);
  fill(Red, Gre, Blu);
  text("ROJO", 60, 490);
  fill(0, Gre, 0);
  textSize(30);
  text("VERDE", 445, 135);
  fill(0, 0, Blu);
  textSize(30);
  text("AZUL", 350, 490);
  fill(255);
  textSize(25);
  text("FABIO NELSON VALENCIA", 190, 540);
}

// Como se va a actuar cuando ocurra un evento con los Knobs
void controlEvent(ControlEvent evento) {
  String nombre = evento.getController().getName();
  int valor = int(evento.getController().getValue());
  serial.write(nombre + valor);

  // Guarda el valor en la variable para cada color,
  // cuando se usa cada Knob
  if (nombre == "R") {
    Red = valor;
  }
  if (nombre == "G") {
    Gre = valor;
  }
  if (nombre == "B") {
    Blu = valor;
  }
}