⚡Battery API 🔋

battery-api.markdown

⚡Battery API 🔋

Playing with the Javascript Battery API. Some fast tests. Amazing stuff can be achieved!

The percentage and the level of battery change in real time. The color of the level bar will change accordingly with the battery level. And the bolt symbol will show/hide depending if the power adapter is plugged.

Learn more: https://davidwalsh.name/javascript-battery-api https://developer.mozilla.org/en/docs/Web/API/Battery_Status_API

A Pen by Aarón García on CodePen.

License.

index.html

<div class="wrap">
  <div class="battery-wrap">
    <svg class="battery" xmlns="http://www.w3.org/2000/svg" width="130" height="60" viewBox="0 0 13 6">
      <path class="battery__level" d="M1.5.9h8.4v4.2H1.5z"/>
      <path class="battery__border" d="M.1 0C0 0 0 0 0 .1v5.8c0 .1.1.1.1.1h11.1c.1 0 .1 0 .1-.1V.1c.1-.1 0-.1-.1-.1H.1zm1.5 1h8.1v4H1.6V1z"/>
      <path class="battery__connector" d="M11.4 4H13V2.1c0-.1 0-.1-.1-.1h-1.6v2z"/>
    </svg>

    <svg class="bolt" xmlns="http://www.w3.org/2000/svg" width="14" height="22" viewBox="0 0 5 8"><path d="M3 0L0 5h2v3l3-5H3V0z" class="st0"/></svg>
  </div>
  <span class="percentage">0 %</span>
</div>

<p class="hint">This is the current battery level of your device. Connect and disconnect the power adapter 🎉.<br>All thanks to the power of the <a href="https://developer.mozilla.org/en/docs/Web/API/Battery_Status_API" target="_blank">Battery Status API</a>. Check <a href="http://caniuse.com/#feat=battery-status" target="_blank">browser compatibility</a>.</p>

script.js

navigator.getBattery()
  .then(function(battery) {
    
    setTimeout(function() {
      setBatteryLevel();
      setBatteryCharging();
    }, 1000);
  
    battery.addEventListener('levelchange', setBatteryLevel);
    battery.addEventListener('chargingchange', setBatteryCharging);
  
    function setBatteryLevel() {
      var bat_level = battery.level;
      var bat = Math.round(bat_level * 100);
      var level = document.getElementsByClassName('battery__level')[0];
      var percent = document.getElementsByClassName('percentage')[0];
      var levelClass = 'is-0';

      if (bat >= 25)
        levelClass = 'is-25';
      
      if (bat >= 50)
        levelClass = 'is-50';
      
      if (bat >= 75)
        levelClass = 'is-75';
      
      level.style.transform = 'scaleX(' + bat_level + ')';
      level.classList.remove('is-0', 'is-25', 'is-50', 'is-75');
      level.classList += ' ' + levelClass;
      percent.innerHTML = bat + ' %';
      
      console.log(`Level: ${bat}%`);
    }
  
    function setBatteryCharging() {
      var bolt = document.getElementsByClassName('bolt')[0];

      if (battery.charging) {
        bolt.classList.add('is-active');
        console.log('⚡🔋 Power adapter connected');
      } else {
        bolt.classList.remove('is-active');
        console.log('⚡🔌 Power adapter disconnected');   
      }
    }
  
  });

style.css

body {
  position: relative;
  height: 100vh;
  margin: 0 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #333;
  background-color: SlateGrey;
  background: linear-gradient(138deg, rgb(112, 128, 144), rgb(128, 128, 128));

}

a {
  color: #333;
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.battery-wrap {
  position: relative; 
}

.battery {
  position: relative;
  fill: #ddd;
}

  .battery__connector {
    fill: #bbb;
  }

  .battery__level {
    fill: transparent;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), fill 0.3s ease-in-out;
  }

  .battery__level.is-75 {
    fill: #00FF06;
  }

  .battery__level.is-50 {
    fill: #FFCE00;
  }

  .battery__level.is-25 {
    fill: #F57C00;
  }

  .battery__level.is-0 {
    fill: #CE0000;
  }

.bolt {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -60%) scale(0.5);
  opacity: 0;
  fill: #fff;
  transition: opacity 0.3s ease-in-out, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bolt.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.percentage {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
  color: #333;
  transform: translateX(-5%);
}

.hint {
  position: absolute;
  right: 0;
  bottom: 15px;
  left: 0;
  text-align: center;
}