Arduino UNO & WiFi Shield: Echtzeit-Temperaturanzeige im Web via Serial

Komponenten und Materialien

Komponente	Anzahl
Arduino UNO	1
PHPoC WiFi Shield 2 für Arduino	1
Adafruit DS18B20 Temperatursensor	1
Jumper-Kabel	1

Über dieses Projekt

Mit Serial.println(temperature) senden wir Temperatur ins Web. Der eingebaute Web Serial Plotter visualisiert Temperatur im Browser – ohne Webprogrammierung!

Für Einsteiger: Lernen über WiFi & Sensor in Arduino – Tutorials zu WiFi und DS18B20.

Demonstration

.

Funktionsweise

• Arduino liest Temperatur vom Sensor, sendet via Serial
• Web Serial Plotter im Browser (Handy/PC) aufrufen
• Temperatur wird automatisch ans Web weitergeleitet
• Web visualisiert Temperatur im Diagramm
• Standardmäßig wie Serial Plotter in Arduino IDE. Anpassung nötig: X/Y-Achsentitel, Temperaturbereich, Anzahl angezeigter Samples – über Einstellungsseite.

Schritt-für-Schritt-Anleitung

1. Verdrahtung

• PHPoC WiFi Shield 2 oder PHPoC Shield 2 auf Arduino stecken
• Verdrahtung wie Bilder im Schaltplan-Bereich

2. Arduino-Code kompilieren & hochladen

Code siehe „Arduino Code – Short Sampling Period“

3. Web Serial Plotter anpassen

• IP-Adresse des PHPoC WiFi Shield im Browser aufrufen

• Auf „Setup“ klicken für Anpassungsseite

• Parameter wie oben anpassen & Speichern

4. Ergebnis

• „Connect“ klicken → Live-Grafik

Temperatur über lange Zeiträume überwachen

Kurzes Sampling-Intervall (Sekunden): Serial.println(temp) reicht, Graph baut sich auf.

Aber: Täglich/stündlich monitoren? Kann nicht stundenlang warten.

Lösung: Letzte N Messwerte auf Arduino speichern (Ringpuffer), häufig ausgeben.

Beispiel: 100 Stunden anzeigen, Einheit = Stunde. Jede Stunde Sensor lesen, in Ringpuffer (Länge 100) speichern. Jede Sekunde alle 100 Werte per Serial senden → Graph der letzten 100 Stunden sofort sichtbar, ohne 100 Stunden zu warten.

Code siehe „Arduino Code – Long Sampling Period“

Bestes Arduino-Starterkit für Einsteiger

Siehe The Best Arduino Kit for Beginners

Code

Arduino Code – Short Sampling Period Arduino

#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 (täglich, stündlich...) Arduino

#include 
#include 
#include 

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

OneWire oneWire(8);
DallasTemperature sensors(&oneWire);
unsigned long lastSampleTime, 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() {
  // Stündlich sampeln & in Ringpuffer schreiben
  if ((millis() - lastSampleTime) > SAMPLE_INTERVAL) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    temps[index] = temp;
    index = (index + 1) % 100;
    lastSampleTime = millis();
  }
  // Jede Sekunde gesamten Puffer (neueste zuerst) senden
  if ((millis() - lastUpdateTime) > UPDATE_INTERVAL) {
    for (int i = 0; i < 100; i++) {
      Serial.println(temps[(index - i + 100) % 100]);
    }
    lastUpdateTime = millis();
  }
}

Schaltpläne

1. PHPoC WiFi Shield 2 oder PHPoC Shield 2 auf Arduino stecken
2. Verdrahtung wie unten: