martes, 8 de abril de 2014

Graficar con arduino y processing

Para este tutorial usamos un sensor de temperatura LM35 tomando su lectura en la entrada A0 del arduino, el circuito es el siguiente:


Con el siguiente sketch de arduino enviamos las lecturas de la temperatura al monitor serial cada 100ms aproximadamente:

void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
}

int valpwm;
float valtemp;

// the loop routine runs over and over again forever:
void loop() {
  int sensorValue = analogRead(A0); 

  valtemp = (sensorValue*500.00)/1023.00;
  delay(1); 
  Serial.println(valtemp);
  delay(100);
  
}


El resultado del monitor serial son los valores de la temperatura capturados por el arduino, a continuación procedemos a crear el sketch en processing que nos permitira graficar estos valores en algo más atractivo:

// Graphing sketch


 // This program takes ASCII-encoded strings
 // from the serial port at 9600 baud and graphs them. It expects values in the
 // range 0 to 1023, followed by a newline, or newline and carriage return

 // Created 20 Apr 2005
 // Updated 18 Jan 2008
 // by Tom Igoe
 // This example code is in the public domain.

 import processing.serial.*;

 Serial myPort;        // The serial port
 int xPos = 1;         // horizontal position of the graph

 void setup () {
 // set the window size:
 size(800, 600);        

 // List all the available serial ports
 println(Serial.list());
 // I know that the first port in the serial list on my mac
 // is always my  Arduino, so I open Serial.list()[0].
 // Open whatever port is the one you're using.
 myPort = new Serial(this, Serial.list()[0], 9600);
 // don't generate a serialEvent() unless you get a newline character:
 myPort.bufferUntil('\n');
 // set inital background:
 background(0);
 textSize(32);
 }
 void draw () {
 // everything happens in the serialEvent()
 }

 float x1 = 0;
 float x2;
 float y1;
 float y2 = height / 2;


void escalax(){
  
}


void serialEvent (Serial myPort) {
 // get the ASCII string:
 String inString = myPort.readStringUntil('\n');

 if (inString != null) {
   // trim off any whitespace:
   inString = trim(inString);
   // convert to an int and map to the screen height:
   float inByte = float(inString); 
   
   fill(0);
   rect(0, 0, 100, 100);
   fill(204, 102, 0);
   text(inString, 10, 80); 
   inByte = map(inByte, 0, 70, 0, height);

   // draw the line:
   stroke(204);
   line(xPos - 10, y1, xPos, y2);
   
   y1 = y2;
   y2 = height - inByte;

   // at the edge of the screen, go back to the beginning:
   if (xPos >= width) {
   xPos = 0;
   background(0); 
 } 
 else {
   // increment the horizontal position:
   xPos+=10;
   }
 }
}
Tomando el ejemplo desde la página de arduino, lo modificamos un poco y voila, el resultado es una gráfica de la temperatura que se actualiza y se refresca automáticamente tomando las lecturas del arduino:



Con algunas mejoras podemos agregar una escala de grados y de tiempo, así como graficar algunos otros valores simultaneamente, pero eso será materia de otro tutorial, saludos y hasta la próxima!



12 comentarios:

  1. que tal... muy buen post, me aydaste demasiado, pero quiero saber como le hago para graficar un segundo valor?. Me refiero al codigo de Processing, ya que en el de arduino ya lo tengo, espero me puedas ayudar y saludos

    ResponderEliminar
  2. Hola, oye fijate que al comprobar el codigo de processing me paracece lo siguiente: "arrayindexoutofboundsexception: 0" y sé que se debe a algo relacionado con el rango permitido del array, sin embargo intenté cambiarlo y aún así sigue sin funcionar. ¿Me podrías sugeriro algún otro cambio? De antemano gracias :9

    ResponderEliminar
    Respuestas
    1. Hola recuerda que cuando estes programando en processing debes tener cerrado el monitor serial del arduino porque el puerto serial solo puede responder a un programa

      Eliminar
  3. me aparece este error. que puede ser?

    Error, disabling serialEvent() for COM5
    null

    ResponderEliminar
  4. Hola en que parte del codigo puedo agregar para dos graficas por ejemplo temperatura y humedad. Espero que pueda ayudarme y muchas gracias.

    ResponderEliminar
    Respuestas
    1. Te dejo la liga al nuevo tutorial, saludos

      http://tecnotinker.blogspot.mx/2016/06/graficando-valores-de-arduino-en_49.html

      Eliminar
  5. Cual serían esas modificaciones al código de Arduino para que funcione? De antemano, gracias

    ResponderEliminar
  6. para poner un texto enseguida de la temperatura como se modificaria el codigo ya que lo intente y ya no grafica con linea si no con texto y empalama el texto con la temperatura

    ResponderEliminar
  7. porque no me sale la gráfica lo copie tal y como esta solo que yo estoy utilizando un sensor de humedad de suelo HL-69 y arduino nano si me muestra los resultados en el serial pero en processing no me aparece nada ayuda por favor

    ResponderEliminar