Jouons avec la lumière en Javascript - deviceLight

Découvrons comment récupérer la valeur en lux de la luminosité ambiante afin de rendre vos sites encore plus accessible par exemple !

Transcript

1. JOUONS AVEC LA LUMIERE EN JAVASCRIPT
2. JOHNATHAN MEUNIER @JohnathanSUP DÉVELOPPEUR FRONT-END @altima° FONDATEUR DE LILLE WEB
3. LILLE DEVICE DERBY #1
4. DEMO
5. ACCESSIBILITÉ Couleur ARIA Device Animation Interaction Tactile Navigation Recherche Taille Largeur Epaisseur Validation Ergonomie Compatibilité Vocabulaire Standard Sémantique Handicap
6. ACCESSIBILITÉ Couleur ARIA Device Animation Interaction Tactile Navigation Recherche Taille Largeur Epaisseur Validation Ergonomie Compatibilité Vocabulaire Standard Sémantique Handicap LUMIERE
7. DEVICE LIGHT
8. COMPATIBILITÉ Firefox 22 (Mac OS X only) Firefox Mobile 15.0
9. window.addEventListener('devicelight', function(e) { });
10. window.addEventListener('devicelight', function(e) { var lux = Math.round(e.value); });
11. window.addEventListener('devicelight', function(e) { var lux = Math.round(e.value); gauge.set(lux); });
12. window.addEventListener('devicelight', function(e) { var lux = Math.round(e.value); gauge.set(lux); tmp.push({'index' : i++, 'lux' : lux}); });
13. window.addEventListener('devicelight', function(e) { var lux = Math.round(e.value); gauge.set(lux); tmp.push({'index' : i++, 'lux' : lux}); if( i == smooth){ var avLux = 0; for(var key in tmp){ avLux += tmp[key].lux; } avLux = avLux / smooth; tmp = new Array(); i = 0; } });
14. window.addEventListener('devicelight', function(e) { var lux = Math.round(e.value); gauge.set(lux); tmp.push({'index' : i++, 'lux' : lux}); if( i == smooth){ var avLux = 0; for(var key in tmp){ avLux += tmp[key].lux; } avLux = avLux / smooth; document.querySelector('#result').textContent = avLux + ' lux'; if(avLux > 10){ document.querySelector('body').setAttribute('class', ''); }else{ document.querySelector('body').setAttribute('class', 'night'); } tmp = new Array(); i = 0; } });
15. UTILITÉ
16. ACCESSIBILITÉ
17. ADAPTER LES COULEURS À L’ENVIRONNEMENT
18. JEUX
19. …
20. JOHNATHAN MEUNIER @JohnathanSUP