Chapter 11 The touch interface and accessing hardware

Question 1

where can you find the information provided by gyroscopes, compasses, and accelerometers?

Answer 1

HTML5 DeviceOrientation Event API Specification created by the W3C.

Question 2

How many and what events are contained in the DevicePOrientation Event API?

Answer 2

devicemotion
device orientation
compassneedscalibration

Question 3

What is devicemotion?

Answer 3

This event is automatically and continually fired passing information received from the motion sensing hardware.

Question 4

What is deviceorientation?

Answer 4

This event is automatically fired when a major change in the device orientation occurs.

Question 5

What is compassneedscalibration?

Answer 5

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.

Question 6

What coordinates are used to provide information from motion sensing hardware?

Answer 6

x, y and z coordinates.

Question 7

What is the alpha value?

Answer 7

Rotation of the z axis

Question 8

What is the beta value?

Answer 8

Rotation of the x axis

Question 9

What is the gamma value?

Answer 9

Rotation of the y axis

Question 10

Is deviceorientation part of window object?

Answer 10

Yes, it is part of window object and the event listener must be added to the window object.

Question 11

What is the js for deviceorientation?

Answer 11

AddEventListener and Collect Data
window.addEventListener('deviceorientation', function(event) {
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// Do something
}, false);

Question 12

What are the two property that devicemotion provides?

Answer 12

Acceleration property
rorationRate property
accelerationIncludingGravity

Question 13

What is rotationRate property?

Answer 13

The rotationRate property provides the rotation rate in degrees per second around each axis

Question 14

What attribute to use when capturing still video, picture and audio by using a web cam?

Answer 14

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

Question 15

what is getUserMedia() used for?

Answer 15

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.

Question 16

What is the javascript for getUserMedia()?

Answer 16

Streaming Video using getUserMedia()

navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);

Question 17

What is geolocation APi?

Answer 17

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.

Question 18

What property does geolocation use?

Answer 18

The Geolocation object contains the getCurrentPosition() method that is used to retrieve the latitude and longitude coordinates of the device.

Question 19

What is web worker?

Answer 19

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.

Question 20

How to create a web worker?

Answer 20

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");

Question 21

What is postmessage() used for?

Answer 21

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

Question 22

How to terminate the webworker?

Answer 22

myWebWorker.terminate();

Question 23

What is file API?

Answer 23

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.

Question 24

What are the buttons for file api in chrome and IE?

Answer 24

In chrome = Button = Choose file

IE = button = browse..

Question 25

What is filelist?

Answer 25

The FileList is an arrary of file objects that have been selected.

Question 26

What is filereader object used for?

Answer 26

Reads the contents of a file?

Question 27

What are the events in gestures?

Answer 27

Touchstart, touchmove, touchend

Question 28

What are some of the libraries that supports gestures?

Answer 28

hammer.js Gesture Library.

Question 29

is there a gesture specification created by W3C?

Answer 29

Nope, there is only specifications from microsoft, apple and android gesture.

Question 30

What is touchstart event?

Answer 30

When the user first touches a DOM element on the touch screen

Question 31

What is touchend?

Answer 31

When the user stops touching the DOM element on the touch screen

Question 32

What is touchmove?

Answer 32

When the touch point moves across the surface

Question 33

What is touchcancel?

Answer 33

When the application cancels the touch or the finger moves outside of a touch area or off the display.