Skip to content

Commit

Permalink
updated demo app
Browse files Browse the repository at this point in the history
  • Loading branch information
Ryan Willoughby committed Dec 18, 2009
1 parent 472aef4 commit e416abc
Show file tree
Hide file tree
Showing 8 changed files with 277 additions and 6,086 deletions.
Binary file added assets/beep.mp3
Binary file not shown.
5 changes: 4 additions & 1 deletion assets/master.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
body {
margin: 0px;
background-color: #222222;
}

.body {
Expand Down Expand Up @@ -40,9 +41,11 @@ p {
}

.view {
height: 400px;
height: 0px;
overflow: hidden;
background: url(view_bg.png) repeat-x;
position: relative;
display: none;
}

ul {
Expand Down
39 changes: 19 additions & 20 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,20 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="/usr/palm/frameworks/mojo/mojo.js" x-mojo-version="1"></script>
<script language="javascript" type="text/javascript" src="phonegap.js"></script>
<script language="javascript" type="text/javascript" src="controller.js"></script>
<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
<script language="javascript" type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script language="javascript" type="text/javascript" src="js/controller.js"></script>
<script language="javascript" type="text/javascript" src="js/emile.min.js"></script>
<link rel="stylesheet" href="assets/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<META NAME="Generator" CONTENT="Nokia WRT plug-in for Aptana Studio 2.0.0" />
</head>
<body>
<div class="body">
<div class="body" onload="init()">

<div class="header">phonegap demo</div>
<div><a href="#"><img src="assets/nitobi-avatar.png" class="nitobi-logo" /></a><div>
<div><a href="#"><img src="assets/nitobi-avatar.png" class="nitobi-logo" /></a></div>

<div>
<div id="menu-accel" class="menu-item" onclick="changeView(event);"><span>Acceleration</span></div>
<div id="view-accel" class="view" style="display:none;">
<div id="view-accel" class="view">

<div class="button" onclick="watchAccel()">watch</div>
<p>
Expand All @@ -36,7 +35,7 @@

<div>
<div id="menu-camera" class="menu-item" onclick="changeView(event);"><span>Camera</span></div>
<div id="view-camera" class="view" style="display:none;">
<div id="view-camera" class="view">
<div class="button" onclick="takePicture()">take picture</div>
<div id="preview"></div>
<div class="button-small" onclick="back()">back</div>
Expand All @@ -45,7 +44,7 @@

<div>
<div id="menu-contacts" class="menu-item" class="menu-selected" onclick="changeView(event);"><span>Contacts</span></div>
<div id="view-contacts" class="view" style="display:none;">
<div id="view-contacts" class="view">
<p>
filter:&nbsp;<input id="contact-filter" name="contact-filter"/><br/>
<div class="button" onclick="getContacts()">get contacts</div>
Expand All @@ -57,7 +56,7 @@

<div>
<div id="menu-location" class="menu-item" onclick="changeView(event);"><span>Location</span></div>
<div id="view-location" class="view" style="display:none;">
<div id="view-location" class="view">
<div class="button" onclick="getLocation()">watch location</div>
<p>
<ul>
Expand All @@ -75,15 +74,15 @@

<div>
<div id="menu-maps" class="menu-item" onclick="changeView(event);"><span>Maps</span></div>
<div id="view-maps" class="view" style="display:none">
<div id="view-maps" class="view">
<div class="button" onclick="showMap()">show map</div>
<div class="button-small" onclick="back()">back</div>
</div>
</div>

<div>
<div id="menu-notify" class="menu-item" onclick="changeView(event);"><span>Notification</span></div>
<div id="view-notify" class="view" style="display:none;">
<div id="view-notify" class="view">
<div class="button" onclick="notify('vib1')">vibrate 1</div>
<div class="button" onclick="notify('vib2')">vibrate 2</div>
<div class="button" onclick="notify('beep')">play beep</div>
Expand All @@ -94,7 +93,7 @@

<div>
<div id="menu-orient" class="menu-item" onclick="changeView(event);"><span>Orientation</span></div>
<div id="view-orient" class="view" style="display:none;">
<div id="view-orient" class="view">
<div class="button" onclick="watchOrientation()">watch orientation</div>
<p>Current orientation:&nbsp;<label id="orientation"> - </label></p>
<div class="button-small" onclick="back()">back</div>
Expand All @@ -103,7 +102,7 @@

<div>
<div id="menu-sms" class="menu-item" onclick="changeView(event);"><span>Sms</span></div>
<div id="view-sms" class="view" style="display:none;">
<div id="view-sms" class="view">
<p>
number:<br/>
<input id="sms_number" type="text" /><br/>
Expand All @@ -118,20 +117,20 @@

<div>
<div id="menu-sound" class="menu-item" onclick="changeView(event);"><span>Sound</span></div>
<div id="view-sound" class="view" style="display:none;">
<div id="view-sound" class="view">
<p>
<div class="button" onclick="navigator.media.play('assets/song.mp3');">play</div>
<div class="button" onclick="navigator.media.pause();">pause</div>
<div class="button" onclick="navigator.media.stop()">stop</div>
<div class="button" onclick="soundCommand('play');">play</div>
<div class="button" onclick="soundCommand('pause');">pause</div>
<div class="button" onclick="soundCommand('stop');">stop</div>
</p>
<div class="button-small" onclick="back()">back</div>
</div>
</div>

<div>
<div id="menu-storage" class="menu-item" onclick="changeView(event);"><span>Storage</span></div>
<div id="view-storage" class="view" style="display:none;">
<p>data:<input id="storage_string" type="text" /><br/></p>
<div id="view-storage" class="view">
<p>data:<input id="storage_string" type="text" /></p>
<div class="button" onclick="testStorage('store');">store data</div>
<div class="button" onclick="testStorage('clear');">clear data</div>
<div class="button" onclick="checkStorage()">check storage</div>
Expand All @@ -142,7 +141,7 @@

<div>
<div id="menu-tel" class="menu-item" onclick="changeView(event);"><span>Telephony</span></div>
<div id="view-tel" class="view" style="display:none;">
<div id="view-tel" class="view">
<p>
number:&nbsp;<input id="phone_number" type="text" /><br/>
<div class="button" onclick="call()">call</div>
Expand Down
253 changes: 253 additions & 0 deletions js/controller.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@
var timeout = null;
var displayState = 0;
var accel_watch_id;
var current_view = null;
var current_menu = null;
var myAudio = null;

if (typeof $ == 'undefined') {
$ = function (el) {
if (typeof el == 'string')
return document.getElementById(el);
else
return el;
}
}

var changeView = function (e) {
try {
// Hide previous view if its visible
if (current_view) {
emile(current_view, 'height:0px', {duration: 800});
}
var menuId = e.currentTarget.id;

// If we've rehit the visible view, we're just hiding so return
if (menuId == current_menu) {
current_view = current_menu = null;
return;
}
var menu = $(menuId);

// The next element after the menu item is the view
var nextSib = menu.nextSibling;
while (nextSib.nodeType != 1) {
nextSib = nextSib.nextSibling;
}
var viewId = nextSib.id;

$("spacer").style.display = "block";
window.location = "#" + menuId;
$(viewId).style.display = "block";
emile(viewId, 'height:400px', {duration: 800});
setTimeout('$("spacer").style.display = "none";', 800);
current_menu = menuId;
current_view = viewId;
} catch (ex) { debug.log(ex.name + ": " + ex.message) }
}

function back() {
if (current_view) {
emile(current_view, 'height:0px', {duration: 800});
}
current_view = null;
}

function getLocation() {
var options = new Object();
options.frequency = 5000;
timeout = setInterval("animate()", 500);
navigator.geolocation.watchPosition(updateLocation, function(){
}, options);
}

function updateLocation(position) {
clearTimeout(timeout);
//pt.latitude, pt.longitude, pt.altitude, pt.accuracy, pt.heading, pt.speed
var pt = position.coords;
document.getElementById('latitude').innerHTML = pt.latitude;
document.getElementById('longitude').innerHTML = pt.longitude;
document.getElementById('altitude').innerHTML = pt.altitude;
document.getElementById('heading').innerHTML = pt.heading;
document.getElementById('speed').innerHTML = pt.speed;
var dt = new Date();
dt.setTime(position.timestamp);
document.getElementById('timestamp').innerHTML = dt.getHours() + ":" +
dt.getMinutes() + ":" + dt.getSeconds();
}

function watchAccel() {
var options = new Object();
options.frequency = 1000;
accel_watch_id = navigator.accelerometer.watchAcceleration(updateAcceleration, function(ex){
navigator.accelerometer.clearWatch(accel_watch_id);
alert("accel fail (" + ex.name + ": " + ex.message + ")");
}, options);
}

function updateAcceleration(accel) {
document.getElementById('accel_x').innerHTML = ("" + accel.x).substring(0,8);
document.getElementById('accel_y').innerHTML = ("" + accel.y).substring(0,8);
document.getElementById('accel_z').innerHTML = ("" + accel.z).substring(0,8);
}

function watchOrientation() {
var options = new Object();
options.frequency = 1000;
navigator.orientation.watchOrientation(updateOrientation, function (ex) { debug.log(ex.name + ": " + ex.message) }, options);
}

function updateOrientation(orientation) {
var output = "";
switch (orientation) {
case DisplayOrientation.PORTRAIT: output = "portrait"; break;
case DisplayOrientation.REVERSE_PORTRAIT: output = "reverse portrait"; break;
case DisplayOrientation.LANDSCAPE_LEFT_UP: output = "landscape left up"; break;
case DisplayOrientation.LANDSCAPE_RIGHT_UP: output = "landscape right up"; break;
case DisplayOrientation.FACE_UP: output = "face up"; break;
case DisplayOrientation.FACE_DOWN: output = "face down"; break;
}
document.getElementById("orientation").innerHTML = output;
}

function getContacts() {
var filter = document.getElementById("contact-filter").value;
navigator.contacts.find({ name: filter }, displayContacts, function(error){
document.getElementById('contacts_list').innerHTML = "<p>" + error.message + "</p>";
}, { limit:200, page:1 });
}

function displayContacts(contacts) {
var output = "";
for (var i=0; i<contacts.length; i++) {
var phone = getNonEmptyNumber(contacts[i]);
output += "<div class='list-item'>" + contacts[i].name.formatted +
"<span class='list-item-small'> Phone(" + phone.type + "): " + phone.number +
"</div>";
}
document.getElementById('contacts_list').innerHTML = output;
}

function getNonEmptyNumber(contact) {
for (var i=0; i<contact.phones.length; i++) {
if (contact.phones[i].number != undefined && contact.phones[i].number != "")
return contact.phones[i];
}
return contact.phones[0];
}

function notify(type) {
switch (type) {
case 'vib1':navigator.notification.vibrate(2000,100); break;
case 'vib2':navigator.notification.vibrate(5000,10); break;
case 'alert':navigator.notification.alert("This is a custom message.", "Custom title", "Custom OK");break;
case 'beep':navigator.notification.beep();break;
}
}

function animate() {
switch (displayState) {
case 0:
displayStatus('finding satellites.');
displayState = 1;
break;
case 1:
displayStatus('finding satellites..');
displayState = 2;
break;
case 2:
displayStatus('finding satellites...');
displayState = 3;
break;
case 3:
displayStatus('finding satellites');
displayState = 0;
break;
}
}

function displayStatus(status) {
document.getElementById('latitude').innerHTML = status;
document.getElementById('longitude').innerHTML = status;
document.getElementById('altitude').innerHTML = status;
document.getElementById('heading').innerHTML = status;
document.getElementById('speed').innerHTML = status;
}

function sendSMS() {
try{
var number = document.getElementById('sms_number').value;
var msg = document.getElementById('sms_message').value;
navigator.sms.send(number, msg, smsSuccess, smsFailure);
} catch (ex) { debug.log(ex.name + ": " + ex.message); }
}

function smsSuccess() {
document.getElementById("sms_status").innerHTML = "success";
}

function smsFailure() {
document.getElementById("sms_status").innerHTML = "failed";
}

function call() {
var number = document.getElementById("phone_number").value;
if (isNaN(number))
navigator.notification.alert("", "Invalid Number", "OK");
else
navigator.telephony.send(number);
}

function takePicture() {
navigator.camera.getPicture(cameraSuccess, cameraFailure, null);
}

function cameraSuccess(imageUrls) {
//this is an array of all the photos taken while the camera app was open
debug.log(imageUrls[0]);
document.getElementById("preview").innerHTML = "<img src='" + imageUrls[0] + "' class='preview'/>";
}

function cameraFailure() {
document.getElementById("preview").innerHTML = "camera error";
}

function soundCommand(cmd) {
try {
if (myAudio == null)
myAudio = new Audio("assets/beep.mp3");
if (cmd == "play") {
myAudio.play();
} else if (cmd == "pause") {
myAudio.pause();
} else if (cmd == "stop") {
myAudio.stop();
}
} catch (ex) { debug.log(ex.name + ": " + ex.message) }
}

function checkStorage() {
var store = navigator.storage.getItem("store_test");
if (store) {
document.getElementById("storage_output").innerHTML = "You stored this: " + store;
}
}

function testStorage(mode) {
try {
if (mode == 'store') {
navigator.storage.setItem("store_test", document.getElementById("storage_string").value);
}
else {
navigator.storage.removeItem("store_test");
}
} catch (ex) {
alert(ex.name + ": " + ex.message);
}
}

function showMap() {
navigator.geolocation.getCurrentPosition( function(position) {
navigator.map.show(position);
}, function () { debug.log("mapping error"); })
}
Loading

0 comments on commit e416abc

Please sign in to comment.