HTML 5 Workshop

8/2/2019 HTML 5 Workshop

1/123

Introduction to HTML5

Jeanine Meyer

Purchase College/SUNY


2/123

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


3/123

Background

HTML5 is the latest/soon to be version of HyperText Markup Language (HTML): text with tags for

content

JavaScript: scripting/programming language forinteractivity, 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 namesversus built-in parts of HTML5.


4/123

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


5/123

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 APIapp and localStorage

Preview Essential Guide to HTML5


6/123

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


7/123

HTML review

Elements consist of opening tag, contents of theelement and closing tag.

Tags have attributes.

NEXT

Some elements/tags are singletons

Document Object Model (DOM) defines

relationships, attributes & methods of objects.


8/123

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.

http://faculty.purchase.edu/jeanine.meyer/html5wor
http://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.html


9/123

screen shot,

not live html
http://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.html


10/123

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!
http://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.html


11/123

HTML template
http://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.html


12/123

Favorite Sites overview for this example:

// for header and article and img

content: header, article for each site
http://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.html


13/123

header {font-family:Georgia,"Times NewRoman",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());
http://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.html


14/123

Favorite Sites

My Academic website, http://faculty.purchase.edu/jeanine.meyer

is where I put information about my courses,along with publications and otheractivities.

My daughter, Aviva, is active in the Stolen ChairTheater company. The next productioninvolves Victorian photo-collage.
http://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/workshopexfavoritesites.htmlhttp://faculty.purchase.edu/jeanine.meyerhttp://faculty.purchase.edu/jeanine.meyer


15/123

Comments

Remember: spaces, line breaks need tobe inserted explicitly

My first attempt was to use
to force

images to their own line. I changed tousing a style to keep formatting in the section.

need not be so pure! GO! - get information, look up other CSS,ask!


16/123

2nd set of projects: Drawing

canvas element Use code to define a so-called context. Methods of thisobject do the work!

Screen geometry: upper left corner is origin.

Colors defined by red-green-blue values or a small set ofnamed colors, http://www.tutorialspoint.com/html5/html5_color_names.htm.

will show hexadecimal example later.

stroke versus fill

draw Rectangles http://faculty.purchase.edu/jeanine.meyer/html5workshop/wks
http://www.tutorialspoint.com/html5/html5_color_names.htmhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://www.tutorialspoint.com/html5/html5_color_names.htm


17/123

0,0, default color, 10

by 10, stroke

0,300,green,30 by 30,

stroke500,300, 50 by 50, fill

500,0,default

color,20 by 20, fill

rgb(200,0,100)
http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.html


18/123

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.fillRect(500,300,50,50); }

Yourbrowser doesn't support the HTML5 elementcanvas.
http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.html


19/123

Errors

JavaScript is scripting language: interpret

statements at execution time.

NOT compiled, with error messages

Semantic errors (errors of meaning) are moredifficult 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
http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.html


20/123


21/123

Comments

The drawing is done in the init function which iscalled when the body element is loaded. Thecanvas element with id="canvas" does not existuntil the body is loaded.

Default color is black. Red green blue valueseach are 0 to 255 (8 bits of intensity). ThestrokeStyle and the fillStyle are attributes, notmethods.

GO: experiment with colors (by name) and rgb(note the quotation marks) and location andwidth and height.
http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.html


22/123

More comments

Drawings are paint on the canvas.

These rectangles are not objects to bemoved 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 htmlmarkup See quiz, hangman.
http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.html


23/123

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.

http://faculty.purchase.edu/jeanine.meyer/html5work

http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopsmile.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopfrown.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopfrown.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopsmile.html


24/123

Angles

0 (=2*PI)

PI/4

PI/2

PI

PI*3/2

true means

counter-

clockwise!

.80*PI

.20 * PI


25/123

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


26/123

4 distinct

paths, each

made up of 1

arc.

Default, "red"

and "brown"


27/123

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.


28/123

var ctx;

var headx = 100; //center of face x coord.

var heady = 200; // center of face y coord.

var headrad = 50; //radius of facevar 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 eyevar righteyeoffsetx = -lefteyeoffsetx; //right

var eyerad = 8; // eye radius


29/123


ctx.lineWidth = 5;ctx.beginPath();

ctx.arc(headx,heady,headrad,0,2*Math.PI,true);

ctx.closePath();

ctx.stroke();


30/123

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+eyeoffsety,eyerad,0,2*Math.PI,true);ctx.fill(); }


31/123

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 usingtransformations: scale. Check out the hangman

game in book!


32/123

Next drawing: star

For drawing lines (and arcs), think ofmoving a pencil versus drawing (preparingto 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 http://faculty.purchase.edu/jeanine.meyer/htm
http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawingstars.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawingstars.html


33/123

opening screen


34/123

after 1st press of button


35/123

after next press


36/123

after next press


37/123

show body first

Your browser doesn't support the HTML5element canvas.

Make Star


38/123

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


39/123

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



40/123

variables



[100,35],

[60,10],

[20,35],[35,100],

[85,100]

];




41/123

variables



[100,35],

[60,10],

[20,35],[35,100],

[85,100]

];




42/123

variables

(in script element)

var ctx;

var pts=[ //5 points for star: roughdrawing

[100,35],[60,10],

[20,35],

[35,100],

[85,100]];

var colors=["red","white","blue"];

//used in succession


function init() {


43/123

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


44/123

Comments

Your assignment: do something with a button. Itdoes 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 spoton the paper/canvas.


45/123

Fancier stars

Code to draw star more precisely Position each star randomly on canvas.

Addstar with each button press

Increase number of colors. http://www.tutorialspoint.com/html5/html5_color_n improve coding for robustness

http://faculty.purchase.edu/jeanine.meyer/htm
http://www.tutorialspoint.com/html5/html5_color_names.htmhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopprecisestars.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopprecisestars.htmlhttp://www.tutorialspoint.com/html5/html5_color_names.htm


46/123

after many presses


47/123

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.


48/123

variables

var ctx;

var angle = 2*Math.PI/5;

var pts=[ ];var

colors=["red","white","blue","p

urple","yellow","teal"];

var c=0;


49/123

function makestar() {

buildstar();

ctx.fillStyle=colors[c++];

c = (c


50/123

function buildstar() {

pts = [];

var x=500*Math.random(); //all thesearbitrary

var y = 300*Math.random();

var r=50*Math.random();

var sangle = Math.random()*angle;

for(var i=0;i


51/123

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

?


52/123

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

http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopcoinflip.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopcoinflip.html


53/123

opening screen


54/123

after mouse click


55/123

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 1parameter

Does require browser specific code to getmouse coordinates. (Sigh.) use technique of checking for presence of attribute


56/123

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.


57/123

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;


58/123

functions


canvas1 =document.getElementById('canvas');

canvas1.addEventListener('click',flip,false);

ctx.font = "italic 20px Accent";

ctx.fillStyle = "#dd00ff";


ctx.fillText("Click on canvas to flip acoin.",10,20);

}

function flip(ev) {


59/123

p( ) {

var mx;

var my;

ctx.clearRect(0,0,600,400);

if ( ev.layerX || ev.layerX == 0) { // Firefoxmx= 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.fillText("Click on canvas to flip acoin.",10,20); }


60/123

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


61/123

Background on

audio & video

This is native support (no need for plugins), nodependence 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 letbrowser

choose (though order does seem to be important).

Audio & video elements


62/123

Audio & video elements


63/123

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.


64/123

Acquire video

Make your own.

Find on-line. Site http://file2hd.com/ lets

you specify a URL and choose from the

videos to download.

Respect intellectual property!!!

Respect personal privacy (of friends & family,

etc.)!!!
http://file2hd.com/http://file2hd.com/


65/123

Produce all formats

Produce formats for all browsers:

http://www.mirovideoconverter.com/

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
http://www.mirovideoconverter.com/http://www.mirovideoconverter.com/http://www.mirovideoconverter.com/http://www.mirovideoconverter.com/


66/123

Next: Video

Put video element in your favorite sites or

something else or ???

Test using Firefox, Chrome and Safari.

PATIENCE!!


67/123

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 toput in code to wait until video all

downloaded.


68/123

Strategy

Use setInterval to invoke [my] drawscene

function

re-position video.

Check against [virtual] walls. Apply angle of incidenceequal 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 endedevent.


69/123

Function table

init Called by action of onLoad in

restart addEventListener ininit

drawscene setInterval in init. Thisis different in two versions

moveandcheck Called in drawscene


70/123

Bouncing video rectangle

canvas and video distinct elements

http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce1.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce1.html


71/123

Video is in motion


72/123

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;}


73/123

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;


74/123

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);

}


75/123

function restart() {

v.currentTime=0;

v.play();

}

function drawscene(){


76/123


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,boxheight); //box

}

function moveandcheck() {var nballx = ballx + ballvx;


77/123

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; }


78/123

Your browser does not accept the video tag.

This browser doesn't support the HTML5canvas element.


79/123

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


Vid i i i
http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.html


80/123

Video is in motion
http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.html


81/123

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(){
http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.html


82/123

ctx =document.getElementById('canvas').getContext('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); }

f ti t t() {
http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.html


83/123

function restart() {

v.currentTime=0;

v.play();

}

http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.html


84/123

(){

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,maskrad,0,Math.PI*2,true);

ctx.fill(); //draw white mask on top of video, lettingjust circle show

ctx.strokeStyle ="rgb(200,0,50)";

ctx.strokeRect(boxx,boxy,boxwidth,boxheight); //box

}

function moveandcheck() {var nballx = ballx + ballvx;
http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.html


85/123

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; }
http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.html


86/123

Your browser does not accept the video tag.

This browser doesn't support the HTML5 canvaselement.

N t M
http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.html


87/123

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 locationsor the last marker.


need to give permission to Share Location Works in Chrome and Firefox. Does not work in

Safari for Windows.

O i
http://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/videobounce3.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/geolocationdistance2.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/geolocationdistance2.html


88/123

Opening screen

B i


89/123

Brings up .

Aft li k


90/123

After click on map

Aft h CUNY


91/123

After choose CUNY

Mapping


92/123

Mapping

Google Maps API (and other applications)defines positions using special latitude/longitude

data object

Access to Google Map is created for a place inthe HTML document, using specified map

options

HTML has a specification for doing geolocation.

navigator.geolocation produces latitude and longitudevalues

How to get positions?


93/123

How to get positions?

Google Maps get to a map

Browser location

javascript:void(prompt('',gApplication.getMap().getCenter()));

OR Click on green beaker and enable the drop latlng

marker right click then normal click

My program


94/123

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


95/123

Basics if (navigator.geolocation) checks if

this object exists. Does NOT cause any errors.

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition

(handler,problemhandler);

}

handler when things go okay.problemhandler when there are errors,including user deciding not to share location.

Create/Access


96/123

Google Maps

map = newgoogle.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


97/123

style, external script

header {font-family:Georgia,"TimesNew Roman",serif;

font-size:20px;

display:block;}

init() code


98/123

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 arenot supported by your browser";

document.getElementById("place").style.color= "#FF0000";

} } }


99/123

function handler(position) {

var mylat =

position.coords.latitude;var mylong =

position.coords.longitude;

makemap(mylat,mylong);}

error handlingfunction problemhandler(prob) {


100/123

function problemhandler(prob) {

switch(prob.code) {

case 1:

document.getElementById("place").innerHTML= "User declined to share the locationinformation.";

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


101/123

variablesvar listener;

var map;

var markersArray =[];

var blatlng;

var myOptions;var locations = [

[35.1494444,-90.0488889,"Memphis, TN"], [41.04796,-

73.70539,"Purchase College/SUNY"],[41.878928, -87.641926,"IIT"]

];

create/access map


102/123

create/access mapfunction makemap(mylat, mylong) {

blatlng = newgoogle.maps.LatLng(mylat,mylong);

myOptions = {

zoom: 14,

center: blatlng,

mapTypeId:google.maps.MapTypeId.ROADMAP};

map = newgoogle.maps.Map(document.getElementById("place"), myOptions);

listener =google.maps.event.addListener(map,'click', function(event) {

checkit(event.latLng);}); }

response to click on map


103/123

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 recentmarker is "+String(distance) +" miles."; }

distance function


104/123

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


105/123

using radio buttons

function changebase() {for(var i=0;i


106/123

ycurrent geolocation

Change base location:

Memphis

PurchaseCollege

IllinoisInstitute of Technology

Variation


107/123

Variation

Geolocation returns accuracy and, maybe,other information, including altitude.

These applications mark the center with a

red x and display other information http://faculty.purchase.edu/jeanine.meyer/html5w

http://faculty.purchase.edu/jeanine.meyer/html5w

Note: accuracy is given in meters in both cases

Critical code
http://faculty.purchase.edu/jeanine.meyer/html5workshop/geolocation.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/geolocationkm.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/geolocationkm.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/geolocation.html


108/123

Critical code

Uses custom image for markervar xmarker = "x1.png";

marker = new google.maps.Marker({position: blatlng,

title: "center",

icon: xmarker,map: map });

getCurrentPosition3 d t t tC tP iti ll


109/123

3rd parameter to getCurrentPosition callpositionopts = {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:


110/123

persistent storage

Normal situation: no changes to client computer beyonddownloaded files. cookies invented (with a pleasing name) to be files

associated with each browser to be used only by sameserver site.

convenience: IDs and passwords, preferences, etc. behavioral marketing!

Early HTML supported cookies. localStorage is a newvariation.

CAUTION: Firefox requires the program to run on a

server! Chrome allows running locally. http://faculty.purchase.edu/jeanine.meyer/html5work

Opening
http://faculty.purchase.edu/jeanine.meyer/html5workshop/geolocationdistance4.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5workshop/geolocationdistance4.html


111/123

(after permission)

New base


112/123

New base

Objective: add to maps app


113/123

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


114/123

Strategy

Three buttons, invoking store(), retrieve(),and changebasetomarker()

Use try { } catch(e) { } . The

code in try will NOT trigger an error, but ifthere is one, will go to catch.

Also use typeof(localStorage) to

test if this is defined.


115/123

Store

base.

Restore

last base.

Change base location to last marker.

function store() {

if (typeof(localStorage) == "undefined") {


116/123

if (typeof(localStorage) undefined ) {

alert("Browser does not recognize HTMLlocal 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 ");


117/123

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


118/123

changes base to marker

function changebasetomarker() {

if (lastmarker!="undefined") {

makemap(lastmarker.lat(),lastma

rker.lng());

basename = "marker";

}

}

Comments


119/123

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


120/123

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

http://www.friendsofed.com/book.html?isbn=9781430233831

Applications

(HTML5 f t )
http://www.friendsofed.com/book.html?isbn=9781430233831http://www.friendsofed.com/book.html?isbn=9781430233831http://www.friendsofed.com/book.html?isbn=9781430233831http://www.friendsofed.com/book.html?isbn=9781430233831http://www.friendsofed.com/book.html?isbn=9781430233831


121/123

(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 f t )


122/123

(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


123/123

Conclusion

Please email with comments on thistutorial and HTML5 for

professional use

educational use

Thank you

jeanine meyer@purchase edu

Documents

HTML 5 Workshop