www
index.html
css
img
jsCopyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
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.
Using PhoneGap requires that you set up a free account with PhoneGap.
Android apps are the easiest to get started with, as they do not require any registration of the phone or the app.
In order to build an iPhone app, you need to set up an iPhone developer account.
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.
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.
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.
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.
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.
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
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).
<!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:
<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>
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.
The <name> tag is the name of the app that will appear on your phone.
The <description> tag is used to give a brief description of the app. This will be displayed on the PhoneGap build webpage.
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.
<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>
The <author> tag is used to identify the author's name, email and website. You should always include this in the config.xml file.
<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="https://derek.comp.dkit.ie">Derek O Reilly</author> </widget>
Including the <icon> tag in the config.xml file will associate an icon with your app. This is shown is the code below:
<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="https://derek.comp.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
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.
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:
<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="https://derek.comp.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.
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.
<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="https://derek.comp.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>
<!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>
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.
<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="https://derek.comp.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>
<!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>
In some cases, it can be necessary to write code that is specific to a given device (iPhone, Android, etc).
<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="https://derek.comp.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>
<!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>
We can programme for touchscreen using the touch events listed below:
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>
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.
<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="https://derek.comp.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>
<!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.
<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="https://derek.comp.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>
<!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>
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.
<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="https://derek.comp.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>
<!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).
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.
<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="https://derek.comp.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.
<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="https://derek.comp.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>
<!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>
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.
<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="https://derek.comp.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>
<!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>
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.
<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="https://derek.comp.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>
<!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>
Ensure that the orientation is locked in the 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="https://derek.comp.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
<!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.
The vibration plugin can be used to cause a phone to vibrate for a given length of time.
<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="https://derek.comp.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>
<!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.
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.
<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="https://derek.comp.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>
<!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".
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="https://derek.comp.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).
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.
One example of a third party plugin is the QR Code Reader. This plugin allows your phone to read QR codes.
<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="https://derek.comp.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>
<!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>
The flashlight third party plugin can turn the device's camera flash on and off.
<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="https://derek.comp.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>
<!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).
The insomnia third party plugin can be used to force a phone's screen to stay awake.
<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="https://derek.comp.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>
<!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.
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.
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).
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 'https://derek.comp.dkit.ie' website.
<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="https://derek.comp.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="https://derek.comp.dkit.ie" subdomains="true" /> <!-- Needed to allow remote access in Android --> <plugin name="cordova-plugin-whitelist" /> </widget>
<!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 = 'https://derek.comp.dkit.ie/home_page/logo.jpg'>
</div>
</body>
</html>
Remove the <access origin="https://derek.comp.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"/>
A website can be displayed as an app by opening the website inside the app's index.html file.
<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="https://derek.comp.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>
<!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>
In order to implement drag and drop that will work on both a computer (non-touch) screen and a mobile screen, we need to map both the mouse input and touch input onto the same coordinate variables. Write code that will allow a user drag and drop the answers of a multiple choice quiz into a drop zone within a webpage, as shown here.
Wrap the drag and drop code from the previous question inside an app (this app is called e101).
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.
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'.
<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="https://derek.comp.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>
<!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>
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 .
<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="https://derek.comp.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>
<!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>
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.