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

Step 1: Hardware

you will need following hardware

1. ESP8266

2. Temp Humidity sensor HIH6130

3. ESP8266 USB programmer

4. Connecting cable

Step 2: Wiring and schematic

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.

Step 3: Hardware setup

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

Step 4: Software setup

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.

Step 5: 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 
#include
#include 
#include
#include 
// 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();  // Request 4 bytes of data
 Wire.requestFrom(Addr, 4);  // 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();
 }  // 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;  // 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); snprintf ( temp, 400,"
\
 
\
   
\
   
\
   
\
 \
 
\
   
Weather Monitoring using ESP8266\
   
HIH6130 I2C sensor mini Module\
   
fTemp_cTemp_Humidity: %02d:%02d:%02d\
   \
",    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";  for ( uint8_t i = 0; i < server.args(); i++ ) {
   message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "\n";
 }  server.send ( 404, "text/plain", message );
}void setup ( void ) {
 Wire.begin(2,14);
 Serial.begin ( 115200 );
 WiFi.begin ( ssid, password );
 Serial.println ( "" );  // Wait for connection
 while ( WiFi.status() != WL_CONNECTED ) {
   delay ( 500 );
   Serial.print ( "." );
 }  Serial.println ( "" );
 Serial.print ( "Connected to " );
 Serial.println ( ssid );
 Serial.print ( "IP address: " );
 Serial.println ( WiFi.localIP() );  if ( MDNS.begin ( "esp8266" ) ) {
   Serial.println ( "MDNS responder started" );
 }  server.on ( "/", handleRoot ); 
 server.onNotFound ( handleNotFound );
 server.begin();
 Serial.println ( "HTTP server started" );
}void loop ( void ) {
 server.handleClient();
}

Step 6: ESP8266 web app

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.

Step 7: Sensor o/p

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.