Do it yourself: Build a remote surveillance app using Bluemix, Cloudant, and Raspberry Pi

Nelson Antunes, Felipe Oliveira, and Rafael Oliveira
Published on June 30, 2014

Bluemix is an open-standards, cloud-based platform for building, managing, and running applications of all types (web, mobile, big data, and smart devices, for example).

Run the appGet the code

To implement a home security system, you can create an app that sends pictures taken by a Raspberry Pi device to Cloudant. By using Node.js, you can display the picture on a web page that you can monitor remotely.

What you'll need for your application

• Raspberry Pi device, running Raspbian
• The following Python 3.4.1 libraries and packages installed (get these through Apt-Get or pip):
  • autobahn
  • asyncio
  • cloudant
  • uuid
  • base 64
  • picamera
• Familiarity with Node.js and Express Node.js
• Familiarity with JADE
• Familiarity with HTML and CSS

Basic steps

The home-security app performs the following actions:

1. Using Python, the app opens a web socket on the Raspberry Pi device.
2. The Node.js app running on Bluemix connects to that web socket.
3. The Python HGServerProtocol.onConnect event calls the function that takes the picture.
4. The picture is taken and uploaded to Cloudant.
5. The web socket returns the document ID to Node.js.
6. Node.js connects to Cloudant and uses the document ID to retrieve the image from the database.
7. Node.js displays the image on the web page.

This app uses the following protocols and classes:

• The class HGServerProtocol, which implements the WebSocketServerProtocol on the Raspberry PI and defines what to do when the following events are encountered:
  • onConnect
  • onOpen
  • onMessage
  • onClose
• The class HGCloudantDB, which handles the connection to the Cloudant database and handles the manipulation of the JSON documents (including the calls GET, PUT, POST, and so on)

Step 1. Create non-administrative credentials on Cloudant

For improved security, use an API key and password pair that is specific to the database that you are connecting to, rather than using account login information. To create an API key and password pair for your database, follow these steps.

1. Click Databases and then click the padlock icon next to the database you want to use.

   View image at full size

   
2. In the Permissions window, click Generate API key to create a new user and password pair for this database.

   View image at full size

   
3. Make a note of the password because it is not shown again. On the list in the center of the window, see the new API user. Click the icon in the Writer column to grant write permission.

   View image at full size

   
4. Call the class HGCloudantDB and include the following three arguments:
   • acc: The account username
   • user: The API key
   • passwd: The API password

Step 2. Take the picture and convert the data

1. Code the take_picture function to capture a picture with the picamera library and keep it in the memory. The picture is then converted to a base64 string.
2. The image data (now encoded as base64) is then inserted into a dictionary, which is later interpreted by the Cloudant library as a JSON file. This following code is the image already uploaded on Cloudant. It is JSON code that Cloudant received and stored.

   	_file_JSON_ = {
   	    "_attachments": {
   	        "file.jpg": {
   	            "content_type": "image/jpeg",
   	            "data": string64(_stream_data_)
   	        }
   	    }
   	}

3. The _attachments key shown in the previous code listing causes Cloudant to append the file, the content type, and the base64 string to the _attachment field, so that when you request a GET attachment, the code retrieves the picture.

The last step is to run the Python script and wait for the requests made by the Node.js server.

Step 3. Create the Node.js web application

To create the Node.js web application, use the Node.js boilerplate.

1. Log in to Bluemix and go to the Catalog page.
2. Search and select the Node.js web starter boilerplate.
3. Create the application.
4. When the application is up and running, download the starter.zip file and extract it onto your local machine.
5. Open the file app.js and include the following line of code:

   var jade = require('jade');
   var WebSocketClient = require('websocket').client; // Library used to create the websocket
   var fs = require('fs'); // Library used to save the file in the server
   var uuid = require('node-uuid'); // Library used to create a unique file name in the server

6. Change the line of code app.set('view engine', 'ejs') to this line of code, instead:

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

   These two lines of code notify the server that Jade is used to build the HTML.

7. Create a new index in Jade for your application. Retrieve sample code from the repository or create a new one.
8. Save the file as index.jade in the views directory in your application folder.
9. Note that the <a> tag includes a button class. This button is created in CSS. Save this code in the public/stylesheets directory with the name button.css.
10. To adjust the default style of the button, start with the code in the repository.
11. Push your application to Bluemix and point a browser to the index file of your application. The result looks similar to the following figure.

Step 4. Retrieve the picture from Cloudant

Write the code to retrieve the picture taken from the Raspberry Pi device. The picture is uploaded to Cloudant.

1. Add the code to handle the GET request when the user clicks the Take a picture button. (Without this code, the button takes the user to a page that does not yet exist.) To handle the request the server receives from the web page, add the following code to the app.js file:

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

2. Add code to create a web socket that connects with the Raspberry Pi server.
3. The Raspberry Pi device takes the picture and uploads it to the Cloudant database. The response code and the document ID indicate whether the upload is successful.
4. The sample app includes code that performs the following tasks:
   • Connects to the Cloudant database to get the attachment in the document that is being uploaded by the Raspberry Pi device.
   • Saves the attachment in the web server.
   • Embeds the attachment in an HTML response and sends it to the user.

You can find this code in the sample code you downloaded. Look in the app.js file under the app.get take picture for the function that handles the GET request for the takepicture web page:

app.get('/takepicture', function (req, res){//code});

Conclusion

It is now possible to remotely monitor any location with your Raspberry Pi device.

Downloadable resources

• PDF of this content

Related topics

• Node.js
• Python
• HTML