Temperature and humidity in the Web

Showing temperature and humidity in the Web

The Arduino board itself is not able to provide information like temperature and humidity. Specific sensors are needed to read physical properties. This example uses the AM2302/DHT22 device, that provides calibrated digital signal output of the temperature and humidity.

In order to show time on a website, the Arduino board has to be connected to internet. An ethernet shield can be used to enable the internet connection. The ethernet shield has to be installed on top of the Arduino board and connected with an RJ-45 cable to an IP router.

The Arduino board can be programmed as web client to POST temperature and humidity values towards an external web server, where data are stored and showed by a script. In this experiment a PHP script is used in the web server. The following figure shows the main parts of this Arduino experiment:
Web thermometer

Hardware set-up

Following hardware is required to build the experiment:

Arduino Uno board
Ethernet Shield for Arduino
AM2302/DHT22 device
resistor 5.1kΩ

Install the ethernet shield on top of the Arduino board, then proceed with the following connections, without any power connected:

Connect GND(Arduino) together with GND(AM2302/DHT22)
Connect Vcc(Arduino) together with Vcc(AM2302/DHT22)
Connect digital pin 5(Arduino) to SDA(AM2302/DHT22) together with a pull-up resistor (5.1kΩ)

Confused about all three-letters acronyms? Here is a brief explanation: GND is the ground line, Vcc is the positive supply line, SDA is the serial data line.

Arduino software

Before writing software make sure to have installed the software development environment, downlodable from Arduino Software web site.
It may be needed to download some library if not already present: Ethernet and DHTlib (some googling will help you finding the appropriate libraries).

Libraries are required to manage the external devices. For this reason the sketch has to include the required libraries:

#include <Ethernet.h>
#include <SPI.h>
#include <Wire.h>
#include <dht.h>

The setup() function has to initialize libraries features:

void setup () {
  Wire.begin();

// disable the SD card by switching pin 4 high
// not using the SD card in this program, but if an SD card is left in the socket,
// it may cause a problem with accessing the Ethernet chip, unless disabled
  pinMode(4, OUTPUT);
  digitalWrite(4, HIGH);
  Ethernet.begin(mac, ip);
}

The loop() function does the job:

void loop () {
    float temp; float hum;
    int chk = DHT.read22(DHT22_PIN);
    if (chk == DHTLIB_OK) {
      temp = DHT.temperature;
      hum = DHT.humidity;
      int temp10 = (int)(temp * 10);
      int hum10 = (int)(hum * 10);
// Warning: params must be url encoded.
      sprintf(params,"secret=%s&count=%i&temp10=%i&hum10=%i",secret,totalCount,temp10,hum10);    
      postPage(serverName,serverPort,pageName,params);
      totalCount++;
    }
    delay(100);
}

The function postPage() can be found in the Arduino playground area.

Download the complete sketch here, change the secret value and the web server name, then connect your Arduino Uno board to your computer using a USB cable and upload the sketch to the Arduino board.

Server side software

A script has to be loaded in the web server for two tasks:

Receive information from Arduino via ethernet shield
Render the temperature when request is received from a browser

Information is received in a POST request. A secret value is used to check that the information is sent by Arduino board:

define("secret", "rshe*i76"); // <-- change secret value here and inside sketch WebPost_DHT22.ino

The main part of the functionality is provided by the following code:

if ($_SERVER['REQUEST_METHOD'] == "POST") { // POST
  if ($_POST['secret'] == secret) { 
    $content =$_POST['count']."\t".$_POST['temp10']."\t".$_POST['hum10'];
    file_put_contents("arduino_test.dat",  date("d-M-y, G:i:s",time())."\t".$content);
  } // else authentication failure
} else { // GET
  echo "<html><head><meta http-equiv=refresh content=5></head><body>";
  $content = file_get_contents("arduino_test.dat");
  if ($content != false) {
    $res = split("\t", $content);
    echo $res[0]."<br>";
    echo "temperature: ".($res[2]/10)."<br>";
    echo "humidity: ".($res[3]/10)."<br>";
  } else {
    echo "no data available";
  }
  echo "</body></html>";
}

Download the complete script here, unzip it, change the secret value and upload to your webserver. Now you should be able to see the temperature and humidity using a web browser!

Demo

Here is an example of the output in the web browser:

28-Dec-14, 10:20:54
temperature: 20.7
humidity: 47.1