Iot Book Part1 en 2.0

Part 1:
The 35-euro IoT project
Oene Bakker © 2016-2017

Part 1: The 35 euro IoT project
1 Preface
1.1 Dutch release
As of the early 1980's, I am a programmer in automation. Started as a COBOL programmer, I think I
took a lot of the movements in ICT. And until 2013 it was a pretty static world for me. Of course, the
internet came up and connectivity became an increasingly important subject, also for me. How do we
connect the client computers to the servers? But for me, this meant, above all, the construction of
software. Hardware setup and configuration was done by others.
However, I was fascinated by electronics since my youth. When the first calculators came on the
market, I could not wait to buy one (it cost all of my pocket money). And I heard of transistors (in
radios), resistors, diodes and all kinds of other electronic components. But they were only theoretical
concepts for me. I really did not have any idea how these things work. Let alone I was able to build
my own electronic circuits.
Somewhere in the summer vacation of 2013, I first came into contact with the Arduino platform. A
new world opened for me. For the first time, I could make electronic circuits and program them
myself. How cool is that? The first project was, of course, the blinking of a led using an Arduino.
But yes, they were standalone boards. By default, there was no connection to a local network or
internet.
With the arrival of the ESP8266 boards it changed quickly. Although programming (flashing) with the
so-called LUA interface left over, it was a step forward. Certainly, when the so-called ESP-12E
Development Kit came out. A board that has almost as many possibilities as an Arduino but with
built-in Wi-Fi capabilities. And that for a very low price!
In this book, the ESP-12E Development Kit is used to measure temperature and humidity. This data is
then displayed with an AngularJS application in a browser. And in the last chapter, an example of an
Android App is shown.
The software used in the book is free to download. And the software and scripts are also made
available for free. The required hardware must be purchased. I estimate that the total hardware
costs will be around € 35, if ordered in China.
Lots of reading and DIY fun!
June 30, 2016

Oene Bakker
The Westereen
2
1.2 English release
For some time, I played with the idea to translate this book in to English. To make life easy I used
Google translate for the translations. So, there may be some bad English in the book.
Because I use a Dutch version of Windows and some installed software also uses the Dutch language
some terms may be in Dutch (especially in the images I use). Where applicable I translated them to
English. I think this should not be a problem for the reader.
Lots of reading and DIY fun!
July 31, 2017

Oene Bakker
The Westereen
3
Table of Contents
1 Preface ......................................................................................................................................... 2
1.1 Dutch release........................................................................................................................... 2
1.2 English release ......................................................................................................................... 3
2 The Concept................................................................................................................................. 9
2.1 Accountability ........................................................................................................................ 10
2.2 Prescience.............................................................................................................................. 11
2.3 Reading guide ........................................................................................................................ 11
2.4 Version management ............................................................................................................ 11
2.5 Abbreviations ........................................................................................................................ 12
3 Used techniques ........................................................................................................................ 13
3.1 Android .................................................................................................................................. 13
3.1.1 Development ................................................................................................................. 13
3.1.2 Applications ................................................................................................................... 13
3.1.3 Versions ......................................................................................................................... 14
3.2 AngularJS ............................................................................................................................... 15
3.2.1 SPA ................................................................................................................................. 15
3.2.2 Client and server............................................................................................................ 15
3.3 MQTT ..................................................................................................................................... 16
3.3.1 Introduction ................................................................................................................... 16
3.3.2 The operation of MQTT ................................................................................................. 17
3.3.2.1 Connection ................................................................................................................ 17
3.3.2.2 Authentication ........................................................................................................... 17
3.3.2.3 Communication ......................................................................................................... 17
3.3.2.4 QoS ............................................................................................................................ 18
3.3.2.5 Unacknowledged Service (QoS0) .............................................................................. 18
3.3.2.6 Acknowledged Service (QoS1) ................................................................................... 18
3.3.2.7 Assured Service (QoS2).............................................................................................. 19
3.3.2.8 Operations ................................................................................................................. 19
3.3.2.9 Publish ....................................................................................................................... 19
3.3.2.10 Subscribe ............................................................................................................... 19
3.3.2.11 Unsubscribe ........................................................................................................... 19
4
3.3.2.12 Ping ........................................................................................................................ 19
3.3.3 Topic strings................................................................................................................... 20
3.3.3.1 Single character wildcard .......................................................................................... 20
3.3.3.2 Multiple character wildcard ...................................................................................... 21
3.3.3.3 Exclusion character wildcard ..................................................................................... 21
3.3.4 MQTT messages overview ............................................................................................. 21
3.3.5 Termination ................................................................................................................... 22
3.3.6 MQTT implementations ................................................................................................ 22
3.4 NTP ........................................................................................................................................ 23
3.4.1 Technique ...................................................................................................................... 23
3.4.2 Pool servers ................................................................................................................... 23
3.5 The Cloud ............................................................................................................................... 24
3.5.1 Introduction ................................................................................................................... 24
3.5.2 MongoDB ....................................................................................................................... 24
4 Shoppinglist ............................................................................................................................... 25
4.1 Introduction ........................................................................................................................... 25
4.2 Hardware ............................................................................................................................... 25
4.2.1 What does it cost? ......................................................................................................... 25
4.2.2 ESP-12E Development Kit .............................................................................................. 26
4.2.3 DHT22 Sensor ................................................................................................................ 27
4.2.4 DS1307 RTC ................................................................................................................... 27
4.2.5 Level Shifter ................................................................................................................... 28
4.2.6 Arduino power adapter ................................................................................................. 29
4.2.7 USB micro kabel............................................................................................................. 29
4.2.8 Breadboard and other parts .......................................................................................... 30
4.2.9 Buying in China .............................................................................................................. 31
4.3 Software ................................................................................................................................ 32
4.3.1 Introduction ................................................................................................................... 32
4.3.2 Arduino IDE.................................................................................................................... 33
4.3.2.1 Installation ................................................................................................................. 33
4.3.2.2 Arduino Libraries ....................................................................................................... 38
4.3.2.3 Blink ........................................................................................................................... 39
4.3.3 NodeJS ........................................................................................................................... 45
5
4.3.3.1 NodeJS installation .................................................................................................... 45
4.3.3.2 Install packages ......................................................................................................... 50
4.3.3.3 Create server script ................................................................................................... 53
4.3.3.4 Start the server .......................................................................................................... 54
4.3.4 AngularJS ....................................................................................................................... 54
4.3.4.1 AngularJS installation ................................................................................................ 54
4.3.4.2 HTML5 Canvas Gauge 1 ............................................................................................. 56
4.3.4.3 HTML5 Canvas Gauge 2 ............................................................................................. 56
4.3.4.4 A simple example. ..................................................................................................... 58
4.3.5 Chart.js........................................................................................................................... 60
4.3.5.1 Download .................................................................................................................. 60
4.3.5.2 Test ............................................................................................................................ 61
4.3.6 Mosquitto ...................................................................................................................... 63
4.3.6.1 Introduction ............................................................................................................... 63
4.3.6.2 Installation ................................................................................................................. 63
4.3.6.3 Broker ........................................................................................................................ 77
4.3.6.4 Subscriber .................................................................................................................. 78
4.3.6.5 Publisher .................................................................................................................... 78
4.3.7 Eclipse Java .................................................................................................................... 79
4.3.7.1 Introduction ............................................................................................................... 79
4.3.7.2 Installation ................................................................................................................. 79
4.3.7.3 Java Hello World ........................................................................................................ 83
4.3.8 PAHO Java cliënt ............................................................................................................ 87
4.3.8.1 Introduction ............................................................................................................... 87
4.3.8.2 Installation ................................................................................................................. 87
4.3.8.3 Java MQTT cliënt ....................................................................................................... 88
4.3.8.4 Test client. ................................................................................................................. 94
4.3.9 Android Studio 2.x ......................................................................................................... 96
4.3.9.1 Introduction ............................................................................................................... 96
4.3.9.2 Java JDK 1.8 ............................................................................................................... 96
4.3.9.3 Android Studio ......................................................................................................... 102
4.3.9.4 Android Hello World App ........................................................................................ 108
4.3.10 MongoDB installation .................................................................................................. 121
6
4.3.10.1 Drivers.................................................................................................................. 121
4.3.10.2 Installation ........................................................................................................... 121
4.3.10.3 MongoDB ............................................................................................................. 121
4.3.10.4 MongoDB NodeJS driver...................................................................................... 125
4.3.10.5 Start MongoDB .................................................................................................... 125
4.3.10.6 Import JSON ......................................................................................................... 127
4.3.10.7 NodeJS script ....................................................................................................... 128
4.3.11 Virtual Router .............................................................................................................. 131
4.3.11.1 No Wi-Fi? ............................................................................................................. 131
4.3.11.2 Installation ........................................................................................................... 131
4.3.11.3 Start Virtual Router.............................................................................................. 136
5 Build ......................................................................................................................................... 138
5.1 Hardware ............................................................................................................................. 138
5.1.1 Breadboard and power supply .................................................................................... 138
5.1.2 ESP-12E Development Kit ............................................................................................ 139
5.1.3 DHT22 .......................................................................................................................... 140
5.1.4 DS1307 RTC ................................................................................................................. 141
5.1.5 Hardware schema........................................................................................................ 142
5.2 Software .............................................................................................................................. 144
5.2.1 NodeJS, Mosca en MongoDB ...................................................................................... 144
5.2.1.1 Introduction ............................................................................................................. 144
5.2.1.2 JavaScript source ..................................................................................................... 144
5.2.2 AngularJS dashboard ................................................................................................... 147
5.2.2.1 Introduction ............................................................................................................. 147
5.2.2.2 AngularJS HTML en JavaScript sources.................................................................... 147
5.2.3 ESP-12E MQTT programma ......................................................................................... 151
5.2.3.1 Introduction ............................................................................................................. 151
5.2.3.2 Source ...................................................................................................................... 151
5.2.3.3 Upload code............................................................................................................. 161
6 Testing ..................................................................................................................................... 164
6.1 ESP-12E en WiFi ................................................................................................................... 164
6.1.1 WiFi at home ............................................................................................................... 164
6.1.2 Mobile Hotspot............................................................................................................ 164
7
6.1.3 Virtual Router .............................................................................................................. 165
6.2 ESP-12E, NodeJS en Mosca.................................................................................................. 165
6.2.1 NodeJS Express server and Mosca broker ................................................................... 165
6.2.2 ESP-12E ........................................................................................................................ 166
6.2.3 Chrome browser .......................................................................................................... 167
7 Android .................................................................................................................................... 168
7.1 Develop a App ..................................................................................................................... 168
7.1.1 AndroidManifest.xml ................................................................................................... 169
7.1.2 activity_main.xml ........................................................................................................ 170
7.1.3 config.properties ......................................................................................................... 170
7.1.4 Android Java code ....................................................................................................... 171
7.1.4.1 Introduction ............................................................................................................. 171
7.1.4.2 PropertiesReader.java ............................................................................................. 171
7.1.4.3 MainActivity.java ..................................................................................................... 173
7.2 App testing .......................................................................................................................... 177
7.2.1 Preperation .................................................................................................................. 177
7.2.2 Android App................................................................................................................. 178
7.2.3 Testing a real Smartphone .......................................................................................... 181
7.2.3.1 Samsung USB-driver ................................................................................................ 181
7.2.3.2 Developer options on your smartphone ................................................................. 184
7.2.3.3 MQTest App test...................................................................................................... 185
8 The Cloud ................................................................................................................................. 188
8.1 Introduction ......................................................................................................................... 188
8.2 Graphs ................................................................................................................................. 188
8.2.1 NodeJS Express server ................................................................................................. 188
8.2.2 Index.html.................................................................................................................... 191
8.2.3 Test .............................................................................................................................. 194
9 Index ........................................................................................................................................ 196
8
2 The Concept
The idea of showing the temperature and humidity in a DIY project is not new. There are
numerous examples on the internet using an Arduino or Raspberry PI to accomplish this.
By the end of 2015, I came into contact with ESP8266. A small stand-
alone Wi-Fi module for a few euros (ESP-01). Programming via the so-
called LUA loader was a difficult for me. Sometimes it worked, but very
often not. The integration with the Arduino IDE was therefore an
outcome for me. With the arrival of the ESP-12E Development Kit, USB
programming was also possible. Although not new, I also came up with
the idea of combining it with the world of IOT.
The concept:
Connect a DHT22 temperature and humidity sensor and a DS1307 RTC clock to an ESP-12E
Development Kit. The ESP-12E publishes the data via MQTT * to an MQTT broker. An AngularJS
application and an Android App subscribe to this data. The AngularJS application shows the data
in a temperature and humidity gauge. The Android App shows the published data on the
smartphone screen. The data is stored in a MongoDB database and this data is used later to show
temperature and humidity graphs.
*) MQTT Is discussed extensively in this book.
Schema:
9
For this solution, I use the following operating systems:
• ESP8266 NodeMCU v1
o ESP-12E Development Kit
• Windows 10 *)
o Pc, laptop of tablet
• Android 5.0.1
o Smartphone (in this case an oldie Samsung Galaxy S4).
The key goals I have set for this project are:

• It must be cheap, I have set a maximum of 50 euros for myself.
• It must be accessible (the hardware and software must be (freely) available).
• It must be understood by all.
• It needs to teach me something about IOT.
*) In principle, it is also possible to use Windows 7, 8, or 8.1. Certain images shown may than differ.
2.1 Accountability
The texts quoted and recorded in this book are as far as I know as a writer from the so-called free
domain (free pics, public text). If this is not the case, I would like to express my apologies.
This book has been compiled with the utmost care and the solutions shown have been extensively
tested. However, if errors occur this has been done without any intention. Despite all the care
taken in the composition of this book, the author cannot be held liable for any damage resulting
from any error in this publication.
The book shows a hardware solution with estimated costs of approximately € 35, -. This price was
at the time of writing and is subject to exchange rate fluctuations of, among other things, the
dollar rate. The author cannot be held liable for this and for the availability of the hardware used.
The assumption is that the reader is in possession of a PC, laptop or tablet with preferably
Windows 10. In addition, the ownership of an Android smartphone with Android version 5.0.1 or
above is recommended but not required (the solution also works with an emulator).
Working with the required hardware and power adapters can be a risk. The solution shown works
with low voltages (max. 5 volt) which, of course, limits the risks. Incorrectly connecting may
damage your hardware irreparably! The author cannot be held liable for any damage resulting
from this. It's all at your own risk.
The contents of this book may not be commercially used. The reader is free to use the contents of
this book for private and hobby purposes. This also applies to use this book and its content in
education. The sources associated with this book may be copied, used and / or modified without
any limitation.
10
2.2 Prescience
Knowledge of programming is a pre, but with some perseverance it must be possible for every
hobbyist to realize the solutions shown. Also, no knowledge of soldering is needed because we a
so-called breadboard solution. The layout of this book is low-threshold and works step by step to
the final effect.
And as often, Google is our best friend (or any other search engine, by the way).
For questions about the contents of this book, the following email address is available:
Info@diyiot.nl
The author will do his best to answer all the questions.
2.3 Reading guide

This book is divided into an introductory part (chapters 1 and 2), a theoretical part (chapter 3) and
a practical part (chapter 4 and beyond).
The sources can be downloaded from www.diyiot.nl/download
Extract the downloaded zip file. The book refers to the sources by:
See: Sources  …  …
2.4 Version management

Version Date Remark
1.0 30-06-2016 New (Dutch version)
1.1 05-07-2017 Reader remarks applied
2.0 31-07-2017 Book translated to the English version
11
2.5 Abbreviations
Abbreviation Meaning
API Application Programming Interface
BSON Binary JSON
DHT Digital Humidity Temperature (sensor)
DIY Do It Yourself
ESP ESPressif (Chinese factory)
EU European Union
HTML HyperText Markup Language
HTTP HyperText Transfer Protocol
IDE Integrated Development Environment
IoT Internet of Things
JDK Java Development Kit
JS Java Script
JSON Java Script Object Notation
LIFO Last In – First Out
LUA Loe-ah = moon in Portuguese, so it’s no abbreviation
MQTT Message Queue Telemetry Transport
M2M Machine to Machine
NTP Network Time Protocol
ODM Object Data Modelling
OHA Open Handset Alliance
QoS Quality of Service
RDBMS Relational Database-Management System
RTC Real Time Clock
SDK Software Development Kit
SPA Single Page Application
SSL/TLS Secure Sockets Layer/ Transport Layer Security
TCP/IP Transmission Control Protocol/ Internet Protocol
USB Universal Serial Bus
12
3 Used techniques
3.1 Android
Android is an open source platform and operating system for mobile phones,
tablet PCs, cameras and more and is based on the Linux kernel and Java
programming platform. Android is the most sold operating system on mobile
phones. In total, more than 1.6 billion Android devices have been activated
(February 2017).
3.1.1 Development
Android was developed by Android Inc., a company that was acquired by Google in 2005. Later,
the company was hosted by Google in the Open Handset Alliance (OHA). The original idea behind
Android was to develop a camera operating system with built-in Cloud capability. Android is now
primarily used for smartphones and tablets. The release of the Android platform on November 5,
2007 also announced the creation of the OHA. This collaboration consists of 34 hardware,
software and telecommunications companies that aim to promote open standards for mobile
devices. The open source platform is available under the Apache license. The first mobile phone
manufacturers based on Android were Motorola, HTC, Samsung, LG, Sony Ericsson, and Acer.
Android was known as gPhone until its launch (October 2008).
3.1.2 Applications
To present Android as a platform, apps has to be developed. To support that process, a Software
Development Kit (SDK) has been released. This also makes it possible for others than Google to
contribute. Apps can be distributed through the Google Play Store (formerly known as the
Android Market). The Play Store allows end users to download or purchase games, applications,
movies and books. The possibilities vary by country. On June 26, 2013, Belgium gained access to
Google Play Books. The Netherlands followed on July 18th in the same year. Developers can use
the Play Store to distribute their software. Through the Play Store, both free and paid applications
can be distributed.
13
3.1.3 Versions
A number of Android version have been released. These are known to most people with the
names given by Google to its releases. The names are sweets and are arranged alphabetically.
Codename Version Date API

Nougat Android 7.1.2 4 April 2017 25
Android 7.1.1 5 December 2016 25
Android 7.1 4 October 2016 25
Android 7.0 22 august 2016 24
Marshmallow Android 6.0 5 October 2015 23
Android 5.1 9 March 2015 22
Lollipop
25 June 2014 20
KitKat Android 4.4
31 October 2013 19
Android 4.3 24 July 2013 18
Jelly Bean Android 4.2 13 November 2012 17
Android 4.0.3 16 December 2011 15
Ice Cream Sandwich
Honeycomb Android 3.1 10 may 2011 12
Android 3.0 22 February 2011 11
Android 2.3.3 9 February 2011 10
Gingerbread
Android 2.3 6 December 2010 9
Froyo Android 2.2 20 may 2010 8
Android 2.1 12 January 2010 7
Eclair Android 2.0.1 3 December 2009 6
Donut Android 1.6 15 September 2009 4
Cupcake Android 1.5 30 April 2009 3
Battenberg Android 1.1 9 February 2009 2
Angel Cake Android 1.0 23 September 2008 1
Source: wikipedia
14
3.2 AngularJS
AngularJS is a JavaScript framework that is fully developed to meet the

demands of large and complex web applications. AngularJS is an open source
initiative in close collaboration with Google.
3.2.1 SPA
AngularJS is primarily intended for building so-called Single Page Applications (SPA). However, in
AngularJS, you do not develop one big application that connects everything with everything.
Instead, you make smaller, specialized modules. These can be developed and tested
independently of each other. In places where they are needed in the application, they are
dynamically inserted through the principle of Dependency Injection.
For example, an application is divided into modules for:
• Showing data in an HTML page,
• Retrieving data from the server,
• For routing,
• Constants and
• For login and logout.
3.2.2 Client and server
An important characteristic of an AngularJS applications is that the application basically runs

completely in the browser. AngularJS is a client-sided framework. AngularJS applications are
basically completely independent of a server. The server is only used to retrieve and update data.
Source:
Freely translated from: http://www.kassenaar.com/blog/post/2014/04/14/Wat-is-AngularJS-Een-introductie.aspx
15
3.3 MQTT
3.3.1 Introduction
MQTT (Message Queuing Telemetry Transport) is a lightweight messaging protocol designed a

specifically for networked client computers with limited capabilities. It is specially designed for
distributing telemetric information (e.g. temperature, humidity, speed, engine speed, etc.). It is
based on the so-called publish / subscribe communication pattern and is a specifically intended
for M2M (machine-to-machine) communication. It has also played a very important role in the
Internet of Things (IoT) technology.
MQTT allows devices to send information about a particular subject (topic) to a so-called MQTT
message broker. This broker sends this information to all client devices that have a subscription
on this information. It is possible to subscribe to a number of topics with a so-called wildcard.
A few basic concepts:

• A broker is a server that manages the messaging between the various clients. The broker
receives messages from the publisher and sends them to one or more subscribers.
• A publisher is a client who sends a telemetric message to the broker.
• A subscriber is a client who receives a message with telemetric data from the broker.
This is a bit comparable to a publisher who sends magazines to the subscribers via the mail
(broker).
In the example below, the temperature is measured by a sensor (publisher) at home which via a
broker is sent to a laptop, tablet and mobile (subscribers).
MQTT is also a good choice when it comes to unreliable networks with low bandwidth and
variable waiting times. As soon as a network towards subscribers is temporarily unavailable,
messages are stored in a buffer and are still sent as soon as the subscriber is online again.
Otherwise, if the network towards the publisher is unavailable, subscribers can be notified
through a notification.
16
MQTT is no new technology, it was developed in 1999 by Dr. Andy Standford-Clark of IBM and
Arlen Nipper of Arcom (now Eurotech). Initially, it was intended to monitor the oil and gas
industry. Although MQTT is still associated with IBM, the open protocol has now been managed
by the Organization for the Advancement of Structured Information Standards (OASIS). MQTT is a
product that is used by Facebook, Amazon and many other IoT projects.
3.3.2 The operation of MQTT
MQTT works with sessions that exist of 4 stages:

1. Connection (connection)
2. Authentication (authentication)
3. Communication (communication)
a. QoS
b. Operations
c. Topic strings
d. Overview MQTT messages
4. Termination
3.3.2.1 Connection
Client computers connect with the broker using a TCP/IP connection. This requires a default or
custom configured port. These default ports are:
• 1883 for unencrypted communication and
• 8883 for encrypted (SSL / TLS) communication.
If possible, connections are reused by the server.
3.3.2.2 Authentication
Authentication is not always required. There are brokers who also allow anonymous access. In
case of non-encrypted communication, username and password will be readable. For encrypted
communication, an SSL / TLS handshake takes place with the broker using certificates.
3.3.2.3 Communication
MQTT is a lightweight protocol because the used messages are basically small. A message
generally consists of:
• A so-called fixed header of 2 bytes
• An optional header,
• A message payload of up to 256MB and
• A so-called Quality of Service (QoS).
17
3.3.2.4 QoS
There are three different levels of Quality of Services (QoS). The QoS determines how messages
are handled by the MQTT protocol. Higher QoS levels offer higher reliability, but at the expense of
bandwidth and longer waiting times.
QoS levels:
• Unacknowledged Service (QoS0).
• Acknowledged Service (QoS1).
• Assured Service (QoS2).
3.3.2.5 Unacknowledged Service (QoS0)
This QoS makes use of the so-called PUBLISH packet sequence. The publisher sends the message
once to the broker. The broker sends this message once to all subscribers. Whether the message
actually arrives is not sure. Nor did the broker saves the message. If the network is not available
to a subscriber, the message will not be sent again once the network is available again. Synonyms
for this level are:
• At Most Once
• Fire and Forget
• QoS0
3.3.2.6 Acknowledged Service (QoS1)
This QoS makes use of the so-called PUBLISH / PUBACK packet sequence between publisher and
broker and also between broker and subscribers. The sending and receiving of messages is always
verified. Messages are stored on the broker. There is a so-called retry mechanism if a subscriber
does not receive acknowledgment on time. This may result in a subscriber getting multiple copies
of the same message. Synonyms for this level are:
• At Least Once
• QoS1
18
3.3.2.7 Assured Service (QoS2)
At this QoS level, a message is sent in two packages. The first package is called a PUBLISH /
PUBREC and the second package is a PUBREL / PUBCOMP. This variation ensures that a message
always arrives once. Messages are also stored on the broker. It does not matter how many
repetitions are taking place, the message comes to the subscribers exactly once. Synonyms for
this level are:
• Exactly Once
• QoS2
3.3.2.8 Operations
During the communication phase, a client can perform the following operations:
• Publish.
• Subscribe.
• Unsubscribe.
• Ping.
•
3.3.2.9 Publish
A publisher sends messages to the broker about a particular topic specific to the publisher. This is
called a topic. The publisher sends a block of binary data (content) to this topic. MQTT supports
sending so-called Binary Large Objects (BLOB) with a maximum size of 256MB. The format of the
content is application specific.
3.3.2.10 Subscribe
Subscribing to a topic by a subscriber happens by the so-called:

SUBSCRIBE/SUBACK packet pair.
3.3.2.11 Unsubscribe
Terminating a subscription to a topic by a subscriber happens by the so-called:

UNSUBSCRIBE/UNSUBACK packet pair.
3.3.2.12 Ping
The so-called PINGREQ / PINGRESP packet sequence is used to send a so-called ping to the broker
server. It is used to keep the connection between broker, publishers and subscribers "alive". It’s
also used to prevent a TCP connection from being closed by a gateway or router.
19
3.3.3 Topic strings
Subscription to a topic is recorded in a so-called topic string. In general, the representation of a

tree structure that contains multiple topics (topic tree). Preview of a topic:
Europe
|
+-----------------+-----------------+---------------------+
| | |
The Netherlands Germany . . .
| |
+---------+---------+-------------+ . . .
| | |
Friesland Groningen . . .
| |
+-----------+ . . .
| |
Drachten Leeuwarden
A topic string uses the special separating character /.

Valid topic strings from the above example are:
/Europe
/Europe/TheNetherlands
/Europe/TheNetherlands/Friesland
/Europe/TheNetherlands/Friesland/Drachten
A customer can subscribe to all branches in the tree (/Europe) or part of the tree
(/Europe/ TheNetherlands/Friesland).
There are also three wildcard characters to use:

• Single wildcard: +
• Multiple wildcard: #
• Exclusion character: $
3.3.3.1 Single character wildcard
The + can be used as single character wildcard.
Example topic strings:

Boom
Room
+oom subscribes a client to both of the above topics.
20
3.3.3.2 Multiple character wildcard
The # can be used as multiple character wildcard.

Statement
Refreshment
Dummy
#ment subscribes a client on the topics Statement and Refreshment.

# subscribes a client to all 3 topics.
3.3.3.3 Exclusion character wildcard
The special character $ serves to exclude certain topics from the client. It is used for transport
server specific messages or for system notifications.

$Error
A client cannot subscribe to this topic.
3.3.4 MQTT messages overview
21
3.3.5 Termination
When a publisher or subscriber wants to terminate the MQTT session, it sends a DISCONNECT
message to the broker and then closes the connection. We speak of a graceful shutdown if it
allows a client to easily restore the connection again. If the connection with a publisher is lost
without a DISCONNECT message sent, then the broker may send a message to the subscribers.
This message then contains instructions on the actions that a subscriber must perform if the
connection with one publisher suddenly drops. This message is called a last will and testament.
Source
Freely translated from: http://internetofthingsagenda.techtarget.com/definition/MQTT-MQ-Telemetry-Transport
3.3.6 MQTT implementations
This book uses the following MQTT implementations:

• Mosca as MQTT broker.
Mosca is used in conjunction with NodeJS to run an AngularJS application. But is also the
broker for Android app.
• Mosquitto as MQTT broker and client.
Mosquitto is used to demonstrate the function of MQTT. In addition, a publisher is used
to test the operation of the AngularJS application (apart from the hardware
implementation with the ESP-12E).
• Paho as MQTT Java client.
In the Android app to be developed, Paho is used as an MQTT client. Paho is available for
multiple platforms. In addition to Java also C / C ++, Python, Java Script, C # and Arduino
are supported.
22
3.4 NTP
The Network Time Protocol (NTP) is a protocol that allows computers to

connect to each other to synchronize their internal clock with other
computers.
3.4.1 Technique
NTP is based on the assumption that the network delay is predictable. The computer network is
classified hierarchically, with the computer being referred to as "stratum 1" with the most
accurate time source. The computer systems that collect the time through NTP are by definition
"stratum 2".
The protocol has some intelligent features. For example, an NTP client can use multiple NTP
resources, with the NTP client searching for the source which works best. Small differences in
time between source and client are updated by the client. As a result, the difference can be
eliminated without delay in time. However, the client keeps track of all NTP resources and
chooses another source for synchronization if it provides a more stable time.
For example, as a time source, an atomic clock can be used, or a DCF77 or GPS receiver.
3.4.2 Pool servers
Almost every country has his own NTP-servers.

The Netherlands for example we can use a pool of NTP servers under the name
nl.pool.ntp.org.
This pool contains 4 servers:

• 0.nl.pool.ntp.org
See: http://www.pool.ntp.org to find a matching NTP pool server for your country.
NTP servers can be very busy and therefore it may take a while before a real update arrives. This
will be taken into account in the projects.
Source
Freely translated from: https://nl.wikipedia.org/wiki/Network_Time_Protocol
23
3.5 The Cloud

3.5.1 Introduction
Cloud computing is a general term for the delivery of hosted services over the
internet. Cloud computing enables users to consume a compute resource, such
as a virtual machine (VMs), storage or an application, as a utility -- just like
electricity -- rather than having to build and maintain computing infrastructures
in house.
The cloud represents a network that connects computers to a kind of cloud of computers. The
end user doesn’t know how much computers there are running or where those computers are
exactly located. In this way, the user does not need to be the owner of the hardware and
software. The user is therefore not responsible for the maintenance. The Cloud is thus a
technique that provides scalable online services. Without the ability to scale, an offered online
service does not belong to Cloud computing.
In this book, there will be no cloud computing. However, the data is stored in a database that is
accessible through the network. This is a kind of cloud simulation.
Source: Wikipedia
3.5.2 MongoDB
MongoDB is an open source document-oriented database. It belongs to

the so-called NoSQL databases. For example, MongoDB does not have
fixed database schedules. MongoDB is extremely flexible.
The database can easily be distributed and data is then distributed over multiple computers to
allow distributed data processing. MongoDB is not a relational database management system
(RDBMS) and there is no support for joins. Also, support for transactions is limited.
Documents are stored in the so-called BSON (Binary JSON) format. It is extremely suitable for
extremely large databases. MongoDB is therefore derived from the American word humongous
which means extremely big.
In this book, MongoDB is used to simulate data storage in the Cloud.
Source: Wikipedia
24
4 Shoppinglist
4.1 Introduction
The project consists of both a number of hardware and software components. The components
are generally well available. By ordering this in China, the project is not too expensive. As I
calculated it, the total project would cost about € 35.00 on hardware (July 2017). The total costs
are partly dependent on the course of the dollar.
4.2 Hardware
4.2.1 What does it cost?
The total hardware costs are around 35 euros if the hardware is ordered in China.
Hardware Costs
ESP-12E Development Kit € 6,00
DHT22 € 4,00
DS1307 RTC € 2,00
Level Shifter € 1,00
Breadboard € 4,00
Breadboard powersupply € 3,00
Jumper Cables € 3,00
Resistors € 5,00
Power Adapter 9 Volt € 4,00
USB-micro cable € 3,00
Total € 35,00
If ordered in Europe the totals costs will be around 50 euros.
25
4.2.2 ESP-12E Development Kit
The ESP-12E includes a low-cost ESP8266 Wi-Fi Chip and has multiple digital pins and a single
analog pin.
Note: Use the NodeMCU version v1.0 or later.
Pin lay-out ESP-12E Development Kit:
26
4.2.3 DHT22 Sensor
The DHT22 is a digital temperature and humidity sensor.

The temperature range is between -40 and 80 ° C with an accuracy
of - / + 0.5 ° C. The humidity range is between 0 and 100% with a
precision of - / + 2%.
Alternatively, the slightly less accurate and

cheaper DHT11 can be used.
4.2.4 DS1307 RTC
A DS1307 RTC (Real Time Clock) is used as a clock in the project. There are several versions. In this
project, the RTC in the image is used. For use, a level shifter is required because this RTC operates
at 5 volts.
Alternatively, the equally expensive DS3231 can be used. The advantage is

that no level shifter is required because it already operates at 3.3 Volt.
27
4.2.5 Level Shifter
To connect the 5 Volt DS1307 RTC, a level shifter is required. This makes it possible to convert the
5-volt signal to a 3.3-volt signal.
Officially, this is a so-called 3.3V 5V TTL Bi-directional Logic Level

Converter.
Scheme:
LV = Low Voltage part (3,3 Volt)

HV = High Voltage part (5 Volt)
This level shifter contains 2 transmit (TX) and

receive (RX) channels.
Alternatively, a level shifter can be replaced by a so-called voltage divider. Two resistors are used,
for example, of 10 and 22K.
28
A voltage divider on a breadboard:
4.2.6 Arduino power adapter
Arduino 9 Volt Power Adapter (1A). Make sure that a 2.1mm

plug is used. The pin must be center positive (outside = GND,
inside plug = 9V).
4.2.7 USB micro kabel

USB-cable with micro USB connector.
29
4.2.8 Breadboard and other parts
In addition to the mentioned components, they need the following components:

• Breadboard:
Breadboards are in available in different sizes. In this project, we use an 830-points
breadboard.
• Breadboard powersupply (3,3 / 5 Volt):

A breadboard powersupply fits on a breadboard. The powersupply can switch between 0, 3,3
and 5 Volt (using so called jumpers).
• Jumper cables:
• Resistors:
Buy resistors in sets of different values.
30
4.2.9 Buying in China
Ordering electronics in China is often profitable as there are generally no shipping charges. There
are a few points of interest:
• Consider import charges. In the Netherlands for example to total order amount shouldn’t
exceed 22 euro’s.
• Consider long waiting times. It takes between 3 and 4 weeks (sometimes longer) before the
goods are delivered. The positive is that I have not personally experienced that the order was
not delivered.
• There is a chance that the goods will be damaged. This applies, for example, to bent pins. I've
only experienced it once.
• If soldering is a problem then check if the components are assembled. For example, the level
shifters are delivered in two variants.
• Some Chinese websites have departments in Europe, America or Australia. They are more
expensive but you don’t have to worry about import charges and the delivery times are much
shorter.
Not assembled Assembled
Examples of Chinese websites are:

• www.dx.com
• www.banggood.com
• www.miniinthebox.com/nl/
31
4.3 Software
4.3.1 Introduction
A number of software installations are required for performing and testing the project. These are
all open source or freeware software.
Software Required:
• For the ESP-12E programming, the Arduino IDE is used.
• AngularJS uses a number of JavaScript solutions:
o AngularJS
o AngularJS Canvas Gauge
o AngularJS Resource
o gauge
• NodeJS is used to perform the AngularJS scripts.
• For the MQTT broker and client computers, Mosquitto, Mosca and Paho are used.
• To test an MQTT publisher with Paho, Eclipse is used with Java.
• The Android Studio to develop an Android app.
• Chart.js is used to create graphs.
• Optionally, Virtual Router can be used as a solution for Wi-Fi failure.
The following sections describe the installations of the various software components. Each
paragraph will be completed with a simple example if applicable.
The versions of the software packages are from May or June 2016. It is likely that higher software
versions are available now. In general, it is wise to install the latest version of a particular
software package.
32
4.3.2 Arduino IDE

4.3.2.1 Installation
Open a browser and browse to: https://www.arduino.cc/en/Main/Software
Download the Windows installer. Choose “JUST DOWNLOAD” (of course you may donate!).
33
Start the installer:
 Ja (Yes)
 I Agree
34
 Next
 Install
35
Please wait…
 Close
Start Arduino
36
Please wait…
Menu  File  Preferences
Additional Boardmanager URLs:

http://arduino.esp8266.com/stable/package_esp8266com_index.json
• OK
37
4.3.2.2 Arduino Libraries
A number of additional libraries are required for this project.
Menu  Sketch  Include Libraries  Manage Libraries…
Install:
dht22
ArduinoJSON
PubSubClient
38
RTCLib
NTPClientLib
Remarks:
NtpClientLib version 2.0.x doesn’t seem to work, so please use version 1.3.2
4.3.2.3 Blink
Connect the ESP-12E to a USB port on the Windows PC, laptop or tablet. Under Windows 7 and
later, a so-called COM port for the connected ESP-12E is installed.
Start  Device Manager
39
Open Ports (COM & LPT)
In this example, a COM6 port has been created for the ESP-12E. The number of the created COM
port may differ.
Open the Arduino IDE
40
Menu  Tools  Board:…  NodeMCU 1.0 (ESP-12E Module)
Attention: choose version 1.0!
41
Menu  Tools  Port  COM6
File  Examples  ESP8266  Blink
42
Upload through
Please wait…
Ready:
The blue led on the ESP-12E should blink now.
43
Source:
// Setup
void setup() {
pinMode(LED_BUILTIN, OUTPUT); // Initialize the LED_BUILTIN pin
// as output pin
}
// Endless loop
void loop() {
digitalWrite(LED_BUILTIN, LOW); // LED on
delay(1000); // Wait for 1 seconds
digitalWrite(LED_BUILTIN, HIGH); // LED off
delay(2000); // Wait for 2 seconds
}
See: Sources  Arduino  Blink  Blink.ino
On the ESP-12E, the built-in LED is set default to LOW (and is on). Therefore, the LED is turned on
with LOW and with HIGH the LED is turned off. Normally, it just works the other way around.
44
4.3.3 NodeJS
4.3.3.1 NodeJS installation
Install NodeJS
Open a browser and browse t: https://nodejs.org/en/download/
Select the correct installer:
Start installer:
45
 Next
Check “I accept the terms in the License Agreement”  Next
46
 Next
 Next
47
 Install
 Ja (Yes)
48
Please wait…
 Finish
49
4.3.3.2 Install packages
Go to C:\windows\system32 and look for cmd.exe  Copy to  Desktop (create shortcut)
Select shortcut on the desktop  Properties
50
 Advanced
Check “Run as administrator” OK  OK
51
Start cmd on the desktop  Yes
cd\program files\nodejs
Commands:
• npm install express
• npm install serve-static
• npm install body-parser
• npm install mosca –-save
• npm install mongodb --save
52
4.3.3.3 Create server script
In this section, we will create an example NodeJS script. This will serve as an example for the
AngularJS example discussed later in this book.
Create a file mijnNodeServer.js on e.g. c:\temp using an editor (Notepad, Footpad ++, ..).
The direct creation of this file on c:\Program Files\nodejs does not work under Windows 10 due
to the write permissions on this directory.
Tip: using Notepad++, you can do this via the Notepad++ SaveAsAdmin extension plugin.
The created script refers to a fixed location on the disk (in this example c:\hallo). This script uses
serveStatic('../../hallo') (NodeJS is on c:\ program files\nodejs).
Source: mijnNodeServer.js
var
express = require('express'),
serveStatic = require('serve-static');
nodePort = 5000;
// Start NodeJS
app = express();
app.use( serveStatic('../../hallo') );
app.listen(nodePort);
console.log('Node server is up and running')
See: Sources  NodeJS  mijnNodeServer.js
In this script, first the required modules are imported (the require assignments). Also, the port to
use is configured (normally 5000). Then, the NodeJS Express server starts at port 5000.
Copy to: C:\Program Files\nodejs  Continue
53
4.3.3.4 Start the server
Start the server on C:\Program Files\nodejs with the command: node mijnserver.js
4.3.4 AngularJS
4.3.4.1 AngularJS installation
No installation is required for AngularJS. It consists of a number of JavaScript libraries that are free
to download. In this project, we use:
• angular-min.js
• angular-resource.min.js
We use in this project the following project structure:
C: -+
+ AngularJS -+
+ dht --+
+ controllers
+ fonts
+ js
Open a browser and browse to: https://code.angularjs.org/1.5.5/
54
Download:
Select the file to download  Save link as…
Save the scripts in C:\AngularJS\dht\js
55
4.3.4.2 HTML5 Canvas Gauge 1
The implementation of the temperature and humidity meter is implemented by two so-called
canvas gauge scripts.
Open a browser and browse to: https://github.com/dec/angular-canvas-gauge
Download the zip file.
Unzip the ZIP-file and copy angular-canvas-gauge.js to C:\AngularJS\dht\js.

Copy the map fonts to C:\AngularJS\dht.
4.3.4.3 HTML5 Canvas Gauge 2
This is another gauge implementation (thanks to Mykhailo Stadnyk).
Open a browser and browse to: https://github.com/Mikhus/canv-gauge
Download the zip file.
Unzip the ZIP-file and copy the file gauge.js to c:\AngularJS\dht22\js.
56
There is a small bug in the source which should be corrected (line 160):
/**
* Sets a new value to gauge and updates the gauge view
*
* @param {number} val - the new value to set to the gauge
* @return {Gauge} this - returns self
*/
this.setValue = function (val) {
fromValue = config.animation ? value : val;

var dv = (config.maxValue - config.minValue) / 100;
/* bug fix: values < 0.00 and > -2.00 should be corrected! */
if( val < 0.00 && val > -2.00 ) {
toValue = val;
} else {
toValue = val > config.maxValue ?
config.maxValue + dv :
val < config.minValue ?
config.minValue - dv :
val;
}
value = val;
config.animation ? animate() : this.draw();

return this;
};
See: Sources  AngularJS  dht  js  gauge.js
This fix is a correction for the error if the value fall between 0 and -2. Then always -10 is shown as
the result.
The C:\AngularJS\dht\js now contains 4 files and a fonts directory:
57
4.3.4.4 A simple example.
The operation of AngularJS can best be shown with a simple example.
We use the following directory structure for this:
In the hallo folder, we create the following index.html file:
<html ng-app="helloApp" >

<head>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="controllers/controller.js"></script>
</head>
<body>
<div ng-controller="helloController">
<p> {{hello}} </p>
</div>
</body>
</html>
See: Sources  AngularJS  hallo  index.html
In index.html there are 2 directives:

• ng-app reference to the application to be used
• ng-controller reference to the controller to be used
Additionally, there are 3 Java scripts loaded:

• angular.min.js the AngularJS library
• app.js the application
• controller.js the controller
And finally, there is one data link: {{hello}}.
The application will be further developed in app.js and controller.js.
Source app.js:
var helloApp = angular.module('helloApp', []);
See: Sources  AngularJS  hallo  js  app.js
This one line refers to the ng app directive in index.html.
58
Source controller.js:
helloApp.controller('helloController', function($scope) {
$scope.hello = 'Hello Angular!';
}
);
See: Sources  AngularJS  hallo  controllers  controllers.js
This is the actual app. In the controller, the data link {{hello}} in index.html is populated by
$scope.hello.
AngularJS is basically not dependent on a server and therefore it can be started using a file link
like: file:///C:/hallo/index.html
Result:
In this example, you can see that the content is build up by using the app and the controller.
The example also works with the previously created mijnNodeServer.js (see NodeJS installation).
Start the server on C:\Program Files\nodejs with the command: node mijnNodeServer.js
Open a browser and browse to: http://localhost:5000/index.html
59
4.3.5 Chart.js
4.3.5.1 Download
To show graphic charts we use Chart.js (http://www.chartjs.org/).
Open a browser and browse to: https://github.com/chartjs/Chart.js
 Clone or download
 Download ZIP
60
Unzip the ZIP-file:
4.3.5.2 Test
Open an explorer and go to the unzipped ZIP file and locate the folder samples  select bar.html
right-click  Open with  Google Chrome
61
Result:
62
4.3.6 Mosquitto
4.3.6.1 Introduction
MQTT requires a so-called broker. In this book

Mosca is used as a broker. This used in
conjunction with NodeJS and AngularJS.
To demonstrate the operation of MQTT, Mosquitto is installed. Mosquitto is an open source

MQTT initiative. This client to publish messages is also used to test the operation of the AngularJS
solution (apart from the ESP8266 hardware setup).
For the operation of Mosquitto, three DLLs are required that needs to be retrieved separately.
4.3.6.2.1 Step 1: SSL-dll’s.
Open a browser and browse to:

http://slproweb.com/products/Win32OpenSSL.html
Download and install Win32OpenSSL_Light-1_0_2g.exe
 Ja (Yes)
63
 Ignore warnings  OK
 Next
64
Check “I accept…”  Next
 Next (you can choose a different folder with Browse…, as in the example)
65
 Next
 Choose a location for the DLLs (needed for the Mosquitto installation)  Next
 Install
66
Please wait…
67
Uncheck One-time donation (of course you may donate!)  Finish
68
4.3.6.2.2 Step 2: Thread-dll.

ftp://sources.redhat.com/pub/pthreads-win32/dll-latest/dll/x86/
Select pthreadVC2.dll to download. Please remember the download location for the Mosquitto
installation.
4.3.6.2.3 Step 3: Mosquitto installation.

http://mosquitto.org/download
Select the installation file  Run as administrator
69
 Yes
 Next
70
 Next
 Next
71
 Install
Please wait…
72
 Finish
4.3.6.2.4 Step 4: Finish installation
Copy the DLLs from the SSL bin directory (see step 1) to the Mosquitto directory.
Copy the following DLLs:

• libeay32.dll
• ssleay32.dll
 Copy
73
Paste the DLLs in the C:\Program Files (x86)\mosquitto directory:
Repeat this for pthreadVC2.dll (see step 2).
74
4.3.6.2.5 Step 5: Edit PATH-variable
Start  System
Advanced system settings
75
 Environment variables
Select Path  Edit…
 New
Add C:\Program Files (x86)\mosquitto toe  OK (3 times).
76
4.3.6.3 Broker
Open a command prompt (running as Administrator)  mosquitto
Confirm firewall message if presented.

Check “Public networks…”  Allow access
Open a new command prompt (running as Administrator).
Command: netstat -an
77
Check if port 1883 is in use:
If this the case the broker is correctly started.
4.3.6.4 Subscriber
Command: mosquitto_sub -t "#" -v
In this case, the client subscribes to all topics (-t) using the wildcard #. The -v option will display
received messages on the console.
4.3.6.5 Publisher
Command: mosquitto_pub -t "mijntopic" -m "Hallo MQTT" -h 127.0.0.1
The message (-m) "Hallo MQTT" is published on topic (-t) mytopic on host (-h) 127.0.0.1. This is
where the broker is currently running (localhost).
78
You see the message in the command prompt were the subscriber is running.
4.3.7 Eclipse Java
A Java program is used to test and demonstrate an MQTT client. An Eclipse Java installation is
required for this. After the installation, a Hello World program is created to test the installation.
Create a workspace directory on a hard drive, eg: c: \ workspace
Open an browser and browse to: https://eclipse.org/downloads/
Choose the correct installer (32 of 64 bits):
79
 Download
Please wait...
 Start the installer
Please wait...
80
 Select Eclipse IDE for Java Developers
Choose an installation folder (see example)  Install
81
 Accept now
Please wait...
82
4.3.7.3 Java Hello World
 Launch
Please wait...
83
Select the workspace you created earlier  Browse  c:\workspace  OK
Close Welcome screen
Menu  File  New  Java Project
Project name: HelloWorld  Finish
84
Unfold the Package Explorer  src  rechter muisknop  New  Class
Package: nl.iot.test
Name: HelloWorld
Check “public static void main...”  Finish
85
Edit source:
package nl.iot.test;
public class HelloWorld {
public static void main(String[] args) {

System.out.println("Hello IOT World");
See: Sources  Java HelloWorld  src  nl  test  HelloWorld.java
 Save
The source consists of an HelloWorld class. This class contains one static main function. This is the
so-called main entry point of the Java application. Through a static class system, the message
"Hello IOT World" is displayed on the console. By default, this class is part of the Java Runtime
environment and does not need to be explicitly imported.
 Run
Result in the Console:
After installing Paho (next paragraph), Eclipse is used to create an MQTT client.
86
4.3.8 PAHO Java cliënt

One Java MQTT implementation is called Paho. Pãho comes from the Maori dialect and means as
much as announcing and sending. After installation, a Java MQTT client is created to test Paho in
combination with the Mosquitto broker.
The installed MQTT Java client library is used in this book for the Android app and Java client.
Open a browser a browse to:

https://repo.eclipse.org/content/repositories/paho-releases/org/eclipse/paho/
org.eclipse.paho.client.mqttv3/1.0.2/ *)
*) Always select the latest version (in this example 1.0.2).
Select org.eclipse.paho.client.mqttv3-1.0.2.jar and download this file.
87
Open an explorer and go to the previously created Java workspace. Create a directory lib and copy
the downloaded jar file to this location.
See: Sources  Java lib  org.eclipse.paho.client.mqttv3-1.0.2.jar
4.3.8.3 Java MQTT cliënt
Start Eclipse.
 OK
 File  New  Java Project
88
Project Name: MQTTClient  Finish
Project  Build Path  Configure Build Path...
89
Tab: Libraries  Add External JARS...
Select org.eclipse.paho.client.mqttv3-1.0.2.jar in c:\workspace\lib  Open
90
 Apply  OK
Unfold the project  src  New  Class
91
Package: nl.iot.test
Name: TestClient
 Finish
See: Sources  Java MQTTClient  src  nl  iot  test  TestClient.java
TestClient.java
package nl.iot.test;
import java.text.DateFormat;
import java.text.DecimalFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.concurrent.ThreadLocalRandom;
import org.eclipse.paho.client.mqttv3.MqttClient;
import org.eclipse.paho.client.mqttv3.MqttException;
import org.eclipse.paho.client.mqttv3.MqttMessage;
public class TestClient {

// IP Address
private String ipAddress = "127.0.0.1";
// Default port
private int port = 1883;
MqttClient cliënt;
public TestClient() {
}
public static void main(String[] args) {

new TestClient().doTests();
}
92
public void doTests() {
String clientIP = "tcp://" + ipAddress + ":" + port;
System.out.println("Start cliënt");
try {
cliënt = new MqttClient(clientIP, "mqttDHT22");
client.connect();
while (true) {
String jsonMessage = this.getJSONString();
MqttMessage message = new MqttMessage();
message.setPayload(jsonMessage.getBytes());
System.out.println("Publish");
client.publish("mqttDHT22/payload", message);
Thread.sleep(5000);
}
} catch (InterruptedException e) {
System.err.println("InterruptedException!");
System.err.println(e.getMessage());
} catch (MqttException e) {
System.err.println("MqttException!");
e.printStackTrace();
} finally {
try {
client.disconnect();
System.err.println("MqttException!");
}
}
}
public String getJSONString() {

String jsonMessage = "{\"dht22\":{\"datetime\":\"" +
this.getCurrentDate();
jsonMessage += "\",\"temperature\":\"" +
this.getRandomTemperature(15.0, 32.0);
jsonMessage += "\",\"humidity\":\"" + this.getRandomHumidity(30, 70);
jsonMessage += "\"}}";
System.out.println(jsonMessage);
return jsonMessage;
}
public String getCurrentDate() {

DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
Date date = new Date();
return df.format(date);
}
public String getRandomTemperature(double min, double max) {

DecimalFormat df = new DecimalFormat("##.#");
double temp = ThreadLocalRandom.current().nextDouble(min, max);
return df.format(temp).replace(',', '.');
}
public int getRandomHumidity(int min, int max) {

return ThreadLocalRandom.current().nextInt(min, max);
}
}
93
In this client, a message is published on the topic mqttDHT22/payload. The message will be
delivered in the same format that will also be used as a message for the AngularJS and Android
app.
The source begins importing the required Java libraries. In addition to the MQTT client library,
other libraries are used for formatting the date and time and retrieving a random value.
In the main entry point, the test client is called. The test client starts making a connection to the
MQTT broker. After that, a message is published to the broker every 5 seconds.
For the message, random values are used for temperature and humidity.
The message is published in the so-called JSON format. The message is in format:
{"dht22":
{
"datetime":"20160328180535",
"temperature":"20.4",
"humidity":"42"
}
}
The content speaks more or less for itself. It contains a date / time, a temperature in degrees
Celsius and a humidity percentage. The start tag indicates to the sensor (dht22) used.
4.3.8.4 Test client.
Start the mosquitto broker and subscriber (as described before).
Broker: mosquitto
Subscriber: mosquitto_sub -t "#" -v
94
Execute the Eclipse project  TestClient.java  Run As  Java Application
The console will list the messages send:
The published messages are received and displayed by the subscriber:
Stop publishing by pressing the stop button in the console.
95
4.3.9 Android Studio 2.x

Android Studio is used to build an app for your mobile telephone or tablet.
Installing Android Studio 2.x consists of two parts:

• Installing the Java Development Kit 1.8
• Installing Android Studio 2.x
In this book, we use Android Studio's version 2.1 (May 2016).
4.3.9.2 Java JDK 1.8

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Download the latest version of the JDK (not the JRE):
Check “Accept License Agreement”
Select the correct version (32 of 64 bits):
Download the correct version.
96
Install the JDK.
 Yes
 Next
97
 Next
Please wait…
98
 Next
Please wait…
99
 Close
Start  System
100
 Advanced system settings
 Environment variables
 New
101
Add a new system variable JAVA_HOME with the correct location of the JDK.
See: c:\program files\java:
 OK (3 times).
4.3.9.3 Android Studio

http://developer.android.com/sdk/index.html
102
Download Android Studio.
Check “I have read and agree…” and Download Android Studio…
It's a fairly large file (> 1GB) so downloading can take a while.
Start installation.
Please wait…
103
 Yes
Optional:
If an older version of Android Studio already exist it first should be removed.
 Next
104
 Yes
 Next
105
 I Agree
 Next
106
 Install
Please wait…
107
Uncheck Start Android Studio  Finish
4.3.9.4 Android Hello World App
Start Android Studio  Start  Android Studio  Android Studio
Please wait…
108
 Start a new Android Studio project
Application name: HelloWorldApp

Company Domain: nl.iot.test
 Next
109
Select a Minimum SDK, for example API 21: Android 5.0 (Lollipop)  Next
Empty Activity  Next
110
 Finish
Please wait…
111
Menu  Tools  Android  AVD Manager
 Create Virtual Device…
Create a mobile phone or tablet using the selected API (in this example API 21).
 New Hardware Profile
112
Device Name: Mijn Samsung S4
Screen size: 5.0  Finish
 Next
113
Select Lollipop API Level 21 x86_64  Download
License Agreement  Accept Next
Please wait...  Finish
114
 Next
 Finish
Please wait…
115
Close AVD Manager 
Execute the App with
Select the created device (in this example Mijn Samsung S4 API 21)  OK
Please wait…
116
Please wait…
117
The app is started and Hello World is shown.
118
An Android App has a default format.
The main features are discussed here.
Structure:
In the folder manifest you find AndroidManifest.xml.
It lists where the application's starting point and necessary authorizations are defined. For
example, the app needs access to the internet, the camera and the GPS.
Java sources are created in the Java folder.
This includes the main activity (MainActivity.java) which contains the program entry point.
119
See: Sources  Android  HelloWorldApp  app  src  main  java  test  iot  nl  helloworldapp 
MainActivity.java
MainActivity.java
package test.iot.nl.helloworldapp;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
The main activity of our HelloWorld app consists only in creating the view to be displayed.
This happens in the OnCreate function.
In the folder res  layout there is a file activity_main.xml.
This file describes the layout of the screen which is displayed.
120
Through dropdowns you can select the mobile and Android API to be used (in our example API
21).
4.3.10 MongoDB installation

4.3.10.1 Drivers
MongoDB has various drivers for C ++, Java and also NodeJS. In this book, we are going to use the
NodeJS driver.
The installation consists of two parts:

• Installation of MongoDB (database),
• Installation of MongoDB NodeJS driver
4.3.10.3 MongoDB
Open a browser a browse to:

https://www.mongodb.com/download-center#community
Select Windows Server 2008 R2 and later…  DOWNLOAD (msi).
121
This version contains both the 32 and the 64-bit installation packages.
Install the downloaded package.
 Next
Check I accept…  Next
122
 Complete
 Install
123
 Yes
Please wait…
124
 Finish
4.3.10.4 MongoDB NodeJS driver
Installing of the NodeJS MongoDB driver is easy:
Open a command prompt (run as Administrator).

Commands:
C:
cd\
cd program files\nodejs
npm install mongodb
4.3.10.5 Start MongoDB

Commands:
C:
cd \
md data\db
cd data\db
cd ..
md log
125
Start the MongoDB server with the commands:

cd \
cd Program Files\MongoDB\Server\3.2\bin
mongod
Check Public networks…  Allow access (if necessary)
126
4.3.10.6 Import JSON
In this step, we will import an example of JSON file into MongoDB. This will create both the
database and the schedule.
Example JSON-file:
{
"dht22":
{
"datetime":"20160328180535",
"humidity":"42"
}
}
Create the file dht22.json in the c:\temp directory.

Commands:
cd \
mongoimport --db dht22iot --collection dht22temphum --drop --file
c:\temp\dht22.json
Check if the import is succesful.

Commands:
cd \
mongo
use dht22iot
db.dht22temphum.find()
MongoDB extended the schema with a unique id (_id).
127
4.3.10.7 NodeJS script
Create a test script testdb.js on directory c:\temp and copy this to c:\Program Files\nodejs.
testdb.js
// 1
var MongoClient = require('mongodb').MongoClient;
// 2
var url = 'mongodb://localhost:27017/dht22iot';
// 3
var insertDocument = function(db, callback) {
db.collection('dht22temphum').insertOne(
{
"dht22":
{
"datetime":"20160328190535",
"humidity":"42"
}
}, function(err, result) {
console.log("Inserted a document into the restaurants collection.");
callback();
});
};
// 4
MongoClient.connect(url, function(err, db) {
insertDocument(db, function() {
db.close();
});
});
See: Sources  NodeJS  testdb.js
The script has the following parts:

1. A MongoClient is created.
2. A database URL is defined.
3. The function insert document writes a single row into the database.
4. Once a connection is made to the database, the collection is written in the database and the
connection with the database is closed.
128
Open three command prompts.
Command prompt 1: Start the database

C:
cd\
mongod
Command prompt 2: Check the current content in the database.

C:
cd\
mongo
use dht22iot
129
Command prompt 3: insert a new row in the database.
C:
cd\
cd Program Files\nodejs
node testdb.js
Command prompt 2: Check the result.

C:
cd\
mongo
use dht22iot
A second row is created.
To start with an empty database all rows are removed.
Command prompt 2:
C:
cd\
mongo
use dht22iot
db.dht22temphum.remove({})
130
4.3.11 Virtual Router
4.3.11.1 No Wi-Fi?
In case there is no Wi-Fi available, a virtual Wi-Fi router can be used. The condition is that the
Windows PC, laptop or tablet have a Wi-Fi adapter.

http://virtualrouter-plus.nl.softonic.com/
Click Gratis Download (Free download)
Check Alternative download (Alternative download), please wait…
131
Install.
Please wait…
132
 Next
Check “I accept the terms…”  Next
133
 Next
 Install
134
 Ja (Yes)
Please wait…
135
Check “Launch the program”  Finish
4.3.11.3 Start Virtual Router
Start Virtual Router.
You may choose you own SSID and password  Start Virtual Router Plus
136
If starting fails, try again.
Open a command prompt  ipconfig /all
Search for: Microsoft Hosted Network Virtual Adapter
The IP address shown now can be used as an alternative to a "normal" Wi-Fi IP address.
137
5 Build
5.1 Hardware
5.1.1 Breadboard and power supply
Connect the breadboard power supply to the breadboard. Make sure that VCC, Out or + is
connected to the red line and GND or - on the black or blue line.
Set one dipswitch to 3V3 and the other to 5V.
Use a 9V-12V (1.0A) stabilized power adapter.
138
5.1.2 ESP-12E Development Kit
Place the ESP-12E on the breadboard and connect one of the 3V3 pins to 3V3 on the breadboard
(red line). And one of the GND pins on GND on the breadboard (black or blue line).
Result:
139
5.1.3 DHT22
The DHT22 has 4 pins, left to right VCC, Data, not connected and GND.
Connect VCC with 3V3 on the breadboard (red line) and GND with
GND on the breadboard (black or blue line).
Connect Data with D1 on the ESP-12E. Then place 10K resistance

between the data connection and the 3V3 on the breadboard (red
line).
140
5.1.4 DS1307 RTC
The DS1307 RTC is a 5V component and therefore must be connected to the ESP-12E through a
level shifter.
Connect the 5V connector of the DS1307 to the 5V of the breadboard (red line) and the GND on
the GND of the breadboard (black or blue line). Connect SDA of DS1307 to one TXO and SCL to the
other.
Make sure the HV (High Voltage) part of the level shifter is connected to the 5V part of the
breadboard and the LV (Low Voltage) part on the 3V3 part of the breadboard. Also make sure that
the GND connectors are connected.
Connect the TXI of the SDA part with D4 to the ESP-12E (green wire). And connect TXI of the SCL
part with D5 on the ESP-12E (blue wire).
141
5.1.5 Hardware schema
The complete overview:
142
143
5.2 Software
5.2.1 NodeJS, Mosca en MongoDB

For the AngularJS part, a NodeJS server is started. For the communication part, an MQTT broker is
started through the Mosca implementation. The data is stored in a MongoDB database.
5.2.1.2 JavaScript source
Starting both servers is done via a JavaScript piece. This will be placed in the directory where
NodeJS is installed. In this example:
C:\Program Files\nodejs
The JavaScript to start both servers consists of the following parts:

1. Declaration of variables including the used NodeJS packages. The ipAddress must be set to the
previously defined IP address (Wi-Fi, Mobile Hotspot or Virtual Router).
2. Then a NodeJS Express server is started. The server uses a static implementation. Meaning
that the applications are in a fixed place, in our example:
C: \ AngularJS (via .. \ .. \ AngularJS).
3. A connection is then made with the MongoDB database.
4. The Mosca MQTT Broker implementation is started.
5. There are six events (publish, subscribe, unscribe, connect, disconnecting and disconnect) that
show one or more messages on the console.
6. On a publishing event, the message is sent to the AngularJS application. An entry is also
written in the MongoDB database.
mijnserver.js
// 1
var express = require('express'),
bodyParser = require('body-parser');
mosca = require('mosca')
mongoClient = require('mongodb').MongoClient;
mongoDb = "";
mongoDbUrl = "";
dht22String = "";
dht22object = "";
accept = 0;
// Set the correct WiFi IP-adres:
ipAddress = '192.168.0.108';
nodeSettings = {
port : 5000
};
moscaSettings = {
host : ipAddress,
port : 1883
};
144
mongoDbSettings = {
host : '127.0.0.1',
port : 27017
};
// 2
// Here we start NodeJS
app = express();
app.use( serveStatic('../../AngularJS') );
app.use( bodyParser.json() );
app.get('/',function(req, res, next) {

if( accept == 1) {
res.write( dht22String );
res.send(JSON.stringify(res.body));
}
});
app.listen(nodeSettings.port);
// 3
// Here we start mongoDb
mongoDbUrl = 'mongodb://' + mongoDbSettings.host + '\:' + mongoDbSettings.port +
'/dht22iot';
mongoClient.connect(mongoDbUrl, function(err, db) {

console.log("MongoDB connected");
mongoDb = db;
});
// 4
// Here we start mosca
var server = new mosca.Server(moscaSettings);
server.on('ready', setup);
// 5
// Fired when the mqtt server is ready
function setup() {
console.log('Mosca MQTT broker is up and running')
}
// Fired when a client is connected

server.on('clientConnected', function(cliënt) {
console.log('cliënt connected', client.id);
});
145
// 6
// Fired when a message is received
server.on('published', function(packet, cliënt) {
var jsonString = packet.payload.toString();
var index = jsonString.indexOf("{\"dht22\":");
if(index > -1) {
accept = 1;
dht22String = jsonString;
console.log('dht22String: ', dht22String);
var dht22object = JSON.parse(jsonString);
console.log('Date/time : ', dht22object.dht22.datetime);
console.log('Temperature: ', dht22object.dht22.temperature);
console.log('Humidity : ', dht22object.dht22.humidity);
mongoDb.collection('dht22temphum').insertOne(
{
"dht22":
{
"datetime":dht22object.dht22.datetime,
"temperature":dht22object.dht22.temperature,
"humidity":dht22object.dht22.humidity
}
}, function(err, result) {
if( err ) {
console.log("Error: " + err.message);
throw err;
} else {
console.log(
"Inserted a document into the dht22temphum collection");
}
});
}
});
// Fired when a client subscribes to a topic

server.on('subscribed', function(topic, cliënt) {
console.log('subscribed : ', topic);
});
// Fired when a client subscribes to a topic

server.on('unsubscribed', function(topic, cliënt) {
console.log('unsubscribed : ', topic);
});
// Fired when a client is disconnecting

server.on('clientDisconnecting', function(cliënt) {
console.log('clientDisconnecting : ', client.id);
});
// Fired when a client is disconnected

server.on('clientDisconnected', function(cliënt) {
console.log('clientDisconnected : ', client.id);
});
See: Sources  NodeJS  mijnserver.js
146
5.2.2 AngularJS dashboard
The AngularJS app uses the previously downloaded JavaScript gauge.js and angular-canvas-
gauge.js. The following directory structure is used:
Directories:
C:
+-- AngularJS
+--- dht
+--- controllers
+--- fonts
+--- js
Files:
C:
+-- AngularJS
+--- dht - index.html
+--- controllers - controller.js
+--- fonts - digital-7-mono.ttf *)
- digital-7-mono.eot *)
+--- js - angular.min.js *)
- angular-canvas-gauge.js *)
- angular-resource.min.js *)
- gauge.js *)
*) See section 4.3.4
5.2.2.2 AngularJS HTML en JavaScript sources
index.html
This file consists of the following sections:

In the <head> section, the required java scripts are imported and the style to be used is set. For
the gauges, a viewport is defined.
The <body> section defines the gauges. There are various settings regarding color usage and
sequences. Most settings speak for themselves.
The temperature gauge has a range from -10 to 50 degrees Celsius. The humidity meter has a
range from 0 to 100%.
Also, in the <body>, references to the AngularJS app and controller are included in the so-called
ng directives.
147
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ESP12E IOT DHT12</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/gauge.js"></script>
<script type="text/javascript" src="js/angular-canvas-gauge.js"></script>
<script type="text/javascript" src="controllers/controller.js"></script>
<style>
body {background-color:lightgrey;}
h2 {color:darkblue;}
h4 {color:darkgreen;font-family:monospace;}
</style>
</head>
<body ng-app="dhtApp" ng-controller="dhtAppController">
<table>
<tr>
<td align="center" colspan="2">
<h2>IOT ESP12E DHT22 Temperature and Humidity</h2>
</td>
</tr>
<tr>
<td>
<canvas canvas-gauge
id="myCanvas1"
width="{{gauge1.width}}"
height="{{gauge1.height}}"
data-value="{{gauge1.value}}"
data-title="Temperature"
data-min-value="-10"
data-max-value="50"
data-major-ticks="-10 0 10 20 30 40 50"
data-minor-ticks="10"
data-stroke-ticks="false"
data-units="Celcius"
data-value-format="1.1"
data-glow="true"
data-animation-delay="10"
data-animation-duration="200"
data-animation-fn="linear"
data-colors-needle="#ff0 #00f"
data-highlights="-10 0 #03F, 0 10 #09F, 10 25 #0F0,
25 30 #FF0, 30 50 #F00"
data-circles-outervisible="true"
data-circles-middlevisible="true"
data-circles-innervisible="true"
data-valuebox-visible="true"
data-valuetext-visible="true"
data-colors-plate="#cfc"
data-colors-title="#003"
data-colors-units="#030"
data-colors-numbers="#009"
data-colors-needle-start="rgba(255, 0, 0, 1)"
data-colors-needle-end="rgba(255, 102, 0, .9)"
data-colors-needle-shadowup="rgba(2, 255, 255, 0.2)"
data-colors-needle-shadowdown="rgba(188, 143, 143, 0.45)"
data-colors-needle-circle-outerstart="#f0f0f0"
data-colors-needle-circle-outerend="#ccc"
data-colors-needle-circle-innerstart="#e8e8e8"
data-colors-needle-circle-innerend="#f5f5f5"
148
data-colors-valuebox-rectstart="#888"
data-colors-valuebox-rectend="#666"
data-colors-valuebox-background="#7a0"
data-colors-valuebox-shadow="rgba(0, 0, 0, 1)"
data-colors-valuetext-foreground="#cf0"
data-colors-valuetext-shadow="rgba(0, 0, 0, 0.3)"
data-colors-circle-shadow="rgba(0, 0, 0, 0.3)"
data-colors-circle-outerstart="#ddd"
data-colors-circle-outerend="#aaa"
data-colors-circle-middlestart="#eee"
data-colors-circle-middleend="#f0f0f0"
data-colors-circle-innerstart="#fafafa"
data-colors-circle-innerend="#ccc" />
</td>
<td>
<canvas canvas-gauge
id="myCanvas2"
width="{{gauge2.width}}"
height="{{gauge2.height}}"
data-value="{{gauge2.value}}"
data-title="Humidity"
data-min-value="0"
data-max-value="100"
data-major-ticks="0 10 20 30 40 50 60 70 80 90 100"
data-minor-ticks="10"
data-stroke-ticks="false"
data-units="%"
data-value-format="1"
data-glow="true"
data-animation-delay="10"
data-animation-duration="200"
data-animation-fn="linear"
data-colors-needle="#ff0 #00f"
data-highlights="0 35 #F00, 35 40 #FF0, 40 60 #0F0,
60 65 #FF0, 65 100 #03f"
data-circles-outervisible="true"
data-circles-middlevisible="true"
data-circles-innervisible="true"
data-valuebox-visible="true"
data-valuetext-visible="true"
data-colors-plate="#cfc"
data-colors-title="#003"
data-colors-units="#030"
data-colors-numbers="#009"
data-colors-needle-start="rgba(255, 0, 0, 1)"
data-colors-needle-end="rgba(255, 102, 0, .9)"
data-colors-needle-shadowup="rgba(2, 255, 255, 0.2)"
data-colors-needle-shadowdown="rgba(188, 143, 143, 0.45)"
data-colors-needle-circle-outerstart="#f0f0f0"
data-colors-needle-circle-outerend="#ccc"
data-colors-needle-circle-innerstart="#e8e8e8"
data-colors-needle-circle-innerend="#f5f5f5"
data-colors-valuebox-rectstart="#888"
data-colors-valuebox-rectend="#666"
data-colors-valuebox-background="#7a0"
data-colors-valuebox-shadow="rgba(0, 0, 0, 1)"
data-colors-valuetext-foreground="#cf0"
data-colors-valuetext-shadow="rgba(0, 0, 0, 0.3)"
data-colors-circle-shadow="rgba(0, 0, 0, 0.3)"
data-colors-circle-outerstart="#ddd"
data-colors-circle-outerend="#aaa"
data-colors-circle-middlestart="#eee"
data-colors-circle-middleend="#f0f0f0"
data-colors-circle-innerstart="#fafafa"
data-colors-circle-innerend="#ccc" />
</td>
</tr>
149
<td align="center" colspan="2">
<h4>{{datetime}}</h4>
</td>
<tr>
</tr>
</table>
</body>
</html>
See: Sources  AngularJS  dht  index.html
controller.js
In the controller, the AngularJS module dhtApp is defined. This uses the angular-canvas gauge
resource. The controller is also defined here. This includes a http-scope. This allows the controller
to respond to any incoming MQTT messages.
The controller has a refresh function that is performed every 2.5 seconds.
If an http-get is entered, the data will be read and an update will take place.
The dimensions of the two gauges are also set.

angular.module('dhtApp', ['ngResource','angular-canvas-gauge'])
.controller('dhtAppController', ['$scope', '$interval', '$http',
function($scope, $interval, $http) {
$scope.datetime = "";
$scope.setDate = function(date) {
console.log('***');
console.log('date ' + date);
var ret =
date.substring(6, 8) + "-" +
date.substring(4, 6) + "-" +
date.substring(0, 4) + " " +
date.substring(8, 10) + ":" +
date.substring(10, 12) + ":" +
date.substring(12, 14);
console.log('ret: ' + ret);
return ret;
};
$scope.refresh = function() {
$http.get('/').success(function(data){
console.log('***');
console.log(data);
mydata = data;
console.log('***');
console.log(mydata);
console.log('***');
var update = "Last update: " + $scope.setDate(
mydata.dht22.datetime );
$scope.datetime = update;
$scope.gauge1.value = mydata.dht22.temperature;
$scope.gauge2.value = mydata.dht22.humidity;
});
}
150
$scope.gauge1 = {
value: 20,
width: 300,
height: 300
};
$scope.gauge2 = {
value: 20,
width: 300,
height: 300
};
$scope.intervalPromise = $interval(function(){
$scope.refresh();
}, 2500);
$scope.refresh();
}]);
See: Sources  AngularJS  dht  controllers  controller.js
5.2.3 ESP-12E MQTT programma

The ESP-12E is programmed by a program created in the Arduino IDE. Connect the ESP-12E with a
USB cable and select the appropriate board (NodeMCU v1.0 (ESP-12E module)) and the connected
COM port.
5.2.3.2 Source
The source consists of the following parts:

1. Required include statements for the libraries used by this sketch.
2. A number of define statements
Definition of the used pins on the ESP12E.
3. Definitions for Wi-Fi variables.
4. Definitions for NTP variables.
5. Create the various used clients.
6. Definition of a number of globally used variables.
7. DHTxx features:
Initialization of the DHTxx sensor.
Temperature and relative humidity settings.
8. NTP function for retrieving the current date and time.
9. RTC (DS1307) Features:
Set current date / time if NTP is available.
Determine and optionally set date / time if NTP is not available.
Date / time functions.
10. MQTT client features:
Set up connection with MQTT broker.
Callback functions.
Reconnect function (in case the connection has been disconnected).
11. Wi-Fi function:
151
Set up Wi-Fi connection.
12. Format JSON publication string with date / time, temperature and relative humidity.
13. Arduino setup function:
Serial.
DHTxx.
Wi-Fi.
MQTT.
NTP.
RTC.
14. Arduino loop function:
Check the client connection and reconnect if necessary.
Check DHTxx status every 5 seconds.
Determine temperature and relative humidity.
Publish JSON string to MQTT broker.
IOT_Project.ino
See: Sources  Arduino  IOT-Project  IOT-Project.ino
// 1
// ------------------------------------------------------------------------------
// Includes
// ------------------------------------------------------------------------------
#include <Wire.h>
#include <ESP8266WiFi.h>
#include <PubSubClient.h>
#include <DHT.h>
#include <RTClib.h>
#include <NtpClientLib.h>
#include <ArduinoJson.h>
// 2
// ------------------------------------------------------------------------------
// Defines
// ------------------------------------------------------------------------------
// DHTxx Temperature and Humidity Sensor
// xx = 11 or 22
// GPIO 5 = D1
#define DHTPIN 5
#define DHTTYPE DHT22
// DS1307 Real Time Clock (RTC)

// GPIO 2 = D4 - SDA
// GPIO 14 = D5 - SCL
#define RTC_SDA 2
#define RTC_SCL 14
152
// 3
// ------------------------------------------------------------------------------
// Wifi / MQTT broker
// ------------------------------------------------------------------------------
// Update these with values suitable for your network
#define WIFI_HOME
//#define WIFI_MOBILE
//#define VIRTUAL_ROUTER
#ifdef WIFI_HOME
// WiFi home
const char * ssid = "?????????";
const char * password = "?????????";
const char * mqtt_broker = "192.168.0.108";
#else
#ifdef WIFI_MOBILE
// WiFi mobile
const char * password = "?????????";
#else
#ifdef VIRTUAL_ROUTER
// Virtual Router
const char * password = "?????????”;
#endif
#endif
#endif
// MQTT broker portnumber

const int portNumber = 1883;
// 4
// ------------------------------------------------------------------------------
// NTP server
// ------------------------------------------------------------------------------
// Set your used ntp pool server here
const char * ntp_server = "nl.pool.ntp.org"; // NTP pool server
const int timezone = 1; // GMT -/+ value
const bool isDST = true; // Daylight Saving Time (DST)
// 5
// ------------------------------------------------------------------------------
// Clients
// ------------------------------------------------------------------------------
// NTP client
ntpClient * ntp;
// WiFi Client
WiFiClient espClient;
// MQTT Client
PubSubClient client(espClient);
// DHTxx init (xx = 11 or 22)

DHT dht(DHTPIN, DHTTYPE);
// DS1307 init
RTC_DS1307 rtc;
153
// 6
// ------------------------------------------------------------------------------
// Globals
// ------------------------------------------------------------------------------
long millisPrevMsg = 0;
char sDateTime[32];
char sTemperature[8];
char sHumidity[8];
// 7
// ------------------------------------------------------------------------------
// DHTxx
// ------------------------------------------------------------------------------
// Setup DHT
void setup_DHT() {
float temp = 0.0;
// Start the communication with the DHT sensor by calling the begin method of
// the dht object
Serial.print("DHT setup ");
dht.begin();
// DHTxx is a slow sensor, wait for communication with the sensor

do {
digitalWrite(BUILTIN_LED, HIGH);
delay(500);
temp = dht.readTemperature();
Serial.print(".");
digitalWrite(BUILTIN_LED, LOW);
delay(500);
}
while (isnan(temp));
Serial.println();
Serial.println("DHT ready");
Serial.println();
}
// Get temperature reading from sensor

bool getTemperature() {
char buffer[8];
char sTemp[8];
float temp = dht.readTemperature();
if (isnan(temp)) {
return false;
}
// Temperature: 99.99 to 9.9 (25.11 -> 25.1 / 7.65 --> 7.6 / 0.15 -> 0.1)
dtostrf(temp, 1, 1, buffer);
sprintf(sTemperature, "%s", buffer);
return true;
}
// Get humidity reading from sensor

bool getHumidity() {
char buffer[8];
char sHum[8];
float hum = dht.readHumidity();
if (isnan(hum)) {
return false;
}
// Humidity: 99.99 to 9 (25.11 -> 25 / 7.65 --> 7 / 0.15 -> 0)

dtostrf(hum, 1, 0, buffer);
sprintf(sHumidity, "%s", buffer);
return true;
}
154
// 8
// ------------------------------------------------------------------------------
// NTP
// ------------------------------------------------------------------------------
// Setup NTP client
bool setup_NTP() {
String date = "";
bool isNotNTPInit = true;
int counter = 0;
// Setup NTP client

ntp = ntpClient::getInstance(ntp_server, timezone, isDST);
ntp->begin(); //Starts time synchronization
// Try to connect to the NTP server

delay(1000);
Serial.print("Connecting to NTP ");
while (isNotNTPInit) {
Serial.print(".");
date = ntp->getDateStr();
// When date is in initial state (01/01/1970) connection is not succesfull

if (date != "01/01/1970") {
// Succesfull connected
isNotNTPInit = false;
} else {
// NTP servers are very busy so try again...
delay(500);
delay(500);
++counter;
// Limit number of retries
if (counter > 20) {
Serial.println();
Serial.println("NTP setup failed");
return false;
}
}
}
Serial.println();
Serial.print("NTP setup: ");

Serial.print( ntp->getTimeStr() );
Serial.print( " " );
Serial.println( ntp->getDateStr() );
Serial.println();
return true;
}
// 9
// ------------------------------------------------------------------------------
// RTC DS1307
// ------------------------------------------------------------------------------
// Get date time in format yyyyMMddhhmmss from rtc
void getDateTime() {
DateTime now = rtc.now();
snprintf(sDateTime, 32, "%04d%02d%02d%02d%02d%02d", now.year(), now.month(),
now.day(), now.hour(), now.minute(), now.second());
}
155
// Get date time in format yyyyMMddhhmmss from millis
void getDateTimeMillis() {
DateTime now = DateTime(millis());
snprintf(sDateTime, 32, "%04d%02d%02d%02d%02d%02d", now.year(), now.month(),
now.day(), now.hour(), now.minute(), now.second());
Serial.print("Millis ");
Serial.println(sDateTime);
}
// Show time and date in format hh:mm:ss dd-MM-yyyy

void showTimeDate() {
char buffer[32];
snprintf(buffer, 32, "%02d:%02d:%02d %02d-%02d-%04d", now.hour(), now.minute(),
now.second(), now.day(), now.month(), now.year() );
Serial.print("Time/date: ");
Serial.println(buffer);
}
// Setup RTC
bool setup_RTC(bool ntpStatus) {
Wire.begin(RTC_SDA, RTC_SCL);
Serial.println("RTC setup");
// RTC begin
if (! rtc.begin() ) {
Serial.println("Couldn't find RTC");
return false;
}
// Get date time from millis

getDateTimeMillis();
// If ntp available adjust rtc

if ( ntpStatus ) {
// Adjust ntp time
String ntpTime = ntp->getTimeStr();
String ntpDate = ntp->getDateStr();
int hr = ntpTime.substring(0, 2).toInt();

int mn = ntpTime.substring(3, 5).toInt();
int sc = ntpTime.substring(6, 8).toInt();
int dy = ntpDate.substring(0, 2).toInt();

int mt = ntpDate.substring(3, 5).toInt();
int yr = ntpDate.substring(6, 11).toInt();
rtc.adjust(DateTime(yr, mt, dy, hr, mn, sc));

Serial.print("NTP -> RTC adjust: ");
} else {
// Otherwise check RTC date time
// If RTC time is invalid take builtin date and time

if ( now.second() < 0 || now.second() > 59 ) {
rtc.adjust(DateTime(F(__DATE__), F(__TIME__)));
}
// Check if time is valid

if ( now.second() < 0 || now.second() > 59 ) {
Serial.println("RTC call failed!");
return false;
}
}
156
// OK!
showTimeDate();
Serial.println("RTC OK");
Serial.println();
return true;
}
// 10
// ------------------------------------------------------------------------------
// MQTT
// ------------------------------------------------------------------------------
// Client callback function
void callback(char* topic, byte* payload, unsigned int length) {
Serial.print("Message arrived: [");
Serial.print(topic);
Serial.print("] ");
for (int i = 0; i < length; i++) {
Serial.print((char)payload[i]);
}
Serial.println();
}
// Try to reconnect client

void reconnect() {
// Loop until we're reconnected
while (!client.connected()) {
Serial.print("Attempting MQTT connection: ");
// Attempt to connect
if (client.connect("dht22publish")) {
Serial.println("connected");
// Once connected, publish an announcement...
client.publish("outTopic", "ESP8266Client connected!");
// ... and resubscribe
client.subscribe("inTopic");
} else {
Serial.print("failed, rc=");
Serial.print(client.state());
Serial.println(": try again in 5 seconds");
// Wait 5 seconds before retrying
delay(1000);
delay(4000);
}
}
}
void setup_MQTTclient() {
client.setServer(mqtt_broker, portNumber);
client.setCallback(callback);
Serial.print("MQTT client connected to: ");
Serial.print(mqtt_broker);
Serial.print(":");
Serial.println(portNumber);
Serial.println();
}
157
// 11
// ------------------------------------------------------------------------------
// WiFi
// ------------------------------------------------------------------------------
// Setup WiFi
void setup_WiFi() {
// We start by connecting to a WiFi network
Serial.print("Connecting to ");
Serial.print(ssid);
Serial.print(" ");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {

delay(250);
Serial.print(".");
delay(250);
}
Serial.println();
Serial.print("WiFi connected to: ");
Serial.println(WiFi.localIP());
Serial.println();
}
// 12
// ------------------------------------------------------------------------------
// JSON
// ------------------------------------------------------------------------------
const char * getJSONString() {
// Setup JSON objects
String jsonString;
StaticJsonBuffer<128> jsonBuffer;
JsonObject& root = jsonBuffer.createObject();
JsonObject& data = jsonBuffer.createObject();
data["datetime"] = sDateTime;
data["temperature"] = sTemperature;
data["humidity"] = sHumidity;
root.set("dht22", data);
root.printTo(jsonString);
Serial.println("Message: ");
root.prettyPrintTo(Serial);
Serial.println();
// Return JSON string

return jsonString.c_str();
}
158
// 13
// ------------------------------------------------------------------------------
// Main setup
// ------------------------------------------------------------------------------
void setup() {
pinMode(BUILTIN_LED, OUTPUT);
Serial.begin(115200);
delay(50);
Serial.flush();
// Setup DHT
setup_DHT();
// Connect to Wifi
setup_WiFi();
// Connect MQTT client to broker

setup_MQTTclient();
// NTP client setup

bool ntpStatus = setup_NTP();
// Setup RTC
if ( setup_RTC(ntpStatus) == false ) {
while (1) {
// Setup error: bring esp in endless loop
delay(150);
delay(150);
}
}
// Give millis previous message initial value

millisPrevMsg = millis();
Serial.println("Setup completed");
Serial.println();
}
159
// 14
// ------------------------------------------------------------------------------
// Main loop
// ------------------------------------------------------------------------------
void loop() {
// Check if client is connected
if (!client.connected()) {
// Reconnect client
reconnect();
}
// Make client active
client.loop();
// Send message every 5 seconds

long now = millis();
if (now - millisPrevMsg > 5000) {
// Get data: datetime, temperature and humidity

getDateTime();
if (getTemperature() == false) {
delay(1000);
Serial.println("Failed to read from DHT sensor [T]");
return;
}
if ( getHumidity() == false) {
delay(1000);
Serial.println("Failed to read from DHT sensor [H]");
return;
}
// Publish results
client.publish("outTopic", getJSONString() );
Serial.println("Message published");
Serial.println();
millisPrevMsg = now;
delay(500);
} else {
// Manual delay loop
delay(250);
}
}
// ------------------------------------------------------------------------------
Remark:
If parsing of the message fails, correct the code under //12:
Replace:
const char * getJSONString() {
by:
const String getJSONString() {
Replace:
client.publish("outTopic", getJSONString() );
by:
client.publish("outTopic", getJSONString().c_str() );
160
5.2.3.3 Upload code
Start the Arduino IDE  menu  File  New
Replace the sketch by IOT_Project.ino:
Menu  File  Save as…
161
File name: IOT_Project  Save
Select the correct COM-port.
162
Upload
Please wait…
Uploaden…
Ready…
163
6 Testing
6.1 ESP-12E en WiFi
6.1.1 WiFi at home
Open a command prompt.

Command: ipconfig /all
Search for Wireless LAN adapter Wi-Fi
The IP address shown should be used for the MQTT broker.
6.1.2 Mobile Hotspot
Start your mobile hotspot on your smartphone.

Search for Wireless LAN adapter Wi-Fi
164
6.1.3 Virtual Router
Start Virtual Router.

Search for Wireless LAN adapter LAN-connection*  IPv4 Address
6.2 ESP-12E, NodeJS en Mosca

6.2.1 NodeJS Express server and Mosca broker

Commands to start the broker:
C:
cd \Program Files\nodejs
node mijnserver.js
165
6.2.2 ESP-12E
Open the Arduino IDE and connect the ESP-12E to the power supply and the USB on your PC or
laptop. Wait for the ESP12E to startup.
Arduino IDE  menu  Tools  Serial Monitor
Console:
On the command prompt at which the MQTT broker is started, the published messages are
displayed:
166
6.2.3 Chrome browser
Use a chrome browser to see the best results.
Use the IP-address of the MQTT-broker, in this example 192.168.0.108 or localhost.
Go to:
http://localhost:5000/dht/index.html
or:
http://192.168.0.108:5000/dht/index.html
Compare with the last results on the MQTT broker command prompt :
167
7 Android
7.1 Develop a App
Start Android Studio and create a new App MQTest.
The Android App consists of a number of components:

• A manifest file (1)
• A configuration file (3)
• A screen description (4) and
• The ultimate Android Java application (2)
168
7.1.1 AndroidManifest.xml
The manifest includes:

• The Android API versions supported by the APP (in this example, the minimum API 21 and
maximum API 23)
• The permissions granted to the App (in this example, Internet access)
• On which function the App should start (in this example in MainActivity).
<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="app.test.nl.mqtest">
<uses-sdk
android:minSdkVersion="21"
android:maxSdkVersion="23" />
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name=
"android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
See: Sources  Android  MQTest  app  src  main  AndroidManifest.xml
169
7.1.2 activity_main.xml
The activity_main.xml file contains the screen layout of the app.
The screen can be built with drag & drop of components on the layout. It is also possible to do this
via the text editor.
See: Sources  Android  MQTest  app  src  main  res  layout activity_main.xml
7.1.3 config.properties
In the config.properties file the following configuration variables are set:

• The MQTT Broker IP Address (as previously determined).
• The port number used by the MQTT broker.
• The topic name to be captured, in this example the wildcard "#" (all topics).
# Configuration File
ip_address=192.168.0.108
port_number=1883
topic_name=#
See: Sources  Android  MQTest  app  src  main  assets  config.properties
170
7.1.4 Android Java code

The Java code consists of two parts:

• A piece of code to read the properties from config.properties and
• the final program which creates the screen and processes the published topics.
7.1.4.2 PropertiesReader.java
In this source, the config.properties file is read and the properties for IP address, port number and
topic name are set. These properties are made available through three getter functions.
See: Sources  Android  MQTest  app  src  main  java  app  test  nl  mqtest 
PropertiesReader.java
package app.test.nl.mqtest;
import android.content.Context;
import android.content.res.AssetManager;
import android.util.Log;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;
// Properties reader from assets/config.properties

public class PropertiesReader {
private Context context;
private Properties properties;
private String ip_address;

private String port;
private String topic;
public PropertiesReader(Context context) {

this.context = context;
// Creates a new object ‘Properties’

properties = new Properties();
}
public void readPropertiesFromFile(Context context) {

// Reads the configuration file
PropertiesReader propertiesReader = new
PropertiesReader(context);
properties=propertiesReader.getProperties("config.properties");
// Get parameter values

ip_address =properties.getProperty("ip_address");
port = properties.getProperty("port_number");
topic = properties.getProperty("topic_name");
}
171
// Getters
public String getIp_address() {
return ip_address;
}
public String getPort() {

return port;
}
public String getTopic() {

return topic;
}
// Get properties from file assets/<fileName>

private Properties getProperties(String fileName) {
try {
// Access to the folder ‘assets’
AssetManager amgr = context.getAssets();
// Opening the file
InputStream inputStream = amgr.open(fileName);
// Loading of the properties
properties.load(inputStream);
}
catch (IOException e) {
Log.e("PropertiesReader",e.toString());
}
return properties;
}
}
172
7.1.4.3 MainActivity.java
MainActivity.java is the starting point of the application and consists of:

1. Some required import statement including the Paho MQTT implementation and JSON.
2. The MainActivity which is the so-called starting point of the App.
3. The OnCreate event, were the app screen is built.
4. The properties for IP address, port number and topic name are determined.
5. The MQTT URI is created in the form tcp: // <ip_adres>: <port number>, for example:
Tcp: //192.168.0.108: 1883
6. Next trying to connect with the MQTT broker is performed.
7. If there is a connection there is a subscribe to the previously defined topic.
8. To prevent the app from being blocked, a new thread is launched waiting for the posting of
messages.
9. Every 2 seconds a refresh is done.
10. For a screen refresh, it is necessary to put a thread on the user interface (runOnUIThread).
11. The watch function checks whether a message has been published.
12. If a message has been published, the screen will be updated with the new values.
13. Here the thread (see 8) is started.
14. In the watch function, a so-called callback function is put on the MQTT client. This to
determine whether a message has been published.
15. When a message is published, a MessageArrived event is triggered.
16. The received message is being processed.
17. This function which sets the screen fields for date, temperature and humidity.
18. In these functions, a message is sent.
19. In this function, the date is converted from:
YYYYMMDDHHmmSS to DD-MM-YYYY HH: mm: SS
See: Sources  Android  MQTest  app  src  main  java  app  test  nl  mqtest  MainActivity.java
package app.test.nl.mqtest;
// 1
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.widget.TextView;
import org.eclipse.paho.client.mqttv3.IMqttDeliveryToken;
import org.eclipse.paho.client.mqttv3.MqttCallback;
import org.eclipse.paho.client.mqttv3.MqttClient;
import org.eclipse.paho.client.mqttv3.MqttException;
import org.eclipse.paho.client.mqttv3.MqttMessage;
import org.eclipse.paho.client.mqttv3.persist.MemoryPersistence;
import org.json.JSONObject;
173
// 2
// MainActivity: show data from dht22 sensor using MQTT
public class MainActivity extends Activity {
private MqttClient client;

private boolean isMessageArrived;
private String lastUpdate;
private String temperature;
private String humidity;
private TextView txtLastUpdate;
private TextView txtTemperature;
private TextView txtHumidity;
private TextView txtStatus;
private TextView txtMessage;
private MemoryPersistence persistence;
// 3
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Set TextViews
txtLastUpdate = (TextView) findViewById(R.id.datetime);
txtTemperature = (TextView) findViewById(R.id.temperature);
txtHumidity = (TextView) findViewById(R.id.humidity);
txtStatus = (TextView) findViewById(R.id.status);
txtMessage = (TextView) findViewById(R.id.message);
// 4
// Get properties
Context context = this;
PropertiesReader p = new PropertiesReader(context);
p.readPropertiesFromFile(context);
// 5
// Assemble MQTT URI string
String mqttURI = "tcp://" + p.getIp_address() + ":" +
p.getPort();
// Init
isMessageArrived = false;
try {
// 6
// Try to connect MQTT Client to broker
persistence = new MemoryPersistence();
client = new MqttClient(mqttURI, "", persistence);
client.connect();
// 7
// Subscribe to topic
client.subscribe(p.getTopic());
Log.i("MQTTClient", "Client Connected: topic: " +
p.getTopic());
setText(new String[]{"Connected", "...", "...", "..."});
setMessageText("Waiting...");
174
// 8
// Start new thread to regulary update view
Thread t = new Thread() {
@Override
public void run() {
try {
while (!isInterrupted()) {
// 9
// Wait for 2 seconds before doing a new
// refresh
Thread.sleep(2000);
// 10
// Run on UI thread to be able doing the
// refresh
runOnUiThread(new Runnable() {
@Override
public void run() {
// 11
// Watch for new message
Log.i("MQTTClient", "Watch...");
watch();
// 12
// Update view
if(isMessageArrived) {
setText(new String[]{"Connected",
lastUpdate, temperature,
humidity});
setMessageText(
"Message Received!");
isMessageArrived = false;
} else {
}
}
});
}
} catch (InterruptedException e) {
}
}
};
// 13
// Start thread
t.start();
setMessageText("MQTT Exception: " + e.getMessage());
Log.i("MQTTClient", "Exception: " + e.getMessage());
}
}
175
// 14
private void watch() {
client.setCallback(new MqttCallback() {
@Override
public void connectionLost(Throwable throwable) {
}
@Override
// 15
public void messageArrived(String arg0, MqttMessage arg1)
throws Exception {
// A message arrived on the topic
Log.i("MQTTClient", "Message Received");
Log.i("MQTTClient", "Topic : " + arg0);
Log.i("MQTTClient", "Message: " + arg1.toString());
try {
// 16
// Parse JSON object
JSONObject mainObj = new JSONObject(arg1.toString());
lastUpdate = convertDate(
mainObj.getJSONObject("dht22").
getString("datetime") );
temperature = mainObj.getJSONObject("dht22").
getString("temperature") + "°C";
humidity = mainObj.getJSONObject("dht22").
getString("humidity") + "%";
Log.i("MQTTClient", "JSON string is parsed");
isMessageArrived = true;
} catch (Exception e) {
setMessageText("JSON Exception!");
Log.i("MQTTClient", "Exception: " + e.getMessage());
}
}
@Override
public void deliveryComplete(
IMqttDeliveryToken iMqttDeliveryToken) {
}
});
};
// 17
private void setText(String[] args) {
// Set 4 TextViews (4 input string are expected)
if (args.length != 4) {
return;
}
txtStatus.setText(args[0]);
txtLastUpdate.setText(args[1]);
txtTemperature.setText(args[2]);
txtHumidity.setText(args[3]);
}
176
// 18
private void setMessageText(String arg) {
// Set message
setMessageText(arg, false);
}
private void setMessageText(String arg, boolean isError) {

// Set (error) message
if (isError) {
txtMessage.setTextColor(Color.RED);
} else {
txtMessage.setTextColor(Color.BLUE);
}
txtMessage.setText(arg);
}
// 19
private String convertDate(String inputDate) {
// yyyyMMddhhmmss
return inputDate.substring(6, 8) + "-" +
inputDate.substring(4, 6) + "-" +
inputDate.substring(0, 4) + " " +
inputDate.substring(8, 10) + ":" +
inputDate.substring(10, 12) + ":" +
inputDate.substring(12);
}
}
7.2 App testing

7.2.1 Preperation
To display the graphs, the following servers must be started:

• MongoDB
• NodeJS Express server (min server.js)

Start MongoDB server with the commands:
cd \
mongod

Start NodeJS Express server with the commando’s:
cd \
node mijnserver2.js
Start to get data:

• The ESP12E solution (see Chapter 6) or
• The PAHO Java Client (see Chapter 4).
Remark:
Check the IP addresses before testing.
177
7.2.2 Android App
Android Studio  App  Java  MainActivity  Run ‘MainActivity’
Select the Emulator (in this example ‘Mijn Samsung S4 API 21)  OK
178
Please wait…
Even more patient please… ;-)
179
Result:
180
7.2.3 Testing a real Smartphone
Connect the smartphone to a PC, laptop or tablet using a USB cable. Make sure that the correct
USB driver is installed. Each mobile phone brand has its own USB driver. This book uses the
Samsung USB driver.
7.2.3.1 Samsung USB-driver

http://developer.samsung.com/technical-doc/view.do?v=T000000117
Download the ZIP-file
Unzip the ZIP-file.
Install.
181
 Next
 Select your country (in this example Netherlands)  Next
182
 Install
Please wait…
183
 Complete installation
7.2.3.2 Developer options on your smartphone
To be able to test with a smartphone the developer options must be enabled.
Click Settings
Tab: More
About phone
184
Click 7 times on the Build number
The developer options are enabled (if necessary, enable it using the green button).
Google for your smartphone if this doesn’t work (for example in case of a newer Android version).
7.2.3.3 MQTest App test
Start Android Studio and load it with the MQTest project and change (if needed) the correct Wi-Fi
IP address in the config.properties  Save
Connect the smartphone to the USB port of the PC, laptop or tablet.
185
Select MainActivity  Run ‘MainActivity’
Select the connected smartphone  OK
186
Please wait…
Result:
Close Android Studio and disconnect the USB cable. If it's ok, the app continues to work and is
installed on your smartphone.
187
8 The Cloud
8.1 Introduction
IoT without the Cloud is no IoT is said. I think that this can be discussed. To what extent is an
external Cloud provider reliable enough? What happens to that data that is being saved? What
happens if a Cloud provider goes bankrupt? And what does it cost?
And of course, there are also "free" Cloud providers. But "free" often comes with a price or a
restriction in, for example, the amount of data that can be stored.
Alternative is a private cloud. The disadvantage is that you have to install themselves, including
the necessary hardware.
In this book, the cloud is simulated by using MongoDB as a network database. The collected
(cloud) data is used to display graphs.
8.2 Graphs
The temperature and humidity data stored can be used to show graphs.
The charts use Chart.js. The processing consists of two parts:
• Starting a NodeJS Express server and retrieving the required data from the MongoDB
database.
• An HTML page with a piece of Java Script for retrieving data and showing the graph with
Chart.js.
8.2.1 NodeJS Express server

Create a script mijnserver2.js in C:\Program Files\nodejs.
1. First, a number of variables are declared. This script is run on localhost

2. In the findData function, the last 30 rows from the MongoDB database are retrieved. The
retrieved data is converted to an JSON string with the following format:
{"dht22":
[
{"datetime":20160608142840,"temperature":26.5,"humidity":47},
{"datetime":20160608142845,"temperature":23.6,"humidity":61},
...,
{"datetime":20160608143107,"temperature":21.1,"humidity":59}
]
}
Between the [] are the repeating groups with temperature and humidity data.
The data is pushed in array according to the Last In - First Out (LIFO) principle. This means, for
example, that in the data array first the date time, then the temperature and finally the
humidity is set (push). If this data is extracted from the array (pop), it happens in the order of
humidity, temperature and finally datetime.
188
For the row array, it means that the youngest entry is first pushed into the array and the
oldest entry as the latest. When unpacking, this automatically means that the oldest entry is
first taken out of the array (pop) and last entry as last. What makes it a good fit for drawing
the charts.
3. In the setJSON function, the JSON object to be sent is created.

4. Next the NodeJS Express server is started. The URL used is:
http://localhost:5000/db or http://127.0.0.1/db
Based on this request, the created JSON object is sent as a string to the calling party.
5. In this part, the connection is made with the MongoDB database.
mijnserver2.js
// 1
var express = require('express'),
bodyParser = require('body-parser');
mongoClient = require('mongodb').MongoClient;
mongoDb = "";
mongoDbUrl = "";
row = [];
data = [];
dht22String = "";
ipAddress = '127.0.0.1';
nodeSettings = {
port : 5000
};
mongoDbSettings = {
host : ipAddress,
port : 27017
};
// 2
var findData = function(db, callback) {
var index = 0;
var cursor = db.collection('dht22temphum').find( ).limit(30).sort({'_id':-1});
row = [];
data = [];
cursor.each(function(err, doc) {
if (doc != null) {
data.push( doc.dht22.datetime );
console.log( index + " - " + data[0] );
++index;
var tm = doc.dht22.temperature;
if(tm.length == 1) {
tm = "0" + tm + ".0";
} else if(tm.length == 2) {
tm = tm + ".0";
}
data.push( tm );
data.push( doc.dht22.humidity );
row.push( data );
data = [];
} else {
callback();
}
});
};
189
// 3
var setJSON = function() {
var index = 0;
var dt, tm, hm;
console.log( "---" );
dht22String = "{\"dht22\":[";
data = row.pop();
while(data != null) {
if(index == 0) {
dht22String += "{";
} else {
dht22String += ",{";
}
hm = data.pop();
tm = data.pop();
dt = data.pop();
console.log( index + " - " + dt );
++index;
dht22String += "\"datetime\":" + dt;
dht22String += ",\"temperature\":" + tm;
dht22String += ",\"humidity\":" + hm;
dht22String += "}";
data = row.pop();
}
dht22String += "]}";
console.log( dht22String );
}
// 4
// Here we start NodeJS
app = express();
app.use( serveStatic('../../Web') );
app.use( bodyParser.json() );
app.get('/db',function(req, res, next) {

findData(mongoDb, function() {
setJSON();
});
res.write( dht22String );
res.send(JSON.stringify(res.body));
});
app.listen(nodeSettings.port);
// 5
// Here we start mongoDb
mongoDbUrl = 'mongodb://' + mongoDbSettings.host + '\:' + mongoDbSettings.port +
'/dht22iot';
mongoClient.connect(mongoDbUrl, function(err, db) {

console.log("MongoDB connected");
mongoDb = db;
});
See: Sources  NodeJS  mijnserver2.js
190
8.2.2 Index.html
Create on C: the following directory structure:
C:
+--- Web
+--- js
Copy the Chart.js from the dist directory (see 4.3.5)
to C:\Web\js
191
Create in C:\Web a file index.html.
The part of index.html

1. The trigger for retrieving the data is a button. Clicking on this button performs the getData ()
(see 6) function.
2. A canvas (myChart) is used to show the graphs.
3. The Chart.min.js script is required for creating and displaying the graphs.
4. The required global variables for the context (myChart canvas), the HTTP Request and the
required data arrays (labels, temperature and humidity) are defined here.
5. In the createChart function, the graph is created and displayed.
6. In the processRequest function, the retrieved data is processed. By the aforementioned FILO
principle, the data to be displayed is already in the correct order (from old to new).
7. Based on the click event (see 1), the getData () function is performed by an HTTP request to
http://localhost: 5000/ db. This request is linked to a readystatechange event that is executed
when the request is complete. The processRequest function (see 6) is then performed.
8. Based on the result of the request, a message will appear.
index.html
<!DOCTYPE html>
<html>
<head>
<title>HTTP GET</title>
</head>
<body>

<button onclick="getData()">Get</button>

<canvas id="myChart" width="600" height="200"></canvas>

<script src="js/Chart.min.js"></script>

<script>
var ctx = document.getElementById("myChart").getContext("2d");
var xhr = new XMLHttpRequest();
var datelabels = [];
var tempdata = [];
var humdata = [];
var msg = '';
192

function createChart() {
var mydata = {
labels: datelabels,
datasets: [
{
label: "Temperature",
backgroundColor: [
"rgba(102,255,255,0.5)"
],
data: tempdata
},
{
label: "Humidity",
backgroundColor: [
"rgba(102,255,51,0.5)"
],
data: humdata
}
]
}
var myNewChart = new Chart(ctx , {
type: "line",
data: mydata,
});
}

function processRequest(e) {
if(xhr.readyState == 4 && xhr.status == 200) {
try {
var jsonresp = JSON.parse(xhr.responseText);
datelabels = [];
tempdata = [];
humdata = [];
for(var i=0; i<jsonresp.dht22.length; i++) {
console.log('index = ' + i + " " +
JSON.stringify(jsonresp.dht22[i]));
datelabels.push(
jsonresp.dht22[i].datetime);
console.log(
jsonresp.dht22[i].datetime);
tempdata.push(
jsonresp.dht22[i].temperature);
console.log(
jsonresp.dht22[i].temperature);
humdata.push(
jsonresp.dht22[i].humidity);
console.log(
jsonresp.dht22[i].humidity);
createChart();
}
document.getElementById("message").innerHTML =
"Success!";
} catch(err) {
console.log(err.message);
document.getElementById("message").innerHTML =
"Try again!";
}
}
}
193

function getData() {
xhr.open('GET', "http://localhost:5000/db", true);
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
xhr.onreadystatechange = processRequest;
}
</script>

<h3 id="message"></h3>
</body>
</html>
See: Sources  Web  index.html
8.2.3 Test
To display the graphs, the following servers must be started:

• MongoDB
• NodeJS Express server (mijnserver2.js)

Start the MongoDB server with the commands:
cd \
mongodb

Start the NodeJS Express server with the commands:
cd \
node mijnserver2.js

http://localhost:5000/index.html
194
 Get (if this doesn’t work “Try Again!”).
Result:
195
9 Index
Abbreviations .................................................................................................................................... 4, 12
Accountability .................................................................................................................................... 4, 10
Acknowledged Service....................................................................................................................... 4, 19
activity_main.xml ........................................................................................................................ 122, 174
Android .......2, 4, 6, 8, 9, 10, 13, 14, 15, 23, 33, 89, 96, 98, 104, 105, 106, 110, 111, 112, 114, 121, 122,
123, 172, 173, 174, 175, 177, 184, 191, 193
Android Studio............................................................................................................... 98, 104, 105, 110
AndroidManifest.xml................................................................................................................... 121, 173
AngularJS ................... 2, 4, 6, 7, 9, 16, 23, 33, 54, 55, 56, 57, 58, 59, 60, 64, 96, 146, 148, 150, 153, 154
Arduino ................................................................... 2, 5, 9, 23, 30, 33, 34, 37, 41, 45, 154, 155, 164, 169
Arduino IDE............................................................................................................................................ 34
Arduino Libraries ................................................................................................................................... 39
Assured Service ........................................................................................................................... 4, 19, 20
AVD Manager .............................................................................................................................. 114, 118
Blink ................................................................................................................................................. 40, 43
Breadboard .............................................................................................................................. 26, 31, 140
broker ...... 8, 9, 17, 18, 19, 20, 23, 33, 64, 80, 89, 96, 146, 148, 154, 155, 156, 160, 162, 167, 168, 169,
170, 174, 177, 178
Broker .................................................................................................................................................... 79
BSON................................................................................................................................................ 12, 25
Chart.js .........................................................................................................................6, 33, 61, 194, 198
China ...................................................................................................................................................... 32
Chinese websites ................................................................................................................................... 32
Cloud.............................................................................................................................................. 25, 194
config.properties ......................................................................................................................... 174, 175
controller.js ..............................................................................................................59, 60, 150, 151, 153
DHT22 ........................................................................................................... 5, 7, 9, 26, 28, 142, 151, 155
DS1307.................................................................................... 5, 7, 9, 26, 28, 29, 143, 154, 155, 156, 158
Dutch release........................................................................................................................................... 2
Eclipse .................................................................................................................................. 81, 83, 90, 97
English release ..................................................................................................................................... 3, 4
ESP-12E .................. 2, 5, 7, 8, 9, 10, 23, 26, 27, 33, 40, 41, 42, 44, 45, 141, 142, 143, 154, 167, 168, 169
ESP8266 ................................................................................................................................................. 10
gauge ............................................................................................................................................... 57, 58
Gauge .............................................................................................................................................. 57, 58
Graphs ............................................................................................................................................. 8, 194
Hardware ....................................................................................................................... 26, 114, 140, 144
index.html.................................................................................................59, 60, 104, 150, 170, 199, 202
Index.html ........................................................................................................................................... 198
IOT_Project.ino ............................................................................................................................ 155, 164
ipconfig .......................................................................................................................... 139, 167, 168
Java Hello World .................................................................................................................................... 85
Java JDK ................................................................................................................................................. 98
Java MQTT cliënt ................................................................................................................................... 90
JSON........................................................................................................12, 129, 148, 149, 181, 197, 200
Jumper cables ........................................................................................................................................ 31
Jumper Cables ....................................................................................................................................... 26
Level Shifter ................................................................................................................................. 5, 26, 29
196
libeay32.dll ............................................................................................................................................ 75
LIFO ........................................................................................................................................................ 12
MainActivity.java ......................................................................................................................... 122, 177
mijnserver.js .............................................................................................................55, 60, 146, 168, 182
mijnserver2.js .............................................................................................................. 194, 195, 197, 202
Mobile Hotspot........................................................................................................................ 7, 146, 167
MongoDB........................ 5, 6, 7, 9, 25, 123, 127, 128, 129, 131, 132, 146, 148, 182, 194, 195, 197, 202
Mosca ................................................................................................................. 7, 8, 23, 33, 64, 146, 148
Mosquitto ............................................................................................... 6, 23, 33, 64, 68, 71, 75, 89, 168
MQTT ...... 4, 5, 6, 7, 9, 12, 17, 18, 19, 20, 22, 23, 33, 64, 80, 81, 88, 89, 90, 96, 146, 148, 153, 154, 155,
156, 160, 162, 167, 168, 169, 170, 174, 177, 178, 180
MQTT-broker ....................................................................................................................................... 170
Network Time Protocol ................................................................................................................... 12, 24
nl.pool.ntp.org ....................................................................................................................................... 24
NodeJS .......5, 6, 7, 8, 23, 33, 46, 54, 60, 64, 123, 127, 130, 146, 148, 149, 168, 182, 194, 195, 197, 202
NodeMCU .............................................................................................................................................. 10
npm install............................................................................................................................. 53, 127
NTP .................................................................................................................................................. 12, 24
OHA ....................................................................................................................................................... 12
Open Handset Alliance .......................................................................................................................... 12
Paho ..............................................................................................................................23, 33, 88, 89, 177
PAHO Java cliënt .................................................................................................................................... 89
payload .......................................................................................................................................... 95, 149
Ping ........................................................................................................................................................ 20
Pool servers ....................................................................................................................................... 5, 24
pop....................................................................................................................................................... 197
port ............................. 18, 40, 41, 54, 80, 94, 95, 146, 148, 154, 165, 174, 175, 176, 177, 191, 195, 197
power adapter ....................................................................................................................................... 30
PropertiesReader.java ......................................................................................................................... 175
pthreadVC2.dll................................................................................................................................. 71, 76
Publish ............................................................................................................................................. 20, 95
publisher .........................................................................................................................17, 19, 20, 23, 33
Publisher ................................................................................................................................................ 80
push ............................................................................................................................................. 195, 200
QoS ...................................................................................................................................4, 12, 18, 19, 20
QoS0 ...................................................................................................................................................... 19
QoS1 ...................................................................................................................................................... 19
QoS2 ...................................................................................................................................................... 20
RTC............................................................ 5, 7, 9, 12, 26, 28, 29, 143, 154, 155, 156, 158, 159, 160, 162
SDK......................................................................................................................................................... 12
Shoppinglist ....................................................................................................................................... 5, 26
Single Page Applications ........................................................................................................................ 16
smartphone ............................................................................................ 8, 9, 10, 187, 190, 191, 192, 193
Smartphone ................................................................................................................................... 10, 167
Software Development Kit .................................................................................................................... 12
SPA ............................................................................................................................................... 4, 12, 16
SSL/TLS................................................................................................................................................... 12
ssleay32.dll ............................................................................................................................................ 75
Subscribe ....................................................................................................................................... 20, 178
SUBSCRIBE/SUBACK .............................................................................................................................. 20
subscriber ........................................................................................................... 17, 19, 20, 23, 81, 96, 97
197
Subscriber .............................................................................................................................................. 80
TCP/IP .................................................................................................................................................... 12
TestClient.java ....................................................................................................................................... 94
testdb.js ....................................................................................................................................... 130, 132
Topic strings................................................................................................................................. 5, 18, 21
Unacknowledged Service .................................................................................................................. 4, 19
Unsubscribe ........................................................................................................................................... 20
UNSUBSCRIBE/UNSUBACK .................................................................................................................... 20
USB driver ............................................................................................................................................ 187
USB kabel ............................................................................................................................................... 30
USB micro kabel........................................................................................................................... 5, 26, 30
Virtual Router ......................................................................................... 7, 8, 33, 133, 138, 146, 156, 168
Voedingadapter ..................................................................................................................................... 26
voltage divider ................................................................................................................................. 29, 30
Weerstanden ................................................................................................................................... 26, 31
WiFi at home ................................................................................................................................... 7, 167
wild card .......................................................................................................................................... 21, 22
Windows 10 ..................................................................................................................................... 10, 54
198

Iot Book Part1 en 2.0

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Iot Book Part1 en 2.0

Uploaded by

Copyright:

Available Formats

Part 1:

The 35-euro IoT project

Oene Bakker © 2016-2017

Lots of reading and DIY fun!

June 30, 2016

1.2 English release

Lots of reading and DIY fun!

July 31, 2017

*) MQTT Is discussed extensively in this book.

The key goals I have set for this project are:

The author will do his best to answer all the questions.

2.3 Reading guide

The sources can be downloaded from www.diyiot.nl/download

2.4 Version management

Codename Version Date API

AngularJS is a JavaScript framework that is fully developed to meet the

3.2.2 Client and server

An important characteristic of an AngularJS applications is that the application basically runs

MQTT (Message Queuing Telemetry Transport) is a lightweight messaging protocol designed a

A few basic concepts:

3.3.2 The operation of MQTT

MQTT works with sessions that exist of 4 stages:

3.3.2.5 Unacknowledged Service (QoS0)

3.3.2.6 Acknowledged Service (QoS1)

Subscribing to a topic by a subscriber happens by the so-called:

Terminating a subscription to a topic by a subscriber happens by the so-called:

Subscription to a topic is recorded in a so-called topic string. In general, the representation of a

A topic string uses the special separating character /.

There are also three wildcard characters to use:

3.3.3.1 Single character wildcard

The + can be used as single character wildcard.

Example topic strings:

+oom subscribes a client to both of the above topics.

The # can be used as multiple character wildcard.

Example topic strings:

#ment subscribes a client on the topics Statement and Refreshment.

3.3.3.3 Exclusion character wildcard

Example topic strings:

A client cannot subscribe to this topic.

3.3.4 MQTT messages overview

3.3.6 MQTT implementations

This book uses the following MQTT implementations:

The Network Time Protocol (NTP) is a protocol that allows computers to

3.4.2 Pool servers

Almost every country has his own NTP-servers.

This pool contains 4 servers:

3.5 The Cloud

MongoDB is an open source document-oriented database. It belongs to

In this book, MongoDB is used to simulate data storage in the Cloud.

If ordered in Europe the totals costs will be around 50 euros.

4.2.2 ESP-12E Development Kit

Note: Use the NodeMCU version v1.0 or later.

Pin lay-out ESP-12E Development Kit:

4.2.3 DHT22 Sensor

The DHT22 is a digital temperature and humidity sensor.

Alternatively, the slightly less accurate and

4.2.4 DS1307 RTC

Alternatively, the equally expensive DS3231 can be used. The advantage is

4.2.5 Level Shifter

Officially, this is a so-called 3.3V 5V TTL Bi-directional Logic Level

LV = Low Voltage part (3,3 Volt)

This level shifter contains 2 transmit (TX) and

4.2.6 Arduino power adapter

Arduino 9 Volt Power Adapter (1A). Make sure that a 2.1mm