En primer lugar el código del arduino debe enviar al puerto serie los valores que queremos desplegar separados por comas, en este pequeño ejemplo genero los valores de forma aleatoria ya que no tengo un sensor a la mano, algo importante es el retardo (delay(300);) este retardo se debe sincronizar con el código del processing para visualizar correctamente la gráfica.
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
}
void loop() {
// Genero valores aleatorios, o los recupero de un sensor
float humedad = random(10,450);
float temperatura = random(10,450);
// Envio los valores al serial separados por coma
Serial.print(humedad/10);
Serial.print(",");
Serial.print(temperatura/10);
Serial.println();
delay(300);
}
Aquí vemos como se envían los valores al monitor serial del arduino:
A continuación el código de processing que nos permite visualizar una gráfica de cada uno de los valores recibidos, cada gráfica se muestra en un color distinto, el código se modificó para ejecutarse correctamente en Processing 3.1 y no se probó para ninguna otra versión.
import processing.serial.*;
Serial myPort; // The serial port
String inString; // Input string from serial port
int lf = 10; // ASCII linefeed
float x1 = 0;
float x2;
float y1;
float y2 = height / 2;
int xPos = 1;
void setup() {
size(800,600);
// List all the available serial ports:
printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
myPort.bufferUntil(lf);
background(0);
// Tamaño del texto
textSize(30);
}
String[] lista;
float[] listaY = new float[10];
// Agregar color si se grafican mas de 3 valores
int[] colores = { #CCFFAA , #CC00AA , #00FFAA };
void draw() {
if (inString != null) {
// trim off any whitespace:
inString = trim(inString);
// Pinta un rectangulo en la esquina superior izquierda con fondo negro
fill(0);
rect(0, 0, 220, 100);
// Imprime la lista de valores recibidos ( Ampliar el rectangulo si se reciben mas de 2 valores )
fill(204, 102, 0);
text(inString, 10, 80);
// Separa los valores recibidos ( la coma es el separador estandar )
lista = split(inString, ',');
// Mostrar lista
printArray(lista);
// Recorre la lista de valores
for (int i=0; i < lista.length; i++) {
// Convierte el valor en su representacion numerica ( Float )
float inByte = float(lista[i]);
// Recupera el valor guardado de la iteracion anterior para usarlo como coordenada
y1 = listaY[i];
// convert to an int and map to the screen height:
inByte = map(inByte, 0, 70, 0, height);
// draw the line:
stroke(colores[i]);
y2 = height - inByte;
line(xPos - 5, y1, xPos, y2);
// Guarda la coordenada y actual (valor enviado por serial)
listaY[i] = y2;
// at the edge of the screen, go back to the beginning:
if (xPos >= width) {
xPos = 0;
background(0);
}
else {
// increment the horizontal position:
xPos+=3;
}
}
// Sincronizar el retardo con el programa que envia los valores al puerto serial
delay(300);
}
}
void serialEvent(Serial p) {
inString = p.readString();
}
A continuación vemos la gráfica que se genera:
Bien, como podemos observar las graficas se generan simultaneamente y dentro del código podemos determinar los colores de cada una, algo importante es que los retardos en ambos programas deben ser exactamente iguales para que la gráfica se dibuje correctamente, si omitimos o alteramos los retardos se pueden mostrar resultados no deseados en la gráfica, bien espero que esta pequeña contribución sea de utilidad, y si es así dejame un comentario que me dará mucho gusto saber que así fué, un saludo.
