Ringmark/PhoneGap Device Orientation Improvement

Who hasn't built a fantastic mobile application only to run into some issues when deploying to a mobile web browser.  Fortunately Facebook has developed and open sourced Ringmark (rng.io), a mobile browser test suite.  Make sure to check out this great introductory blog post  on Ringmark.  We are excited at CloudSpokes to work with Facebook and Adobe to help make PhoneGap the first Ring 1 compliant browser.  We will be launching a series of competitions around Ringmark and PhoneGap to contribute improvements back to the Apache Cordova project.

For this first challenge we want you to upgrade the Cordova source to pass the Device Orientation Event tests for both the DeviceMotionEvent and DeviceOrientationEvent.

REQUIREMENTS

The first step is to launch rng.io from PhoneGap on the device.  You'll notice if you tap on Ring 1, the tests for Device Orientation Event will not pass.  You will need to then update the code base to pass these tests.  After you make your changes, make sure your solution passes Ring 1 tests for Device Orientation.  Please see the attached screenshot in the Assets section.

- Provide a solution on iOS or Android (we will provide prizes to the best submission on each platform)
- Upgrade the Cordova source to pass the Device Orientation Event tests for both the DeviceMotionEvent and DeviceOrientationEvent.
- The specification for Device Orientation Event contains some additional info.
- Ringmark is completely open source and can be run locally.  Get the source at https://github.com/facebook/rng.io.

SUBMISSION DETAILS

Verify your submission passed the Device Orientation Event tests on rng.io. Provide a link to your GitHub fork of Cordova.

Your submission will be judged by a panel of peers based upon this criteria. If you would like to request an extension, please read Can challenge deadlines be extended for more time? on our FAQ. We do not want to grant extensions unless there is a valid reason.

ADDITIONAL INFO

We will be paying two sets of prizes for iOS and for Android.  You are eligible to submit for both platforms.

PARTICIPATION

DISCUSSION

This is simply awesome!!! However, the timing is hardly right - there are at least 4 other mobile challenges going on at the moment with similar deadlines :(

talesforce , Jul 20, 2012 at 08:11 AM reply

I'm really confused. Cordova uses built-in browser which have different features in different OS versions. For example, this particular feature "Device Orientation Event" as you can see from http://caniuse.com/deviceorientation is available in Android 3 and 4. I ran test with cordova on android 4 emulator and as you can see here http://dl.dropbox.com/u/3226806/rngscreen.png this test is OK. obviously it failed for android 2.3 and earlier. So you want for us to built this functionality in android pre 3 or what? Why is there are now info about Android and iOS versions? I mean, cordova uses built-in browser which have

yureckey , Jul 20, 2012 at 10:41 AM reply

Since most Android devices are

mess (admin), Jul 20, 2012 at 11:06 AM

Most android devices are less than 3, we would like it to support version 2.3

mess (admin), Jul 20, 2012 at 11:09 AM

is there a phonegap browser app from where to open rng.io what I only got is the dolphin phonegap addon for android

vishesh91 , Jul 22, 2012 at 11:48 AM reply

You will need to look at the Cordova code base itself.

mess (admin), Aug 02, 2012 at 13:33 PM

I'm pursuing this on iOS. I've made significant progress but now hit a stumbling block. Can you please confirm if we need to use the latest Cordova build 2.0 (released on 20th July - the same day when this challenge was launched). I ask this because it seems that the ChildBrowser plugin doesn't seem to work with Cordova 2.0 at the moment. Please advice ASAP.

talesforce , Jul 23, 2012 at 11:23 AM reply

No reason that child browser would be required to make this work.

mess (admin), Aug 02, 2012 at 12:53 PM

Can you confirm if this needs to be done on Cordova 2.0? Or would it be acceptable to do this on 1.x?

talesforce , Aug 01, 2012 at 19:07 PM reply

Double checking but assume 2.0.

mess (admin), Aug 02, 2012 at 11:41 AM

I spoke with the Cordova guys. You should not need the child browser to make this work.

mess (admin), Aug 02, 2012 at 13:33 PM reply

@Dave, you mentioned that we should not need the child browser to make this work. Should we then be using the Cordova Webview on both iOS & Android? Please confirm.

talesforce , Aug 09, 2012 at 06:39 AM reply

Yes I believe that is the correct approach

mess (admin), Aug 09, 2012 at 07:13 AM

@Dave, iOS doesn't seem to need this. I cloned down the Cordova library straight from github, setup a PhoneGap project, opened ring.io and it already passes both tests. http://cl.ly/image/0H1a3E140c00

pyro2927 , Aug 09, 2012 at 07:39 AM reply

I spoke to the Cordova guys, I guess IOS already works. I will relaunch a new iOS challenge, but the Android app still needs work. I will double check on the Android one now.

mess (admin), Aug 10, 2012 at 06:25 AM

@pyro2927 - "can you elaborate on "setup a PhoneGap project, opened ring.io" - how are you doing that? Where are you opening ring.io from??

talesforce , Aug 09, 2012 at 11:02 AM reply

Hey @Dave , I have downloaded latest Cordova 2.0.0. jar libraries and js files into my android-phone gap test application , launched the http://rng.io URL from the web view provided by phone gap but surprised to see that both the challenge requirements i.e. Device orientation event and Device Motion event tests are already passed & supported on my ICS 4.0.3. android phone... Question is what is expected in the challenge , I don't understand please explain !!

SachinMangarole , Aug 10, 2012 at 03:43 AM reply

@SachinMangarole I tried what you described with the emulator: public class MainActivity extends DroidGap {@Override public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); super.loadUrl("http://rng.io/");} -- And yes the two tests do pass on Android 3.x and 4.x, but they both fail on 2.x. But I'm not clear if the Cordova guys want us to fix this way of running the tests because this would only require changing the native code (Java) from Cordova, and not any JavaScript code (I believe at least). @mess?

wcheung , Aug 10, 2012 at 06:05 AM

Is the challenge requirement something else ??

SachinMangarole , Aug 10, 2012 at 03:45 AM reply

@Dave, thanks for the confirmation on iOS. I have spent several hours banging my head on it and trying out multiple approaches - using the Cordova Webview, directly opening rng.io in a sample app etc. Too bad all that effort was in vain :( As for Android, I already did whatever wcheung mentioned long back (when this challenge was launched first time). Can you please confirm if we have to make Cordova work on Android 2.x (since it works on 3.0 and 4.0). Since I've already spent considerable time on this, I want to make sure I understand this right before I give in more effort on this.

talesforce , Aug 10, 2012 at 07:01 AM reply

PARTICIPATION

9 members participating with 7 registered

TECHNOLOGIES

Mobile

WINNER SELECTED

Ended Aug 15, 2012 at 12:06 PM
Winner Announced on August 24, 2012
View the challenge results
Give us your feedback about this challenge.

PRIZES

Total: $3,000
1st $1,000 (IOS)
2nd $1,000 (Android)
3rd $500 (IOS)
4th $500 (Android)

SHARE

Chrome Extension

Install the CloudSpokes Chrome Extension for quick and easy access to the latest CloudSpokes challenges, your payments, leaderboards and more!