Arduino-TempHumidity-with-LCD-And-Web-Interface ALLSTEPS

8/10/2019 Arduino-TempHumidity-with-LCD-And-Web-Interface ALLSTEPS

1/12

Arduino Temp/Humidity with LCD and Web Interface

I recently helped a client move their office which included setting up a new computer room.

I wanted them to be able to check the temperature and humidity of the room both by checking an

LCD display in the room and also via a web page. I put together an Arduino with a DHT11 sensor,

16x2 LCD display and ENC28J60 Ethernet module. I did the project in stages first getting the

DHT11 portion working using the DHT11 library and examples fromAdafruit, then adding an LCD

display and finally adding Ethernet using the EtherCard library and modifying their example code .

This makes troubleshooting a lot easier and I could build/learn the code as I went along. I have

taken code from the various examples provided with the necessary libraries.

This instructable will go through the steps to prototype this.

Note: the DHT11 sensor isn't very accurate - about plus and minus 2 degrees Celsius and 5%

accuracy for humidity. I'll probably be changing to a DHT22 which is plus and minus .5 degrees

Celsius and between 2%and 5%for humidity. The good news is it's an easy change in the code.

Removethese ads bySigning Up

Step 1:

http://www.instructables.com/id/Arduino-TempHumidity-with-LCD-and-Web-Interface/?ALLSTEPS (1 of 12) [11/16/2014 6:06:46 AM]

share what you

make >

Login|

Sign

Up

Arduino Temp/Humidity with LCD and Web Interfaceby SteveRoy

MAKESHIFT

Intel IoT

RadioShack

Black &Decker Fix &

Repair

let's make Explore

Create

Contests

Community

Collection I Made it!

9 Steps

Download

Favorite

Share
http://www.adafruit.com/http://www.instructables.com/account/gopro?sourcea=removeads&nxtPgName=Arduino+Temp%2FHumidity+with+LCD+and+Web+Interface&nxtPg=/id/Arduino-TempHumidity-with-LCD-and-Web-Interface/?ALLSTEPShttp://www.instructables.com/account/gopro?sourcea=removeads&nxtPgName=Arduino+Temp%2FHumidity+with+LCD+and+Web+Interface&nxtPg=/id/Arduino-TempHumidity-with-LCD-and-Web-Interface/?ALLSTEPShttp://www.instructables.com/editInstructable/http://www.instructables.com/editInstructable/http://www.instructables.com/account/gopro?sourcea=headerhttp://www.instructables.com/account/loginhttp://www.instructables.com/account/loginhttp://www.instructables.com/account/gopro?sourcea=headerhttp://www.instructables.com/account/gopro?sourcea=headerhttp://www.instructables.com/id/Fix-and-Repair/http://www.instructables.com/group/goFurtherhttp://www.instructables.com/id/intel/http://www.instructables.com/group/radioshackhttp://www.instructables.com/id/Fix-and-Repair/http://www.instructables.com/id/Fix-and-Repair/http://www.instructables.com/http://www.instructables.com/tag/type-id/http://www.instructables.com/about/submit.jsphttp://www.instructables.com/contest/http://www.instructables.com/community/http://www.instructables.com/id/Arduino-TempHumidity-with-LCD-and-Web-Interface/?download=pdfhttp://www.instructables.com/id/Arduino-TempHumidity-with-LCD-and-Web-Interface/?download=pdfhttp://www.instructables.com/community/http://www.instructables.com/contest/http://www.instructables.com/about/submit.jsphttp://www.instructables.com/tag/type-id/http://www.instructables.com/id/Fix-and-Repair/http://www.instructables.com/id/Fix-and-Repair/http://www.instructables.com/group/radioshackhttp://www.instructables.com/id/intel/http://www.instructables.com/group/goFurtherhttp://www.instructables.com/member/SteveRoy/http://www.instructables.com/account/gopro?sourcea=headerhttp://www.instructables.com/account/gopro?sourcea=headerhttp://www.instructables.com/account/loginhttp://www.instructables.com/http://www.instructables.com/http://www.instructables.com/editInstructable/http://www.instructables.com/editInstructable/http://www.instructables.com/account/gopro?sourcea=removeads&nxtPgName=Arduino+Temp%2FHumidity+with+LCD+and+Web+Interface&nxtPg=/id/Arduino-TempHumidity-with-LCD-and-Web-Interface/?ALLSTEPShttp://www.adafruit.com/http://www.instructables.com/file/F7R8L6ZHOUFX1MQ


2/12

What you will need:

An Arduino

DHT11 or DHT22 sensor fromAdafruitor various ebay vendors

10K resistor for the DHT11 pullup 16x2 LCD display HD44780

10k trimpot for LCD contrast

100 Ohm resistor for the LCD backlight

ENC26J60 Ethernet module or shield

Prototype shield if you use a regular Arduino and ENC28J60 Ethernet shield

hookup wire, breadboard etc for prototyping

Step 2: Wiring up the DHT11


http://www.instructables.com/id/Arduino-TempHumidity-with-LCD-and-Web-Interface/?ALLSTEPS(2 of 12) [11/16/2014 6:06:46 AM]
http://www.adafruit.com/products/386http://www.adafruit.com/products/386http://www.ebay.ca/sch/i.html?_from=R40&_sacat=0&_nkw=enc28j60+shield&rt=nc&LH_BIN=1http://www.ebay.ca/sch/i.html?_from=R40&_sacat=0&_nkw=enc28j60+shield&rt=nc&LH_BIN=1http://www.instructables.com/file/FQNLCFTHOKSCR8Phttp://www.instructables.com/file/FQNLCFTHOKSCR8Phttp://www.instructables.com/file/FQNLCFTHOKSCR8Phttp://www.instructables.com/file/FQ2XZAZHOKSCR8Nhttp://www.ebay.ca/sch/i.html?_from=R40&_sacat=0&_nkw=enc28j60+shield&rt=nc&LH_BIN=1http://www.adafruit.com/products/386http://www.instructables.com/file/FECFP6GHOUFX1EN


3/12

The DHT11 and DHT12 have 4 pins. Looking at it with the side with square cutouts in it the pins

are from left to right:

+5v

Signal

not used

GND

It also requires a 10k pullup resistor between +5V and Signal

For this project the Signal lead goes to Digital Pin 2 on the Arduino

The images show the DHT11 soldered into a prototype shield with the signal lead going to the

Arduino digital Pin2

Step 3: DHT11 library and test sketch


http://www.instructables.com/file/F42BDGKHOKSCSTThttp://www.instructables.com/file/F42BDGKHOKSCSTThttp://www.instructables.com/file/F42BDGKHOKSCSTThttp://www.instructables.com/file/FLGQQC6HOKSCRHZhttp://www.instructables.com/file/FWWTFKZHOKSCR8S


4/12


Adafruit have a DHT11 library and example code that makes it easy to test the DHT11 and get

values to display on the serial window of the Arduino IDE

Download the library from Adafruit, the link takes you to the "GitHub" page. Look for the zip

file download button.

Unzip the files into your libraries folder. The best place to unzip to is under your "My

Documents\Arduino\Libraries" folder - later if you upgrade the Arduino IDE the library will still

be there.

If you browse to your libraries folder you should see a new folder named DHT-sensor-

library-masterRename it to DHT

Connect up your Arduino and start the IDE

Look under File -> Examples -> DHT and openDHTtester.

You will need to comment the line startng with#define DHTTYPE DHT22 by

putting a// in front of it and then uncomment the line starting with//#defineDHTTYPE DHT11by removing the two leading//'s.

Upload the sketch then open the serial window. You should see the temperature and humidity

level scrolling. If you breathe onto the sensor you should see the temperature and humidity

rise. It will take a few seconds as the sensor is slow.

In the example sketch the temperature and humidity variables are defines as "float", i.e. they have

decimal places. This can be changed to an "int" to remove the decimal places as they aren't

needed in this project.

Find the lines:

float h = dht.readHumidity();

float t = dht.readTemperature();

and change them to:

int h = dht.readHumidity();

int t = dht.readTemperature();

Upload the sketch and check the results in the serial window. You should see the temperature as

whole rather than decimal numbers.

If you have a working sensor the next step is to connect an LCD display and see the temp and

humidity on it.

Before you go onto the next step you should save the sketch to a folder. This way if you need to

http://www.instructables.com/file/FZT0C41HOKSCSSF


5/12

troubleshoot later you can load the minimal code needed to test the sensor.

My test sketch:

DHT_Test.ino1 KB

Step 4: Wiring Up the LCD


http://www.instructables.com/files/orig/FLG/SQRU/HOKSCTUA/FLGSQRUHOKSCTUA.inohttp://www.instructables.com/file/F6NFR5KHOKSCUQShttp://www.instructables.com/file/F6NFR5KHOKSCUQShttp://www.instructables.com/file/F6NFR5KHOKSCUQShttp://www.instructables.com/file/F7S11IBHOKSCUQQhttp://www.instructables.com/file/FNHJQLZHOKSCV0Mhttp://www.instructables.com/files/orig/FLG/SQRU/HOKSCTUA/FLGSQRUHOKSCTUA.inohttp://www.instructables.com/files/orig/FLG/SQRU/HOKSCTUA/FLGSQRUHOKSCTUA.ino


6/12

The LCD has 16 pins, 12 are used.

Pin1 to Ground

Pin 2 to +5V

Pin 3 to 10K trimpot center

Pin 4 (RS) to Arduino Digital Pin 3

Pin 5 (RW) to Ground

Pin 6 (E) to Arduino Digital Pin 4Pin 7 - Not Used

Pin 8 - Not Used

Pin 9 - Not Used

Pin 10 - Not Used

Pin 11 (D4) to Arduino Digital Pin 5




Pin 15 (Back Light +) to 5v

Pin 16 (Back Light -) to ground via100 Ohm resistor)

One side of the 10K trimpot goes to +5v the other side to ground

See the schematic diagram and pictures.

Note I have flipped the Arduino upside down in the "Fritzing" schematic to match the photo's and

make the wiring neater.

Step 5: LCD test sketch


http://www.instructables.com/file/FN1ZC97HOKSCUR0http://www.instructables.com/file/FEF7R6SHOKSCUQV


7/12


The library for the HD44780 compatible LCD displays is included with the latest versions of the

Arduino IDE.

Open the"HelloWorld"test sketch under File -> Examples -> LiquidCrystal

Look for the line:

LiquidCrystal lcd(12, 11, 5, 4, 3, 2);

and change it to:

LiquidCrystal lcd(3, 4, 5, 6, 7, 8);

We need to change the pin assignments as the Ethernet controller we will add later uses pins 11

and 12

Upload the sketch

Adjust the trimpot until you see the display clearly You should seehello, world!on the top line and numbers counting on the second line

Save the sketch to a folder.

The Arduino website has a good tutorial on LCD displays

It also covers the lcd.begin, thelcd.print, and the lcd.setCursor

LCD_Test.ino1 KB

Step 6: Combining the DHT11 and LCD sketches

If the DHT11 test sketch and the LCD test sketch both work we can combine them.

Load the sketch below.

Upload it to the Arduino - you should now see the temperature and humidity displayed on the LCD

screen.

Again, breathe on the sensor and you should see the temp and humidity change.

If this is working save the sketch and we can move onto setting up the Ethernet.

http://arduino.cc/en/Tutorial/LiquidCrystalhttp://arduino.cc/en/Tutorial/LiquidCrystalhttp://arduino.cc/en/Reference/LiquidCrystalBeginhttp://arduino.cc/en/Reference/LiquidCrystalPrinthttp://arduino.cc/en/Reference/LiquidCrystalPrinthttp://arduino.cc/en/Reference/LiquidCrystalSetCursorhttp://www.instructables.com/files/orig/FYJ/RHVD/HOKSD52E/FYJRHVDHOKSD52E.inohttp://www.instructables.com/files/orig/F14/WIUC/HOKSD5FZ/F14WIUCHOKSD5FZ.inohttp://www.instructables.com/files/orig/F14/WIUC/HOKSD5FZ/F14WIUCHOKSD5FZ.inohttp://www.instructables.com/files/orig/F14/WIUC/HOKSD5FZ/F14WIUCHOKSD5FZ.inohttp://www.instructables.com/file/FGXWC1UHOKSD5LDhttp://www.instructables.com/files/orig/FYJ/RHVD/HOKSD52E/FYJRHVDHOKSD52E.inohttp://www.instructables.com/files/orig/FYJ/RHVD/HOKSD52E/FYJRHVDHOKSD52E.inohttp://arduino.cc/en/Reference/LiquidCrystalSetCursorhttp://arduino.cc/en/Reference/LiquidCrystalPrinthttp://arduino.cc/en/Reference/LiquidCrystalBeginhttp://arduino.cc/en/Tutorial/LiquidCrystal


8/12

DHT11andLCD.ino1 KB

Step 7: Wiring up the ENC28J60 module

I am using an ENC28J60 module for my prototype.

You need to supply 3.3V to this unit.

The pins we use on the module are:


http://www.instructables.com/files/orig/F14/WIUC/HOKSD5FZ/F14WIUCHOKSD5FZ.inohttp://www.instructables.com/file/F010VOKHOKSD64Lhttp://www.instructables.com/file/F7PGJN5HOKSD64Khttp://www.instructables.com/file/F0YHS83HOKSD63Ahttp://www.instructables.com/files/orig/F14/WIUC/HOKSD5FZ/F14WIUCHOKSD5FZ.ino


9/12


VCC, GND, CS, SO, SI, SCK

VCC to Arduino Pin 3.3V

GND to Arduino Pin GND

CS to Arduino Digital Pin 10

SI to Arduino Digital Pin 11

SO to Arduino Digital Pin 12

SCK to Arduino Digital Pin 13

The last thing to do is connect a Cat5 patch cable from the RJ45 port to a spare port on your

network router or switch.

Step 8: ENC28J60 Test Sketch and Library

Now that we have our Ethernet module wired we can test it with an example sketch.

Like the DHT11 we need to download ans install a library for it as it is not the "official" Arduino

Ethernet module (the WizNet W5100 is). The old library for the ENC28J60 is called EtherShield

and development has stopped for this library. The new library is called EtherCard and is available

on GitHub.

Like the DHT11 library you need to:

Download the zipped file and then unzip them into your library folder

Rename the folder to EtherCard.

Restart the Arduino IDE so the library will be included.

Load the example sketchrbbb_server

We need to change a couple of lines in the sketch so our IP address will be on the correct subnet

and also change the CS pin assignment from the default of digital pin 8 to digital pin 10.

Look for the line starting with - static byte myip[]and change the IP address to a

unused IP address on your network.

Look for the line:

if (ether.begin(sizeof Ethernet::buffer, mymac) == 0)

and change it to:

if (ether.begin(sizeof Ethernet::buffer, mymac, 10) == 0)

Upload the sketch then open a web browse on your PC and go to the IP address you specified in

the above address. You should see a timer counting.


A d i T /H idit ithLCD d W b I t f
https://github.com/jcw/ethercardhttps://github.com/jcw/ethercardhttps://github.com/jcw/ethercardhttps://github.com/jcw/ethercardhttp://www.instructables.com/file/FMN5L3YHOVU9K3P


10/12


If it work then you may want to try some of the other example sketches included with the library.

Just make sure you add the 10to the ether.beginline as noted above.

Ethernet_Test.ino1 KB

Step 9: Tying it all together

My first attempt at tying the 3 test sketch's together worked, however the Ethernet would often

timeout. So I got some help fromKev_MacDwho helped me modify the sketch to get better timingin my loops.

The posted sketch has comments in it:


Arduino Temp/Humidity withLCD and Web Interface
http://www.instructables.com/files/orig/FIK/K4CT/HOUFWXUF/FIKK4CTHOUFWXUF.inohttp://www.instructables.com/member/Kev_MacD/http://www.instructables.com/member/Kev_MacD/http://www.instructables.com/member/Kev_MacD/http://www.instructables.com/file/F7R8L6ZHOUFX1MQhttp://www.instructables.com/file/FECFP6GHOUFX1ENhttp://www.instructables.com/files/orig/FIK/K4CT/HOUFWXUF/FIKK4CTHOUFWXUF.inohttp://www.instructables.com/files/orig/FIK/K4CT/HOUFWXUF/FIKK4CTHOUFWXUF.ino


11/12


We added a gateway IP address as I want to be able to view the webpage from outside the LAN -

you will need to do port forwarding on your router to make this work.

We define global variables for the temp and humidity values

We define variables for 2 timers, one for the sensor read time and one for an animation on the

LCD

The "refresh" value in the webpage code was changed from 1 to 30 to make the refresh 30

seconds vs every second. This line could be removed if you don't want the page to auto refresh or

increased to make the refresh time longer.

Upload the sketch, open a web browser and go to the IP address. You should see the

temperature and humidity the same as what's on the LCD display. The LCD should also have an

animation showing on the bottom right of the display.

In future version I hope to change the LCD to a 1.8" TFT colour display with an NTP clock so I can

see the timw, temp and humidity on a larger easy to read screen. I welcome comments and

feedback on this Instructable.

Final_Sketch.ino3 KB

We have abe nicecomment

policy.

Please be positive and constructive. I Made it! Add Images


Make Comment

Arduino Temp/Humidity withLCD and Web Interface
http://www.instructables.com/files/orig/FIT/HW03/HOUFX1LB/FITHW03HOUFX1LB.inohttp://www.instructables.com/files/orig/FIT/HW03/HOUFX1LB/FITHW03HOUFX1LB.inohttp://www.instructables.com/files/orig/FIT/HW03/HOUFX1LB/FITHW03HOUFX1LB.ino


12/12

