Controlando Arduino con el iPAD

Esta semana se realizo una comunicacion entre el  iPad y la PC, por medio de un protocolo conocido como OSC (Open Sound Control) ,es un protocolo de comunicaciones que permite comunicar instrumentos de música, computadoras y otros dispositivos multimedia (por ejemplo móviles o PDA's equipados con bluetooth) pensado para compartir información musical en tiempo real sobre una red. se podría decir que es el reemplazo del protocolo MIDI que se trata de un protocolo de comunicación serial estándar que permite a los computadores, sintetizadores, secuenciadores , controladores y otros dispositivos musicales electrónicos para comunicarse y compartir información para la generación de sonidos

OSC usa el protocolo de Internet UDP para realizar la comunicación, por esa razón como requisito necesitamos que los dispositivos se encuentran en la misma red, conocer su dirección IP y abrir un puerto de comunicación.

lo que haremos es Crear una plantilla personalizada con el touchOSC editor, la cual usaremos como control para variar la intensidad de un led RGB y poder crear colores, abriremos un enlace de comunicación entre processing y touchOSC, por ultimo mandaremos toda la informacion recibida a una placa arduino conectada por el puerto serie y veremos el resultado obtenido en el led RGB,

1-Instalando lo necesario

Materiales Necesarios

• Arduino UNO
• 1 LED RGB
• 1 iPad o iPod
• Tienen que estar todos conectados a una misma Red

Para todo esto necesitamos tener instalado 

• IDE de Arduino
• Processing
• Touch Editor

Lo que hay que tener instalado en el dispositivo Móvil

(Te dejo los Enlaces de donde lo puedes descargar )

• TouchOSC 
•    App Store
•    Android Market
•    Installous

Tenemos que instalar la librería de oscOP5 en Processing

• oscP5

Instalando la librería oscP5

Tenemos que instarla en la carpeta donde la tenemos instalado Processing busca una carpeta que se llama modes > java y despues hay descomprimes todo lo de la libreria.en caso de no funcionar aun en la carpeta sketchbook creas un directorio llamado libraries igual descomprimes el contenido

2.-Configurando la App

Tenemos que ingresar la ip de la computadora donde esta conectado elArduino

3.-Creando una plantilla 

Debemos hacer es crear nuestra plantilla para el touchOSC y cargarla al dispositivo, para esto usaremos el touchOSC Editor una herramienta creada por Hexler  usaremos tres controles tipo fader con resolucion de un byte (0-255) para variar la intensidad del led RGB

1.Escoges el dispositivo que utilizaras

2.En Layout Orientation selecciona Horizontal

3.En Page Name Escribe RGB

1. Despues en el fondo negro da un click Izquierdo y te selecciona Fader Horizontal 

2.Debe de aparecer una barra la acomodas de acuerdo al tamaño que quieres despues haces lo mismo para los otros 2 colores 

3.Tienes que Renombrar

-frdRed

-frdGreen

-fdrBlue

4.Haras lo mismo para las 3 barras 

 Value Range From:0  To:255

Hay que sincronizar la plantilla al Ipad sigue las instrucciones 

4.-Codigo de Arduino

Para que en la placa arduino se procese los datos recibidos, para ello se creo un algoritmo que reciba un byte y determine si es un comando, una vez que determina el comando espera otro valor para almacenarlo en la variable correspondiente, para variar la intensidad del led usaremos los pines de PWM de arduino usando la funcion analogOut().

//dato recibido
int inByte = 0;
//Pines de los leds
int led[]={
  6,5,3};
//led a modificar
int  currLed;
//bandera de valor recibido
boolean commandFlag=0;
//led de espera de valor
const int ledCom=13;  

void setup()
{
  //salida led R
  pinMode(led[0], OUTPUT);
  //salida led G
  pinMode(led[1], OUTPUT);
  //salida led B
  pinMode(led[2], OUTPUT);
  //salida led comando
  pinMode(ledCom, OUTPUT); 

  //Inicializa comunicacion serial a 9600bps
  Serial.begin(9600);
  Serial.print("Conectado...");
}

void loop()
{
  //si hay datos en el bufer del puerto
  if (Serial.available() > 0) {
    //leemos valor recibido
    inByte = Serial.read();

    //si un comando espera valor
    if (commandFlag){
      //modificamos la intensidad del led seleccionado
      analogWrite(led[currLed],inByte);
      //reiniciamos bandera y led de comando
      commandFlag=false;
      digitalWrite(ledCom, LOW);
    }
    //Si esparamos un comando
    else
    {
      //Elegimos que led modificar
      //modificamos bandera y led de comando
      switch (inByte){
      case 114://r ascii
        currLed=0;
        digitalWrite(ledCom, HIGH);
        commandFlag=1;
        break;
      case 103://g ascii
        currLed=1;
        digitalWrite(ledCom, HIGH);
        commandFlag=1;
        break;
      case 98://b ascii
        currLed=2;
        digitalWrite(ledCom, HIGH);
        commandFlag=1;
        break;
      }
    }
  }
}

5.-Códigos de Processing

Crearemos una clase Fader que usaremos como control y para visualizar la interaccion con el dispositivo movil, este control sera lo mas parecido al fader y con las mismas propiedades que usamos en nuestra plantilla, la clase final para el Fader queda de la siguiente manera:

Clase Fader

class Fader {

  int val, valMap;
  int px, py;
  final int h=300, w=70;
  color[] col;

  color[] red= {
    color(#DE1D2A), color(#131010), color(#501515)
  };
  color[] green= {
    color(#3B811C), color(#111410), color(#25451A)
  };
  color[] blue= {
    color(#1C2D81), color(#0D0D10), color(#0C1233)
  };  

  Fader(int px, int py, char c) {
    this.px=px;
    this.py=py;

    switch(c) {
    case 'R':
      col=red;
      break;
    case 'G':
      col=green;
      break;
    case 'B':
      col=blue;
      break;
    }
    setValue(0);
  }

  void draw() {
    strokeWeight(4);
    strokeJoin(ROUND);
    stroke(col[0]);
    fill(col[1]);
    rect(px, py, w, h);
    fill(col[2]);
    rect(px, py+(h-valMap), w, valMap);

    if (mousePressed && (mouseX >= px && mouse X <= px+w) && (mouseY >= py && mouseY <= py+h)) {
      setValue((int)map((h-(mouseY-py)), 0, h, 0, 255));
    }
  }

  void setValue(int val) {
    this.val=val;
    valMap=int(map(val, 0, 255, 0, h));
  }

  int getValue() {
    return val;
  }
}

Despues crearemos nuestra plantilla personalizada, para esto haremos uso de vectores con las direcciones de cada uno de nuestros controles, estas direcciones son del url y las definimos cuando creamos nuestra plantilla con el editor. La clase de nuestra plantilla queda asi:

Clase RGBLayout

class RGBLayout {

  //Creamos nuestras direcciones para recibir datos
  //Estos nombres los pusimos al crear la plantilla
  //en el touchOSC editor     /Pagina/Direccion
  String[] Addr= {
    "/RGB/fdrRed",
    "/RGB/fdrGreen",
    "/RGB/fdrBlue",
  };

  //Creamos un vector para guardar los datos recibidos
  //crea tantas variables como direcciones tenga nuestra plantilla
  float[] Data= new float[Addr.length];

  //Por default touOSC usa el typetag "f" como identificador
  String Typetag="f";

  //Con este metodo comprobaremos si la informacion debe ser procesada
  void check(OscMessage theOscMessage) {

    //Para cada direccion en nuestra plantilla
    for (int i = 0; i < Addr.length; i++) {
      //Verfica si la informacion enviada coincide con alguna direccion
      if (theOscMessage.checkAddrPattern(Addr[i])==true) {
        //Comprueba que coincida el idenificador
        if (theOscMessage.checkTypetag(Typetag)) {
          //Guardamos el valor de la direccion en el vector Data
          Data[i] = theOscMessage.get(0).floatValue();
          //Imprime la direccion y el nuevo valor que tomo
          println(Addr[i]+" = "+ Data[i]);
        }
      }
    }
    //En caso de que no coincida ninguna direccion, se ignora la info
  }

  //imprime la informacion de todas nuestras variables
  void printData() {
    println(Data);
  }

  //imprime el nombre de nuestros objetos
  void printAddr() {
    println(Addr);
  }
}

Ahora se tiene que  importar las librerias oscP5 y netP5 para que funcione correctamente, crearemos objetos de las clases definidas anteriormemte y verificaremos los datos recibidos para posterioremente mandarlas al arduino por el puerto serie, 

//importamos librerias necesarias
import oscP5.*;
import netP5.*;
import processing.serial.*; 

OscP5 oscP5;
Serial serial;
RGBLayout layout;

//Creamos tres objetos Fader, uno por color
Fader fdrRed;
Fader fdrGreen;
Fader fdrBlue;

//variables para la intensidad de color
int r, g, b;
//PImage logo;

void setup() {
  size(600, 320);
  smooth();

  //creamos el objeto OSC en el puerto 8000
  oscP5 = new OscP5(this, 8000);
  //creamos la plantilla de touchOSC a usar
  layout= new RGBLayout();
  //intentamos abrir el puerto serial
  try {
    serial = new Serial(this, Serial.list()[0], 9600);
  }
  //en caso de error tendremos una excepcion
  catch(Exception e) {
    println("Error al abrir puerto serial...");
  }
  //muestra el direccionamiento de la plantilla
  layout.printAddr();

  //creamos los faders
  fdrRed=new Fader(10, 10, 'R');//px, py, color
  fdrGreen=new Fader(90, 10, 'G');
  fdrBlue=new Fader(170, 10, 'B');

  //cargamos la marca de agua
  //logo=loadImage("watermark.png");
}

void draw() {
  //Dibujamos los faders
  fdrRed.draw();
  fdrGreen.draw();
  fdrBlue.draw();

  //Guardamos el valor del fader en la variable
  r=fdrRed.getValue();
  g=fdrGreen.getValue();
  b=fdrBlue.getValue();

  //intentamos escribir el PS
  try {
    //comando para color r y su valor
    serial.write(114);
    serial.write(r);
    //comando para color g y su valor
    serial.write(103);
    serial.write(g);
    //comando para color b y su valor
    serial.write(98);
    serial.write(b);
  }
  //en caso de error tendremos una excepcion
  catch(Exception e) {
    println("Error con el puerto serial, no se puede escribir...");
  }

  //Dibujamos cuadro con colores mezclados
  stroke(0);
  fill(color(r, g, b));
  rect(270, 10, 300, 300);

  //image(logo, 450, 240);
}

//Este evento ocurre cada vez que llega informacion desde OCS
//theOSCMessage lleva toda la informacion recibida
void oscEvent(OscMessage theOscMessage) {
  //verificamos si coincide la informacion con nuestra plantilla
  layout.check(theOscMessage);

  //los faders toman el valor enviado
  fdrRed.setValue((int) layout.Data[0]);
  fdrGreen.setValue((int)layout.Data[1]);
  fdrBlue.setValue((int) layout.Data[2]);
}

Primero se carga en el arduino despues procesing y listo :)

6. Demostración