Raspberry Pi, Node.js and Twilio – Is It Raining Arvind? #IoT

Usually my mom dries the clothes on the terrace and whenever I am at home she keeps asking me to look outside and tell her if it raining or not. Literally every half an hour or every time she hears a swoosh or a woosh from outside.

I was fed up and wanted to eliminate the middle man (me). So I came up with an app. It is called “Is it raining Arvind?” (LOL I know) . All the app does is tell my mom if it is raining outside now. And when it starts raining, the app triggers a buzzer and sends an SMS to my mom. Smart right! And I was off the hook.

So, this is how the app works. It uses the conductive property of the water. There are 2 wires that are connected to the Pi between a GPIO pin and 5v. And when these 2 pins are connected, it triggers a High on GPIO pin. So, we place these 2 wires outside on the terrace inside a bowl. Once the bowl is filled with water because of the rain, the circuit is completed and a High is triggered on the GPIO.

We take advantage of the GPIO high and then trigger the buzzer and send an SMS using Twilio. Smart right!?

Below is a quick demo of the app

Sweet right!

You can find the completed code here.

So, let us get started.

Continue reading

Web Speech API, Phonegap and Phonegap build – A Smart Mouth App

Imagine you are on a vacation to Paris and you do not know how to speak French! Wouldn’t that be a big bummer? What if, there was an App that can speak french on your behalf?

Sounds intriguing right?

I got this idea from Eric Bidelman’s demo on the Web Speech API

Note : The Web Speech API starts @ 30 minutes into the video

So, I wanted to replicate this idea as a hybrid mobile app. But because of the poor webview support for Web Speech API, I was looking around for a polyfill.

I found a polyfill named speech-synthesis which works awesome on browsers, but unfortunately it does not on webviews!

So I forked the repo and patched it with a fix, so it works for webviews as well.

The issue was with the audio tag, which was not working on the device. Tried a couple of hacks but nothing seemed to work. I added a patch so that the polyfill uses Cordova Media API instead of the HTML5 Audio tag and Bam!! it started working.

The patched repo is called speech-synthesis-cordova. And we are going to use the same in this post.

Below is quick peak of the app

Awesome right! Getting one more step closer to my robot butler Jarvis!

You can find the completed code here.

So let us get started.

Prerequisites

If you are new to PhoneGap and have not set up or used it before I would recommend going through the below

If you are new to Web Speech API, you can check out Getting Started with Web Speech API.

Understanding the polyfill

If the Web Speech API is available in your browser, the Web Speech API will be used to convert text to speech. Else, the polyfill will make a request to Google Translate and then play that media.

In our case, we will be playing the response from the Google Translate using Cordova’s Media API.

Setup Project

Make sure you have followed PhoneGap 3 CLI Setup on Mac & Windows and set up Phonegap on your machine.

Next, create a new folder named smartMouthApp. Open a new terminal/prompt here and run

phonegap create smartMouth       

This will create a new Phonegap project. Once the setup is done, we need to CD into the smartMouth folder. And then we will add the Media API plugin. Run

cd smartMouth

phonegap plugin add org.apache.cordova.media

This should take care of plugin dependency.

Next, we need to move the config.xml from the root of smartMouth folder to inside www folder. This is more of a Phonegap build dependency.

Once you move the config.xml into the www folder, open it up in your favorite editor. And update the essential details like

Do notice line 11. We have added the plugin dependency here.

Next, to manage our client side dependency, we will use bower. If you have not installed bower yet, you can do so by running

npm install bower -g

Now CD into the www folder. We will init a new bower.json file. Run

bower init 

and fill it up as

Create another file at the root of www  folder and name it .bowerrc. This file consist of the bower configs. Update .bowerrc file as below

Now, we will add the dependencies to bower.json. Add the below section to the bower.json

and then run

bower install

This will download the required dependencies and save it inside the www/libs folder.

Note : DO NOT forget to remove the unwanted files before submitting the app to Phonegap build.

Now all the dependencies are set up, we will begin the actual app development.

Begin Development

The idea of the App is simple, a user will enter text and select a language. The app will go to Google Translate and then get the translated text. Once this comes back, the polyfill will read it out loud to the user.

First, open www/index.html. We will add references to the downloaded libs. The updated index.html would be

Now, we will update the js/index.js with the app logic. Open it up in your favorite editor and update it as below

Things to notice

Line 39 : Gets triggered when the device is ready.

Line 40,41 : Init the polyfill

Line 43 : When the user clicks on translate button, we check if the text is valid on line 48 and then make an Ajax call to translate.google.com to get the translation for the text.

Line 46 : In case the text is empty we warn the user.

Line 56 : Once the data is received, we eval it, parse it and get the translated text.

Line 58 : The translated text is show on the UI

Line 60fallbackSpeechSynthesisUtterance is called passing in the translated text to be read out loud along with the lang

Line 67 : Welcomes the user when the app launches.

Bam! That is it! Our app is ready!

Test the app

You can test the app on an emulator or by adding android/ios platforms.

phonegap install android

If you are facing issues on the device, I highly recommend using chrome inspect tool.

Phonegap Build

Now that the app is tested, we will issue a Phonegap build to generate installer.

Navigate to Phonegap Build and create a new app.

Screen Shot 2014-10-28 at 4.43.19 pm

You can either upload the www folder (only www folder is required for a phonegap build) or push the www folder to a git repo and then provide the details in the above screen.

Once your code is uploaded/synced successfully, you will see a Ready to Build button. Screen Shot 2014-10-28 at 4.47.36 pm

And once you click it, the build process will start.

Once the build is completed, you should see something like

Screen Shot 2014-10-28 at 4.49.32 pmYou can either QR the image or click on install to download the installer for your device.

This app may not be using much of the Web Speech API, but this can be a start. As more and more updates keep coming in, we can run Web Speech API without any polyfills and achieve the same results.


Thanks for reading! Do comment.
@arvindr21

Raspberry Pi, Camera and Node.js – Live Streaming with Websockets #IoT

A few days ago Bala Kolluru has reached out to me asking if we can control a Raspberry Pi camera module using Web browser, so he can view a live stream from any HTML5 powered device. I was intrigued by this idea and wanted to give it a try.

In this post, we will see how we can implement a system that can “stream” a video from our pi to a browser. The completed system would look like

Pretty sweet right! I am able to see my aquarium from any where and check on my only gold fish. This can be extended to do anything.

For instance, you can hook the camera up pointing at the front door, as soon as someone rings the bell, you can see who is at the door by opening the video stream URL in your mobile/tablet/computer and confirm if you need to wear pants to open the door.

So let us see how we can build such an awesome multi-purpose system.

You can find the complete code for this system here.

Continue reading

Uploading files with Dropzone.js and Express.js

Dropzone.js and Express.js File upload

In this post, we will take a look at how to integrate Dropzone.js with Express.js and save files to the server in easy steps. We will configure our app to show a progress bar, load previously saved files and delete files (from the server).

The final product would look like

Screen Shot 2014-09-07 at 3.17.10 pmScreen Shot 2014-09-07 at 3.16.40 pm

You can find a demo here and complete code here.

So, let us get started.

Continue reading

Building a Web Based File Browser with jsTree, Angularjs and Expressjs

Building a Web Based File Browser with jsTree, Angularjs and Expressjs

In this post, we are going to build a web based File Browser with Angularjs, Expressjs and jsTree (a super awesome jquery tree plugin). We will be using a jsTree directive named jsTree-directive written by me to leverage jsTree (jQuery Plugin) inside an Angularjs application. (You can find the complete documentation of the directive here.)

The main purpose of the file browser app is to show a tree view of a certain directory on a web page. And when the user clicks on a file, we will show the contents of the file. A simple application to showcase the power of jstree directive and also jsTree and Expressjs integration.

The final product will look like

Screen Shot 2014-08-27 at 7.15.45 am Screen Shot 2014-08-27 at 7.16.25 am Screen Shot 2014-08-27 at 7.17.06 am

You can find a live demo here and the completed code here.

So, Let us get started. Continue reading

node-webkit and Firebase – Simple and Social Authentication

node-webkit and Firebase – Simple and Social Authentication

In this post, we will take a look at the Integration between Firebase Simple Authentication and node-webkit. We are going to use slush generators to scaffold basic apps for us. Then we will create and configure a Firebase account to manage Simple Authentication i.e. Email and Password and Social Authentication using Twitter, Google and Facebook services.

The final product would look like

Screen Shot 2014-08-15 at 6.20.04 pm Screen Shot 2014-08-15 at 6.20.25 pm Screen Shot 2014-08-15 at 6.21.04 pm

We are going to implement the same using pure Javascript as well as Angularjs.  You can find the completed code here.

So, let us get started.

Continue reading

Node webkit and Angularjs – A MovieStub App

Node webkit and Angularjs – MovieStub App

In this post, we will take a look at building Node webkit based desktop app using Angular js. By the end of this post, we are going to build a Movie Booking desktop application, where a user can see a list of movies and book tickets as per availability.

The final product would look like

Screen Shot 2014-08-11 at 8.25.26 am Screen Shot 2014-08-11 at 8.25.48 am Screen Shot 2014-08-11 at 8.26.04 amYou can find a live demo of the web version here. You can find the complete code here.  So, let us get started

Continue reading

Node Webkit powered Dashboard application

Node Webkit Powered Dashboard app

In this post, we will be building a full fledged desktop application using node webkit and web technologies. We are going to build a dashboard app called myDashboard. The app will show the Weather report, Google Map, Flickr images and a Calendar. The final product would look like

Screen Shot 2014-07-20 at 3.47.12 pmScreen Shot 2014-07-20 at 3.46.14 pmScreen Shot 2014-07-20 at 3.48.13 pmScreen Shot 2014-07-20 at 3.48.33 pmScreen Shot 2014-07-20 at 3.47.55 pmYou can get the complete code here. The final installers are around 200MB, hence did not share the installer.

So, let us see how we can build this app.

Contents

Continue reading

Custom build jQuery

Did you know that you can generate your custom build of jQuery? I did a few days ago and I am totally digging it.

The final jQuery file which you download from the website consists of the following modules

  • ajax
  • css
  • deprecated
  • dimensions
  • effects
  • event
  • offset
  • wrap
  • core/ready
  • deferred
  • exports/global
  • exports/amd
  • sizzle

There would be projects, where you are not using all the modules. But, you are including the entire jQuery source file, which does not really justify the 248kb un-minified or 84kb minified download.

Screen Shot 2014-06-08 at 6.41.30 pmSo, the folks at jQuery made things easy for us, they provided a build script where we can specify the modules we do not want to use and a custom jQuery source will be generated for us.

Sounds simple and easy right? Let us give that a try.

Continue reading

Meteor Js – Build Apps Lightning Fast

Meteor Js tutorial

In this post, we will see how we can leverage the power of Meteor js to build top quality apps at lightning pace. We will take a quick look at how the framework works and how we can leverage it to build apps easily.

By the end of this post, we will be building 2 apps. A Single Page Chat Application (SPA)  only with Meteor js to get a feel of Meteor & a Multi Page Application (MPA) named Events Feed, leveraging Meteorite js – a package manager for Meteor js & Iron router, that will serve the purpose of a Chat app at live public events.

Chat Application : Live URL

Screen Shot 2014-04-16 at 9.40.30 am

Events Feed: Live URL

Screen Shot 2014-04-16 at 9.42.31 am Screen Shot 2014-04-16 at 9.42.41 am Screen Shot 2014-04-16 at 9.43.33 am

So lets get started.

Contents

Continue reading