Accessing Hardware with HTML5 Device APIs

Accessing Hardware with HTML5 Device APIs

1b741e5d8f5efe12c6307db4ebfab8f9?s=128

Tomomi Imura

May 06, 2014
Tweet

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