Scribd
Upload
2K views

DHTML Structured Graphics ActiveX Control

The document discusses using the Structured Graphics ActiveX control to create shapes. It describes how to set properties like line color and style, fill color and style. It then provides examples of drawing different shapes like ovals, arcs, polygons, and rectangles by passing parameters to the control.

Uploaded by

api-3760405
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
2K views

DHTML Structured Graphics ActiveX Control

The document discusses using the Structured Graphics ActiveX control to create shapes. It describes how to set properties like line color and style, fill color and style. It then provides examples of drawing different shapes like ovals, arcs, polygons, and rectangles by passing parameters to the control.

Uploaded by

api-3760405
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

1

Chapter 30 - Dynamic HTML:


Structured Graphics ActiveX Control
Outline
30.1 Introduction
30.2 Shape Primitives
30.3 Moving Shapes with Translate
30.4 Rotation
30.5 Mouse Events and External Source Files
30.6 Scaling
30.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.


1 <?xml version = "1.0"?> 9
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig 30.1: shapes.html --> shapes.html
6 <!-- Creating simple shapes --> (1 of 3)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
Inserting the Structured
10 <title>Structured Graphics -
Graphics Control
Shapes</title>
11 </head>
12
13 <body>
14 Setting the line color to 0, 0, 0
15 <object id = "shapes" style = "background-color: (black)
#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 )" /> Creating a thin, solid line
23 <param name = "Line0003"
24 value = "SetFillColor( 0, 255, 255 )" /> Setting the fill color to cyan

 2004 Prentice Hall, Inc.


All rights reserved.
25 <param name = "Line0004"
10
26 value = "SetFillStyle( 1 )" />
Outline
27
28 <param name = "Line0005"
Setting the fill style toan
Drawing a solid
oval color
with the
29 value = "Oval( 0, -175, 25, 50, 45 )" /> shapes.html
30 <param name = "Line0006" previously specified settings
(2 of 3)
31 value = "Arc( -200, -125, 100, 100, 45, 135, 0 )" />
Drawing an arc with the
32 <param name = "Line0007"
same settings
33
Drawing a pie
value = "Pie( 100, -100, 150, 150, 90, 120, 0 )" />
34 <param name = "Line0008"
(filled arc)
35
Drawing a polygon with 5
value = "Polygon(5, 0, 0, 10, 20, 0, -30,
36 -10, -10, -10, 25)" />
vertices
37 <param name = "Line0009"
38 value = "Rect( -185, 0, 60, 30, 25 )" /> Drawing a filled rectangle
39 <param name = "Line0010"
40 value = "RoundRect( 200, 100, 35, 60, 10, 10, 25 )" />
Drawing a filled
rectangle with
rounded corners

 2004 Prentice Hall, Inc.


All rights reserved.
41
11
42 <param name = "Line0011" Outline
Setting the font to
43 value = "SetFont( 'Arial', 65, 400, 0, 0, 0 )" />
44 <param name = "Line0012"
Arial, bold, size 65
45 value = "Text( 'Shapes', -200, 200 , -35 )" /> shapes.html
Printing the text “Shapes”
46 (3 of 3)
47 <param name = "Line0013"
48
Setting the line style to
value = "SetLineStyle( 2,1 )" />
49
dashed
<param name = "Line0014"
50 value = "PolyLine( 5, 100, 0, 120, 175, -150, -50, Drawing a line with 5 vertices
51 -75, -75, 75, -75)" />
52 </object>
53
54 </body>
55 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
12

30.2 Shape Primitives


Fig. 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.


1 <?xml version = "1.0"?> 14
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 30.3: bounce.html --> bounce.html
6 <!-- Textures and the Translate method --> (1 of 3)
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;
Variables to track ball’s
15 var y = 15;
position and movement
16 var upDown = -1;
17 var leftRight = 1;
18
19 function start()
20 {
21 window.setInterval( "run()", 50 );
22 }
23

 2004 Prentice Hall, Inc.


All rights reserved.
24 function run()
15
25
26
{
Outline
// if the ball hits the top or bottom side...
27 if ( y == -100 || y == 50 )
Change direction when
the ball hits a wall
28 upDown *= -1; bounce.html
29
(2 of 3)
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
Move the ball 5 units in the
35 ball.Translate( leftRight * 5, upDown * 5, 0 );
proper direction
36 y += upDown * 5;
37 x += leftRight * 5;
38 }
39 // -->
40 </script>
41 </head>
42
43 <body onload = "start()">
44

 2004 Prentice Hall, Inc.


All rights reserved.
45 <object id = "ball" style = "background-color: ffffff; 16
46 width: 300; height: 200; border-style: groove; Outline
47 position: absolute;"
48 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
49 bounce.html
50 <param name = "Line0001" value = "SetLineStyle( 0 )" /> (3 of 3)
51 <param name = "Line0002"
Fill the ball with texture from
52 value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" />
file ball.gif
53 <param name = "Line0003"
54 value = "Oval( 15, 15, 50, 50 )" />
55 </object>
56
57 </body>
58 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
17

30.3 Moving Shapes With Translate


Fig. 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.


1 <?xml version = "1.0"?> 19
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 30.4: gradient.html --> gradient.html
6 <!-- Gradients and rotation --> (1 of 3)
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.
22 function run()
20
23 {
Outline
24 counter += speed;
25
26 // accelerate half the time... gradient.html
27 if ( ( counter % 360 ) > 180 ) Vary the speed of rotation (2 of 3)
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 ); Rotate the pies
35 }
36 // -->
37 </script>
38
39 </head>
40
41 <body onload = "start()">
42
43 <object id = "pies" style = "background-color:blue; Declaring the pies
44 width: 300; height: 200;"
45 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
46

 2004 Prentice Hall, Inc.


All rights reserved.
47 <param name = "Line0001" 21
48 value = "SetFillColor( 255, 0, 0, 0, 0, 0 )" /> Set the fill color toOutline
red
49 <param name = "Line0002"
50 value = "SetFillStyle( 13 )" />
51 <param name = "Line0003" gradient.html
52 value = "Pie( -75, -75, 150, 150, 90, 120, 300 )" /> (3 of 3)
53
54 <param name = "Line0004" Set the fill style to 3 different
55 value = "SetFillStyle( 9 )" /> gradient types
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>

 2004 Prentice Hall, Inc.


All rights reserved.
22

30.4 Rotation
Fig. 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.


1 <?xml version = "1.0"?> 24
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 30.5: bounce2.html --> bounce2.html
6 <!-- SourceURL and MouseEventsEnabled --> (1 of 3)
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"; Import code from 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

 2004 Prentice Hall, Inc.


All rights reserved.
26 function start() 25
27 { Outline
28 window.setInterval( "run()", 50 );
29 }
30 bounce2.html
31 function run() (2 of 3)
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.
47 <body onload = "start()"> 26
48
Outline
49 <object id = "ball"
50 style = "width: 300; height: 200; border-style: groove;
51 position: absolute; top: 10; left: 10;" bounce2.html
52 classid = "clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6"> (3 of 3)
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" /> Enabling mouse events
60 </object>
61
62 </body>
63 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
1 SetLineStyle( 1, 3 ) 27
2 SetFillStyle( 1 ) Outline
3 Oval( 20, 20, 50, 50, 0 )
4
5 SetLineStyle( 1, 1 ) newoval.txt
6 PolyLine( 2, 45, 20, 45, 70, 0 ) (1 of 1)
7 PolyLine( 2, 45, 20, 45, 70, 90 )
Code moved to a separate text file
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 )

 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.


1 <?xml version = "1.0"?> 30
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 30.7: scaling.html --> scaling.html
6 <!-- Scaling a shape --> (1 of 4)
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.
24 function run() 31
25 {
Rotate and scale the Outline
26 drawing.Rotate( speedX, speedY, speedZ );
27 drawing.Scale( scale, scale, scale );
drawing
28 } scaling.html
29 // --> (2 of 4)
30 </script>
31
32 </head>
33
34 <body onload = "start()">
35
36 <div style = "position: absolute; top: 25; left: 220">
37
Defining buttons to control scaling,
<input type = "button" value = "Rotate-X"
38
speed and rotation of the foreground
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>

 2004 Prentice Hall, Inc.


All rights reserved.
49
32
50 <object id = "drawing" style = " position: absolute; Outline
51 Stack objects
z-index: 2; width: 200; height: 300;" using z-index property
52 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
53 scaling.html
54
Defining
(3 ofthe
4)
<param name = "Line0001" value = "SetFillColor( 0,0,0 )" />
55
background shapes
<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 )" />

 2004 Prentice Hall, Inc.


All rights reserved.
74 <param name = "Line0010"
33
75 value = "Oval( 5, -85, 7, 7, 0 )" /> Outline
76
77 <param name = "Line0011"
78 value = "SetLineStyle( 1, 2 )" /> scaling.html
79 <param name = "Line0012" (4 of 4)
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 Scaling
Fig. 30.7 Rotating a shape in three dimensions and scaling up and down.

 2004 Prentice Hall, Inc. All rights reserved.

You might also like