it ng Coordinates Object

M 影 CL C

4.4.3. it ng Coordinates Object

i t ng Coordinates Object bao g m 1 t p các thu c tính ch đ c.ta đã g p chúng trong ví d tr c nh là 1 ph n c a đ i t ng Position object.trong th c t , thì d li u

Coordinates đ c đính thêm vào đ i t ng Position object và sau đó đ c tr v thông qua hàm onSuccess

Các thu c tính c a đ i t ng Coordinates object:  V đ latitude –là ki m s th c

 Kinh đ longitude - là ki m s th c

 D cao altitude –đ cao tính b ng m so v i m c n c bi n  D chính xác accuracy –là đ chính xác c a vi c đ c v đ /kinh đ  D chính xác altitudeAccuracy –là đ chính xác c a đ cao  Tiêu đ heading –là h ng di chuy n

 T c đ speed –là t c đ so v i m t đ t (m/s)

4.5.Ví d minh h a v geolocation

<!DOCTYPE html> <html>

<head>

<title>Device Properties Example</title>

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 47

document.addEventListener(“deviceready”, onDeviceReady, false); var watchID = null;

function onDeviceReady() { // Update every 3 seconds

var options = { frequency: 3000 };

watchID = navigator.geolocation.watchPosition(onSuccess, onError, options); }

// onSuccess Geolocation //

function onSuccess(position) {

var element = document.getElementById(„geolocation‟);

element.innerHTML =‟Latitude: „ + position.coords.latitude + „<br />‟ + „Longitude: „ + position.coords.longitude + „<br />‟ +

„<hr />‟ + element.innerHTML; }

// onError Callback receives a PositionError object // function onError(error) { alert(„code: „ + error.code + „\n‟ + „message: „ + error.message + „\n‟); } </script> </head> <body> <p id=”geolocation”>Watching geolocation...</p> </body> </html> Cách ví d ho t đ ng

Khi ng d ng đ c t i xong thì ph ng th c watchPosition() đ c kích ho t và c m i 3 giây thì thi t b l i nh n đ c 1 c p nh t m i v kinh đ và v đ

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 48 4.6.Cách c i thi n giao di n và tr i nghi m c a ng i dùng

N u ta nhìn vào giao di n c a ng d ng geolocation mà ta đã t o ra trên thì ta s nh n th y nó không đ c đ p và nó trông gi ng nh hình 8-5.th c t thì, t t c nh ng gì nó th c hi n là thêm liên t c các thông tin v geolocation vào trong màn hình cho t i khi ta t t nó

ti n hành giao di n UI, đ u tiên ta ph i ch c ch n r ng project c a ta có các th m c jQTouch c n thi t bên trong nó nh đã đ c mô t trong ch ng tr c.l u ý đ t lên đ u đo n code sau đo n script t i phonegap.js:

var jQT = new $.jQTouch({ icon: „jqtouch.png‟,

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 49 icon4: „jqtouch4.png‟, addGlossToIcon: false, startupScreen: „jqt_startup.png‟, statusBar: „black‟, preloadImages: [ „themes/jqt/img/activeButton.png‟, „themes/jqt/img/back_button.png‟, „themes/jqt/img/back_button_clicked.png‟, „themes/jqt/img/blueButton.png‟, „themes/jqt/img/button.png‟, „themes/jqt/img/button_clicked.png‟, „themes/jqt/img/grayButton.png‟, „themes/jqt/img/greenButton.png‟, „themes/jqt/img/redButton.png‟, „themes/jqt/img/whiteButton.png‟, „themes/jqt/img/loading.gif‟ ] }); </script>

Ti p theo, ta c n 1 đo n HTML đ t trong th <body> nh sau : <div id=”home” class=”current”>

<div class=”toolbar”> <h1>Geolocation</h1> </div> <p id=”geolocation”>Watching geolocation...</p> </div> K t qu đ c làm đ p s trông nh hình 8-6

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 50

ây v n ch a ph i là giao di n UI đ p, nh ng nó nhìn đ p h n ví d g c.làm cách nào ta có th c i ti n nó ? đ n gi n đ làm đ c đi u này, ta có th đ n gi n hóa d li u tr v t hàm onSuccess function.đ thay th vi c in lan man toàn b thông tin, ta có th làm nh sau :

function onSuccess(position) {

var element = document.getElementById(„geolocation‟);

element.innerHTML =‟Position: „ + position.coords.latitude + „, „ + + position.coords.longitude + „<br />‟ +

„<br/>‟ + element.innerHTML; }

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 52

V.Media

5.1.Các Media Files là gì ?

Media API cho phép ta ghi l i và ch i các file âm thanh audio trên 1 thi t b.đ c bi t là ta có th ch y các files audio đ c load tr c ti p trên thi t b hay ch i các files audio t i v thông qua internet

Chú ý: 1 đi u quan tr ng c n ph i nh r ng là th c thi PhoneGap hi n t i không

theo chu n c a W3C giành cho media, và b t c các th c thi trong t ng lai có th xung đ t v i các APIs hi n t i.xa h n n a thì các Media API ch t ng th c v i các thi t b Android và iOS

5.2.Cách s d ng các Media Files

Có kh n ng ch i music hat các audio files khác t trong smartphone 1 cách khá thu n ti n.ví d , n u ta đang trên 1 hành trình dài và không có 1 quy n sách nào trên tay, không thành v n đ , ta có th nghe 1 cu n sách audio

Xa h n, kh n ng ghi l i audio c ng tr nên thu n ti n.n u ta đang ch cho 1 cu c h n nào đó và c n ghi l i 1 vài l i nh c nh sau đó thì ta có th s d ng thi t b gi ng nh 1 máy ghi chú.ch t l ng c a audio đ c ghi l i khá n, file xu t ra là theo đnh d ng mp3, nên th t d dàng k t h p ch t ch v i các công c ch nh s a audio

Theo đó có 3 cách đ thêm vi c ch y/ghi âm l i media vào ng d ng :  T o ra 1 trình ghi âm đ n gi n giúp ích cho vi c nh nh

 K t h p ch t ch v i các tính n ng recording/playback v i 1 ng d ng ghi chú gi ng nh Evernote

 T o ra 1 trình ch i audio đ n gi n đ ch y các files trên web

5.3.Các ng d ng m u s d ng media API

Các ng d ng tiêu chu n trên iOS nh “Voice Memos” và “iPod”(nh hình 9-1) cho phép ta ghi âm l i các ghi chú b ng audio và ch i các audio files

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 53

T t nhiên, ch vì apple cung c p nh ng app này mi n phí thì không có ngh a là nh ng app khác gi ng nh v y không t n t i.hình 9-2 ch ra r ng có vô s các app nh v y trên app store.và t t c chúng cung c p cùng nh ng tính n ng c b n nh nhau - record, pause, play, và stop recording.1 vài có thêm kh n ng chia s các file ghi âm qua e-mail, các dch v chia s media

N u ta tìm ki m các ng d ng music apps, thì ta c ng có kha khá 1 danh sách các apps nh hình 9-3

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 54

1 l a ch n ph bi n là “Pandora” nh hình 9-4, ng d ng này h ng t i d ch v music trên web.và dch v “Pandora”đ a ra 1 cách thú v t i cùng 1 b n nh c.đi u này có ngh a là khi ta mu n nghe music c a nhóm nh c Creedence Clearwater Revival (CCR).thì ta t o ra 1 tr m “station”dành cho ban nh c này và sau đó “Pandora” s tìm ki m âm nh c ch không ch ch n l a các b n ghi âm c a CCR mà còn tìm ki m các bài hát khác t các ban nh c khác cùng th lo i nh c mà ta mu n tìm.sau đó ta có th chia s tr m “radio station” m i này cho nh ng ng i khác

a s (không ph i t t c ) các ng d ng âm nh c ph bi n đ u có m t trên android.chú ý r ng, nh trong hình 9-5 thì giao di n c a “Pandora” r t tr c quan và đ p

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 55

5.4. i t ng MEDIA OBJECT

var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]); i t ng PhoneGap Media object g m 4 tham s , 3 trong s đó là tùy ch n :

 src –là 1 URL (là URL d n t i 1 file trên internet) ch a n i d ng audio

 mediaSuccess – (tham s tùy ch n) đây là 1 hàm callbackđ c g i sau khi 1 đ i t ng Media object đ c hoàn thành xongthao tác hi n t i nh play, record, và stop (ví d nh ta đang play 1 b n nh c thì ph i khi ch i xong h t b n nh c y

thì các l nh trong hàm mediaSuccess m i đ c th c hi n )

 mediaError – (tham s tùy ch n) đây là 1 hàm callback đ c g i khi x y ra l i  mediaStatus - (tham s tùy ch n) đây là 1 hàm callback đ c g i đ xác đnh

nh ng thay đ i tr ng thái các tham s ch đ c :

 position: là v trí trong ph m v phát audio.chú ý r ng nó không đ c c p nh p trong su t quá trình ch y mà ph i g i ph ng th c getCurrentPosition() đ c p nh p

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 56 5.5.Cách s d ng các ph ng th c methods

trong ph n này thì ta h c cách s d ng các ph ng th c chính trong media API.các ph ng th c này cho phép ta thaotác play, record, và pause,ầ

Chú ý: n u ta làm vi c v i phiên b n Phonegap 0.9.4 tr v tr c thì ta ph i ch c ch n r ng các hàm callback ph i trong ph m vi toàn c c

5.5.1.ph ng th c media.getCurrentPosition

đ l y v v trí hi n t i trong ph m vi 1 audio file, ta s d ng ph ng th c media.getCurrentPosition nh sau :

media.getCurrentPosition(mediaSuccess,[mediaError]);

tham s th 1 là hàm mediaSuccess là 1 hàm callbackđ c g i v i v trí

position hi n t i (đ c tính b ng giây) và tham s th 2 tùy ch n là mediaError là 1 hàm callback đ c g i trong tr ng h p x y ra l i

ph ng th c getCurrentPosition() là 1 hàm không đ ng b (ngh a là nó không t g i l i liên t c theo chu kì mà mu n nh v y ta ph i thi t l p b ng tay) dùng đ tr v v trí hi n t i c a audio file n m d i 1 đ i t ng Media object, và nó c ng c p nh t tham s

position trong ph m vi đ i t ng Media object. Ph ng th c này h tr các n n t ng :

 Android

 BlackBerry WebWorks (OS 5.0 and higher)  iOS

 Windows Phone 7 ( Mango ) Ví d m u :

// Audio player //

var my_media = new Media(src, onSuccess, onError);

// Update media position every second

setInterval(function,mi llisec,lang)hàm này có tác d ng g i l p đi l p l i 1 hàm function nào đó theo 1 chu k th i gian millisec

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 57

var mediaTimer = setInterval(function() { // get media position

my_media.getCurrentPosition( // success callback

function(position) {

if (position > -1) {

console.log((position) + " sec"); }

// error callback function(e) {

console.log("Error getting pos=" + e); }

); }, 1000);

5.5.2.Ph ng th c media.getDuration media.getDuration();

Ph ng th c getDuration() là 1 hàm không đ ng b (ngh a là nó không t g i l i liên t c theo chu kì mà mu n nh v y ta ph i thi t l p b ng tay) dùng đ tr v kho ng th i gian c a audio file đ c tínhtheo giâyn u đã bi t.còn n u kho ng th i gian là ch a xác đ nh thì nó tr v giá tr là -1

Ph ng th c này h tr các n n t ng :  Android

 BlackBerry WebWorks (OS 5.0 and higher)  iOS

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 58

Ví d m u :

// Audio player //

var my_media = new Media(src, onSuccess, onError);

// Get duration var counter = 0;

var timerDur = setInterval(function() { counter = counter + 100;

if (counter > 2000) {

clearInterval(timerDur); }

var dur = my_media.getDuration(); if (dur > 0) {

clearInterval(timerDur);

document.getElementById('audio_duration').innerHTML = (dur) + " sec"; }

}, 100);

5.5.3.Ph ng th c media.pause

Ph ng th c này dùng đ t m d ng vi c ch y 1 audio file

media.pause();

hàm media.pause() là 1 hàm không đ ng b dùng đ t m d ng 1 audio file ph ng th c này h tr các n n t ng :

 Android

 BlackBerry WebWorks (OS 5.0 and higher)  iOS

 Windows Phone 7 ( Mango )

clearInterval(id_of_setinterval) xóa b đi s l p l i c a hàm function đ c l p b i setInterval v i var id_of_setinterval = setInterval(function,milisec)

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 59

Ví d m u v t m d ng ch y audio file sau khi ch y đ c 10 giây : // Play audio

function playAudio(url) { // Play the audio file at url

var my_media = new Media(url, // success callback function() { console.log("playAudio():Audio Success"); }, // error callback function(err) {

console.log("playAudio():Audio Error: "+err); });

// Play audio my_media.play();

// Pause after 10 seconds setTimeout(function() { media.pause(); }, 10000); }

5.5.4.Ph ng th c media.play

Ph ng th c này dùng đ kh i ch y hay ti p t c ch y 1 audio file

media.play();

hàm media.play() là 1 hàm không đ ng b .đ th c s ch y đ c 1 file thì ta c n chuy n ti p vào 1 URL hay 1 đ ng d n path t i n i ch a file nh sau :

setTimeout(code,millisec,lang)

hàm h n gi g i hàm (không th c hi n l p l i theo chu kì)

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 60

// Play audio //

function playAudio(url) { // Play the audio file at url var my_media = new Media(url, // success callback function() { console.log("playAudio():Audio Success"); }, // error callback function(err) {

console.log("playAudio():Audio Error: "+err); });

// Play audio my_media.play(); }

Chú ý :

Trong BlackBerry WebWorks :

 Các thi t b blackberry h tr gi i h n các kênh audio cùng lúc.các thi t b CDMA ch h tr 1 kênh audio.nh ng thi t b khác h tr 2 kênh audio cùng lúc.do v y vi c c g ng ch i nhi u h n 2 audio files cùng lúc thì k t qu là audio file b t tr c đó s b ng ng l i

Trong iOS :

 numberOfLoops

đ c chuy n ti p vào trong l a ch n options c a ph ng th c play đ đ nh ngh a s l n mà

ta mu n media file đ c ch i :

var myMedia = new Media("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3") myMedia.play({ numberOfLoops: 2 })

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 61 5.5.5.Ph ng th c media.release

ta có th gi i phóng các ngu n audio n m bên d i h đi u hành b ng cách s d ng

ph ng th c release().đây là 1 đi u đ c bi t quan tr ng b i vì có 1 s h u h n các th c th opencore đ c dành cho trình ch y media.các th vi n OpenCore h tr phát media nh audio,video, các đnh d ng nh image.ta luôn luôn g i hàm gi i phóng này khi ta không còn c n t i 1 ngu n media.nh ví d sau :

media.release();

do v y khi x lý hoàn thành thì ta nên làm nh sau : var my_file = new Media(src, onSuccess, onError); my_file.play();

my_file.stop();

my_file.release();

5.5.6.Ph ng th c media.seekTo

dùng đ thi t l p v trí hi n t i trong ph m vi 1 audio file

media.seekTo(milliseconds);

tham sô :

 milliseconds: là v trí đ c thi t l p làm v trí phát trong ph m vi audio tính b ng mili giây

hàm media.seekTo là 1 hàm không đ ng b dùng đ c p nh t v trí hi n t i c a audio file n m d i 1 đ i t ng media object.c ng c p nh t tham s _position trong ph m vi đ i t ng media object

ph ng th c này h tr các n n t ng :  Android

 BlackBerry WebWorks (OS 6.0 and higher)  iOS

 Windows Phone 7 ( Mango ) Ví d m u :

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 62

// Audio player //

var my_media = new Media(src, onSuccess, onError); my_media.play();

// SeekTo to 10 seconds after 5 seconds setTimeout(function() {

my_media.seekTo(10000); }, 5000);

5.5.7.Ph ng th c media.startRecord

Dùng đ ghi âm l i 1 audio file :

media.startRecord(); hàm media.startRecord() là 1 hàm không đ ng b ví d m u : // Record audio // function recordAudio() { var src = "myrecording.mp3"; var mediaRec = new Media(src, // success callback function() { console.log("recordAudio():Audio Success"); }, // error callback function(err) {

console.log("recordAudio():Audio Error: "+ err.code); });

// Record audio

mediaRec.startRecord(); }

Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 63

Chú ý :

Trong BlackBerry WebWorks :

 Các thi t b blackberry ghi l i audio trong nhi u đnh d ng có ch t l ng khác nhau.các file này ph i k t thúc v i đuôi m r ng là .amr