Smart Home Automation

Brief: ​This tutorial will guide you in developing the smart home automation project using
ESP8266 (NodeMCU) from a basic level.

Features:
● It enables the user to monitor the indoor weather conditions like temperature and
humidity of a room by using the DHT-11 sensor.
● User can control the lights(LEDs) using the Web UI or mobile App
● Manages all your electronic home devices/appliances from one place.

Requirements:
Software:
1. Arduino IDE
2. IBM cloud Account
3. IBM IoT Platform
4. NodeRed
5. MIT App Inventor
Hardware:
1. Nodemcu ESP8266
2. DHT11 - To measure the Temperature and Humidity
3. LED’S - To Turn ON/OFF the light

Outcome:
● After the completion of this project, one will be capable of understanding the different
libraries used
○ DHT library
○ ESP8266WiFi library
○ Pubsub library
● Interfacing different type of hardware with the microcontroller
○ DHT-11 (Measures temperature and humidity)
○ LEDs
Activities:
1. Create a device in IBM Watson IoT platform
2. Create Node-red application
3. Install DHT, PubSub libraries
4. Develop the code snippet for sending the indoor weather parameters to the cloud and
receiving the commands for controlling
5. Develop the code snippet for connecting Node MCU to the WiFi
 6. Connecting the sensor and LEDs to the microcontroller
7. Create the Web UI to visualize the indoor weather parameters
8. Create a mobile application visualizing the sensor reading and buttons to control the
LED

1. Create a device in IBM Watson IoT platform

https://thesmartbridge.com/documents/pdf/IoT-Device-Creation.pdf
2. Create Node-red application
https://thesmartbridge.com/documents/pdf/Node-red-Creation.pdf​
3. Install the libraries
a. DHT library
https://github.com/adafruit/DHT-sensor-library
Download the library from above link and you can include zip file in Include library directly or
follow the below steps to include library

Step 1: Open Arduino IDE. Click on Sketch -> Include Library -> Manage Libraries
Step 2: A pop-up library manager window appears. Search for DHT library by typing “dht” in the
search bar

Step 3: Click on dht sensor library and click install to include dht library in your Arduino IDE.

b. Pubsub library for communicating with the cloud

https://github.com/knolleary/pubsubclient
Download the Library file from the above link and add zip file in include library from tools menu
in Arduino IDE
Step 1: Download the zip file

Step 2: Include zip folder into Arduino IDE. Click on Sketch -> Include Library -> Add .Zip library
 Step 3: Select the file or folder containing the library to add. Click on open to include the library
into Arduino IDE. Pubsub library has been successfully added.

4. Develop the code snippet for connecting Node MCU to the WiFi
Step 1: Copy your Organization ID, Device Type, Device ID, Authentication Type, Authentication
Token to clipboard from IBM Watson IBM IoT Platform while creating a device.
Step 2: Edit your WiFi credentials, ORG ID, Device Type, Device ID, Authentication type,
Authentication Token in the code.

Keep note of the underlined data for further reference as we need to update them.
Step 3: Compile the code and check for errors

Step 4: Upload the code to NodeMCU by selecting the NodeMCU 1.0 and port from tools menu

5. Connecting the sensor and LEDs to the microcontroller

o Connect VCC of basic shield to 3.3V of NodeMCU (Input Power Supply)
o Connect GND of Basic shield to GND of NodeMCU
o Connect LED (L1) of basic shield to digital pin(D0) of NodeMCU
o Connect LED (L2) of basic shield to digital pin(D1) of NodeMCU
o Connect VCC of DHT sensorto 3.3V of NodeMCU
 o Connect GND of DHT sensor to GND of NodeMCU
o Connect Data pin of DHT sensor to digital pin(D2) of NodeMCU

6. Create the Web UI to visualize the indoor weather parameters

TASK 1: Connecting device to cloud to see the data in the cards section
Step 1: Login to your IBM cloud account and click on services.
Step 2: In services section click on the IoT platform you have created

Step 3: In IoT platform service tab click on Launch to lauch the IoT platform service
Step 4: Click on the Device you have created

Step 5: You can see your information here

Step 6: Now connect your NodeMCU to your system, if your sensor data is uploading to cloud goto
your cloud plaform and check the recent events where data from NodeMCU is sent to IBM
Cloud platform
Step 7: To see your data in graphical represention in cloud, click on boards in the left menu

Step 8: Click on create new board which is on the top-right corner of the platform

Step 9: In create new board, give board name and click on next and sumit the board.
Step 10: You board has been created and open the board

Step 11: Here you can add multiply cards with your required design specifications such as line, bar
graph etc.
 Step
12: Select a card type, then a pop-up appears where you need to select your device. After
selecting your device click on Next.
Step 13: You need to connect a data set to view the incoming data on the graph. Here you need to
connect your data sets by selecting data, property, Name, type, min and max value. After
selecting click on NEXT to continue.
Step 14: You can select different sizes for you chart or graph here then click on Next and submit.
Step 15: Also create data set for humidity. Now you can see the graphs in the cards section.

TASK 2: Creating a Node-red UI to view data in graphical form

Step 1: In IBM cloud dashboard, click on Cloud Foundary apps

Step 2: A new window appears where we need to NODE-RED SELDZ app created before.

Step 3: Click on Visit App URL in Node RED SELDZ service dashboard.
Step 4: click on your Node-RED flow editor where you will be redirected to the Node-RED flow
editor
Step 5: To install IBM nodes in Node-red flow editor click on manage palette in the menu option
which is on the top-right of the screen.

Step 6: In install section search for ibmiot and install the ibm nodes to flow editor.
Step 7: Search for IBM nodes in the filter nodes section
Step 8: To Retrieve the data from the IBM IoT platform by using Node-RED IBM IoT Input node
and double click on the IBM IoT input node

Step 8: Select API Key from Authentication in properties.

Step 9: In API Key paste API Key, API Token and server name and update it
To generate API Key go to IBM IoT platform
In Apps Section -> Click onGenerate API Key
Click Next for Information. In Permissions select Standard Application as Role and click on
Generate API Key

Copy your API Key and Authentication token to note them in IBM input node.
** API token is generated only once copy it to your notepad.

Step 10: Also update your input type as event, Device type, Device ID, command and format in
the propertiees section and click on Done
Step 11: Click on Deploy option to check the connection status. If the status is disconnected
check for IBM IoT properties and try again.

Step 12: Place the debug node in the flow editor and click on deploy to see the temperature
and humidity value in the debug tab
Step 13: Drag and Place the function node in the flow editor to separate the temperature and
humidity value
Type msg.payload=msg.payload.d.temperature in one function and type
msg.payload=msg.payload.d.humidity in another function to separate the humidity and
temperature values from payload and click deploy
Humidity and temperature values appear seperately.
Step 14: Install the dashboard node from the manage pallet to create a UI to display
temperature and humidity values in the Dashboard
Select gauge function and these nodes to temperature and humidity functions
Step 15: Edit both temperature and humidity nodes and deploy it.
Step 16: After editing the two nodes, deploy it

Step 17: Display the temperature and humidity value in the Dashboard by copying and pasting
the URL of the NodeRed in the new tab
Creating an HTTP request for getting the temperature and humidity values.
Step 1: Display the temperature and humidity value in the webpage by dragging and placing the
HTTP Input and HTTP Response node in the NodeRed flow editor.
● Place the HTTP Input and HTTP Response node in the flow editor
● Edit the HTTP Input node - Select the GET method and create a URL name by typing /home
● Edit the Function node connected to IBM IoT input node - Edit the above function node
which is connected to the IBM IOT Input node by globally setting the temperature and
humidity values, the values that are set globally can be accessed by the other function node
● Place and edit the function node which is placed in between the HTTP nodes - Get the global
temperature and humidity values by editing the function nodes, which is basically the
response whenever you hit that URL.
Step 2: Place the HTTP Input Function and HTTP Response node in the flow editor and deploy it

Step 3: Edit the HTTP Input node - Select the GET method and create a URL name by typing
/data and deploy it.
Step 4: Edit the Function node connected to IBM IoT input node - Edit the above function node
which is connected to the IBM IoT Input node by globally setting the temperature and
humidity value and deploy it
Step 5: Edit the function node which is placed in between the HTTP Input and HTTP Response
node for getting the temperature and humidity values deploy it.
Step 6: Copy the URL in the NodeRed flow till .net and paste in the new tab by appending
“/data” along with the URL and press Enter. Both the temperature and humidity values will
be displayed on the webpage
CONTROLLING THE LIGHT APPLIANCES ON/OFF BY GIVING COMMAND TO THE DEVICE
Step 1: Drag and Place the IBM IoT Output Node in the flow editor
Step 2: Give the device credentials and API Key in the IBM IoT Output node and deploy it so that
the status of the IBM IoT Output Node will be in connected status
1. Select the API Key in the Authentication

2. Select the option in the Output Type as Device Command and fill the device credentials
3. Now select the pencil type icon which is near the API Key and fill the API Key and API
Token credentials and click Update
4. Connected status shows for IBM IoT out node
Step 3: Drag and place two Button nodes from the Dashboard node

Step 4: Configure the button node for LIGHT ON and LIGHT OFF
Double click on the Button for LIGHT ON and type the group name by clicking on the pencil icon
near the group tab
1. Type the group name as light on and click on the pencil icon which is near the tab
name and type the tab name as smart home and update it
2. Double click on the 2nd Button for LIGHT OFF and type the group name by clicking on
the pencil icon near the group tab
3. Deploy it

Step 5: Copy the NodeRed URL till .net and paste in the new tab by typing /ui along with the
NodeRed URL and press ENTER which will display the UI for controlling the Light ON/OFF
You can check the controls in IBM IoT Platform in Recent events and also by connecting the
Arduino to LED
 7. Create a mobile application visualizing the sensor reading and buttons to control the LED
Step 1: MIT App login
Type MIT App inventor in google search and press Enter, select the first link in the search engine

Step 2: Click on the first link you will be redirected to MIT App Inventor dashboard.

Step 3: MIT App inventor dashboard

Step 4: Click on Create Apps! It will redirect to the Gmail login page. Through Gmail account by
typing your Username and Password, you can log in to the MIT App flow editor
Step 5: Agree with terms and conditions
 Step 6: By agreeing with the terms and conditions you will be redirected to the Dashboard and
click on Start new project

Step 7: Type the project name and click ok….you will be redirected to the app-building flow editor
Step 8: Displaying the temperature and humidity value and controlling the Lights ON/OFF using the
Mobile app
1. Create a UI to display the Temperature and Humidity value in the Mobile
App
2. Drag and Place two horizontal Arrangement in the mobile UI from the layout
which is present in the palette
3. Change the height as 50 and width as fill parent in the properties
v
Step 9: Drag and place two Labels from User Interface which is present in the Palette and
change the properties of the label

● Tick the box to display the text inside the Label as Bold and Italic in the properties
● Change the font size as 30 and set the height as fill parent and width as Automatic in the
properties, change the Text of the label as Temperature, Text Alignment as Center and
TextColor as Blue in the properties for temperature and

● change the Text of the label as Humidity, Text Alignment as Center and TextColor as
Blue in the properties for humidity
Step 10: Drag and place two TextBox from User Interface which is present in the Palette and
change the properties of the TextBox
 ● Now change the properties of the textbox by changing the height as fill parent

Step 11: Drag and Place two buttons to turn ON/OFF the lights from the palette ● Drag two
Buttons from the User Interface which is present in the palette and place it on the UI ●
Change the properties of the LIGHT ON Button
● Change the properties of the LIGHT ON Button by modifying Fontsize as 25, Text as
LIGHT ON and TextColor as green from the properties

● Change the properties of the LIGHT OFF Button by modifying Fontsize as 25, Text as
LIGHT OFF and TextColor as RED from the properties
Step 12: After designing UI, go to Blocks which is present in the top right corner near the
Designer and design the blocks to retrieve the data from the IBM cloud platform.
Step 13: Get the Temperature and Humidity value from the url which is created with the help of
NodeRed

Step 14: To get the data from the webpage, go to a Designer part to drag and drop the WEB
component from the Connectivity which is present in the Palette ● As it is a non-visible
component it will not display on the UI instead, it will be displayed down to the screen
Step 15: To get the temperature and humidity values for every time intervals, and to get the
recent data, go to Designer to drag and drop the CLOCK from the Sensors which is present in
the Palette on to screen1
● As it is a non-visible component it will not display on the UI instead, it will be displayed
down to the screen
Step 16: Now go to Blocks which is present in the top right corner and design the blocks to
display the Temperature and Humidity values
Step 17: Click on the Clock1 which is present under the blocks, Drag (when Clock1.timer do)
block and place it on the editor to reload the webpage
Step 18: Click on the Web1 which is present under the blocks, Drag (Set web1.Url to) block and
place it on the editor to set the URL through which we are getting temperature and humidity
values.
Step 19: Click on the Text which is present under the Built-in blocks, Drag and place the (Text
String) block along with the (Set Web1.Url to) block and paste the URL which gives the
temperature and humidity values in the Text block
Step 20: Click on the Web1 which is present under the blocks, Drag (call Web1.Get) block and
place it on the editor so that the URL is called to retrieve the temperature and humidity values
which are uploaded to cloud.
Step 21: As Values in the webpage are in the JSON format we have to decode the JSON format
and display the temperature and humidity values in the TextBox of the mobile app UI
● Click on the Web1 present under blocks, Drag and Place (When Web1.GotText) block on
the edi
● Click on the (responseContent) block from the (When Web1.GotText) block and place it
aside to get the response from the url and display that value in the textbox
● As the response (temperature and humidity values) are in the JSON format we have to
decode the JSON data. Click on the Web1 which is present under the Blocks and select
(Call Web1.JsonTextDecode jsonText) and connect it with the (responsecontent) block
● Click on Lists which is present under Built-in and select (Lookup in pairs key) Pairs block
and connect it with the (Call Web1.JsonTextDecode jsonText) block. This block connection
will check for the temperature and humidity Key values. If the Key value is the same it will
 display the value of that particular ke

● drag one text block from the builtin blocks and connect it with the (Lookup in pairs key)
block. Enter the Key value in the Text block so that it will check for the key value in the
response.
● Now display the decoded JSON data in the text box. Click on TextBox1 which is present
under Screen1 and select (Set TextBox1.Text to) block and connect it with the (Lookup in
pairs key) block and connect the entire block with (When Web1.GotText do) block.
 ● Repeat the above procedures to display the humidity value in the textbox2,make sure that
you give the key value as humidity

Step 22: Open NodeRed flow editor to create an HTTP request to get command from the mobile
app to device
● Drag and Place HTTP Input node and HTTP Response in the flow editor and edit the
HTTP Input Node by typing “/command” for URL and click Done. So that when the
LIGHT ON/LIGHT OFF Button is pressed from the mobile device” /command” URL will
be hitted and the command is given to the cloud and the command, in turn, is given to
the device to turn on/off the light
● Drag and place the function node in the flow editor. Edit the function node and Deploy it.
● Now copy the URL of the NodeRed flow till .net and paste in the new tab and write
[/command?command=lighton] for light on and [/command?command=lightoff] for light off
to check whether URL is working properly or not

● Connect the function node to the IBM IoT Output node to give the command to the device
and connect the debug node Now whenever you are hitting the url by appending
lighton/lightoff command you need to check whether you are getting that command in the
debug node. If you are getting the commands in the debug node and if your function node is
connected to the ibm iot output node you will get the same data at your device also.
Step 23: Controlling the Lights ON/OFF through Mobile APP
Click on Button1 for Light on which is present under Screen1 and select (When Button1.
Click do) block and place it on the editor
Step 24: Click on the Web1 which is present under the blocks, Select (Set web1.Url to) block and
place it under the (When Button1.Click do) block
Step 25: Click on the Text which is present under the Build-in blocks, Drag and place the text
block along with the (Set Web1.Url to) block and paste the URL in the Text block to control the
light
Step 26: Click on the Web1 which is present under the blocks, Drag (call Web1.Get) block and
place it on the editor so that the URL is called. So now whenever the button is clicked the
lighton command will be sent to cloud and from cloud it will be sent to device
Step 27: Repeat the above procedure to TURN OFF the light by placing Button2
 Step 28: Download the MIT AI2 Companion from the play store in the Mobile APP

Step 29: Scan the QR Code from the MIT APP Inventor - Click on Connect which is present in the
top left corner and select AI Companion from the drop-down which will show a QR code.
Step 20: Now scan the QR code using Mobile app and it will display the temperature and
humidity value and we can also control light on/light off using mobile app