Scribd
Upload
21 views54 pages

CIT 415 Topic 11 Programming Mobile Devices

This lecture covers programming for touch screens and mobile devices, focusing on touch events like touchstart, touchmove, and touchend, as well as the Geolocation API for accessing user location. It explains how to implement these events in JavaScript and provides examples of using the Geolocation API to retrieve and display location information. Additionally, it introduces the Google Maps API for integrating maps into applications, including creating maps and adding markers based on geolocation data.

Uploaded by

theeeclipse17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views54 pages

CIT 415 Topic 11 Programming Mobile Devices

This lecture covers programming for touch screens and mobile devices, focusing on touch events like touchstart, touchmove, and touchend, as well as the Geolocation API for accessing user location. It explains how to implement these events in JavaScript and provides examples of using the Geolocation API to retrieve and display location information. Additionally, it introduces the Google Maps API for integrating maps into applications, including creating maps and adding markers based on geolocation data.

Uploaded by

theeeclipse17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

Lecture 11

Topic 11: Programming


Touch Screens &
Mobile Devices

1
Lecture Overview

2
Programming Touch Screens
• On a touchscreen device (without a mouse),
browsers fire mouse event when a user
touches the screen.
• However, some events don't translate neatly
for touchscreens e.g. the <div> element is not
considered clickable on touch screens. Hence
it does not fire mouse events on a
touchscreen.

3
• Touchscreen devices fire touch-specific events
for some elements.
• Touch events - created by Apple.
• They are used on Apple iOS and Google
Android.
• Pointer events - created by Microsoft.
• They are used on Windows Phone and
Windows 8 and higher.
4
Touch Events
• Touch events respond to user's finger touches
on a touchscreen.
1. touchstart event – a user places a finger on
the screen.
• analogous to mousedown mouse event
2. touchmove event – a user moves a finger
across the screen.
• corresponds to mousemove
5
3. touchend event – a user moves a finger from
the screen.
• similar to mouseup
4. touchcancel event – a user moves a finger out
of the browser window or the interface or App
cancels the touch.
• unique to touchscreen

6
• Mobile browsers respond to a touch by
initiating a touch cascade.
• Touch Cascade – the order in which a browser
checks a touched element for an event
handler for multiple events, including some
mouse events.
• The touch cascade starts with the touchstart
and touchend events.

7
Touch Cascade Order
touchstart
touchmove
touchend
mouseover
mousemove
mousedown
mouseup
click

8
• When an events that occur when user touches
a touch-based device belongs to the
TouchEvent Object.

9
1. The touchstart Event
• Occurs when the user touches an element.
• HTML Syntax:
<element
="myScript">
• example>:
<p id=“p1” ontouchstart=“myFunction()”>Click
me</p>

10
• JavaScript Syntax:
object.ontouchstart = myScript;
• Example:
document.getElementById(“p1").ontouchstart =
myFunction;
• Alt JavaScript Syntax: Using
addEventListener() method
object.addEventListener("touchstart",
myScript);
11
• Example:
document.getElementById(“p1").addEventListen
er("touchstart", myFunction);

myFunction(){
document.getElementById(“p2”).innerHTML=“H
ello World”;
}
12
• Example: TouchStart.html
<!DOCTYPE html>
<html>
<head>
<title>Touch Start Demo</title>
<script>
function greetings() {
document.getElementById("p2").innerHTML = "Hello World";
}
</script>
<body>
<h1>DOM touchstart Event</h1>
<p id="p1">Paragraph is touch sensitive. It responds with greetings</p>
<p id="p2"></p>
<script>
document.getElementById("p1").addEventListener("touchstart", greetings);
</script>
</body>
</html>

13
2. The touchend Event
• occurs when the user removes the finger from
an element.
• Syntaxes:
<element ontouchend="myScript">
object.ontouchend = myScript;
object.addEventListener("touchend", myScript);

14
• Example: TouchEnd.html
<!DOCTYPE html>
<html>
<head>
<title>Touch End Demo</title>
<script>
function greetings() {
document.getElementById("p2").innerHTML = "Hello World";
}
</script>
</head>
<body>
<h1>DOM touchend Event</h1>
<p id="p1">Touch and release this paragraph to see greetings.</p>
<p id="p2"></p>
<script>
var para1=document.getElementById("p1");
para1.addEventListener("touchend", greetings);
</script>
</body>
</html>

15
3. touchmove Event
• occurs when the user moves the finger across
the screen.
• The touchmove event will be triggered once
for each movement, and will continue to be
triggered until the finger is released.
• Syntax:
object.addEventListener("touchmove",
myScript);
16
• Example:
var x = document.getElementById(“p1")
x.addEventListener("touchmove", myFunction);

17
• Example: TouchMove.html
<!DOCTYPE html>
<html>
<head>
<title>Touch Move Demo</title>
<script>
function greetings() {
document.getElementById("p2").innerHTML = "Hello World";
}
</script>
</head>
<body>
<h1>DOM touchmove Event</h1>
<p id="p1">Touch this paragraph and move the finger to trigger greetings.</p>
<p id="p2"></p>
<script>
var para1=document.getElementById("p1");
para1.addEventListener("touchmove", greetings);
</script>
</body>
</html>

18
Using Programming Interfaces for
Mobile Devices
• The following APIs are used to access
information provided by mobile device
hardware.

19
Using the Geolocation API
• The API provides access to user's latitude &
longitude.
• In JavaScript, it is accessed using geolocation
property of Navigator object.

20
The Geolocation API Methods

21
Using the getCurrentPosition() Method
• Requests for user’s current position exactly once.
• Syntax:
getCurrentPosition(success,fail, {options});
• It takes 3 arguments:
i). success – code (function) that is executed if the
method returns the user’s position successfully.
• This is the only mandatory argument.

22
ii). fail – code (function) that is executed when the
method fails to retrieve the user’s location.
• This should include code that handles failure and
rejection gracefully.
• Example:
function fail() {
alert(“Sorry, Geolocation information
unvailable");
}

23
iii). options – includes parameters that specifies
details (properties) of a geolocation request:
a). enableHighAccuracy - Requsest for high-
accuracy results (Boolean).
b). timeout - Maximum time to wait before
cancelling request, in milliseconds.

24
c). maximumAge - Maximum age of cached
request to use; if set to 0, new request is always
triggered, and if set to infinity, any existing
cached data is always used.
• Example:
var options = { enableHighAccuracy: true,
timeout: 5000, maximumAge: 0
};

25
The success() Function
• The getCurrentPosition() method
automatically passes an object (Position
Object) to the success() function.
• The Position object contains a single property,
coords which holds device’s location
information.
• The cords property in turn contains the
following subproperties:
26
The Coords Object Properties

27
• The success() function must include a
statement to retrieve the geolocation
information from the coords property.
• Example:
var long=position.coords.longitude;
var lat=position.coords.latitude;

28
• Example 2:
navigator.geolocation.getCurrentPosition(success,
fail, {timeout: 10000});
function success(position) {
var long=position.coords.longitude;
var lat=position.coords.latitude;
document.getElementById("p2").innerHTML=
"Your longitude:" + long;
document.getElementById("p3").innerHTML=
"Your latitude:" + lat;
}

29
N/B: success and fail are call back arguments.
• Call back arguments – Arguments that contain
or reference executable code.
• As such, they are specified as arguments in
another function header.

30
• Example: DeviceGeolocation.html
<!DOCTYPE html>
<html>
<head>
<title>Mobile Device Geolocation API Demo</title>
</head>
<body>
<h1>Device Gelocation</h1>
<p id="p1">This code displays the longitude and and latitude of this device.</p>
<p id="p2"></p>
<p id="p3"></p>
<script>
var options = { enableHighAccuracy: true, timeout: 5000,maximumAge: 0 };
navigator.geolocation.getCurrentPosition(success, fail, options);
function success(position) {
var lng=position.coords.longitude;
var lat=position.coords.latitude;
document.getElementById("p2").innerHTML="Your longitude:" + lng;
document.getElementById("p3").innerHTML="Your latitude:" + lat;
}
function fail(){
alert("Geolocation information not available");
}
</script>
</body>
</html>

31
The watchPosition() Method
• The method is used to register a handler function
that will be called automatically each time the
position of the device changes (repeatedly).
• The location information is returned in a Position
object.
• Each update returns a new Position object.
• Each Position object has a unique transaction ID
(number) associated with each call.
• You can use this ID to cancel the watchPosition
call and to stop receiving location updates.

32
• Syntax:
var watchId=
navigator.geolocation.watchPosition (success ,
fail, options);

33
• Example page: Watchmethod.html
<!DOCTYPE html>
<html>
<head>
<title>Watch Position Method Demo</title>
<script >
var watchID;
var geoLoc;

function success(position) {
var lat= position.coords.latitude;
var lng= position.coords.longitude;
var spd= position.coords.speed*(18/5);
var hng= position.coords.heading;

document.getElementById("p3").innerHTML="Your longitude:" + lng;


document.getElementById("p4").innerHTML="Your latitude:" + lat;
document.getElementById("p5").innerHTML="Your Speed:" + spd;
document.getElementById("p6").innerHTML="Your Heading:" + hng;
}
function fail() {
alert("Geolocation information is unavailable!");
}
</script>
</head>

34
<body onload="getLocationUpdate()">
<h1>Geolocation Information</h1>
<p id="p1"> This information updates automatically</p>
<p id="p2">Geolocation information is more accurate on mobile devices</p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<p id="p6"></p>
<script>
function getLocationUpdate() {
watchID = navigator.geolocation.watchPosition(success, fail, {timeout:10000});
}
</script>
</body>
</html>

35
The clearWatch() Method
• The method is used to unregister location
monitoring handlers previously installed using
Geolocation.watchPosition().
• Syntax:
navigator.geolocation.clearWatch(id);
• id - The ID number returned by the
Geolocation.watchPosition() m-ethod when
installing the handler you wish to remove.

36
• Example webpage: ClearWatch.html
<!DOCTYPE html>
<html>
<head>
<title>Clear Watch Method Demo</title>
<script>
var watchID;
var geoLoc;
function getLocationUpdate() {
watchID = navigator.geolocation.watchPosition(success, fail, {timeout:10000});
}
function success(position) {
var lat= position.coords.latitude;
var lng= position.coords.longitude;
var spd= position.coords.speed*(18/5);
var hng= position.coords.heading;

document.getElementById("p3").innerHTML="Your longitude:" + lng;


document.getElementById("p4").innerHTML="Your latitude:" + lat;
document.getElementById("p5").innerHTML="Your Speed:" + spd;
document.getElementById("p6").innerHTML="Your Heading:" + hng;
}
function fail() {
alert("Geolocation information is unavailable!");
}

37
function stopUpdates() {
navigator.geolocation.clearWatch(watchID);
alert("Location updates stopped!");
}
</script>
</head>
<body onload="getLocationUpdate()">
<h1>Geolocation Information</h1>
<p id="p1"> This information updates automatically</p>
<p id="p2"><b>Geolocation information is more accurate on mobile
devices</b></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<p id="p6"></p>
<button onclick="stopUpdates()">Stop Updates</button>
</body>
</html>

38
Using the Google Maps API
• The Google Maps API enables you to add
content provided by the Google Maps service
to your own apps.
• The Google Maps API can be used to display:
i. a map centered on the user’s current
location or on a location you specify
ii. a map showing a route between two
locations
iii. directions between two locations.
39
Creating a Map
• 2 constructors are used to create a Google
Map instance:
i. Map() constructor
ii. LatLng() constructor

40
The LatLng() constructor
• Used to plot a device’s current position on
Google Maps.
• Example:
var x=new google.maps.LatLng(latitude,
longitude);

41
The Map() Constructor
• The Map() constructor creates a map object.
• Example:
var myMap = new google.maps.Map(element,
options);
• The Map object is then assigned to a Map
variable on the LHS.

42
• Parameters:
i. element – specifies a web page element
where the map is displayed.
ii. options – specifies parameters that define
the properties of the map.
• A Map object supports several properties
including: zoom, center, mapTypeId etc.
• zoom and center are mandatory
43
zoom property
• is a whole number that specifies the level of
zoom.
• zero shows the entire Earth, and larger
numbers show more detailed views.

44
center property
• specifies the latitude and longitude on which
the map is centered.
• You specify the coordinates using an object
created with the LatLng() constructor.
• example:
var mapProp= { center:new
google.maps.LatLng(lat,lng), zoom:5};
45
• N/B: the lat and lng values must have been
obtained earlier using the statements:
var lng=position.coords.longitude;
var lat=position.coords.latitude;

46
The mapTypeId Property
• an optional property.
• It specifies the type of map.
• Map types include:
i). roadmap - displays normal map view. This is the
default map type.
ii). satellite - displays Google Earth satellite images.
iii). hybrid - displays a mixture of normal and
satellite views.

47
iv). terrain - displays a physical map based on
terrain information.
• Example:
mapTypeId:’roadmap’;

48
The Google Maps JavaScript Library
• Before you can use the Map() and LatLng()
constructors, your app has to load the Google
Maps JavaScript
• Example:
<script
src="https://maps.googleapis.com/maps/api/js?v=3
.exp&sensor=true"></script>
• The sensor attribute lets Google know that your
script uses the API with positioning hardware via
the geolocation object.
49
• Example:GoogleMapsAPI.html
<!DOCTYPE html>
<html>
<head>
<title>Google Map API Demo</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
</head>
<body onload="myMap()">
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var options = {
enableHighAccuracy: true, timeout: 5000,maximumAge: 0
};
navigator.geolocation.getCurrentPosition(success, fail, options);
function success(position) {
var lng=position.coords.longitude;
var lat=position.coords.latitude;
var myLatLng=new google.maps.LatLng(lat,lng);
var mapProps = { center: myLatLng, zoom: 8, mapTypeId: 'roadmap' };
var myMap = new google.maps.Map(document.getElementById("googleMap"),mapProps);
}
function fail() {
alert("Geolocation information unavailable");
}
}
</script>
</body>
</html>

50
• N/B: A Google Maps page must be opened in
a server in order to display correctly.

51
Adding a Location Marker
• Add a marker by instantiating the marker class
and specifying the position to be marked using
latlng() method.
• Example:
var marker = new google.maps.Marker
({position: new google.maps.LatLng(lat, lng),
map: myMap});

52
• Parameters:
i. location - Specifies the desired location of
the marker.
ii. map – specifies the map the marker is to be
added to.

53
• Example:GoogleMapsAPI.html
<!DOCTYPE html>
<html>
<head>
<title>Google Map API Demo</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
</head>
<body onload="myMap()">
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var options = {
enableHighAccuracy: true, timeout: 5000,maximumAge: 0
};
navigator.geolocation.getCurrentPosition(success, fail, options);
function success(position) {
var lng=position.coords.longitude;
var lat=position.coords.latitude;
var myLatLng=new google.maps.LatLng(lat,lng);
var mapProps = { center: myLatLng, zoom: 8, mapTypeId: 'roadmap' };
var myMap = new google.maps.Map(document.getElementById("googleMap"),mapProps);
var marker = new google.maps.Marker({position: myLatLng, map: myMap});
}
function fail() {
alert("Geolocation information unvailable");
}
}
</script>
</body>
</html>

54

You might also like