Comunidad de diseño web y desarrollo en internet online

Controlar hardware electrónico con Flash y Arduino

Aprende a controlar dispositivos externos realizados con Arduino por medio de una interface en Flash. Usaremos una página web en flash para encender|apagar una serie de leds. Para el desarrollo de este tutorial necesitarás :

  • Una placa Arduino, leds, varias resistencias y cable.
  • Cable USB para Arduino (o serial si tienes una placa Serial)
  • Conocimientos básicos sobre Arduino, supondremos que sabes utilizar el IDE, compilar y subir el programa a la placa.
  • Servidor "SerProxy"
  • Flash MX 2004 o superior
  • Clase Arduino.as de Beltran Berrocal (incluida en los archivos de ejemplo)

¿Qué es Arduino?

Arduino es una plataforma de computació física basada en una placa de entradas y salidas y un lenguaje de programación.¡¿Qué?! Basicamente es una placa con un microprocesador, entradas y salidas, por decirlo de algunas manera, es el "corazón" de cualquier aparato electrónico. Ya que puedes enviar y recibir datos, puedes crear casi cualquier cosa que imagines, desde una simple cartel de leds para mostrar mensajes, controlar un brazo robótico, o hacer que un coche siga una linea.

Arduino tiene la ventaja de que aparte de funcionar de manera autónoma, puede comunicarse con un ordenador para ampliar sus capacidades, por ejemplo, a através de una web podrías controlar un brazo (conectado a otro ordenador) que mueva una webcam. También podrías por ejemplo cambiar los mensajes que aparecen en un cartel informativo o un lcd. Además como dispone de entradas, puedes conectar sensores y que enviasen un mensaje al ordenador si alguien abre alguna puerta.

¿Cómo conecto Arduino con Flash?

Para ello utilizaremos el servidor SerProxy, lo que hace es crear un servidor de mensajes entre el puerto serie (o usb) y Flash (o cualquier otra cosa, como PureData, Director,...) Desde Flash nos conectaremos como si fuera en servidor de XMLSockets normal y corriente. La primera parte es bajarse el servidor desde su pagina web. Escoge el archivo según sea tu Sistema Operativo. Para Linux y Mac has de bajar el código fuente, compilarlo es extremadamente sencillo y viene suficientemente explicado en el paquete. Una vez instalado, deberemos editar nuestro archivo de configuración serproxy.cfg, según el caso.

serproxy.cfg

newlines_to_nils=true
# esto es porque uso el ttyS98 como device Arduino
# Si usas el ttySX tu comm_ports=(X+1) (Linux)
# Si usas el COM X tu commports=X (Windows)
# puedes utilizar varios, separándolos por comas, por ejemplo comm_ports=4,5,99

comm_ports=99

# Si usas USB la velocidad debe de ser comm_baud=19200
# si es por el puerto serie entonces comm_baud9600

comm_baud=19200
comm_databits=8
comm_stopbits=1
comm_parity=none
timeout=300
# Escribimos el puerto que usará cada dispositivo
# Si por ejemplo también usamos el ttyS4 añadiremos net_port5=PUERTO
# Usando puertos COMX escribimos net_portX=PUERTO
# Dos dispositivos NO pueden utilizar el mismo puerto

net_port99=5335
# Esto no es realmente necesario, solo indicamos que en realidad, el dispositivo "99" apunta a /dev/tyUSB0
serial_device99=/dev/ttyUSB0

Ahora ya podemos poner el servidor en marcha.

La parte en Flash

Por el momento, sólo tenemos un extraño servidor corriendo en nuestra máquina, hagamos el archivo de la interface para empezar a ver resultados.

Abre un nuevo archivo .fla. Suelta un textArea en el escenario y llámala debug_txt. Ahora suelta tantos botones como sean necesarios, llámalos btn_onX y btn_offX, donde X va desde 2 hasta 13. El botón btn_onX encenderá el led que esté colocado en la posición X, por ejemplo btn_on13. Y btn_off13 lo apagará.

Ahora selecciona añade este código al frame en la linea de tiempo principal.

// Crea un objeto para recibir los eventos 
arduinoListener = new Object();
//Avisa cuando se conecta 
arduinoListener.onConnect = function() {
        debug_txt.text += "CONNECTED : Hoorray! You're connected!\n";
};
//Avisa cuando no se puede conectar 
arduinoListener.onConnectError = function() {
        debug_txt.text += "ERROR : Connection Failed, please check the server configuration\n";
};
//Avisa cuando se desconecta 
arduinoListener.onDisconnect = function() {
        debug_txt.text += "WARNING : Flash has disconnected\n";
};
//Avisa al recibir datos 
arduinoListener.onReceiveData = function(dataObj:Object) {
        var arduinoData:String = dataObj.data;
        //Escribimos lo que recibimos en el textarea 
        debug_txt.text += arduinoData+"\n";
        //actualizamos el scroll del textarea 
        debug_txt.vPosition = debug_txt.maxVPosition+2;
};
//Iniciamos la conexion con el servidor através de la clase Arduino 
var arduino:Arduino = new Arduino(5335);
arduino.addEventListener("onConnect", arduinoListener);
arduino.addEventListener("onConnectError", arduinoListener);
arduino.addEventListener("onDisconnect", arduinoListener);
arduino.addEventListener("onReceiveData", arduinoListener);
// Iniciamos los botones ON|OFF desde el 2 al 13 (el numero de los pines) 
for (var i:Number = 2; i<=13; i++) {
        // botones "ON"
        _root["btn_on"+i].id = i;
        _root["btn_on"+i].onRelease = function() {
                debug_txt.text += "Sending Data to Arduino : LED #"+this.id+" has to be ON\n";
                _root.arduino.send(this.id+"1");
        };
        // botones "OFF" (parecidos a los ON) 
        _root["btn_off"+i].id = i;
        _root["btn_off"+i].onRelease = function() {
                debug_txt.text += "Sending Data to Arduino : LED #"+this.id+" has to be OFF\n";
                _root.arduino.send(this.id+"0");
        };
}
stop();

¿Cómo funciona? Es fácil, simplemente le enviamos a Arduino el número de pin seguido de un flag (0 o 1) que indica si el led debe de apagarse o encenderse. Por ejemplo 130 indica que el led 13 debe apagarse, 21 indica que el led 2 debe encenderse. El Arduino después manejará esos datos para hacer lo debido. Ahora, abre el SWF desde el navegador para ver si se conecta al servidor. Recuerda poner en la url la IP, pues usando localhost posiblemente no conecte con el serProxy.

No olvides revisar la Clase Arduino.as por si has de cambiar la IP del servidor.

Esquema de Montaje para Arduino

El esquema es relativamente sencillo, muy parecido al ejemplo del coche fantástico, simplemente conecten los leds que quieran (uno por entrada) poniendo una resistencia de 220Ohm entre el pin de salida y el led. El ejemplo antes citado es muy ilustrativo. Aunque para probar es suficiente con colar un led en el pin 13 que está al lado de GND (sin resistencia, para probar es suficiente).

Código de Arduino

Abriremos el IDE de Arduino, elegimos un nuevo proyecto|sketch y escribimos lo siguiente :

// Declaration of variables int pingNumber = 0;
// Var to hold what pin has to change int lastRead = 0;
// Var to hold the last char read int preLastRead = 0; //Var to hold the char before the last char read U_U
boolean yetRead = true; //Var to hold if we have read the serial data
// Function to convert received bytes to decimal numbers
void readSerialData () { 
        pingNumber = 0;
        if(Serial.available()) { 
                yetRead = false;
                while (Serial.available()){ 
                        preLastRead = lastRead; 
                        lastRead = Serial.read()-48;
                        pingNumber = pingNumber*10+lastRead;
                        Serial.println(pingNumber);
                }
                //At this moment, lastRead was a 0 (to make the end of the data) 
                pingNumber = (pingNumber-lastRead)/10;
                //This is the ping number without the lastChar (1-0 ON-OFF)
                pingNumber = (pingNumber-preLastRead)/10;
                //If want debug, uncomment next line
                //Serial.println(pingNumber);
        } 
}
//the setup, declared all pins as output
void setup() {
        Serial.begin(19200); //setup serial conversation at 9600 bauds
        pinMode(13,OUTPUT);
        pinMode(12,OUTPUT);
        pinMode(11,OUTPUT);
        pinMode(10,OUTPUT);
        pinMode(9,OUTPUT);
        pinMode(8,OUTPUT);
        pinMode(7,OUTPUT);
        pinMode(6,OUTPUT);
        pinMode(5,OUTPUT);
        pinMode(4,OUTPUT);
        pinMode(3,OUTPUT);
        pinMode(2,OUTPUT);
}
void loop () {
        //Read if something has come
        readSerialData();
        //If there's something out there
        if( yetRead == false) {
                Serial.print("Ping Number : "); 
                Serial.print(pingNumber,DEC);
                yetRead = true; 
                //Have i to explain this?
                if(preLastRead==1) {
                        Serial.println(" Has to be ON");
                        digitalWrite(pingNumber, HIGH);
                } else {
                        Serial.println(" Has to be OFF");
                        digitalWrite(pingNumber, LOW);
                }; 
        } 
        //the delay between each loop
        delay(500); 
}

En resumen, necesitamos :

  • El servidor SerProxy ejecutándose
  • Una página en Flash que se conecte por un XMLSockets al servidor
  • Arduino conectado al ordenador que tenga el servidor proxy corriendo

Con todo esto podemos controlar de forma más o menos sencilla la placa Arduino desde cualquier lugar del mundo con conexión a Internet, por ejemplo subir y bajar persianas de casa desde el trabajo, o poner el aire acondicionado o la calefacción justo antes de salir del trabajo para llegar a casa con la temperatura justa, mover una webcam, ... etc etc.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate