Accelerometer / gyroscope

[JangoSteve]

I'm not sure exactly how to do this, as I haven't tried using this API for anything yet. But Google did a demo.

Here's a good article that explains the device orientation APIs and possibly even gives us the code for an initial demo:

http://www.html5rocks.com/en/tutorials/device/orientation/

Here's another article and potential demo code:

https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

I'd think about maybe implementing the demo from the MDN documentation above (provided the MDN license allows it, which I think it does provided we include an attribution on the demo page).

[JangoSteve]

For the Gyroscope, we could do a demo that shows the accelerometer and gyroscope readings on some sort of scale. For more advanced demos, for now, maybe we then just link out to existing demos that work well on mobile, such as this one for parallax.js.

[JangoSteve]

I like the creative application demo for how the accelerometer data could actually be used in an app. Let's add a basic demo above that which simply shows the values of the X, Y, and Z accelerometers as range input sliders like this:

The screenshot is just range inputs with css properties of transform(-90deg) for the Y slider and transform(45deg) for the Z axis.

Then we can just use Javascript to set the value attribute of each slider as the accelerometer data is updated.

[PatrickMcSweeny]

We still need a SendGrid account for the feedback form.

[PatrickMcSweeny]

As noted on this page, Chrome and Firefox return different values for the device orientation: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Orientation_and_motion_data_explained

I confirmed this for myself after trying this demo in both browser on my phone:

http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html

For this reason, it wouldn't make sense to use sliders because it would be impossible to consistently set minimum and maximum values.

Also, the closest thing to a 'z' axis is the gamma value which is returns the device's compass orientation on a scale of 0-360. This probably wouldn't translate well to a slider either.

[PatrickMcSweeny]

For now I made it display the orientation data on the screen.

[JangoSteve]

I still think sliders would be more illustrative in demonstrating the functionality. Since we know what each browser's minimum/maximum values are (-90 to 90 on Safari, 180 to -180 on Firefox), I think we should either

a) do a JavaScript check to see which browser the user is using and set it to that, or

b) (this is probably my preferred choice as it's easier and more directly illustrates the differences between browsers on mobile) set the minimum/maximum values of the sliders to the extremes (so -180 to 180), and it'll just show how Safari only goes to half the maximum that other browsers go to.

For the z-axis, I say then we just add a slider for gamma taking into account the above. Make it go from 0 to 360 if those are the extreme values possible.