loading

Today, I am going to show you how to plot DHT11's reading temperature and humidity values to put graph produced on your website. If you have got wireless modem, I mean WiFi hotspot point anyway which allows you to connect internet wireless, I am using ESP8266 ESP-01 module to connect wireless internet, to program ESP, I am using Arduino UNO board, with DHT11 sensor.

Subtitle: How to plot temperature and humidity value in Internet of Things consept

Are you curious about your the temperature and humidity value in home? Let's make this instructable!

The need list:

1. Arduino UNO with usb cable (USB type B male pin to type A male pin cable)

2. DHT11 temperature and humidity sensor

3. Tiny breadboard

4. Tiny cables for breadboard

5. ESP8266 - ESP01 module

6. Your computer

Used Technologies:

1. Thingspeak.com to get datas from ESP8266

2. Your website's FTP option - File Transfer Protocol (Learn how to open a website today on my early instructable !)

3. Arduino IDE and its serial monitor

Step 1: Hardware Setup

Between Arduino UNO and DHT11 use tiny bread board as helper and use tiny breadboard cables to make connections as:

DHT VCC - 5V Arduino

DHT Data - Pin 2 of dijital side Arduino

DHT Pin3 - Leave blank & empty

DHT GND - GND Arduino

.

Between Arduino UNO and ESP8266, make connections as:

ESP8266 TX - Pin 10 of digital side Arduino

ESP8266 CH_PD - 3.3V Arduino

ESP8266 RST - 3.3V Arduino

ESP8266 VCC- 3.3V Arduino

ESP8266 GND - GND Arduino

ESP8266 GPIO 2 - Leave blank & empty

ESP8266 GPIO 0 - Leave blank & empty

ESP8266 RX - Pin 11 of digital side Arduino

Step 2: Software Setup

I attached modified Arduino IDE codes on here. You need to change three things in there:

const String wifiAdi = "CHANGE HERE WITH YOUR WIFI SSID";
const String wifiSifresi = "CHANGE HERE WITH YOUR WIFI PASSWORD";

istek = "POST /update HTTP/1.0\r\nConnection: close\r\nHost: api.thingspeak.com\r\nX-THINGSPEAKAPIKEY: XXXXCHANGEHEREXX\r\nContent-Type: application/x-www-form-urlencoded\r\nContent-Length: "+String(veriler.length())+ "\r\n\r\n";

.

This code is from the book written by Hasbi Sevinç. Very special thanks to him to write a good book. Get the book today from Dikeyeksen. There are a lot of projects in. On this instructable, I only modified with usage of DHT11 and Thingspeak.

Step 3: Test Your ESP8266 Module (optional)

Before you upload code to Arduino UNO, connect ESP8266 module as mentioned on Arduino IDE with step 2's connections. We need to test EP8266.

1. Make connections

2. Open Arduino IDE

3. Tools >> Port >> select Arduino UNO's COM port

4. Open serial terminal

5. Send these codes:

This code is for enable ESP8266 to connect to internet

AT+CWMODE=1

This code is for connecting ESP8266 with SSID and password

AT+CWJAP="SSID","PASSWORD"

This code is for PING to a website if we really do the true connection test

AT+CIPSTART="TCP","www.google.com",80

This code is PING's byte definition

AT+CIPSEND=48

This is final code for PING

GET / HTTP/1.1\r\nHost: google.com:\r\n\r\n

NOTE: Watch Serial Monitor's reponse on each code entering.

Step 4: Thingspeak Settings

Thingspeak is used for holding and plotting graphics from your datas. So, you can monitorize and get what the value is over-the-air - OTA.

1. Goto https://thingspeak.com/ and sign up with new account if you haven't got.

2. Channels >> My Channels >> New Channel >> fill Name and Description >> Field 1 is temperature, Field 2 is humidity >> Select Make Public >> Save Channel

3. Go to API Keys >> "Write API Keys" is your needed API key. copy it >> paste to your Arduino code on Arduino IDE.

4. Go to Public View >> There are two graphic you see >> On each graphics, on the top right side >> click on the first icon to get IFRAME on each graphic. >> Copy these both two IFRAME from two graphics and paste them to your website HTML pages' inside.

5. If you haven't got a website yet, you can use inhouse method to test this. On your desktop >> right click on your desktop >> create a new notepad >> write an HTML code basicly, check the picture is attached >> save and modify the file extention as index.html >> open this file with your default browser.

Step 5: To Sum Up

I test this instructable on my website. In early my instructables, I told you how to get data from DHT11's temperature to your website. We did this in Xively way. On here, we did Thingspeak way.

Thingspeak is user friendly, also Xively it is but Xively is a bit hard interface has.

Thingspeak also let you use IFRAME html tags. Xively let's you JSON file.

Now, If you are just visiting my instructable, visit my website to see what's going on on my home about temperature and humidity.

This is Internet of things consept because I am taking temperature and humidity value from my home to anywhere that I can follow :D

.

That's all !

Step 6: BONUS: Reading This Instructable

NOTE: This instructable's step is aimed for visually impaired people to hear the sentences to learn what's going on here. Watch the video, it explains all steps.

<p>Good instruction, but if you write code and comments in English would be better. If I try translate the comments was impossible, because on your language you have a special symbol that I haven't. For example google translate can not recognize this: &quot;modьlden gelen replylar ekrana yazdэrэlэyor&quot; </p><p>I want to change the code to add another DHT sensor, but can not recognize where and what make a change.</p>
<p>Now, I added the translated code comments. Thanks for your attention.</p>
&quot;Mod&uuml;lden gelen değerler ekrana yazdırılıyor&quot; means &quot;the values from the module is coming in order to put to the display's screen.&quot; I am doing my circuit assembly first in Turkish because my mother tongue is Turkish. Then I am translating these sentences into English to share anyone. I am really sorry for you to misunderstood something that I don't want on purpose. I apologise that I will review this instructable to translate fully into English whether I do mistakes or not by writing. Even on the codes. Sorry about that.<br><br>If you want to add different DHT values, you can modify the codes on Arduino side and demand graphic from thingspeak.
<p>Nice article. </p><p>I have interfaced Arduino Uno with ESP8266-01 and 16*2 LCD .I want to control LCD from webpage. I am new to server,web side.Now the webpage has two text box and submit button. When i type text on webpage and click on submit button ,text should appear on LCD. I am stuck in web part . How to communicate web part and Arduino. I tried HTML with GET method . But not working .Some suggested saying try Php. Can you please help.</p>
<p>Hello Keshavadk, I need to work on that. When I did, I will prepare an instructions. Till that, you need to search on Google. Thank you very much.</p>
ok.Thank you Sir.

About This Instructable

1,655views

23favorites

License:

Bio: I am looking for new job opportunities. Because I extremely need an engineering job to earn money to make master on electronics. Can you help ... More »
More by Bay Yolal:How to use Raspberry Pi 3 Model B+ V1.2 For The First Time! How to knit baby booties in only one hour! Ta-Da! How to extract walnut 
Add instructable to: