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!?
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.
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.
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
Copyright(c)2012-2014Adobe Systems Incorporated.All rights reserved.
Licensed tothe Apache Software Foundation(ASF)under one
ormore contributor license agreements.See the NOTICE file
distributed with thiswork foradditional information
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.
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).
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
You can find a live demo here and the completed code here.
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
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
You can find a live demo of the web version here. You can find the complete code here. So, let us get started
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
You can get the complete code here. The final installers are around 200MB, hence did not share the installer.
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.