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”

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”

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”

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”

Android Activity class and static members

In one of my Android application, I was storing some data in a static member variable. After few hours of inactivity, when I used to open the application, I would see that all the data I had stored in the static member variable was gone.

I know about the Android Activity life cycle and that Android can unload Activity class if it is not active. However I did not think that it would reset all static members too. So I had three options to persist data –

  1. Store it in preferences
  2. In a file (local or on external media)
  3. In the database
  4. In the Android application class

See this article for more details about data storage options in Android.  Since the data is not large and I did not already have Android database created for this app  (this app does use database, but it’s HTML5 database), I decided to use option #4. Storing in application class also suited this application because I do not need the data if Android or user kills the application.

So, be very careful when using static variables in Activity class.

-Ram Kulkarni