{"id":20220,"date":"2013-02-22T14:54:38","date_gmt":"2013-02-22T21:54:38","guid":{"rendered":"http:\/\/css-tricks.com\/?p=20220"},"modified":"2013-02-22T16:44:42","modified_gmt":"2013-02-22T23:44:42","slug":"w3conf-luz-caballero-device-disorientation","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/w3conf-luz-caballero-device-disorientation\/","title":{"rendered":"[W3Conf] Luz Caballero: &#8220;Device (dis)orientation?&#8221;"},"content":{"rendered":"<div class=\"explanation\">\n<p>Luz Caballero (<a href=\"https:\/\/twitter.com\/gerbille\" rel=\"noopener\">@gerbille<\/a>) used to be Dev Relations at Opera and talked about the mathematical world of device orientation on mobile devices.<\/p>\n<p><!--more--><\/p>\n<p>These are my notes from her presentation at <a href=\"http:\/\/www.w3.org\/conf\/\" rel=\"noopener\">W3Conf<\/a> in San Francisco as part of <a href=\"https:\/\/css-tricks.com\/category\/w3conf-2013\/\">this live blog series<\/a>.<\/p>\n<\/div>\n<p>Device orientation. It&#8217;s not just &#8220;portrait&#8221; and &#8220;landscape.&#8221; It&#8217;s made of three things:<\/p>\n<ul>\n<li><strong>deviceorientation<\/strong> &#8211; What angle is someone holding the device?<\/li>\n<li><strong>devicemotion<\/strong> &#8211; Is it moving? Is it accelerating?<\/li>\n<li><strong>compassneedscallibration<\/strong> &#8211; What direction is it facing? (This particular event is triggered when the device needs to be recalibrated)<\/li>\n<\/ul>\n<p>There are different types of apps that can make use of this information:<\/p>\n<p><strong>Static application<\/strong> = measure things and make a one-off use of that information (like a maps app)<br \/>\n<strong>Dynamic application<\/strong> = constant moving of device, using that information constantly to affect app (like a driving game)<\/p>\n<p>Luz showed off a cool demo of a teapot drawn in WebGL and rotated it all around in 3D just by moving her phone around. The connection was made from phone to web through Web Sockets.<\/p>\n<p>Orientation is a bit complex mathemantically (<a href=\"http:\/\/commons.wikimedia.org\/wiki\/Tait-Bryan_angles\" rel=\"noopener\">Tait-Bryan angles<\/a>). There are three axis and then different combinations of them. Alpha, Beta, and Gamma (they have other names too, like &#8220;the pitch.&#8221;).<\/p>\n<figure id='post-20231 media-20231' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/02\/math-luz.jpg' alt='' data-recalc-dims=\"1\" \/><figcaption>The math for rotation is crazy stuff.<\/figcaption><\/figure>\n<p>Watch out for the the alpha\/gamma singularity! (I think this is like <a href=\"http:\/\/www.youtube.com\/watch?v=jyaLZHiJJnE\" rel=\"noopener\">crossing the streams<\/a>).<\/p>\n<blockquote class=\"twitter-tweet\">\n<p>&#8220;Accelerometers do not work when the device is pointing up&#8221; alpha gamma singularity @<a href=\"https:\/\/twitter.com\/gerbille\" rel=\"noopener\">gerbille<\/a> <a href=\"https:\/\/twitter.com\/search\/%23W3Conf\" rel=\"noopener\">#W3Conf<\/a><\/p>\n<p>&mdash; Nicole Sullivan (@stubbornella) <a href=\"https:\/\/twitter.com\/stubbornella\/status\/305069138211127298\" rel=\"noopener\">February 22, 2013<\/a><\/p><\/blockquote>\n<p>Some of this can be simplified with <a href=\"https:\/\/github.com\/ernesto-jimenez\/remote-js\" rel=\"noopener\">Remote.js<\/a>. The code for the teapot demo we saw earlier looks a lot more do-able. When a web socket message is received, <\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">avalue = data.alpha \/ 180 * Math.PI;\r\n\/* etc *\/\r\n\r\nteapot.rotation.set(gvalue, avalue, -bvalue);<\/code><\/pre>\n<p>As usual, there is some browser inconsistencies. Luz has a test suite for this stuff <a href=\"https:\/\/github.com\/luzc\/webtests\" rel=\"noopener\">on GitHub<\/a>. There is also differences between devices that are &#8220;natively&#8221; portrait or landscape. Firefox and Opera have different ideas on how you should hold your landscape devices (cords on different sides).<\/p>\n<p>One way to account for these differences is to ask your users to perform a quick test on their current device. Then remember it and use it in the math as needed.<\/p>\n<blockquote class=\"twitter-tweet\">\n<p>Seems like asking the user to calibrate their device when working with device orientation is the only reliable solution. <a href=\"https:\/\/twitter.com\/search\/%23w3conf\" rel=\"noopener\">#w3conf<\/a><\/p>\n<p>&mdash; Tim Hettler (@timhettler) <a href=\"https:\/\/twitter.com\/timhettler\/status\/305071248449347585\" rel=\"noopener\">February 22, 2013<\/a><\/p><\/blockquote>\n<p>Here is <a href=\"https:\/\/github.com\/richtr\/Marine-Compass\" rel=\"noopener\">a 3D Compass Engine<\/a> that handles buffering (for smoother movement). <\/p>\n<p>Support is also spotty for acceleration (Safari), accerationIncludingGravity (Safari, Opera, Firefox), rotationRate (Safari), and interval. You can use <code>if()<\/code> tests to test for support fairly easily.<\/p>\n<h3>Slides<\/h3>\n<p><iframe loading=\"lazy\" src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/16705383\" width=\"427\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px\" allowfullscreen webkitallowfullscreen mozallowfullscreen> <\/iframe><\/p>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Luz Caballero (@gerbille) used to be Dev Relations at Opera and talked about the mathematical world of device orientation on mobile devices.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4,404],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20220"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=20220"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20220\/revisions"}],"predecessor-version":[{"id":20247,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20220\/revisions\/20247"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=20220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=20220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=20220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}