SlideShare a Scribd company logo
The wonderful-
amazing-orientation-
motion-sensormatic-
machine
Andrew Fisher @ajfisher
Web Directions Code - 3 May, 2013
Hi! My name is Andrew Fisher and I’m an interaction researcher and developer and today I’m going to talk to you about the
wonderful, amazing, orientation, motion, sensormatic machines most of us have in our pockets for the next 15 minutes.
Magicaldevices
Harry Potter (c) Warner Bros
Our current crop of smartphones are magical devices...
Image - Harry Potter (C) Warner Bros
Never get lost
They know how to find places.... sort of.
Talk to them
They can understand what we say... mostly.
And they are permanently connected to the internet so
Stay connected
they keep us up to date with the most important things going on in the world right now. But they can do even more than that.
Device API
flickr (cc) Frank Monnerjahn
The Device API allows us to see what orientation a device is in or see how fast it is accelerating through space; all inside the
browser.
http://www.flickr.com/photos/themonnie/2495892146/sizes/l/
Device API
flickr (cc) clevercupcakes
So today I want to give you some tools and techniques so all of you can start using the Device API in your web applications
right now!
http://www.flickr.com/photos/clevercupcakes/4402962654/sizes/l/
Things we’ll cover
1. The DeviceAPI Spec
2. Using the events
3. Examples and demos
To get there we are going to cover off these three things.
The specs as they stand. How we use them and then some example applications.
That’s a lot to cover off in not very long, so let’s get cracking!!
Device API Spec
So let’s look at the spec for some context on how things should work. We’ll start with some reference points then look at the
events and consider support.
Terminology
flickr (cc) liza31337
Before we dive into the guts of the devicemotion and deviceorientation events let’s define some terms because this is where
most of the confusion to do with this spec comes from.
http://www.flickr.com/photos/lizadaly/2510899169/sizes/l/
Which way up?
Devices are considered the right way up based on the usual way they are held. This is largely set by the manufacturer. Notice
the iPad is portrait even though most people hold it landscape. This is important.
Earth frame
flickr (cc) NASA Goddard
The Earth frame are the directions we use on the earth. This is fixed as magnetic north, east and up into space.
As always MDN has a good explanation as well. https://developer.mozilla.org/en-US/docs/DOM/
Orientation_and_motion_data_explained
http://www.flickr.com/photos/gsfc/6760135001/sizes/o/in/set-72157632239701850/
Ground plane
flickr (cc) Alex E. Proimos
The ground plane is the plane of space that is oriented parallel with the ground, like a table top.
http://www.flickr.com/photos/proimos/3922735654/sizes/o/
Axes
Y
Z
X
The X-axis runs left & right in the ground plane, east and west in the earth frame
The y-axis is forward and back in the ground plane, north south in the earth frame
And the Z axis follows the pull of gravity for both with up into space and down to the Earth’s core.
Right Hand Rule
+
-
Rotation around an axis is measured clockwise as you look towards the positive direction of the axis itself. This is called the
right hand rule and it’s really important because it means if you try and use your phone as a compass it will seem to go
backwards. Because you’re looking along the negative direction of the axis!!
Device API Events
devicemotion
deviceorientation
Now we have all that sorted, let’s talk about the two wonderful events we get to play with.
devicemotion
accelerationIncludingGravity.x
accelerationIncludingGravity.y
accelerationIncludingGravity.z
acceleration.x
acceleration.y
acceleration.z
rotationRate.alpha
rotationRate.beta
rotationRate.gamma
interval
Device motion event uses the accelerometer in the device to show us how much acceleration we are experiencing in each
direction.
devicemotion
accelerationIncludingGravity.x
accelerationIncludingGravity.y
accelerationIncludingGravity.z
acceleration.x
acceleration.y
acceleration.z
rotationRate.alpha
rotationRate.beta
rotationRate.gamma
interval
The most useful properties here are the acceleration with and without gravity along the x, y and z axis.
Gravity provides a constant downward acceleration and some hardware can remove the effect. You can do it in code as well
with signal processing but it’s heavy and slows things down. I tend to use whichever is supported natively and if it isn’t it
comes back as a null anyway so you can check for it.
devicemotion
accelerationIncludingGravity.x
accelerationIncludingGravity.y
accelerationIncludingGravity.z
acceleration.x
acceleration.y
acceleration.z
rotationRate.alpha
rotationRate.beta
rotationRate.gamma
interval
There’s also a rotation value showing acceleration around an axis but it’s very poorly supported at the moment and interval
gives you how often it’s being called. But it lies.
Generally though, the acceleration values gives us more than enough to play with.
deviceorientation
alpha
beta
gamma
absolute
The deviceorienation event gives us the rotation position around the three axes from a fixed frame (usually the earth frame).
deviceorientation
Y
Z
X
Beta
Alpha
Gamma
Rather than confusing things with x, y and z we use three new properties on the object.
Alpha, which you can think of like a compass heading.
Beta, which is the tilt forwards and backwards, and
Gamma, which is the tilt left and right.
Support
Orientation
iOS
(Safari &
Chrome)
Android
Chrome
(4.0+)
Android
Stock (3.0+)
Blackberry
10
Firefox
(Device
dependent)
Opera
(Device
dependent)
Motion
iOS
(Safari &
Chrome)
Android
Chrome
(KLP?)
Android
Stock (3.0+)
Blackberry
10
Firefox
(Device
dependent)
Opera
(Device
dependent)
** Note: WinMo support is unknown as I can’t find anyone with a device to test it
https://github.com/ajfisher/deviceapi-normaliser#currently-known-to-work-on
So what sort of support have we got?
It’s actually pretty good right now. Orientation is supported by pretty much all current devices though a touch sketchy on older
android phones prior to Honeycomb.
Motion is supported by everything except Chrome on Android but I’ve seen a commit for it so I expect it to be coming in a
release shortly.
So given this, you’re pretty much good to go for using it.
https://github.com/ajfisher/deviceapi-normaliser#currently-known-to-work-on
Using the API
flickr (cc) Marion Doss
Now we know what the spec give us, let’s see how we use it.
We’ll step through how to hook up the events properly and look at what they really provide data-wise.
http://www.flickr.com/photos/ooocha/2630360492/sizes/l/
Feature detection
var orientation = false;
var motion = false
if (window.DeviceOrientationEvent) {
orientation = true;
}
if (window.DeviceMotionEvent) {
motion = true;
}
See how your device detects here: http://wdc.ajf.io/deviceapi-normaliser/examples/detect.html
Both events are bound to the window object and they are testable to see if you can use them.
Now the gotcha here is that it seems the browser checks if the device API is used and then turns on the hardware.
So make sure you defer your check until document ready or else you’ll get some very wacky feature detection.
http://wdc.ajf.io/deviceapi-normaliser/examples/detect.html
Event handlers
window.addEventListener("deviceorientation", function(event) {
// fires a lot
});
window.addEventListener("devicemotion", function(event) {
// fires even more
});
The event handlers themselves work like any other and just give you an object with the current motion or orientation state.
Something to note is that the spec says this should fire whenever a significant change occurs to orientation or motion. In
practice this means about as fast as the hardware can generate it. I’ve seen some devices do this upwards of 400 times a
second average.
So if you do lots of calculations in your event handling code congratulations you’ve just designed a battery sucking hand
warmer - which is great for cold days when you don’t have gloves!
Event handlers
window.addEventListener("deviceorientation", function(event) {
current_orientation = event;
});
window.addEventListener("devicemotion", function(event) {
current_motion = event;
});
So generally, the way I deal with this is I simply put the event object into a global and then work with it using a timer based on
whatever sample rate you need for the application an example of which you’ll see in a second.
devicemotion
var current_motion = null;
var sample_freq = 100; // sample every 100msec
window.addEventListener("devicemotion", function(event) {
current_motion = event;
}, false);
value_updater = window.setInterval(function() {
if (current_motion !== null) {
$("#xaccelg").text(current_motion.accelerationIncludingGravity.x);
...
}
}, sample_freq);
So with device motion then, it looks something like this. Create your handler and put the event object in your global for later.
Then we have a timed function firing on a sample rate and we look at the current state of the object and then do whatever we
need to. In this case we’re just putting it into the document.
So that basically outputs something like this.
devicemotion
Demoed live - alternate here: http://wdc.ajf.io/deviceapi-normaliser/examples/accel.html
And you can see it changing as I’m moving the device around. If I didn’t have that rate suppression, after about 90 seconds
this would start to lag heavily.
How many G’s can you pull sitting down? Here’s the devicemotion demo just shown http://wdc.ajf.io/deviceapi-normaliser/
examples/accel.html
deviceorientation
var current_orientation = null;
var sample_freq = 100; // sample every 100msec
window.addEventListener("deviceorienation", function(event) {
current_orientation = event;
}, false);
value_updater = window.setInterval(function() {
if (current_orientation !== null) {
orientation = orientationNormalise(current_orientation);
$("#alpha").text(orientation.alpha);
...
}
}, sample_freq);
So device orientation works the same way. Handler, event object to global for later then our timed function at 100milliseconds.
Here I’m normalising the data to cope with browser differences across orientation and then again just displaying it. Which you
can now see in action.
deviceorientation
Demoed live - alternate here: http://wdc.ajf.io/deviceapi-normaliser/examples/gyro.html
Again, without my sampling suppression this would really badly lag after a minute or so.
Devices have some odd ideas of where north is. Here’s the orientation demo just shown http://wdc.ajf.io/deviceapi-normaliser/
examples/gyro.html
Examples and demos
So now we’ve seen how the events work and the techniques to work with them correctly. Let’s look at some applications you
could go and make.
Flick carousel
flickr (cc) [cipher]
Okay this is the height of laziness but you know when you’re hanging on a tram strap and it can be a bit awkward to flick
through a carousel on your phone? Well fret no more.
http://www.flickr.com/photos/h4ck/3068523692/sizes/o/
Flick carousel
Demoed live - alternate here: http://wdc.ajf.io/slideshow/slideshow.html
So this measures a sudden lateral acceleration on the X-axis followed by a stop using some state processing and then it
triggers the animation of the carousel changing.
Want to play with that super lazy slideshow. Well here it is. http://wdc.ajf.io/slideshow/slideshow.html
Tank tag
Web directions WDYK
So that’s motion, but orientation has a lot of applicability to gaming because tilting is a very natural interface for spatial games.
Something I was investigating a year or so ago was the use of a device as a controller for web based multiplayer gaming.
So some of you may have seen or played tank tag - which is a multi-player game using tilt for speed and turning where you
drive around shooting other players. 100 people playing this in the same space is chaos - but fun!
TankTag was built to explore locative multi-player gaming. The code is here if you want to tinker: https://github.com/ajfisher/
tank-tag
Control interfaces
You can also use this interface for single player gaming on the device too.
Racer
Demoed live - alternative here http://wdc.ajf.io/racing_car/
So this is an outrun style game I put together which uses orientation for acceleration and steering to play it, again creating a
natural interface.
You’re all going to want to play with that racing game aren’t you? Play away then: http://wdc.ajf.io/racing_car/
Robotic control
Demoed live
And finally, from controlling a car in a game space to something in the real world
With a bit of node, websockets, an arduino and a raspberry pi you can make an orientation controlled robotics platform that
you can control simply from a web browser.
Give me stuff
Spec: http://dev.w3.org/geo/api/spec-source-orientation.html
Code: https://github.com/ajfisher/wdc
So we’ve covered load today.
What the Device API can do with orientation and motion. How we use them in practice and some examples that should get you
thinking about applications.
All the code for this is in my github and these resources should be hitting twitter momentarily for you to favourite.
The wonderful-
amazing-orientation-
motion-sensormatic-
machine
Andrew Fisher @ajfisher
Web Directions Code 3 May, 2013
So hopefully you should all now have the things you need to go make the most of those amazing, wonderful, orientation,
motion sensormatic machines you have in your hands and pockets.
Thanks!!

More Related Content

Viewers also liked

Retail Store Security
Retail Store SecurityRetail Store Security
Retail Store Security
Ruby Smith
 
Anti theft System 9988885480
Anti theft System 9988885480Anti theft System 9988885480
Anti theft System 9988885480
Profusion India Consulting
 
Retail Security in India
Retail Security in IndiaRetail Security in India
Retail Security in India
Profusion India Consulting
 
Tyco Retail Solutions
Tyco Retail SolutionsTyco Retail Solutions
Tyco Retail Solutions
Tyco Retail Solutions
 
EAS Retail Anti Theft Systems
EAS Retail Anti Theft Systems EAS Retail Anti Theft Systems
EAS Retail Anti Theft Systems
Profusion India Consulting
 
POS and eCommerce Integration
POS and eCommerce IntegrationPOS and eCommerce Integration
POS and eCommerce Integration
Avnish Saxena
 
Store Operation Process
Store Operation ProcessStore Operation Process
Store Operation Process
Shahzad Khan
 
Store Operating Procedure for Store Manager
Store Operating Procedure for Store ManagerStore Operating Procedure for Store Manager
Store Operating Procedure for Store Manager
Kundan Ganvir
 
Indian retail ppt
Indian retail pptIndian retail ppt
Indian retail ppt
Ramendra Tripathi
 
Store Operations ...
Store Operations ...Store Operations ...
Store Operations ...
superstar23
 
Operation Management for Walmart
Operation Management for WalmartOperation Management for Walmart
Operation Management for Walmart
Al Amin Redwanur Rahman, ACA
 

Viewers also liked (11)

Retail Store Security
Retail Store SecurityRetail Store Security
Retail Store Security
 
Anti theft System 9988885480
Anti theft System 9988885480Anti theft System 9988885480
Anti theft System 9988885480
 
Retail Security in India
Retail Security in IndiaRetail Security in India
Retail Security in India
 
Tyco Retail Solutions
Tyco Retail SolutionsTyco Retail Solutions
Tyco Retail Solutions
 
EAS Retail Anti Theft Systems
EAS Retail Anti Theft Systems EAS Retail Anti Theft Systems
EAS Retail Anti Theft Systems
 
POS and eCommerce Integration
POS and eCommerce IntegrationPOS and eCommerce Integration
POS and eCommerce Integration
 
Store Operation Process
Store Operation ProcessStore Operation Process
Store Operation Process
 
Store Operating Procedure for Store Manager
Store Operating Procedure for Store ManagerStore Operating Procedure for Store Manager
Store Operating Procedure for Store Manager
 
Indian retail ppt
Indian retail pptIndian retail ppt
Indian retail ppt
 
Store Operations ...
Store Operations ...Store Operations ...
Store Operations ...
 
Operation Management for Walmart
Operation Management for WalmartOperation Management for Walmart
Operation Management for Walmart
 

Similar to The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine

Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
Codemotion
 
Academy PRO: HTML5 API multimedia
Academy PRO: HTML5 API multimediaAcademy PRO: HTML5 API multimedia
Academy PRO: HTML5 API multimedia
Binary Studio
 
Using AIR for Mobile Development
Using AIR for Mobile DevelopmentUsing AIR for Mobile Development
Using AIR for Mobile Development
Veronique Brossier
 
Optimizing Apps for Better Performance
Optimizing Apps for Better PerformanceOptimizing Apps for Better Performance
Optimizing Apps for Better Performance
Elif Boncuk
 
Augmented reality(my ppt)
Augmented reality(my ppt)Augmented reality(my ppt)
Augmented reality(my ppt)
Srilakshmi Alla
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD UK Ltd
 
Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014
Anna Dahlström
 
Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5
Chris Griffith
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
franksvalli
 
How I hacked the Google Daydream controller
How I hacked the Google Daydream controllerHow I hacked the Google Daydream controller
How I hacked the Google Daydream controller
Matteo Pisani
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
Jon Arne Sæterås
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
Luciano Amodio
 
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash DevelopmentTips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
paultrani
 
Mobile optimization
Mobile optimizationMobile optimization
Mobile optimization
purplecabbage
 
Building an Appier Web - May 2016
Building an Appier Web - May 2016Building an Appier Web - May 2016
Building an Appier Web - May 2016
Andy Davies
 
HMotion: An Algorithm for Human Motion Detection
HMotion: An Algorithm for Human Motion DetectionHMotion: An Algorithm for Human Motion Detection
HMotion: An Algorithm for Human Motion Detection
Lyceum of the Philippines University Batangas
 
Will it run or will it not run? Background processes in Android 6 - Anna Lifs...
Will it run or will it not run? Background processes in Android 6 - Anna Lifs...Will it run or will it not run? Background processes in Android 6 - Anna Lifs...
Will it run or will it not run? Background processes in Android 6 - Anna Lifs...
DroidConTLV
 
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5
Chris Griffith
 
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapCreating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
James Pearce
 
Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014
Jan Jongboom
 

Similar to The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine (20)

Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
 
Academy PRO: HTML5 API multimedia
Academy PRO: HTML5 API multimediaAcademy PRO: HTML5 API multimedia
Academy PRO: HTML5 API multimedia
 
Using AIR for Mobile Development
Using AIR for Mobile DevelopmentUsing AIR for Mobile Development
Using AIR for Mobile Development
 
Optimizing Apps for Better Performance
Optimizing Apps for Better PerformanceOptimizing Apps for Better Performance
Optimizing Apps for Better Performance
 
Augmented reality(my ppt)
Augmented reality(my ppt)Augmented reality(my ppt)
Augmented reality(my ppt)
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
 
Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014
 
Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
 
How I hacked the Google Daydream controller
How I hacked the Google Daydream controllerHow I hacked the Google Daydream controller
How I hacked the Google Daydream controller
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
 
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash DevelopmentTips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
 
Mobile optimization
Mobile optimizationMobile optimization
Mobile optimization
 
Building an Appier Web - May 2016
Building an Appier Web - May 2016Building an Appier Web - May 2016
Building an Appier Web - May 2016
 
HMotion: An Algorithm for Human Motion Detection
HMotion: An Algorithm for Human Motion DetectionHMotion: An Algorithm for Human Motion Detection
HMotion: An Algorithm for Human Motion Detection
 
Will it run or will it not run? Background processes in Android 6 - Anna Lifs...
Will it run or will it not run? Background processes in Android 6 - Anna Lifs...Will it run or will it not run? Background processes in Android 6 - Anna Lifs...
Will it run or will it not run? Background processes in Android 6 - Anna Lifs...
 
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5
 
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapCreating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
 
Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014
 

More from Andrew Fisher

Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardware
Andrew Fisher
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScript
Andrew Fisher
 
A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014
Andrew Fisher
 
Designing a Moving Experience
Designing a Moving ExperienceDesigning a Moving Experience
Designing a Moving Experience
Andrew Fisher
 
Responsive content and user context
Responsive content and user contextResponsive content and user context
Responsive content and user context
Andrew Fisher
 
Datatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesDatatium - radiation free responsive experiences
Datatium - radiation free responsive experiences
Andrew Fisher
 
Web Facilitated Play in the Real World
Web Facilitated Play in the Real WorldWeb Facilitated Play in the Real World
Web Facilitated Play in the Real World
Andrew Fisher
 
Arduino and the real time web
Arduino and the real time webArduino and the real time web
Arduino and the real time web
Andrew Fisher
 
How the web is going physical
How the web is going physicalHow the web is going physical
How the web is going physical
Andrew Fisher
 
Device API - now with added fun
Device API - now with added funDevice API - now with added fun
Device API - now with added fun
Andrew Fisher
 
ad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailers
Andrew Fisher
 
The future of Australian mobile
The future of Australian mobileThe future of Australian mobile
The future of Australian mobile
Andrew Fisher
 
Cloud Sourcing the Business
Cloud Sourcing the BusinessCloud Sourcing the Business
Cloud Sourcing the Business
Andrew Fisher
 

More from Andrew Fisher (13)

Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardware
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScript
 
A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014
 
Designing a Moving Experience
Designing a Moving ExperienceDesigning a Moving Experience
Designing a Moving Experience
 
Responsive content and user context
Responsive content and user contextResponsive content and user context
Responsive content and user context
 
Datatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesDatatium - radiation free responsive experiences
Datatium - radiation free responsive experiences
 
Web Facilitated Play in the Real World
Web Facilitated Play in the Real WorldWeb Facilitated Play in the Real World
Web Facilitated Play in the Real World
 
Arduino and the real time web
Arduino and the real time webArduino and the real time web
Arduino and the real time web
 
How the web is going physical
How the web is going physicalHow the web is going physical
How the web is going physical
 
Device API - now with added fun
Device API - now with added funDevice API - now with added fun
Device API - now with added fun
 
ad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailers
 
The future of Australian mobile
The future of Australian mobileThe future of Australian mobile
The future of Australian mobile
 
Cloud Sourcing the Business
Cloud Sourcing the BusinessCloud Sourcing the Business
Cloud Sourcing the Business
 

Recently uploaded

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 

Recently uploaded (20)

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 

The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine

  • 1. The wonderful- amazing-orientation- motion-sensormatic- machine Andrew Fisher @ajfisher Web Directions Code - 3 May, 2013 Hi! My name is Andrew Fisher and I’m an interaction researcher and developer and today I’m going to talk to you about the wonderful, amazing, orientation, motion, sensormatic machines most of us have in our pockets for the next 15 minutes.
  • 2. Magicaldevices Harry Potter (c) Warner Bros Our current crop of smartphones are magical devices... Image - Harry Potter (C) Warner Bros
  • 3. Never get lost They know how to find places.... sort of.
  • 4. Talk to them They can understand what we say... mostly. And they are permanently connected to the internet so
  • 5. Stay connected they keep us up to date with the most important things going on in the world right now. But they can do even more than that.
  • 6. Device API flickr (cc) Frank Monnerjahn The Device API allows us to see what orientation a device is in or see how fast it is accelerating through space; all inside the browser. http://www.flickr.com/photos/themonnie/2495892146/sizes/l/
  • 7. Device API flickr (cc) clevercupcakes So today I want to give you some tools and techniques so all of you can start using the Device API in your web applications right now! http://www.flickr.com/photos/clevercupcakes/4402962654/sizes/l/
  • 8. Things we’ll cover 1. The DeviceAPI Spec 2. Using the events 3. Examples and demos To get there we are going to cover off these three things. The specs as they stand. How we use them and then some example applications. That’s a lot to cover off in not very long, so let’s get cracking!!
  • 9. Device API Spec So let’s look at the spec for some context on how things should work. We’ll start with some reference points then look at the events and consider support.
  • 10. Terminology flickr (cc) liza31337 Before we dive into the guts of the devicemotion and deviceorientation events let’s define some terms because this is where most of the confusion to do with this spec comes from. http://www.flickr.com/photos/lizadaly/2510899169/sizes/l/
  • 11. Which way up? Devices are considered the right way up based on the usual way they are held. This is largely set by the manufacturer. Notice the iPad is portrait even though most people hold it landscape. This is important.
  • 12. Earth frame flickr (cc) NASA Goddard The Earth frame are the directions we use on the earth. This is fixed as magnetic north, east and up into space. As always MDN has a good explanation as well. https://developer.mozilla.org/en-US/docs/DOM/ Orientation_and_motion_data_explained http://www.flickr.com/photos/gsfc/6760135001/sizes/o/in/set-72157632239701850/
  • 13. Ground plane flickr (cc) Alex E. Proimos The ground plane is the plane of space that is oriented parallel with the ground, like a table top. http://www.flickr.com/photos/proimos/3922735654/sizes/o/
  • 14. Axes Y Z X The X-axis runs left & right in the ground plane, east and west in the earth frame The y-axis is forward and back in the ground plane, north south in the earth frame And the Z axis follows the pull of gravity for both with up into space and down to the Earth’s core.
  • 15. Right Hand Rule + - Rotation around an axis is measured clockwise as you look towards the positive direction of the axis itself. This is called the right hand rule and it’s really important because it means if you try and use your phone as a compass it will seem to go backwards. Because you’re looking along the negative direction of the axis!!
  • 16. Device API Events devicemotion deviceorientation Now we have all that sorted, let’s talk about the two wonderful events we get to play with.
  • 18. devicemotion accelerationIncludingGravity.x accelerationIncludingGravity.y accelerationIncludingGravity.z acceleration.x acceleration.y acceleration.z rotationRate.alpha rotationRate.beta rotationRate.gamma interval The most useful properties here are the acceleration with and without gravity along the x, y and z axis. Gravity provides a constant downward acceleration and some hardware can remove the effect. You can do it in code as well with signal processing but it’s heavy and slows things down. I tend to use whichever is supported natively and if it isn’t it comes back as a null anyway so you can check for it.
  • 19. devicemotion accelerationIncludingGravity.x accelerationIncludingGravity.y accelerationIncludingGravity.z acceleration.x acceleration.y acceleration.z rotationRate.alpha rotationRate.beta rotationRate.gamma interval There’s also a rotation value showing acceleration around an axis but it’s very poorly supported at the moment and interval gives you how often it’s being called. But it lies. Generally though, the acceleration values gives us more than enough to play with.
  • 20. deviceorientation alpha beta gamma absolute The deviceorienation event gives us the rotation position around the three axes from a fixed frame (usually the earth frame).
  • 21. deviceorientation Y Z X Beta Alpha Gamma Rather than confusing things with x, y and z we use three new properties on the object. Alpha, which you can think of like a compass heading. Beta, which is the tilt forwards and backwards, and Gamma, which is the tilt left and right.
  • 22. Support Orientation iOS (Safari & Chrome) Android Chrome (4.0+) Android Stock (3.0+) Blackberry 10 Firefox (Device dependent) Opera (Device dependent) Motion iOS (Safari & Chrome) Android Chrome (KLP?) Android Stock (3.0+) Blackberry 10 Firefox (Device dependent) Opera (Device dependent) ** Note: WinMo support is unknown as I can’t find anyone with a device to test it https://github.com/ajfisher/deviceapi-normaliser#currently-known-to-work-on So what sort of support have we got? It’s actually pretty good right now. Orientation is supported by pretty much all current devices though a touch sketchy on older android phones prior to Honeycomb. Motion is supported by everything except Chrome on Android but I’ve seen a commit for it so I expect it to be coming in a release shortly. So given this, you’re pretty much good to go for using it. https://github.com/ajfisher/deviceapi-normaliser#currently-known-to-work-on
  • 23. Using the API flickr (cc) Marion Doss Now we know what the spec give us, let’s see how we use it. We’ll step through how to hook up the events properly and look at what they really provide data-wise. http://www.flickr.com/photos/ooocha/2630360492/sizes/l/
  • 24. Feature detection var orientation = false; var motion = false if (window.DeviceOrientationEvent) { orientation = true; } if (window.DeviceMotionEvent) { motion = true; } See how your device detects here: http://wdc.ajf.io/deviceapi-normaliser/examples/detect.html Both events are bound to the window object and they are testable to see if you can use them. Now the gotcha here is that it seems the browser checks if the device API is used and then turns on the hardware. So make sure you defer your check until document ready or else you’ll get some very wacky feature detection. http://wdc.ajf.io/deviceapi-normaliser/examples/detect.html
  • 25. Event handlers window.addEventListener("deviceorientation", function(event) { // fires a lot }); window.addEventListener("devicemotion", function(event) { // fires even more }); The event handlers themselves work like any other and just give you an object with the current motion or orientation state. Something to note is that the spec says this should fire whenever a significant change occurs to orientation or motion. In practice this means about as fast as the hardware can generate it. I’ve seen some devices do this upwards of 400 times a second average. So if you do lots of calculations in your event handling code congratulations you’ve just designed a battery sucking hand warmer - which is great for cold days when you don’t have gloves!
  • 26. Event handlers window.addEventListener("deviceorientation", function(event) { current_orientation = event; }); window.addEventListener("devicemotion", function(event) { current_motion = event; }); So generally, the way I deal with this is I simply put the event object into a global and then work with it using a timer based on whatever sample rate you need for the application an example of which you’ll see in a second.
  • 27. devicemotion var current_motion = null; var sample_freq = 100; // sample every 100msec window.addEventListener("devicemotion", function(event) { current_motion = event; }, false); value_updater = window.setInterval(function() { if (current_motion !== null) { $("#xaccelg").text(current_motion.accelerationIncludingGravity.x); ... } }, sample_freq); So with device motion then, it looks something like this. Create your handler and put the event object in your global for later. Then we have a timed function firing on a sample rate and we look at the current state of the object and then do whatever we need to. In this case we’re just putting it into the document. So that basically outputs something like this.
  • 28. devicemotion Demoed live - alternate here: http://wdc.ajf.io/deviceapi-normaliser/examples/accel.html And you can see it changing as I’m moving the device around. If I didn’t have that rate suppression, after about 90 seconds this would start to lag heavily. How many G’s can you pull sitting down? Here’s the devicemotion demo just shown http://wdc.ajf.io/deviceapi-normaliser/ examples/accel.html
  • 29. deviceorientation var current_orientation = null; var sample_freq = 100; // sample every 100msec window.addEventListener("deviceorienation", function(event) { current_orientation = event; }, false); value_updater = window.setInterval(function() { if (current_orientation !== null) { orientation = orientationNormalise(current_orientation); $("#alpha").text(orientation.alpha); ... } }, sample_freq); So device orientation works the same way. Handler, event object to global for later then our timed function at 100milliseconds. Here I’m normalising the data to cope with browser differences across orientation and then again just displaying it. Which you can now see in action.
  • 30. deviceorientation Demoed live - alternate here: http://wdc.ajf.io/deviceapi-normaliser/examples/gyro.html Again, without my sampling suppression this would really badly lag after a minute or so. Devices have some odd ideas of where north is. Here’s the orientation demo just shown http://wdc.ajf.io/deviceapi-normaliser/ examples/gyro.html
  • 31. Examples and demos So now we’ve seen how the events work and the techniques to work with them correctly. Let’s look at some applications you could go and make.
  • 32. Flick carousel flickr (cc) [cipher] Okay this is the height of laziness but you know when you’re hanging on a tram strap and it can be a bit awkward to flick through a carousel on your phone? Well fret no more. http://www.flickr.com/photos/h4ck/3068523692/sizes/o/
  • 33. Flick carousel Demoed live - alternate here: http://wdc.ajf.io/slideshow/slideshow.html So this measures a sudden lateral acceleration on the X-axis followed by a stop using some state processing and then it triggers the animation of the carousel changing. Want to play with that super lazy slideshow. Well here it is. http://wdc.ajf.io/slideshow/slideshow.html
  • 34. Tank tag Web directions WDYK So that’s motion, but orientation has a lot of applicability to gaming because tilting is a very natural interface for spatial games. Something I was investigating a year or so ago was the use of a device as a controller for web based multiplayer gaming. So some of you may have seen or played tank tag - which is a multi-player game using tilt for speed and turning where you drive around shooting other players. 100 people playing this in the same space is chaos - but fun! TankTag was built to explore locative multi-player gaming. The code is here if you want to tinker: https://github.com/ajfisher/ tank-tag
  • 35. Control interfaces You can also use this interface for single player gaming on the device too.
  • 36. Racer Demoed live - alternative here http://wdc.ajf.io/racing_car/ So this is an outrun style game I put together which uses orientation for acceleration and steering to play it, again creating a natural interface. You’re all going to want to play with that racing game aren’t you? Play away then: http://wdc.ajf.io/racing_car/
  • 37. Robotic control Demoed live And finally, from controlling a car in a game space to something in the real world With a bit of node, websockets, an arduino and a raspberry pi you can make an orientation controlled robotics platform that you can control simply from a web browser.
  • 38. Give me stuff Spec: http://dev.w3.org/geo/api/spec-source-orientation.html Code: https://github.com/ajfisher/wdc So we’ve covered load today. What the Device API can do with orientation and motion. How we use them in practice and some examples that should get you thinking about applications. All the code for this is in my github and these resources should be hitting twitter momentarily for you to favourite.
  • 39. The wonderful- amazing-orientation- motion-sensormatic- machine Andrew Fisher @ajfisher Web Directions Code 3 May, 2013 So hopefully you should all now have the things you need to go make the most of those amazing, wonderful, orientation, motion sensormatic machines you have in your hands and pockets. Thanks!!