Monitoring Your Home via WiFi

We are now going to write an application based on Node.js to remotely track the measurements from the sensor and the camera. There are basically three main parts in the code: (1) the server code in Javascript, (2) the HTML page which will contain the interface, and (3) a client-side Javascript file which will link the two.

Let’s look at the server-side Javascript code first. It starts by including the required Node modules: (1) the node-dht-sensor module to handle the DHT sensor as before and (2) Express to handle HTTP communications like a web server. Below is the code:

Download: file
var sensorLib = require('node-dht-sensor');
var express = require('express');
var app = express();

We also include the views and public directory. The views directory is where we will store the interface, while the public directory is where we will put both the Javascript code and the recorded pictures:

Download: file
app.set('views', __dirname + '/views')
app.set('view engine', 'jade')
app.use(express.static(__dirname + '/public'))

We will create a route for the interface, which will allow us to access the our project:

Download: file
app.get('/interface', function(req, res){
    res.render('interface');
});

We will include the Raspberry Pi version of the aREST API (http://arest.io/) for us to control the Raspberry Pi via HTTP:

Download: file
var piREST = require('pi-arest')(app);

We also give an ID and a name to your Pi:

Download: file
piREST.set_id('1');
piREST.set_name('my_RPi');

Finally, we call the app.listen() function to start our application:

Download: file
var server = app.listen(3000, function() {
    console.log('Listening on port %d', server.address().port);
});

The interface itself is written in Jade (http://jade-lang.com/). This will give us an HTML file as a result. The file is stored in the view directory inside the application. We add some title, some containers for the sensor measurements, and a field for the picture which will be recorded by the camera:

Download: file
doctype
html
  head
    title Raspberry Pi Interface
    script(src="/js/jquery-2.0.3.min.js")
    script(src="/js/interface.js")
    link(rel='stylesheet', href='/css/style.css')
  body
    header
      div.mainContainer
        h1 Raspberry Pi Interface
        h2 Sensor Readings
        p Temperature: 
          span#temperature 0
          span  C
        p Humidity: 
          span#humidity 0
          span  %
 
        h2 Camera
        img#camera(src='')

As you can see on the code, we will include a Javascript file and a jQuery inside the Jade template. The script file will call the Raspberry Pi aREST API every 2000 ms to refresh the measurements of the DHT11 sensor:

Download: file
setInterval(function() {
 
  // Update temperature
  $.get("/temperature", function(data) {
    $("#temperature").html(data.temperature);
  });
 
  // Update humidity
  $.get("/humidity", function(data) {
    $("#humidity").html(data.humidity);
  });
  
}, 2000);

And every 10 seconds, the camera will take a picture:

Download: file
setInterval(function() {
 
  // Take picture
  $.get("/camera/snapshot");
  
}, 10000);

This picture inside the interface will refresh every second:

Download: file
setInterval(function() {
 
  // Reload picture
  d = new Date();
  $("#camera").attr("src","pictures/image.jpg?" + d.getTime());
  
}, 1000);

It is now time to test the interface. Go to the pi_node folder and type:

sudo npm install node-dht-sensor express pi-arest

Wait a bit; it can take a while.

Then, type:

sudo node pi_node.js

Finally, go to your favorite web browser and type:

http://raspberrypi.local:3000/interface

On your Pi, you can just type:

http://localhost:3000/interface

You should see the interface of the project displaying the following:

Be patient in waiting for the measurements and the picture to appear on the display. Remember, there is a 2-second delay for the sensor measurements and a 10-second delay for the picture.

Also, note that the Node.js module for the camera module is not perfect. In my system, I had a delay between the moment the picture was taken and the moment it appeared on the display.

Congratulations, you can now remotely access measurements from your Raspberry Pi and the camera!

This guide was first published on Feb 12, 2015. It was last updated on Feb 12, 2015. This page (Monitoring Your Home via WiFi) was last updated on May 26, 2019.