0
HTML5 APIsTuesday, February 26, 13
Web Tech History                   1991 HTML                   1994 HTML2                   1996 CSS1 + JavaScript        ...
HTML5 What                   Syntactical Features (audio, video)                   Semantical Features (section, article) ...
HTML5 How                   Progressive Enhancements                   Existing web sites can move to HTML5               ...
HTML5 New APIs                   Web Storage            Geolocation                   Web SQL                Device Orient...
Modernizr: Before We                   Begin                   Script Loader                   Feature DetectorTuesday, Fe...
Hello Modernizr        Modernizr.load({          test: 3 > 5,          yep : http://code.jquery.com/        jquery-1.9.1.m...
More Loader Features                   Specify only “yep” or “nope”                   Provide array                   Comp...
polyfill (n):                               a JavaScript                    shim that replicates the                    st...
Feature Detection                   Modernizr.applicationcache                   Modernizr.canvas                   Modern...
Feature Detection +                   Polyfill       Modernizr.load({           test: Modernizr.input.placeholder,         ...
Q&ATuesday, February 26, 13
Offline Storage                    Work Offline   Store Persistent StateTuesday, February 26, 13
Local Data Storage                   How do you store data on a client’s machine ?Tuesday, February 26, 13
Cookies ?Tuesday, February 26, 13
Server   ClientTuesday, February 26, 13
Local Storage                   Before HTML5: cookies were used to store data                   on the client side        ...
Local Storage                   A JavaScript API for                   storing client side data                   Can stor...
Local Storage                   Store Data                   window.localStorage.setItem(“key”, “value”);                 ...
Local Storage                   Can also use direct access on the storage object,                   so this code also work...
Local Storage                   Methods:                           clear()                           key(idx)             ...
Session Storage                   Interface is the same as localStorage                   Lifetime is only for the current...
Storage Lab                   We’ll implement an address book app                   Keeps a list of contacts info: name, p...
Storage Lab                   Use the starter:                   https://github.com/ynonp/advanced-fed-                   ...
Offline Web App                   Online-Offline Apps                   Sync with the Cloud, but can suffer a downtime        ...
Offline Web App                            GET MANIFEST                           CACHE MANIFEST                           ...
Cache Manifest File                   Lists all the files that should be stored for offline                   access         ...
example.appcache                                           CACHE MANIFEST                   Required header               ...
Demo             Caching A WebsiteTuesday, February 26, 13
Offline Web App                   The cache manifest is divided to sections, the                   default is called CACHE ...
Offline Web App                   The NETWORK section lists files that should never                   be cached             ...
Offline Web App                   The FALLBACK section lists fallback content that                   should be used if netw...
Manifest Cache                                      Cache the file locally,                           CACHE                ...
Offline App Exercise                   A Dynamic reader with two pages                   First lists available articles, th...
Manifest - The Good                   Can store any file                   locally                   Provides offline/online ...
Manifest - The Bad                   Not suitable for data                   storage                   Complex update logi...
Web SQL                   The final storage option for offline apps is the Web                   SQL                   Allows...
Q&A                   Storage                   Geo Location                   Video                   CanvasTuesday, Febr...
Geo Location                   Detect where your user                   is now                   Show nearby places       ...
Technologies                   GPS                   A-GPS                   Cell Information                   WiFi Posit...
GPS                   Global Positioning                   System                   Accuracy error: 2-10m                 ...
A-GPS                   Uses both GPS chip                   and network                   information to get             ...
Cell Information                   Uses cell towers to                   calculate a device’s                   location  ...
WiFi Positioning                   Detect location using a                   list of wireless routers                   in...
Location API                   Supported Platforms:                           iPhone 3.0+                           Androi...
Location API                   function get_location() {                     navigator.geolocation.getCurrentPosition(show...
Location API                   navigator.geolocation is the entry point for                   all location related calls  ...
Location API                   iPhone browser asks                   user permissions                   before sharing loc...
Location API                   Location API uses                   callbacks to perform                   error handling  ...
Location API                   getCurrentPosition(                           successCallback,                           op...
The Coord object                   coords.latitude                   coords.longitude                   coords.altitude   ...
The Coord Object                   Not all fields will be available at all times                   Sizes are specified in me...
Location Config                   last parameter to getCurrentPosition is a config                   object                 ...
Using Config                   window.navigator.geolocation.getCurrentPosition(                     successCallback,       ...
Handle Errors                   The errorCallback takes a single argument called                   error object           ...
Next: The MapTuesday, February 26, 13
Show The Map                   On the iPhone, a redirect to a google maps url                   starts the map application...
Google Maps API                   A JS API to display                   embedded maps in                   web sites      ...
Google Maps API                   Assign a special empty div that will contain the                   map. recommended size...
Google Maps API                   Maps Workflow:                           Choose a div                           Create a ...
Objects To Note                   google.maps.LatLng - represents a latitude/                   longitude pair            ...
Objects To Note                   google.maps.Map( element, options )                   Interesting Methods:              ...
Objects To Note                   google.maps.MapOptions: configuration object                   Interesting options       ...
Demo             Show Location On MapTuesday, February 26, 13
Location Tracking                   Receive notifications about location changes                   Can use for navigation a...
Location Tracking                      use watchPosition to start watching a user’s                      position         ...
Exercise: Where’s My                   Car                   Write a parking reminder app                   One button tit...
Q&A                   Storage                   Geo Location (iPhone, Android)                   Video & Audio (iPhone, An...
VIDEO    THE EASY WAYTuesday, February 26, 13
Video Tag                           HTML5 introduces a <video> tag to embed                           videos in a web page...
Video Formats                   Video formats are like                   languages                   The same video can be...
Video Converter                   Miro is a free open                   source video player                   and converte...
Browser Support                   HTML5 spec does not define a video codec to use                   h.264 is the most widel...
The Markup                                            Poster image file name                   <video poster=”star.png”>   ...
Limitations                   Video will start playing in a dedicated “player”                   window, when the user tap...
Audio Tag                   Structured like a Video tag                   iPhone and Android support MP3                  ...
Lab                   Audio SoundBoard                   Use Animal Sounds:                   http://apps.ynonperek.com/  ...
Q&A                   Storage                   Geo Location                   Video & Audio                   Canvas (iPh...
CANVASTuesday, February 26, 13
HTML5 Canvas                   A 2d graphics canvas                   for HTML apps                   Games               ...
Hello Canvas                   An HTML element <canvas> on the markup                   JS code to do actual paintingTuesd...
Hello Canvas                   The canvas element has no content and no border                   of its own               ...
Basic Drawing                   Context object provides the drawing functions.                   Each takes coordinates an...
Coordinate SystemTuesday, February 26, 13
Drawing Rectangles                   Let’s start with drawing                   rectangles                 fillRect(x, y, ...
Demo: RectsTuesday, February 26, 13
Drawing Paths                   A composite shape on the canvas is called “path”                   Paths are made of lines...
Drawing Paths                                            moveTo(x, y)                   Lines are painted with            ...
Lines Example          ctx.beginPath();          ctx.strokeStyle = "hsl(249, 41%, 50%)";          ctx.lineWidth = 6;      ...
Using The Image                   It’s possible to use an image drawn in a canvas for                   other elements    ...
Drawing Circles                   use arc() and arcTo() to   arc(x, y, radius,                   draw circles or parts of ...
Exercise 1                   Draw the image on the                   right                   Use moveTo and arc           ...
Exercise 2                   Draw the image on the                   right                   Place pins randomly          ...
Advanced Canvas                   Transformations                   Image FiltersTuesday, February 26, 13
Transformations                   supported               translate(x, y)                   transformations:              ...
Translation                   Move the origin of the canvas to another point on                   the canvas              ...
Translation Example                   Use translation to paint                   the four painted                   rectan...
Scaling                   scales the rendering context size                   x and y are scale factors                   ...
Scale Example                                   examples/html5/canvas/scale.htmlTuesday, February 26, 13
Rotation                   Rotates a shape around its (0, 0) point of origin                   Angle is specified in radian...
Example: Rotation         ctx.translate(75,75);         for (var i=1;i<6;i++){           ctx.save();           ctx.fillSty...
Example: Rotation                   The background was                   painted with a gradient   ctx.save();            ...
Exercise                   Draw the clock on the                   right                   Use rotate and                 ...
Image FiltersTuesday, February 26, 13
Drawing Images on                   Canvas                   It’s possible to paint a png or jpeg image on a              ...
Image Drawing API                  drawImage(image, x, y)                  paint an entire image object on the canvas at p...
Drawing Images and                   File API                   Use input type=”file” to upload a photo from the           ...
Reading The Photo                   FileReader is used to read a photo from the input                   field              ...
Image Filters                      For the next few slides, we’ll create a Filters                      object. Each filter...
Filters Code                      When testing on                      desktop, some                       canvas.toDataUR...
Canvas Exercise                   Implement a mobile drawing app using the canvas                   and touch events      ...
HTML5 Drag & DropTuesday, February 26, 13
HTML5 Drag & Drop                   Started back in IE5                   Still wrongTuesday, February 26, 13
Check Support                if (Modernizr.draganddrop) {                  // Browser supports HTML5 DnD.                }...
Draggable Content       <div id="columns">         <div class="column" draggable="true"><header>A</header></div>         <...
Some CSS Extras             [draggable] {               -moz-user-select: none;               -khtml-user-select: none;   ...
And The Fun Part                   7 Dragging Events:                           dragstart, drag,                          ...
For drop events:        cancel defaults for        dragover and dragenterTuesday, February 26, 13
Demo1: Dropzone                   Prevent default from bad events                   Handle good event                   ht...
Alerting Drop Zone                   Use dragenter and dragleave to alert user they’re                   in the drop zone ...
Transferring Data     function handleDragStart(e) {       e.dataTransfer.setData(text/html, this.innerHTML);     }      fu...
Other dataTransfer                   Use e.dataTransfer.files to get data dragged from                   desktop           ...
Other dataTransfer                   Use setData to allow dragging “out of” the                   browser             var ...
Q&ATuesday, February 26, 13
Thank You                   Slides By:                           Ynon Perek                           ynon@ynonperek.com  ...
Upcoming SlideShare
Loading in...5
×

Html5 apis

1,322

Published on

Cool APIs of HTML5

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,322
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 apis"

  1. 1. HTML5 APIsTuesday, February 26, 13
  2. 2. Web Tech History 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1 2002 Tableless Web Design 2005 Ajax 2009 HTML5Tuesday, February 26, 13
  3. 3. HTML5 What Syntactical Features (audio, video) Semantical Features (section, article) New APIsTuesday, February 26, 13
  4. 4. HTML5 How Progressive Enhancements Existing web sites can move to HTML5 Old browsers will still be able to use the page Modernizr: http://www.modernizr.com/Tuesday, February 26, 13
  5. 5. HTML5 New APIs Web Storage Geolocation Web SQL Device Orientation Application Cache Form Enhancements Web Workers Audio, Video Web Socket Canvas Desktop Notifications Web GL Drag & Drop History API File System API And More...Tuesday, February 26, 13
  6. 6. Modernizr: Before We Begin Script Loader Feature DetectorTuesday, February 26, 13
  7. 7. Hello Modernizr Modernizr.load({   test: 3 > 5,   yep : http://code.jquery.com/ jquery-1.9.1.min.js,   nope: http://cdnjs.cloudflare.com/ ajax/libs/zepto/1.0rc1/zepto.min.js });Tuesday, February 26, 13
  8. 8. More Loader Features Specify only “yep” or “nope” Provide array Complete callback Demo: http://jsbin.com/abowap/2/editTuesday, February 26, 13
  9. 9. polyfill (n): a JavaScript shim that replicates the standard API for older browsersTuesday, February 26, 13
  10. 10. Feature Detection Modernizr.applicationcache Modernizr.canvas Modernizr.audio Modernizr.inputtypes Demo: http://jsbin.com/abowap/3/editTuesday, February 26, 13
  11. 11. Feature Detection + Polyfill Modernizr.load({     test: Modernizr.input.placeholder,     nope: [             placeholder_polyfill.min.css,             placeholder_polyfill.jquery.min.combo.js           ] });Tuesday, February 26, 13
  12. 12. Q&ATuesday, February 26, 13
  13. 13. Offline Storage Work Offline Store Persistent StateTuesday, February 26, 13
  14. 14. Local Data Storage How do you store data on a client’s machine ?Tuesday, February 26, 13
  15. 15. Cookies ?Tuesday, February 26, 13
  16. 16. Server ClientTuesday, February 26, 13
  17. 17. Local Storage Before HTML5: cookies were used to store data on the client side Cookies Disadvantages: Limited size (4k) Sent with every request Complex to useTuesday, February 26, 13
  18. 18. Local Storage A JavaScript API for storing client side data Can store up to 5MB (per site) Simple API Never run out of spaceTuesday, February 26, 13
  19. 19. Local Storage Store Data window.localStorage.setItem(“key”, “value”); Read Data window.localStorage.getItem(“key”); Remove Data window.localStorage.removeItem(“key”);Tuesday, February 26, 13
  20. 20. Local Storage Can also use direct access on the storage object, so this code also works: window.localStorage.username = “Jimmy”; var username = window.localStorage.username; console.log(‘Hello ‘ + username);Tuesday, February 26, 13
  21. 21. Local Storage Methods: clear() key(idx) length()Tuesday, February 26, 13
  22. 22. Session Storage Interface is the same as localStorage Lifetime is only for the current browser window or tab (or browser session) Best used for temporary preferences that should not be shared between tabsTuesday, February 26, 13
  23. 23. Storage Lab We’ll implement an address book app Keeps a list of contacts info: name, phone number, email Provide add/view/delete contactsTuesday, February 26, 13
  24. 24. Storage Lab Use the starter: https://github.com/ynonp/advanced-fed- examples/tree/master/contactsTuesday, February 26, 13
  25. 25. Offline Web App Online-Offline Apps Sync with the Cloud, but can suffer a downtime (Think Google Gears) Can run completely offline app as a standalone Mobile - Save bandwidthTuesday, February 26, 13
  26. 26. Offline Web App GET MANIFEST CACHE MANIFEST index.html style/main.css script/main.jsTuesday, February 26, 13
  27. 27. Cache Manifest File Lists all the files that should be stored for offline access Enable with: <html manifest="example.appcache">Tuesday, February 26, 13
  28. 28. example.appcache CACHE MANIFEST Required header index.html CACHE MANIFEST stylesheet.css A list of cached files images/logo.png scripts/main.jsTuesday, February 26, 13
  29. 29. Demo Caching A WebsiteTuesday, February 26, 13
  30. 30. Offline Web App The cache manifest is divided to sections, the default is called CACHE Every file listed in the default CACHE section will be cached by the browser forever (or until explicitly deleted by the user)Tuesday, February 26, 13
  31. 31. Offline Web App The NETWORK section lists files that should never be cached Best used for dynamic content (think gmail)Tuesday, February 26, 13
  32. 32. Offline Web App The FALLBACK section lists fallback content that should be used if network is not available So, if you’re trying to read a message while offline, you can get a nice formatted error pageTuesday, February 26, 13
  33. 33. Manifest Cache Cache the file locally, CACHE never refresh Files should not be NETWORK cached Cache a fallback FALLBACK contentTuesday, February 26, 13
  34. 34. Offline App Exercise A Dynamic reader with two pages First lists available articles, the second displays a given article Use your favorite server side technology and jQM Which files do you put in each manifest section ?Tuesday, February 26, 13
  35. 35. Manifest - The Good Can store any file locally Provides offline/online app functionality Transparent to the userTuesday, February 26, 13
  36. 36. Manifest - The Bad Not suitable for data storage Complex update logicTuesday, February 26, 13
  37. 37. Web SQL The final storage option for offline apps is the Web SQL Allows using a local database to better store relational data Best suited for hierarchical lists appsTuesday, February 26, 13
  38. 38. Q&A Storage Geo Location Video CanvasTuesday, February 26, 13
  39. 39. Geo Location Detect where your user is now Show nearby places Display location aware dataTuesday, February 26, 13
  40. 40. Technologies GPS A-GPS Cell Information WiFi PositioningTuesday, February 26, 13
  41. 41. GPS Global Positioning System Accuracy error: 2-10m Requires clear sky view Time to position: 5 seconds - 5 minutesTuesday, February 26, 13
  42. 42. A-GPS Uses both GPS chip and network information to get location Much faster to get locationTuesday, February 26, 13
  43. 43. Cell Information Uses cell towers to calculate a device’s location Accuracy: A block or up to some km Time to location: immediateTuesday, February 26, 13
  44. 44. WiFi Positioning Detect location using a list of wireless routers in your area Relies on existing router databasesTuesday, February 26, 13
  45. 45. Location API Supported Platforms: iPhone 3.0+ Android 2.0+Tuesday, February 26, 13
  46. 46. Location API function get_location() {   navigator.geolocation.getCurrentPosition(show_map); } function show_map(position) {   var lat = position.coords.latitude;   var long = position.coords.longitude;   var when = position.timestamp;   // show me the map }Tuesday, February 26, 13
  47. 47. Location API navigator.geolocation is the entry point for all location related calls Location querying is async, so a callback is supplied User will be asked permission to share locationTuesday, February 26, 13
  48. 48. Location API iPhone browser asks user permissions before sharing locationTuesday, February 26, 13
  49. 49. Location API Location API uses callbacks to perform error handling When working with location, always consider errorsTuesday, February 26, 13
  50. 50. Location API getCurrentPosition( successCallback, optional errorCallback, optional config );Tuesday, February 26, 13
  51. 51. The Coord object coords.latitude coords.longitude coords.altitude coords.accuracy coords.altitudeAccuracy coords.heading coords.speed timestampTuesday, February 26, 13
  52. 52. The Coord Object Not all fields will be available at all times Sizes are specified in meters and degrees timestamp is a DOMTimestamp (acts like a Date object)Tuesday, February 26, 13
  53. 53. Location Config last parameter to getCurrentPosition is a config object there are 3 configuration options available: timeout maximumAge enableHighAccuracyTuesday, February 26, 13
  54. 54. Using Config window.navigator.geolocation.getCurrentPosition( successCallback, failureCallback, How long to wait before giving up { timeout : 0, (in ms) maximumAge : 60000, Try to use a cached value aged (in ms) enableHighAccuracy : false }); Use the most accurate positioning methodTuesday, February 26, 13
  55. 55. Handle Errors The errorCallback takes a single argument called error object The object has two fields: error.code & error.message Use error.message for debug onlyTuesday, February 26, 13
  56. 56. Next: The MapTuesday, February 26, 13
  57. 57. Show The Map On the iPhone, a redirect to a google maps url starts the map application The Good: easy to use The Bad: user leaves the appTuesday, February 26, 13
  58. 58. Google Maps API A JS API to display embedded maps in web sites Works on both desktop and mobile devices (Almost) Free to useTuesday, February 26, 13
  59. 59. Google Maps API Assign a special empty div that will contain the map. recommended size of the div is entire page. Display the map by creating a google.maps.Map object Place markers on the map using google.maps.Marker Full documentation: http://developer.google.com/apis/maps/ documentation/javascript/Tuesday, February 26, 13
  60. 60. Google Maps API Maps Workflow: Choose a div Create a new google.maps.Map(...) Remember to set minimum height on the divTuesday, February 26, 13
  61. 61. Objects To Note google.maps.LatLng - represents a latitude/ longitude pair Methods: lat() returns the lat value lng() returns the long valueTuesday, February 26, 13
  62. 62. Objects To Note google.maps.Map( element, options ) Interesting Methods: panBy( x, y ) - move the map by x,y panTo( latlng ) - move the map to latlng setZoom( zoom )Tuesday, February 26, 13
  63. 63. Objects To Note google.maps.MapOptions: configuration object Interesting options center: latlng disableDefaultUI: boolean draggable: boolean mapTypeId: HYBRID, ROADMAP, SATELLITETuesday, February 26, 13
  64. 64. Demo Show Location On MapTuesday, February 26, 13
  65. 65. Location Tracking Receive notifications about location changes Can use for navigation apps, sport apps, and more Browser must remain openTuesday, February 26, 13
  66. 66. Location Tracking use watchPosition to start watching a user’s position The method returns a watch id. Keep it. When tracking is no longer needed, use clearWatch with the watch id to stop. The callback of watchPosition will get called every time location has changedTuesday, February 26, 13
  67. 67. Exercise: Where’s My Car Write a parking reminder app One button titled “parked” which marks current location and keeps it in local storage Another button titled “find” which shows a map leading to your car Keep data in local storageTuesday, February 26, 13
  68. 68. Q&A Storage Geo Location (iPhone, Android) Video & Audio (iPhone, Android) Canvas (iPhone, Android)Tuesday, February 26, 13
  69. 69. VIDEO THE EASY WAYTuesday, February 26, 13
  70. 70. Video Tag HTML5 introduces a <video> tag to embed videos in a web page. Different browsers support different video formats. The <video> tag can specify multiple formats.Tuesday, February 26, 13
  71. 71. Video Formats Video formats are like languages The same video can be encoded in different formats A browser must “speak the language” to be able to play the videoTuesday, February 26, 13
  72. 72. Video Converter Miro is a free open source video player and converter http:// www.getmiro.comTuesday, February 26, 13
  73. 73. Browser Support HTML5 spec does not define a video codec to use h.264 is the most widely supported. Plays on iPhone and AndroidTuesday, February 26, 13
  74. 74. The Markup Poster image file name <video poster=”star.png”> <source src=”zebra.mp4” /> Video file name. Usually mp4 </video> for mobile devicesTuesday, February 26, 13
  75. 75. Limitations Video will start playing in a dedicated “player” window, when the user taps it It is not possible to auto play the video on mobile It is not possible to embed other content on the video on mobileTuesday, February 26, 13
  76. 76. Audio Tag Structured like a Video tag iPhone and Android support MP3 No autoplayTuesday, February 26, 13
  77. 77. Lab Audio SoundBoard Use Animal Sounds: http://apps.ynonperek.com/ audio.zip Images: http:// apps.ynonperek.com/images.zip Use starter: https://github.com/ynonp/ mobileweb-examples/blob/ master/html5/SoundBoard/ audioboard_starter.htmlTuesday, February 26, 13
  78. 78. Q&A Storage Geo Location Video & Audio Canvas (iPhone, Android)Tuesday, February 26, 13
  79. 79. CANVASTuesday, February 26, 13
  80. 80. HTML5 Canvas A 2d graphics canvas for HTML apps Games Dynamic images Client-side painting (saves bandwidth)Tuesday, February 26, 13
  81. 81. Hello Canvas An HTML element <canvas> on the markup JS code to do actual paintingTuesday, February 26, 13
  82. 82. Hello Canvas The canvas element has no content and no border of its own A canvas keeps a painting context on which we perform the drawing First example uses context.fillText() examples/canvas/intro.htmlTuesday, February 26, 13
  83. 83. Basic Drawing Context object provides the drawing functions. Each takes coordinates and data. Drawing style is determined by setting attributes on the context object. Most style properties are plain text stringsTuesday, February 26, 13
  84. 84. Coordinate SystemTuesday, February 26, 13
  85. 85. Drawing Rectangles Let’s start with drawing rectangles fillRect(x, y, w, h) note fillRect draws a strokeRect(x, y, w, h) filled rectangle, while clearRect(x, y, w, h) strokeRect draws just the outline fillStyle and strokeStyle determine the colorsTuesday, February 26, 13
  86. 86. Demo: RectsTuesday, February 26, 13
  87. 87. Drawing Paths A composite shape on the canvas is called “path” Paths are made of lines, arcs, curves and rectangles A path can be filled or stoked. Nothing is painted until either fill() or stroke() is calledTuesday, February 26, 13
  88. 88. Drawing Paths moveTo(x, y) Lines are painted with lineTo and moveTo lineTo(x, y) stroke() performs the actual drawingTuesday, February 26, 13
  89. 89. Lines Example ctx.beginPath(); ctx.strokeStyle = "hsl(249, 41%, 50%)"; ctx.lineWidth = 6; ctx.moveTo(0, 0); ctx.lineTo(20, 10); ctx.lineTo(0, 20); ctx.stroke(); Cool Color Selector: http://mothereffinghsl.com/Tuesday, February 26, 13
  90. 90. Using The Image It’s possible to use an image drawn in a canvas for other elements get the image url using: canvas.toDataURL() use image url as a source attribute of an img tag Extra: draw on a hidden canvasTuesday, February 26, 13
  91. 91. Drawing Circles use arc() and arcTo() to arc(x, y, radius, draw circles or parts of startAngle, them endAngle, antiClockWise) Degrees are specified in radians. arcTo(x1, y1, Math.PI = 180 deg x2, y2, radius) remember to fill() or stroke()Tuesday, February 26, 13
  92. 92. Exercise 1 Draw the image on the right Use moveTo and arc Bonus: add colorsTuesday, February 26, 13
  93. 93. Exercise 2 Draw the image on the right Place pins randomly across the screenTuesday, February 26, 13
  94. 94. Advanced Canvas Transformations Image FiltersTuesday, February 26, 13
  95. 95. Transformations supported translate(x, y) transformations: translation, scaling, rotate(angle) rotation scale(x, y) Transformations affect all drawing code performed after themTuesday, February 26, 13
  96. 96. Translation Move the origin of the canvas to another point on the canvas The new point is now (0, 0) This can make drawing code simplerTuesday, February 26, 13
  97. 97. Translation Example Use translation to paint the four painted rectangles on the right examples/html5/canvas/translate.htmlTuesday, February 26, 13
  98. 98. Scaling scales the rendering context size x and y are scale factors translate before scale to maintain positionTuesday, February 26, 13
  99. 99. Scale Example examples/html5/canvas/scale.htmlTuesday, February 26, 13
  100. 100. Rotation Rotates a shape around its (0, 0) point of origin Angle is specified in radians. Math.PI = 180 deg (half a circle) Math.PI / 4 = 45 deg Translate before rotate to maintain positionTuesday, February 26, 13
  101. 101. Example: Rotation ctx.translate(75,75); for (var i=1;i<6;i++){ ctx.save(); ctx.fillStyle = rgb(+(51*i)+,+(255-51*i)+,255); for (var j=0;j<i*6;j++){ // draw individual dots ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); }Tuesday, February 26, 13
  102. 102. Example: Rotation The background was painted with a gradient ctx.save(); fill var grad = ctx.createLinearGradient(0, 0, 150, 0); grad.addColorStop(0, "#888"); grad.addColorStop(1, "#eee"); Notice the save() and ctx.fillStyle = grad; restore() at the ctx.fillRect(0, 0, 150, 150); ctx.fill(); beginning and end. ctx.restore(); Now we can put the code inside a function, and it won’t affect outside codeTuesday, February 26, 13
  103. 103. Exercise Draw the clock on the right Use rotate and translate to simplify calculations Bonus: Show the timeTuesday, February 26, 13
  104. 104. Image FiltersTuesday, February 26, 13
  105. 105. Drawing Images on Canvas It’s possible to paint a png or jpeg image on a canvas using drawImage Canvas also lets JS code take the pixels from the image into an array. Using this array, we can transform the pixels and write the result to a new canvas The operation is called filteringTuesday, February 26, 13
  106. 106. Image Drawing API drawImage(image, x, y) paint an entire image object on the canvas at position (x,y) drawImage(image, x, y, w, h) paint an entire image object on the canvas, scaling it to size (w,h) drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) paint a slice of the image on a canvas, can use dw,dh to scaleTuesday, February 26, 13
  107. 107. Drawing Images and File API Use input type=”file” to upload a photo from the phone’s camera or gallery Access the image and paint it on a canvas using HTML5 File APITuesday, February 26, 13
  108. 108. Reading The Photo FileReader is used to read a photo from the input field reader.readAsDataURL( input_field ) - reads the data reader emits load event when done Example: http://jsfiddle.net/influenztial/qy7h5/Tuesday, February 26, 13
  109. 109. Image Filters For the next few slides, we’ll create a Filters object. Each filter is a function of that Filters object The Filters object is responsible for reading pixel data and interacting with the canvas A filter function takes pixel data and manipulates itTuesday, February 26, 13
  110. 110. Filters Code When testing on desktop, some canvas.toDataURL() browsers will throw ctx.getImageData(sx, sy, sw, sh) security exceptions if ctx.putImageData(data, dx, dy) the page is read locally. Code: examples/html5/canvas/filters.htmlTuesday, February 26, 13
  111. 111. Canvas Exercise Implement a mobile drawing app using the canvas and touch events App should have a footer with a selection of colors. Tapping a color sets current color Tapping anywhere on screen should draw in the selected color Bonus: share photo on serverTuesday, February 26, 13
  112. 112. HTML5 Drag & DropTuesday, February 26, 13
  113. 113. HTML5 Drag & Drop Started back in IE5 Still wrongTuesday, February 26, 13
  114. 114. Check Support if (Modernizr.draganddrop) {   // Browser supports HTML5 DnD. } else {   // Fallback to a library solution. }Tuesday, February 26, 13
  115. 115. Draggable Content <div id="columns">   <div class="column" draggable="true"><header>A</header></div>   <div class="column" draggable="true"><header>B</header></div>   <div class="column" draggable="true"><header>C</header></div> </div> Selections, img and anchors with href are draggable by defaultTuesday, February 26, 13
  116. 116. Some CSS Extras [draggable] {   -moz-user-select: none;   -khtml-user-select: none;   -webkit-user-select: none;   user-select: none;   cursor: move; }Tuesday, February 26, 13
  117. 117. And The Fun Part 7 Dragging Events: dragstart, drag, dragenter, dragleave, dragover drop dragendTuesday, February 26, 13
  118. 118. For drop events: cancel defaults for dragover and dragenterTuesday, February 26, 13
  119. 119. Demo1: Dropzone Prevent default from bad events Handle good event http://jsbin.com/oberec/1/editTuesday, February 26, 13
  120. 120. Alerting Drop Zone Use dragenter and dragleave to alert user they’re in the drop zone Demo: http://jsbin.com/oberec/4/editTuesday, February 26, 13
  121. 121. Transferring Data function handleDragStart(e) {   e.dataTransfer.setData(text/html, this.innerHTML); } function handleDrop(e) {   e.stopPropagation();     this.innerHTML = e.dataTransfer.getData(text/html);     return false; }Tuesday, February 26, 13
  122. 122. Other dataTransfer Use e.dataTransfer.files to get data dragged from desktop function handleDrop(e) {   e.stopPropagation();   e.preventDefault();     var files = e.dataTransfer.files;   for (var i = 0, f; f = files[i]; i++) {     // Read the File objects in this FileList.   } }Tuesday, February 26, 13
  123. 123. Other dataTransfer Use setData to allow dragging “out of” the browser var file = document.getElementById("dragout");   file.addEventListener("dragstart",function(evt){     evt.dataTransfer.setData("DownloadURL",fileDetails); },false);Tuesday, February 26, 13
  124. 124. Q&ATuesday, February 26, 13
  125. 125. Thank You Slides By: Ynon Perek ynon@ynonperek.com ynonperek.comTuesday, February 26, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×