Download - Firefox OS - Api battery status

Transcript
Page 1: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

API Battery Status

Meetup Firefox OS – 12 Novembre 2015

Christophe Villeneuve@hellosct1

Page 2: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Qui ???

Christophe Villeneuve

Page 3: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Aujourd'hui… ce sera !!!

● Battery● … Batterie…● … et encore un peu de B..…● Bonus

Page 4: Firefox OS - Api battery status

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

Page 5: Firefox OS - Api battery status

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

Page 6: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Quand on parle de Batterie

Page 7: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Vidéo

● Pour mesurer une batterie, voici la procédure

https://www.youtube.com/watch?v=FEITnTqmnL0

Page 8: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

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

Page 9: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Mobile

Page 10: Firefox OS - Api battery status

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...

Page 11: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Problème

Comment effectuer les mesures avec tout cela ?

Page 12: Firefox OS - Api battery status

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...

Page 13: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Page 14: Firefox OS - Api battery status

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

Page 15: Firefox OS - Api battery status

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

Page 16: Firefox OS - Api battery status

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

Page 17: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Cas pratique : Gestion de la batterie

● https://github.com/franciov/low-energy-messenger

Page 18: Firefox OS - Api battery status

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

Page 19: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Battery Manager

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

Page 20: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

4 fonctionnalités

Page 21: Firefox OS - Api battery status

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

Page 22: Firefox OS - Api battery status

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>

Page 23: Firefox OS - Api battery status

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>

Page 24: Firefox OS - Api battery status

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>

Page 25: Firefox OS - Api battery status

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>

Page 26: Firefox OS - Api battery status

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

Page 27: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Navigator.battery

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

Page 28: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Une seule fonctionnalité

Page 29: Firefox OS - Api battery status

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

Page 30: Firefox OS - Api battery status

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}

Page 31: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

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

Page 32: Firefox OS - Api battery status

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

Page 33: Firefox OS - Api battery status

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

Page 34: Firefox OS - Api battery status

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}

Page 35: Firefox OS - Api battery status

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

Page 36: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Page 37: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Compatible avec les navigateurs

http://caniuse.com/battery-status

Page 38: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Hacking

Page 39: Firefox OS - Api battery status

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

Page 40: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Espionnage / surveillance

Page 41: Firefox OS - Api battery status

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

Page 42: Firefox OS - Api battery status

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

Page 43: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Solution

Ne pas être pisté

Page 44: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

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

Page 45: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

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

Page 46: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Bonus en Custom

Page 47: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Souvenez-vous…

Page 48: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Custom Firefox en batterie

1.0 0.66 0.33

0.10 0.05 0.02

Page 49: Firefox OS - Api battery status

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>

Page 50: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Etape 2 : CSS

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

Page 51: Firefox OS - Api battery status

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

Page 52: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

Démo

Bonus.html

Script exemple disponible : https://github.com/hellosct1/Firefoxos-api-battery-status

Page 53: Firefox OS - 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...

Page 54: Firefox OS - Api battery status

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

Page 55: Firefox OS - Api battery status

Meetup Firefox OS – 12 Novembre 2015

● Liens :

http://firefoxos.mozfr.org

https://developer.mozilla.org/fr/

Questions ?