Simple backup batch(using rar/winrar) - for Windows

Here is a simple backup batch file fow windows.
It will be called by a daily process and it provides to make a .rar backup file with day specification in the file name.
Here is the content of the .bat file that you have to create(suppose you have f:\DATI\ANAGRAFICA folder to backup):

echo

set WINRAR="C:\Program Files (x86)\WinRAR"

set mydate=%date:~6,4%%date:~3,2%%date:~0,2%
echo %mydate%

f:
cd DATI
%WINRAR%\rar a -r F:\BACKUP\ANAGRAFICA_%mydate%_BCK.rar ANAGRAFICA


That's all..... Bye...

Phonegap: your first easy mobile app.....

Here we see how to make a first simple mobile app starting to the real funny "Pokemon Fusion" web page realized by Alex Onsager and you find by clicking here....(http://pokemon.alexonsager.net/)

We will do a simple import(by an html iframe) of the page of Pokemon Fusion.
We will write only a single code row.
We will do a simple test to try how PhoneGap works.....

At the and we have an .apk file to install on our android phone

Prerequisites: PhoneGap development kit correctly installed on your pc... an android phone correcty connected and recognized by your pc(and phonegap).

Step 1: open a prompt and create a working directory(mkdir pokemonfusion_test)
Step 2: move under your working dir: cd pokemonfusion_test
Step 3: create a simple PhoneGap test project: phonegap create test
Step 4: move under www directory and open index.html for editing it....
Step 5: remove from the body tag element all its content and paste this
        <iframe src="http://pokemon.alexonsager.net/" style="width:100%; height:100%;">
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
the last two rows are already existent in the file.......
So those three rows will be the only content of the body tag.....
Save and close the file.
Step 6: deploy all on your android phone(or your local emulator....): phonegap run android

After few minutes Pokemon Fusion will be displayed on your android system......
Your application will installed with "Hello World
" name. And its icon will be the default icon for test application.

All it's done, you can download by here:

Or checkout via SVN under this: svn+ssh://svn.code.sf.net/p/pokemonfusion/code
Access by anonymous user with no password.
If you have a svn client type this:
svn checkout svn://svn.code.sf.net/p/pokemonfusion/code/ pokemonfusion-code 

You can find here the project of the phonegap application as you see in this post.

Bye.....

Eclipse: installing egit plugin

Open eclipse, in the toolbar menu, under "Help" - "Install New Software"
Insert this url "http://download.eclipse.org/egit/updates" into the text field and click on the "Add" button.
Flags the "Eclipse Git Team Provider" and "JGit" check boxes.
You've done....

Eclipse: disinstalling plug-ins

For full removing installed plug-ins from Eclipse, go under

Help --> About Eclipse --> Installation Details(BUTTON) --> Installed Software(TAB)

then select plug-ins to remove....

Bye....

Cordova/PhoneGap: prevent screen rotation

Fix the screen side of your app, preventing screen rotation.
Edit the config.xml file, the orientation preference tag in one of these ways:

<preference name="orientation" value="portrait" />

<preference name="orientation" value="landscape" />


Bye...

Font-size property dynamically proportioned to the browser window size

It's called viewport. It's the same to say browser window size.
We can assign to the font-size property a value expressed in percentage.
For example if the viewport width is 50 cm, assinging a font-size of 1vw matches to 0.5 cm.
So we give it simply:
a {
    font-size: 1vw;
}

Others use of dinamical font-size use should be:
- the vh: viewport height - for example: font-size:1vh;
- the vmin: the smaller between vw or vh - for example: font-size:1vmin;
- the vmax: the larger between vw or vh - for example: font-size:1vmax;

Bye...

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.

• deviceready
• pause
• resume
• online
• offline
• backbutton
• batterycritical
• batterylow
• batterystatus
• menubutton
• searchbutton
• startcallbutton
• endcallbutton
• volumedownbutton
• volumeupbutton

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...