mauriziofranco###blog: January 2015

Thursday, January 29, 2015

PhoneGap plugins: file transfer - download

file-transfer plugin needed.
Install it with this:

phonegap plugin add org.apache.cordova.file-transfer

Here is my example.html(within javascript code).
This example provides a file download(pay attention to change the value of file url to download):

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Transfer - download - Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // !! Assumes variable fileURL contains a valid URL to a path on the device,
//    for example, cdvfile://localhost/persistent/path/to/downloads/

    function startDownload () {
       alert ("invoked startDownload function...") ;
       var fileTransfer = new FileTransfer();
       var downloadUrl = encodeURI("http://www.yoursite.com/file_to_download.txt");

       var relativeFilePath = "./papa-francesco.sqlite"; // using an absolute path also does not work

       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
           var fileTransfer = new FileTransfer();
           fileTransfer.download(
              downloadUrl,

              // The correct path!
              fileSystem.root.toURL() + '/' + relativeFilePath,

              function (entry) {
               console.log("Success");
              },
              function (error) {
               console.log("Error during download. Code = " + error.code);
              }
           );
       });

   }
    </script>
</head>
<body>
    <p><button onclick="startDownload()">start download</button></p>
</body>
</html>

Bye...

PhoneGap/Cordova: file reading plugin example

file plugin needed.
Install it with this:

phonegap plugin add org.apache.cordova.file

Here is my example.html(within javascript code).
This example provides to read file in locale storage, displaying its contents into a javascript alert:

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Read File Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //

        document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("writing_test_with_phonegap.txt", null, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        alert("gotFile invoked with file: " + file.name);
        readDataUrl(file);
        readAsText(file);
    }

    function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as data URL");
            console.log(evt.target.result);
        };
        reader.readAsDataURL(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as text");
            console.log(evt.target.result);
            alert(evt.target.result);
        };
        reader.readAsText(file);
    }

    function fail(evt) {
        console.log(evt.target.error.code);
    }

    </script>
</head>
<body>
    <h1>Example</h1>
    <p>Read File</p>
</body>
</html>

Bye...

PhoneGap plugins: writing file

file plugin needed.
Install it with this:

phonegap plugin add org.apache.cordova.file

Here is my example.html(within javascript code).
This example provides to write file in locale storage:

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Write File Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("writing_test_with_phonegap.txt", {create: true, exclusive: false}, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.createWriter(gotFileWriter, fail);
    }

    function gotFileWriter(writer) {
        writer.onwriteend = function(evt) {
            console.log("contents of file now 'some sample text'");
            writer.truncate(11);
            writer.onwriteend = function(evt) {
                console.log("contents of file now 'some sample'");
                writer.seek(4);
                writer.write(" different text");
                writer.onwriteend = function(evt){
                    console.log("contents of file now 'some different text'");
                }
            };
        };
        writer.write("some sample text");
        alert("file written!!!");
    }

    function fail(error) {
        console.log(error.code);
    }

    </script>
</head>
<body>
    <h1>Example</h1>
    <p>Write File</p>
</body>
</html>

Bye...

PhoneGap plugins: Device informations

device plugin needed.
Install it with this:

phonegap plugin add org.apache.cordova.device

Here is my example.html(within javascript code).
This example provides device informations:

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Device Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        var element = document.getElementById('deviceProperties');

        element.innerHTML = 'Device Name: '     + device.name     + '<br />' +
                            'Device Cordova: ' + device.cordova + '<br />' +
                            'Device Platform: ' + device.platform + '<br />' +
                            'Device UUID: '     + device.uuid     + '<br />' +
                            'Device Model: '    + device.model     + '<br />' +
                            'Device Version: ' + device.version + '<br />';
    }

    </script>
</head>
<body>
    <p id="deviceProperties">Loading device properties...</p>
</body>
</html>

Bye...

PhoneGap plugins: Compass

device-orientation plugin needed.
Install it with this:

phonegap plugin add org.apache.cordova.device-orientation

Here is my example.html(within javascript code).
This example provides current heading of device and display it into a javascript alert:

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Compass Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function getCurrentHeading() {
        navigator.compass.getCurrentHeading(onSuccess, onError);
    }

    // onSuccess: Get the current heading
    //
    function onSuccess(heading) {
        alert('Heading: ' + heading.magneticHeading);
    }

    // onError: Failed to get the heading
    //
    function onError(compassError) {
        alert('Compass Error: ' + compassError.code);
    }

    </script>
</head>
<body>
    <h1>PhoneGap Compass Example</h1>
    <p>
        <button onclick="getCurrentHeading()">Click me to get current heading</button>
    </p>
</body>
</html>

Bye...

PhoneGap plugins: Network Connection

network-information plugin needed.
Install it with this:

phonegap plugin add org.apache.cordova.network-information

Here is my example.html(within javascript code).
This example provides device connection informations:

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Connection Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
        checkConnection();
    }

    function checkConnection() {
        var networkState = navigator.connection.type;

        var states = {};
        states[Connection.UNKNOWN] = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G] = 'Cell 2G connection';
        states[Connection.CELL_3G] = 'Cell 3G connection';
        states[Connection.CELL_4G] = 'Cell 4G connection';
        states[Connection.CELL]     = 'Cell generic connection';
        states[Connection.NONE]     = 'No network connection';

        alert('Connection type: ' + states[networkState]);
    }

    </script>
</head>
<body>
    <p>A dialog box will report the network state.</p>
</body>
</html>

Bye...

PhoneGap plugins: Media-capture - video

media-capture plugin needed.
Install it with this:

phonegap plugin add org.apache.cordova.media-capture

Here is my example.html(within javascript code).
This provides capability to start default system application for video recording and save your video into default locale location(displaying it into a javascript alert):

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Capture Video Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Called when capture operation is finished
    //
    function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
            alert (mediaFiles[i].fullPath + " e " + mediaFiles[i].name);
        }
    }

    // Called if something bad happens.
    //
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    function captureVideo() {
        // Launch device camera application,
        // allowing user to capture up to 2 audio clips
        navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2});
    }
    </script>
    </head>
    <body>
        <button onclick="captureVideo();">Capture Video</button> <br>
    </body>
</html>

PhoneGap plugins: Media-capture - photo

media-capture plugin needed.
Install it with this:

phonegap plugin add org.apache.cordova.media-capture

Here is my example.html(within javascript code).
This prvides capability to start default system application for photo recording and save your photo into default locale location(displaying it into a javascript alert):

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Capture Image Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Called when capture operation is finished
    //
    function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
            alert (mediaFiles[i].fullPath + " e " + mediaFiles[i].name);
        }
    }

    // Called if something bad happens.
    //
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    function captureImage() {
        // Launch device camera application,
        // allowing user to capture up to 2 audio clips
        navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 2});
    }
    </script>
    </head>
    <body>
        <button onclick="captureImage();">Capture Image</button> <br>
    </body>
</html>

Bye...

PhoneGap plugins: Media-capture - audio

media-capture plugin needed.
Install it with this:

phonegap plugin add org.apache.cordova.media-capture

Here is my example.html(within javascript code).
This provides capability to start default system application for audio recording/reproducing and save your audio registration into default locale location(displaying it into a javascript alert):

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Capture Audio Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Called when capture operation is finished
    //
    function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
            alert (mediaFiles[i].fullPath + " e " + mediaFiles[i].name);
        }
    }

    // Called if something bad happens.
    //
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    function captureAudio() {
        // Launch device audio recording application,
        // allowing user to capture up to 2 audio clips
        navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2});
    }
    </script>
    </head>
    <body>
        <button onclick="captureAudio();">Capture Audio</button> <br>
    </body>
</html>

PhoneGap plugins: Accelerometer

For Accelerometer plugin you need to install device-motion plugin, as here

phonegap plugin add org.apache.cordova.device-motion

For Android nothing is needed to add into AndroidManifest.xml file.
For iOS you need to add into config.xml file:

<plugin name="Accelerometer" value="CDVAccelerometer" />

Here is some html and javascipt code to run a quickly example.

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        alert("Device is Ready");
    }

    function getAcceleration(){
        navigator.accelerometer.getCurrentAcceleration(onAccelSuccess, onError);
    }

    function onAccelSuccess(acceleration) {
        var element = document.getElementById('accelerometer');
        element.innerHTML = 'Acceleration X: ' + acceleration.x         + '<br />' +
                            'Acceleration Y: ' + acceleration.y         + '<br />' +
                            'Acceleration Z: ' + acceleration.z         + '<br />' +
                            'Timestamp: '      + acceleration.timestamp + '<br />';
    }

    function onError() {
        alert('onError!');
    }

    function startWatch() {
        // Update acceleration every 1 seconds
        var options = { frequency: 1000 };

        watchID = navigator.accelerometer.watchAcceleration(onAccelSuccess, onError, options);
    }

    function stopWatch() {
        if (watchID) {
            navigator.accelerometer.clearWatch(watchID);
            watchID = null;
        }
    }
    </script>

And here the html code....

<body>
    <h1>PhoneGap Accelerometer Example</h1>
    <p>
        <button onclick="getAcceleration()">Get Acceleration</button>
    </p>
    <p>
        <button onclick="startWatch()">Start Acceleration Debug</button>
    </p>
    <p>
        <button onclick="stopWatch()">Stop Acceleration Debug</button>
    </p>
    <div id="accelerometer">Accelerometer debug area...</div>
</body>

This html code shows three buttons.
Two of them invoke the two javascript functions getAcceleration() and startWatch().
The results is displayed into div area with id="accelerometer", in the lower of the page.

Bye...

Introducing to PhoneGap Events

Here is a small list of current available events implemented from current PhoneGap version.
Thery aren't supported for all(100%) PhoneGap supported platforms.
See every link target for ensure the current support for your s.o. application target.

A small example to test some of these states:
(to insert in the head tag of your test page).

<script type="text/javascript" src="cordova.js" />

<script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load               
    function onDeviceReady () {
        alert ("device ready!!!") ;
    }
    function onOnline () {
        alert ("online!!!") ;
    }
    function onOffline () {
        alert ("offline!!!") ;
    }
       
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("online", onOnline, false);
    document.addEventListener("offline", onOffline, false);

</script>

For battery events you need to install, before, a battery-status plugin.
From shell, within $application_project_home_folder, give this command:

phonegap plugin add org.apache.cordova.battery-status

At last check into AndroidManifest.xml for

<uses-permission android:name="android.permission.BROADCAST_STICKY" />

and into config.xml for iOS

<plugin name="Battery" value="CDVBattery" />

For other platforms see here

For online/offline status you need to install, before,
From shell, within $application_project_home_folder, give this command:

phonegap plugin add org.apache.cordova.network-information

At last check into AndroidManifest.xml for

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

and into config.xml for iOS

<plugin name="NetworkStatus" value="CDVConnection" />

For other platforms see here

Bye...