ESP8266 WiFi Temp Humidity Monitoring Web App Using Arduino IDE

Last week i received a ESP8266(adafruit). the new ESP8266 has arduino boot-loader so it makes possible to program arduino code directly into the ESP8266. this ESP8266 comes with UART,I2C and GPIO. with this new wifi module you dont need any arduino board you can do everything directly with it. this module doesnt have any usb port on it so there are two ways to solve this. either you can buy a usb to serial cable or you can make your own adapter with a USB to serial converter and you can plug this ESP8266 directly into it. ESP8266 programmer smiler to mine can be found over here.

you will need following hardware

1. ESP8266

2. Temp Humidity sensor HIH6130

3. ESP8266 USB programmer

4. Connecting cable

in this project i am using plug and play hardware so all you will is to plug the I2C cable into the sensor and the ESP8266 adapter.

for I2C i am using pin 2,14.

using the USB programmer is really easy to program ESP8266.
to connect the sensor all you need is to plug the sensor into the I2C adapter. i prefer to use these adapters because they make so easy to connect hardware, without these plug and play adapter there is a lot of risk of making wrong connection. A bad wiring can kill your wifi as well as your sensor.

HIH6130 is a relative humidity and temp sensor from honeywell.

Accuracy ±4.0% Relative Humidity

Temperature Compensated

Honeywell HumidIcon Digital Humidity/Temperature Sensors are digital output-type relative humidity and temperature sensors combined in the same package. These sensors provide an accuracy level of ±4% RH. With industry-leading long-term stability, true temperature-compensated digital I2C, Industry-leading reliability, Energy efficiency and Ultra-small package size and options. Other accuracies which are available: ±1.7% RH (HIH9000 Series), ±2.0% RH (HIH8000 Series), ±3.0% RH (HIH7000 Series), and ±4.0% RH (HIH6100 Series).

this ESP8266 can be programmed using the arduino ide.

make sure you install ESP8266 libraries. to install libraries please follow these instructions.

once you install the libraries select the ESP8266 board and select the port and upload the code.

to show the sensor o/p on a webpage i wrote a very basic script which will read the sensor data and will display in a browser.

ESP8266 webapp code sample

#include <ESP8266WiFi.h>

#include<WiFiClient.h>

#include <ESP8266WebServer.h>

#include<ESP8266mDNS.h>

#include <Wire.h>

// HIH6130 I2C address is 0x27(39)

#define Addr 0x27

const char* ssid     = "NETGEAR34";
const char* password = "sillyviolet195";

ESP8266WebServer server ( 80 );

////////////////////////////////////////////////////////////////
void handleRoot() {
  char temp[400];
  unsigned int data[4];
   Wire.beginTransmission(Addr);
  // Select data register
  Wire.write(0x00);
  // Stop I2C Transmission
  Wire.endTransmission();</p><p>  // Request 4 bytes of data
  Wire.requestFrom(Addr, 4);</p><p>  // Read 4 bytes of data
  // humidity msb, humidity lsb, temp msb, temp lsb
  if (Wire.available() == 4)
  {
    data[0] = Wire.read();
    data[1] = Wire.read();
    data[2] = Wire.read();
    data[3] = Wire.read();
  }</p><p>  // Convert the data to 14-bits
  int humidity = ((((data[0] & 0x3F) * 256) + data[1]) * 100.0) / 16383.0;
  int temp1 = ((data[2] * 256) + (data[3] & 0xFC)) / 4;
  int cTemp = (temp1 / 16384.0) * 165.0 - 40.0;
  int fTemp = cTemp * 1.8 + 32;</p><p>  // Output data to serial monitor
  Serial.print("Relative Humidity :");
  Serial.print(humidity);
  Serial.println(" %RH");
  Serial.print("Temperature in Celsius :");
  Serial.print(cTemp);
  Serial.println(" C");
  Serial.print("Temperature in Fahrenheit :");
  Serial.print(fTemp);
  Serial.println(" F");
  delay(500);</p><p> snprintf ( temp, 400,</p><p>"
\
  
\
    
\
    
</p><p>\
    
</p><p>\
  </p><p>\
  
\
    
</p><h1>Weather Monitoring using ESP8266</h1><p>\
    
</p><h1>HIH6130 I2C sensor mini Module</h1><p>\
    
</p><p>fTemp_cTemp_Humidity: %02d:%02d:%02d</p><p>\
    </p><p>\
</p><p>",</p><p>    fTemp, cTemp, humidity
  );
  
  server.send ( 200, "text/html", temp );
  }
/////////////////////////////////////////////////////////////////
void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += ( server.method() == HTTP_GET ) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";</p><p>  for ( uint8_t i = 0; i < server.args(); i++ ) {
    message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "\n";
  }</p><p>  server.send ( 404, "text/plain", message );
}</p><p>void setup ( void ) {
  Wire.begin(2,14);
  Serial.begin ( 115200 );
  WiFi.begin ( ssid, password );
  Serial.println ( "" );</p><p>  // Wait for connection
  while ( WiFi.status() != WL_CONNECTED ) {
    delay ( 500 );
    Serial.print ( "." );
  }</p><p>  Serial.println ( "" );
  Serial.print ( "Connected to " );
  Serial.println ( ssid );
  Serial.print ( "IP address: " );
  Serial.println ( WiFi.localIP() );</p><p>  if ( MDNS.begin ( "esp8266" ) ) {
    Serial.println ( "MDNS responder started" );
  }</p><p>  server.on ( "/", handleRoot );</p><p> 
  server.onNotFound ( handleNotFound );
  server.begin();
  Serial.println ( "HTTP server started" );
}</p><p>void loop ( void ) {
  server.handleClient();
}</p>

I dont have much exp with html. so i just wrote a simple example app that how you can display your sensor data from ESP8266 to a webpage.

this code will read the temp & humidity using the sensor HIH6130 and will display the data on a local webpage.

reading sensor data is really easy. please check this code for reading temp and humidity.

i displayed the sensor data on arduino serial monitor as well as on a local web page.

as you can see they are showing the same output.

if you have any questions please let me know.