HP webOS Developer Blog

Now that webOS 3.0.5 is in the wild, we can start playing with some of the new functions that arrived with it. One of these features is a new sensor API, and that is the subject of this week’s App Hack.

The sensor API can be used with PDK (details in the PDK documentation), but is also available to the SDK, as webOS 3.0.5 implements the DeviceOrientation and DeviceMotion Event Specification. Let’s see what we can do in a simple Enyo app.

DeviceOrientation Event

The device orientation event returns rotation data—how much the device is leaning side-to-side (beta), front-to-back (gamma) and the direction the device is facing (alpha).

DeviceMotion Event

The device motion event is a superset of the device orientation event; it returns data about device rotation and also acceleration information. Acceleration data are returned in three axes: x, y, and z, and are measured in m/s^2. Although some devices might not have the hardware to exclude the effect of gravity, the event nevertheless returns two properties, accelerationIncludingGravity and acceleration, which excludes the effects of gravity. (When including gravity, whichever axis is vertical registers the 1g effect.)

This is where the gyroscope on board the TouchPad comes into play; with its help, the effect of gravity can be removed from the acceleration values.

Our example, we will explore the deviceorientation event:

Let’s start by implementing the function that does something with the orientation data:

onSensorData : function(event) {

    // gamma is the left-to-right tilt in degrees, where right is positive
    var tiltLR = event.gamma;

    // beta is the front-to-back tilt in degrees, where front is positive
    var tiltFB = event.beta;

    // alpha is the compass direction the device is facing in degrees
    var dir = event.alpha

    // when using the devicemotion event, try these values:
    // event.acceleration.x/y/z
    // event.accelerationIncludingGravity.x/y/z

    var rotation = "rotate(" + dir + "deg) rotate3d(1,0,0, " + (tiltFB * -1) + "deg)";

    this.$.myImage.applyStyle('-webkit-transform',rotation);

    var res="Gamma="+Math.round(tiltLR)+" Beta="+Math.round(tiltFB)+" Alpha="+Math.round(dir);
    this.$.resultWindow.setContent(res);
}

Here we are rotating an image on-screen in response to device motion, using the alpha orientation to rotate the image and the beta (front-back tilt) data to rotate the image around the x-axis. To do this, we’re using the rotatate3d CSS3 Transform. The first three values indicate direction (0,1 or -1) and the fourth the number of degrees to rotate. In our case, we’re only rotating the X axis.

Finally, we add an event listener to call our function every time the orientation data changes:

window.addEventListener("deviceorientation", enyo.bind(this,"onSensorData"), true);

That’s the basic idea! We’ve put the source for our demo app here for you to study more closely.

The Challenge

Your task for this week’s App Hack is to create something cool with the Sensor API presented here. You can follow the basic outline we’ve provided here, or stretch it to imagine something nobody’s thought of before!

The Rules

1) Submit your app based on the sample above to the App Catalog by January 31st at 11:59pm Pacific Standard Time. We will be accepting both new apps as well as new incorporation of the theme into existing apps as an improvement. A submission to the Beta catalog is acceptable.

2) Notify us that you want to participate in the App Hack by sending us an email containing your app redirect link (it’s generated automatically and placed on the app’s detail page in “My Apps”) and any extra information you want to share with us at apphack@palm.com. This is also due by January 31st at 11:59pm Pacific Standard Time. If you do not send us this note, your app will not be considered for the App Hack.

3) By the end of the day on Monday, February 6th, the Developer Relations team will announce the winning app (along with honorable mentions and other entrants). The winner will get a blog post dedicated to him/her and his/her fantastic app.

4) For this round, the winner (and only the winner) will also receive a 16GB TouchPad!

Additional terms and conditions

NO PURCHASE NECESSARY AND PURCHASE WILL NOT INCREASE CHANCE OF WINNING. OPEN ONLY TO REGISTERED DEVELOPERS. HP reserves the right to request additional information for consideration. False information disqualifies you and your app from consideration, making it subject to review under applicable laws. Violators may be prosecuted. This offer is void where prohibited or restricted by law. Taxes, if applicable, are winner’s responsibility. HP employees are not eligible. Winner may have to sign and return an eligibility and liability release, unless prohibited. If eligible winner fails to sign and return required documents, prize may be forfeited. HP is committed to protecting your privacy. Your personal information will not be passed on from HP without your explicit consent. Visit our Online Privacy Statement to learn how we use automatic data collection tools and your personal information to tailor your communications. Neither party acquires any patent, copyright, mask work or trademark rights during this event. Participation imposes no obligation on either party to purchase, sell, license, transfer or otherwise dispose of any technology, services or products, and does not create any agency or partnership relationship. The terms herein may be added to or modified by HP at any time at its sole discretion. Additional terms and conditions may apply. Entry constitutes agreement to rules and HP’s decisions. Entrants release and hold harmless HP, its subsidiaries, affiliates, and their officers, directors, employees, agents from any claim arising out of entry or prize receipt or use.