106a XDK: How Does Cordova Demo App Work?

This tutorial explains the codes used in the previous tutorial, http://xdk-steps.blogspot.my/2016/12/106-xdk-create-cordova-demo-app.html

Before reading this tutorial, you need to understand the role of the following files:

1. index.html

2. init-app.js

3. app.js

You may refer this tutorial, http://xdk-steps.blogspot.my/2016/12/105a-xdk-how-does-cordova-starter-app.html , that explains about the these three files.

File: index.html

This file prepares the user interface objects ie the HTML elements.

After the HTML elements are rendered on the screen, this file executes the javascript files.

File: init-app.js

This file binds the HTML elements, events and user codes.

File: app.js

This file contains the user codes.

There are four other js files namely cordova-acc.js, cordova-geo.js, moment.js and ua-parser.js. These scripts are used for providing additional functions needed during the run time.

File: index.html

<!DOCTYPE html>

<html>

<head>

<title>Hello, Apache Cordova!</title>

<style>

/* following three viewport lines are equivalent to third meta viewport statement above, and is needed for Windows */

/* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html and http://dev.w3.org/csswg/css-device-adapt/ */

@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }

@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }

@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; } @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }

</style>

</head>

<body>

<h1 class="align-center">Hello, Apache Cordova!!</h1>

<h2 id="id_cordova" class="align-center">Indicate Cordova presence here...</h2>

<div id="id_windowCordova" class="event">Waiting for window.cordova...</div>

</div>

<div class="event listening">Waiting for Device Ready...</div>

<div class="event received">Device Ready Event Received!</div>

<div class="event failed">No Device Ready Event Detected...</div>

</div>

<div id="id_msgBar" class="event listening"><span>debug messages go here...</span></div>

</div>

<hr>

<br>

</div>

<hr>

</div>

<div class="flex-item-left right-justify info-label">Accel-X:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">Accel-Y:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">Accel-Z:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">Accel-T:<span>  </span></div>

</div>

<hr>

</div>

<div class="flex-item-left right-justify info-label"><span>Compass:</span>  </div>

</div>

<hr>

</div>

<div class="flex-item-left right-justify info-label">GeoInfo:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">GeoMode:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">GeoLatitude:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">GeoLongitude:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">GeoAccuracy:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">GeoAltitude:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">GeoAltAcc:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">GeoHeading:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">GeoSpeed:<span>  </span></div>

</div>

<div class="flex-item-left right-justify info-label">GeoTime:<span>  </span></div>

</div>

<hr>

<div class="flex-item-left right-justify info-label"><span>Cordova Version:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>Device Platform:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>Device Version:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>Device Name:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>Device UUID:</span>  </div>

</div>

<hr>

<div class="flex-item-left right-justify info-label"><span>Runtime Vendor:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>Runtime Platform:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>User Agent String:</span>  </div>

</div>

<hr>

<div class="flex-item-left right-justify info-label"><span>screen.width:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>screen.height:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>window.innerWidth:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>window.innerHeight:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>document.documentElement.clientWidth:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>document.documentElement.clientHeight:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>device pixel ratio:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>screen aspect ratio:</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>device width (est):</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>device height (est):</span>  </div>

</div>

<!--

<div class="flex-item-left right-justify info-label"><span>screen width (est):</span>  </div>

</div>

<div class="flex-item-left right-justify info-label"><span>screen height (est):</span>  </div>

</div>

-->

</div>

<hr>

<a rel="LICENSE" href="javascript: window.open('https://software.intel.com/en-us/xdk/article/intel-html5-samples-license-terms-and-conditions','_system')">License Terms and Conditions</a>

</address>

</div>

</body>

<!--

Recommended JavaScript library load order for hybrid Cordova apps:

* "Device-Independent" JavaScript libraries.

* optional: weinre debug script tag for remote console debug (see notes).

* Intel XDK device JavaScript library.

* Cordova/PhoneGap device JavaScript library.

* "Device-Dependent" JavaScript libraries.

* Application JavaScript <script> tags and libraries.

* optional: weinre debug script tag for remote console debug (see notes).

In complex projects, the JavaScript load order is important. You must insure that the underlying

device API native code finishes its init, which usually takes longer than the webview init...

VERY IMPORTANT: notice that all of the libraries used in this project are located within the app's

local directories, which means they will get bundled with the app. They are NOT being pulled in

over the net. In most cases, this is what you should be doing when you build a hybrid mobile app.

This insures that you always use the JS code that you debugged against AND that you are not requiring

a data connection (network connection) to get the app started. If your app startup required a data

connection to initialize and start interaction with the user, lack of a reliable network connection

could be disasterous. Not to mention it generally results in a slower load time. Loading locally is

is much friendlier to your end user's data plan and battery. :-)

NOTE: do not use a directory prefix with the cordova.js file - it is inserted automatically

by the build system, emulator and other tools and is assumed to be in the index.html source directory.

You will not find this JS file anywhere in your project, it is a "phantom" library. If you do see

copies of this file as part of your project it should be removed to avoid confusing the Intel XDK.

LIBRARY NOTE: If you are using a large number of JavaScript libraries, especially third-party libraries

(like jQuery, {{ mustache }}, Underscore, etc.) that are "independent" of the device APIs provided

by the Cordova library and plugins - and they are independent of your application - your

app initialization will be most successful if you load these libraries BEFORE the Cordova JS file,

in the <head> section of your index.html file. Obviously, any code that depends on Cordova APIs

must be loaded AFTER the cordova.js library.

Libraries that are "independent" of the device APIs are libraries that you could use in a desktop

browser in a normal web page or web app. "Dependent" libraries are, most likely, your own code

that you've written specifically to work with the Cordova device APIs. In some cases,

if your device-dependent code requires access to device-independent code to get started, you may

have to use something like CommonJS to force the device-dependent code to wait for the device-

independent code to initialize, otherwise you may have trouble getting your app started.

Because of this added dependency on the underlying native code (device) initialization, you should

not use the "document ready" event to start your application. You should wait for the "device ready"

event before you begin your application (if it uses any device APIs); in practice, it is best to wait

for both. (See the init-dev.js file in this template for an example of how to do this, it generates

a custom "app.Ready" event that you can trigger off of and just forget about the other events.)

NOTE: *any* library that redefines addEventListener() or fiddles with outstanding events may

interfere with capturing the "device ready" event and should, therefore, be placed *BEFORE*

the Cordova JS library in the load order.

ALSO: if you use weinre for debugging (ala the Test tab or your own), you may have to experiment with

the placement of the weinre script. Some recommended locations are shown within. If these locations

do not work, you may have to experiment. The optimum placement can be app-specific, primarily as a

function of the included JavaScript libraries and your initialization.

-->

</html>

File: init-app.js

* Please see included README.md and LICENSE.md files for license terms and conditions.

/*jslint browser:true, devel:true, white:true, vars:true */

/*global $:false, intel:false, device:false, cordova:false */

/*global app:false, dev:false, acc:false, geo:false */

/*global UAParser:false */

window.app = window.app || {} ; // don't clobber existing app object

app.init = app.init || {} ; // don't clobber existing app.init object

app.uaParser = {} ; // for holding the user agent object

// The console.log() messages sprinkled in this file are for instruction and debug.

// If you reuse this code you do not need to include them as part of your app.

// Set to "true" if you want the console.log messages to appear.

app.init.LOG = true ;

app.init.consoleLog = function() { // only emits console.log messages if app.init.LOG != false

"use strict" ;

if( app.init.LOG ) {

var args = Array.prototype.slice.call(arguments, 0) ;

console.log.apply(console, args) ;

}

} ;

// App init point (runs on custom app.Ready event from init-dev.js).

// Runs after underlying device native code and webview/browser is ready.

// Where you should "kick off" your application by initializing app events, etc.

app.init.events = function() {

"use strict" ;

var fName = "app.init.events():" ;

app.init.consoleLog(fName, "entry") ;

// Main app starting point (dev.onDeviceReady kicks off with "app.Ready" event).

// Runs after underlying device native code and webview/browser is initialized.

// Where you should "kick off" your application by initializing app events, etc.

// NOTE: initialize third-party libraries and event handlers

app.uaParser = new UAParser() ;

app.init.consoleLog(fName, "UAParserJS results object:", app.uaParser.getResult()) ;

// NOTE: initialize your application code

acc.initAccel() ;

acc.initCompass() ;

geo.initGeoLocate() ;

app.updateDeviceInfo() ;

app.updateViewportInfo() ;

// NOTE: initialize your app event handlers

// See main.js, cordova-acc.js and cordova-geo.js for event handlers.

// TODO: configure following to work with both touch and click events (mouse + touch)

// see http://msopentech.com/blog/2013/09/16/add-pinch-pointer-events-apache-cordova-phonegap-app/

var el, evt ;

if( navigator.msPointerEnabled || !('ontouchend' in window)) // if on Win 8 machine or no touch

evt = "click" ; // let touch become a click event

else // else, assume touch events available

evt = "touchend" ; // not optimum, but works

el = document.getElementById("id_btnBeep") ;

el.addEventListener(evt, app.btnBeep, false) ;

el = document.getElementById("id_btnVibrate") ;

el.addEventListener(evt, app.btnVibrate, false) ;

el = document.getElementById("id_btnBarkCordova") ;

el.addEventListener(evt, app.btnBarkCordova, false) ;

el = document.getElementById("id_btnBarkHTML5") ;

el.addEventListener(evt, app.btnBarkHTML5, false) ;

el = document.getElementById("id_btnAccel") ;

el.addEventListener(evt, acc.btnAccel, false) ;

el = document.getElementById("id_btnCompass") ;

el.addEventListener(evt, acc.btnCompass, false) ;

el = document.getElementById("id_btnGeoFine") ;

el.addEventListener(evt, geo.btnGeoFine, false) ;

el = document.getElementById("id_btnGeoCoarse") ;

el.addEventListener(evt, geo.btnGeoCoarse, false) ;

el = document.getElementById("id_btnGeo") ;

el.addEventListener(evt, geo.btnGeo, false) ;

// NOTE: ...you can put other miscellaneous init stuff in this function...

// NOTE: ...and add whatever else you want to do now that the app has started...

app.init.debug() ; // just for debug, not required; keep it if you want it or get rid of it

app.init.hideSplashScreen() ; // after init is good time to remove splash screen; using a splash screen is optional

// app initialization is done

// app event handlers are ready

// exit to idle state and just wait for events...

app.init.consoleLog(fName, "exit") ;

} ;

document.addEventListener("app.Ready", app.init.events, false) ;

// Primarily for debug and demonstration.

// Update our status in the main view. Are we running in a Cordova container or in a browser?

app.init.debug = function() {

"use strict" ;

var fName = "app.init.debug():" ;

app.init.consoleLog(fName, "entry") ;

if( window.device && device.cordova ) { // old Cordova 2.x version detection

app.init.consoleLog("device.cordova: " + device.cordova) ; // print the cordova version string...

app.init.consoleLog("device.model: " + device.model) ; // on Cordova 3.0+ these require that

app.init.consoleLog("device.platform: " + device.platform) ; // the Cordova Device plugin is installed

app.init.consoleLog("device.version: " + device.version) ; // if not, they will not exist

}

if( window.Cordova ) // Cordova webview detection test...

app.init.consoleLog("window.Cordova typeof: " + typeof window.Cordova ) ;

// Most useful property (below) is cordova.platformId, which can help you determine the precise platform

// on which your Cordova app is running. As of June, 2015 the values you could encounter are:

// amazon-fireos, android, blackberry10, browser, firefoxos, ios, osx, ubuntu, webos, windows, windowsphone, windows8

// See cordova.platformId definition here: https://github.com/apache/cordova-js/blob/master/src/cordova.js

// Example "id" definition: https://github.com/apache/cordova-android/blob/master/cordova-js-src/platform.js

// To detect Crosswalk, detect "android" and look for the word "Crosswalk" in the navigator.userAgent string.

if( window.cordova && cordova.version ) { // only present in Cordova 3.0+

if( cordova.version ) // Cordova 3.0+ framework version string

app.init.consoleLog("cordova.version: " + cordova.version) ;

if( cordova.platformId ) // Cordova 3.1+ platform ID (see above)

app.init.consoleLog("cordova.platformId: " + cordova.platformId) ;

if( cordova.require ) { // print included cordova plugins

app.init.consoleLog(JSON.stringify(cordova.require('cordova/plugin_list').metadata, null, 1)) ;

}

// Following is for demonstration and debug.

// Update the "system ready" and "cordova present" indicators on our display.

var el, text, node ;

el = document.getElementById("id_windowCordova") ;

text = "window.cordova is NOT present" ;

if( window.cordova )

text = "window.cordova IS present" ;

if( el ) {

node = document.createTextNode(text) ;

el.replaceChild(node,el.childNodes[0]) ;

}

el = document.getElementById("id_cordova") ;

var parentElement = document.getElementById("id_deviceReady") ;

var listeningElement = parentElement.querySelector('.listening') ;

var receivedElement = parentElement.querySelector('.received') ;

var failedElement = parentElement.querySelector('.failed') ;

// set the "system ready" indicator on our display

if( window.Cordova && dev.isDeviceReady.c_cordova_ready__) {

el.innerHTML = "Cordova device ready detected!" ;

listeningElement.setAttribute('style', 'display:none;') ;

receivedElement.setAttribute('style', 'display:block;') ;

failedElement.setAttribute('style', 'display:none;') ;

}

else if( window.intel && intel.xdk && dev.isDeviceReady.d_xdk_ready______ ) {

el.innerHTML = "Intel XDK device ready detected!" ;

listeningElement.setAttribute('style', 'display:none;') ;

receivedElement.setAttribute('style', 'display:block;') ;

failedElement.setAttribute('style', 'display:none;') ;

}

else {

el.innerHTML = "Must be in a browser..." ;

listeningElement.setAttribute('style', 'display:none;') ;

receivedElement.setAttribute('style', 'display:none;') ;

failedElement.setAttribute('style', 'display:block;') ;

}

app.init.consoleLog(fName, "exit") ;

} ;

// Using a splash screen is optional. This function will not fail if none is present.

// This is also a simple study in the art of multi-platform device API detection.

app.init.hideSplashScreen = function() {

"use strict" ;

var fName = "app.init.hideSplashScreen():" ;

app.init.consoleLog(fName, "entry") ;

// see https://github.com/01org/appframework/blob/master/documentation/detail/%24.ui.launch.md

// Do the following if you disabled App Framework autolaunch (in index.html, for example)

// $.ui.launch() ;

if( navigator.splashscreen && navigator.splashscreen.hide ) { // Cordova API detected

navigator.splashscreen.hide() ;

}

if( window.intel && intel.xdk && intel.xdk.device ) { // Intel XDK device API detected, but...

if( intel.xdk.device.hideSplashScreen ) // ...hideSplashScreen() is inside the base plugin

intel.xdk.device.hideSplashScreen() ;

}

app.init.consoleLog(fName, "exit") ;

} ;

File: app.js

/*
* Copyright (c) 2013-2016, Paul Fischer, Intel Corporation. All rights reserved.
* Please see included README.md and LICENSE.md files for license terms and conditions.
*/

/*jslint browser:true, devel:true, white:true, vars:true */
/*global $:false, intel:false, Media:false, moment:false */
/*global app:false, getWebPath:false, getWebRoot:false */

window.app = window.app || {} ; // don't clobber existing app object

// The console.log() messages sprinkled in this file are for instruction and debug.
// If you reuse this code you do not need to include them as part of your app.
// Set to "true" if you want the console.log messages to appear.

app.LOG = true ;
app.consoleLog = function() { // only emits console.log messages if app.LOG != false
"use strict" ;
if( app.LOG ) {
var args = Array.prototype.slice.call(arguments, 0) ;
console.log.apply(console, args) ;
}
} ;

app.btnBeep = function() {
"use strict" ;
var fName = "app.btnBeep():" ;
app.consoleLog(fName, "entry") ;

try {
navigator.notification.beep(1) ;
app.consoleLog(fName, "try succeeded.") ;
}
catch(e) {
app.consoleLog(fName, "try failed", e) ;
}

app.consoleLog(fName, "exit") ;
} ;

app.btnVibrate = function() {
"use strict" ;
var fName = "app.btnVibrate():" ;
app.consoleLog(fName, "entry") ;

try {
navigator.notification.vibrate(250) ;
app.consoleLog(fName, "try succeeded.") ;
}
catch(e) {
app.consoleLog(fName, "try failed:", e) ;
}

app.consoleLog(fName, "exit") ;
} ;

app.btnBarkCordova = function() {
"use strict" ;
var fName = "app.btnBarkCordova():" ;
app.consoleLog(fName, "entry") ;

try {
var w = window.device && window.device.platform ;
var x = navigator.userAgent ;
var y = getWebPath() ;
var z = getWebRoot() ;
app.consoleLog(fName, "platform = ", w) ;
app.consoleLog(fName, "userAgent = ", x) ;
app.consoleLog(fName, "getWebPath() => ", y) ;
app.consoleLog(fName, "getWebRoot() => ", z) ;

var path = "audio/bark.wav" ;
// if( z.match(/\/emulator.*\/ripple\/userapp/i) ) { // if in the Emulate tab
if( window.tinyHippos ) { // if in the Emulate tab
path = z + "/" + path ;
}
else if( x.match(/(ios)|(iphone)|(ipod)|(ipad)/ig) ) { // if on a real iOS device
// path = "audio/bark.mp3" ;
path = "/" + path ;
// path = path ;
// path = y.substring(7) + "/" + path ;
// path = "cdvfile:" + y.substring(6) + "/" + path ;
}
else { // everything else...
path = z + "/" + path ;
}

var media = new Media(path, mediaSuccess, mediaError, mediaStatus) ;
app.consoleLog(fName, "media.src = ", media.src) ;
media.play() ;
app.consoleLog(fName, "try succeeded.") ;
}
catch(e) {
app.consoleLog(fName, "try failed:", e) ;
}

// private functions for our media object

function mediaSuccess() {
media.stop() ;
media.release() ;
app.consoleLog(fName, "mediaSuccess") ;
}
function mediaError(err) {
media.stop() ;
media.release() ;
app.consoleLog(fName, "mediaError:err.code: " + err.code + " ; " + "mediaError:err.message: " + err.message) ;
}
function mediaStatus(status) {
var msg = "undefined" ;
switch(status) {
case 0: msg = "MEDIA_NONE" ; break ;
case 1: msg = "MEDIA_STARTING" ; break ;
case 2: msg = "MEDIA_RUNNING" ; break ;
case 3: msg = "MEDIA_PAUSED" ; break ;
case 4: msg = "MEDIA_STOPPED" ; break ;
default: msg = "MEDIA_undefined" ;
}
app.consoleLog(fName, "mediaStatus: " + status + " = " + msg) ;
}

app.consoleLog(fName, "exit") ;
} ;

app.btnBarkHTML5 = function() {
"use strict" ;
var fName = "app.btnBarkHTML5():" ;
app.consoleLog(fName, "entry") ;

var a = document.getElementsByTagName("audio")[0] ;
a.play() ;

app.consoleLog(fName, "exit") ;
} ;

app.updateDeviceInfo = function() {
"use strict" ;
var fName = "app.updateDeviceInfo():" ;
app.consoleLog(fName, "entry") ;

// "device" global object contains device capabilities (device.name, device.platform, device.uuid, etc.)
// and is only present when we are running under Cordova (or an appropriate emulator)
// AND have installed the device plugin if running under Cordova 3.0 or higher

if(window.cordova && window.device) {
if(window.device.name) {
document.getElementById("id_deviceName").textContent = window.device.name ;
}
else {
document.getElementById("id_deviceName").textContent = window.device.model ;
}

if(window.device.phonegap) {
document.getElementById("id_deviceCordova").textContent = window.device.phonegap ;
}
else {
document.getElementById("id_deviceCordova").textContent = window.device.cordova ;
}

document.getElementById("id_deviceUUID").textContent = window.device.uuid ;
document.getElementById("id_devicePlatform").textContent = window.device.platform ;
document.getElementById("id_deviceVersion").textContent = window.device.version ;
}
document.getElementById("id_navigatorVendor").textContent = navigator.vendor ;
document.getElementById("id_navigatorPlatform").textContent = navigator.platform ;
document.getElementById("id_navigatorUserAgent").textContent = navigator.userAgent ;

app.consoleLog(fName, "exit") ;
} ;

// An attempt to help understand what the pixel units of a viewport are and an attempt
// to calculate the physical pixel resolution, which really shouldn't be used or relied
// on in an app, but some developers always want to know what that number is...
// see http://stackoverflow.com/questions/27382331/how-a-css-pixel-size-is-calculated
// and http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html

app.updateViewportInfo = function() {
"use strict" ;
var fName = "app.updateViewportInfo():" ;
app.consoleLog(fName, "entry") ;

var view = {
screenWidth: null, // screen width reported
screenHeight: null,
windowWidth: null, // window width reported
windowHeight: null,
documentWidth: null, // document width reported
documentHeight: null,
devicePixelWidth: null, // device physical pixel width calculated
devicePixelHeight: null,
deviceScreenWidth: null, // device physical screen width calculated
deviceScreenHeight: null,
dpr: null, // reported device pixel ratio
ratio: null // screen aspect ratio (e.g. 16:9 = 1.777777777)
} ;

measureScreen() ; // update screen measurements
document.getElementById("id_screenWidth").textContent = view.screenWidth ;
document.getElementById("id_screenHeight").textContent = view.screenHeight ;

measureWindow() ; // ditto
document.getElementById("id_windowWidth").textContent = view.windowWidth ;
document.getElementById("id_windowHeight").textContent = view.windowHeight ;

measureDocument() ;
document.getElementById("id_documentWidth").textContent = view.documentWidth ;
document.getElementById("id_documentHeight").textContent = view.documentHeight ;

measureDevicePixelRatio() ;
document.getElementById("id_devicePixelRatio").textContent = view.dpr ;

measureScreenAspectRatio() ;
document.getElementById("id_screenAspectRatio").textContent = view.ratio ;

calculatePhysicalPixels() ;
document.getElementById("id_devicePixelWidth").textContent = view.devicePixelWidth ;
document.getElementById("id_devicePixelHeight").textContent = view.devicePixelHeight ;

// calculateScreenSize() ;
// document.getElementById("id_deviceScreenWidth").textContent = view.deviceScreenWidth ;
// document.getElementById("id_deviceScreenHeight").textContent = view.deviceScreenHeight ;

// screen.width/height is supposed to report CSS pixels of entire display
// represents the "ideal viewport" if your app consumed the entire display
function measureScreen() {
view.screenWidth = screen.width ;
view.screenHeight = screen.height ;
}

// reports the "visual viewport" in CSS pixels
// does not work in Android 2.x
function measureWindow() {
view.windowWidth = window.innerWidth ;
view.windowHeight = window.innerHeight ;
// return( "Viewing window: " + width + " x " + height + " vpx = " + width*window.devicePixelRatio.toFixed(1) + " x " + height*window.devicePixelRatio.toFixed(1) + " ppx" ) ;
}

// reports the "layout viewport" or "rendering viewport" in CSS pixels
// most interesting if you omit the viewport meta tag or use unusual viewport values
function measureDocument() {
view.documentWidth = document.documentElement.clientWidth ;
view.documentHeight = document.documentElement.clientHeight ;
}

// pixel ratio represents ratio of device pixels to ideal viewport pixels
// should be able to calculate device pixels --> screen.width * window.devicePixelRatio
function measureDevicePixelRatio() {
if( window.devicePixelRatio )
view.dpr = window.devicePixelRatio ;
else
view.dpr = NaN ;
}

// screen aspect ratio as measured by longest side over shortest
// regardless of device orientation (landscape or portrait)
// see https://software.intel.com/en-us/html5/hub/blogs/how-to-get-the-correct-android-screen-dimensions
function measureScreenAspectRatio() {
var screenRatio, width, height ;
screenRatio = width = height = NaN ;

width = screen.width ;
height = screen.height ;

if( width > height )
screenRatio = width/height ;
else
screenRatio = height/width ;

if( isNaN(screenRatio) ) {
width = window.innerWidth ;
height = window.innerHeight ;

if( width > height )
screenRatio = width/height ;
else
screenRatio = height/width ;
}

view.ratio = screenRatio ;
}

// estimate physical screen pixel dimensions based on device pixel ratio
function calculatePhysicalPixels() {
measureDevicePixelRatio() ;
measureScreen() ;
view.devicePixelWidth = view.screenWidth * view.dpr.toFixed(1) ;
view.devicePixelHeight = view.screenHeight * view.dpr.toFixed(1) ;
}

// estimate physical screen size based on assumption that there are 96 CSS pixels per inch
// see https://www.w3.org/TR/css3-values/#absolute-lengths
function calculateScreenSize() {
measureScreen() ;
view.deviceScreenWidth = view.screenWidth / 96 ;
view.deviceScreenHeight = view.screenHeight / 96 ;
}

app.consoleLog(fName, "exit") ;
} ;

Polyglot Studio

-

- -

Saturday, December 17, 2016

106a XDK: How Does Cordova Demo App Work?

File: index.html

File: init-app.js

File: app.js

No comments:

Post a Comment

Cordova API 3.0

Camera API