Banyak orang saat ini sedang bergerak dengan perangkat mobile mereka, telepon dan tablet, di mana-mana. Daya tahan baterai masih merupakan kekuatan alam untuk bersaing dengan, tetapi kita akan membahas bahwa pada hari lain.
API ini mungkin akan sangat berguna ketika, katakanlah, Anda membangun sebuah aplikasi yang di beberapa titik akan menjalankan fungsi yang akan mengambil beberapa daya dari baterai. Jika kita dapat mengambil informasi baterai dan kemudian menampilkan pemberitahuan jika jumlah daya tidak sampai dengan kebutuhan app, ini akan menyarankan pengguna untuk mengelola sumber daya mereka sesuai.
Cara Menggunakan API Status Baterai
Dalam contoh ini, namun, aku tidak akan membangun sebuah aplikasi. Sebaliknya kita akan hanya mengambil status baterai dan menampilkannya pada browser. Sayangnya, dukungan untuk API ini tidak besar. Pada saat penulisan, itu hanya bekerja di Firefox 10 + (dengan awalan).Baterai didefinisikan dengan navigator.battery, dan untuk mendapatkan tingkat baterai, kita menggunakan navigator.battery.level. Output tingkat baterai dalam format desimal, jadi kita kalikan dengan 100 untuk menghapus angka desimal, seperti begitu.
var battery = navigator.battery,
level = battery.level * 100,
levelBar = $('.level');
API ini juga menyediakan pengisian properti, yang dapat kita gunakan untuk mengidentifikasi apakah baterai dalam keadaan pengisian.
Dalam potongan kode berikut kami menetapkan menambah kelas HTML markup HTML kami berdasarkan status baterai, sehingga kita dapat menambahkan aturan style tertentu kemudian di CSS.
if (battery.charging) {
levelBar.addClass('charging');
} else if (level > 65) {
levelBar.addClass('high');
} else if (level >= 35 ) {
levelBar.addClass('med');
} else {
levelBar.addClass('low');
};
Dalam contoh di atas, jika baterai sedang diisi kita menambahkan sebuah kelas bernama pengisian, kemudian tambahkan masing tinggi, med, dan kelas rendah pada kisaran tertentu dari tingkat baterai. Kemudian, kita juga perlu menentukan lebar bar yang harus mengikuti tingkat baterai.
if (!battery.charging) {
levelBar.css('width', level + '%');
};
In CSS, we set the battery styles and colors, as follows;
.battery .level {
height: 100%;
width: 2%;
}
.battery .level.high {
background-color: #27AE60;
}
.battery .level.med {
background-color: #E67E22;
}
.battery .level.low {
background-color: #E74C3C;
}
.battery .level.charging {
background-color: #27AE60;
width: 100%;
text-align: center;
}
.battery .level.charging:before {
content: '\e800';
display: block;
height: 100%;
width: 100%;
color: #fff;
line-height: 40px;
font-family: 'Battery';
font-size: 25px;
}
Itu saja, arahkan ke halaman demo untuk melihatnya dalam tindakan. Pastikan bahwa Anda berada di perangkat portabel seperti laptop dan membuka demo di Firefox terbaru untuk demo untuk bekerja.
Sumber hongkiat.com
Cara Ambil dan Tampilan Status Baterai dengan HTML5
