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

30 June 2014
PDF (403 KB)
Share:
Photo of Nelson Antunes

Nelson Antunes

Software Engineer, IBM Big Data University

Follow me on Twitter
Follow me on G+

Photo of Rafael Oliveira

Rafael Oliveira

Software Engineer, IBM Big Data University

Follow me on Twitter
Follow me on G+

Photo of Felipe Oliveira

Felipe Oliveira

Software Engineer, IBM Big Data University

Follow me on Twitter
Follow me on G+

Sign up for IBM Bluemix
This cloud platform is stocked with free services, runtimes, and infrastructure to help you quickly build and deploy your next mobile or web application.

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).

With a little bit of code, the Bluemix platform, and the camera on a Raspberry Pi, we're able to create a simple home-security system. To do it yourself, follow these steps.

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

 

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.Screen capture of Databases window; select a database
  2. In the Permissions window, click Generate API key to create a new user and password pair for this database.Screen capture of Permissions window; ceate user and password for database
  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. Screen capture of granting write permission to new API user
  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. Select Node.js web starter boilerplate.Screen capture of the Bluemix catalog page; select 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.Screen capture: Take a picture button

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.


RELATED TOPICS:Node.jsPythonHTML

Add a comment

Note: HTML elements are not supported within comments.


1000 characters left

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Big data and analytics, Cloud computing
ArticleID=975539
ArticleTitle=Do it yourself: Build a remote surveillance app using Bluemix, Cloudant, and Raspberry Pi
publish-date=06302014