Post
Ask Question

Battery Events in Apache Cordova

Introduction

Apache Cordova is a platform that can be used to develop mobile applications by using the HTML, CSS and JavaScript. The event is an action that can be detected by the Cordova like the button click event, page onload event etc. In this article I will explain some Battery events, which can fire when the Mobile's Battery can become low or critical. An event is also used to show the status of the Battery. Some of the Battery events are:

Batterycritical

When the battery has reached its critical level then by using this event the Cordova application can detect that the event was generated. This event fires when the Cordova application has found that the percentage of battery power remaining is critical. This event will be called with the object that takes the two properties: 

  • level : The percentage of battery (0-100). (Number)
  • isPlugged : This represents that whether or not the device is plugged in or not.(Boolean)

For this we add an event listener; that is window.addEventListener. After that we receive the Cordova "deviceready" event when the battery is critical:

  window.addEventListener("batterycritical", yourCallbackFunction, false);

The platform that support the Batterycritical event are :

  • iOS
  • Android
  • BlackBerry WebWorks (OS 5.0 and higher)

Example

<!DOCTYPE html>

<html>

<head>

    <title>Cordova Device Ready Example</title>

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

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

        // Call onDeviceReady when Cordova is loaded.      

        // At this point, the document has loaded but cordova-1.9.0.js has not.

        // When Cordova is loaded and talking with the native device,

        // it will call the event `deviceready`.

        function onLoad() {

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

        }

        // Cordova is loaded and it is now safe to make calls Cordova methods     

        function onDeviceReady() {

            window.addEventListener("batterycritical", onBatteryCritical, false);

        }

        // Handle the batterycritical event     

        function onBatteryCritical(info) {

            alert("Battery Level Critical " + info.level + "%\nRecharge Soon!");

        }

    </script>

</head>

<body onload="onLoad()">

</body>

</html>

 

Batterylow 

When the battery has reached its low level then by using this event the Cordova application can detect that the batterylow event was generated. This event is fired when the Cordova application has fond that the percentage of battery power remaining is low. This event will be called with the object that takes the two properties: 

  • level : The percentage of battery (0-100). (Number)
  • isPlugged : This represents that whether or not the device is plugged in or not.(Boolean)

For this we add an event listener; that is window.addEventListener. After that we receive the Cordova "deviceready" event when the battery is critical:

window.addEventListener("batterylow", yourCallbackFunction, false);

The platform that supports the Batterycritical event are :

  • iOS
  • Android
  • BlackBerry WebWorks (OS 5.0 and higher)

Example

<!DOCTYPE html>

<html>

<head>

    <title>Cordova Device Ready Example</title>

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

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

        function onLoad() {

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

        }       

        function onDeviceReady() {

            window.addEventListener("batterylow", onBatteryLow, false);

        }

        // Handle the batterylow event  

        function onBatteryLow(info) {

            alert("Battery Level Low " + info.level + "%");

        }

    </script>

</head>

<body onload="onLoad()">

</body>

</html>

 

Batterystatus

The Cordova application can receive his event when there is a change occuring in the status of the battery. This event fires when a Cordova application detects the percentage of battery has changed by at least 1 percent. It is also received if the device has been plugged in or un-plugged.

The battery status handler will be called with an object that contains two properties:

  • level : The percentage of battery (0-100). (Number)
  • isPlugged : A boolean that represents whether or not the device is plugged in or not. (Boolean)

We will attach an event listener with window.addEventListener once we receive the Cordova  "deviceready" event.

window.addEventListener("batterystatus", yourCallbackFunction, false);

The platform that supports the Batterycritical event are :

  • iOS
  • Android
  • BlackBerry WebWorks (OS 5.0 and higher)
  • Windows Phone 7 ( Mango )

Example

<!DOCTYPE html>

<html>

<head>

    <title>Cordova Device Ready Example</title>

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

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

        function onLoad() {

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

        }           

        function onDeviceReady() {

            window.addEventListener("batterystatus", onBatteryStatus, false);

        }

        // Handle the batterystatus event

        function onBatteryStatus(info) {

            console.log("Level: " + info.level + " isPlugged: " + info.isPlugged);

        }

    </script>

</head>

<body onload="onLoad()">

</body>

</html>

 

Conclusion

In this article I discussed some battery events in apache Cordova.


Similar Articles