Fx0でBattery Status API

13203 ワード
Fx0 JavaScript FirefoxOS fxos JavaScript テキストリンク

WebAPIのFx0での動作確認。

Battery Status API

W3C仕様では次のプロパティとイベントが利用できる。

プロパティ 説明
navigator.battery.level バッテリ残量 (0.0:empty～1.0:full)
navigator.battery.charging 充電中(true)かそうでないか(false)
navigator.battery.chargingTime 残り充電時間
navigator.battery.dischargingTime 残り利用時間
イベント 説明
levelchange バッテリ残量が変化した
chargingchange 充電状態が変化した
chargingtimechange 残り充電時間が変化した
dischargingtimechange 残り利用時間が変化した

Fx0で動作確認

Firefox WebIDEのHello Worldテンプレを次のようにちょちょっと修正して、

index.html
  <body>
    <h1>Battery Status API</h1>
    <div>
      level: <span id="level"></span><br>
      charging: <span id="charging"></span><br>
      chargingTime: <span id="chargingTime"></span><br>
      dischargingTime: <span id="dischargingTime"></span><br>
    </div>
  </body>
app.js
window.addEventListener("load", function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;

  function updateBatteryStatus()
  {
    var level = battery.level * 100;
    document.querySelector("#level").innerHTML = level;
    document.querySelector("#charging").innerHTML = battery.charging;
    document.querySelector("#chargingTime").innerHTML = battery.chargingTime;
    document.querySelector("#dischargingTime").innerHTML = battery.dischargingTime;
  }

  battery.addEventListener("levelchange", updateBatteryStatus);
  battery.addEventListener("chargingchange", updateBatteryStatus);
  battery.addEventListener("chargingtimechange", updateBatteryStatus);
  battery.addEventListener("dischargingtimechange", updateBatteryStatus);
  updateBatteryStatus();
});

動かしてみる。

残量と充電状態は取れてるけどchargingTimeとdischargingTimeがInfinityなので、Fx0は残り時間に対応していないようだ。

グラフで表示してみる

ここを参考にSVGの円グラフで表してみます。

index.html
  <body>
    <h1>Battery Status API</h1>
    <svg viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="15.9154943092" fill="none" stroke="gray" stroke-width="8" />
      <circle id="meter" cx="25" cy="25" r="15.9154943092" fill="none" stroke="green" stroke-width="8" stroke-dashoffset="25" stroke-dasharray="0,100" />
      <text x="25" y="25" text-anchor="middle" dominant-baseline="middle">0</text>
   </svg>
  </body>
app.js
window.addEventListener("load", function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;

  function updateBatteryStatus()
  {
    var level = Math.floor(battery.level * 100);
    var meter = document.querySelector("#meter");
    meter.setAttribute("stroke-dasharray", level + "," + (100-level));
    meter.setAttribute("stroke", battery.charging ? "green" : "red");
    document.querySelector("text").innerHTML = level;
  }

  battery.addEventListener("levelchange", updateBatteryStatus);
  battery.addEventListener("chargingchange", updateBatteryStatus);
  updateBatteryStatus();
});


できた。
USBを引っこ抜くと赤になります。