MÁS ALLÁ DEL ARDUINO

GRÁFICAS CON PROCESSING

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:
#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:
  1. 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
  2. Abre otra pestaña del navegador o utiliza un móvil para seguir el dato:http://dweet.io/follow/jorgeroden
  3. 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:
dweet

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. 
freeboard-1
¡Y  resultado puede ser de este tipo!

freeboard-2