Mobile-Web-App

Thursday, February 23, 2012

BlackBerry Tablet Simulator

To install and configure the BlackBerry Tablet Simulator:

Before you begin, download and install a VMware Player and the BlackBerry Tablet Simulator.

To download a VMware Player for Windows , visit https://www.vmware.com/tryvmware/?p=player&lp=1 .
To download a VMware Player for Mac, visit https://www.vmware.com/vmwarestore/fusion-for-mac .
To download the BlackBerry Tablet Simulator, visit developer.blackberry.com/android/tool.

Navigate to the location where you saved the simulator, and select the installation file:
- For a Windows environment: BlackBerryPlayBookSimulator-Installer-1.0.9-nnnn-Win-nnnnnnnnnnnn.exe
- For a Linux environment: BlackBerryPlayBookSimulator-Installer-1.0.9-nnnn-Linux-nnnnnnnnnnnn.bin
- For a Mac environment: BlackBerryPlayBookSimulator-Installer-1.0.9-nnnn-macosx-nnnnnnnnnnnn.zip
where nnnn and nnnnnnnnnnnn are the identifier for the release.
Follow the installation instructions for the simulator.
Launch VMware Player or VMware Fusion.
On the VMware Player screen, click Open a Virtual Machine.
On the Open a Virtual Machine screen, navigate to the folder where you installed the simulator. Select theBlackBerryPlayBookSimulator.vmx file.
Click OK.
By default, the development mode is enabled on the BlackBerry Tablet Simulator.

After you finish:

You should take a snapshot of the virtual machine so that you can return the virtual machine to a known stable state if necessary. To learn how to take a snapshot, view the online help in VMware Player.

To load applications in the simulator, you must obtain the IP address of the simulator. Each time the BlackBerry Tablet Simulator starts, VMware Player assigns it an IP address. You must provide this address to the deployment tool of your choice to load your application in the simulator. To display the IP address, the simulator must be in development mode. You can view the simulator's IP address by clicking the icon to the right of the clock on the status bar.

For optimal performance, you should set the number of cores per CPU of the VMware Player to 2.

know more: https://bdsc.webapps.blackberry.com/android/documentation/whitelisting_your_playbook_1873334_11.html

Display Map of current location

Combine the last two article "Embed Google Maps in web page using Javascript" and "Get device geolocation, using window.navigator.geolocation", we can display Google Maps of our current position.

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>#mapcanvas { height: 360px; width: 100%}</style>

<script type="text/javascript">

if (window.navigator.geolocation) {
window.navigator.geolocation.getCurrentPosition(
 successCallback, errorCallback);
} else {
alert("!!!Browser doesn't support Geolocation API.");
}

function successCallback(position){
loadmap();
var mylatitude = position.coords.latitude;
var mylongitude = position.coords.longitude;
document.getElementById("latitude").innerHTML
 = "latitude: " + mylatitude;
document.getElementById("longitude").innerHTML
 = "longitude: " + mylongitude;
document.getElementById("accuracy").innerHTML
 = "accuracy: " + position.coords.accuracy;
loadmap(mylatitude, mylongitude);
}

function errorCallback(error) {
alert(error);
}

var map;

function loadmap(mylat, mylong){
var options = {
 zoom: 15,
 center: new google.maps.LatLng(mylat, mylong),
 mapTypeId: google.maps.MapTypeId.SATELLITE,
 };

map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>

</head>
<body>
<h1>Mobile-Web-App: geolocation</h1>
<div id="mapcanvas"></div>
<div>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="accuracy"></p>
</div>
</body>
</html>

next:
- Display Map on webpage to track location

Wednesday, February 22, 2012

Get device geolocation, using window.navigator.geolocation

It's a html example to get device geolocation, using window.navigator.geolocation API, run on Opera Mobile on Android mobile. Before the browser can get device geolocation, user will be prompted to confirm share location with browser.

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: geolocation</title>

<script type="text/javascript">

if (window.navigator.geolocation) {
 window.navigator.geolocation.getCurrentPosition(
  successCallback, errorCallback);
} else {
 alert("!!!Browser doesn't support Geolocation API.");
}

function successCallback(position){

 document.getElementById("latitude").innerHTML
  = "latitude: " + position.coords.latitude;
 document.getElementById("longitude").innerHTML
  = "longitude: " + position.coords.longitude;
 document.getElementById("accuracy").innerHTML
  = "accuracy: " + position.coords.accuracy;
}

function errorCallback(error) {
 alert(error);
}

</script>

</head>
<body>
<h1>Mobile-Web-App: geolocation</h1>
<div>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="accuracy"></p>
</div>
</body>
</html>

Embed Google Maps in web page using Javascript

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>
#mapcanvas { height: 360px; width: 480px}
</style>

<script>
var map;

function loadmap(){
 var options = {
  zoom: 15,
  center: new google.maps.LatLng(51.507222, -0.1275),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  };
  
 map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>
</head>
<body onload="loadmap();">
<h1>Mobile-Web-App: Google Maps</h1>
<div id="mapcanvas"></div>
</body>
</html>

Sunday, February 19, 2012

HTML5: Display current time and duration of Audio

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML5 Video</title>
</head>
<body>

<p>
<button id="play">PLAY</button>
<button id="pause">PAUSE</button>
</p>
<audio id="audio" controls="controls">
  <source src="samplemusic.mp3" type="audio/mp3" />
</audio>
<p id="duration"></p>
<p id="currenttime"></p>

<script>

var myAudio = document.getElementById("audio");
var btnPlay = document.getElementById("play");
var btnPause = document.getElementById("pause");
var textduration = document.getElementById("duration");
var textcurrenttime = document.getElementById("currenttime");

btnPlay.addEventListener("click", function(){myAudio.play();}, false);
btnPause.addEventListener("click", function(){myAudio.pause();}, false);

myAudio.addEventListener("loadedmetadata", 
 function(){textduration.innerHTML = "Duration: " + convertTime(myAudio.duration);}, 
 false);

myAudio.addEventListener("timeupdate", 
 function(){textcurrenttime.innerHTML = "Current Time: " + convertTime(myAudio.currentTime);}, 
 false);

function convertTime(org){
 var minute = Math.floor(org/60) % 60;
 var second = Math.floor(org%60);
 return( minute + ' : ' + second);
}

</script>

</body>
</html>

HTML5: Display current time and duration of video

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML5 Video</title>
</head>
<body>

<p>
<button id="play">PLAY</button>
<button id="pause">PAUSE</button>
</p>
<video id="video" src="sample.mp4" controls></video>
<p id="duration"></p>
<p id="currenttime"></p>

<script>

var myVideo = document.getElementById("video");
var btnPlay = document.getElementById("play");
var btnPause = document.getElementById("pause");
var textduration = document.getElementById("duration");
var textcurrenttime = document.getElementById("currenttime");

btnPlay.addEventListener("click", function(){myVideo.play();}, false);
btnPause.addEventListener("click", function(){myVideo.pause();}, false);

myVideo.addEventListener("loadedmetadata", 
 function(){textduration.innerHTML = "Duration: " + convertTime(myVideo.duration);}, 
 false);

myVideo.addEventListener("timeupdate", 
 function(){textcurrenttime.innerHTML = "Current Time: " + convertTime(myVideo.currentTime);}, 
 false);

function convertTime(org){
 var minute = Math.floor(org/60) % 60;
 var second = Math.floor(org%60);
 return( minute + ' : ' + second);
}

</script>

</body>
</html>

Play mp3 in HTML5 audio tag

Code to embed HTML5 audio tag to play mp3:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML5 Video</title>
</head>
<body>

<p>
<button id="play">PLAY</button>
<button id="pause">PAUSE</button>
</p>
<audio id="audio" controls="controls">
<source src="samplemusic.mp3" type="audio/mp3" />
</audio>


<script>

var myAudio = document.getElementById("audio");
var btnPlay = document.getElementById("play");
var btnPause = document.getElementById("pause");

btnPlay.addEventListener("click", function(){myAudio.play();}, false);
btnPause.addEventListener("click", function(){myAudio.pause();}, false);

</script>

</body>
</html>