Published December 14, 2018 © GPL3+

Arduino - Send Temperature to Web via Serial

Using Serial. println(temp) to send real-time temperature to web. Optionally, we can see daily or hourly graph of temperature in real-time.

BeginnerFull instructions provided17,570

Things used in this project

Hardware components

Arduino UNO

PHPoC WiFi Shield 2 for Arduino

Adafruit DS18B20 Temerature Sensor

Jumper wires

Story

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.

If you are a beginner, you can learn about wifi and sensor in Arduino - Wifi and Arduino - DS18B20 temperature sensor tutorials

Demonstration

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.

Step-By-Step Instructions

1. Wiring

Stack PHPoC Wifi Shield 2 or PHPoC Shield 2 on Arduino
Wiring like images in Schematic part

2. Compile and Upload Arduino Code

See code in "Arduino Code - Short Sampling Period"

3. 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

4. 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.

You can see code in "Arduino Code - Long Sampling Period"

The Best Arduino Starter Kit for Beginner

See The Best Arduino Kit for Beginners

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();
	}
}

#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();
	}
}

Arduino - Send Temperature to Web via Serial

Things used in this project

Hardware components

Story

Demonstration

How It Works

Step-By-Step Instructions

Monitoring Temperature Over Long Period

The Best Arduino Starter Kit for Beginner

Schematics

Wiring between Arduino and Sensor

Real Wiring

Code

Arduino Code - Short Sampling Period

Arduino Code - Long Sampling Period (daily, hourly...)

Credits

IoT_hobbyist

Comments

Embed the widget on your own site

Arduino - Send Temperature to Web via Serial

Arduino - Send Temperature to Web via Serial

Things used in this project

Hardware components

Story

Demonstration

How It Works

Step-By-Step Instructions

Monitoring Temperature Over Long Period

The Best Arduino Starter Kit for Beginner

Schematics

Wiring between Arduino and Sensor

Real Wiring

Code

Arduino Code - Short Sampling Period

Arduino Code - Long Sampling Period (daily, hourly...)

Credits

IoT_hobbyist

Comments

Related channels and tags