The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
 Reply to this topicStart new topic
Replies
Christian J
post Jan 18 2017, 08:09 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
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 #3


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

Group: WDG Moderators
Posts: 20,730
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 #4


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

Group: WDG Moderators
Posts: 20,730
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
Christian J
post Jan 18 2017, 03:33 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,656
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 #6


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

Group: WDG Moderators
Posts: 20,730
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 #7


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

Group: WDG Moderators
Posts: 20,730
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

Posts in this topic
s1lv3rf0x87   HTML, Battery Level   Jan 18 2017, 06:38 AM
pandy   Can't you just multiply the value with 100? I ...   Jan 18 2017, 07:04 AM
s1lv3rf0x87   Can't you just multiply the value with 100? ...   Jan 18 2017, 07:12 AM
pandy   Sorry, I edited my post above but you had time to ...   Jan 18 2017, 07:15 AM
s1lv3rf0x87   Sorry, I edited my post above but you had time to...   Jan 18 2017, 07:22 AM
pandy   OK, a little JS lesson in place then. You quote st...   Jan 18 2017, 07:40 AM
s1lv3rf0x87   OK, a little JS lesson in place then. You quote s...   Jan 18 2017, 07:49 AM
pandy   I have been asked to change the display charge s...   Jan 18 2017, 08:36 AM
s1lv3rf0x87   I have been asked to change the display charge ...   Jan 18 2017, 10:22 AM
pandy   I forgot to quote. Here I tell you all about quote...   Jan 18 2017, 11:18 AM
pandy   And I forgot that the battery level isn't in p...   Jan 18 2017, 11:22 AM
Christian J   Note that browser support still seems very limited...   Jan 18 2017, 08:09 AM
pandy   Jesus, it's a JavaScript method! I didn...   Jan 18 2017, 08:23 AM
pandy   The sample at the top of the page at CanIUse must ...   Jan 18 2017, 08:28 AM
Christian J   I tried to run the script locally on my phone and...   Jan 18 2017, 03:33 PM
pandy   Yeah, but I don't get a choice of browser. It ...   Jan 18 2017, 04:30 PM
pandy   Oh, you asked about JS. I thought you said HTML. W...   Jan 18 2017, 04:42 PM

« Next Oldest · Client-side Scripting · Next Newest »
 

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

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 01:35 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC