Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ HTML, Battery Level

Posted by: s1lv3rf0x87 Jan 18 2017, 06:38 AM

Hey Guys,

I have some HTML code which will display the battery status of a device and display the charge as a decimal value.

I am trying to tweak the code so it displays the charge value as a percentage and not a decimal value.

Can someone have a look at this and advise if this is possible and if so how to do this.

Many Thanks in advance.

CODE

<html>
<head>
  <title>Battery Status API Example</title>
  <script>
    window.onload = function () {
      function updateBatteryStatus(battery) {
        document.querySelector('#charging').textContent = battery.charging ? 'charging' : 'not charging';
        document.querySelector('#level').textContent = battery.level;
        document.querySelector('#dischargingTime').textContent = battery.dischargingTime / 60;
      }

      navigator.getBattery().then(function(battery) {
        // Update the battery status initially when the promise resolves ...
        updateBatteryStatus(battery);

        // .. and for any subsequent updates.
        battery.onchargingchange = function () {
          updateBatteryStatus(battery);
        };

        battery.onlevelchange = function () {
          updateBatteryStatus(battery);
        };

        battery.ondischargingtimechange = function () {
          updateBatteryStatus(battery);
        };
      });
    };
  </script>
</head>
<body>
  <div id="charging">(charging state unknown)</div>
  <div id="level">(battery level unknown)</div>
  <div id="dischargingTime">(discharging time unknown)</div>
</body>
</html>

Posted by: pandy Jan 18 2017, 07:04 AM

Can't you just multiply the value with 100? I don't follow the script, assume there is more to it than shown here? But I'm guessing battery.level * 100 .

And this is JavaScript, not HTM.

Posted by: s1lv3rf0x87 Jan 18 2017, 07:12 AM

QUOTE(pandy @ Jan 18 2017, 12:04 PM)

Can't you just multiply the value with 100?

Hi Pandy,

Thank you for your response.

My HTML skills are quite poor at the moment and I am still learning.

I managed to find this code which works but I need a percentage not a decimal value. I am not sure what part of the code I should be multiplying by 100 in order to get it to display as a percentage.

If you could advise or give a working solution that would be ideal.

Thanks

Posted by: pandy Jan 18 2017, 07:15 AM

Sorry, I edited my post above but you had time to post while I did.

I'm guessing you should do it here, but I don't understand the script, so just a guess.

CODE

document.querySelector('#level').textContent = battery.level * 100;

Posted by: s1lv3rf0x87 Jan 18 2017, 07:22 AM

QUOTE(pandy @ Jan 18 2017, 12:15 PM)

Sorry, I edited my post above but you had time to post while I did.

I'm guessing you should do it here, but I don't understand the script, so just a guess.

CODE

document.querySelector('#level').textContent = battery.level * 100;

Hi Pandy,

Thanks for that I have done what you have suggested and it now displays the value without the percentage sign.

This is a step in the right direction I just need the percentage sign to be displayed now.

I am guessing it will be in this same location but not sure how to format.

Posted by: pandy Jan 18 2017, 07:40 AM

OK, a little JS lesson in place then. You quote string values but not variables and operators. You can concatenate the two with +.

So try this.

CODE

document.querySelector('#level').textContent = battery.level * 100 + ' %';

Added a space before the percent sign. Remove the space if you don't want it like that.

+ is both a math operator and and a string operator used to concatenate strings. JavaScript understands from the context how to use it.

If we have this...
var foo = 100 + 100 + ' $';
alert(foo);

... JavaScript will add the two numbers and concatenate the result with the dollar sign. Clever huh?

Posted by: s1lv3rf0x87 Jan 18 2017, 07:49 AM

QUOTE(pandy @ Jan 18 2017, 12:40 PM)

OK, a little JS lesson in place then. You quote string values but not variables and operators if you do some math. You can concatenate the two with +.

+ is both a math operator and and a string operator used to concatenate strings. JavaScript understands from the context how to use it.

So try this.

CODE

document.querySelector('#level').textContent = battery.level * 100 + ' %';

Added a space before the percent sign. Remove the space if you don't want it like that.

Thanks Pandy you are a star.

That works perfectly. I don't suppose you could help me out tweak this code a little further.

I have been asked to change the display charge status so when the battery level reaches 100% to display Fully Charged.

Is that something you could help me with?

Posted by: Christian J Jan 18 2017, 08:09 AM

Note that browser support still seems very limited:
http://caniuse.com/#search=battery
https://developer.mozilla.org/en/docs/Web/API/Battery_Status_API#Browser_compatibility

Posted by: pandy Jan 18 2017, 08:23 AM

Jesus, it's a JavaScript method! I didn't know and couldn't figure out how the script worked.

Posted by: pandy Jan 18 2017, 08:28 AM

The sample at the top of the page at CanIUse must be hardcoded. It says the same either I use my desktop or my phone. I tried to run the script locally on my phone and it didn't work.

Posted by: pandy Jan 18 2017, 08:36 AM

QUOTE(s1lv3rf0x87 @ Jan 18 2017, 01:49 PM)

I have been asked to change the display charge status so when the battery level reaches 100% to display Fully Charged.

Is that something you could help me with?

I think this would work. Only the #level line is changed. I moved it last for clearity

CODE

document.querySelector('#charging').textContent = battery.charging ? 'charging' : 'not charging';
document.querySelector('#dischargingTime').textContent = battery.dischargingTime / 60;
if (battery.level != 100)
document.querySelector('#level').textContent = battery.level * 100 + ' %';
else
document.querySelector('#level').textContent = 'Fully Charged';

Posted by: s1lv3rf0x87 Jan 18 2017, 10:22 AM

QUOTE(pandy @ Jan 18 2017, 01:36 PM)

QUOTE(s1lv3rf0x87 @ Jan 18 2017, 01:49 PM)

I have been asked to change the display charge status so when the battery level reaches 100% to display Fully Charged.

Is that something you could help me with?

I think this would work. Only the #level line is changed. I moved it last for clearity

CODE

Hi Pandy,

I have tried that solution but doesn't seem to have any effect on the outcome.

It would be ideal if it could do it but it's not essential. You have already resolved the main issue that i had.

Thanks

Posted by: pandy Jan 18 2017, 11:18 AM

I forgot to quote. Here I tell you all about quotes and forget them myself...

See if it works with quotes.

CODE

if (battery.level != '100')

Posted by: pandy Jan 18 2017, 11:22 AM

And I forgot that the battery level isn't in percent to start with.

So I guess '1' instead of '100' or maybe it's safer to set it a little lower?

CODE

if (battery.level < '0.99')

Maybe Christian knows more about this. I can't get it to run at all with my phone, so hard to test.

Posted by: Christian J Jan 18 2017, 03:33 PM

QUOTE(pandy @ Jan 18 2017, 02:28 PM)

I tried to run the script locally on my phone and it didn't work.

Can you run javascript locally on phones? And does your phone browser support the battery API?

QUOTE

Maybe Christian knows more about this.

Maybe, maybe not...

Posted by: pandy Jan 18 2017, 04:30 PM

Yeah, but I don't get a choice of browser. It opens in something called HTML Viewer IIRC. But I tried over a server too. So no, I don't think my phone supports this.

Posted by: pandy Jan 18 2017, 04:42 PM

Oh, you asked about JS. I thought you said HTML. Well, I thought so. After all it runs on the phone when the page is on the web too, so why not? But it looks like I thought wrong. I uploaded a page with just 'document.write('Hello!');' in it to my phone and it loads blank.