Introduction: Arduino Temp/Humidity With LCD and Web Interface

Picture of 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 from Adafruit, 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.

Step 1:

Picture of
What you will need:

  • An Arduino
  • DHT11 or DHT22 sensor from Adafruit or 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

Picture of Wiring Up the DHT11
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

Picture of DHT11 Library and Test Sketch
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-master Rename it to DHT
  • Connect up your Arduino and start the IDE
  • Look under File -> Examples -> DHT and open DHTtester.
  • 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 //#define DHTTYPE 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 troubleshoot later you can load the minimal code needed to test the sensor.
My test sketch:

Step 4: Wiring Up the LCD

Picture of Wiring Up the LCD

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 4
Pin 7 - Not Used
Pin 8 - Not Used
Pin 9 - Not Used
Pin 10 - Not Used
Pin 11 (D4) to Arduino Digital Pin 5
Pin 12 (D5) to Arduino Digital Pin 6
Pin 13 (D6) to Arduino Digital Pin 7
Pin 14 (D7) to Arduino Digital Pin 8
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

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 see hello, 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, the lcd.print, and the lcd.setCursor

Step 6: Combining the DHT11 and LCD Sketches

Picture of 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.

Step 7: Wiring Up the ENC28J60 Module

Picture of 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:

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

Picture of 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.

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 10 to the ether.begin line as noted above.

Step 9: Tying It All Together

Picture of 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 from Kev_MacD who helped me modify the sketch to get better timing in my loops.

The posted sketch has comments in it:

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.


RenatoL1 made it! (author)2016-12-16

very good example.
Works nice !

ghanraj (author)2016-07-06

I tried it without lcd and different code it is still not working with that different code

SteveRoy (author)ghanraj2016-07-06

Do you get it working up to Step 3? Wiring up the sensor and reading the temp on the Arduino serial port?

ghanraj (author)2016-07-06

when I have add the display my sensor stop collecting reading plz help buddy

sragl (author)2016-06-20

Beautiful project.

But how can I see data from outside Internet network?

I refer as well to access from outside?

For example from another network

The network goes eg

SteveRoy (author)sragl2016-06-20

Setup port forwarding from your router.

sragl (author)SteveRoy2016-06-21

Hello friend.

Thank you for your promptness of responding just as I have no problem with rooteru but the declaration port in the program.

I tried this formula but does not work :( "server = EthernetServer EthernetServer (8081)," Where in rooter port 8081 is open and ready to receive data from outside but unfortunately progranul not support this formula.

If you can help me with that formula and example would be of great help to me.

Multumesv again prompt response given to you

Halil SelimG (author)2016-05-04

I need your arduino code which you already write on arduino ide?

Because I have to send to the measure value of soil moisture to android phone with ethernet module (enc28j60) by arduino ide?

SteveRoy (author)Halil SelimG2016-05-05

All the code I used is in the instructable.

Use a "soil moisture sensor" and prototype the same way I did in this Instructable:

1. get the arduino and soil moisture sensor talking to each other

2. get a bluetooth module and the arduino talking to each other

3. get the bluetooth/arduino talking to the phone.

4. combine it all

lynchjg (author)2015-11-12

Does the ENC26J80 come with a unique MAC address or does it take the value in your sketch code? Have you ever create any code to get remote NTP time using the ENC26J80 card?

lynchjg (author)2015-11-11

Got things to work using the Final_Sketch and removing the "static" from word homePage(). Could you be more specific on external web access? Specifically, what port number do I set in my router as being forwarded? Is there a specific port found in the code for the ENC28J80?

SteveRoy made it! (author)lynchjg2015-11-11

It will be somewhat different depending on the router - however the default port is 80,

so in my Linksys running dd-wrt I goto:

NAT/QoS then port forwarding. Then Add, give it a name, port 80, put the IP address you assigned to the Arduino, enable it and save.

It will be similar on most home type routers

lynchjg (author)SteveRoy2015-11-11

Thanks for the information. The port forwarding works great.

One other question, I have modified the sketch using a DS1307RTC. For the web page display code, how can I get it to show the leading zero for the hour, minute, seconds when they are single digits?

lynchjg (author)lynchjg2015-11-11

I saw my answer in the code below after sending the question. Thanks,

lynchjg (author)lynchjg2015-11-11

I saw my answer in the code below after sending the question. Thanks,

lynchjg (author)2015-11-09

I am trying to create this project and I have downloaded the the EtherCard checkout program listed above on this page. When I compile this program, I get the errors:

C:\Arduino\EtherCard\Ethernet_Test\Ethernet_Test.ino: In function 'word homePage()':

Ethernet_Test:19: error: 'word homePage()' was declared 'extern' and later 'static' [-fpermissive]

static word homePage() {


Ethernet_Test:14: error: previous declaration of 'word homePage()' [-fpermissive]

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


exit status 1

Can anyone tell me what is wrong and how to correct this problem?

'word homePage()' was declared 'extern' and later 'static' [-fpermissive]

SteveRoy (author)lynchjg2015-11-09

can you copy and paste your sketch here?

lynchjg (author)SteveRoy2015-11-09

#include <EtherCard.h>

// ethernet interface mac address, must be unique on the LAN

static byte mymac[] = { 0x74,0x69,0x69,0x2D,0x30,0x31 };

static byte myip[] = { 192,168,1,203 };

byte Ethernet::buffer[500];

BufferFiller bfill;

void setup () {

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

Serial.println( "Failed to access Ethernet controller");



static word homePage() {

long t = millis() / 1000;

word h = t / 3600;

byte m = (t / 60) % 60;

byte s = t % 60;

bfill = ether.tcpOffset();


"HTTP/1.0 200 OK\r\n"

"Content-Type: text/html\r\n"

"Pragma: no-cache\r\n"


"<meta http-equiv='refresh' content='1'/>"

"<title>RBBB server</title>"


h/10, h%10, m/10, m%10, s/10, s%10);

return bfill.position();


void loop () {

word len = ether.packetReceive();

word pos = ether.packetLoop(len);

if (pos) // check if valid tcp data is received

ether.httpServerReply(homePage()); // send web page data


AlexanderK40 made it! (author)2015-10-15

I have some problems with the highlight of the display, but i directly linked it to ground and +5 and evrything work nice.

zizou.ahmed.3133 (author)2015-08-19


yorickdemunnik (author)2015-08-03

Thanks a lot!

nishant arora (author)2015-07-23

I am using same library and connection here temp. and humidity is displaying on LCD and the connection of Ethernet module is showing on LCD but temp and humidity not showing on web page and the Ethernet test is also not working Is there any change in setting of IP in computer

SteveRoy (author)nishant arora2015-07-23

Are you using a enc28j60 or a W5100 (WizNet) ethernet adapter?

If your network isn't on a 192.168.1.x subnet made sure to change the IP address in the sketch to match your subnet and make sure it's a free IP address

snoop911 (author)2015-05-25

Have the ethernet drivers for the wiznet w5100 or the enc28j60 been pulled into the main arduino core yet? I couldn't find it in the github repo but perhaps I'm not looking in the right place. (Kinda confusing with hardware 'sam' vs 'avr')

For example, is there hardware that works out of the (ide) box for this:

SteveRoy (author)snoop9112015-07-23

The W5100 is in the Arduino core and is the:

#include <Ethernet.h>

The ENC28J60 needs the library added to your library folder

AnthonyT6 (author)2015-05-23

How do we change the temperature to read Fahrenheit instead of Celcius?

SteveRoy (author)AnthonyT62015-05-23

To convert from C to F the equation is:

C x 9/5 +32 = F

or C x 1.8 +32 = F

so after the line:

int t = dht.readTemperature();

you could try something like..

t = (t * 9)/5 +32;


t = (t * 1.8) + 32;

you may need to change:

int t = dht.readTemperature(); to

float t = dht.readTemperature();

so it can read and display the temp in decimal places.

MortenR (author)2015-05-18

Volthaus Electronics Laboratory made it! (author)2015-05-06

This is the only tutorial I have found to be compatible with my setup. Now if I can only change the code to display the temperature on the web page in Fahrenheit as well. That's what I'm working on now. Thanks SteveRoy.

Hi, further down in an earlier comment is a note on converting the temperature reading to Fahrenheit. To display both you could create another variable for Fahrenheit, convert C to F and add the extra info in the homePage part of the sketch.

akajester made it! (author)2015-03-06

This saved me so much time! I was working on the individual parts, but having a hard time putting it all together, until I came across this! Thank you so much! The next step is to upload the data to thingspeak!

Why send your data to Thingspeak?

SteveRoy (author)akajester2015-04-12

Nice, I must try uploading to thingspeak too!

saputroyulianto made it! (author)2015-04-12

[want to ask]

hi i from Indonesia, i still success until step 6 :)
buat i have problem with the ethernet shiled, i use ethernet shield from DFRobot

the library is different with the ENC28J60, anyone can help me?

SteveRoy (author)saputroyulianto2015-04-12

Have a look at this project - it's not mine, but similar and uses a W5100 chip

mnajjar made it! (author)2015-03-06

Thank " "

until Step 6 :) amazing *_&
i dont try step 7

SteveRoy (author)mnajjar2015-04-12


Gran Abuelo (author)2015-01-03

How hard would it be to modify the code to upload the data to thingspeak or a similar service?

SteveRoy (author)Gran Abuelo2015-01-15

Foe me? hard. For a programmer, probably fairly easy.

Start here:

nitishdash2010 (author)2015-01-02

hi.... I connected the enc28j60 module to arduino and to pc ethernet card directly using a patch cable. but, the indicator lights on the module or ethernet cable are not glowing. although the red light on module is working . can you help me out???

SteveRoy (author)nitishdash20102015-01-15

You may need a cross over cable if you go directly from a PC to the enc module

psycho.maggot (author)2014-11-18

sorry to much asking, what if using lcd shield like in this site:

did it will make more simple?.. and how the wiring, its completly different cuz its shield. and yours was just lcd and trimpot.

SteveRoy (author)psycho.maggot2014-11-18

No, not with my sample code - It uses digital pin 10 which is used by the Ethernet module in my example. You would have to change the code and pins that the Ethernet uses. What's wrong with the way I have it in my build? If it's too many wires to solder then get an LCD with the i2c "backpack" and change the code.

psycho.maggot (author)SteveRoy2014-11-19

thanks man, yeah you right, too many wire to be soldered. thats why i ask. ok.

psycho.maggot (author)2014-11-17

aye bro. what if we don't using the trimpot, did need a change on the wiring diagram or not?

SteveRoy (author)psycho.maggot2014-11-17

no, you could use a resistor for the contrast or use pwm off an Arduino port, but you will need something for the contrast. More recently I have been using i2c/SPI "backpacks" for LCD displays - easier in some ways as they only need 4 wires to connect to the Arduino, come with back-light via an on-jumper and have the contrast trimpot built-in. The down side being there are multiple library's for them and finding the right one can be a chore. They tend to use analog ports off the Arduino as well, so it frees up digital ports for other things.

psycho.maggot (author)SteveRoy2014-11-18

thank you. its better and easier to changing the contrast with trimpot rather using another way that you've explain.

rbayonet made it! (author)2014-09-20

Thanks for this great instructables, it took me some time but worth it. I will want to add a barometric sensor in the future.

SteveRoy (author)rbayonet2014-11-17

Hi rbayonet, good to hear you got it working. If you add a barometric sensor let us know the steps - maybe do an instructable on it.

SebastianD2 (author)2014-10-05

Dear Instructables!! Excellent!!!. I made it!!! The steps are very explicit. I'll try to put together all in board Pro Mini. Consumption will support the usb port? external power supply?. Thank you very much. Sebasti√°n.