Arduino UNO + Shield WiFi: Visualización de Temperatura en Tiempo Real en Web vía Serial

Componentes y suministros

Componente	Cantidad
Arduino UNO	1
PHPoC WiFi Shield 2 para Arduino	1
Sensor temperatura DS18B20 (Adafruit)	1
Cables jumper	1

Sobre el proyecto

Solo con Serial.println(temperatura) enviamos la temperatura a la web. Usando el Web Serial Plotter integrado, visualizamos la temperatura en el navegador sin programar nada en web.

Ideal para principiantes: aprende WiFi y sensores en Arduino (tutoriales: WiFi + Arduino, sensor DS18B20).

Demostración

Ver imágenes en el original.

Cómo funciona

• Arduino lee temperatura del sensor y la envía por Serial.
• Accedes al Web Serial Plotter desde navegador (móvil/PC) usando la IP del shield PHPoC.
• La temperatura se reenvía automáticamente a la web.
• La web la grafica en tiempo real.
• Por defecto, Web Serial Plotter funciona como el Serial Plotter del IDE. Para personalizar (títulos ejes, rango temperatura, nº muestras mostradas) usa la página de configuración (Setup).

Instrucciones paso a paso

1. Cableado

• Monta el PHPoC WiFi Shield 2 (o PHPoC Shield 2) sobre el Arduino.
• Cablea según imágenes del esquemático.

2. Compila y sube código Arduino

Ver código "Arduino Code - Short Sampling Period" abajo.

3. Personaliza Web Serial Plotter

1. Accede al Web Serial Plotter escribiendo la IP del shield PHPoC en el navegador.
2. Pulsa enlace "Setup" para ir a página de personalización.
3. Ajusta parámetros (títulos, rango, muestras) y guarda.

4. Resultado

Pulsa "Connect" y verás el gráfico en vivo.

Monitorizar temperatura en periodos largos

Si el muestreo es frecuente (segundos), basta imprimir por Serial y esperar el gráfico.

¿Y si queremos monitorizar cada hora o día? No podemos esperar horas para ver el gráfico.

Solución: almacenar las últimas N lecturas en Arduino (cola circular) e imprimirlas frecuentemente.

Ejemplo: ver últimas 100 horas (unidad = hora). Lee sensor cada hora, guarda en cola circular de 100. Cada segundo, imprime las 100 muestras. Así ves gráfico de 100 horas sin esperar 100 horas.

Código en "Arduino Code - Long Sampling Period".

El mejor kit Arduino para principiantes

Ver The Best Arduino Kit for Beginners.

Código

Arduino Code - Short Sampling Period

#include 
#include 
#include 

#define SAMPLE_INTERVAL 1000 // ms

OneWire oneWire(8);
DallasTemperature sensors(&oneWire);
unsigned long lastSampleTime;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  sensors.begin();
  Phpoc.begin();
  lastSampleTime = millis();
}

void loop() {
  if ((millis() - lastSampleTime) > SAMPLE_INTERVAL) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    Serial.println(temp);
    lastSampleTime = millis();
  }
}

Arduino Code - Long Sampling Period (diario, horario...)

#include 
#include 
#include 

#define UPDATE_INTERVAL 1000      // ms
#define SAMPLE_INTERVAL 60*60*1000 // 1 hora

OneWire oneWire(8);
DallasTemperature sensors(&oneWire);
unsigned long lastSampleTime;
unsigned long lastUpdateTime;
float temps[100];
int index;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  sensors.begin();
  Phpoc.begin();
  lastSampleTime = millis();
  lastUpdateTime = millis();
  index = 0;
}

void loop() {
  // Muestreo cada hora
  if ((millis() - lastSampleTime) > SAMPLE_INTERVAL) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    temps[index] = temp;
    index = (index + 1) % 100;
    lastSampleTime = millis();
  }
  // Actualización frecuente: envía buffer completo
  if ((millis() - lastUpdateTime) > UPDATE_INTERVAL) {
    for (int i = 0; i < 100; i++) {
      Serial.println(temps[(index - i + 100) % 100]);
    }
    lastUpdateTime = millis();
  }
}

Esquemático

1. Monta PHPoC WiFi Shield 2 (o PHPoC Shield 2) sobre Arduino.
2. Cablea según imágenes: sensor DS18B20 en pin 8 (data), alimentación 5V/GND, resistencia pull-up 4.7k entre data y 5V.