Arduino + Processing LED RGB Control Interface
Controlar un LED RGB por medio de interface elaborada con Processing.
Materiales:Arduino.
3 Resistencias de 220 ohm
LED RGB.
BreadBoar.
Cableado necesario.
DESARROLLO.
Para nuestro laboratorio necesitamos tener instalado en el computador , el software arduino y processing; con arduino compilaremos nuestro código que luego será quemado en la placa arduino; por otro lado con el Processing elaboraremos el código correspondiente a la interface con la que podremos controlar el sistema por medio de envió de datos en el puerto Serial; en este caso nuestro sistema se encargara del color de un LED RGB , modificando su intensidad de luz y combinando los tres colores : rojo, verde y azul.Lo primero que haremos es montar nuestro sistema en la breaBoard: colocando el LED RGB a tierra y las terminales de cada color a los siguientes pines out pwm: para el rojo pin 11, para el verde el pin 10 y para el azul el pin 9.
Ahora lo que haremos es elaborar el código de la interface con la que
manipularemos el LED RGB, este código será elaborado en Processing el cual
contiene las librerías necesarias. La siguiente imagen muestra lo que haremos:
Las variables necesarias:
int R=0;
int G=0;
int B=0;
Serial port;
color c=255;
Con las variables de tipo entero se manejara la intensidad del LED para cada color o para un color según una paleta de colores que también usaremos en la interface; su valor está entre 0 y 255. Luego una de tipo Serial para el envió de datos por el puerto y otra de tipo color para la obtener el color de la paleta decolores por medio de un clic en el mouse.
Ahora el método setup(), en el que validamos el puerto y definimos las
dimensiones de la ventada y su color de fondo , mas frameRate() del uso de
frame.
void setup(){
println(Serial.list());
port = new Serial(this, Serial.list()[1], 9600);
size(600,400);//tamaño de la ventana
background(128); //color de fondo
frameRate(10);
}
Definiremos el metodo draw() en el que colocaremos el código para los botones, la imagen que insertamos como paleta de colores , las letras , la acción del mouse y el envió de datos por el puerto.
Colocaremos entonces los círculos que corresponde a cada color :rojo, verde y
azul.
fill(255,0,0);//color rojo
ellipse(100,100,50,50);//x,y,ancho y alto
fill(0,255,0);//color verde
ellipse(200,100,50,50);
fill(0,0,255);//color azul
ellipse(300,100,50,50);
int step = 8;//intensidad
Colocaremos ahora los botones que se encargaran de subir y bajar la intensidad del color y otro mas para apagar el LED.
//botones para subir y bajar intensidad del color
for(int i=75 ; i<=275; i+=100){
fill(255,255,255); //color blanco
rect(i,150,50,50);//x,y,largo,alto subida
rect(i,210,50,50);//bajada
for(int j=85; j<=285; j+=100){
fill(0,0,0);//color negro
triangle(j,190, j+15,160, j+30,190);
triangle(j,220, j+15,250, j+30,220);
}
}
fill(200,200,200);
rect(75,300,250,50);//apagado
Hay que tener en cuenta el método fill() se encarga del color para cada pieza, sea rectángulos o círculos, para mayor información visite el API de processing : http://processing.org/reference/ ; seguidamente coloremos el método que dibuja un rectángulo como botón: rect(x,y,largo,ancho). El ciclo for solo se
encarga de ubicar los botones en la ventana.
Definiremos la letras:
fill(0,0,0);//color negro para las letras
PFont font = loadFont("Meta-Bold.vlw");// cargar letras
textFont(font,28);text("A P A G A R",160,340);
Para este caso debemos ir a Tools , create Font y en Filename colocamos
Meta-Bold.vlw (observe la imagen ).
Tener en cuenta el color de las letras , uso del metodo fill();
Insertar imagen de la paleta de colores:
PImage paleta;
paleta=loadImage("paleta.png");
image(paleta,350,150);
fill(c);
rect(350,75,200,50);// para mostrar el color seleccionado.
PImage paleta;
paleta=loadImage("paleta.png");
image(paleta,350,150); fill(c);
rect(350,75,200,50);// para mostrar el color seleccionado.
Para este caso necesitamos una imagen , mi archivo de la imagen es
paleta.png el cual lo agregamos a la carpeta donde se encuentra el archivo con el código , esta imagen contiene los colores RGB en brillos. Lo que se hace es crear una variable de tipo PImage que luego cargaremos en ella la imagen, y un botón para mostrar el color que seleccionamos en la paleta de colores.
Ingresar las condiciones para la acción del botón ,manejo del mouse:
if(mousePressed){
//para subir la intensidad
if(mouseX>75 && mouseX<175 && mouseY>150 && mouseY<210){
println("si sube Rojo");
if (R>=255) R=255;
else R+=step;
}
if(mouseX>175 && mouseX<275 && mouseY>150 && mouseY<210){
println("si sube Verde");
if (G>=255) G=255;
else G+=step;
}
if(mouseX>275 && mouseX<350 && mouseY>150 && mouseY<210){
println("si sube Azul");
if (B>=255) B=255;
else B+=step;
}
//para bajar la intensidad
if(mouseX>75 && mouseX<175 && mouseY>210 && mouseY<260){
println("si baja Rojo");
if (R<=0) R=0; else R-=step;
}
if(mouseX>175 && mouseX<275 && mouseY>210 && mouseY<260){
println("si baja Verde");
if (G<=0) G=0; else G-=step;
}
if(mouseX>275 && mouseX<375 && mouseY>210 && mouseY<260){
println("si baja Azul");
if (B<=0) B=0; else B-=step;
}
//para apagar LOW
if(mouseX>75 && mouseX<250 && mouseY>300 && mouseY<350){
println("si Apago los LEDs");
R=0; G=0; B=0;
}
//para prender LEDs HIGH
if(mouseX>75 && mouseX<125 && mouseY>50 && mouseY<150){
println("Prende ROJO LEDs");
R=255;
}
if(mouseX>175 && mouseX<225 && mouseY>50 && mouseY<150){
println("Prende VERDE LEDs");
G=255;
}
if(mouseX>275 && mouseX<325 && mouseY>50 && mouseY<150){
println("Prende AZUL LEDs");
B=255;
}
//para la captura de color de la paleta
if(mouseX>350 && mouseX<550 && mouseY>150 && mouseY<350){
c = get(mouseX,mouseY);//obtener valor del color
//obtener RGB para enviar via puerto serial
R = (int)red(c);//convertir a int son float,
G = (int)green(c);
B = (int)blue(c);
println(c);
}
Para subir la intensidad del color como también para bajarla, se debe tomar el valor de la posición X y Y del mouse en cada posición del respectivo botón, de igual forma para prender el color y apagar el LED. Para la selección del colorde la paleta de colores se debe tomar de la misma forma como lo anterior y
mediante los métodos red(), green() y blue(), obtener el valor del rojo, verde y azul que eventualmente son la forma como el LED RGB asume el valor para cada terminal del color, esto valores son enviados por el puerto serial.
Por último en el código del processing, se enviran los datos en cadena por el
puerto Serial.
// la cadena que se enviara via Serial al Arduino
String out = nf(R,3) + nf(G,3) + nf(B,3);
println(out); // en la consola
port.write(out); // por el puerto Serial
Veamos el código completo:
//librerias
import processing.serial.*;
//atributos
int R=0;
int G=0;
int B=0;
Serial port;
color c=255;
void setup(){
println(Serial.list());
port = new Serial(this, Serial.list()[1], 9600);
size(600,400);//tamaño de la ventana
background(128); //color de fondo
frameRate(10);
}
void draw(){
//cirulos LEDs
fill(255,0,0);//color rojo
ellipse(100,100,50,50);//x,y,ancho y alto
fill(0,255,0);//color verde
ellipse(200,100,50,50);
fill(0,0,255);//color azul
ellipse(300,100,50,50);
int step = 8;//intensidad
//botones para subir y bajar intensidad del color
for(int i=75 ; i<=275; i+=100){
fill(255,255,255); //color blanco
rect(i,150,50,50);//x,y,largo,alto subida
rect(i,210,50,50);//bajada
for(int j=85; j<=285; j+=100){
fill(0,0,0);//color negro
triangle(j,190, j+15,160, j+30,190);
triangle(j,220, j+15,250, j+30,220);
}
}
fill(200,200,200);
rect(75,300,250,50);//apagado
//letras
fill(0,0,0);//color negro para las letras
PFont font = loadFont("Meta-Bold.vlw");// cargar letras
textFont(font,28);
text("A P A G A R",160,340);
//paleta de colores
PImage paleta;
paleta=loadImage("paleta.png");
image(paleta,350,150);
fill(c);
rect(350,75,200,50);//para mostrar el color seleccionado
//action botton
if(mousePressed){
//para subir la intensidad
if(mouseX>75 && mouseX<175 && mouseY>150 && mouseY<210){
println("si sube Rojo");
if (R>=255) R=255;
else R+=step;
}
if(mouseX>175 && mouseX<275 && mouseY>150 && mouseY<210){
println("si sube Verde");
if (G>=255) G=255;
else G+=step;
}
if(mouseX>275 && mouseX<350 && mouseY>150 && mouseY<210){
println("si sube Azul");
if (B>=255) B=255;
else B+=step;
}
//para bajar la intensidad
if(mouseX>75 && mouseX<175 && mouseY>210 && mouseY<260){
println("si baja Rojo");
if (R<=0) R=0; else R-=step;
}
if(mouseX>175 && mouseX<275 && mouseY>210 && mouseY<260){
println("si baja Verde");
if (G<=0) G=0; else G-=step;
}
if(mouseX>275 && mouseX<375 && mouseY>210 && mouseY<260){
println("si baja Azul");
if (B<=0) B=0; else B-=step;
}
//para apagar LOW
if(mouseX>75 && mouseX<250 && mouseY>300 && mouseY<350){
println("si Apago los LEDs");
R=0; G=0; B=0;
}
//para prender LEDs HIGH
if(mouseX>75 && mouseX<125 && mouseY>50 && mouseY<150){
println("Prende ROJO LEDs");
R=255;
}
if(mouseX>175 && mouseX<225 && mouseY>50 && mouseY<150){
println("Prende VERDE LEDs");
G=255;
}
if(mouseX>275 && mouseX<325 && mouseY>50 && mouseY<150){
println("Prende AZUL LEDs");
B=255;
}
//para la captura de color de la paleta
if(mouseX>350 && mouseX<550 && mouseY>150 && mouseY<350){
c = get(mouseX,mouseY);//obtener valor del color
//obtener RGB para enviar via puerto serial
R = (int)red(c);//convertir a int son float,
G = (int)green(c);
B = (int)blue(c);
println(c);
}
}
// la cadena que se enviara via Serial al Arduino
String out = nf(R,3) + nf(G,3) + nf(B,3);
println(out); // en la consola
port.write(out); // por el puerto Serial
}
Ahora debemos colocar el código en arduino , que se compilara y luego se quemara en la placa arduino :
Lo que se hará es crear las variables para los valores de pines de salida y las variables para obtener los datos vía puerto Serial. Habilitar los pines en el método setup() como salida y en el método loop() obtener los datos vía puerto Serial del manejo de la interface que se hizo con processing y escribir la salida
a los pines.
Veamos el código
int Red = 11;
int Green = 10;
int Blue = 9;
int r = 128;
int g = 128;
int b = 128;
void setup()
{
Serial.begin(9600);
pinMode(Red,OUTPUT);
pinMode(Green,OUTPUT);
pinMode(Blue,OUTPUT);
}
void loop()
{
if(Serial.available()==9) // while there is data
{
r= (Serial.read()-48)*100 ;
r=r+ (Serial.read()-48)*10;
r=r + Serial.read()-48;
g= (Serial.read()-48)*100;
g=g+ (Serial.read()-48)*10;
g=g + Serial.read()-48;
b= (Serial.read()-48)*100; // read the first byte
b=b + (Serial.read()-48)*10; // read the second byte......
b=b + Serial.read()-48; // so on so forth
// Por si acaso queda algun caracter en la cola
int empty = Serial.read();
}
analogWrite(Red,r);
analogWrite(Green,g);
analogWrite(Blue,b);
}
Para terminar, el código compilarlo y quemarlo a la placa Arduino mediante
conexión USB o serial dependiendo del modelo, y hacer las pruebas. Claro esta , que debes corres el programa hecho en processing.
Gracias por la atención prestada.
visite :
Arduino.
http://arduino.cc/es/
Leguage API Processing. Processing.org, 2011
http://processing.org/reference/
Marin, Diego Fernando. Universidad Santiago de Cali.
http://colombiadigital.net/b2e/blogs/index.php?blog=32
Comentarios