Just by using Serial.println(temperature), we can send temperature via web. Using a built-in Web Serial Plotter, we can visualize temperature on web WITHOUT web programming.



Demonstration





Things we need


How It Works
  • Arduino read temperature value from sensor and send it via Serial
  • Access Web Serial Plotter from a browser on mobile phone or PC
  • Temperature is automatically forwarded to Web.
  • Web visualizes temperature on Web
  • By default, Web Serial Plotter works as the same as Serial Plotter on Arduino IDE. We need to customize it to add X-axis title, Y-axis title, temperature range and the number of the displayed data samples as well. This can be done via a setting page.




Schematics

1. Stack PHPoC Wifi Shield 2 or PHPoC Shield 2 on Arduino
2. Wiring like below image
Real Wiring

Schematic real rpkna9uz0n







Step-by-step Instructions


1. Compile and Upload Arduino Code

Code:
#include <OneWire.h>
#include <DallasTemperature.h>
#include <Phpoc.h>
#define SAMPLE_INTERVAL 1000 // in ms

// Data wire is plugged into port 8 on the 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();
    }
}
2. Customize Web Serial Plotter
  • Access Web Serial Plotter by typing IP address of PHPoC WiFi Shield
  • Click "Setup" link to customization page
  • Customize parameters as above and Save

3. Result
  • Click connect button to see the result





Monitoring Temperature over Long Period


If temperature is sampling in small interval (e.g seconds), We just need to print temperature value to Serial because we can wait to see the graph.

What happen if we want to monitor temperature daily or hourly? We can NOT wait to see all graph.

Solution: we store the number of the last sampling temperatures on Arduino and print it frequently.

For example, We want to see temperature display on graph with during 100 hours. The unit is hour. We need to read data from sensor every hour, store it in an circle queue (queue length is 100). Every second, we print out all 100 sample data. Therefore, we can see graph of temperature during the last 100 hours without waiting for 100 hours.

Code:
#include <OneWire.h>
#include <DallasTemperature.h>
#include <Phpoc.h>
#define UPDATE_INTERVAL 1000 // in ms
#define SAMPLE_INTERVAL 60*60*1000 // 1 hour

// Data wire is plugged into port 8 on the 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();
    }
}