[ionic][cordova]バッテリーアイコンをCSSで表示する

ionicで下記のようなバッテリーアイコンをCSSで表示する方法です。

ネイティブのapiより、端末の電池の残量を取得して表示します。
電池残量が30%以下で黄色、10%以下で赤くなります。

1.プラグインを取り込む準備をする。

bower.json

{
        :
  "dependencies": {
    "angular-translate": "~2.7.2",
    "angular-translate-handler-log": "~2.7.2",
    "angular-translate-loader-static-files": "~2.7.2",
    "ngCordova": "~0.1.23-alpha"  /* ここを追加 */
  }
        :
}

package.json

{
        :
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "com.ionic.keyboard",
    "cordova-plugin-battery-status"  /* ここを追加 */
  ],
        :
}

2.プラグインを取り込み、環境を再構築する。

npm install
ionic state restore

3. cordovaプラグインより電池のステータスを取得する

app.js

application.run(function($ionicPlatform, $cordovaBatteryStatus, $rootScope) {
  $ionicPlatform.ready(function() {

  $rootScope.$on('$cordovaBatteryStatus:status', function (event, args) {
    $rootScope.batteryLevel = args.level;       // (0 - 100)
  });

  $rootScope.$on('$cordovaBatteryStatus:critical', function (event, args) {
    $rootScope.batteryLevel = args.level;       // (0 - 100)
  });

  $rootScope.$on('$cordovaBatteryStatus:low', function (event, args) {
    $rootScope.batteryLevel = args.level;       // (0 - 100)
  });
});

4. ディレクティブを作成する

battery-icon.js

service.directive("batteryIcon", function () {
  return {
    restrict: "E",
    scope: {
      level: '@level'
    },
    template: `
      <style type="text/css">
        .battery-width::before{width: {{level/100}}em;}
      </style>
      <div class="battery-full battery-width" ng-class="{yellow:level>10 && level<=30, red:level<=10}"></div>
    `,
  }
});

hage.css

.battery-full {
    font-size: 16px;
    position: relative;
    margin-top: 0.3em;
    width: 1.6em;
    height: 1.2em;
    background:
        linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0em / 1.3em 0.1em no-repeat,
        linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0em / 0.1em 0.2em no-repeat,
        linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0.2em / 0.3em 0.1em no-repeat,
        linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.5em 0.2em / 0.1em 0.5em no-repeat,
        linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0.7em / 0.32em 0.1em no-repeat,
        linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0.8em / 0.1em 0.2em no-repeat,
        linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0.9em / 1.3em 0.1em no-repeat,
        linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0em / 0.1em 0.9em no-repeat
    ;
}
/* 残り */
.battery-full::before {
    content: "";
    position: absolute;
    top: 0.15em;
    left: 0.13em;
    height: 0.65em;
    background-color: #39a9d6;
}
.battery-full.red::before{
    background-color: #f6564a;
}
.battery-full.yellow::before{
    background-color: #f6a646;
}

5.ディレクティブを使用する

hage.html

<battery-icon level="{{batteryLevel}}"></battery-icon>