Create "Handbell" using HTML5 and PhoneGap* compatible API

"HandBell" allows you to shake a picture of a bell and hear sounds.  This samples demonstrates how to work with PhoneGap compatible Accelerometer APi.

The handbell index.html file consists of 5 parts:


<div id=handbell>

<div id=bellcenter class="position"></div>

<div id=bellright class="position"></div>

<div id=bellleft class="position"></div>

<div id=bellrightring class="ring"></div>

<div id=bellleftring class="ring"></div>

</div>




The imitation of bell’s movement is showing/hiding of some of this parts depending on the device acceleration.

How it works

First we need wait for PhoneGap is fully loaded.

I make it in body onload event handler:

function onLoad(){
 // Wait for Cordova to load
 document.addEventListener("deviceready", onDeviceReady, false);
//initialization
 bellrightring = document.getElementById("bellrightring");
 bellleftring = document.getElementById("bellleftring");
 bellleft = document.getElementById("bellleft");
 bellright = document.getElementById("bellright");
 bellcenter = document.getElementById("bellcenter");
}

When Cordova is ready it is possible to use the Phonegap compatible functions.

Firstly the media files are initialized:

//media initialization
 bellsound = new Media(path + "resource/bell.mp3",
 onRingSuccess(bellsound), onRingError);
 bellend = new Media(path + "resource/bell-end.mp3",
 onRingSuccess(bellend), onRingError);

Here the PhoneGap compatible Media API is used that provides the ability to record and play back audio files on a device.

It should be noted that the path to the resources depends on the device:
  • /android_asset/www/audiomp3/ on android
  • "/audiomp3/ on iOS
  • /app/www/audiomp3/" on windows 7
The best way to determine the path to your resources is to determine the path to your phonegap compatible application:
function getPhoneGapPath() {
    var path = window.location.pathname;
    var count = "index.html".length;
    path = path.substr( path, path.length -  count );
    return path;
};
Second the watchAcceleration method is used that gets the acceleration along the x, y, and z axis at the regular interval (in our case 100 milliseconds)
accelID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
onSuccess function gets the snapshot  of the current acceleration and move or sop bell.

function onSuccess(acceleration) {
    var x = acceleration.x;
    var y = acceleration.y;
    var z = acceleration.z;
    var t = false;
    if (previous){
    if (isShaking(previous, acceleration, 10)){     
     moveBell(sign(x)); 
     bellsound.play();
     accelerated = true;
    }
    else {
     stopBell(acceleration);
     if (accelerated == true){
     bellend.play();
     }
     accelerated = false;
    }
 }
         
    previous = acceleration;
}
For determine if the device was shaken the isShaking function is used. It compares the current and previous coords:
function is
Shaking(last, current, threshold) {
 var deltaX = Math.abs(last.x - current.x),
     deltaY = Math.abs(last.y - current.y),
     deltaZ = Math.abs(last.z - current.z);
         return ((deltaX > threshold && deltaY > threshold) ||
                    (deltaX > threshold && deltaZ > threshold) ||
                    (deltaY > threshold && deltaZ > threshold) || deltaX > threshold);   
 }
If this function return true the moveBell function is called. movedBell shows or hides some of the parts of the ringing bell depending on the sign(x). The sign determines the direction of the x coord:
function sign(val, delta) {
    if (typeof delta == undefined) delta=0
    if (val>0 && Math.abs(val)-delta > 0) return 1;
    else if (val<0 && Math.abs(val)-delta > 0) return -1;
    else return 0;
}
Also the sound of the bell is playing in this case.
if isShaking function returns false the bell is stopped and the sound of the stopping bell is playing.

Note:

The performance of this application on Android 4.0 is worse than on Android 2.3. It is caused by Hardware Acceleration which were added to Android API Level 11. See http://developer.android.com/guide/topics/graphics/hardware-accel.html#drawing-support

The devices tested:

  • HTC One V (Android 4.0.3) 
  • Sony Xperia Go Smartphone (Android 2.3.7) 
  • Samsung Galaxy Tab 2 (7.0) (Android 4.0.3) 
  • Apple iPad 2 (iOS 5.1.1) 
Pour de plus amples informations sur les optimisations de compilation, consultez notre Avertissement concernant les optimisations.