Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015
API Battery Status
Christophe Villeneuve
@hellosct1

Qui ???
Christophe
Villeneuve

Aujourd'hui… ce sera !!!
● Battery
● … Batterie…
● … et encore un peu de B..…
● Bonus

Contrôle APPs
- Multitouch
- WebTelephony
- WebSMS
- Geolocalisation
- Battery API
- WebNFC
- WebVibration
- WebContacts
- FullScreen API
- Settings API
- WebUSB
- Camera
- WebBluetooth
- WebGL

Un matériel
● 1 téléphone se compose
couche API
– Touch
– Geolocation
– Motion
– Battery
– Network
– Proximity
– Vibration
– Alarm
– Simple push
– ...
● API base
– Contacts
– Camera
– TCP Sockets
– Device Storage
– Browser
● API certifié
– Bluetooth websms
permissions webfm,
time/clock

Quand on parle de Batterie

Vidéo
● Pour mesurer une batterie, voici la procédure
https://www.youtube.com/watch?v=FEITnTqmnL0

En résumé, il vous faut...

Mobile

Mais...
● Nous sommes dans…
– Internet / Web
– Http / https
– Mobile
– Smartphone
– Tablette
– Cloud / Nuage
– Etc...
● En vrai
Un monde de...

Problème
Comment effectuer les mesures avec tout cela ?

Les questions...
● Comment mesurer le niveau de la batterie ?
● Connaître autonomie ?
● Le temps de chargement ?
● Utilisation pendant le chargement ?
● Etc...

Solutions
● HTML 5
● Source importante pour un site web
● Avoir des informations sur le matériel des visiteurs
– Combien de batterie il vous reste
– Si vous utilisez un système mobile :
Smartphone, Tablette, Ordinateur portable
● But : économiser votre batterie
● Valider par W3C

W3C : Battery Status API (1/2)
● Fournir les informations sur l'état de la batterie de
l'appareil
● 3 Dates : 2012 / 2014 / 2015
● Concept

W3C : Battery Status API (2/2)
● Fev. 2012 : Battery Manager
● NavigatorBattery
● BatteryManager : Evénement de base
● Dec. 2014 : Navigation Battery
● Navigator
● BatteryManager : Gestion du temps, niveau chargement
● Aout 2015
● Navigator : Evolution
● BatteryManager : Evolution

Cas pratique : Gestion de la batterie
● https://github.com/franciov/low-energy-messenger

Le matériel donne les informations
● https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information

Battery Manager
© W3C : http://www.w3.org/TR/2012/CR-battery-status-20120508/

4 fonctionnalités

Battery Manager
● Plusieurs Propriétés Disponible
● Obtenir les informations sur le niveau de charge
● Possibilité d'intéragir avec l'API d'état de la batterie
● 4 fonctions importantes
https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager

BatteryManager.charging
● Statut de la batterie
Batterie en cours de charge ?
<div id="charging"></div>
<script>
var battery = navigator.battery;
battery.onchargingchange = function () {
document.querySelector('#charging')
.textContent = battery.charging ? 'Oui' : 'Non';
};
</script>

BatteryManager.chargingTime
● Temps restant de chargement (en secondes) → 100 %
Temps de chargement Restant :
<div id="chargingTime"></div>
<script>
battery.onchargingtimechange = function () {
document.querySelector('#chargingTime')
.textContent = parseInt(battery.chargingTime / 60, 10)
+ " Minutes";
}
</script>

BatteryManager.dischargingTime
● Temps restant avant que la batterie soit décharger
Autonomie restante ?
<div id="dischargingTime"></div>
<script>
document.querySelector('#dischargingTime')
.textContent = parseInt(battery.dischargingTime/60, 10)
+ " Minutes";
};
</script>

BatteryManager.level
● Niveau de la batterie (valeur entre 0 et 1.0)
Niveau de la batterie:
<div id="level"></div>
<script>
document.querySelector('#level')
.textContent = Math.round(battery.level * 100)
+ " %";
};
</script>

Gestion d'événements
● BatteryManager.onchargingchange
– Etat de charge est mis à jour
● BatteryManager.onchargingtimechange
● BatteryManager.ondischargingtimechange
● BatteryManager.onlevelchange

Navigator.battery
© W3C : http://www.w3.org/TR/2014/CR-battery-status-20141209/

Une seule fonctionnalité

Navigator.battery (1/2)
● HTML5
● Consomme moi de ressources
● Obtenir les informations sur le niveau de charge
● Possibilité de prévenir pour éviter la perte de
données
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/battery

GetBattery()
● Retourne les valeurs de BatteryManager()
<script>
navigator.getBattery().then(function(result) {});
</script>
// result:
BatteryManagery {
charging: false,
chargingTime: Infinity,
dischargingTime: 8940,
level: 0.59,
onchargingchange: null,
onchargingtimechange: null,
ondischargingtimechange: null,
onlevelchange: null
}

Battery Status API
© W3C : https://dvcs.w3.org/hg/dap/raw-file/default/battery/Overview.html

Battery Status API (1/2)
● Fournit les informations sur le niveau de charge du
système
● Permet d'envoyer des événements pour prévenir d'un
chargement du niveau de la charge de la batterie
● Permet d'ajuster la consommation d'une application et
la réduire
● Gère plusieurs batteries
– Exposer une vue unifiée des batteries
● Définit dans ECMASRIPT (Draft W3C 8 octobre 2015)
queue a task / fires a simple event / event handlers / event
handler event types / browsing context
https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API

Battery Status API (2/2)
● Charging
– Retourne OUI si une batterie externe
● ChargingTime
– Retourne la somme restant de chargement de toutes les batteries
connectées
● DischargingTime
– Retourne la temps restant d'autonomie totales
● Level
– Moyenne de l'état de charge
https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API

Evolution GetBattery()
● Retourne les valeurs de BatteryManager()
<script>
navigator.getBattery().then(function(result) {});
</script>
// result:
BatteryManagery {
charging: false,
chargingTime: Infinity,
dischargingTime: 8940,
level: 0.59,
onchargingchange: null,
onchargingtimechange: null,
ondischargingtimechange: null,
onlevelchange: null
}

Utilisation
<div id="charging">(charging state unknown)</div>
<div id="level">(battery level unknown)</div>
<div id="dischargingTime">(discharging time unknown)</div>
<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.onlevelchange = function () {
};
battery.ondischargingtimechange = function () {
};
});
};
</script>
http://www.w3.org/TR/battery-status/#examples

Compatible avec les navigateurs
http://caniuse.com/battery-status

Hacking

Hacking
● API Battery Status ne donnent pas accès
– A vos données
– Ni aux empreintes digitales
● Stockées sur votre smartphone

Espionnage / surveillance

Surveillance / Vie Privée
● Les données des batteries peuvent être utiliser pour
vous traquer
● 2 informations (dispo toutes les 30 secondes) :
– Le niveau de charge de votre batterie en pourcentage
– Le temps restant avant que votre batterie ne soit
entièrement vide
● Alertes des chercheurs de sécurité
– Pas de validations et de confirmations

Exemple
Votre Ordinateur
Identifier votre
machine
Identifier votre
machine
Résultat :
Savoir quels sites vous
visitez simultanément
→ Ces données pourront
ensuite être exploitée

Solution
Ne pas être pisté

Procédure désactiver la batterie (1/2)

Procédure désactiver la batterie (2/2)

Bonus en Custom

Souvenez-vous…

Custom Firefox en batterie
1.0 0.66 0.33
0.10 0.05
0.02

Etape 1 : Affiche une image SVG
<html>
<head>
</head>
<body>
<img
src="Mozilla_Firefox_logo_2013.svg"
id="bg"
alt="Logo Mozilla Firefox">
</body>
</html>

Etape 2 : CSS
<style>
#bg
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
</style>

Etape 3 : Javascript
<script>
var battery = navigator.battery || navigator.mozBattery ||
navigator.webkitBattery;
document.getElementById("bg").style.opacity = battery.level;
</script>
0 à 1.00 à 1.0
0 à 1.00 à 1.0

Démo
Bonus.html
Script exemple disponible : https://github.com/hellosct1/Firefoxos-api-battery-status

Autres idées Projets
● Jeux
● Utilitaires
● API avec une base de données (NoSQL, SQL…)
● Musiques
● Vidéo
● Etc...

Merci
● Source
– Francesco Lovine
– W3C
● Plus loin
– https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API

● Liens :
http://firefoxos.mozfr.org
https://developer.mozilla.org/fr/
Questions ?

Firefox OS - Api battery status

Recommandé

Recommandé

Contenu connexe

Similaire à Firefox OS - Api battery status

Similaire à Firefox OS - Api battery status (20)

Plus de Christophe Villeneuve

Plus de Christophe Villeneuve (20)

Firefox OS - Api battery status