Arduino UNO & WiFi Shield: Realtime Temperatuurweergave op het Web via Serieel

Onderdelen en benodigdheden

Over dit project

Door gewoon Serial.println(temperatuur) te gebruiken, kunnen we temperatuur via het web versturen. Met de ingebouwde Web Serial Plotter kunnen we temperatuur op het web visualiseren ZONDER webprogrammering.

Als je een beginner bent, kun je leren over wifi en sensor in Arduino - Wifi en Arduino - DS18B20 temperatuursensor tutorials.

Demonstratie

.

Hoe het werkt

• Arduino leest temperatuurwaarde van sensor en stuurt het via Serial
• Toegang tot Web Serial Plotter vanuit een browser op mobiele telefoon of PC
• Temperatuur wordt automatisch doorgestuurd naar het Web
• Web visualiseert temperatuur op het Web
• Standaard werkt Web Serial Plotter hetzelfde als Serial Plotter in Arduino IDE. We moeten het aanpassen om X-as-titel, Y-as-titel, temperatuurbereik en het aantal getoonde datamonsters toe te voegen. Dit kan via een instellingenpagina.

Stap-voor-stap instructies

1. Bedrading

• Stapel PHPoC WiFi Shield 2 of PHPoC Shield 2 op Arduino
• Bedraad als de afbeeldingen in het Schema-deel

2. Compileer en upload Arduino-code

Zie code in "Arduino-code - Korte meetinterval"

3. Pas Web Serial Plotter aan

• Toegang tot Web Serial Plotter door het IP-adres van PHPoC WiFi Shield in te typen

• Klik op "Setup" link naar aanpassingspagina

• Pas parameters aan zoals hierboven en bewaar

4. Resultaat

• Klik op connect-knop om het resultaat te zien

Temperatuur monitoren over lange periode

Als temperatuur wordt gemeten in klein interval (bijv. seconden), hoeven we alleen de temperatuurwaarde naar Serial te printen omdat we kunnen wachten om de grafiek te zien.

Wat gebeurt er als we temperatuur dagelijks of per uur willen monitoren? We kunnen NIET wachten om de hele grafiek te zien.

Oplossing: we slaan het aantal laatste meetwaarden op de Arduino op en printen het frequent.

Bijvoorbeeld, we willen temperatuur zien op een grafiek gedurende 100 uur. De eenheid is uur. We moeten elke uur data van de sensor lezen, opslaan in een cirkelwachtrij (wachtrijlengte is 100). Elke seconde printen we alle 100 monsters uit. Daarom kunnen we de grafiek van temperatuur gedurende de laatste 100 uur zien zonder 100 uur te wachten.

Je kunt de code zien in "Arduino-code - Lange meetinterval (dagelijks, per uur...)"

De beste Arduino Starter Kit voor beginners

Zie De beste Arduino Kit voor beginners

Code

Arduino-code - Korte meetinterval

Arduino

#include 
#include 
#include 

#define SAMPLE_INTERVAL 1000 // in ms

// Data-draad is aangesloten op poort 8 op de Arduino
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 - Lange meetinterval (dagelijks, per uur...)

Arduino

#include 
#include 
#include 

#define UPDATE_INTERVAL 1000 // in ms
#define SAMPLE_INTERVAL 60*60*1000 // 1 uur

// Data-draad is aangesloten op poort 8 op de Arduino
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() {
  if((millis() - lastSampleTime) > SAMPLE_INTERVAL) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    temps[index] = temp;
    index = (index + 1) % 100;
    lastSampleTime = millis();
  }
  
  if((millis() - lastUpdateTime) > UPDATE_INTERVAL) {
    for(int i = 0; i < 100; i++) {
      Serial.println(temps[(index - i + 100) % 100]);
    }
    lastUpdateTime = millis();
  }
}

Schema's

1. Stapel PHPoC WiFi Shield 2 of PHPoC Shield 2 op Arduino
2. Bedraad als onderstaande afbeelding