Post on 02-Apr-2015
2004 Prentice Hall, Inc. All rights reserved.
1
Chapter 30 - Dynamic HTML: Structured Graphics ActiveX Control
Outline30.1 Introduction30.2 Shape Primitives30.3 Moving Shapes with Translate30.4 Rotation30.5 Mouse Events and External Source Files30.6 Scaling30.7 Web Resources
2004 Prentice Hall, Inc. All rights reserved.
2
Objectives
• In this chapter, you will learn:– To be able to use the Structured Graphics Control to create
various shapes.
– To understand the Structured Graphics Control methods for modifying lines and borders.
– To understand the Structured Graphics Control methods for modifying colors and fill styles.
– To be able to enable event capturing for the Structured Graphics Control.
– To be able to import external lists of methods into the Structured Graphics Control.
– To be able to scale, rotate and translate shapes in the Structured Graphics Control.
2004 Prentice Hall, Inc. All rights reserved.
3
30.1 Introduction
• Structured Graphics ActiveX Control– object element
– Visual presentation via DirectAnimation• Subset of DirectX software
2004 Prentice Hall, Inc. All rights reserved.
4
30.2 Shape Primitives
• Commands passed through param tags– Assign each param a line number
• "Line001"– SetLineColor
• RGB triplet
• Sets color of lines and borders of shapes
– SetLineStyle• Line style and width
– Solid, invisible or dashed
– SetFillColor• RGB triplet
• Foreground color to fill shapes
2004 Prentice Hall, Inc. All rights reserved.
5
30.2 Shape Primitives
• Commands passed through param tags, cont.– SetFillStyle
Number Fill Style 0 None 1 Solid fill 2 None 3 Horizontal lines 4 Vertical lines 5 Diagonal lines 6 Diagonal lines 7 Cross-hatch 8 Diagonal cross-hatch 9 Horizontal Gradient 10 Vertical Gradient 11 Circular Gradient 12 Line Gradient 13 Rectangular Gradient 14 Shaped Gradient Fig. 30.2 Fill styles available for the SetFillStyle method.
2004 Prentice Hall, Inc. All rights reserved.
6
30.2 Shape Primitives
• Commands passed through param tags, cont.– Oval
• x- and y-coordinates of bounding box
• Coordinates measured from center of control
• Height, width, rotation
– Arc• x- and y-coordinates of bounding box
• Height, width of box it encloses
• Starting angle (degrees)
• Size of arc
• Rotation
– Pie• Similar to Arc, but filled
2004 Prentice Hall, Inc. All rights reserved.
7
30.2 Shape Primitives
• Commands passed through param tags, cont.– Polygon
• Number of vertices
• x- and y-coordinates of each vertex
– Rect• x- and y-coordinates of bounding box
• Height, width, rotation
– RoundRect• x- and y-coordinates of bounding box
• Height, width of box
• Height, width of arc
• Rotation
2004 Prentice Hall, Inc. All rights reserved.
8
30.2 Shape Primitives
• Commands passed through param tags, cont.– SetFont
• Font
• Height
• Boldness
• Italic, underline, strikethrough
– Text• Text
• x- and y-coordinates
• Rotation
– PolyLine• Number of vertices
• x- and y-coordinates of each vertex
2004 Prentice Hall, Inc.All rights reserved.
Outline9
shapes.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig 30.1: shapes.html -->
6 <!-- Creating simple shapes -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Structured Graphics - Shapes</title>
11 </head>
12
13 <body>
14
15 <object id = "shapes" style = "background-color: #CCCCFF;
16 width: 500; height: 400"
17 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
18
19 <param name = "Line0001"
20 value = "SetLineColor( 0, 0, 0 )" />
21 <param name = "Line0002"
22 value = "SetLineStyle( 1, 1 )" />
23 <param name = "Line0003"
24 value = "SetFillColor( 0, 255, 255 )" />
Setting the line color to 0, 0, 0 (black)
Creating a thin, solid line
Inserting the Structured Graphics Control
Setting the fill color to cyan
2004 Prentice Hall, Inc.All rights reserved.
Outline10
shapes.html(2 of 3)
25 <param name = "Line0004"
26 value = "SetFillStyle( 1 )" />
27
28 <param name = "Line0005"
29 value = "Oval( 0, -175, 25, 50, 45 )" />
30 <param name = "Line0006"
31 value = "Arc( -200, -125, 100, 100, 45, 135, 0 )" />
32 <param name = "Line0007"
33 value = "Pie( 100, -100, 150, 150, 90, 120, 0 )" />
34 <param name = "Line0008"
35 value = "Polygon(5, 0, 0, 10, 20, 0, -30,
36 -10, -10, -10, 25)" />
37 <param name = "Line0009"
38 value = "Rect( -185, 0, 60, 30, 25 )" />
39 <param name = "Line0010"
40 value = "RoundRect( 200, 100, 35, 60, 10, 10, 25 )" />
Setting the fill style to a solid colorDrawing an oval with the previously specified settings
Drawing an arc with the same settings
Drawing a pie (filled arc)
Drawing a polygon with 5 vertices
Drawing a filled rectangle
Drawing a filled rectangle with rounded corners
2004 Prentice Hall, Inc.All rights reserved.
Outline11
shapes.html(3 of 3)
41
42 <param name = "Line0011"
43 value = "SetFont( 'Arial', 65, 400, 0, 0, 0 )" />
44 <param name = "Line0012"
45 value = "Text( 'Shapes', -200, 200 , -35 )" />
46
47 <param name = "Line0013"
48 value = "SetLineStyle( 2,1 )" />
49 <param name = "Line0014"
50 value = "PolyLine( 5, 100, 0, 120, 175, -150, -50,
51 -75, -75, 75, -75)" />
52 </object>
53
54 </body>
55 </html>
Setting the font to Arial, bold, size 65
Printing the text “Shapes”
Setting the line style to dashed
Drawing a line with 5 vertices
2004 Prentice Hall, Inc. All rights reserved.
12
30.2 Shape PrimitivesFig. 30.1 Structured Graphics ActiveX Control creates shapes.
2004 Prentice Hall, Inc. All rights reserved.
13
30.3 Moving Shapes With Translate
• Translate– Move and transform shapes
• New params– SetTextureFill
• x- and y-coordinates inside shape
• Location of texture file
• Stretch or repeat
– Translate• Relative distance to move shape along x-, y- and z-axes
2004 Prentice Hall, Inc.All rights reserved.
Outline14
bounce.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 30.3: bounce.html -->
6 <!-- Textures and the Translate method -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Structured Graphics - Translate</title>
11
12 <script type = "text/javascript">
13 <!--
14 var x = 15;
15 var y = 15;
16 var upDown = -1;
17 var leftRight = 1;
18
19 function start()
20 {
21 window.setInterval( "run()", 50 );
22 }
23
Variables to track ball’s position and movement
2004 Prentice Hall, Inc.All rights reserved.
Outline15
bounce.html(2 of 3)
24 function run()
25 {
26 // if the ball hits the top or bottom side...
27 if ( y == -100 || y == 50 )
28 upDown *= -1;
29
30 // if the ball hits the left or right side...
31 if ( x == -150 || x == 100 )
32 leftRight *= -1;
33
34 // Move the ball and increment our counters
35 ball.Translate( leftRight * 5, upDown * 5, 0 );
36 y += upDown * 5;
37 x += leftRight * 5;
38 }
39 // -->
40 </script>
41 </head>
42
43 <body onload = "start()">
44
Move the ball 5 units in the proper direction
Change direction when the ball hits a wall
2004 Prentice Hall, Inc.All rights reserved.
Outline16
bounce.html(3 of 3)
45 <object id = "ball" style = "background-color: ffffff;
46 width: 300; height: 200; border-style: groove;
47 position: absolute;"
48 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
49
50 <param name = "Line0001" value = "SetLineStyle( 0 )" />
51 <param name = "Line0002"
52 value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" />
53 <param name = "Line0003"
54 value = "Oval( 15, 15, 50, 50 )" />
55 </object>
56
57 </body>
58 </html>
Fill the ball with texture from file ball.gif
2004 Prentice Hall, Inc. All rights reserved.
17
30.3 Moving Shapes With TranslateFig. 30.3 Methods SetTextureFill and Translate.
2004 Prentice Hall, Inc. All rights reserved.
18
30.4 Rotation
• Rotate– Rotate shapes in three-dimensional space
• New params– Rotate
• How far to rotate around x-, y- and z-axes
– SetFillColor• Optional second parameter is background color
• Use fill styles 9, 11, 13 for gradients
2004 Prentice Hall, Inc.All rights reserved.
Outline19
gradient.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 30.4: gradient.html -->
6 <!-- Gradients and rotation -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Structured Graphics - Gradients</title>
11
12 <script type = "text/javascript">
13 <!--
14 var speed = 5;
15 var counter = 180;
16
17 function start()
18 {
19 window.setInterval( "run()", 100 );
20 }
21
2004 Prentice Hall, Inc.All rights reserved.
Outline20
gradient.html(2 of 3)
22 function run()
23 {
24 counter += speed;
25
26 // accelerate half the time...
27 if ( ( counter % 360 ) > 180 )
28 speed *= ( 5 / 4 );
29
30 // decelerate the other half.
31 if ( ( counter % 360 ) < 180 )
32 speed /= ( 5 / 4 );
33
34 pies.Rotate( 0, 0, speed );
35 }
36 // -->
37 </script>
38
39 </head>
40
41 <body onload = "start()">
42
43 <object id = "pies" style = "background-color:blue;
44 width: 300; height: 200;"
45 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
46
Vary the speed of rotation
Rotate the pies
Declaring the pies
2004 Prentice Hall, Inc.All rights reserved.
Outline21
gradient.html(3 of 3)
47 <param name = "Line0001"
48 value = "SetFillColor( 255, 0, 0, 0, 0, 0 )" />
49 <param name = "Line0002"
50 value = "SetFillStyle( 13 )" />
51 <param name = "Line0003"
52 value = "Pie( -75, -75, 150, 150, 90, 120, 300 )" />
53
54 <param name = "Line0004"
55 value = "SetFillStyle( 9 )" />
56 <param name = "Line0005"
57 value = "Pie( -75, -75, 150, 150, 90, 120, 180 )" />
58
59 <param name = "Line0006"
60 value = "SetFillStyle( 11 )" />
61 <param name = "Line0007"
62 value = "Pie( -75, -75, 150, 150, 90, 120, 60 )" />
63 </object>
64
65 </body>
66 </html>
Set the fill color to red
Set the fill style to 3 different gradient types
2004 Prentice Hall, Inc. All rights reserved.
22
30.4 RotationFig. 30.4 Using gradients and Rotate.
2004 Prentice Hall, Inc. All rights reserved.
23
30.5 Mouse Events and External Source Files
• Mouse events– Set MouseEventsEnabled property to 1
• External source files– Set SourceURL property to location of file
– Make HTML easier to read/maintain
2004 Prentice Hall, Inc.All rights reserved.
Outline24
bounce2.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 30.5: bounce2.html -->
6 <!-- SourceURL and MouseEventsEnabled -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Structured Graphics - Shapes</title>
11
12 <script for = "ball" event = "onclick" type =
13 "text/javascript">
14 <!--
15 ball.SourceURL = "newoval.txt";
16 // -->
17 </script>
18
19 <script type = "text/javascript">
20 <!--
21 var x = 20;
22 var y = 20;
23 var upDown = -1;
24 var leftRight = 1;
25
Import code from newoval.txt
2004 Prentice Hall, Inc.All rights reserved.
Outline25
bounce2.html(2 of 3)
26 function start()
27 {
28 window.setInterval( "run()", 50 );
29 }
30
31 function run()
32 {
33 if ( y == -100 || y == 50 )
34 upDown *= -1;
35
36 if ( x == -150 || x == 100 )
37 leftRight *= -1;
38
39 ball.Translate( leftRight * 5, upDown * 5, 0 );
40 y += upDown * 5;
41 x += leftRight *5;
42 }
43 // -->
44 </script>
45 </head>
46
2004 Prentice Hall, Inc.All rights reserved.
Outline26
bounce2.html(3 of 3)
47 <body onload = "start()">
48
49 <object id = "ball"
50 style = "width: 300; height: 200; border-style: groove;
51 position: absolute; top: 10; left: 10;"
52 classid = "clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6">
53
54 <param name = "Line0001" value = "SetLineStyle(0)" />
55 <param name = "Line0002"
56 value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" />
57 <param name = "Line0003"
58 value = "Oval( 20, 20, 50, 50 )" />
59 <param name = "MouseEventsEnabled" value = "1" />
60 </object>
61
62 </body>
63 </html>
Enabling mouse events
2004 Prentice Hall, Inc.All rights reserved.
Outline27
newoval.txt(1 of 1)
1 SetLineStyle( 1, 3 )
2 SetFillStyle( 1 )
3 Oval( 20, 20, 50, 50, 0 )
4
5 SetLineStyle( 1, 1 )
6 PolyLine( 2, 45, 20, 45, 70, 0 )
7 PolyLine( 2, 45, 20, 45, 70, 90 )
8 PolyLine( 2, 45, 20, 45, 70, 45 )
9 PolyLine( 2, 45, 20, 45, 70, 135 )
10
11 SetFillColor( 0, 255, 0 )
12 Oval( 30, 30, 30, 30, 0 )
13 SetFillColor( 255 ,0, 0 )
14 Oval( 35, 35, 20, 20, 0 )
Code moved to a separate text file
2004 Prentice Hall, Inc. All rights reserved.
28
30.5 Mouse Events and External Source Files
Fig. 30.5 Using SourceURL and MouseEventsEnabled.
2004 Prentice Hall, Inc. All rights reserved.
29
30.6 Scaling
• Scale– Modifies size
– Retains shape and position – params are percentage to scale each dimension
• Greater than 1 grows, less than 1 shrinks
• position and z-index to place objects on page
2004 Prentice Hall, Inc.All rights reserved.
Outline30
scaling.html(1 of 4)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 30.7: scaling.html -->
6 <!-- Scaling a shape -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Structured Graphics - Scaling</title>
11
12 <script type = "text/javascript">
13 <!--
14 var speedX = 0;
15 var speedY = 0;
16 var speedZ = 0;
17 var scale = 1;
18
19 function start()
20 {
21 window.setInterval( "run()", 100 );
22 }
23
2004 Prentice Hall, Inc.All rights reserved.
Outline31
scaling.html(2 of 4)
24 function run()
25 {
26 drawing.Rotate( speedX, speedY, speedZ );
27 drawing.Scale( scale, scale, scale );
28 }
29 // -->
30 </script>
31
32 </head>
33
34 <body onload = "start()">
35
36 <div style = "position: absolute; top: 25; left: 220">
37 <input type = "button" value = "Rotate-X"
38 onclick = "speedX = ( speedX ? 0 : 5 )" /><br />
39 <input type = "button" value = "Rotate-Y"
40 onclick = "speedY = ( speedY ? 0 : 5 )" /><br />
41 <input type = "button" value = "Rotate-Z"
42 onclick = "speedZ = ( speedZ ? 0 : 5 )" /><br />
43 <br />
44 <input type = "button" value = "Scale Up"
45 onclick = "scale = ( scale * 10 / 9 )" /><br />
46 <input type = "button" value = "Scale Down"
47 onclick = "scale = ( scale * 9 / 10 )" />
48 </div>
Rotate and scale the drawing
Defining buttons to control scaling, speed and rotation of the foreground
2004 Prentice Hall, Inc.All rights reserved.
Outline32
scaling.html(3 of 4)
49
50 <object id = "drawing" style = " position: absolute;
51 z-index: 2; width: 200; height: 300;"
52 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
53
54 <param name = "Line0001" value = "SetFillColor( 0,0,0 )" />
55 <param name = "Line0002" value = "SetFillStyle( 0 )" />
56 <param name = "Line0003" value = "SetLineStyle( 1, 3 )" />
57
58 <param name = "Line0004"
59 value = "Oval( -25, -100, 50, 50, 0 )" />
60
61 <param name = "Line0005"
62 value = "PolyLine(2, 0, -50, 0, 50 )" />
63
64 <param name = "Line0006"
65 value = "PolyLine( 3, -30, -25, 0, -15, 30, -25 )" />
66
67 <param name = "Line0007"
68 value = "PolyLine( 3, -15, 90, 0, 50, 15, 90 )" />
69
70 <param name = "Line0008"
71 value = "SetFillColor ( 255, 0, 0 )" />
72 <param name = "Line0009"
73 value = "Oval( -15, -85, 7, 7, 0 )" />
Stack objects using z-index property
Defining the background shapes
2004 Prentice Hall, Inc.All rights reserved.
Outline33
scaling.html(4 of 4)
74 <param name = "Line0010"
75 value = "Oval( 5, -85, 7, 7, 0 )" />
76
77 <param name = "Line0011"
78 value = "SetLineStyle( 1, 2 )" />
79 <param name = "Line0012"
80 value = "SetLineColor( 255, 0, 0 )" />
81 <param name = "Line0013"
82 value = "SetFont( 'Courier', 25, 200, 0, 0, 0 )" />
83 <param name = "Line0014"
84 value = "Text( 'Hello', -35, -115 , 0 )" />
85 </object>
86
87 <object id = "background" style = " position:absolute;
88 z-index: 1; width: 200; height: 300;
89 background-color: none" classid =
90 "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
91
92 <param name = "Line0001"
93 value = "SetFillColor( 38, 250, 38 )" />
94 <param name = "Line0002"
95 value = "Oval( -75, -125, 150, 250, 0 )" />
96 </object>
97 </body>
98 </html>
2004 Prentice Hall, Inc. All rights reserved.
34
30.6 ScalingFig. 30.7 Rotating a shape in three dimensions and scaling up and down .