Author: Ram

Posted on

OOP in JavaScript: Class in various Avatars

I have done more JavaScript programming in the last couple of months than I have ever done before, and I have started liking it. I had used JavaScript before, but only for simple use cases like form field validations, alerts or taking simple input. Recently I have been looking at ways to do Object Oriented Programming (OOP) using JavaScript, and what struck me initially odd about it was different forms a function can take and different ways in which you can use them.

Functions can be treated as Class in JavaScript. They can have member variables and methods. I have seen many different ways in which this can be coded
Continue reading “OOP in JavaScript: Class in various Avatars”

Posted on

A Simple HTML5 Game



My son is having summer vacation and he wanted to learn animation and create games. He had learnt Flash and ActionScript a couple of years back. So he started developing a game in Flash. However he ran into few issues and sought my help. Since I don’t know Flash, I could not help him much. But I suggested that if he develops his game in HTML5, I could help him. So while teaching him HTML5 and animation, I ended up creating a very simple game, which I want to share here.
Continue reading “A Simple HTML5 Game”

Posted on

Using PhoneGap Media APIs

Last week I blogged about a problem I was facing when recording audio on iOS, using PhoneGap Media APIs. I was seeing following error in the debug console –

ERROR: Method ‘create:withDict:’ not defined in Plugin ‘Media’

and audio was not recorded.

I logged a bug for this in the PhoneGap’s bug tracker, and it turned out that it was not really a bug in PhoneGap. The PhoneGap team responded quickly (thanks Filip and Shazron) and guided me to the solution.
The solution is in fact documented on the PhoneGap API Reference site, but it is easy to miss.This is what I learnt –

Continue reading “Using PhoneGap Media APIs”

Posted on

My Experiment with iOS Development

Last week I decided to experiment with iOS development. When I had started out learning Android development, it was not very difficult. Android programs are written in Java, which I have been using for many years and IDE used for Android development is Eclipse, which I have been using for many years now. All I had to get familiar was Android APIs.

However iOS development is very different for me. Applications are written in Objective-C, IDE is Xcode and they have to be developed on Mac platform using Cocoa framework. I have no experience with Objective-C, Xcode and Cocoa framework and have used Mac very little, only when I had to debug ColdFusion Builder issues specific to Mac. So I was not expecting smooth sailing; and I was not disappointed.
Continue reading “My Experiment with iOS Development”

Posted on

Improving Animation Performance in HTML5 Canvas – Part II

In this post I had described how I was able to improve performance of animation in HTML5 Canvas by using a backup Canvas. The trick was to draw static part of the main Canvas on the backup Canvas and whenever any object moves (during animation), draw the content of backup Canvas on to the main Canvas first and then draw moving objects. I had optimised this by copying only a part from the backup Canvas that was exposed by the moving object. This gave me much better animation performance than redrawing scene every time.

Though the animation was better, I was still not happy with the performance. It worked fine on small devices like phones, but animation was still not very smooth on tablets. So I started looking for ways to improve it further.
Continue reading “Improving Animation Performance in HTML5 Canvas – Part II”

Posted on

File Chooser Dialog for PhoneGap Applications

I needed a file chooser dialog box for an application I am working on. Android APIs do not have File Chooser dialog, and I had created my own native Android File Chooser dialog for my application Annotated Call Log. However I did not want to use that for my current application, because it needs to run on iOS too.

A quick search on the Web for PhoneGap based file chooser dialog did not give me what I was looking for, so I decided to create one using PhoneGap file APIs, JQuery and JQuery Mobile. You can find the source code here. The page won’t display much in the browser. Use ‘View Source’ of your browser to see the source code.
Continue reading “File Chooser Dialog for PhoneGap Applications”

Posted on

Improving Animation Performance in HTML5 Canvas

I have been working on an application that performs some animation in HTML5 Canvas. The animation involves drawing of stokes,images and moving images. Initially I took the easiest path for coding animation, which is clearing canvas every time and drawing new positions of objects. When tested this application on my laptop, in Chrome, everything worked fine and performance was satisfactory.

However when I ran the same application on my Xoom tablet, animation was extremely slow. Obviously clearing canvas and redrawing everything again and again was not a good idea. I did know that this approach was bad for animation, but since it worked fine on my laptop, I did not bother to change it initially. However I was surprised by how bad it performed on Android. I saw many complaints about performance of Canvas on Android in many forum posts and blogs. Apparently, as per many posts, performance of Canvas is much better on iOS than Android, but I can’t confirm this.
Continue reading “Improving Animation Performance in HTML5 Canvas”

Posted on

Simple Drag&Drop with JavaScript, JQuery



I am working on an application that requires Drag & Drop functionality in a web page with images. First I thought I would implement this using JQuery UI, because I had used it earlier and it makes DnD very easy. But then I thought it may not be too difficult to implement it myself. As it turned out, it is not really very difficult. Here is a simple demo of that implementation.

There are two Divs in this demo, one containing image thumbnails and the other is a drop target for images. Drag and drop image thumbnails on the target Div. The original image would be added to the Div.You can then move images within this Div. If you drag and drop it anywhere outside the div, the drop operation is cancelled and image is removed.
Continue reading “Simple Drag&Drop with JavaScript, JQuery”

Posted on

Android Gotcha – Application Lifecycle Management

This week I was hit by another bug because of not considering impact of Android’s application life cycle management. Last week I had blogged about unexpected behaviour because of using static members in Activity class. The new bug (in another application) was not the same, but it was caused by Android’s application lifecycle management. To be clear, I am not saying there is any problem with the way Android handles application lifecycle.

A user of my application ‘Annotated Call Log’ informed me that when the call duration was very long (more than 45 minutes), the application sometimes did not save call information. The way this application works is – it has a broadcast receiver for getting call status. When a call begins, this class receives notification and it saves call information like phone number, call start time etc in member variables. When the call ends, the receiver class is again called and it then saves call information in the database.
Continue reading “Android Gotcha – Application Lifecycle Management”

Posted on

Creating Android Applications with HTML User Interface

I created my first two Android applications completely using Android APIs. However I realized that I can build better user interface quickly using HTML, JavaScript and CSS. Android SDK provides WebView controls which is a browser control. So I started looking for ways to make WebView render local HTML files. Most APIs of WebView are simple to understand and use, except one important method, loadUrl.

To begin with I was not sure where to store my HTML/JS files in the Android project and what URL to use to load them. JavaDoc help for WebView did not mention how to load local assets into WebView. It turned out that you need to keep all your HTML/JS files in the ‘assets’ folder of you project and load them with URL file://android_asset/.
Continue reading “Creating Android Applications with HTML User Interface”

Social