Introduction to HTML5 Jeanine Meyer Purchase College/SUNY.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets
Advertisements

Creating User Interfaces Font example. Server issues. Present video/audio examples. Discuss video and audio value-add. Stakeholders. HTML5 localStorage.
Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.
HTML 5 Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it.
Programming games More drawing. Text. Radian measure. Faces. Homework: Do your own drawings. Create index.html file. Upload work.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Chapter 14 Introduction to HTML
Programming Games Computer science big ideas. Computer Science jargon. Show virtual dog Homework: [Catch up: dice game, credit card or other form.] Plan.
1 Introduction to HTML5. 2 Introductions –Lecture is based on the book: –The Essential Guide to HTML5: Using Games to learn HTML5 & JavaScript.
IT Engineering I Instructor: Rezvan Shiravi
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
Create Interfaces College exercise. Continue HTML5: HTML5 logo, drawing images. Coin toss. Homework: acquire video & audio.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Programming Games Recap on Google Maps. Creating elements. Dynamic creation of elements (multiple video elements). Geolocation. Classwork/Homework: Catch-up.
Programming games Examples: Audio example. Google Maps api. Classwork: show more complex video. Classwork/Homework: Find place (lat and long) for basic.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Programming games Recap. Upload work (Filezilla, index.html). Drawing lines. Drawing stars. Homework: Drawing exercises.
Programming Games Basic HTML5 audio example. Catch-up. Work on basic video. Homework: Complete basic video.
Programming Games Show your cannonball. HTML5 video. Miro. Classwork/Homework: Acquire video, convert to multiple formats, and produce simple (just html)
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Advanced Level Course. Site Extras Site Extras consist of four categories: Stationeries Site Trash Designs Components.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Getting Started with Canvas IDIA Spring 2013 Bridget M. Blodgett.
Programming Games Google Map API examples. CSS. Classwork/homework: Catch up. Upload work. Show your [more] complex Google Maps API example. Plan your.
Programming Games Simulated ballistic motion: cannon ball. Classwork: Final day for midterm project and all projects for first part of class. Homework:
Programming Games Show your simple video. More video examples. Audio. Classwork/Homework: Produce more complex video program.
Session: 17. © Aptech Ltd. 2Canvas and JavaScript / Session 17  Describe Canvas in HTML5  Explain the procedure to draw lines  Explain the procedure.
Programming games Reprise: coin toss on canvas. Dice game rules. Global and local variables. Homework: [Catch up. Upload projects, including index.html.]
Homework: New coin toss. [Start dice game.]
Creating Interfaces Defining users. College exercise. HTML5 drawing. Homework: Post or make comment on other postings on reflection on college exercise.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
Programming Games Show project. Refresher on coordinates. Scaling, translation. HTML5 logo. Refresher on animation. Bouncing ball. Homework: Do your own.
Programming games Show your version of Bo the dog. Start cannonball Preview: video, audio work session (cannonball) Homework: Cannonball with ball in a.
Introduction to HTML. What is HTML?  Hyper Text Markup Language  Not a programming language but a markup language  Used for presentation and layout.
Programming Games Reprise: storage, datatypes. Geolocation/Google API example. Work session Homework: [Catch up. Upload work. Post proposal.] Work on your.
Creating User Interfaces Recap HTML/HTML5 JavaScript features Homework: keep working on user observation studies. Review JavaScript.
Programming Games Reprise on drawing on canvas. Jargon (concepts): objects. Demonstrate slingshot. Mouse events. Work on your cannonball. Homework: Finish.
Programming games Show shaking screen, quiz show. Calculations Homework: (Finish basic Javascript Projects) Make proposal. Work on project.
Programming Games [Show Google Maps project.] Demonstrate more examples. Classwork/Homework: Decide on final project. Post proposal to moodle.
Programming games HTML/JavaScript basics Functions, events, forms Classwork: [Show favorite sites.] Coin toss. Homework: GET WEB SPACE. Complete coin toss.
Chapter 2: Variables, Functions, Objects, and Events JavaScript - Introductory.
CHAPTER 15 HTML 5 VIDEO AND AUDIO Intro to HTML5 1.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Creating Interfaces Show form validation examples, Hangman. HTML5 with Google Maps API. Add in localStorage. Design pitfalls. Homework: Make proposal for.
Programming games Context of what we are doing. Drawing on canvas. Homework: [Complete coin toss examples.] Do your own drawings. Upload files to website.
Programming games Review concepts. Crooked coin toss. Drawing on canvas. Homework: Complete [static] drawings. Upload files to website.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Creating User Interfaces HTML5 video & audio. Role of video and audio. Homework: Complete your own [small/simple] HTML5 video and audio projects.
Programming Games Show slide show (on your site). Bouncing something. Video element. Bouncing video element. Bouncing video drawn on canvas. Bouncing video.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Phonegap Bridge –Geolocation and Google maps CIS 136 Building Mobile Apps 1.
Web Programming Java Script-Introduction. What is Javascript? JavaScript is a scripting language using for the Web. JavaScript is a programming language.
HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.
Programming games Show work on site. Work on slide show. Timed event for bouncing ball. Homework: [Finish slide show and upload to site.] Acquire a short.
The HTML5 logo was introduced by W3C in 2010
Introduction to HTML.
That Gauge is COOL! 
Weebly Elements, Continued
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Web Development & Design Foundations with HTML5 7th Edition
Programming Games Computer science big ideas and Computer Science jargon: review of things we have used in examples. Show virtual dog Homework: [Catch.
Context of what we are doing.
Programming games Share your plans for your virtual something.
Catchup. Work on project.
Creating User Interfaces
Programming Games Refresher on coordinates. Scaling, translation. HTML5 logo. Refresher on animation. Bouncing ball. Show project. Classwork/Homework:
JavaScript – Let’s Draw!
Presentation transcript:

Introduction to HTML5 Jeanine Meyer Purchase College/SUNY

Introductions Jeanine Meyer –Purchase College/SUNY: Math/CS & New Media. Prior: IBM Research (robotics, manufacturing research, educational grants), Pace University. –5 books: latest is The Essential Guide to HTML5: Using Games to learn HTML5 & JavaScript

Background HTML5 is the latest/soon to be version of –HyperText Markup Language (HTML): text with tags for content –JavaScript: scripting/programming language for interactivity, dynamic presentation –Cascading Style Sheets: formatting Many new features, for support of semantic web, dynamic/interactive websites CAUTION: definition not official. Browser support evolving. Do ask/remind me to say: what are my names versus built-in parts of HTML5.

New features include: Semantic elements: header, footer, section, article, others. canvas for drawing –paths of rectangles, arcs, lines, images –mouse events localStorage (variation of cookies) audio & video elements –including drawing video on canvas

This Tutorial Build Favorite sites –review HTML structure, new elements) Build Drawings –draw rectangles, arcs, lines on canvas Build Coin toss –event handling, draw text and images on canvas Find video clips & convert. –Add video to favorite sites or make it stand-alone. Build Bouncing Video –draw video, create mask, timed event Build geolocation application, including Google Maps API app and localStorage Preview Essential Guide to HTML5

Tools TextPad or TextWrangler or NotePad –Dreamweaver okay but it does cost. Compatible browser –Firefox: works for all examples, including masked video and geolocation –Chrome and Safari work for most examples –IE9 being tested now Miro Converter

HTML review Elements consist of opening tag, contents of the element and closing tag. Tags have attributes. NEXT Some elements/tags are singletons Document Object Model (DOM) defines relationships, attributes & methods of objects.

First webpage: Favorite Sites Annotated list of 'favorite sites' Need to determine URLs for links, images, brief text. header and article elements style element (CSS) for formatting –critical for header and article. Also use it for images script element: single statement to insert date. workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/workshopexfavoritesites.html

screen shot, not live html

Advice HTML does not recognize white space. You need to make spacing and line breaks explicit. For your readability, put line breaks and spaces. My objective often is to squeeze things in one slide. This isn't your objective!

HTML template

Favorite Sites overview for this example: // for header and article and img content: header, article for each site

header {font-family:Georgia,"Times New Roman",serif; text-align:center; font-size:30px; display:block; } article { text-align:left; font-size:20px; margin:20px; display:block; font-family:"Century","Tahoma", sans- serif; } img {display:block;} document.write(Date());

Favorite Sites My Academic website, is where I put information about my courses, along with publications and other activities. My daughter, Aviva, is active in the Stolen Chair Theater company. The next production involves Victorian photo-collage.

Comments Remember: spaces, line breaks need to be inserted explicitly My first attempt was to use to force images to their own line. I changed to using a style to keep formatting in the section. –need not be so pure! GO! - get information, look up other CSS, ask!

2 nd set of projects: Drawing canvas element Use code to define a so-called context. Methods of this object do the work! Screen geometry: upper left corner is origin. Colors defined by red-green-blue values or a small set of named colors, – –will show hexadecimal example later. stroke versus fill draw Rectangles p/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5worksho p/wkshopdrawing0.html

0,0, default color, 10 by 10, stroke 0,300,green,30 by 30, stroke 500,300, 50 by 50, fill 500,0,default color,20 by 20, fill rgb(200,0,100)

Four rectangles var ctx; function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 2; ctx.strokeRect(0,0,10,10); ctx.fillRect(500,0,20,20); ctx.strokeStyle = "green"; ctx.fillStyle = "rgb(200,0,100)"; ctx.strokeRect(0,300,30,30); ctx.fillRect(500,300,50,50); } Your browser doesn't support the HTML5 element canvas.

Errors JavaScript is scripting language: interpret statements at execution time. –NOT compiled, with error messages Semantic errors (errors of meaning) are more difficult to detect and fix! Syntactic errors are errors of form, analogous to grammatical errors –FireFox Tools/Error Console can help Most common: bad bracketing ctx.fillStyle("rgb(200,0,100)"); fillStyle is attribute,not method

Comments The drawing is done in the init function which is called when the body element is loaded. The canvas element with id="canvas" does not exist until the body is loaded. Default color is black. Red green blue values each are 0 to 255 (8 bits of intensity). The strokeStyle and the fillStyle are attributes, not methods. GO: experiment with colors (by name) and rgb (note the quotation marks) and location and width and height.

More comments Drawings are …paint on the canvas. These rectangles are not objects to be moved or referenced later. Use ctx.clearRect method to erase. Need to do calculations to detect hits. –See memory game in book. Alternative is dynamic placement of html markup –See quiz, hangman.

Next drawing Paths created with arcs and line segments Arcs are portions of circles, created using radians in place of degrees. Math.PI is available for use. A complete circle can be drawn from 0 to 2*Math.PI or –Math.PI to Math.PI, etc. Arcs can be stroke or fill. workshop/wkshopsmile.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/wkshopsmile.html workshop/wkshopfrown.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/wkshopfrown.html

Angles 0 (=2*PI) PI/4 PI/2 PI PI*3/2 true means counter- clockwise!.80*PI.20 * PI

arcs ctx.arc (x of center, y of center, radius, starting angle, finishing angle, true for counter-clockwise) No drawing (ink) at the center! This is important when connecting arcs and lines. EXPERIMENT

4 distinct paths, each made up of 1 arc. Default, "red" and "brown"

Strategy Use variables with some variable values defined in terms of others. Circle face and two eyes. Smile is (partial) arc. Brown eyes and red smile. body element same as before. –You can add the code for this to your rectangles drawing.

var ctx; var headx = 100; //center of face x coord. var heady = 200; // center of face y coord. var headrad = 50; //radius of face var smileoffsetx=0; //smile center x is same as face var smileoffsety = 15; //smile center y further down var smilerad=20; // smile radius var eyeoffsety = -10; //eyes up from center var lefteyeoffsetx = -15; //left eye var righteyeoffsetx = -lefteyeoffsetx; //right var eyerad = 8; // eye radius

function init() { ctx = document.getElementById('canvas').ge tContext('2d'); ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(headx,heady,headrad,0,2*Math.PI,true); ctx.closePath(); ctx.stroke(); …

ctx.strokeStyle = "red"; ctx.beginPath(); ctx.arc(headx+smileoffsetx,heady+smileoffsety, smilerad,.80*Math.PI,.20*Math.PI,true); ctx.stroke(); ctx.fillStyle = "brown"; ctx.beginPath(); ctx.arc(headx+lefteyeoffsetx,heady+eyeoffsety, eyerad, 0,2*Math.PI,true); ctx.fill(); ctx.beginPath(); ctx.arc(headx+righteyeoffsetx,heady+eyeoffset y,eyerad,0,2*Math.PI,true); ctx.fill(); }

Comments The fill and stroke calls close the path. Also, can close a path with closePath() Using variables makes code more flexible and easier to see relationships. GO: draw arcs, changing colors, sizes, etc. NOTE: can draw non-circular ovals using transformations: scale. Check out the hangman game in book!

Next drawing: star For drawing lines (and arcs), think of moving a pencil versus drawing (preparing to draw) a line segment –nothing is drawn until the stroke or fill Use an array with coordinates for 5 points Use an array to hold names of 3 colors button element html5workshop/wkshopdrawingstars.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5workshop/wkshopdrawingstars.html

opening screen

after 1 st press of button

after next press

show body first Your browser doesn't support the HTML5 element canvas. Make Star

variables (in script element) var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

variables (in script element) var ctx; var pts=[//5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

variables (in script element) var ctx; var pts=[//5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

variables (in script element) var ctx; var pts=[//5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

variables (in script element) var ctx; var pts=[//5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

function init() { ctx = document.getElementById('canvas').getContext('2d'); } function makestar() { ctx.clearRect(0,0,600,400); ctx.fillStyle=colors[c]; c = c +1; // can reduce to one line using colors[c++] c = (c<3)?c:0; ctx.beginPath(); ctx.moveTo(pts[0][0],pts[0][1]); ctx.lineTo(pts[3][0],pts[3][1]); ctx.lineTo(pts[1][0],pts[1][1]); ctx.lineTo(pts[4][0],pts[4][1]); ctx.lineTo(pts[2][0],pts[2][1]); ctx.lineTo(pts[0][0],pts[0][1]); ctx.stroke(); //outline (necessary for white star! ctx.fill(); }

Comments Your assignment: do something with a button. It does not have to be a star. But do use moveTo and lineTo. You can combine with rectangles (separate from paths) and arcs (can combine with lines). Try stroke and fill Can include multiple moveTo –think of picking up your pen and moving to a new spot on the paper/canvas.

Fancier stars Code to draw star more precisely Position each star randomly on canvas. –Add star with each button press Increase number of colors. – or_names.htmhttp:// or_names.htm –improve coding for robustness html5workshop/wkshopprecisestars.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5workshop/wkshopprecisestars.html

after many presses

Strategy reuse code for makestar, with modification –remove clearRect method –add a call to buildstar that re-creates the pts array add items to colors array –remove 3 from the code! position, size, and rotation of star created using calls to Math.random.

variables var ctx; var angle = 2*Math.PI/5; var pts=[ ]; var colors=["red","white","blue","p urple","yellow","teal"]; var c=0;

function makestar() { buildstar(); ctx.fillStyle=colors[c++]; c = (c<colors.length)?c:0; ctx.beginPath(); ctx.moveTo(pts[0][0],pts[0][1]); ctx.lineTo(pts[3][0],pts[3][1]); ctx.lineTo(pts[1][0],pts[1][1]); ctx.lineTo(pts[4][0],pts[4][1]); ctx.lineTo(pts[2][0],pts[2][1]); ctx.lineTo(pts[0][0],pts[0][1]); ctx.stroke(); ctx.fill(); }

function buildstar() { pts = []; var x=500*Math.random(); //all these arbitrary var y = 300*Math.random(); var r=50*Math.random(); var sangle = Math.random()*angle; for(var i=0;i<5;i++) { var a = i*angle + sangle; var px = x+r*Math.cos(a); var py = y-r*Math.sin(a); pts.push([px,py]); }

Comments Lesson of these examples is that drawings are dynamic! –can be done under specific circumstances in a program –using different values Do this if there is time. Consider changing –names of colors –constants –draw something instead of or in addition to the star –?

Next: coin flip Draw image from image file of head or tail on canvas where player clicks mouse –event handling: listen for mouse click –draw image made from external file Draw text (with directions) on canvas html5workshop/wkshopcoinflip.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5workshop/wkshopcoinflip.html

opening screen

after mouse click

Strategy Need to locate/identify file address for images –can be in same folder (use relative address) or use full URL Image objects with src attribute font set for context (ctx) event handling done for canvas element NOT context. Sets up call to function that has 1 parameter Does require browser specific code to get mouse coordinates. (Sigh….) –use technique of checking for presence of attribute

Strategy, cont. Fonts are from what is available on the client computer. draw outline (strokeRect) to show player where canvas is. Alternative to color names or rgb is hexadecimal. –use PhotoShop or Paint Shop Pro Note that my code makes adjustment to put middle of image where mouse was clicked.

variables var ctx; var canvas1; var head = new Image(); var tail = new Image(); head.src = "head.gif"; tail.src = "tail.gif"; var coinwidth = 100; var coinheight = 100;

functions function init() { ctx = document.getElementById('canvas').getConte xt('2d'); canvas1 = document.getElementById('canvas'); canvas1.addEventListener('click',flip,fals e); ctx.font = "italic 20px Accent"; ctx.fillStyle = "#dd00ff"; ctx.strokeRect(0,0,600,400); ctx.fillText("Click on canvas to flip a coin.",10,20); }

function flip(ev) { var mx; var my; ctx.clearRect(0,0,600,400); if ( ev.layerX || ev.layerX == 0) { // Firefox mx= ev.layerX; my = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera mx = ev.offsetX; my = ev.offsetY; } if (Math.random()>.5) { ctx.drawImage(head,mx-50,my- 50,coinwidth,coinheight); } else { ctx.drawImage(tail,mx-50,my- 50,coinwidth,coinheight);} ctx.strokeRect(0,0,600,400); ctx.fillText("Click on canvas to flip a coin.",10,20); }

Comments You need to acquire two images to represent the coin faces. –download to same folder or use exact, complete address You can go into Word, or equivalent, to see available fonts. –more in book AND online. Go!

Background on audio & video This is native support (no need for plugins), no dependence on YouTube. Issue: Multiple formats (aka codecs) for each. –Different browsers recognize different formats. –Situation MAY improve: may be standardization. –Good news: the and elements provide way to reference multiple files and let browser choose (though order does seem to be important).

Audio & video elements

Our goal now Find and download video files. Use Miro Converter to produce other formats. Put audio into one of existing projects. Put video into one of existing projects. Build video bouncing ball. Look at book's rock-paper-scissors for playing specific sounds at specific times. Look at book's quiz for keeping video invisible and playing it only when quiz round complete.

Acquire video Make your own. Find on-line. Site lets you specify a URL and choose from the videos to download. –Respect intellectual property!!! –Respect personal privacy (of friends & family, etc.)!!!

Produce all formats Produce formats for all browsers: – Download the program. The original file can be in several different formats, including flv (Flash format, used by YouTube). Follow directions: should produce the 3 formats: mp4, theora.ogv, webmvp8.webm

Next: Video Put video element in your favorite sites or something else or ??? Test using Firefox, Chrome and Safari. PATIENCE!!

Next: Bouncing video Two versions –move around video element –use drawImage to place video on canvas (works in FireFox) Doing this makes it easier to draw mask. Otherwise, difficult to position. "Not quite ready for prime time". Need to put in code to wait until video all downloaded.

Strategy Use setInterval to invoke [my] drawscene function –re-position video. –Check against [virtual] walls. Apply angle of incidence equal angle of reflection (easy to do) –use strokeRect to draw box NOTE: the loop attribute did not work, so I set up event handling for video ended event.

Function table initCalled by action of onLoad in restart… addEventListener in init drawscene… setInterval in init. This is different in two versions moveandcheckCalled in drawscene

Bouncing video rectangle canvas and video distinct elements html5workshop/videobounce1.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5workshop/videobounce1.html

Video is in motion

Style section Positioning and layering (my term). Note: to change z-index by JavaScript, use zIndex. #vid {position:absolute; visibility:hidden; z-index: 0; } #canvas {position:absolute; z- index:10;}

var ctx; var cwidth = 900; var cheight = 600; var ballrad = 50; var boxx = 20; var boxy = 30; var boxwidth = 850; var boxheight = 550; var boxboundx = boxwidth+boxx-2*ballrad; var boxboundy = boxheight+boxy-2*ballrad; var inboxboundx = 0; var inboxboundy = 0; var ballx = 50; var bally = 60; var ballvx = 2; var ballvy = 4; var v;

function init(){ ctx = document.getElementById('canvas').getConte xt('2d'); v = document.getElementById("vid"); v.addEventListener("ended",restart,false); v.style.left = ballx; v.style.top = bally; v.width = 2*ballrad; v.height = 2*ballrad; v.play(); v.style.visibility = "visible"; setInterval(drawscene,50); }

function restart() { v.currentTime=0; v.play(); }

function drawscene(){ ctx.lineWidth = ballrad; ctx.clearRect(boxx,boxy,boxwidth,boxheight ); moveandcheck(); v.style.left = ballx; v.style.top = bally; ctx.strokeStyle ="rgb(200,0,50)"; ctx.strokeRect(boxx,boxy,boxwidth,boxheigh t); //box }

function moveandcheck() { var nballx = ballx + ballvx; var nbally = bally +ballvy; if (nballx > boxboundx) { ballvx =-ballvx; nballx = boxboundx; } if (nballx < inboxboundx) { nballx = inboxboundx ballvx = -ballvx; } if (nbally > boxboundy) { nbally = boxboundy; ballvy =-ballvy; } if (nbally < inboxboundy) { nbally = inboxboundy; ballvy = -ballvy; } ballx = nballx; bally = nbally; }

Your browser does not accept the video tag. This browser doesn't support the HTML5 canvas element.

Bouncing video circle Works in Firefox. video used in drawImage. A mask is created: a box with a hole positioned over the video to produce a circular html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5workshop/videobounce3.html

Video is in motion

var ctx; var cwidth = 900; var cheight = 600; var ballrad = 50; var boxx = 20; var boxy = 30; var boxwidth = 850; var boxheight = 550; var boxboundx = boxwidth+boxx-2*ballrad; var boxboundy = boxheight+boxy-2*ballrad; var inboxboundx = 0; var inboxboundy = 0; var ballx = 50; var bally = 60; var ballvx = 2; var ballvy = 4; var maskrad; var v;

function init(){ ctx = document.getElementById('canvas').getConte xt('2d'); v = document.getElementById("vid"); v.addEventListener("ended",restart,false); // because loop doesn't work on FF v.width = v.videoWidth/3; v.height = v.videoHeight/3; videow = v.width; videoh = v.height; maskrad =.4*Math.min(videow,videoh); v.play(); setInterval(drawscene,50); }

function restart() { v.currentTime=0; v.play(); }

function drawscene(){ ctx.lineWidth = ballrad; ctx.clearRect(0,0,boxwidth+boxx,boxheight+boxy); ctx.fillStyle="rgb(255,255,255)"; //white moveandcheck(); ctx.drawImage(v,ballx+boxx, bally+boxy, v.width,v.height); ctx.beginPath(); ctx.moveTo(ballx+boxx,bally+boxy); ctx.lineTo(ballx+boxx+v.width,bally+boxy); ctx.lineTo(ballx+boxx+v.width,bally+boxy+v.height); ctx.lineTo(ballx+boxx,bally+boxy+v.height); ctx.lineTo(ballx+boxx,bally+boxy); ctx.arc(ballx+boxx+.5*v.width,bally+boxy+.5*v.height,maskr ad,0, Math.PI*2,true); ctx.fill(); //draw white mask on top of video, letting just circle show ctx.strokeStyle ="rgb(200,0,50)"; ctx.strokeRect(boxx,boxy,boxwidth,boxheight); //box }

function moveandcheck() { var nballx = ballx + ballvx; var nbally = bally +ballvy; if (nballx > boxboundx) { ballvx =-ballvx; nballx = boxboundx; } if (nballx < inboxboundx) { nballx = inboxboundx ballvx = -ballvx; } if (nbally > boxboundy) { nbally = boxboundy; ballvy =-ballvy; } if (nbally < inboxboundy) { nbally = inboxboundy; ballvy = -ballvy; } ballx = nballx; bally = nbally; }

Your browser does not accept the video tag. This browser doesn't support the HTML5 canvas element.

Next: Maps app Use Google Maps API to bring up map at current location. Respond to clicking by placing a marker and calculating distance. Provide way to change to fixed set of locations or the last marker. workshop/geolocationdistance2.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/geolocationdistance2.html –need to give permission to Share Location Works in Chrome and Firefox. Does not work in Safari for Windows.

Opening screen

Brings up ….

After click on map

After choose CUNY

Mapping Google Maps API (and other applications) defines positions using special latitude/longitude data object Access to Google Map is created for a place in the HTML document, using specified map options HTML has a specification for doing geolocation. –navigator.geolocation produces latitude and longitude values

How to get positions? Google Maps –get to a map Browser location javascript:void(prompt('',gApplication.getMap().get Center())); OR Click on green beaker and enable the drop latlng marker –right click then normal click

My program Tries to use the geolocation Gives user option to pick base location User can click on map and find distance from base center. Can change base to last clicked on position. General access to Google Maps features.

Basics if (navigator.geolocation) checks if this object exists. Does NOT cause any errors. if (navigator.geolocation) { navigator.geolocation.getCurrentPosit ion (handler,problemhandler); } handler when things go okay. problemhandler when there are errors, including user deciding not to share location.

Create/Access Google Maps map = new google.maps.Map(document.getElementB yId("place"), myOptions); brings up Google Maps in the div with id "place" using the parameters in myOptions. NOTE: use of % for width and height did not work when used.

style, external script header {font-family:Georgia,"Times New Roman",serif; font-size:20px; display:block; }

init() code function init() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition (handler,problemhandler); } else { if (document.getElementById("place")) { document.getElementById("place").innerHTML = "I'm sorry but geolocation services are not supported by your browser"; document.getElementById("place").style.color = "#FF0000"; } } }

function handler(position) { var mylat = position.coords.latitude; var mylong = position.coords.longitude; makemap(mylat,mylong); }

error handling function problemhandler(prob) { switch(prob.code) { case 1: document.getElementById("place").innerHTML = "User declined to share the location information."; break; case 2: document.getElementById("place").innerHTML = "Errors in getting base location."; break; case 3: document.getElementById("place").innerHTML = "Timeout in getting base location."; } document.getElementById("header").innerHTM L = "Base location needs to be set!"; }

variables var listener; var map; var markersArray =[]; var blatlng; var myOptions; var locations = [ [ , , "Memphis, TN"], [ , ,"Purchase College/SUNY"], [ , ,"IIT"] ];

create/access map function makemap(mylat, mylong) { blatlng = new google.maps.LatLng(mylat,mylong); myOptions = { zoom: 14, center: blatlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById("p lace"), myOptions); listener = google.maps.event.addListener(map, 'click', function(event) { checkit(event.latLng);}); }

response to click on map function checkit(clatlng) { var distance = dist(clatlng,blatlng); distance = Math.floor((distance+.005)*100)/100; var distanceString = String(distance)+" miles"; marker = new google.maps.Marker({ position: clatlng, title: distanceString, map: map }); markersArray.push(marker); document.getElementById("answer").innerHTML = "The distance from base to most recent marker is "+String(distance) +" miles."; }

distance function function dist(point1, point2) { //spherical law of cosines //var R = 6371; // km var R = 3959; // miles var lat1 = point1.lat()*Math.PI/180; var lat2 = point2.lat()*Math.PI/180 ; var lon1 = point1.lng()*Math.PI/180; var lon2 = point2.lng()*Math.PI/180; var d = Math.acos(Math.sin(lat1)*Math.sin(lat2) + Math.cos(lat1)*Math.cos(lat2) * Math.cos(lon2-lon1)) * R; return d; }

change base using radio buttons function changebase() { for(var i=0;i<locations.length;i++) { if (document.f.loc[i].checked) { makemap(locations[i][0],locations[i][1] ); document.getElementById("header").inner HTML = "Base location is "+locations[i][2]; } return false; }

Base location is your current geolocation Change base location: Memphis Purchase College Illinois Institute of Technology

Variation Geolocation returns accuracy and, maybe, other information, including altitude. These applications mark the center with a red x and display other information – 5workshop/geolocation.htmlhttp://faculty.purchase.edu/jeanine.meyer/html 5workshop/geolocation.html – 5workshop/geolocationkm.htmlhttp://faculty.purchase.edu/jeanine.meyer/html 5workshop/geolocationkm.html Note: accuracy is given in meters in both cases

Critical code Uses custom image for marker var xmarker = "x1.png"; … marker = new google.maps.Marker({ position: blatlng, title: "center", icon: xmarker, map: map });

getCurrentPosition 3 rd parameter to getCurrentPosition call positionopts = {enableHighAccuracy: true} ; … navigator.geolocation.getCurrentPosition(handler, problemhandler, positionopts); Add form coutput for output document.coutput.lat.value = mylat; document.coutput.lon.value = mylong; document.coutput.acc.value = position.coords.accuracy; document.coutput.alt.value = position.coords.altitude; document.coutput.altacc.value = position.coords.altitudeAccuracy; document.coutput.heading.value = position.coords.heading; document.coutput.speed.value = position.coords.speed;

Next application: persistent storage Normal situation: no changes to client computer beyond downloaded files. cookies invented (with a pleasing name) to be files associated with each browser to be used only by same server site. –convenience: IDs and passwords, preferences, etc. –behavioral marketing! Early HTML supported cookies. localStorage is a new variation. CAUTION: Firefox requires the program to run on a server! Chrome allows running locally. workshop/geolocationdistance4.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/geolocationdistance4.html

Opening (after permission)

New base

Objective: add to maps app 3 buttons: store base, retrieve base stored, change base to last marker localStorage used name-value pairs. Do error checking! –check for ability to do localStorage –check if there is a stored time.

Strategy Three buttons, invoking store(), retrieve(), and changebasetomarker() Use try { } catch(e) { }. The code in try will NOT trigger an error, but if there is one, will go to catch. Also use typeof(localStorage) to test if this is defined.

Store base. Restore last base. Change base location to last marker.

function store() { if (typeof(localStorage) == "undefined") { alert("Browser does not recognize HTML local storage."); } else { try { localStorage.setItem("baselat",blatlng.lat ()); localStorage.setItem("baselng",blatlng.lng ()); localStorage.setItem("basename",basename); } catch(e) { alert("Error with use of local storage: "+e);} } return false; }

function retrieve() { if (typeof(localStorage) == "undefined") { alert("Browser does not recognize HTML local storage."); } else { try { oldlat= localStorage.getItem("baselat"); oldlng = localStorage.getItem("baselng"); oldname = localStorage.getItem("basename"); if (oldlat==null) { alert("No base stored");} else {makemap(Number(oldlat),Number(oldlng)); basename = oldname; document.getElementById("header").innerHTML = "Base location is "+basename; } } catch(e) { alert("Error with use of local storage: "+e);} } return false; }

changes base to marker function changebasetomarker() { if (lastmarker!="undefined") { makemap(lastmarker.lat(),lastma rker.lng()); basename = "marker"; }

Comments Error checking good! Many GIS programs with common/similar features Need to determine where information goes –my locations array kept information in my JavaScript

Plug for Book introduce application, mainly familiar games. critical requirements HTML5 (CSS, JavaScript) features complete code: comments Many chapters involve sets of applications Introduction to programming NOTE: not encyclopedic on features

Applications (HTML5 features) Favorite sites Dice game: drawing arcs & rectangles Bouncing ball: drawing, including gradient, form validation, timed events Cannonball & Slingshot: drawing lines & images, mouse events, rotation & translation, programmer-defined objects Memory polygons & pictures: drawing, mouse events (clicking on card), timing

Applications (HTML5 features) Quiz: dynamically created HTML markup, mouse events on elements, video Mazes: mouse events, drawing, localStorage, radio buttons Rock, Paper, Scissors: drawing, audio Hangman: drawing lines and arcs (ovals), dynamic HTML markup Blackjack: key events, drawing images, footer

Conclusion Please with comments on this tutorial and HTML5 for –professional use –educational use Thank you