Upload
christophe-villeneuve
View
535
Download
6
Embed Size (px)
Citation preview
Meetup Firefox OS – 12 Novembre 2015
API Battery Status
Meetup Firefox OS – 12 Novembre 2015
Christophe Villeneuve@hellosct1
Meetup Firefox OS – 12 Novembre 2015
Qui ???
Christophe Villeneuve
Meetup Firefox OS – 12 Novembre 2015
Aujourd'hui… ce sera !!!
● Battery● … Batterie…● … et encore un peu de B..…● Bonus
Meetup Firefox OS – 12 Novembre 2015
Contrôle APPs
- Multitouch- WebTelephony- WebSMS- Geolocalisation- Battery API- WebNFC- WebVibration
- WebContacts- FullScreen API- Settings API- WebUSB- Camera- WebBluetooth- WebGL
Meetup Firefox OS – 12 Novembre 2015
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
Meetup Firefox OS – 12 Novembre 2015
Quand on parle de Batterie
Meetup Firefox OS – 12 Novembre 2015
Vidéo
● Pour mesurer une batterie, voici la procédure
https://www.youtube.com/watch?v=FEITnTqmnL0
Meetup Firefox OS – 12 Novembre 2015
En résumé, il vous faut...
Meetup Firefox OS – 12 Novembre 2015
Mobile
Meetup Firefox OS – 12 Novembre 2015
Mais...
● Nous sommes dans…– Internet / Web
– Http / https
– Mobile
– Smartphone
– Tablette
– Cloud / Nuage
– Etc...
● En vrai
Un monde de...
Meetup Firefox OS – 12 Novembre 2015
Problème
Comment effectuer les mesures avec tout cela ?
Meetup Firefox OS – 12 Novembre 2015
Les questions...
● Comment mesurer le niveau de la batterie ?● Connaître autonomie ?● Le temps de chargement ?● Utilisation pendant le chargement ?● Etc...
Meetup Firefox OS – 12 Novembre 2015
Meetup Firefox OS – 12 Novembre 2015
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
Meetup Firefox OS – 12 Novembre 2015
W3C : Battery Status API (1/2)
● Fournir les informations sur l'état de la batterie de l'appareil
● 3 Dates : 2012 / 2014 / 2015● Concept
Meetup Firefox OS – 12 Novembre 2015
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
Meetup Firefox OS – 12 Novembre 2015
Cas pratique : Gestion de la batterie
● https://github.com/franciov/low-energy-messenger
Meetup Firefox OS – 12 Novembre 2015
Le matériel donne les informations
● https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information
Meetup Firefox OS – 12 Novembre 2015
Battery Manager
© W3C : http://www.w3.org/TR/2012/CR-battery-status-20120508/
Meetup Firefox OS – 12 Novembre 2015
4 fonctionnalités
Meetup Firefox OS – 12 Novembre 2015
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
Meetup Firefox OS – 12 Novembre 2015
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>
Meetup Firefox OS – 12 Novembre 2015
BatteryManager.chargingTime
● Temps restant de chargement (en secondes) → 100 %
Temps de chargement Restant : <div id="chargingTime"></div>
<script>
var battery = navigator.battery;
battery.onchargingtimechange = function () {
document.querySelector('#chargingTime').textContent = parseInt(battery.chargingTime / 60, 10) + " Minutes";}</script>
Meetup Firefox OS – 12 Novembre 2015
BatteryManager.dischargingTime
● Temps restant avant que la batterie soit décharger
Autonomie restante ? <div id="dischargingTime"></div>
<script>
var battery = navigator.battery;
battery.onchargingchange = function () {
document.querySelector('#dischargingTime').textContent = parseInt(battery.dischargingTime/60, 10) + " Minutes";};</script>
Meetup Firefox OS – 12 Novembre 2015
BatteryManager.level
● Niveau de la batterie (valeur entre 0 et 1.0)
Niveau de la batterie: <div id="level"></div>
<script>
var battery = navigator.battery;
battery.onchargingchange = function () {
document.querySelector('#level').textContent = Math.round(battery.level * 100) + " %";
};</script>
Meetup Firefox OS – 12 Novembre 2015
Gestion d'événements
● BatteryManager.onchargingchange– Etat de charge est mis à jour
● BatteryManager.onchargingtimechange– Etat de charge est mis à jour
● BatteryManager.ondischargingtimechange– Etat de charge est mis à jour
● BatteryManager.onlevelchange– Etat de charge est mis à jour
Meetup Firefox OS – 12 Novembre 2015
Navigator.battery
© W3C : http://www.w3.org/TR/2014/CR-battery-status-20141209/
Meetup Firefox OS – 12 Novembre 2015
Une seule fonctionnalité
Meetup Firefox OS – 12 Novembre 2015
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
Meetup Firefox OS – 12 Novembre 2015
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}
Meetup Firefox OS – 12 Novembre 2015
Battery Status API© W3C : https://dvcs.w3.org/hg/dap/raw-file/default/battery/Overview.html
Meetup Firefox OS – 12 Novembre 2015
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
Meetup Firefox OS – 12 Novembre 2015
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
Meetup Firefox OS – 12 Novembre 2015
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}
Meetup Firefox OS – 12 Novembre 2015
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.onchargingchange = function () { updateBatteryStatus(battery); };
battery.onlevelchange = function () { updateBatteryStatus(battery); };
battery.ondischargingtimechange = function () { updateBatteryStatus(battery); }; }); }; </script>
http://www.w3.org/TR/battery-status/#examples
Meetup Firefox OS – 12 Novembre 2015
Meetup Firefox OS – 12 Novembre 2015
Compatible avec les navigateurs
http://caniuse.com/battery-status
Meetup Firefox OS – 12 Novembre 2015
Hacking
Meetup Firefox OS – 12 Novembre 2015
Hacking
● API Battery Status ne donnent pas accès– A vos données
– Ni aux empreintes digitales
● Stockées sur votre smartphone
Meetup Firefox OS – 12 Novembre 2015
Espionnage / surveillance
Meetup Firefox OS – 12 Novembre 2015
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
Meetup Firefox OS – 12 Novembre 2015
ExempleVotre Ordinateur
Identifier votremachine
Identifier votremachine
Résultat : Savoir quels sites vous visitez simultanément
→ Ces données pourront ensuite être exploitée
Meetup Firefox OS – 12 Novembre 2015
Solution
Ne pas être pisté
Meetup Firefox OS – 12 Novembre 2015
Procédure désactiver la batterie (1/2)
Meetup Firefox OS – 12 Novembre 2015
Procédure désactiver la batterie (2/2)
Meetup Firefox OS – 12 Novembre 2015
Bonus en Custom
Meetup Firefox OS – 12 Novembre 2015
Souvenez-vous…
Meetup Firefox OS – 12 Novembre 2015
Custom Firefox en batterie
1.0 0.66 0.33
0.10 0.05 0.02
Meetup Firefox OS – 12 Novembre 2015
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>
Meetup Firefox OS – 12 Novembre 2015
Etape 2 : CSS
<style>#bg { position:fixed; top:0; left:0; width:100%; height:100%;}</style>
Meetup Firefox OS – 12 Novembre 2015
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
Meetup Firefox OS – 12 Novembre 2015
Démo
Bonus.html
Script exemple disponible : https://github.com/hellosct1/Firefoxos-api-battery-status
Meetup Firefox OS – 12 Novembre 2015
Autres idées Projets
● Jeux
● Utilitaires
● API avec une base de données (NoSQL, SQL…)
● Musiques
● Vidéo
● Etc...
Meetup Firefox OS – 12 Novembre 2015
Merci
● Source– Francesco Lovine
– W3C
● Plus loin– https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API
Meetup Firefox OS – 12 Novembre 2015
● Liens :
http://firefoxos.mozfr.org
https://developer.mozilla.org/fr/
Questions ?