Chapter 11 The touch interface and accessing hardware Flashcards
where can you find the information provided by gyroscopes, compasses, and accelerometers?
HTML5 DeviceOrientation Event API Specification created by the W3C.
How many and what events are contained in the DevicePOrientation Event API?
devicemotion
device orientation
compassneedscalibration
What is devicemotion?
This event is automatically and continually fired passing information received from the motion sensing hardware.
What is deviceorientation?
This event is automatically fired when a major change in the device orientation occurs.
What is compassneedscalibration?
This event is automatically fired if it is determined that there is a difference in the motion sensing data that is being gathered from the motion sensing hardware.
What coordinates are used to provide information from motion sensing hardware?
x, y and z coordinates.
What is the alpha value?
Rotation of the z axis
What is the beta value?
Rotation of the x axis
What is the gamma value?
Rotation of the y axis
Is deviceorientation part of window object?
Yes, it is part of window object and the event listener must be added to the window object.
What is the js for deviceorientation?
AddEventListener and Collect Data
window.addEventListener('deviceorientation', function(event) {
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// Do something
}, false);What are the two property that devicemotion provides?
Acceleration property
rorationRate property
accelerationIncludingGravity
What is rotationRate property?
The rotationRate property provides the rotation rate in degrees per second around each axis
What attribute to use when capturing still video, picture and audio by using a web cam?
Example 1: Take a Still Picture using web cam
Example 2: Capture Video using web cam
Example 3: Capture Audio using microphone device
***accept=”audio/”capture
what is getUserMedia() used for?
The getUserMedia() function is part of this specification that is used to get the video or still image that can then be streamed to a video control
There is no src attribute.
What is the javascript for getUserMedia()?
Streaming Video using getUserMedia()
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
What is geolocation APi?
The geolocation API is used to get the physical location of the device based on the GPS coordinates of a phone, or the IP address of a PC, laptop, or tablet.
What property does geolocation use?
The Geolocation object contains the getCurrentPosition() method that is used to retrieve the latitude and longitude coordinates of the device.
What is web worker?
The Web Workers API is used to run JavaScript code in the background that does not require the web page to wait before allowing the user to continue using and interacting with the web page. Web workers are great for lengthy calculations and complex code that takes a long time to execute.
How to create a web worker?
the JavaScript code that you want to execute must be saved in an external text file with a .js file extension.
It must include worker() method and providing external JS file as the parameter
Create a Web Worker Object
var myWebWorker = new Worker("webWorkerCode.js");
What is postmessage() used for?
The postMessage() method should be used inside of the external JavaScript file to update the web page with the status of the web worker code that is running in the background. This message can be used to inform the user that the web worker has completed
How to terminate the webworker?
myWebWorker.terminate();
What is file API?
The File API in HTML5 provides a standard way to work with local files on the user’s device. Files can be selected and read using the File API for a number of different purposes.
What are the buttons for file api in chrome and IE?
In chrome = Button = Choose file
IE = button = browse..
What is filelist?
The FileList is an arrary of file objects that have been selected.
What is filereader object used for?
Reads the contents of a file?
What are the events in gestures?
Touchstart, touchmove, touchend
What are some of the libraries that supports gestures?
hammer.js Gesture Library.
is there a gesture specification created by W3C?
Nope, there is only specifications from microsoft, apple and android gesture.
What is touchstart event?
When the user first touches a DOM element on the touch screen
What is touchend?
When the user stops touching the DOM element on the touch screen
What is touchmove?
When the touch point moves across the surface
What is touchcancel?
When the application cancels the touch or the finger moves outside of a touch area or off the display.
