Representar gráficamente en la pantalla del ordenador mediante un programa en Processing los datos obtenidos de temperatura y humedad.
Una vez obtenidos los datos de temperatura y humedad a través del sensor DHT11 desde Arduino, enviamos, a través del puerto serie, estos datos al PC, donde tenemos ejecutando un programa en Processing que está "escuchando" el puerto serie, obteniendo los datos y representándolos en pantalla. Simultáneamente guardamos los datos en un archivo de texto que posteriormente podremos analizar en una hoja de cálculo.
IMPORTANTE: No hay que tener abierto el monitor serie del IDE de Arduino porque ocupa el puerto y, por lo tanto, no deja leer los datos a Processing.
PROGRAMA A CARGAR EN ARDUINO:
PROGRAMA A CARGAR EN ARDUINO:
#include "DHT.h" #define DHTPIN 2 #define DHTTYPE DHT11 // DHT 11 DHT dht(DHTPIN, DHTTYPE); void setup() { Serial.begin(9600); dht.begin(); } void loop() { delay(2000); float h = dht.readHumidity(); float t = dht.readTemperature(); if (isnan(h) || isnan(t)) { Serial.println("Fallo al leer el sensor DHT11"); return; } // Únicamente enviar a Processing las variables t y h Serial.println(h); Serial.println(t); }
PROGRAMA A EJECUTAR EN PROCESSING (PC / LAPTOP):
Vamos a guardar dos archivos en Processing, al primero le llamamos visual_dot.pde y al segundo Graf.pde. Ambos lo guardamos en el mismo directorio./* Tildes omitidas en los comentarios. visual_dot.pde */ import processing.serial.*; int x = 65, ancho = 700, alto = 600; boolean p = true; int cFondo = 240; //Color fondo PrintWriter datos; Serial puertoArduino; Graf g = new Graf(ancho, alto, cFondo); void setup (){ size(ancho, alto); background(cFondo); print(Serial.list()); //ojo el '0' de Serial.list()[0] //se cambia por el orden de numero de puerto de tu ordenador puertoArduino = new Serial(this, Serial.list()[0], 9600); // Guardaremos los datos muestreados en un archivo de texto, // asi podremos analizarlos con una hoja de calculo y otro programa. datos = createWriter("medidas.txt"); fill(0, 0, 255); text("VOLTIOS (Digital): ", 20, 40); text("Muestras", ancho / 2, alto - 20); g.cuadricula(); } void draw(){ String inString = puertoArduino.readStringUntil('\n'); if (inString != null){ inString = trim(inString); float val = float(inString); datos.print(val + "\n"); // copia el dato en medidas.txt g.puntos(x, val, p); p = false; x = x + 20; if (x > ancho - 60) {x = 60; g.borra(); g.cuadricula(); p = true; } } } void keyPressed() {//Presionar 'ESC' para salir datos.flush(); datos.close(); exit(); }
/* Tildes omitidas en los comentarios. Graf.pde */ class Graf { int nX, nY, colF; float coordAntX, coordAntY; Graf (int x, int y, int cF){ nX = x; nY = y; colF = cF; } void cuadricula(){ stroke(0); for (int j = 60 ; j <= nX - 60; j = j + 20){ line (j, 60, j, nY - 60); } // Vert for (int j = 60 ; j <= nY - 60; j = j + 20){ line (60, j, nX - 60, j);} // Horiz } void borra(){ fill(colF); // Color del fondo noStroke(); rectMode(CORNERS); rect(50 , 50, nX , nY - 30 ); } void puntos(int x, float nValor, boolean primera){ fill(255,255,255); rectMode(CORNERS); rect(140,25,200,45);//Borra lectura anterior fill (0,0,255); text(nValor, 142, 40); fill(0, 0, 255); float v = map(nValor, 0, 1023, nY - 60, 60); //Mapeo inverso entre //los margenes sup e inf. ellipse(x, v, 5, 5); //Une los dos puntos con una linea excepto en la primera lectura. if (primera == false){ line (coordAntX, coordAntY, x, v); } coordAntX = x; coordAntY = v; } }
ARDUINO Y EL INTERNET DE LAS COSAS
Monitorizar los datos de temperatura y humedad obtenidos del sensor DHT11 en la nube.
Para ello disponemos del portal web dweet.io que nos ofrece un servicio para enviar y representar datos en la nube sin necesidad, ni si quiera, de registrarnos en la plataforma.
Vamos a ver los pasos a seguir:
Automatizamos el proceso de recogida de datos desde Arduino con un programa en Processing, que enviará datos a través del navegador a dweet.io.
IMPORTANTE: No hay que tener abierto el monitor serie del IDE de Arduino porque ocupa el puerto y, por lo tanto, no deja leer los datos a Processing.
Para ello disponemos del portal web dweet.io que nos ofrece un servicio para enviar y representar datos en la nube sin necesidad, ni si quiera, de registrarnos en la plataforma.
Vamos a ver los pasos a seguir:
- Probamos la plataforma introduciendo un dato, para ello en el navegador tecleamos por ejemplo (cambia jorgeroden por tu nombre):http://dweet.io/dweet/for/jorgeroden?temperatura=20
- Abre otra pestaña del navegador o utiliza un móvil para seguir el dato:http://dweet.io/follow/jorgeroden
- Prueba añadiendo otra variable, en este caso la humedad:http://dweet.io/dweet/for/jorgeroden?temperatura=20&humedad=8
Automatizamos el proceso de recogida de datos desde Arduino con un programa en Processing, que enviará datos a través del navegador a dweet.io.
IMPORTANTE: No hay que tener abierto el monitor serie del IDE de Arduino porque ocupa el puerto y, por lo tanto, no deja leer los datos a Processing.
PROGRAMA A CARGAR EN ARDUINO:
#include "DHT.h" #define DHTPIN 2 #define DHTTYPE DHT11 // DHT 11 DHT dht(DHTPIN, DHTTYPE); void setup() { Serial.begin(9600); dht.begin(); } void loop() { delay(2000); float h = dht.readHumidity(); float t = dht.readTemperature(); if (isnan(h) || isnan(t)) { Serial.println("Fallo al leer el sensor DHT11"); return; } // Únicamente enviar a Processing las variables t y h Serial.print("Temperatura="); Serial.print(t); Serial.print("Humedad="); Serial.println(h); }
PROGRAMA A EJECUTAR EN PROCESSING (PC / LAPTOP):
import processing.serial.*; //lf es el caracter de retorno de carro, que en ASCII es 10 int lf = 10; // El puerto serie Serial myPort; void setup() { // Lista todos los puertos serie println(Serial.list()); // OJO: Elige el puerto donde tengas conectado Arduino. // Cambia el "0" de Serial.list()[0] por el orden que // tu puerto ocupe en la lista (0, 1, 2,...). // Si no lo tienes claro qué puerto ocupa Arduino mira // en el IDE Arduino en "Herramientas" mira el puerto que esté seleccionado. //Fíjate que tenemos la velocidad del puerto a la misma que pusimos en Arduino myPort = new Serial(this, Serial.list()[0], 9600); } void draw() { while (myPort.available() > 0) { String lectura = myPort.readStringUntil(lf); if (lectura != null) { println(lectura); //IMPORTANTE! cambia jorgeroden por tu nombre o lo que utilizases anteriormente loadStrings("https://dweet.io/dweet/for/jorgeroden?"+lectura); } } }
REPRESENTACIÓN DE DATOS EN EL NAVEGADOR:
Dweet.io nos ofrecerá los datos de la siguiente manera:
Si queremos algo más vistoso podemos utilizar el servicio freeboard.io aunque en este caso nos tendremos que registrar en la web.
Una vez registrados podemos crear paneles indicadores configurados a nuestro gusto para visualizar la información. Primero habrá que añadir como fuente de datos Dweet.io y nuestro nombre utilizado allí (jorgeroden en el ejemplo).
Después creamos un panel indicando que la fuente de datos que queremos utilizar y la variable en cuestión a visualizar.