Varun's ScratchPad

VBot - Arduino based Quadbot

2013-01-05T00:59:00.001+05:30

For a Software engineer who is busy writing code all through the day, working on real world objects is really a cool thing to do. Its fun to control the world around you with the code you write. I have been playing with Arduino for quite sometime and have built few hardware hacks based on that. Check out my hardware hacks here. The latest one in that series is VBot. VBot is a four legged robot which can walk, stretch and even dance. Video. There are different ways in which the bot can be controlled. The bot can receive IR signals and can be controlled using an IR remote. I have also built an Android app for controlling the bot. I have ported the firmware to JavaScript and there is a REPL interface to control to the bot from Node.js app. Fork the project on github. This project has increased my interests on hardware hacks significantly. Hoping to do more in the coming months.

-- Varun

Arduino tweet notifier built with Johnny-Five!

2012-09-24T01:41:00.000+05:30

If you have been following this blog, or following me(@varunkumar) on Twitter, by now you would have found out that I am a big fan of JavaScript. JavaScript is everywhere. You can use it to write web servers. You can run it on your mobile devices. You can even use it as a build tool. And, of course, you can use it in its original home, the browser. But, what about running it on embedded devices? Can we control robots with JavaScript? Yes, developers have been successful in controlling robots with JavaScript. Read this interesting article on JavaScript robotics: "The Rise of JS Robotics". In the rest of this post, I will talk about Johnny-Five, a cool JavaScript framework for interfacing with Arduino boards. I will also show how easy it is to build a Tweet notifier (LCD display connected to an Arduino board displaying the count of mentions from Twitter).

What is Johnny-Five?
Johnny-Five is a JavaScript Arduino programming framework written by the awesome JavaScript developer Rick Waldron (@rwaldron). The framework which can be installed as a node module uses Firmata protocol to communicate with Arduino boards. Firmata is a generic protocol for communicating with microcontrollers from software on a host machine. Johnny-Five is a JavaScript implementation of the Firmata protocol which provides easy-to-use modules for interfacing with Arduino boards. Check it out here. Video

Getting started

Preparing your Arduino board. The first thing you need to do is to flash your Arduino board with Firmata. You can do it from Arduino IDE (File > Examples > Firmata > StandardFirmata). I tried it out on a Mega ADK board. Now, one end of your communication is ready. Software on the host machine will communicate this board using Firmata protocol.
Installing Johnny-Five. As mentioned above, Johnny-Five is a node module and can be installed using npm (npm install johnny-five). johnny-five depends on node modules firmata and serialport. Note: You might have to build serialport for your environment using "node-gyp configure build".
Writing Hello, world! In the context of Arduino, writing a hello world is nothing but glowing an LED. You have to write a Node.js JavaScript file and include johnny-five module.

Arduino Tweet notifier
This is just a fun hack I have built with Johnny-Five (This is just for demo. You can do much more with JF). I have connected a 16x2 LCD display to an Arduino Mega ADK board (pins 8-13) and was writing data on it using Johnny-Five. Then, I have employed nTwitter module to get the stream of mentions from twitter. Whenever someone mentions @varunkumar on twitter, LCD will display a notification for the same. Check out the code here.

References:
Johnny-Five. Link.
Arduino & LCD getting started. Link.

-- Varun

Animated doodle in CSS!

2012-09-15T22:40:00.000+05:30

If you are following the developments on web browsers, you must be knowing the kind of changes CSS is going through. Lots of new features are getting added to CSS3 and you can do lots of stuffs with CSS. Here is a short post about an animated doodle which I had built purely using CSS3. I built this animated logo few months ago for a hackathon we had at our workplace. The speciality of this logo is that it is built only using CSS3 - even the circles and rounded corners are built with CSS and no images are used. You can verify the same with the help of any web inspectors. You can hover over the little guy and see him flip his ears, eyes, teeth, arms and legs. I have employed CSS transitions, CSS transforms and others to get the work done. The implementation is complex and not optimal. But, it is built just to demonstrate the power of CSS. Browser support: All latest browsers. The CSS used in this experiment can be found here. If you are not able to view the logo inline, check it out here. Have fun with CSS!! :)

-- Varun

[How to] Install Linux on Android?

2012-09-15T16:57:00.001+05:30

As both the Linux and Android OS are open sourced, developers have enjoyed success in porting Linux on to Android and vice versa. Lots of efforts are still going on in this space. Canonical has been busy working on Ubuntu on Android which enables Android devices to run Ubuntu. “Linux on Android” is another awesome project which helps you to install and run a wide range of Linux distros on your Android device. An Android app has been released as part of this project which will guide you through the installation process. I tried it out myself on my Galaxy S2 and the process was very straight forward. Using this app, you will be able to install any distro as this just ‘chroot’ into the Linux image. This technique will run a virtual Linux on top of the Android OS without disturbing your Android OS. You could still use other apps installed on your Android device. We could replace Android with Linux completely but then you wouldn’t be able to use your Android phone as a phone anymore.

Pre-requisites:

Android 2.1 or higher. You need to have at least 3.5 GB of free space on your SD card. You can run Linux from internal SD cards as well.
Root access. You must have an Android device with Root access.
Support for Loop devices. Your Android OS must support loop devices. The stock image on Galaxy S2 didn’t have the support for loop devices. I have flashed the MIUI ROM with a kernel which supports loop devices.

Steps to install Linux on Android

Download and install “Complete Linux Installer” app from Play store. Also, install VNC Viewer and Terminal App from Play store.
Launch the application “Complete Linux Installer”. This will guide you through the download links for different Linux distros.
Download the image and place it on your sdcard. By default, the launcher looks for the image directly on the sdcard (for ex: /sdcard/ubuntu). This can be configured from the launch menu. You can create a new launch configuration by specifying the image location and a name to it.
Select the configuration which you want to launch. This will open up the Terminal app with the chosen Linux image (say Ubuntu) mounted. If everything goes well, you should see this message “root@localhost:/#” on the terminal. This terminal will act like a Ubuntu command line. You can connect to the GUI from any of your favorite VNC viewer app (either on the same device or other devices).

You will be prompted for the root password, screen size and other options while mounting the Linux image.
If your kernel doesn’t support loop devices, you will get appropriate messages in this phase.
If you don’t have sdcard on your device, you might get some mount errors. You can ignore the errors (close the terminal) and re-connect to the mounted device again.

You are done. I have tried both LXDE and Unity desktops on S2 and both worked reasonably well.

More information about “Linux on Android” can be found here.

-- Varun

JS Foo Bangalore 2012

2012-08-22T23:18:00.001+05:30

HTML5 makes the web so powerful that we can do almost everything on the web. Till few years back, Flash was commonly used to build rich applications. Things have changed a lot with HTML5. Browsers are also becoming powerful day-by-day. Many desktop developers have already started moving towards web based application development. JavaScript is growing to be the most important programming language. In fact, the famous Khan Academy has chosen JavaScript as the first programming language to teach. As a developer, how do we keep track of the latest happenings? Though there are many online forums (like HTML5Rocks) to help us, the best way to learn is to hang out with fellow developers and the experts from the field. JS Foo is a tech event, organized by the good guys at HasGeek, which facilitates the interaction between JavaScript developers.

About JS Foo

JS Foo is India’s only conference on JavaScript, with editions in Bangalore, Pune and Chennai. It brings together JavaScript developers from different parts of the country, to share their learnings and help others transition to JavaScript. The highlight of the conference is its transparent system of public submission and voting on sessions. Participants have the control over the sessions to be part of the event. Yes, you can go to http://funnel.hasgeek.com/jsfoo/ to suggest a new session or vote for a session which you like. The schedule for the event will be prepared based on that.

About HasGeek

HasGeek is India’s first and only professional, community-focused technology event organizer. It was founded by Kiran (popularly known as @jackerhack) in 2010. HasGeek creates discussion space for geeks to collaborate. HasGeek has organized many successful events in the past like DocType HTML5, JS Foo, AndroidCamp, DroidCon, Meta Refresh, etc. I have personally attended some of their past events and really enjoyed them. Believe me, these guys are really awesome. :)

JS Foo Bangalore 2012

The fourth edition of JS Foo is happening in Bangalore on 19th -20th of October 2012. The theme for this edition is JavaScript everywhere. People are pushing the limits of what can be done with JavaScript on the server, in embedded devices, and in its original home, the browser. You can share your experience working with JavaScript and you can listen to the best practices in code and working style from the experts.

Date: Oct 19-20, 2012
Venue: NIMHANS Convention Centre, Dairy Circle, Bangalore
Pre-requisite: Basics of web development. You don’t have to be an expert in JavaScript.
Registration: http://jsfoo-2012.doattend.com/
Site: http://jsfoo.in (Site is still showing information about previous edition).

My Experience

I have attended the third edition of JS Foo in Chennai. It was an awesome experience. Learnt a lot of new stuffs. Check out my blog post to know about my experience at JS Foo Chennai 2012. You can also find the videos from previous editions here. I will be attending the event and might even give a talk on JS tools (http://funnel.hasgeek.com/jsfoo/). Hope to see you all at the event.

-- Varun

Binary data processing in JavaScript

2012-07-15T19:09:00.001+05:30

Few days ago, I came across an interesting post about Speaker.js on Hacker News. Speaker.js is a client side library which enables text-to-speech using only JavaScript and HTML. The library doesn’t do any server side calls to do the conversion. This made me thinking about the techniques used in JavaScript to process large amount of binary data. Old school JavaScript doesn’t provide any support for storing binary data. Traditionally normal arrays were used to simulate the behavior of binary arrays by storing a number in the range of 0 to 255 for each element. Obviously, the above technique will not be suitable for applications that require processing of large amount of data. Then, with the introduction of HTML canvas element, developers started using Canvas’ ‘ImageData’ to hold any binary data needed for their applications. Canvas ImageData is still one of the most widely used techniques to deal with binary data. If you are following the developments on HTML5 standardization and web browsers, you must be aware of “Typed Arrays”. JavaScript “Typed Arrays” provides a mechanism for accessing raw binary data much more efficiently. Rest of this post will focus on “Typed Arrays” and performance metrics of all these three techniques.

Typed Arrays

JavaScript “Typed Arrays” provide a mechanism for accessing raw binary data much more efficiently. The specification defines two types: buffer – a generic fixed length buffer type, view - accessor types that allow access to the data stored within the buffer.

Buffer (implemented by ArrayBuffer). The ArrayBuffer is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an ArrayBuffer; instead, you can create an ArrayBufferView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer. The following line of code will create a chunk of memory with 16 bytes pre-initialized to 0. Note: You will not be able to access data using the variable buffer.

var buffer = new ArrayBuffer(16);

View (implemented by ArrayBufferView and its subclasses). A view provides a context—that is, a data type, starting offset, and number of elements—that turns the data into an actual typed array. Views are implemented by the ArrayBufferView class and its subclasses. Float32Array, Float64Array, Int8Array, Int16Array, Int32Array, Uint8Array, Uint16Array, Uint32Array are some of the available view classes. There is also a generic view DataView available to read and write data to ArrayBuffer. In the following lines of code, we create a view that treats the data in the buffer as an array of 32-bit signed integers. We can access the data in the buffer just like a normal array. It is possible to create multiple views on the same buffer. By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, we can interact with complex data structures (like data read from a structured file, WebGL, etc).

var int32View = new Int32Array(buffer);
for (var i=0; i<int32View.length; i++) {
  int32View[i] = i*2;
}

// 16-bit singed integer view on the same buffer. This is allowed.
var int16View = new Int16Array(buffer);
for (var i=0; i<int16View.length; i++) {
  console.log("Entry " + i + ": " + int16View[i]);
}

Browser Support

Performance Tests

Kanaka has written some test cases to test the performance of these three techniques: Normal Arrays, ImageData and Typed Arrays. The test cases are hosted as part of his noVNC project on github. I ran the same test cases on my Macbook Pro (2 GHz Intel Quad-core i7, 4 GB 1333 MHz DDR3) and it turns out that performance of Chrome is much better than other browsers. In Chrome, ‘Typed Arrays’ proves to be the most efficient technique for manipulating binary data. There are some drastic changes in these metrics when compared to the tests run by Kanaka in April 2011. Test results after averaging out 50 test iterations can be found here.

The Four Tests:

Create - For each test iteration, an array is created and then initialized to zero and this is repeated 2000 times.
Random read - For each test iteration, 5 million reads are issued to pseudo-random locations in an array.
Sequential read - For each test iteration, 5 million reads are issued sequentially to an array. The reads loop around to the beginning of the array when they reach the end of the array.
Sequential write - For each test iteration, 5 million updates are made sequentially to an array. The writes loop around to the beginning of the array when they reach the end of the array.

Chrome is the only browser where “Typed Arrays” seems to be performing well. If you want to use a standard technique, then you can go with ‘Typed Arrays’. Otherwise, you will have to wait for other browser vendors to improve the performance of “Typed Arrays”. More information about “Typed Arrays” can be found here.

Update: I have re-ran the test cases after making the changes pointed out by mraleph (here)

Explicitly specifying the arraysize while creating normal arrays
Instead of creating a single test_something function, created separate functions for each array type. It turns out that performance of other browsers has improved significantly after this change. Interesting inference from this result is that the JS engines in Firefox, Safari and Opera do not seem to handle Polymorphism well.

-- Varun

Postel’s law and modern day browsers

2012-07-07T22:40:00.001+05:30

Today while I was skimming through the feeds from Hacker news, I came across this interesting post -- “A file that’s both an acceptable HTML page and a JPEG image”. Apparently this url (http://lcamtuf.coredump.cx/squirrel/) can be viewed as a HTML document when opened on a browser and the same can be used as a source to the image element. Yes, it does work. As mentioned on the above page, there is no server side trick involved in this. After inspecting the page for sometime and trying out different tools in my arsenal, I have figured that this is related to Postel’s Iaw.

What is Postel’s law?

Postel’s law or the robustness principle is a general design guideline for software: Be conservative in what you do, be liberal in what you accept from others (often reworded as "Be conservative in what you send, liberal in what you accept"). (Definition sourced from Wikipedia.) Modern day browsers follow this principle to a greater extent. Let me explain this with an example. Create an empty file and name it as “something.html”. Just add a line of text without any HTML tags. The browsers will render the content even though there are no HTML tags available. Now add html, head and body tags and leave them open without closing. Browsers render the pages even if they are not well formed. In other words, browsers are liberal enough in accepting the contents to render.

The Squirrel page

Now, lets use Postel’s law to understand how the Squirrel page works. When we request the url as a HTML document or as an image, the same content is being delivered to the browser (check the screenshot of Chrome Network panel). The content sent from the server is actually an image with HTML contents embedded on it. The browser interprets the content depending on the context in which it is used.

Open the page on a browser to view the HTML contents. If you view the page source, you will find some junk characters in the source. You will find a set of junk characters at the beginning of the file and some more contents at the end of file within HTML comments.
The initial set of contents are outside any HTML tag. This corresponds to the headers of the image file and has to be outside of HTML tag for the parsers to pick them as image. However, when we render the url as a HTML document, browser will try to render those junk characters even though they are outside any HTML tag. Hence, they are hidden explicitly on the HTML page with the help of CSS. body { visibility: hidden; }.
The actual image contents are placed inside a HTML comment block. Browsers will safely ignore any comments while rendering the page where as when we use it as an image the parsers will understand the contents and parse the image data.

Since the browsers are liberal enough to render the content based on the context, the same url can be used as a HTML document and as an image. Try saving the source and open in your favorite text editor, you will find junk characters. Rename the save file as jpeg, and open the file in browser, the contents will be rendered as image and not HTML.

Update: Just read through the comments on the Hacker news page. Looks like the same technique is used to compress JS files inside PNG files for JS1K contest.

-- Varun

[Screenshots] Mozilla’s Mobile OS, Boot2Gecko (B2G)

2012-03-18T18:59:00.001+05:30

Mozilla has been working on its own Mobile OS code named “Boot to Gecko”(B2G) for quite sometime. B2G is a browser based operating system built using the standard web technology stack. B2G is expected to run on low end smart phones as well. I am impressed with the idea of using standard web technologies for mobile app development (on the similar lines of Windows 8 HTML5 apps). Mozilla claims that they are working on web APIs to expose device capabilities such as telephony and other media devices. The project is still in its early stages. B2G was show running on Samsung Galaxy S2 at the Mobile World Congress last month. If you are interested in contributing to this project, check out the code from here. Neat instructions are provided to build the code and an Android based emulator is also included for testing. B2G uses the same low level building blocks (Linux kernel, libusb, etc) which Android uses. I played around with it last night and here are some screenshots of B2G. The user interface was a bit on the slower side in the emulator.

-- Varun

Insight into Google’s Input / Output machine

2012-03-14T02:24:00.001+05:30

Google has just updated its Google I/O site with details about the 2012 edition of the event. Registration for the event opens on March 27th (If I remember correctly, the tickets for Google I/O 2011 were sold out in less than an hour. Good luck for those looking forward for the tickets.). Like the 2011 edition, this year also Google has added some cool stuff on its site. Google I/O 2011 site had an awesome countdown timer (Chrome experiment) which was counting down to start of the event. The brilliant designers at Google have taken it a step further and have built a game called “Input/Output” to play-with till the event. This game is again a Chrome experiment and I am really impressed with it. I played with it for couple of hours and this post is an (unofficial) insight into some of the technologies used in this experiment.

About “Input / Output machine”

The objective of the game is simple: use the tools and machine parts to create a Rube Goldberg-inspired machine that moves a particle from the <input> to the </output>. It looks simple but, believe me, it is very addictive. Its the New Angry Birds!! Once you get going with the machine, you can just unleash your creativity and build some creative ones. Also, Google has promised that some of your creations could be featured at Google I/O 2012. Build your machine and share it on Google+ using #io12.

Technologies used

The JavaScript code which is the backbone of this whole experiment is not obfuscated, fortunately. That made it easier for me to dig through what is going behind the scene. The whole experiment seems to be heavily dependent on Canvas rendering. HTML5 canvas element is very powerful but it is very difficult to work with when it comes to handling user interactions. Easel.js is a neat solution to this problem – It allows you to retain a full hierarchy of display objects rendered on the canvas and enable interaction on them. (If you have seen the cool charts on Google Zeitgest 2011 site, that was also built using Easel.js). Every tool on the toolbox is rendered as a display object onto the board and then the necessary event handlers are added to facilitate the positioning of the tool on the board.

For calculating the motion of the particle and transforming the particle, JavaScript library “Slyvester – Vector and Matrix Math for JavaScript” has been used. Another interesting JavaScript library used is “Stativus : StateCharts” which is a micro framework for maintaining state charts of an application. Apart from these, there are few utility libraries like “Underscore.js”, “jQuery Easing”, etc being used. All the aforementioned libraries are packaged inside a single JavaScript file named as “experiment.js”

JavaScript Libraries used

Easel.js – Library to work with HTML5 canvas. It provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
Slyvester - Vector and Matrix Math for JavaScript. It includes classes for modeling vectors and matrices in any number of dimensions, and for modeling infinite lines and planes in 3-dimensional space. It lets you write object-oriented easy-to-read code that mirrors the math it represents.
Stativus – Library for maintaining the state charts of an application. Statecharts are a great way to organize your web application and make it more robust and increase code reuse.
Underscore.js – Utility library that provides a lot of the functional programming support.
jQuery Easing Plugin – jQuery plugin to give advanced easing options.

Quick hack to unlock different particles

When you click on the <input>, you get options to position the <input> and you will also see another option to change the particle (as shown in the screenshot below). By default, only the first particle is enabled. As you build the machine and progress on the game (not really sure about the trigger – Chrome particle gets active on remixing some existing machine), you will get few additional particles – Anti-gravity Plus particle, Androidify particle, Chrome fast particle. Here is a quick hack to unlock all those particles by default:

Information about the unlocked particles are stored in a variable called USER_METADATA.
Open JavaScript Console (Cmd + Shift + J) on your Google Chrome.
Enter the following lines: USER_METADATA.hasPlusParticle = true;USER_METADATA.hasAndroidParticle = true;USER_METADATA.hasChromeParticle = true;
Yay! You are all set. Now, you can try out all the available particles.

Well done, Google! It is very addictive and I am going to spend more days on it. Please let me know if there is anything incorrect in this post.

Update: Thomas Reynolds, the lead developer of this project commented on this post with some corrections. “We actually only use Ease.js, which is the Penner Easing Equations from inside Easel. Our canvas renderer is 100% custom. Regarding the particle hack, so glad you found that! There are a ton of "developer" hacks, mostly global variable, just waiting to be tweaked.”

-- Varun

JSFoo Chennai 2012!

2012-02-19T23:12:00.001+05:30

JSFoo is a one day conference on building rich web applications in JavaScript. Having tasted success on its previous editions in Bangalore and Pune, HasGeek organized the Chennai edition of JSFoo on 18-Feb-2012. The turn around for the event was quite good. I had reached the event at around 8:30 AM and was catching up with some of the old friends. The day started with an introduction to HasGeek and what followed was a series of interesting talks in two parallel tracks. Overall it was a good learning experience. The videos of the event will be out in the web shortly. Attaching the screenshots of mind map I have created during the event. Click on the images to enlarge them.

Cross Platform Mobile apps using JQuery Mobile and RhoMobile

The first session I attended was on cross platform mobile app development by Balaji Loganathan. He talked about some of the popular web frameworks to build mobile web app. He briefly compared the mobile web app and the native app and explained the need for cross platform mobile app development API. Then, he talked about RhoMobile and how handy it is for building enterprise mobile applications.

Production ready apps with Flatiron

Flatiron is a framework for building applications using Node.js. Flatiron is sponsored by Nodejitsu and the code is available on github. I have built few apps in Node.js before but have never heard about it. The session was delivered by Pavan Kumar Sunkara (@pksunkara), a student from IIT Madras who is currently doing his internship with Nodejitsu. Flatiron seems to include some interesting components and it is the responsibility of the app developer to pick and choose what he wants. It is still in its early stages – just two months into development but seems to be promising. All the best to the team.

JavaScript and the compatible Web

The session on the compatible web was delivered by Rajesh (@avranju) from Microsoft. Though the session was meant to be a sponsor session (Microsoft was one of the sponsors for the day), Rajesh didn’t focus much about Microsoft products. He talked about the challenges in building web applications because of the availability of wide range of browsers and OS. He talked about Modernizr and other frameworks / techniques to overcome these compatibility challenges. Nice and interesting session.

Data visualisation in JavaScript

The session was delivered by Anand S (@sanand0), chief data scientist at Gramener. He talked about the need for visualization. He said “Don’t take too much into average. Try to plot all the points and visualize them”. For visualizing data, one need to be creative and tools are just helpers in the process. You can build rich visualizations with simple divs in HTML without any complex libraries / tools. He demonstrated some of the cool visualizations he has build at Gramener. His talk was very crisp and clear. One of my favorite sessions for the day.

Building visualisations that rock using Web Standards

The second session for the day on data visualization was delivered by Harish (@hsivaram), a web developer evangelist at Adobe. This was the first session right after the lunch break but still Harish managed to keep us awake. Great job bro! Harish showed us how passionate he is about the data visualization. The session was more like a Show-n-tell where he built a replica of the cool visualization on Google Zeitgeist 2011 site. He used Easel.js and Tween.js to build the visualization in less than 40 mins.

Tracking Memory Leaks in Client Side JavaScript Application

This is a session by another sponsor of the event - Directi. Vishnu (@pathsny) from Directi delivered this much useful session. He talked about how to identify memory leaks in JavaScript and some of the good practices to avoid them. His session was very informative and I would rate this as the best one for the day. I have learnt a lot from this session. Looking forward to the video of this session and the demo app he has built.

JavaScript is mischievous. Handle 3rd party content with care!

This interesting session was delivered by Krishna Chaitanya T (@novogeek), a Microsoft MVP for IE. He talked about mashups and the things we need to consider while including third party scripts in our web application. He briefed on the possible attacks because of the usage of third party scripts via script injection or frames. The demo was also quite interesting. This is another session for which I would give the highest ratings.

Ajax is history - Build real time apps in JavaScript

The last session of the day was on building real time web application. It was delivered by Srirangan S. He talked about how the web applications have evolved in the last two decades. Then, he demonstrated how he built his site review19 using Node.js and Socket.io.

-- Varun

[How to] Use error console in Native UI for Firefox on Android

2011-12-27T14:58:00.001+05:30

Developers use different techniques for debugging their web applications. Though there are lots of new techniques coming up in this space, one technique which is still widely used is console logging. Every browser (including the mobile browsers) supports this feature in some capacity. I have been using Firefox on my Nexus One and it has an in-built error console which can be enabled from about:config. However, with the new native UI for Firefox on Android, this option does not seem to be available. Read through this post to find out how you can use error console in the native UI.

Error Console in Firefox Native UI

Firefox Native UI writes all the console messages to Android system log which can be read via logcat which comes along with the Android SDK.

Android SDK. Download and install the latest Android SDK from here. This comes up with all the tools needed for development and testing of your application. Once the SDK is installed, go to the location on which the SDK is installed. Run ‘adb logcat’ - this will show the complete log from Android system. To view Firefox specific log messages, do a grep: ‘adb logcat | grep “Gecko”’. To view Firefox console messages alone, do a grep: ‘adb logcat | grep “GeckoConsole”’.
If you don't want to install Android SDK, you can use apps like aLogCat (Android app for viewing the logs). The app provides an option for filtering the logs and also comes with lots of other accessibility options.

-- Varun

Arduino based game controller

2011-11-27T01:10:00.001+05:30

Being the big fan of technology that I am, I always wanted to try out the latest things happening on the technology world. Some of the buzz words being talked about in the technology world are HTML5 and mobile development. After having fun writing games during my college days, I was interested in building a HTML5 based game. Then, I came across this HTML5 based implementation of classic Helicopter game. In the mean time, I was also playing around with Android ADK and Arduino boards. Finally, made up my mind to hack something cool connecting all these technologies – HTML5, mobile and USB accessories. And, here is the result of the experiment - “Arduino based game controller”. In a nutshell, it’s a game controller which can be connected to an Android phone using which we can play HTML5 games on the browser. The heart of the hack was built over a weekend and source code of the same can be found here. Check out the video demo of the hack at the end of this post.

What is it?

Arduino based game controller is a Joystick / game controller which can be connected to an Android phone via USB. Using the controller, we can play games on the browser. An android driver app has been built which reads the data from the game controller (using Android ADK) and routes it to the browser over web sockets. The game has been hosted here (The multi-player mode might not work properly as the hosting site does not support web sockets). More detailed information can be found here.

The hack consists of three core modules:

1. Game module. HTML5 based Helicopter game originally written by Dale Harvey. The game uses HTML5 canvas for rendering the game elements. I have forked his code and have built the networking layer of the game. I have integrated the game with Node.js and Socket.io to support multi-user mode. In order to facilitate seamless communication between the controller and the game module, web socket technologies have been used.

2. Joystick / Controller module. For this hack, I have used Arduino Mega ADK board and a joystick shield mounted on top of it. Arduino board has been flashed with the firmware which reads analog data from the controller and sends it to the connected Android device using Android accessory protocol.

3. Android module. An android app for linking the game module and the controller. The app can be installed on any device running Android 2.3.4 (Your device needs to have the USB compatibility library). It reads the data from the controller and forwards it to the browser over web sockets.

How to contribute?

The source code is available here under MIT licence. I have added enough inline documentations all around the code. Please send any bugs, feedback, complaints, patches about the hack to me at varunkumar.n@gmail.com.

-- Varun

Android 4.0 Ice Cream Sandwich Screenshots

2011-10-19T10:19:00.001+05:30

Google and Samsung announced their latest smart phone Galaxy Nexus earlier today. It has awesome hardware capabilities and the offerings from Android 4.0 are quite exciting. Check out the official blog post here. Android 4.0 SDK was also released today and you can download it from here. I downloaded the SDK and played around with the emulator. Emulator seems to be faster than that of HoneyComb but still you will find some slowness compared to previous versions.

Note: Hover over each screenshot to know more about it. Click on a screenshot to enlarge it.

-- Varun

Less , the dynamic style sheet language

2011-10-17T09:20:00.001+05:30

A style sheet language is one which describes how a document has to be structured and styled. The most widely used style sheet language is CSS and is mostly used for styling web pages written in HTML. If you have developed even a simple web page, you would have definitely come across CSS and would have used it in some form. CSS plays an important role in the success of modern web applications with rich UI. CSS has gone through various iterations with the latest one being CSS3. However, there are some limitations with CSS. We can’t do dynamic stuffs like interpolating a property based on a variable, re-using a property value across classes, etc. Less is an extension to CSS with dynamic behaviour such as variables, mixins, operations and functions. We can write complex CSS styles with Less. Do more with Less.

Highlights:

Variables. This is a very useful addition to CSS. In most of our CSS files, we would have some repeating values like color, font-size, etc. With Less, we can define global variables for these values and use them across the classes.

Mixins. Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.

Nested Rules. Often, we write some complex selectors which are lengthy and hard to read. With Less, you can simply nest selectors inside other selectors. This will improve the readability and makes inheritance clear.

Functions & Operations. Sometimes we would need to write a class in proportion to an existing class, for example a class for hover will have properties opposite to that of its base class. With Less operations (add, subtract, multiply and divide) on property values, you can build a complex relationship between properties.

How to use Less?

Less can be used on the client side (on browser) as well as on the server side (using Node.js).

On the client side, we need someone to understand Less syntax and converts them to browser understandable CSS. This is done by Less.js which needs to be included on the client side. Less files are saved with .less extension and can be linked to your page with rel attribute set to ‘stylesheet/less’. Make sure the style sheet is included before loading Less.js. The only drawback with this approach is that the conversion happens every time the page is loaded.
On the server side, we can pre-render Less files to CSS and serve the compiled CSS files. This is more efficient than doing it on the client side. You need to have Node.js installed to do this pre-rendering. Check out more info here. If you are on Mac, you can use this app.

Browser Support

Since Less uses basic JavaScript techniques, almost all the browsers support Less - IE 6+, Webkit and Firefox.

I have been using Less for quite sometime now and it seems to be very handy. Who else uses this? Twitter uses Less in its UI toolkit Bootstrap. Try it out yourself. Do more with Less. The source for Less is available here under Apache License. Know more about it here.

-- Varun

[How to] Run Android apps on Windows

2011-10-12T22:22:00.001+05:30

I have written earlier about installing Android market on the emulator and running Android apps on it. Here is a much simpler way of running Android apps from your PC. BlueStacks is a cool app which lets you run Android apps on your Windows PC. The application is available for free and it supports only Windows as of now. There is also an Android app which facilitates syncing of apps between your smartphone and the PC.

Features:

Full screen mode for apps.
Sync apps between Android smartphone and PC using BlueStacks Cloud Connect.
Install up to a maximum of 26 apps. (Unlimited in the case of yet to be released Pro version).

Try it out here. Mac version of BlueStacks will be available soon.

-- Varun

Per-Element FullScreen API

2011-10-02T01:19:00.001+05:30

I have been following the developments on Chromium channel and one thing which caught my attention last week is the fullscreen API. As the name suggests, the API supports “per-element” fullscreen on the browser. Traditionally browsers have been supporting fullscreen mode for the entire page but not for the elements on the page. This API will be handy if you want to focus on a particular piece of information on the page. Most of the analytics application can make use of this API to show more detailed information. I have worked on applications which spans across two monitors as it displays huge amount of information. With this API, I can utilize the real estate effectively. Multimedia contents can also be shown on fullscreen. The API, which is based on the Mozilla’s proposal, has two JavaScript methods: requestFullScreen() and cancelFullScreen(). Check out the demo here.

How do we use it?

The API includes the following methods to all the elements in the DOM:

requestFullScreen(): Requesting the browser to render the current element in fullscreen. On using this method, the keys will be disabled and the element will not receive any keyboard events. This is to protect the users from potential phishing attacks in fullscreen mode.
requestFullScreenWithKeys(): Same as requestFullScreen() but with access to keyboard events.
cancelFullScreen(): Use this method to return back to the normal mode.

These methods have been added to all the elements in the DOM. Apart of this, a new attribute allowfullscreen has been added for the iframe element. You can also listen to the event fullscreenchange to know the state of the element. Three CSS pseudo elements have also been added: :full-screen, :full-screen-doc and :full-screen-root-with-target. Using these pseudo elements, you can control how you want your elements to appear in fullscreen mode.

Criticism:

The proposal received many criticism from the security experts. Some of the concerns are:

Attackers can request fullscreen and pre-empt keyboard focus. Your security credentials could possibly be stolen.
Increased chances for phishing attacks.
One could open up fullscreen mode without user interaction (which in my opinion is very bad).

The aforementioned concerns can be addressed if control is given to the users to allow / deny fullscreen mode. Also, plug-ins should be disabled in the fullscreen mode.

Browser Support:

Safari 5+ (with webkit prefix)
Chrome 14+ (with webkit prefix). Chrome 14 requires the flag: –enable-fullscreen. It has been enabled by default in Chrome 15 (not yet released at the time of this post)
Implementation of the API is in progress for Firefox. It is expected to be available as part of Firefox 10.

Check out this page for demo. More details can be found here.

-- Varun

LocalTunnel: Access your local web server on the internet

2011-09-19T23:43:00.001+05:30

If you are a web developer, here is an interesting article for you. At some stage of the development, you might want to share / demo your web application to people outside your local network. This is a common problem in the life of a web developer. There are many ways to expose the contents on your local web server to the external world. Some of the commonly used techniques include: Port forwarding, SSH reverse tunnelling, etc. LocalTunnel is a free service that lets you share your local web server in an easy way.

LocalTunnel is a Ruby program which works on the basis of SSH reverse tunnelling. It connects to a remote host that has Gateway ports enabled. The remote host service is available for free at http://localtunnel.com. After installing LocalTunnel, localtunnel command facilitates the connection between local server and the remote host.

How to use?

LocalTunnel can be installed using RubyGems. sudo gem install localtunnel.
Start your local development server. It can run on any port.
Run the localtunnel command passing the local port number. When the command is executed for the first time, you need to pass the SSH public key. More details here. localtunnel –k ~/.ssh/id_rsa.pub 8888
If the command was successfully executed, it will show the URL to access the dev server. Note: The URL is valid only for this session. Share it with your friends. And, you are done.

LocalTunnel is hosted on github under MIT license.

-- Varun

JavaScript Remote Debugging

2011-09-14T11:28:00.001+05:30

Mobile browsers are becoming more powerful day-by-day and you can do almost everything you do on your desktop browser. Many mobile app developers have already started moving towards mobile web app instead of native app. Apps are being built using HTML5 and rich JS libraries. However, one of the major concerns for the developers is the lack of developer tools. The reasons are quite obvious – real estate needed to show the debugger, non-developer friendly environment. The solution to this problem is remote debugging. I have been using JSConsole for this purpose. It comes handy when we want to inspect DOM of the webpage. I stumbled upon “Aardwolf” yesterday and it seems to be a better alternative for JSConsole when it comes to JavaScript debugging. Aardwolf is powered by Node.js.

Features:

Breakpoints
Call Stack
Exception reporting
JS Console remoting

How does it work?

Aardwolf is a Node application which listens on two ports – One for the debugger UI (8000), another one for the JS file server (8500). It has a code rewriter which rewrites the JS files to be debugged (dynamically). The rewritten JS files are served by the JS file server. The application to be debugged should consume JS files from the above mentioned JS server (rather than the original JS files). This will help establishing connection and adding hooks for debugging. Once the connection is established, we can add breakpoints and debug the JavaScript file.

How to set up Aardwolf?

Check out the Aardwolf source code from here or here.
Create a file ‘config/config.local.js’ within the checked out location. Add the following lines to it:

var config = require('../config/config.defaults.js');
config.serverHost = 'ip-or-hostname-of-your-computer';
config.jsFileServerBaseDir = '/path/to/www/root';

Start the server by running “node app.js” (Make sure that Node.js is installed on your machine)

Add the debug library to your web app. Also, all the JS files to be debugged should be served from the JS file server.

<script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/aardwolf.js"></script>
<script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/some-script.js"></script>
<script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/some-other-script.js"></script>

After the server starts up, open http://localhost:8000 in your desktop browser. The debugger UI should appear.
Open the web app on your phone and wait for the page to load. The debugger UI will show “Mobile device connected” once the connection is established.
You can set the breakpoints and view the call stacks on the right pane.

The source code is available on github as well as on bitbucket. The project is available under the MIT license. Aardwolf does not seem to be good at inspecting DOM elements. We can employ both JSConsole and Aardwolf to make our debugging job easier. Happy debugging!!

-- Varun

New sharing option “Comment-Only” in Google Docs

2011-09-13T22:49:00.001+05:30

Google has just updated Google Docs with a much needed feature – New sharing option “Comment-Only”. This feature will be rolled out in the coming weeks. In the current version of Google Docs, we need to give edit permission for the collaborator to add comments. With the new “Comment-Only” permission, we can build better workflow system around Google Docs. The reviewer of the doc can only do the job of reviewing. I was planning to write a Google app script to implement a similar functionality with Google Docs Spreadsheet. “Comment-Only” permission can be mixed with the access permission for the doc.

-- Varun

Google DevFests India 2011

2011-09-07T00:31:00.000+05:30

Google has been organizing many developer events across the globe to meet the developers and understand their expectations. DevFest is one such event which provides a great opportunity to learn more about Google technologies and developer products. Developer advocates and engineers from Google will be present at the event. This will be an useful forum for the developers to interact with Google engineers. The event is open to all. There are only limited seats. Register here.

Event : Google DevFest 2011

Venue : The Lalit Ashok Bangalore
Date : Sep 15, 2011 08:30 - 17:00

Venue : HICC and Novotel, Hyderabad
Date : Sep 17, 2011 08:30 - 17:00

More details here.

-- Varun

New toy in the house: Arduino ADK

2011-08-17T09:23:00.001+05:30

Yay! I have got a new toy in the house to play with – Just bought Arduino ADK board. Ever since Google announced Android ADK at Google I/O 2011, I have been trying to get hold of one. I couldn’t get it till now because of my geographical location and the demand for the board. Finally, I have ordered it from SimpleLabs, Chennai and received the package yesterday. I will be playing around with it in the next couple of weeks and share my experience in this blog.

What is Android ADK?

Android 3.1 introduces powerful new APIs which allows external USB hardware to interact with an Android device. The APIs are based on a USB stack and services that are built into the platform, including support for both USB host and device interactions. Using the APIs, we can create applications that are able to discover, communicate with, and manage a variety of device types connected over USB. More info here.

Arduino ADK

The Arduino ADK is a microcontroller board based on the ATmega2560 (datasheet). It has a USB host interface to connect with Android based phones, based on the MAX3421e IC. It has 54 digital input/output pins (of which 14 can be used as PWM outputs), 16 analog inputs, 4 UARTs (hardware serial ports), a 16 MHz crystal oscillator, a USB connection, a power jack, an ICSP header, and a reset button. Source: Arduino.cc

-- Varun

HTML5: Page Visibility API

2011-08-10T00:37:00.001+05:30

Today I stumbled upon an interesting API being introduced in HTML5 – Page Visibility API. As the name suggests, the API facilitates the developers to programmatically determine the current visibility of the page. User interface designers can take advantage of this API, which is still in Working Draft, to give better experience to the visitors. This will also help in better resource utilization. For example, if your page has an animation, you can efficiently render it only when the page is visible without having to hog the resources. The specification introduces a new interface named “DocumentVisibility” that provides Web applications with the means to programmatically determine the current visibility of a page and be notified of visibility changes. Check out the demo here.

The specification includes three main parts:

Attribute “document.hidden”: This is a Boolean attribute of DocumentVisibility interface indicating if the page is hidden from view. It will return ‘false’ even if part of the page is visible. There are vendor specific implementations for this. It is implemented as document.msHidden in IE and document.webkitHidden in Chrome.
Attribute “document.visibilityState”: This is an attribute of DocumentVisibility interface indicating the state of the page. The specification includes three different states: “hidden”, “visible”, “preview” – The page is not visible but a preview of it is visible. Again, its open to vendors to define their own states. Its implemented as document.msVisibilityState in IE and document.webkitVisibilityState in Chrome. The major deference, however, is that document.msVisibilityState is a numeric value where as document.webkitVisibilityState is a string value. Hence, its better to stick to document.hidden till the API matures.
Event “visibilitychange”: The visibilitychange event will be fired whenever a change is made to the document.visibilityState attribute. We can listen to this event on document and as mentioned in point#2, its advisable to use document.hidden to find out the new state within the listener. Here, again, you will have to listen to vendor specific events.

Demo:

I have setup this demo page to explore the Page Visibility API. It runs a timer to show clock on the page. The timer will be disabled whenever we move away from the page and will be re-activated as we enter the page with the adjusted clock timing. Smart developers always view the source. View the page source to know more.

Browser Support:

Internet Explorer (10+)
Chrome (12+)

Page Visibility API will be really useful if vendors follow the specifications completely and move away from the vendor prefixes. More info about Page Visibility can be found here.

-- Varun

Diving into Node.js

2011-07-26T09:50:00.001+05:30

If you are following the posts on Hacker News, you would have definitely heard about Node.js. At least one of the posts related to Node.js will be on the front page of Hacker News everyday. Node.js is an event driven server side JavaScript environment. Its a runtime which can execute JavaScript files on the server side using the JavaScript engine V8. It is intended for writing scalable applications like web servers. It was created by Ryan Dahl in 2009. I have been playing around with Node.js for about a month now and this post is a consolidation of different things I have came across in the process of learning.

Node.js resources:

Node.js official site. Check out the Wiki on this site.
Node.js Introduction & Installation.
The Node beginner book by Manuel Kiessling. This is an excellent book to get started with Node.js and server side JavaScript. It is a great work by the author. He has chosen to explain the concepts via “How not to” and I am really impressed with his writing style. Hats off to the author.
Node by example. This is an excellent series of posts to showcase some of the available features of Node.js. It is a collection of short code examples.
Node Modules. This is the list of modules which you can hook into your code. Its a huge list and you can find modules for almost anything you wanted to.
Node.js hosting. This page contains list of hosting sites where you can host your Node.js applications.

If you are from Java background, you can also go through this and this to know about Node.js from an Enterprise Java perspective.

Note: I have read through all the materials posted here and found them to be useful. If you come across any interesting links about Node.js, share them via comments.

-- Varun

Facebook Circles Importer: Import Google+ Circles into Facebook

2011-07-05T00:39:00.001+05:30

Ever since Google announced its social product Google+ last week, hackers around the world have built some cool hacks. Here is one such hack built around Google+ and Facebook. Google+ sports a simple and neat interface and the highlight is the interface of Google+ Circles. And, few engineers from Facebook have already built “Circle Hack” and ported the interface of Circles to Facebook (Lists) in no time. This piece of work of mine is an extension to Circles hack which facilitates importing Circles into Facebook. Access it here.

Circle Hack

One of the important features of Google+ (as bragged about) is Google+ Circles which helps you to share your data with a specific group of people. A similar feature already exists (Lists) on Facebook but is hidden inside a bunch of other features and is not very user friendly. Circle Hack is an excellent piece of work done by few engineers from Facebook to provide a friendly interface to Facebook lists. Circle hack is developed as a node.js application and the backbone of the hack is the UI Kit developed by the same author. It is a very popular UI framework for building complex web apps. Again, the author has done a very good job. Source code of Circle Hack can be found here. I was hacking through Circle Hack as well as UI Kit and was quite impressed with the offerings of UI Kit. I have browserified the node modules and ported it into VServices, which I already own.

Circles Importer

Circles Importer is an extension to Circle Hack which facilitates importing contacts from an external source (like Google+) into Facebook and create lists out of them. Facebook mail invite has a similar feature of importing contacts but you have to take the pain of creating the lists yourselves. That is where this tool will fit in.

Steps to import Google+ Circles into Facebook?

Google has provided us with a handy tool (Google TakeOut) to extract our data from Google+ whenever we wanted to. Google Takeout lets you download an archive your data from various Google services including Buzz, Contacts and Circles, Picasa, etc.
Sign in to Google Take Out and select the service “Contacts and Circles” for archival. Download the archive (zip).
On extracting the archive, you will find .vcf files under contacts folder.
Upload the .vcf file to the Circles Importer. You can even drag-drop files from your desktop.
Circles Importer will parse the VCard and shows the list of Facebook friends who are part of the uploaded circle.
Choose an existing list from the auto-complete text box or provide a name for the list. Click on ‘Add to list’ to complete the process.

-- Varun

DotJs – A GreaseMonkey alternative

2011-06-30T09:54:00.001+05:30

If you love customizing pages on the web using user scripts, here is an alternative for GreaseMonkey. DotJs is a Google Chrome extension that executes JavaScript files in ~/.js based on their filename. To customize http://www.google.com/, you will have to create the userscript ~/.js/google.com.js. The author originally built this for Chrome only but was later ported to other browsers Firefox, Safari and Fluid. Currently, it works **only on OSX**.

How to install?

Installation requires you to have Ruby 1.8 and rake installed. Follow the instructions below to install DotJs.

git clone http://github.com/defunkt/dotjs

cd dotjs

rake install

How does it work?

There is a security restriction in Chrome which prevents access to the local file system. To overcome this problem, DotJs runs a tiny web server on port 3131 which serves the files from ~/.js. Hence, the need for Ruby.

Is it better than GreaseMonkey?

DotJs is just an alternative technique which offers the same functionalities as GreaseMonkey offers. The userscripts in DotJs will not be able to use the GM_ functions which means not all your GM scripts will work directly here. However, you can implement the GM_ methods and make all the GM scripts compatible here. The userscripts in DotJs will have jQuery 1.6 loaded regardless of whether the site you're hacking uses jQuery. Also, it adds support for additional plug-ins and other helper functions.

-- Varun