6 Replies Latest reply on Sep 21, 2016 9:22 AM by kerrishotts

    Battery status plugin doesn't work

    scon2016 Level 1

      Dear users,

       

      I'm trying the battery status plugin cordova-plugin-battery-status but it doesn't work on my device.

       

      This is the code I have written in my application:

       

      function vedibatt(z) {

      document.getElementById('rispbatt').innerHTML = "Livello: " + z.level + " - Attaccato: " + z.isPlugged;

      }

      document.addEventListener("batterystatus", vedibatt, false);

       

      When I try to plug and unplug the power cable on my device, it doesn't fire the event, also when the battery changes its percentage.

       

      My device is android, on phonegap developer app.

       

       

      How can I fix this issue?

       

       

       

      Thanks

        • 1. Re: Battery status plugin doesn't work
          Chris W. Griffith Adobe Community Professional

          With all plugins, you need to make sure you create the reference to them after the device ready event. The document ready event typically fires before the device ready event.

           

          Plus double check that plugin is included in the PhoneGap Developer App suite. I think it is, but since you can not reference plugins not included, it is worth checking.

           

          Chris

          • 2. Re: Battery status plugin doesn't work
            kerrishotts Adobe Community Professional

            Read the docs, specifically https://www.npmjs.com/package/cordova-plugin-battery-status#example .

             

            The docs use `window.addEventListener`, NOT `document.addEventListener`. Definitely will make a difference.

             

            Chris W. Griffith:

             

            I just checked, and cordova-plugin-battery-status is included in the PhoneGap developer app.

            1 person found this helpful
            • 3. Re: Battery status plugin doesn't work
              scon2016 Level 1

              I know I must call these API after device ready event.

               

              In fact, the code of index.html is this:

               

              <html>

               

               

              <head>

              <title>mmm</title>

                  <meta charset="utf-8" />

                  <meta name="format-detection" content="telephone=no" />

                  <meta name="msapplication-tap-highlight" content="no" />

                  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

                  <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

               

               

              <link rel="stylesheet" type="text/css" href="css/grafica.css" />

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

              <script type="text/javascript" src="js/conn-batt.js"></script>

              </head>

               

               

               

               

              <body onload="setInterval('animabarra()', 700)">

               

              etc...

               

               

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

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

                  <script type="text/javascript">

                      app.initialize();

                  </script>

              </body>

              </html>

               

              ---------------------------------

              The code of js/miecose.js is this:

               

              var apertura = null;

               

               

              function animabarra() {

                  var barra = document.getElementById('intestazione');

                  if(barra.style.backgroundColor == 'green') {

                      barra.style.backgroundColor = 'blue';

                  } else {

                      barra.style.backgroundColor = 'green';

                  }

              }

               

              function pronto() {

              document.addEventListener("batterystatus", vedibatt, false);

              }

               

              ---------------------------------

              The code of js/conn-batt.js is this:

               

              function vediconn() {

                  var codicestato = navigator.connection.type;

                  var stati = {};

                  stati[Connection.UNKNOWN]  = 'Sconosciuta';

                  stati[Connection.ETHERNET] = 'Ethernet';

                  stati[Connection.WIFI]     = 'Wi-Fi';

                  stati[Connection.CELL_2G]  = '2G mobile';

                  stati[Connection.CELL_3G]  = '3G mobile';

                  stati[Connection.CELL_4G]  = '4G mobile';

                  stati[Connection.CELL]     = 'Generica mobile';

                  stati[Connection.NONE]     = 'Nessuna';

              document.getElementById('rispconn').innerHTML = 'Tipo connessione: ' + stati[codicestato];

              }

               

              function vedibatt(z) {

              document.getElementById('rispbatt').innerHTML = "Livello: " + z.level + " - Attaccato: " + z.isPlugged;

              }

               

              document.addEventListener("online", vediconn, false);

              document.addEventListener("offline", vediconn, false);

               

               

              ---------------------------------

              The code of js/index.js is this:

               

              var app = {

                  // Application Constructor

                  initialize: function() {

                      this.bindEvents();

                  },

                  // Bind Event Listeners

                  //

                  // Bind any events that are required on startup. Common events are:

                  // 'load', 'deviceready', 'offline', and 'online'.

                  bindEvents: function() {

                      document.addEventListener('deviceready', this.onDeviceReady, false);

                  },

                  // deviceready Event Handler

                  //

                  // The scope of 'this' is the event. In order to call the 'receivedEvent'

                  // function, we must explicitly call 'app.receivedEvent(...);'

                  onDeviceReady: function() {

                      app.receivedEvent('deviceready');

                  },

                  // Update DOM on a Received Event

                  receivedEvent: function(id) {

                      var parentElement = document.getElementById(id);

                      var listeningElement = parentElement.querySelector('.listening');

                      var receivedElement = parentElement.querySelector('.received');

               

               

                pronto();

               

                      listeningElement.setAttribute('style', 'display:none;');

                      receivedElement.setAttribute('style', 'display:block;');

               

               

                      console.log('Received Event: ' + id);

                  }

              };

               

              --------------------

               

              I have added the connection type plugin not after the device ready event, and it works.

               

              This is my code, to be noted the pronto() function, called in device ready event.

               

              Where did I mistake the code?

               

               

               

              Thanks

              • 4. Re: Battery status plugin doesn't work
                kerrishotts Adobe Community Professional

                Repeating what I said earlier regarding the battery plugin:

                 

                The docs use `window.addEventListener`, NOT `document.addEventListener`. Definitely will make a difference.

                • 5. Re: Battery status plugin doesn't work
                  scon2016 Level 1

                  I tried to change "document" with "window", but it's the same. It doesn't work.

                   

                  How can I do to fix this issue?

                   

                   

                  Thanks

                  • 6. Re: Battery status plugin doesn't work
                    kerrishotts Adobe Community Professional

                    What version of the PhoneGap Developer app are you using? If it's not the most recent version, try updating and see if the issue goes away.

                     

                    Without seeing debugging output, it's difficult to help further. Normally I'd say connect Chrome and debug remotely, but the PGDev app is going to block that.

                     

                    You might try adding the a global error handler as described here:  GlobalEventHandlers.onerror - Web APIs | MDN