Accessing Hardware with HTML5 Device APIs

My talk @ Front-end & UX Meetup Budapest
http://www.meetup.com/Frontend-Meetup-Budapest/events/177259792/comments/343689692/

Transcript

1. HTML5 Device APIs Tomomi Imura (@girlie_mac) https://flic.kr/p/54oAAr by James Cridland b
2. H E L L O M Y N A M E I S Tomomi @girlie_mac
3. Device APIs • GPS • Camera, Video, & Microphone • Audio HW • Vibration HW • Battery • NFC
4. Device APIs - Sensors • Accelerometer • Magnetometer • Gyrometer • Light • Proximity • Barometer (Pressure)
5. Geolocation i f ( n a v i g a t o r . g e o l o c a t i o n ) { n a v i g a t o r . g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( s u c c e s s , f a i l ) ; } f u n c t i o n s u c c e s s ( p o s i t i o n ) { a l e r t ( ' L a t i t u d e : ' + p o s i t i o n . c o o r d s . l a t i t u d e + ' , L o n g i t u d e : ' + p o s i t i o n . c o o r d s . l o n g i t u d e ) ; }
6. Device Orientation Events Dev Opera (Diagram)
7. i f ( w i n d o w . D e v i c e O r i e n t a t i o n E v e n t ) { w i n d o w . a d d E v e n t L i s t e n e r ( ' d e v i c e o r i e n t a t i o n ' , f u n c t i o n ( e ) { c o m p a s s = e . a l p h a ; / / d e g r e e f r o n t B a c k = e . b e t a ; l e f t R i g h t = e . g a m m a ; . . . } , f a l s e ) ; } Partial support 4.2 3.0 18 10 14 12
8. User Cases Can we re-create this iOS app in HTML5? http://pizza-compass.com/
9. Watch the demo video at: https://vimeo.com/92208773 Demo: http://girliemac.github.com/sushi-compass
10. Battery Status API v a r b a t t e r y = n a v i g a t o r . b a t t e r y | | n a v i g a t o r . m o z B a t t e r y ; b a t t e r y . a d d E v e n t L i s t e n e r ( ' c h a r g i n g c h a n g e ' , u p d a t e S t a t u s ) ; b a t t e r y . a d d E v e n t L i s t e n e r ( ' l e v e l c h a n g e ' , u p d a t e S t a t u s ) ; f u n c t i o n u p d a t e S t a t u s ( ) { a l e r t ( ' B a t t e r y s t a t u s : ' + b a t t e r y . l e v e l * 1 0 0 + ' % ' ) ; i f ( b a t t e r y . c h a r g i n g ) { a l e r t ( ' B a t t e r y i s c h a r g i n g . . . ' ) ; } } 14* 16
11. Battery Status API http://goo.gl/V1n6h (Pictured: Firefox)
12. Vibration API v a r v i b r a t e = n a v i g a t o r . v i b r a t e | | n a v i g a t o r . m o z V i b r a t e ; / / v i b r a t e f o r 1 s e c v i b r a t e ( 1 0 0 0 ) ; / / v i b r a t e s f o r 1 s e c , s t i l l f o r 0 . 5 s e c o n d s , / / a n d v i b r a t e s a g a i n f o r 2 s e c v i b r a t e ( [ 1 0 0 0 , 5 0 0 , 2 0 0 0 ] ) ; 14* 16 30
13. Watch the demo video at: https://vimeo.com/86735842 Demo: http://goo.gl/SFzKaH
14. Ambient Light Events w i n d o w . a d d E v e n t L i s t e n e r ( ' d e v i c e l i g h t ' , f u n c t i o n ( e ) { a l e r t ( e . v a l u e ) ; } ) ; Returned value (in lux) My Observations < 400 Indoor 400-1000 Office lighting. Outdoor (in foggy San Francisco) > 1000 Outdoor daylight (anywhere else in California) 15
15. Watch the demo video at: https://vimeo.com/79466285 Demo: http://codepen.io/girliemac/pen/pvmBs
16. Keep up to date https://flic.kr/p/8tuc1u by randomliteraturecouncil b
17. Chromium Dashboard
18. IE Platform Status
19. Köszönöm! Tomomi Imura • girliemac.com • twitter.com/girlie_mac • github.com/girliemac