CMPE 280 Web UI Design and Development February

CMPE 280 Web UI Design and Development February 18 Class Meeting Department of Computer Engineering San Jose State University Spring 2020 Instructor: Ron Mak www. cs. sjsu. edu/~mak 1

Rectangle Operations o stroke. Rect(x, y, w, h) n n o fill. Rect(x, y, w, h) n n o Draw the outline of a rectangle with the upper left corner at position x, y and width w and height h. Use the current stroke. Style and line. Width. Draw a filled-in rectangle. Fill with the current fill. Style. clear. Rect(x, y, w, h) n Erase a rectangle by filling in with the current background color. Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 2

Rectangle Operations, cont’d <canvas id = "canvas" height = "200" width = "200" > <p>Canvas not supported</p> </canvas> canvas/rectangles. html function draw() { var canvas = document. get. Element. By. Id("canvas"); var con = canvas. get. Context("2 d"); con. fill. Style = "blue"; con. stroke. Style = "black"; con. line. Width = "5"; con. stroke. Rect( 0, 0, 200); con. fill. Rect (10, 180, 80); con. clear. Rect ( 0, 50, 90, 70); } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 3

Drawing Text o fill. Text(string, x, y) Display the characters of string at offset x and baseline at y. o stroke. Text(string, x, y) Display the outline of the characters of string. <canvas id = "canvas" height = "200" width = "280" > <p>Canvas not supported</p> </canvas> Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 4

Drawing Text, cont’d canvas/text. html function draw() { var canvas = document. get. Element. By. Id("canvas"); var con = canvas. get. Context("2 d"); con. stroke. Style = "black"; con. stroke. Rect(0, 0, 280, 200); con. font = "40 pt sans-serif"; con. fill. Style = "red"; con. fill. Text ("CMPE 280", 5, 75); con. stroke. Text("CMPE 280", 5, 150); } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 5

Shadows o Add a shadow to any object you draw on the canvas. o Canvas shadow attributes: n n n shadow. Offset. X, shadow. Offset. Y How much to move the shadow along the x and y axes. shadow. Color Default is black. shadow. Blur 0: crisp and sharp 5: softer and lighter Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 6

Shadows, cont’d function draw() canvas/shadow. html { var canvas = document. get. Element. By. Id("canvas"); var con = canvas. get. Context("2 d"); con. stroke. Style = "black"; con. stroke. Rect(0, 0, 200, 100); con. shadow. Offset. X = 3; con. shadow. Offset. Y = 3; con. shadow. Color = "gray"; con. shadow. Blur = 5; con. font = "40 pt sans-serif"; con. fill. Style = "red"; con. fill. Text("CMPE 280", 5, 65); } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 7

Paths o A path records “pen motion”. function draw() canvas/path. html {. . . con. stroke. Style = "red"; con. fill. Style = "green"; con. line. Width = "10"; con. begin. Path(); con. move. To(25, 25); con. line. To(150, 150); con. line. To(25, 100); con. close. Path(); con. stroke(); con. fill(); Computer Engineering Dept. Spring 2020: February 18 } CMPE 280: Web UI Design and Development © R. Mak 8

Line Attributes o o stroke. Style line. Width n o line. Join n o in pixels miter: sharp corners round: rounded corners bevel: squared-off corners line. Cap n n n round: rounded edges butt: squared-off edges cut off exactly at line width square: like butt but with a small added length Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 9

Line Attributes, cont’d o Line joins: con. line. Join = "round" con. stroke. Style = "red"; con. begin. Path(); con. move. To(20, 50); con. line. To(30, 20); con. line. To(40, 50); con. stroke(); con. close. Path(); con. line. Join = "miter"; con. stroke. Style = "green" con. begin. Path(); con. move. To(100, 50); con. line. To(110, 20); con. line. To(120, 50); con. stroke(); con. close. Path(); canvas/lines. html con. line. Join = "bevel"; con. stroke. Style = "blue"; con. begin. Path(); con. move. To(60, 50); con. line. To(70, 20); con. line. To(80, 50); con. stroke(); con. close. Path(); Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 10

Line Attributes, cont’d o Line caps: con. line. Cap = "round"; con. stroke. Style = "red" con. begin. Path(); con. move. To(20, 100); con. line. To(180, 100); con. stroke(); con. close. Path(); con. line. Cap = "square"; con. stroke. Style = "green" con. begin. Path(); con. move. To(20, 140); con. line. To(180, 140); con. stroke(); con. close. Path(); canvas/lines. html con. line. Cap = "butt"; con. stroke. Style = "blue" con. begin. Path(); con. move. To(20, 120); con. line. To(180, 120); con. stroke(); con. close. Path(); Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 11

Arcs and Circles radius starting and ending angles in radians arc(70, 30, 50, 0, Math. PI, false) center position Compass East South West Radians 0 Math. PI/2 Math. PI North 3*Math. PI/2 Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak drawing direction true: counter-clockwise false: clockwise 12

Arcs and Circles, cont’d // Stroked closed half-circle con. stroke. Style = "green"; con. line. Width = "5"; con. begin. Path(); con. arc(70, 30, 50, 0, Math. PI, false); con. close. Path(); con. stroke(); // Filled full circle con. fill. Style = "rgba(255, 0, 0, 0. 5)"; con. begin. Path(); con. arc(70, 100, 50, 0, 2*Math. PI, true); con. close. Path(); con. fill(); // Stroked half arc con. stroke. Style = "blue"; con. begin. Path(); con. arc(130, 120, 50, Math. PI/2, 3*Math. PI/2, true); con. stroke(); Computer Engineering Dept. CMPE 280: Web UI Design and Development canvas/arcs. html con. close. Path(); Spring 2020: February 18 © R. Mak 13

Quadratic Curve o o Curve with starting and ending points. A control point affects the shape of the curve. quadratic. Curve. To(100, 190, 190) control point position Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak ending point position 14

Quadratic Curve, cont’d con. stroke. Style = "green"; con. begin. Path(); con. move. To(10, 190); con. quadratic. Curve. To(100, 190, 190); con. stroke(); con. close. Path(); // Blue dots: start and end points. draw. Dot(10, 190, "blue"); draw. Dot(190, "blue"); // Red dot: control point. draw. Dot(100, 10, "red"); canvas/quadratic. html function draw. Dot(x, y, color) { con. fill. Style = color; con. begin. Path(); con. arc(x, y, 10, 0, 2*Math. PI, true); con. fill(); con. close. Path(); Computer Engineering Dept. CMPE 280: Web UI Design and Development Spring 2020: February 18 © R. Mak } 15

Bézier Curve o Similar to the quadratic curve, but with two control points. bezier. Curve. To(100, 190, 190) control point #1 position Computer Engineering Dept. Spring 2020: February 18 control point #2 position CMPE 280: Web UI Design and Development © R. Mak ending point position 16

Bézier Curve, cont’d canvas/bezier. html con. stroke. Style = "green"; con. begin. Path(); con. move. To(10, 10); con. bezier. Curve. To(100, 190, 190); con. stroke(); con. close. Path(); // Blue dots: start and end points. draw. Dot(10, "blue"); draw. Dot(190, "blue"); // Red dots: control points. draw. Dot(100, 10, "red"); draw. Dot(100, 190, "red"); Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 17

Drawing an Image o Draw the entire image: destination position draw. Image(image, 10, 180, 135) destination width and height o Draw part of the image: image upper left corner position destination position draw. Image(image, 150, 70, 190, 120, 10, 180, 110) image width and height Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak destination width and height 18

Drawing an Image, cont’d var image = new Image(); canvas/images. html image. src = "images/Ron. Cats. jpg"; . . . con. draw. Image(image, 10, 180, 135); . . . con. draw. Image(image, 150, 70, 190, 120, 10, 180, 110); Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 19

Altering Pixels o An image is displayed in a canvas as an array of pixels. o Each pixel takes up four elements of the array, R, G, B, and A, each value can be 0 – 255. o Convert an image to image. Data to get the array of RGBA values. o You can then alter each value. Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 20

Altering Pixels, cont’d var image. Data = con. get. Image. Data(10, 180, 135); Get the image data from the canvas. for (var row = 0; row < 135; row++) { for (var col = 0; col < 180; col++) { var index = 4*(col + row*image. Data. width); var var r g b a = = g = r; b = r; image. Data. data[index]; image. Data. data[index+1]; image. Data. data[index+2]; image. Data. data[index+3]; canvas/pixels. html Alter each pixel. image. Data. data[index] image. Data. data[index+1] image. Data. data[index+2] image. Data. data[index+3] Separate each pixel into R, G, B, and A = = r; g; b; a; What is the result? Set the altered pixel back into the image data. } } Computer Engineering Dept. Spring 2020: February 18 Put the altered image data back into the canvas. CMPE 280: Web UI Design and Development © R. Mak con. put. Image. Data(image. Data, 10); 21

Altering Pixels, cont’d Original: Computer Engineering Dept. Spring 2020: February 18 Altered: CMPE 280: Web UI Design and Development © R. Mak 22

Java. Script Animation o Animate objects on the HTML canvas. o Use an animation loop to perform transformations: n n n translations: move objects rotations: rotate objects scaling: grow and shrink objects Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 23

Temporary Coordinate System o Transformations are actually performed on the coordinate system. o Draw the object in the transformed coordinate system. o Common sequence: 1. 2. 3. Save the current coordinate system and create a temporary coordinate system. Draw the object using the temporary coordinates. Restore the original coordinate system. Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 24

Scaling o Grow or shrink an object by scaling the axes of the coordinate system. n Apply a multiplication factor to each axis. con 1. draw. Image(image, CANVAS_X, CANVAS_Y, IMAGE_W, IMAGE_H); con 2. save(); Save the current coordinate system and begin a temporary system. con 2. scale(1. 2, 0. 8); con 2. draw. Image(image, CANVAS_X, CANVAS_Y, IMAGE_W, IMAGE_H); con 2. restore(); Restore the saved coordinate system. animation/transform. html Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 25

Scaling, cont’d Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 26

Rotation o Rotation is clockwise about the canvas origin. n Specify the rotation amount in radians. animation/transform. html con 3. save(); con 3. rotate(Math. PI/8); con 3. draw. Image(image, CANVAS_X, CANVAS_Y, IMAGE_W, IMAGE_H); con 3. restore(); Rotation about the upper left corner. How to rotate about the image center? Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 27

Translation o To rotate around the center of an object, first translate the canvas origin to the object center. con 4. save(); con 4. translate(100, 100); con 4. rotate(Math. PI/8); con 4. draw. Image(image, -IMAGE_W/2, -IMAGE_H/2, IMAGE_W, IMAGE_H); con 4. restore(); animation/transform. html Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 28

Animation Loop o To animate, repeatedly call a drawing function. n o Set the frame rate. n o Change the image slightly for each drawing. Games typically run between 10 and 30 frames per second. Call set. Interval(function, delay) n n function: the drawing function to call repeatedly delay: the number of milliseconds between calls o o 100 = 10 frames/second 50 = 20 frames/second Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 29

Animated Rotation <body onload = "init()"> <h 1>Rotations</h 1> animation/rotate. html <canvas id = "canvas" height = "200" width = "200"> <p>Canvas not supported!</p> </canvas> </body> Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 30

Animated Rotation, cont’d const const CANVAS_X CANVAS_Y CANVAS_W CANVAS_H IMAGE_W IMAGE_H = = = 50; 200; 100; animation/rotate. html var con; var image; var angle = 0; function init() { con = document. get. Element. By. Id("canvas"). get. Context("2 d"); image = new Image(); image. src = "images/bristol. png"; set. Interval(draw, 50); } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 31

Animated Rotation, cont’d animation/rotate. html function draw() { First clear con. stroke. Style = "black"; the canvas con. fill. Style = "white"; con. fill. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); angle += 0. 25; if (angle > 2*Math. PI) angle = 0; con. save(); con. translate(100, 100); Translate, then rotate. con. rotate(angle); con. draw. Image(image, -IMAGE_W/2, -IMAGE_H/2, IMAGE_W, IMAGE_H); con. restore(); } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 32

Moving Objects o To animate moving an object, draw it in a slightly different location during each call of the drawing function. o Remember to clear the canvas first, otherwise the object is “smeared” across the canvas. Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 33

Moving Objects, cont’d animation/bounce. html function draw() { Clear the con. fill. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); canvas. con. draw. Image(image, x, y, IMAGE_W, IMAGE_H); x += dx; y += dy; // Bounce off a wall if ((x < 0) || (x > RIGHT)) dx = -dx; if ((y < 0) || (y > BOTTOM)) dy = -dy; } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 34

Keyboard Animation Control o o You can use the keyboard to control animation. Set the event handler for the document’s onkeydown event. const const KEY_SPACE KEY_LEFT KEY_UP KEY_RIGHT KEY_DOWN = = = 32; 37; 38; 39; 40; animation/arrowkeys. html . . . document. onkeydown = update. Keys; Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 35

Keyboard Animation Control, cont’d function update. Keys(event) { key = event. key. Code; switch(key) { case KEY_LEFT: case KEY_RIGHT: case KEY_UP: case KEY_DOWN: case KEY_SPACE: default: } dx dx dy dy dx animation/arrowkeys. html -= 5; += 5; = dy = 0; break; break; } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 36

Keyboard Animation Control, cont’d animation/arrowkeys. html function draw() { con. fill. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); con. draw. Image(image, x, y, IMAGE_W, IMAGE_H); x += dx; y += dy; // Wrap if else if around (x < 0) (x > CANVAS_W) (y < 0) (y > CANVAS_H) x x y y = = CANVAS_W; 0; CANVAS_H; 0; } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak Demo 37

Mouse Events o o o onclick oncontextmenu ondblclick onmouseup onmousedown onmouseenter Computer Engineering Dept. Spring 2020: February 18 o o onmouseleave onmousemove onmouseover onmouseout CMPE 280: Web UI Design and Development © R. Mak Demo 38

Mouse Animation Control animation/mouse. html function init() { var canvas = document. get. Element. By. Id("canvas"); con = canvas. get. Context("2 d"); con. fill. Style = "white"; con. stroke. Style = "lightgray"; con. line. Width = 1; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); canvas. onmouseenter = mouse. Enter; canvas. onmouseleave = mouse. Leave; canvas. onmousemove = mouse. Move; Assign event handlers. } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 39

Mouse Animation Control, cont’d function mouse. Enter(event) animation/mouse. html { con. line. Width = 3; con. stroke. Style = "white"; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Style = "red"; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); } function mouse. Leave(event) { con. line. Width = 4; con. stroke. Style = "white"; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Style = "lightgray"; con. line. Width = 1; con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 40

Mouse Animation Control, cont’d function mouse. Move(event) animation/mouse. html { var mouse. X = event. page. X - CANVAS_LEFT; Map page coordinates var mouse. Y = event. page. Y - CANVAS_TOP; to canvas coordinates. con. line. Width = 3; con. fill. Style = "white"; con. fill. Rect(0, 0, CANVAS_W, CANVAS_H); con. stroke. Rect(0, 0, CANVAS_W, CANVAS_H); con. line. Width = 5; con. begin. Path(); con. move. To(CANVAS_W/2, CANVAS_H/2); con. line. To(mouse. X, mouse. Y); con. close. Path(); con. stroke(); animation/mouse. html } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 41

Mouse Animation Control, cont’d <style type = "text/css"> #canvas { position: absolute; left: 50 px; top: 100 px; } </style> const CANVAS_LEFT = 50; const CANVAS_TOP = 100; animation/mouse. html <canvas id = "canvas" height = "200" width = "200"> <p>Canvas not supported!</p> </canvas> Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 42

Animated Menus o Done entirely with CSS and Java. Script. o No canvas required! Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak Demo 43

Animated Menus: Example 1 <body> menus/menu 1. html <h 1>Shakespeare's Plays</h 1> <div> <a href="menu 1. html" class="menu. Link">Comedies</a> <ul class="menu" id="menu 1"> <li><a href="pg 1. html">All's Well That Ends Well</a></li> <li><a href="pg 2. html">As You Like It</a></li> <li><a href="pg 3. html">Love's Labour's Lost</a></li> <li><a href="pg 4. html">The Comedy of Errors</a></li> </ul> </div> <a href="menu 2. html" class="menu. Link">Tragedies</a> <ul class="menu" id="menu 2"> <li><a href="pg 5. html">Anthony & Cleopatra</a></li> <li><a href="pg 6. html">Hamlet</a></li> <li><a href="pg 7. html">Romeo & Juliet</a></li> </ul> </div> <a href="menu 3. html" class="menu. Link">Histories</a> <ul class="menu" id="menu 3"> <li><a href="pg 8. html">Henry IV, Part 1</a></li> <li><a href="pg 9. html">Henry IV, Part 2</a></li> </ul> </div> Computer Engineering Dept. CMPE 280: Web UI Design and Development </body> Spring 2020: February 18 © R. Mak 44

Animated Menus: Example 1, cont’d window. onload = init; menus/menu 1. js function init() { var all. Links = document. get. Elements. By. Tag. Name("a"); for (var i = 0; i < all. Links. length; i++) { if (all. Links[i]. class. Name == "menu. Link") { all. Links[i]. onclick = toggle. Menu; } } } Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 45

Animated Menus: Example 1, cont’d menus/menu 1. js function toggle. Menu(event) { var start. Name = this. href. last. Index. Of("/") + 1; var stop. Name = this. href. last. Index. Of(". "); var this. Menu. Name = this. href. substring(start. Name, stop. Name); var this. Menu. Style = document. get. Element. By. Id(this. Menu. Name). style; } if (this. Menu. Style. display == "block") { this. Menu. Style. display = "none"; Toggle between } invisible and visible. else { this. Menu. Style. display = "block"; } ul. menu { event. prevent. Default(); display: none; Initially invisible. list-style-type: none; margin-top: 5 px; } menus/menu 1. css Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 46

Animated Menus: Example 2 o We can make the animated menus fancier with a better CSS file and better Java. Script. o Anonymous functions to toggle visibility: menu. Parent. onmouseout = function() { this. Menu. Style. display = "none"; }; menu. Parent. onmouseover = function() { this. Menu. Style. display = "block"; }; menus/menu 2. js Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak Demo 47

Assignment #3 o Further develop your prototype code. n n n User authentication using sessions and cookies. Server-side page generation. Input form validation with HTML, CSS, and/or Java. Script. Improved user interactivity with client-side Java. Script. HTML 5 canvas drawing and animation. o o Use your imagination! This assignment is primarily about the client side. n Make any necessary changes to your server-side code to support your client-side components. Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 48

Assignment #3, cont’d o Brief (2 - or 3 -page) report: n n n o Describe what input validation and interactivity features you added on the client side. Describe what the server side does to support the client side. Include any necessary instructions to build and run your code. Submit your zip file to Canvas. n Assignment #3 Do not include the node_modules directory. n Due Wednesday, February 26 at 11: 59 PM. n Computer Engineering Dept. Spring 2020: February 18 CMPE 280: Web UI Design and Development © R. Mak 49