The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML, Battery Level
s1lv3rf0x87
post Jan 18 2017, 06:38 AM
Post #1





Group: Members
Posts: 5
Joined: 18-January 17
Member No.: 26,270



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 07:04 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s1lv3rf0x87
post Jan 18 2017, 07:12 AM
Post #3





Group: Members
Posts: 5
Joined: 18-January 17
Member No.: 26,270



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 07:15 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s1lv3rf0x87
post Jan 18 2017, 07:22 AM
Post #5





Group: Members
Posts: 5
Joined: 18-January 17
Member No.: 26,270



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 07:40 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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? happy.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s1lv3rf0x87
post Jan 18 2017, 07:49 AM
Post #7





Group: Members
Posts: 5
Joined: 18-January 17
Member No.: 26,270



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2017, 08:09 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Note that browser support still seems very limited:
http://caniuse.com/#search=battery
https://developer.mozilla.org/en/docs/Web/A...r_compatibility
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 08:23 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Jesus, it's a JavaScript method! I didn't know and couldn't figure out how the script worked. laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 08:28 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 08:36 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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';
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s1lv3rf0x87
post Jan 18 2017, 10:22 AM
Post #12





Group: Members
Posts: 5
Joined: 18-January 17
Member No.: 26,270



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

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';




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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 11:18 AM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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

See if it works with quotes.
CODE
if (battery.level != '100')
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 11:22 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2017, 03:33 PM
Post #15


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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... blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 04:30 PM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 04:42 PM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 11:40 AM