C# Programming Tutorial(8920128728): How to do Orientation, Network, and Battery status plugin in PhoneGap?

In our previous section, we learned about the device info plugin. In this section, we will learn about the remaining plugins, i.e., device orientation plugin, Network Information plugin, and Battery status plugin. The complete description of each plugin is given below:

Device orientation plugin

For device orientation, we will use our previous example, i.e., Device info example. We will use the following steps to work with device orientation plugin in our PhoneGap application:

1) Create index2.html file

We will create a new file index2.html with the same code as preset in the index.html. We will make changes later in index2.html file not in index.html.

Orientation, Network, and Battery status plugin

2) Create a field to show the orientation on the UI

We will add a heading in our application using <h1></h1> tag. After that we will use a field for showing the orientation information on the user interface using <div></div> tag.

<body>  
        <h1> Hardware </h1>  
        <div id="result"></div>  
        <h1> Orientation </h1>  
        <div id="orientation"></div>  
        <script type="text/javascript" src="cordova.js"></script>  
</body>  

3) Make changes in the window.onload function

Now, we will make some changes to the window.onload function. We will create a watch Id because the compass will keep working until we stop it. So eventually, we want to clear that watch Id. We will access it using the navigator.compass.watch heading (). This function takes three callback functions, i.e., success, error, and frequency. We will access the watchId in the following way:

var watchId = navigator.compass.watchHeading(success, error, {frequency: 100});

4) Create success and error callback function

We will make the success and error callback functions. The success and error functions take heading and error as arguments, respectively. In the error callback function, we will simply use the alert function, and in the success function, we will set the orientation data in the orientation div in the following way:

function success(heading)
{
document.getElementById('orientation').innerHTML = heading.magneticHeading;
}
function error(error)
{
alert("Compass Error: " + error.code);
}

Note: We can or cannot see the orientation information. We can see it only when the manufacturer of the device allows it.

Network information plugin

Now, we will take a look at the network information plugin. We will add some lines of code in our index2.html. These are the following steps that we will perform to work with the Network Information plugin. By using this plugin, we can find out exactly what type of network we are connected to.

1) Create a field for showing the network information on the UI

We will add a heading in our application using <h1></h1> tag. After that we will use a field for showing the orientation information on the user interface using <div></div> tag.

<body>  
        <h1> Hardware </h1>  
        <div id = "result" ></div>  
        <script type="text/javascript" src="cordova.js"></script>  
        <h1> Network Information </h1>  
        <div id = "networkResult" ></div>  
        <h1> Orientation </h1>  
        <div id = "orientation" ></div>  
</body>  

2) Adding network information in the window.onload function

We will create a variable and store the data returned by the navigator.connection.type and pass that variable into an alert function in the following way:

//Network Information
var networkType = navigator.connection.type;
alert(networkType);

Orientation, Network, and Battery status plugin

It really looks good but there is a bunch of other types which are required to know. The connection can be unknown, Ethernet, Wi-Fi, 2G, 3G and 4G etc. We can access different types of connection using enumeration. We will create an enumeration conType. We will access the element using id in which we show the result on the UI in the following way:

var conType = {};
conType[ Connection.UNKOWN ] = "Connection Unknown";
conType[ Connection.ETHERNET ] = "Ethernet";
conType[ Connection.WIFI ] = "wifi";
conType[ Connection.CELL_2G ] = "Cell";
conType[ Connection.CELL_3G ] = "Cell";
conType[ Connection.CELL_4G ] = "Cell";
conType[ Connection.CELL ] = "Cell";
conType[ Connection.NONE ] = "None";
document.getElementById('networkResult').innerHTML = conType[networkType];

Now, we will run our application on the PhoneGap Developer App:

Orientation, Network, and Battery status plugin

Battery status plugin

Battery status is another piece of the hardware that PhoneGap can interact with. It is required to look at battery status if we are going to perform a critical operation. We want to make sure that it is not going to run out of batteries during the operation. There is a couple of different ways to get the battery status. We will use the following steps to get the battery status in our application:

1) Create batterystatus event listener

Now, we will attach an event listener called batterystatus with our window. This event listener will call the onBatteryStatusChange function. This function will take the battery status as an argument. The batteryStatus event listener will be written in the following way:

//Battery Status
window.addEventListener('batterystatus', onBatteryStatusChange, false);

2) Create onBatteryStatusChange function

Now, we will create the onBatteryStatusChange callback function. This callback function contains an alert function which tells us about the level of the status and whether the status is plugged in or not. The onBatteryStatusChange function is designed in the following way:

function onBatteryStatusChange(status)
{
alert("Battery Level: " + status.level + " Plugged in: " + status.isPlugged);
}

We can also use batterylow and batterycritical event listener rather than using batterystatus. They both work in the same way as battery status work. The batterylow and batterycritical event listeners are designed in the following way:

window.addEventListener('batterylow', onBatteryStatusLow, false);
window.addEventListener('batterycritical', onBatteryCritical, false);

Complete Code

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
        <title>Hardware</title>  
        <script>  
            window.onload=function()  
            {  
                var out="";  
                out += "Cordova Version: " + device.cordova;  
                out += "<br/>Device Model: " + device.model;  
                out += "<br/>Device Platform: " + device.platform;  
                out += "<br/>UUID: " + device.uuid;  
                out += "<br/>Version: " + device.version;  
                out += "<br/>Manufacturer: " + device.manufacturer;  
                out += "<br/>Serial: " + device.serial;  
                document.getElementById('result').innerHTML = out;  
                  
                //Network Information  
                var networkType = navigator.connection.type;  
                var conType = {};  
                conType[Connection.UNKOWN] = "Connection Unknown";  
                conType[Connection.ETHERNET] = "Ethernet";  
                conType[Connection.WIFI] = "wifi";  
                conType[Connection.CELL_2G] = "Cell";  
                conType[Connection.CELL_3G] = "Cell";  
                conType[Connection.CELL_4G] = "Cell";  
                conType[Connection.CELL] = "Cell";  
                conType[Connection.NONE] = "None";  
                document.getElementById('networkResult').innerHTML = conType[networkType];  
              
                var watchId = navigator.compass.watchHeading(success, error, {frequency: 100});  
                  
                //Battery Status  
                window.addEventListener('batterystatus', onBatteryStatusChange, false);  
                  
//                window.addEventListener('batterylow', onBatteryStatusLow, false);  
//                  
//                window.addEventListener('batterycritical', onBatteryCritical, false);  
//                  
                function onBatteryStatusChange(status)  
                {  
                    alert("Battery Level: " + status.level + " Plugged in: " + status.isPlugged);  
                }  
                  
                  
            }  
              
            function success(heading)  
            {  
                document.getElementById('orientation').innerHTML = heading.magneticHeading;  
            }  
              
            function error(error)  
            {  
                alert("Compass Error: " + error.code);  
            }  
          
              
              
        </script>  
    </head>  
    <body>  
        <h1>Hardware</h1>  
        <div id="result"></div>  
        <script type="text/javascript" src="cordova.js"></script>  
        <h1>Network Information</h1>  
        <div id="networkResult"></div>  
        <h1>Orientation</h1>  
        <div id="orientation"></div>  
    </body>  
</html>  

Output

Orientation, Network, and Battery status plugin

C# Programming Tutorial(8920128728)

Saturday, 5 December 2020

How to do Orientation, Network, and Battery status plugin in PhoneGap?

Device orientation plugin

1) Create index2.html file

2) Create a field to show the orientation on the UI

3) Make changes in the window.onload function

4) Create success and error callback function

Note: We can or cannot see the orientation information. We can see it only when the manufacturer of the device allows it.

Network information plugin

1) Create a field for showing the network information on the UI

2) Adding network information in the window.onload function

Battery status plugin

1) Create batterystatus event listener

2) Create onBatteryStatusChange function

Complete Code

No comments:

Post a Comment