Temperature and Humidity Display and Data Collection With Arduino and Processing




Introduction: Temperature and Humidity Display and Data Collection With Arduino and Processing

About: New to all this!

Intro: This is a Project that uses an Arduino board, a Sensor (DHT11), a Windows computer and Processing (a free downloadable) program to display Temperature, Humidity data in digital and bar graph form, display time and date and run a count up timer during the program and the record all the data into a .csv format when the program is closed.


First I MUST say I am a total beginner and I have learned a great deal from this project. Thus I am trying to write this Instructable to be read and understood by a total beginner.

I had seen various Arduino projects to measure temperature and humidity but I wanted a program that:

1) Measured temperature and humidity

2) Displayed the data in both a graph (I chose bar graph) and digital form

3) Has a clock function

4) Has a count up “Run Time” timer

5) Saves this data into a .csv (excel) file format.

I had inspiration from programs created by Sowmith Mandadi, R-B and aaakash3, but none of these was exactly what I wanted. So I learned to write some basic code and made what I wanted.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: What You Will Need:

Parts and Materials:
*Computer – I used a Windows computer Windows 10 operating system

(I am sure Linux or Mac could be used, I just don't have either so I won't cover how to use these operating systems)

*Arduino Board – I used an Arduino Uno Board, but any Arduino board with USB will do

*USB Cable -USB A/B cable -same as old type "printer cable" (usually comes with Arduino Board)

*DHT 11 Temperature /Humidity sensor- inexpensive $4 to 8

(Note: there are 2 versions I used the 3 pin version, the 4 pin version will require use of a breadboard and a 10K resistor, the 3 pin has a printed circuit board that includes the 10K resistor) see Fritzing diagrams in next steps

*Connection wires

Dupont wires (double female ends) if connecting to 3 pin DHT11 without breadboard

Standard jumper M/F wires (one end male one end female) and M/M jumper wires (both ends male)
to connect 4 pin DHT11 - see step 2 for more information

*Arduino IDE – a program for writing Arduino programs (called sketches) free @


*Processing – a program to write processing sketches free @


* "DHTLib" file-a library file (this is a file that goes into the Arduino IDE program under the folder called “Library” this will need to be added to the Arduino sketch before the Arduino can read the data from the DHT11
-see step 5 for download file and instructions

Step 2: Connect Arduino to DHT11

First determine which DHT11 you have

I used the 3 pin as it already has the needed 10K resistor.

If you have the 4 pin you will need a 10K resistor and a breadboard

Connect DHT11 to Arduino Board. This program calls for the DHT 11 signal pin to be connected to Arduino pin #7, Pos (+) pin connected to 5V on Arduino and Neg (-) to GND on Arduino.

Refer to Diagrams and Fritzing Diagrams

Step 3: Download Arduino IDE

Download Arduino IDE and install on computer


Step 4: Connect Arduino to Computer

Install the Arduino IDE first it has drivers for Arduino USB connection.

Connect Arduino to computer via USB.

Wait for the computer to recognize the Arduino board and install any drivers.

Open the IDE program and check for serial connection.

If the Arduino board does not show up in the Tools>port (red circle), Close the IDE and reopen.

*Important* once the IDE is open and the Arduino board is connected via USB. The Arduino board must be connected to the correct serial port. On Windows computers this is referred to as COM Port. To do this in the IDE go to Tools>Port:>Serial ports. As seen in Diagram the serial port (red circle) must match the port listed at the bottom right corner of the IDE program (yellow circle).

Step 5: Load the Library

Load the library for the DHT11. This was confusing to me at first but is really quite simple.

Download the file called “DHTLib” and unzip. Copy the unzipped “DHTLib” file.

Reference on this library can be found at:


(It was written by Rob Tillaart based on work from others)

Find the Arduino folder on your computer and open it. (It will be wherever you downloaded the IDE and installed it on the computer)

See Diagram

Find the file called “libraries” and open it then paste the “DHTLib” folder into the “libraries” file. Close it and then restart the IDE.

See Diagram

Once the IDE has reopened you can check to see the DHT library was installed. Sketch> Include Library.

See Diagram

Note Clicking on DHTLib in the "include library" tab will place the library into the Arduino code as "#include dht.h".

You don’t need to do this because it is already in the code that you will download in the next step.

Step 6: Get the Arduino Code

Download the Temp_Hum_Instructable.zip file and unzip. Open the Temp_Hum_Instructable.ino with the Arduino IDE.

Alternately look at the following code and copy and paste or type exactly into the Arduino IDE:

#include <dht.h>
dht DHT;
#define DHT11PIN 7// sets pin 7 for DHT11 signal connection
void setup(){
   Serial.begin(9600); //opens serial
void loop()
  int chk =DHT.read11(DHT11PIN);//reads DHT11
Serial.print(DHT.temperature,0);//prints temp in serial 
Serial.print(",");//prints comma in serial 
Serial.print(DHT.humidity,0);//prints humidity in serial  
Serial.println();//carriage return
  delay(2000);//wait 2 seconds

When you are done it should look like the Diagram above

Step 7: Load Code on to Arduino

First Save the sketch in location and with a name you will remember, Example: Temp_Hum.

Next you need to load the sketch onto the Arduino board by pressing the Right pointing arrow button (upload).

See Diagram

This will take a few seconds; you will see a progress bar on the lower right.

Then you will see: Done uploading message in the lower left and white text in the bottom of the IDE telling you about memory

See Diagram

If you get an error code ( orange text in the bottom of the IDE) it is should be one of the following

  1. The "DHTlib" library was not copied correctly
  2. The COM port is not set correctly
  3. The sensor was not connected correctly
  4. The code was not loaded into the IDE correctly

    The orange text can be scrolled through and it will give a clue as to what is wrong.
    Go back and check it is probably a simple mistake.

Once this is done look closely at your Arduino board. Every couple of seconds the little LED next to the letters “TX” will blink. This is the Arduino sending information back to the computer. To check this click on the little magnifying glass symbol in the right upper corner of the IDE.

See Diagram

This will open the serial monitor and display temperature and humidity data separated by a comma. You will note that the temperature data is listed in Celsius. That is OK we will convert to Fahrenheit later (or not if you chose).

See Diagram

Next close the serial monitor and then close the IDE. (You did remember to save it , didn’t you?). Now look at the Arduino board again (don’t disconnect it from the USB that is where it is getting power, and sending data to the serial port on the computer). Is it still blinking? Yes, great. Once the program is loaded onto the Arduino it will run as long as it has power.

Note about code: if you look at the Arduino code beginning with “void loop ();”.
The next 5 lines of code tell the Arduino to read data from the DHT and print it to the serial bus separated by a comma. The next line “delay (2000);” tells the Arduino to wait 2 seconds (2000 milliseconds) so the data is received every 2 seconds. Then it goes back to “void loop ();" - a command that tells the Arduino to do it over again. Changing the value in the delay line will change how often the data is received. Example: change to (600000) will change it to 10 minutes (600000 milliseconds = 10 minutes). Receiving data every 2 seconds ends up being a lot of data, so now you know how to change how often the data is read. Just remember if you change the value later on you will need to upload the new program.

OK sit back and take a breath you are more than half way there. Yea!!

Step 8: Download and Install Processing


Pretty straight forward select the program that corresponds to your computer for windows 64bit vs. 32 bit. If you don't know, open the Control panel on your computer (icon view not category view) and go to system it will be listed there.

See Diagram

Download and then install the program.

The first time you open and run processing you will probably get a Java security message. Click "allow" for private networks. Java is the computer language used by Processing (and Arduino IDE). Interestingly I have never had the security message with Arduino IDE, just Processing.

Step 9: Processing Code

OK now for the Processing code.

This was the most challenging part for me, but also the most opportunity for learning. While the Arduino code was 20 or so lines this code has +/- 270 lines in the main code and another 70 + in the classes.

Now the first thing you should be asking is “What are classes ?”. Good question. This refers to object oriented programming. In short, there are a bunch of things going on in the main code: defining the size and color of the display, a clock, a timer, code to show cursor location, code to save data into a .csv file and a few lines that deal with code that displays the bar graphs. While the Arduino IDE had all the code on one page, this processing code has three tabs. The first is the main code and the next two are the code that displays the bar graphs. (This code is actually stored in three separate files within the Processing code folder.) The separate tabs are called “classes” and are defined in lines 48 and 56 and then displayed by lines 179-182 of the main code. The people who wrote Processing program call this object oriented programming. (see:https://processing.org/tutorials/objects/ for a short description).

Basically what the classes (Recta1, Recta2) in this code do is create rectangles that move up and down based on the data received from the DHT11 via serial. Think old fashioned thermometer the higher the mercury goes the hotter it is, but this is done with data not mercury. In actuality the classes create four rectangles, two static rectangles that represent the background of the thermometer and two dynamic rectangles that respond to data and move up and down. In addition to moving the rectangles, the code changes the color of the dynamic rectangle and the color of the digital display of Temp and Humidity based on the data being received by serial.

Step 10: Processing Code Files

Just a few basics on Processing code:

I highly recommend reading Make: Getting Started with
Processing by Casey Reas and Ben Fry the founders of Processing.


I will not try to explain all of the aspects of Processing or writing code for processing. As I said earlier I am a beginner and I think there are much better people to learn from. I do however understand the code I have written (trial and error are good teachers).

1.First one must include libraries (just like in Arduino) and declare variables (Lines 1-25)

2. Next set up the display board (Lines 27-63)

3.Run a repeated part of the code- what I mean is this part of the code will repeat as long as the program is running. You will remember In Arduino “void loop();” (Step 6). In Processing this is now “void draw();” (Lines 65-184)

4. Next is getting data from the serial port and assigning it to variables(int, float, String)




(Lines 185-245)

4.Lastly a way to close the program and save the data (Lines 246-271)

Ok: Download the file Temp_Hum_F_3_2 (for Fahrenheit)

Or Temp_Hum_C_3_1 (for Centigrade)

and unzip the file. Open with Processing.

Step 11: Font in Processing

Important: I call your attention to lines 36-37

36 font =loadFont("SourceCodePro-Bold-48.vlw");//loads font stored in data
37 textFont(font);

This font library "SourceCodePro-Bold-48.vlw" is included in the Processing files downloads and does not need to be changed to function.

However to change the font to something else you will need to load the new font into the Processing sketch AND replace "SourceCodePro-Bold-48.vlw" with the new font.

. Luckily Processing has made the first part very easy.

First open the a sketch then click:

Tools>Create font

this brings up a window

See diagram

Scroll down to the new font you want, Click on it and then click OK. The font has now been loaded into the sketch folder.

Next replace the "SourceCodePro-Bold-48.vlw" text with the exact name of the new font (including the .vlw file format)

If this is not done the new font will not load into the code and the code will give errors (Just like errors in Arduino- in the black box at the bottom of the program).

Step 12: Finishing Up

To start the Processing program click on the arrow, you may get a Java warning, Click: Allow access.

See Diagram

OK, did the program work? If so, you will get a display like the seen in the diagram.

(No? See troubleshooting in the next step)

Yes? Now try holding the DHT11 in your closed palm or place under the warm air stream of a hair dryer. The numbers should change. Yes? Great. that means everything is working well.

To close the program and save data click the box that says ”Click Here to Close and Save Data”.

Now to find the saved data, go to the Temp_Hum_F_3_1 or Temp_Hum_C_3_1 Processing folder (you should be able to find this on your own by now) open it and find the Data folder. Open this and you should see a .csv file named after the date and time you closed the program(Example 1-10-18--22-30-16.csv means Jan. 10 2018 10:30:16 PM ). Open this with Excel (or the Open office spread sheet equivalent). You should see something like the diagram. Columns for Date, Time, run time, temp and humidity with data. You can now graph the data with excel or whatever you want to do with it. (Note:if you look at the first data entry the Temp and Humidity data are not correct, this is normal and is just an error when the program first starts)

OK yea!!!!!!!

You did it.

If you have any questions please post and I will do my best to respond and help.

Thanks for staying with this and good luck. I hope this is just a beginning…..

Next for me Bluetooth and possibly Android….

Step 13: Troubleshooting

Arduino problems:

If you get an error code ( orange text in the bottom of the IDE) it is should be one of the following
The "DHTlib" library was not copied correctly

The COM port is not set correctly

The sensor was not connected correctly

The code was not loaded into the IDE correctly

If all Arduino seems to go OK remember to open the Serial Monitor and see if data is being displayed

If you see correct data this means the Arduino side is all working- Remember Close the Serial Monitor before starting the Processing, if the Serial Monitor is open Processing cant read the data.

Processing Problems:

These will be displayed in the bottom part of the Processing program.

If you get an error describing "font" go back to step 11 and load the font as described.

If you get an error that looks like:Error, disabling serialEvent() for COM4 null- just restart the Processing sketch by clicking the arrow as in step 12

If you get an error that states: Error opening serial port- try changing lines 32-34 to something like where "COM4" matches the COM port in your Arduino sketch

myPort = new
Serial(this, "COM4", 9600);//Port myPort.bufferUntil('\n')//wait until the serial has data
First Time Author Contest 2018

Participated in the
First Time Author Contest 2018

Arduino Contest 2017

Participated in the
Arduino Contest 2017

Be the First to Share


    • Backyard Contest

      Backyard Contest
    • Silly Hats Speed Challenge

      Silly Hats Speed Challenge
    • Finish It Already Speed Challenge

      Finish It Already Speed Challenge

    4 Discussions


    2 months ago

    I want clssification of dht11 sensor ....
    Can you please help me out in classification of Dht11


    Reply 2 months ago

    Can you help me as early as possible


    2 years ago

    A setup like that would be really helpful in managing the greenhouse :)


    Reply 2 years ago

    I developed this to monitor making Biltong.