Creating the Interface

We are now going to code the interface that you will use to control all the modules from a central interface.

As in the previous chapter, we will use the very popular Node.js framework to code our server. You can now download it and install it from:

https://nodejs.org/

There will basically be 3 files in this project:

The app.js file, that will contain the code for the server itself The interface.jade file, that will define the interface

The interface.js file, that will make the link between the interface & the server Let’s first see the app.js file. We start by declaring the Express framework:

var express = require('express');

var app = express();

We also set the port to 3000:

var port = 3000;

After that, we set the view engine to Jade, which we will use to code the interface in a very simple way:

app.set('view engine', 'jade');

Then, we define the main route of the interface, which we will use to access the interface of the home automation system:

app.get('/', function(req, res){

res.render('interface');

});

In this project will also use the aREST Node.js module, that will make the link between the server running on your computer and all the modules we created before. This is how to use it in the app:

var rest = require("arest")(app);

Then, we add both devices into the app:

rest.addDevice('http','192.168.1.103');

rest.addDevice('http','192.168.1.104');

Of course, you will need to change these IP addresses depending on the IP addresses of your modules.

Finally, we start the app with:

app.listen(port);

console.log("Listening on port " + port);

Now, let’s see the content of the interface.jade file. This will define the interface and all the components in it.

First, we need to include the Bootstrap CSS framework that we used in previous chapters of this book. We also include jQuery. This is all defined in this piece of code:

head

title Interface

link(rel='stylesheet',

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css") link(rel='stylesheet', href="/css/interface.css")

meta(name='viewport', content='width=device-width, initial-scale=1')

script(src="https://code.jquery.com/jquery-2.1.1.min.js") script(src="/js/ajaxq.js")

script(src="/js/interface.js")

Then, we define the interface itself in the body tag. We basically create two buttons to control the module with the LED (called lamp control here), and then we create two indicators for the temperature & humidity module:

body

.container h1 Dashboard .row.voffset .col-md-4

div Lamp Control .col-md-4

button.btn.btn-block.btn-lg.btn-primary#1 On .col-md-4

button.btn.btn-block.btn-lg.btn-danger#2 Off .row.voffset

.col-md-4

div#temperature Temperature:

.col-md-4

div#humidity Humidity:

Let’s now see the interface.js file, which will make the link between the interface and the server. We first need to set the GPIO pin 5 as an output with the following command:

$.getq('queue', '/lamp_control/mode/5/o');

Then, we create two functions that will handle the clicks on the buttons in the interface:

$("#1").click(function() {

$.getq('queue', '/lamp_control/digital/5/1');

});

$("#2").click(function() {

$.getq('queue', '/lamp_control/digital/5/0');

});

Finally, we define a function to refresh the temperature & humidity readings. We also repeat this function every 10 seconds:

function refresh_dht() {

$.getq('queue', '/sensor/temperature', function(data) {

$('#temperature').html("Temperature: " + data.temperature + " C");

});

$.getq('queue', '/sensor/humidity', function(data) {

$('#humidity').html("Humidity: " + data.humidity + " %");

});

}

refresh_dht();

setInterval(refresh_dht, 10000);

It’s now time to test the project. Get the code from the GitHub repository, modify it with your own parameters, and then upload the code to the board.

Then, go to the folder where the app.js file is located, and type:

sudo npm install arest jade express

Then, launch the app with:

node app.js

After that, go to your favorite browser and type:

http://locahost:3000

You should immediately see the interface of your home automation system:

You can already try pressing the button, it should switch the LED on your ESP8266 project on & off. Of course, you can use the exact same interface to control a lamp that would be connected to it for example.

Note that this interface is also fully responsive, which means you can access it from your phone or tablet. This is the result on my phone:

8.5 How to Go Further

Let’s summarize what we achieved in this project. We created modules based on the ESP8266 chip, using a REST API that allows us to control these modules via WiFi. Then, we integrated this module into an home automation server running on a computer, so we can control all modules remotely from a single place.

There are many things you can do to improve this project. The first thing to do is to

integrate more modules into the project. For example, you could perfectly adapt the alarm system project into this interface.

You can also integrate web services into the same interface, for example to display the outside temperature or barometric pressure, just as we did in Chapter 5.

Chapter 9 Conclusion

If you followed all the projects of this book, congratulations, you now know how to create DIY home automations systems based on the ESP8266 WiFi chip! You learned how to create your own WiFi home automation devices, for example a remote lamp controller that you can use with your mobile phone.

Right now, I recommend that you go again through all the projects of the book, so you can really get all the knowledge that is contained in the book. Then, just experiment! There are virtually no limits on what you can create using the ESP8266 WiFi chip. You can create great home automation systems by using this $5 WiFi chip to automate every aspects oh your home. Have fun!

Chapter 10 Resources

The following is a list of the best ressources concerning open-source home automation with the ESP8266 chip. I organized this chapter in different categories so it is easier for you to find the information you need.