"deviceorientation" works on Surface but needs change of "desktop" detection

[cthedot]

I have been trying to get it work on Microsoft Surface and at least the deviceorientation event is there and works (tested on Surface RT Windows 8.1 Preview IE11, not sure if IE10 also supports this).
The main problem is in the deviceorientation eventhandler:

Parallax.prototype.desktop =    !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|IEMobile)/);
...
if (!this.desktop && event.beta !== null && event.gamma !== null) {

If you remove "!this.desktop" is does work on Surface which is matched by the desktop detection but is both desktop AND table. I suggest simply detecting the event and event properties is safer than device/userAgent parsing.

I am still working out why the demo works kinda strange and sometimes does not start, maybe it is because of beta nature of IE11, a slightly similar event handling or something else. But generally the deviceorientation event works.

Great work by the way :)

[cthedot]

(Guess I should just fork parallax but for now tested on jsbin., sorry)

I played around with IE11/Surface a bit more: http://jsbin.com/UPiqAJU/33/edit

Does seem to work now. IE11 actually has two events:

• DeviceOrientation http://msdn.microsoft.com/en-us/library/ie/dn322035%28v=vs.85%29.aspx
• DeviceMotion http://msdn.microsoft.com/en-us/library/ie/dn342897%28v=vs.85%29.aspx

I tried the DeviceMotion and its event.rotationRate property which seems more like DeviceOrientation on iPad. DeviceOrientation on the other hand gives absolute positions so actually responds to myself "rotating" and not just the device. Not sure how to use this (yet).

[wagerfield]

Hi @cthedot, the reason I added the desktop check is to make the library work on MacBook Pros and other desktop devices that have a gyroscope built in. People accessing the site on a MacBook Pro were complaining that the demo wasn't working for them (using their mouse) because they didn't realise that this machine has a gyroscope.

In my opinion it is a far more natural and intuitive experience to use the cursor position on all desktop devices since waving your laptop around is not something you would normally do when viewing a website 😄

However, I totally agree that user agent sniffing is bad practice and this regex is not yet mature enough to cater for all the devices and environments out there...but that's what GitHub is for and I am working as hard as I can to resolve all these compatibility issues.

It would be super helpful if you could let me know what User Agent String the MS Surface is spitting out so I can amend the desktop regex to cater for this device.

[wagerfield]

...oh and as a side note, most modern smart devices have both the DeviceOrientation and DeviceMotion events, I just chose to use the former because it is more widely supported and the data from this event is all I needed to create the effect.

[cthedot]

regarding DeviceOrientation/DeviceMotion I simply was unaware, shame really, sorry.
I could not bring DeviceOrientation to give results I understand, so moved to DeviceMotion but as you said, it probably does not matter in the end. I do think DeviceOrientation does need calibration though?

[wagerfield]

@cthedot could you please post your User Agent String as per my first comment so I can update the desktop regex to support the MS Surface?

[cthedot]

hi @wagerfield, I think parallax is one of the first "web" examples where both Device and Feature detection fail.

As you said, Device detection/UA sniffing is bad practice. But even if you tried to detect another device like the Surface it would not help. Surface (both RT and Pro) may mainly be used as a tablet (RT maybe even more than Pro but that depends on the user) and would therefore mostly use DeviceOrientation Events but may also be used as a laptop when the keyboard/touchpad cover and maybe even a real mouse is connected.
Even more unsure is the situation for "real" hybrid devices like the Lenovo Yoga series or the Sony Vaio Duo. Both do work as as a laptop with the included keyboard/touchpad. But both may also perfectly reasonably be used as a tablet. The Yoga keyboard folded 360° under the screen or in the case of the Vaio Duo the screen lowered onto the keyboard.
There is no way to know how a user is interacting with the device.

Just for the record, UA strings:

IE11 on Surface both Metro and Desktop version, both with Events:
Mozilla/5.0 (Windows NT 6.3; ARM; Trident/7.0; Touch; .NET...; Tablet PC 2.0; rv:11.0) like Gecko

IE11 on Desktop (not laptop):
Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET...; rv:11.0) like Gecko

But even if you tried to check for ARM vs WOW64 or Tablet PC 2.0 (which I think is also present if you connect a Wacom tablet) it would not help for the above reasons.

As you described the situation with the Mac having Gyroscope and also for the same above reasons feature detection does not work either.

---

I think the only solution is to use both DeviceOrientation and MouseEvents as input and initialize both for all devices.

I guess you might ignore MouseEvents for some devices you know for sure they won't be used with a mouse (like maybe iPad, iPhone, Android?, Blackberry?). So a bit the other way round the detection works currently. But even here you do not know for sure e.g. on an Android device or iPad an external keyboard/mouse is used.
Also for some devices you definitely know they are not tablets you could disable DeviceOrientation events. But these would be mostly Macs which at least for now are not on a tablet/hybrid device. But even that might change. Maybe Windows 7 devices could get MouseEvents only but even there are hybrids out there.

A better idea I think as both feature nor device detection do help really I think the best thing to do is to let the user decide. Same as in games which have a setting Mouse/Keyboard or Gamepad or Touch there should be a switch to disable MouseEvents or DeviceOrientationEvents. Parallax just would have to have an API to disable one or the other from websites which of course have to provide these settings UI.

Hope I did not babble too much and made at least my point clear. Please let me know what you think. Thanks!

[cthedot]

Could you please post your User Agent String as per my first comment so I can update the desktop regex to support the MS Surface?

Please rethink this, it won't work :(

[cthedot]

BTW, there is another problem regarding IE11 support. The enable is called once but is called again with a setTimeout where it fails on IE. If this.orientationSupport is changed to window.DeviceOrientationEvent (ideally a helper function maybe) init does work on IE11, else it mostly (?!) fails:

Parallax.prototype.enable = function() {
  ...
  if (window.DeviceOrientationEvent) {

[cthedot]

sorry, did not read your code right. this.orientationSupport is set deliberately but seems supportDelay of 500ms is not long enough for Surface. I tried 1000 and it is better. Still you have to move the device, else orientationSupport just stays disable. Wonder why this is coded like this as even an iPad if laying flat on a table might end up without orientationSupport, or does it?

[wagerfield]

Since pretty much every issue associated with this library concerns compatibility, I recognise that this is it's weakest point. Subsequently I am thinking very hard about how I can implement a solution that allows the deviceorientation and mousemove events to work in harmony with one another and remove all the User Agent sniffing and desktop logic.

Also, thanks for your investigations regarding the if (window.DeviceOrientationEvent) {... in the enable method. I can only assume that the library is being read before IE11 has fully initialised and the boolean orientationSupport flag I am setting on the prototype is null or undefined at the time that it is parsed.

This is all really great stuff and super helpful @cthedot, so thank you once again! I will let you know as and when I implement some more updates.

[cthedot]

@wagerfield actually it is nice you take the time to listen to this. If I can do anything more just let me know

[cthedot]

does close mean fixed or wontfix? At least the demo still does not work (at least not on orientation, tap on screen works).