Cordova

Webpages that run on smartphones cannot directly access the native hardware of the smartphone, such as the accelerometer, the camera and the compass. Normally, programmers write apps in native code. This means that the same app needs to be rewritten in the native code of each smartphone, so that it can run on an iPhone, Android phone or any other smartphone. However, there is Open Source software, called Cordova, that allows programmers to run webpages as native code.

Cordova is a mobile development framework that enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of device-specific languages such as Objective-C. The resulting applications are hybrid, meaning that they are neither truly native (because all layout rendering is done via web views instead of the platform's native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs). Cordova apps can be compiled on most IDEs, such as Netbeans. It can also be compiled romotely using a service called PhoneGap.

PhoneGap

Using PhoneGap requires that you set up a free account with PhoneGap.

Android Apps

Android apps are the easiest to get started with, as they do not require any registration of the phone or the app.

iPhone Apps

In order to build an iPhone app, you need to set up an iPhone developer account.

Windows Phone 8 Apps

In order to build a WP8 app, you need to set up a Windows Phone Developer account and you need to register your phone as a developer phone.

Uploading Apps to PhoneGap

PhoneGap app can be built at the website below

https://build.phonegap.com/people/sign_in

In order to sign in, you will need either an Adobe account or a Github account. Both of these accounts can be created for free.

Once you sign in, you will be taken to your own app building webpage. Apps are uploaded as .zip files.

App Keys

In order to publish an app in the Apple, Android or Windows Phone stores, you will need to ensure that it is signed. Apple, Android and Windows Phone apps are all signed differently.

You can build an Android or Windows Phone app that runs locally on your mobile device without a key. To build an iOS app locally, you will need a key.

Generating an Apple Key

Apple allow me to assign student developer accounts to you for free.

If you are using a Windows operating system and you want to be able develop iOS apps that will run on your own Apple device, you will need to email me with the details below:

 

I shall send you the three files below:

To generate an iOS key in PhoneGap, you will be asked to upload the p12 and mobileprovision files.

To unlock the key, you will need to copy the randomly generated key password that is stored in the password_D00XXXXX.txt file. When you unlock the key, it will remain opened for one month. You will then have to re-enter the password to open the key again.

The certificate will last until the end of the current academic year. You will need to renew your certificate with me each academic year.

You should store the mobileprovision file, P12 file and P12 password for future use.

If you want to develop your apps on an Apple computer, then I can set up a developer account for you. Once you have a developer accout, you will be able to generate your own keys on your Apple computer. Please speak to me directly if you want to persue this option.

PhoneGap App Folder Structure

When using PhoneGap to generate apps, you should use the file structure below:

These files need to be placed in a .zip file. This file can be uploaded in PhoneGap to build your app.

Basic App

Phonegap apps always have at least an index.html file and a config.xml file, which are held in the file structure below.

config.xml
www
    index.html
    css
    img
    js

The index.html file holds the start page of the app. The config.xml file holds the hardward configuration of the app.

A basic index.html file is shown below:

Click here to download .zip containing an example showing a minimal app (this app is called e001).

index.html

<!DOCTYPE html> 
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Basic Demo</title>
<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</head> 

<body> 
<h1>Basic Phonegap Demo</h1>
</body>

</html>

This is exactly the same format as any normal html file, with the exception that we need to include the code below:

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

 

A basic config.xml file is shown below:

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e001" > <name>e001</name> <description>A minimal phonegap demo</description> </widget>

<widget>

The <widget> tag is used to contain the app in the same way that the <html> tag is used to contain a webpage.

The "xmlns" property binds the config.xml file to the W3C xml standards.

The "xmlns:gap" property binds the config.xml file to the PhoneGap xml standards.

<name>

The <name> tag is the name of the app that will appear on your phone.

<description>

The <description> tag is used to give a brief description of the app. This will be displayed on the PhoneGap build webpage.

App ID

In order to publish an app in the Apple, Android or Windows Phone stores, you will need to ensure that it has a unique ID (unique name). This is done by adding an id parameter to the widget tag.

Click here to download a .zip containing an example showing a minimal app that includes the author's details (this app is called e002).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e002" > <name>e002</name> <description>A minimal phonegap demo that includes a unique id</description> </widget>

App Author

Click here to download a .zip containing an example showing a minimal app that includes the author's details (this app is called e003).

The <author> tag is used to identify the author's name, email and website. You should always include this in the config.xml file.

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e003" > <name>e003</name> <description>A minimal phonegap demo</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> </widget>

App Icon

Click here to download a .zip containing an example showing an app with an icon (this app is called e004).

Including the <icon> tag in the config.xml file will associate an icon with your app. This is shown is the code below:

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e004" > <name>e004</name> <description>Demo with an icon</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> </platform> </widget>

Icon files must be stored in a folder called "res" within the "web" folder, as shown below:

config.xml
www
    index.html
    css
    img
    js
    res
        .pgbomit

A file called ".pgbomit" should be placed in the "res" folder. The ".pgbomit" file signifies to PhoneGap Build that it should not include the contents of that folder as source for the native app. This folder, however, can be used to store any files needed during the PhoneGap Build process up to the compile step.

".pgbomit" needs to be placed in the "res" folder, so that only the icons and splashscreens for a specific platform will be included in the binary app package.

The ".pgbomit" file is an empty file. Its only function is to highlight a directory to PhoneGap.

Take a look at the file structure of the downloaded .zip file from this example to see where the icons are located for iOS, Android and Windows phone apps.

Splash Screen

Click here to download a .zip containing an example showing an app that has a splash screen (this app is called e005).

A splash screen is an image that appears while an app is loading. To include a splash screen, use the <splash> tag in the config.xml file, as shown below:

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e005" > <name>e005</name> <description>Demo with a splash screen</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> </widget>

Make an app with your own icon and splash screen images. Hint: There are various websites, such as http://pgicons.abiro.com/ that will generate a set of icons and splash screen images from a single image.

Preferences

Various PhoneGap preferences can be set in the config.xml file.

<preference name="permissions"             value="none"/>          <!-- turn permissions off -->
<preference name="phonegap-version"        value="3.1.0" />        <!-- all: select a build version of PhoneGap -->
<preference name="orientation"             value="landscape" />    <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device"           value="universal" />    <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen"              value="true" />         <!-- all: hides the status bar at the top of the screen -->
<preference name="DisallowOverscroll"      value="true" />         <!-- ios: stop overscroll/bounce -->
<preference name="prerendered-icon"        value="true" />         <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="ios-statusbarstyle"      value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types"       value="true" />         <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend"         value="false" />        <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="auto-hide-splash-screen" value="true" />         <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="disable-cursor"          value="false" />        <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-minSdkVersion"   value="7" />            <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
<preference name="android-installLocation" value="auto" />         <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->

You should only set the preferences that you need.

For example, we can force the orientation to always be in landscape mode.

Click here to download a .zip containing an example showing an app that is forced to display only in landscape mode (this app is called e006).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e006" > <name>e006</name> <description>Demo using preferences</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="landscape" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> </widget>

index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Preferences Demo</title>
<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</head> 

<body> 
<h1>This app has the preferences set so that it is forced to display in landscape mode</h1>
</body>
</html>

Device Ready

The phonegap.js library includes an event "deviceready" that is fired when the phone is ready to be used. The code below will ensure that the function 'myFunction()' will only run once the device is ready.

document.addEventListener("deviceready", myFunction, false); 

The example below ensures that the body is loaded and that the device is ready prior to running any app code. This ensures that all assets are available to the app code.

Click here to download a .zip containing an example showing an app that waits for the device to be ready (this app is called e010).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e010" > <name>e010</name> <description>A Device Ready Demo</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> </widget>

index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Device Ready Demo</title>
<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    document.getElementById('message').innerHTML = 'Device Ready';
}
</script>
</head> 

<body> 
<h1>Device Ready Demo</h1>
<p id = 'message'></p>
</body>
</html>

Identifying the Device Type

In some cases, it can be necessary to write code that is specific to a given device (iPhone, Android, etc).

Click here to download a .zip containing an example showing an app that displays the device type (this app is called e011).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e011" > <name>e011</name> <description>Identify the device type (iPhone, iPad, Android, etc.)</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> </widget>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Device Type Example</title>
<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript">
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    // get the device type
    let deviceType = (navigator.userAgent.match(/iPad/i)) == "iPad" ? "iPad"
            : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ? "iPhone"
            : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android"
            : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";

    document.getElementById("device_type").innerHTML = "<H1>Device</h1><p>" + deviceType + "</p>";
}
</script>
</head>

<body>
<div id = "device_type"></div>
</body>
</html>

Touch Events

We can programme for touchscreen using the touch events listed below:

ontouchstart
The event occurs when a finger is placed on a touch screen.
ontouchend
The event occurs when a finger is removed from a touch screen.
ontouchmove
The event occurs when a finger is dragged across the screen.
ontouchcancel
The event occurs when the touch is interrupted.

 

When using touch events, we normally want to disable the default selection behaviour, where the element or text is highlighted when the user clicks on it. This is done by including the code below in the index.html file.

<style>
*{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}
</style>

Touch Screen Swipe

Javascript does not provide a swipe event. We can use the touch events to code our own swipe event handler, as shown in the code below.

Click here to download a .zip containing an example showing an app that detects a screen tap and swipe (this app is called e020).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e020" > <name>e020</name> <description>Swipe Screen Demo</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> </widget>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<title>Worked example from lecture notes</title>
<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#canvas,
body
{
    padding:0px;
    margin:0px;
}

#canvas
{
    border-bottom:1px solid black;
    width:100%;
    height:500px;
    background-color:#eee;
}

#loadingMessage
{
    position:fixed;
    top:100px;
    left:100px;
    z-index:100;
    font-size:50px;
}

p
{
    margin:5px;
}
</style>

<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    document.getElementById('canvas').addEventListener("touchmove", handleTouchmoveEvent, false);
    document.getElementById('canvas').addEventListener("touchend", handleTouchendEvent, false);
}


let screenWasSwiped = false;
function handleTouchmoveEvent(e)
{
    screenWasSwiped = true;
}


function handleTouchendEvent(e)
{
    if (screenWasSwiped)
    {
        screenWasSwiped = false;
        document.getElementById('message').innerHTML = "<p>Dragged</p>";
    }
    else
    {
        document.getElementById('message').innerHTML = "<p>Tapped</p>";
    }
}
</script>
</head>

<body>
<canvas id = "canvas">
Your browser does not support the HTML5 'Canvas' tag.
</canvas>
<p>Tap or drag on the canvas</p>
<div id="message"></div>
</body>
</html>

Remove the code that disables the default selection from the above example, as shown here (this app is called e021). What is the effect of doing this?

We can detect multiple fingers using e.changedTouches.length. The example below detects how many fingers are being dragged on the screen.

Click here to download a .zip containing an example showing an app that detects the number of fingers on a touchscreen (this app is called e022).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e022" > <name>e022</name> <description>Detect Number of Fingers Touching Screen Demo</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> </widget>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<title>Worked example from lecture notes</title>
<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#canvas,
body
{
    padding:0px;
    margin:0px;
}

#canvas
{
    border-bottom:1px solid black;
    width:100%;
    height:500px;
    background-color:#eee;
}

#loadingMessage
{
    position:fixed;
    top:100px;
    left:100px;
    z-index:100;
    font-size:50px;
}

p
{
    margin:5px;
}
</style>

<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    document.getElementById('canvas').addEventListener("touchstart", handleTouchstartEvent, false);
    document.getElementById('canvas').addEventListener("touchmove", handleTouchmoveEvent, false);
    document.getElementById('canvas').addEventListener("touchend", handleTouchendEvent, false);
}


function handleTouchstartEvent(e)
{
    document.getElementById('message').innerHTML = "<p>" + e.touches.length + "</p>";
}


function handleTouchmoveEvent(e)
{
    document.getElementById('message').innerHTML = "<p>" + e.touches.length + "</p>";
}


function handleTouchendEvent(e)
{
    document.getElementById('message').innerHTML = "<p>" + e.touches.length + "</p>";
}
</script>
</head>

<body>
<canvas id = "canvas">
Your browser does not support the HTML5 'Canvas' tag.
</canvas>
<p>Tap or drag on the canvas with one or more fingers</p>
<div id="message"></div>
</body>
</html>

Touch Positions

The e.touches[].pageX and e.touches[].pageY arrays hold the positions where finger touches are made. The example below detects the start and end point of multiple screen drags.

The value in e.touches.length is the number of fingers that are currently touching the screen. This value can change as fingers are moved on the screen. The code below is used to keep a count of the maximum number of fingers that have touched the screen.

if (e.touches.length > numberOfFingers)
{
    numberOfFingers = e.touches.length;
}

When using such a counter, it is important to have a reset to 0 condition. This normally occurs when all fingers have been removed from the screen. This can bedetected in the 'touchend' event.

function handleTouchendEvent(e)
{
    // only process when all fingers are not touching the screen
    if (e.touches.length === 0)
    {
        // perform some action
        ....

        numberOfFingers = 0;
    }
}

The example below showns this in action.

Click here to download a .zip containing an example showing an app that shows the start and end positions of swiped fingers on a touchscreen (this app is called e023).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e023" > <name>e023</name> <description>Detect Start and End Position of Fingers Touching Screen Demo</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> </widget>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Worked example from lecture notes</title>

<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#canvas,
body
{
    padding:0px;
    margin:0px;
}

#canvas
{
    border-bottom:1px solid black;
    width:100%;
    height:500px;
    background-color:#eee;
}

#loadingMessage
{
    position:fixed;
    top:100px;
    left:100px;
    z-index:100;
    font-size:50px;
}

p
{
    margin:5px;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    document.getElementById('canvas').addEventListener("touchstart", handleTouchstartEvent, false);
    document.getElementById('canvas').addEventListener("touchend", handleTouchendEvent, false);
    document.getElementById('canvas').addEventListener("touchmove", handleTouchmoveEvent, false);
}


let touchStartX = [];
let touchStartY = [];
let touchEndX = [];
let touchEndY = [];
function handleTouchstartEvent(e)
{
    if (e.touches.length > numberOfFingers)
    {
        numberOfFingers = e.touches.length;
    }

    for (i = 0; i < e.touches.length; i++)
    {
        touchStartX[i] = e.touches[i].pageX;
        touchStartY[i] = e.touches[i].pageY;
        touchEndX[i] = e.touches[i].pageX;
        touchEndY[i] = e.touches[i].pageY;
    }
}


let numberOfFingers = 0;
function handleTouchmoveEvent(e)
{
    if (e.touches.length > numberOfFingers)
    {
        numberOfFingers = e.touches.length;
    }

    for (i = 0; i < e.touches.length; i++)
    {
        touchEndX[i] = e.touches[i].pageX;
        touchEndY[i] = e.touches[i].pageY;
    }

    document.getElementById('message').innerHTML = "<p>" + numberOfFingers + "</p>";
}


function handleTouchendEvent(e)
{
    // only process when all fingers are not touching the screen
    if (e.touches.length === 0)
    {
        let htmlString = "<p>";
        for (i = 0; i < numberOfFingers; i++)
        {
            htmlString += "start: " + touchStartX[i] + "," + touchStartY[i] + "      End: " + touchEndX[i] + "," + touchEndY[i] + "<br>";
        }

        htmlString += "</p>";
        document.getElementById('message').innerHTML = htmlString;

        numberOfFingers = 0;
    }
}
</script>
</head>

<body>
<canvas id = "canvas">
Your browser does not support the HTML5 'Canvas' tag.
</canvas>
<p>Drag on the canvas with one or more fingers</p>
<div id="message"></div>
</body>
</html>

Write code that detects the direction of a swipe, as shown here (this app is called e024).

Write code to allow a user to drag an image on a touch screen, as shown here (this app is called e025).

Write code that detects the direction of a pinch, as shown here (this app is called e026).

Write code to allow a user to scale an image on a touch screen, as shown here (this app is called e027).

Write code to allow a user to scale and drag an image on a touch screen, as shown here (this app is called e028).

Write code to create a touch screen jigsaw, as shown here (this app is called e029).

Accessing a Phone's Hardware

PhoneGap provides a set of APIs to allow you to access a phone's native hardware from within your code. In order to use any of the phone's hardware features, you need to include the API's plugin in the config.xml file.

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e030" > <name>e30</name> <description>Demo showing core plugins</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <!-- Core plugins --> <plugin name="cordova-plugin-camera" /> <config-file platform="ios" parent="NSCameraUsageDescription" overwrite="true"> <string>Here, you should tell the user why your apps needs to access the camera</string> </config-file> <plugin name="cordova-plugin-contacts" /> <config-file platform="ios" parent="NSContactsUsageDescription" overwrite="true"
<string>You should tell the user why your app wants to access their contacts</string> </config-file> <plugin name="cordova-plugin-battery-status" /> <plugin name="cordova-plugin-media-capture" /> <plugin name="cordova-plugin-console" /><plugin name="cordova-plugin-device" /> <plugin name="cordova-plugin-device-motion" /> <plugin name="cordova-plugin-device-orientation" /> <plugin name="cordova-plugin-dialogs" /> <plugin name="cordova-plugin-file" /> <plugin name="cordova-plugin-file-transfer" /> <plugin name="cordova-plugin-geolocation" /> <plugin name="cordova-plugin-globalization" /> <plugin name="cordova-plugin-inappbrowser" /> <plugin name="cordova-plugin-media" /> <plugin name="cordova-plugin-network-information" /> <plugin name="cordova-plugin-splashscreen" /> <plugin name="cordova-plugin-vibration" />
</widget>

You should only include the plugins that you need for a particular app. When an app is installing, the user will be asked to give it access to the various hardward and data that are associated with each included plugin.

Each plugin has its own API. Each API provides javascript functions that allow an app to access the associated hardware features of the phone. The API for the full set of core plugins is listed at https://build.phonegap.com/plugins.

Accessing the Camera

Click here to download a .zip containing an example showing an app that accesses the phone's camera (this app is called e030).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e030" > <name>e030</name> <description>Camera demo</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <!-- Core plugins --> <plugin name="cordova-plugin-camera" /> <config-file platform="ios" parent="NSCameraUsageDescription" overwrite="true"> <string>The camera will be used to take a photo</string> </config-file> </widget>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Camera Example</title>

<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#canvasDiv,
body
{
    padding:0px;
    margin:0px;
}

#photoButton
{
    position:fixed;
    margin: 0px -75px;
    left:50%;
    bottom:10px;

    z-index:2;
    min-width:150px;
    min-height:50px;
}

#canvasDiv
{
    position:absolute;
    top:30px;
    left:0px;
    z-index:1;
    width:100%;
    height:100%;
}

#photoCanvas
{	
    width:100%;
    height:100%;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript">
const CANVAS_WIDTH = screen.width;     // need to use the actual width and height of the 
const CANVAS_HEIGHT = screen.height;   // screen for proper scaling of the image 
let canvas = null;
let ctx = null;

let deviceType;  // Is this an Apple or Android

let capturedPhoto = new Image();
capturedPhoto.src = "";

let pictureSource;   // picture source
let destinationType; // sets the format of returned value 

window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    canvas = document.getElementById("photoCanvas");
    ctx = canvas.getContext("2d");
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;

    // get the device type
    deviceType = (navigator.userAgent.match(/iPad/i)) == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";

    // get camera image types
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}


// Take picture using device camera and retrieve image as base64-encoded string
function takePhoto()
{
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {quality: 50, destinationType: destinationType.DATA_URL, correctOrientation: true});
}


// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData)
{
    capturedPhoto.src = "data:image/jpeg;base64," + imageData;
}


// Called when a photo is not retrieved
function onFail(message)
{
    alert('Failed because: ' + message);
}


capturedPhoto.onload = function ()
{
    if (deviceType == "Android")
    {
        // Needed for some Android bug
        canvas = document.getElementById("photoCanvas");
        canvas.width = CANVAS_WIDTH;
        canvas.height = CANVAS_HEIGHT;
        ctx = canvas.getContext("2d");
    }

    if ((CANVAS_WIDTH / capturedPhoto.width) < (CANVAS_HEIGHT / capturedPhoto.height))
    {
        capturedPhotoRatio = CANVAS_WIDTH / capturedPhoto.width;
    }
    else
    {
        capturedPhotoRatio = CANVAS_HEIGHT / capturedPhoto.height;
    }

    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
    ctx.drawImage(capturedPhoto, 0, 0, capturedPhoto.width * capturedPhotoRatio, capturedPhoto.height * capturedPhotoRatio); 
}
</script>
</head>


<body>
<div id = "canvasDiv">
<canvas id = "photoCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

<button id = 'photoButton' onclick="takePhoto();">Take Photo</button> 
</body>
</html>

Accessing an Image in the Device's Photo Library

You can access the photo library in the phone by changing the destinationType to destinationType:destinationType.FILE_URI and adding sourceType:pictureSource.PHOTOLIBRARY, as shown in the example below.

Click here to download a .zip containing an example showing an app that accesses images from the phone's file library (this app is called e031).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e031" > <name>e031</name> <description>Retrieve an image from a phone's file system demo</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <!-- Core plugins --> <plugin name="cordova-plugin-camera" /> <plugin name="cordova-plugin-file" /> <config-file platform="ios" parent="NSCameraUsageDescription" overwrite="true"> <string>An image from your photos will be displayed on the device</string> </config-file> </widget>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Image From File Example</title>

<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#photoButton
{
    position:fixed;
    margin: 0px -75px;
    left:50%;
    bottom:10px;

    z-index:2;
    min-width:150px;
    min-height:50px;
}

#canvasDiv
{
    position:absolute;
    top:30px;
    left:0px;
    z-index:1;
    width:100%;
    height:100%;
}

#photoCanvas
{	
    width:100%;
    height:100%;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript">
const CANVAS_WIDTH = screen.width;     // need to use the actual width and height of the 
const CANVAS_HEIGHT = screen.height;   // screen for proper scaling of the image 

let canvas = null;
let ctx = null;
let deviceType;  // Is this an Apple or Android

let capturedPhoto = new Image();
capturedPhoto.src = "";

let pictureSource;   // picture source
let destinationType; // sets the format of returned value 

window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    canvas = document.getElementById("photoCanvas");
    ctx = canvas.getContext("2d");
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;

    // get the device type
    deviceType = (navigator.userAgent.match(/iPad/i)) == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";

    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}


function getPhotoFromFile()
{
    // Retrieve image file location from specified source
    navigator.camera.getPicture(onPhotoURISuccess, onFail,
            {quality: 50, destinationType: destinationType.FILE_URI, sourceType: pictureSource.PHOTOLIBRARY, correctOrientation: true
            }
    );
}


// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI)
{
    capturedPhoto.src = imageURI;
}


// Called when a photo is not retrieved
function onFail(message)
{
    alert('Failed because: ' + message);
}


capturedPhoto.onload = function ()
{
    if (deviceType == "Android")
    {
        // Needed for some Android bug
        canvas = document.getElementById("photoCanvas");
        canvas.width = CANVAS_WIDTH;
        canvas.height = CANVAS_HEIGHT;
        ctx = canvas.getContext("2d");
    }

    if ((CANVAS_WIDTH / capturedPhoto.width) < (CANVAS_HEIGHT / capturedPhoto.height))
    {
        capturedPhotoRatio = CANVAS_WIDTH / capturedPhoto.width;
    }
    else
    {
        capturedPhotoRatio = CANVAS_HEIGHT / capturedPhoto.height;
    }

    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
    ctx.drawImage(capturedPhoto, 0, 0, capturedPhoto.width * capturedPhotoRatio, capturedPhoto.height * capturedPhotoRatio); 
}
</script>
</head>

<body>
<div id = "canvasDiv">
<canvas id = "photoCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

<button id = "photoButton" onclick="getPhotoFromFile();">Take Image from library</button>
</body>
</html>

Accelerometer Core Plugin

The accelerometer provides the three methods below:

navigator.accelerometer.getCurrentAcceleration
navigator.accelerometer.watchAcceleration
navigator.accelerometer.clearWatch

The example below watches the acceleration along the x, y and z axis.

Click here to download a .zip containing an example showing an app that watches a phone's   accelerometer (this app is called e040).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e040" > <name>e040</name> <description>Demo with an accelerometer</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <!-- Core plugins --> <plugin name="cordova-plugin-device-motion" /> </widget>

index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Accelerometer Demo</title>

<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#startStopAccelerometer
{
    visibility:hidden;
    min-height:30px;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}

// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    // show the accelerometer button
    document.getElementById('startStopAccelerometer').style.visibility = "visible";
}

// The watch id references the current `watchAcceleration`
let watchID = null;


function startStopAccelerometer()
{
    let buttonState = document.getElementById('startStopAccelerometer').innerHTML;
    if (buttonState == 'Start Accelerometer')
    {
        document.getElementById('startStopAccelerometer').innerHTML = 'Stop Accelerometer';
        startAccelerometerWatch();
    }
    else
    {
        document.getElementById('startStopAccelerometer').innerHTML = 'Start Accelerometer';
        clearAccelerometerWatch();
    }
}


// Start watching the acceleration
function startAccelerometerWatch()
{
    // Update acceleration every 1 second
    let options = {frequency: 1000};
    watchID = navigator.accelerometer.watchAcceleration(onAccelerometerSuccess, onAccelerometerError, options);
}


function clearAccelerometerWatch()
{
    navigator.accelerometer.clearWatch(watchID);
    document.getElementById('accelerometer').innerHTML = '';
}


// onSuccess: Get a snapshot of the current acceleration
function onAccelerometerSuccess(acceleration)
{
    document.getElementById('accelerometer').innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
            'Acceleration Y: ' + acceleration.y + '<br />' +
            'Acceleration Z: ' + acceleration.z + '<br />' +
            'Timestamp: ' + acceleration.timestamp;
}


function onAccelerometerError()
{
    alert('Error!');
}
</script>
</head> 
<body> 
<h1>An app with an Accelerometer</h1>
<button id = 'startStopAccelerometer' onclick = 'startStopAccelerometer()'>Start Accelerometer</button>
<div id="accelerometer"></div>
</body>
</html>

Accelerator game

Click here to download a .zip containing an example showing a game that uses the accelerator to move a ball around the screen (this app is called e041).

Ensure that the orientation is locked in the config.xml

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e041" > <name>e041</name> <description>Demo of an Accelerometer Game</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <!-- Core plugins --> <plugin name="cordova-plugin-device-motion" /> </widget>

Automatically launch the accelerometer watch when the app starts in index.html

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Accelerometer Game Example</title>
<style>
*{
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
}

#canvasDiv,
body
{
    padding:0px;
    margin:0px;
}

#canvasDiv
{
    position:fixed;
    top:0px;
    left:0px;
    z-index:1;
    width:100%;
    height:100%;
}

#gameCanvas
{	
    width:100%;
    height:100%;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
// The watch id references the current `watchAcceleration`
let watchID = null;
let canvasWidth = null;
let canvasHeight = null;
let x = 0;
let y = 0;
let radius = 20;

let canvas = null;
let ctx = null;

window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}

// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    /* set up the canvas */
    canvas = document.getElementById("gameCanvas");

    /* make sure that the canvas and the div are the same pixel resolution, */
    /* so that mouse clicks select teh correct pixel */
    canvasWidth = parseInt(document.getElementById('canvasDiv').offsetWidth);
    canvasHeight = parseInt(document.getElementById('canvasDiv').offsetHeight);

    /* Give the canvas a width and height */
    /* The width and height are in canvas logical units */
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    /* set the initial postion of the ball to be at the centre of the screen */
    x = canvasWidth / 2;
    y = canvasHeight / 2;

    /* Assign a graphics context to the canvas, so that we can draw on it */
    ctx = canvas.getContext("2d");

    /* Automatically launch the accelerometer watch when the game starts */
    startAccelerometerWatch();
}


function renderCanvas()
{
    // clear the screen
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    // draw a circle at x,y
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
}


// Start watching the acceleration
function startAccelerometerWatch()
{
    // Update acceleration every 20 milliseconds
    let options = {frequency: 20};
    watchID = navigator.accelerometer.watchAcceleration(onAccelerometerSuccess, onAccelerometerError, options);
}

function clearAccelerometerWatch()
{
    navigator.accelerometer.clearWatch(watchID);
    document.getElementById('accelerometer').innerHTML = '';
}

// Stop watching the acceleration
function stopWatch()
{
    if (watchID)
    {
        navigator.accelerometer.clearWatch(watchID);
        watchID = null;
    }
}

function onAccelerometerSuccess(acceleration)
{
    // update x and y locations
    x += -1 * (acceleration.x);
    y += (acceleration.y);

    renderCanvas();
}

function onAccelerometerError()
{
    alert('Error!');
}
</script>
</head>

<body>
<div id = "canvasDiv">
<canvas id = "gameCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
</body>
</html>

Write code to replace the circle and white background with images in the above game, as shown in this app (this app is called e042).

Write code to stop the ball falling off the edge of the screen in the above game, as shown in this app (this app is called e043).

Write code to make the ball go faster after five seconds in the above game, as shown in this app (this app is called e044).

Write code to rotate the ball as it moves around the screen, as shown in this app (this app is called e045). Try to get the ball to rotate either clockwise or anti-clockwise depending on the slope of the screen. Try to get the ball to rotate faster if the ball is moving faster.

Vibration Core Plugin

The vibration plugin can be used to cause a phone to vibrate for a given length of time.

Click here to download a .zip containing an example showing an app that can vibrate (this app is called e050).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e050" > <name>e050</name> <description>Demo with a Vibration</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <!-- Core plugins --> <plugin name="cordova-plugin-vibration" /> </widget>

index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Vibration Demo</title>
<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#vibrationButton
{
    visibility:hidden;
    min-height:50px;
    min-width:150px;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";
    document.getElementById('vibrationButton').style.visibility = "visible";
}


function vibrate()
{
    navigator.notification.vibrate(1000);  // 1 second
}
</script>
</head> 

<body> 
<h1>An app with Vibration</h1>
<input type="button" id="vibrationButton" value = "Vibrate" onClick="vibrate()">
</body>
</html>

Write code to cause the accelerator game to vibrate when the ball touches the edge of the screen.

Contacts

The contacts stored on a device can be accessed if the code below is included in the config.xml file.

<plugin name="cordova-plugin-contacts" />
<config-file platform="ios" parent="NSContactsUsageDescription" overwrite="true"
<string>You should tell the user why your app wants to access their contacts</string> </config-file>

It is possible to search, create, edit or delete contact details.

Click here to download a .zip containing an example that retrieves all contacts from a phone (this app is called e060).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e060" > <name>e060</name> <description>Demo that accesses contacts</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <plugin name="cordova-plugin-contacts" /> <config-file platform="ios" parent="NSContactsUsageDescription" overwrite="true"
<string>Display a list of all of your contacts</string> </config-file>
</widget>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Contact Example</title>

<style>

#loadingMessage
{
    position:fixed;
    top:100px;
    left:100px;
    z-index:100;
    font-size:50px;
}

#contactList 
{
    //border:none;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    // find all contacts with 'Bob' in any name field
    let fields = ["name"];
    let options = new ContactFindOptions();

    options.multiple = true;
    options.filter = "";

    navigator.contacts.find(fields, displayContacts, onError, options);
}


function displayContacts(contacts)
{
    let htmlString = "<table>";
    for (let i = 0; i < contacts.length; i++)
    {
        htmlString += "<tr><td>" + contacts[i].name.formatted + "</td></tr>";
    }
    htmlString += "</table>";

    document.getElementById("contactList").innerHTML = htmlString;
}


function onError(contactError) {
    alert('Error!');
}
</script>
</head>
<body>
<div id="contactList"></div>
</body>
</html>

We can add a filter condition to restrict the details that are returned. All details that match the filter string in any of the "fields" will be included in the search. The filter string will be valid if it occurs in any part of the strinctx. For example the filter "de" will return both "Derek" and "Bride".

Click here to download a .zip containing an example that retrieves a search of filtered contacts (this app is called e061).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e061" > <name>e061</name> <description>Demo that filters contacts</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <plugin name="cordova-plugin-contacts" /> <config-file platform="ios" parent="NSContactsUsageDescription" overwrite="true"
<string>Display a list of contacts that begin with the letters thay you type in</string> </config-file> </widget>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Contact Example</title>

<style>
#loadingMessage
{
    position:fixed;
    top:100px;
    left:100px;
    z-index:100;
    font-size:50px;
}

#contactSearchFilter
{
    visibility:hidden;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    document.getElementById('contactSearchFilter').style.visibility = "visible";
}


function displayContacts(contacts)
{
    let htmlString = "<table>";
    for (let i = 0; i < contacts.length; i++)
    {
        htmlString += "<tr><td>" + contacts[i].name.formatted + "</td></tr>";
    }
    htmlString += "</table>";

    document.getElementById("contactList").innerHTML = htmlString;
}


function onError(contactError)
{
    alert('Error!');
}


function searchContacts()
{
    let searchValue = document.getElementById("contactSearchFilter").value;
    let fields = ["name"];
    let options = new ContactFindOptions();
    options.multiple = true;
    options.filter = searchValue;

    navigator.contacts.find(fields, displayContacts, onError, options);
}
</script>
</head>
<body>
<label for="contactSearchFilter">Name: </label><input autofocus id="contactSearchFilter" type="search">
<input type="button" value="Search" onclick="searchContacts()">
<div id="contactList"></div>
</body>
</html>

Write code to remove the search button and to adjust the search results in realtime to match the search string, as shown here (this app is called e062).

Expand the example code above to allow the user to get the phone details of a selected contact, as shown here (this app is called e063).

Third Party Plugins

As well as the core plugins, there are various additional third party plugins. As with core plugins, 3rd party plugins must be included in the config.xml file.

QR Code Reader

One example of a third party plugin is the QR Code Reader. This plugin allows your phone to read QR codes.

Click here to download a .zip containing an example showing a QR reader app (this app is called e070).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e070" > <name>e070</name> <description>QR code demo</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <!-- Core plugins --> <plugin name="cordova-plugin-camera" /> <config-file platform="ios" parent="NSCameraUsageDescription" overwrite="true"> <string>The camera will be used to scan QR codes</string> </config-file> <!-- Third party plugins --> <plugin name="cordova-plugin-barcodescanner" /> </widget>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>QR Code Example</title>

<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#scanButton
{
    position:fixed;
    margin: 0px -75px;
    left:50%;
    bottom:10px;

    z-index:2;
    visibility:hidden;
    min-width:150px;   
    min-height:50px;
}

.page
{
    position:absolute;
    top:30px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
}

#page2,
#page3,
#page4
{
    visibility:hidden;
}

#page2
{
    background-color:red;
}

#page3
{
    background-color:yellow;
}

#page4
{
    background-color:blue;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<script type="text/javascript">
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    document.getElementById('scanButton').style.visibility = "visible";
}


function scanQR()
{
    cordova.plugins.barcodeScanner.scan(
            function (result)
            {
                hideAllPages();
                if (result.text == "page2")
                {
                    document.getElementById('page2').style.visibility = 'visible';
                    window.location.hash = "#page2";
                }
                else if (result.text == "page3")
                {
                    document.getElementById('page3').style.visibility = 'visible';
                    window.location.hash = "#page3";
                }
                else if (result.text == "page4")
                {
                    document.getElementById('page4').style.visibility = 'visible';
                    window.location.hash = "#page4";
                }
                else
                {
                    alert("Not a valid QR Code for this application");
                }
            },
            function (error)
            {
                alert("Scanning failed: " + error);
            }
    );
}
;

/* Helper for this example that hides all four pages */
function hideAllPages()
{
    document.getElementById('page1').style.visibility = 'hidden';
    document.getElementById('page2').style.visibility = 'hidden';
    document.getElementById('page3').style.visibility = 'hidden';
    document.getElementById('page4').style.visibility = 'hidden';
}
</script>
</head>

<body>
<button id = "scanButton" onclick="scanQR();">Scan QR Code</button>

<div class = "page" id="page1">
<h1>Page One</h1>
</div>

<div class = "page" id="page2">
<h1>Page Two</h1>
</div>

<div class = "page" id="page3">
<h1>Page Three</h1>
</div>

<div class = "page" id="page4">
<h1>Page Four</h1>
</div>
</body>
</html>

Flashlight third Party Plugin

The flashlight third party plugin can turn the device's camera flash on and off.

Click here to download a .zip containing an example showing the third party flashlight plugin (this app is called e071).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e071" > <name>e071</name> <description>Demo with a Flashlight</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <!-- Third Party plugins --> <plugin name="cordova-plugin-flashlight" /> </widget>

index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Flashlight Demo</title>

<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

p
{
    text-align:justify;
}

#flashlightButton
{
    position:fixed;
    margin: 0px -75px;
    left:50%;
    bottom:10px;

    z-index:2;
    visibility:hidden;
    min-width:150px;   
    min-height:50px;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";
    document.getElementById('flashlightButton').style.visibility = "visible";
}


function flashlight()
{
    if (document.getElementById('flashlightButton').innerHTML == 'Turn Flashlight On')
    {
        switchFlashlighOn();
    }
    else
    {
        switchFlashlighOff();
    }
}


function switchFlashlighOn()
{
    window.plugins.flashlight.switchOn();
    document.getElementById('flashlightButton').innerHTML = 'Turn Flashlight Off';

    // force the flashligh to turn off after 5 seconds
    setTimeout(function ()
    {
        switchFlashlighOff();
    }, 5000);
}


function switchFlashlighOff()
{
    window.plugins.flashlight.switchOff();
    document.getElementById('flashlightButton').innerHTML = 'Turn Flashlight On';
}

// needed for Android
document.addEventListener("backbutton", switchFlashlighOff, false);
document.addEventListener("menubutton", switchFlashlighOff, false);
document.addEventListener("searchbutton", switchFlashlighOff, false);

</script>
</head> 

<body> 
<h1>An app with a Flashlight</h1>
<button id = 'flashlightButton' onclick = 'flashlight()'>Turn Flashlight On</button>
<p>If you exit this app while the flashlight is turned on, then the flashlight might remain on until you re-run the app and turn the flashlight off or you reboot your phone.</p>
</body>
</html>

Write code to make an Morse Code app, which allows the user to turn the flashlight on or off by pressing the screen, as shown here (this app is called e072).

Prevent Screen sleep Third Party Plugin

The insomnia third party plugin can be used to force a phone's screen to stay awake.

Click here to download a .zip containing an example showing an app that can prevent the screen from turning off (this app is called e073).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e073" > <name>e073</name> <description>Demo that prevents screen sleep</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <!-- Third Party plugins --> <plugin name="cordova-plugin-insomnia" /> </widget>

index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>Prevent Screen Sleep Demo</title>
<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#screenSleepButton
{
    position:fixed;
    left:50%;
    margin: 0px -75px;
    bottom:10px;

    z-index:2;
    visibility:hidden;
    min-width:150px;   
    min-height:50px;
}
</style>
<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById("loadingMessage").style.visibility = "hidden";

    document.getElementById('screenSleepButton').style.visibility = "visible";
}


function toggleScreenSleep()
{
    if (document.getElementById("screenSleepButton").value == "Press to keep screen turned on")
    {
        keepScreenTurnedOn();
    }
    else
    {
        allowScreenToTurnOff();
    }
}


function keepScreenTurnedOn()
{
    window.plugins.insomnia.keepAwake();
    document.getElementById("screenSleepButton").value = "Press to have normal screen sleep behaviour";
}


function allowScreenToTurnOff()
{
    window.plugins.insomnia.allowSleepAgain();
    document.getElementById("screenSleepButton").value = "Press to keep screen turned on";
}
</script>
</head> 

<body> 
<h1>An app that prevents screen sleep</h1>
<input type="button" id="screenSleepButton" value="Press to keep screen turned on" onclick="toggleScreenSleep()">
</body>
</html>

Adjust the accelerometer game code so that the screen does not turn off during the game.

Multiple HTML Files

As long as we use relative paths, we can use multiple files and folders exactly as we would in a normal website. However, you should not make reference to anything that is outside of your own folders.

Click here to download a .zip containing an example showing an app that is built using multiple files and folders (this app is called e080).

Adjust the code in the above example so that the hyperlinks are removed and the user has to scan QR codes to move between the various webpages, as shown here (this app is called e081).

Access To Remote Assets

By default, PhoneGap will not allow your app to access assets that are stored outside of the app's uploaded .zip file. The <access> tag and whitelist plugin in the config.xml file are used to allow access to remote assets. In the example below, the image is taken from the 'http://derek.dkit.ie' website.

Click here to download a .zip containing an example showing an app that has access to an image on the 'derek.dkit.ie' website (this app is called e090).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e090" > <name>e090</name> <description>Demo showing how access to a remote webpage can be allowed</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <access origin="http://derek.dkit.ie" subdomains="true" /> <!-- Needed to allow remote access in Android --> <plugin name="cordova-plugin-whitelist" /> </widget>

index.html

<!DOCTYPE html> 
<html>
<head>
<title>Remote Access Allowed Demo</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover"> 

<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#canvas,
body
{
    padding:0px;
    margin:0px;
}

img
{
    width:100%;
}

#pageContent
{
    visibility:hidden;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";
    document.getElementById('pageContent').style.visibility = "visible";
}
</script>
</head> 

<body>
<div id="pageContent">
<h1>Remote Access Example</h1>
<p>The image below is loaded from the website "derek.dkit.ie"</p>
<!-- Access image from remote site -->
<img src = 'http://derek.dkit.ie/home_page/logo.jpg'>
</div>
</body>
</html>

Remove the <access origin="http://derek.dkit.ie" subdomains="true"/> code from the config.xml file and run the app again. You will see that the image will not display.

Other settings for the <access> tag are:

A blank access tag denies access to all external resources

<access />

A wildcard access tag allows access to all external resource.

<access origin="*" /> 

Otherwise, you can specify specific domains

<access origin="http://code.jquery.com" subdomains="true"/>

Displaying a Website inside an App

A website can be displayed as an app by opening the website inside the app's index.html file.

Click here to download a .zip containing an example showing an app that displays the DkIT website (this app is called e100).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e100" > <name>e100</name> <description>Display a website inside an app</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <!-- Core plugins --> <plugin name="cordova-plugin-inappbrowser" /> <allow-navigation href="https://www.dkit.ie/*" /> <access origin="https://www.dkit.ie" subdomains="true"/> </widget>

index.html

<!DOCTYPE html>
<html>
<head>
<title>Display website inside an app</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

<style>
#container
{
    position: absolute;
    top:0px;
    left:0px;
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    display: inline-flex; // needed for vertical alignment of '#loading' div
}

#loading
{
    margin-left: auto;
    margin-right:auto;
    text-align: center;
}

#loadingMessage
{
    color:#2177aa;
}

#logoImage
{
    width:50%;
    text-align: center;
    margin-top:1em;
    margin-bottom: 1em;
}
</style>


<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>


<script>
function pageLoaded()
{
    // get the device type
    let deviceType = (navigator.userAgent.match(/iPad/i)) == "iPad" ? "iPad"
            : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ? "iPhone"
            : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android"
            : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";

    if (deviceType === "iPad" || deviceType === "iPhone")
    {
        window.location = "https://www.dkit.ie";
    }
    else if (deviceType === "Android")
    {
        window.open('https://www.dkit.ie', '_blank', 'location=no', 'toolbar=no');
    }
}
</script>
</head>

<body>

<script>
document.addEventListener("deviceready", pageLoaded, false);

if (screen.width < screen.height)
{
    document.getElementsById("loadingImage").style.width = screen.width;
}
else
{
    document.getElementsById("loadingImage").style.height = screen.height;
}
</script>

<div id="container">
<div id="loading">
<img id="logoImage" src="./img/icon.png">
<h1 id="loadingMessage">Loading...</h1>
<img id="loadingImage" src=".img/loading.gif" alt=""/>
</div>
</div>
</body>
</html>

JQuery

JQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Using JQuery Mobile allows us to make mobile apps that look like native apps.

The JQuery Mobile files can be stored locally or they can be accessed from the 'http://code.jquery.com' website.

Storing JQuery files locally

To access JQuery Mobile files that are stored locally, you need to include the JQuery Mobile javascript files in your app's html files. You do not need to set anything in the the config.xml file. In the example below, the JQuery files have been stored locally in a folder called 'jquery'.

Click here to download a .zip containing an example showing an app that is built using a locally stored copy of JQuery Mobile (this app is called e110).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
         version="1.0.0" 
         id="ie.dkit.derek_e110" >

<name>e110</name>
<description>Demo that uses a locally stored copy of JQuery</description>
<author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author>

<platform name="ios">
   <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/>
   <icon src="res/icons/ios/icon-small.png" width="29" height="29"/>
   <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/>
   <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/>
   <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/>
   <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/>
   <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/>
   <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/>
   <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/>
   <icon src="res/icons/ios/icon.png" width="57" height="57"/>
   <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/>
   <icon src="res/icons/ios/icon-60.png" width="60" height="60"/>
   <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/>
   <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/>
   <icon src="res/icons/ios/icon-72.png" width="72" height="72"/>
   <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/>
   <icon src="res/icons/ios/icon-76.png" width="76" height="76"/>
   <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/>
   <icon src="res/icons/ios/icon-167.png" width="167" height="167"/>
   <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/>

   <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/>
   <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/>
   <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
   <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
   <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
   <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/>
   <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/>
</platform>

<platform name="android">
   <icon density="ldpi" src="res/icons/android/ldpi.png"/>
   <icon density="mdpi" src="res/icons/android/mdpi.png"/>
   <icon density="hdpi" src="res/icons/android/hdpi.png"/>
   <icon density="xhdpi" src="res/icons/android/xhdpi.png"/>
   <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/>
   <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/>

   <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/>
   <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/>
   <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/>
   <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/>
   <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/>
   <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/>
</platform>

<platform name="windows">
   <icon src="res/icons/windows/storelogo.png" target="StoreLogo" />
   <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" />
   <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" />
   <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" />
   <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" />
   <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" />
   <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" />

   <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/>
   <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/>
</platform>

<preference name="DisallowOverscroll"      value="true" />         <!-- ios: stop overscroll/bounce -->
<preference name="orientation"             value="portrait" />    <!-- all: default means both landscape and portrait are enabled -->
<preference name="fullscreen"              value="true" />         <!-- all: hides the status bar at the top of the screen -->
<preference name="exit-on-suspend"         value="true" />        <!-- ios: if set to true, app will terminate when home button is pressed -->

<config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true">
    <false/> <!-- true = show status bar, false = hide status bar -->
</config-file>

</widget>

index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
<title>JQuery Local Mobile Demo</title>
<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#pageContent
{
    visibility:hidden;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";
    document.getElementById('pageContent').style.visibility = "visible";
}
</script>
</head>

<body>
<!-- access the jquery files from a local folder called 'jquery' -->
<!-- you must include these files in the body of the document, so that they are loaded before the page opens -->
<script src="jquery/jquery-1.8.2.min.js"></script>
<script src="jquery/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.0.min.css" /> 

<div id="pageContent">
  <div data-role="page">
    <div data-role="header">
      <h1>Page Header</h1>
    </div>

    <div data-role="content">      
      <button>Example Button</button>
      <p>Some content</p>
    </div>

    <div data-role="footer" data-position="fixed">
      <h4>Page Footer</h4>
    </div>
  </div>
</div>
</body>
</html>

Storing JQuery files Remotely

To access JQuery Mobile files that are stored on a remote website, you need to include the JQuery Mobile javascript files in your app's html files. You also need to set the <access> tag in the config.xml file to allow access to the website that contains JQuery Mobile .

Click here to download a .zip containing an example showing an app that is built using a remotely stored copy of JQuery Mobile (this app is called e111).

config.xml

<widget  xmlns="http://cordova.apache.org/ns/1.0"
version="1.0.0"
id="ie.dkit.derek_e111" > <name>e111</name> <description>Demo that uses a remotely stored copy of JQuery</description> <author email="derek.oreilly@dkit.ie" href="http://derek.dkit.ie">Derek O Reilly</author> <platform name="ios"> <icon src="res/icons/ios/icon-1024.png" width="1024" height="1024"/> <icon src="res/icons/ios/icon-small.png" width="29" height="29"/> <icon src="res/icons/ios/icon-small@2x.png" width="58" height="58"/> <icon src="res/icons/ios/icon-small@3x.png" width="87" height="87"/> <icon src="res/icons/ios/icon-small-40.png" width="40" height="40"/> <icon src="res/icons/ios/icon-small-40@2x.png" width="80" height="80"/> <icon src="res/icons/ios/icon-small-40@3x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-small-50.png" width="50" height="50"/> <icon src="res/icons/ios/icon-small-50@2x.png" width="100" height="100"/> <icon src="res/icons/ios/icon.png" width="57" height="57"/> <icon src="res/icons/ios/icon@2x.png" width="114" height="114"/> <icon src="res/icons/ios/icon-60.png" width="60" height="60"/> <icon src="res/icons/ios/icon-60@2x.png" width="120" height="120"/> <icon src="res/icons/ios/icon-60@3x.png" width="180" height="180"/> <icon src="res/icons/ios/icon-72.png" width="72" height="72"/> <icon src="res/icons/ios/icon-72@2x.png" width="144" height="144"/> <icon src="res/icons/ios/icon-76.png" width="76" height="76"/> <icon src="res/icons/ios/icon-76@2x.png" width="152" height="152"/> <icon src="res/icons/ios/icon-167.png" width="167" height="167"/> <icon src="res/icons/ios/icon-83.5@2x.png" width="167" height="167"/> <splash src="res/screens/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screens/ios/Default@2x~iphone.png" width="640" height="960"/> <splash src="res/screens/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screens/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> <splash src="res/screens/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> <splash src="res/screens/ios/Default-667h.png" width="750" height="1334"/> <splash src="res/screens/ios/Default-736h.png" width="1242" height="2208"/> </platform> <platform name="android"> <icon density="ldpi" src="res/icons/android/ldpi.png"/> <icon density="mdpi" src="res/icons/android/mdpi.png"/> <icon density="hdpi" src="res/icons/android/hdpi.png"/> <icon density="xhdpi" src="res/icons/android/xhdpi.png"/> <icon density="xxhdpi" src="res/icons/android/xxhdpi.png"/> <icon density="xxxhdpi" src="res/icons/android/xxxhdpi.png"/> <splash density="port-ldpi" src="res/screens/android/splash-port-ldpi.png"/> <splash density="port-mdpi" src="res/screens/android/splash-port-mdpi.png"/> <splash density="port-hdpi" src="res/screens/android/splash-port-hdpi.png"/> <splash density="port-xhdpi" src="res/screens/android/splash-port-xhdpi.png"/> <splash density="port-xxhdpi" src="res/screens/android/splash-port-xxhdpi.png"/> <splash density="port-xxxhdpi" src="res/screens/android/splash-port-xxxhdpi.png"/> </platform> <platform name="windows"> <icon src="res/icons/windows/storelogo.png" target="StoreLogo" /> <icon src="res/icons/windows/smalllogo.png" target="Square30x30Logo" /> <icon src="res/icons/windows/Square44x44Logo.png" target="Square44x44Logo" /> <icon src="res/icons/windows/Square70x70Logo.png" target="Square70x70Logo" /> <icon src="res/icons/windows/Square71x71Logo.png" target="Square71x71Logo" /> <icon src="res/icons/windows/Square150x150Logo.png" target="Square150x150Logo" /> <icon src="res/icons/windows/Square310x310Logo.png" target="Square310x310Logo" /> <splash src="res/screens/windows/splashscreen.png" target="SplashScreen"/> <splash src="res/screens/windows/splashscreenphone.png" target="SplashScreenPhone"/> </platform> <preference name="DisallowOverscroll" value="true" /> <!-- ios: stop overscroll/bounce --> <preference name="orientation" value="portrait" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="exit-on-suspend" value="true" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true"> <false/> <!-- true = show status bar, false = hide status bar --> </config-file> <access origin="http://code.jquery.com" subdomains="true"/> <!-- Needed to allow remote access in Android --> <plugin name="cordova-plugin-whitelist" /> </widget>

index.html

<!DOCTYPE html> 
<html>
<head>
<title>JQuery Remote Mobile Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

<style>
*
{
    -webkit-touch-callout: none;  /* Disable element selection in app */
    -webkit-user-select: none;    /* Disable text selection in app */ 
}

#pageContent
{
    visibility:hidden;
}
</style>

<!-- This is needed to access the PhoneGap JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<!-- access the jquery files from the 'code.jquery.com' website -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

<script>
window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // Wait for Cordova to connect with the device
    document.addEventListener("deviceready", onDeviceReady, false);
}


// Cordova is ready to be used!
function onDeviceReady()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";
    document.getElementById('pageContent').style.visibility = "visible";
}
</script>
</head> 

<body> 
<div id="pageContent">
  <div data-role="page">
    <div data-role="header">
      <h1>Page Header</h1>
    </div>

    <div data-role="content">      
      <button>Example Button</button>
      <p>Some content</p>
    </div>

    <div data-role="footer" data-position="fixed">
      <h4>Page Footer</h4>
    </div>
  </div>
</div>
</body>
</html>
 
<div align="center"><a href="../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>