P. 1
DHTML Structured Graphics ActiveX Control

DHTML Structured Graphics ActiveX Control

5.0

|Views: 1,799|Likes:
Published by api-3760405

More info:

Published by: api-3760405 on Oct 18, 2008
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PPT, PDF, TXT or read online from Scribd
See more
See less

03/18/2014

pdf

text

original

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

1

© 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 None 0 Solid fill 1 None 2 Horizontal lines 3 Vertical lines 4 Diagonal lines 5 Diagonal lines 6 Cross-hatch 7 Diagonal cross-hatch 8 Horizontal Gradient 9 Vertical Gradient 10 Circular Gradient 11 Line Gradient 12 Rectangular Gradient 13 Shaped Gradient 14 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig 30.1: shapes.html -->

Outline
shapes.html (1 of 3)

9

<!-- Creating simple shapes --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Structured Graphics </head> <body> <object id = "shapes" style = "background-color: width: 500; height: 400" classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <param name = "Line0001" value = "SetLineColor( 0, 0, 0 )" /> <param name = "Line0002" value = "SetLineStyle( 1, 1 )" /> <param name = "Line0003" value = "SetFillColor( 0, 255, 255 )" />

Inserting the Structured Graphics Control Shapes</title>

Setting the line color to 0, 0, 0 (black) #CCCCFF;

Creating a thin, solid line Setting the fill color to cyan

© 2004 Prentice Hall, Inc.
All rights reserved.

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<param name = "Line0004" value = "SetFillStyle( 1 )" /> <param name = "Line0005"

Outline

10

Setting the fill style toansolid colorthe Drawing a oval with shapes.html previously specifiedof 3) <param name = "Line0006" (2 settings Drawing an arc with the value = "Arc( -200, -125, 100, 100, 45, 135, 0 )" /> same settings <param name = "Line0007" Drawing a pie value = "Pie( 100, -100, 150, 150, 90, 120, 0 )" /> (filled arc) <param name = "Line0008" Drawing a polygon with 5 value = "Polygon(5, 0, 0, 10, 20, 0, -30, vertices -10, -10, -10, 25)" />
value = "Oval( 0, -175, 25, 50, 45 )" /> <param name = "Line0009" value = "Rect( -185, 0, 60, 30, 25 )" /> <param name = "Line0010" value = "RoundRect( 200, 100, 35, 60, 10, 10, 25 )" />

Drawing a filled rectangle Drawing a filled rectangle with rounded corners

© 2004 Prentice Hall, Inc.
All rights reserved.

41 42 43 44 45 46 47 48 49 50 51 52 53 54 </body> 55 </html> </object> <param name = "Line0013" value = "SetLineStyle( 2,1 )" /> <param name = "Line0014" -75, -75, 75, -75)" /> <param name = "Line0011" value = "SetFont( 'Arial', 65, 400, 0, 0, 0 )" /> <param name = "Line0012" value = "Text( 'Shapes', -200, 200 , -35 )" />

Outline Setting the font to Arial, bold, size 65
shapes.html Printing the text “Shapes” (3 of 3)

11

Setting the line style to dashed Drawing a line with 5 vertices

value = "PolyLine( 5, 100, 0, 120, 175, -150, -50,

© 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig. 30.3: bounce.html -->

Outline
bounce.html (1 of 3)

14

<!-- Textures and the Translate method --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Structured Graphics - Translate</title> <script type = "text/javascript"> <!-var x = 15; var y = 15; var upDown = -1; var leftRight = 1; function start() { window.setInterval( "run()", 50 ); }

Variables to track ball’s position and movement

© 2004 Prentice Hall, Inc.
All rights reserved.

24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

function run() { // if the ball hits the top or bottom side... if ( y == -100 || y == 50 ) upDown *= -1;

Outline
bounce.html (2 of 3)

15

Change direction when the ball hits a wall

// if the ball hits the left or right side... if ( x == -150 || x == 100 ) leftRight *= -1; // Move the ball and increment our counters ball.Translate( leftRight * 5, upDown * 5, 0 ); y += upDown * 5; x += leftRight * 5; } // --> </script> </head> <body onload = "start()">

Move the ball 5 units in the proper direction

© 2004 Prentice Hall, Inc.
All rights reserved.

45 46 47 48 49 50 51 52 53 54 55 56 57

<object id = "ball" style = "background-color: ffffff; width: 300; height: 200; border-style: groove; position: absolute;" classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <param name = "Line0001" value = "SetLineStyle( 0 )" /> <param name = "Line0002" value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" /> <param name = "Line0003" value = "Oval( 15, 15, 50, 50 )" /> </object> </body>

Outline
bounce.html (3 of 3) Fill the ball with texture from file ball.gif

16

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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig. 30.4: gradient.html --> <!-- Gradients and rotation -->

Outline
gradient.html (1 of 3)

19

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Structured Graphics - Gradients</title> <script type = "text/javascript"> <!-var speed = 5; var counter = 180; function start() { window.setInterval( "run()", 100 ); }

© 2004 Prentice Hall, Inc.
All rights reserved.

22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

function run() { counter += speed; // accelerate half the time... if ( ( counter % 360 ) > 180 ) speed *= ( 5 / 4 ); // decelerate the other half. if ( ( counter % 360 ) < 180 ) speed /= ( 5 / 4 ); pies.Rotate( 0, 0, speed ); } // --> </script> </head> <body onload = "start()"> <object id = "pies" style = "background-color:blue; width: 300; height: 200;" classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">

Outline
Vary the speed of rotation gradient.html (2 of 3)

20

Rotate the pies

Declaring the pies

© 2004 Prentice Hall, Inc.
All rights reserved.

47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

<param name = "Line0001" value = "SetFillColor( 255, 0, 0, 0, 0, 0 )" /> <param name = "Line0002" value = "SetFillStyle( 13 )" /> <param name = "Line0003" value = "Pie( -75, -75, 150, 150, 90, 120, 300 )" /> <param name = "Line0004" value = "SetFillStyle( 9 )" /> <param name = "Line0005"

Set the fill color to red Outline gradient.html (3 of 3)

21

Set the fill style to 3 different gradient types

value = "Pie( -75, -75, 150, 150, 90, 120, 180 )" /> <param name = "Line0006" value = "SetFillStyle( 11 )" /> <param name = "Line0007" value = "Pie( -75, -75, 150, 150, 90, 120, 60 )" /> </object> </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.

30.5 Mouse Events and External Source Files • Mouse events
– Set MouseEventsEnabled property to 1

23

• External source files
– Set SourceURL property to location of file – Make HTML easier to read/maintain

© 2004 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig. 30.5: bounce2.html -->

Outline
bounce2.html (1 of 3)

24

<!-- SourceURL and MouseEventsEnabled --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Structured Graphics - Shapes</title> <script for = "ball" event = "onclick" type = "text/javascript"> <!-ball.SourceURL = "newoval.txt"; // --> </script> <script type = "text/javascript"> <!-var x = 20; var y = 20; var upDown = -1; var leftRight = 1;

Import code from newoval.txt

© 2004 Prentice Hall, Inc.
All rights reserved.

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

function start() { window.setInterval( "run()", 50 ); } function run() { if ( y == -100 || y == 50 ) upDown *= -1; if ( x == -150 || x == 100 ) leftRight *= -1; ball.Translate( leftRight * 5, upDown * 5, 0 ); y += upDown * 5; x += leftRight *5; } // --> </script> </head>

Outline
bounce2.html (2 of 3)

25

© 2004 Prentice Hall, Inc.
All rights reserved.

47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<body onload = "start()"> <object id = "ball" style = "width: 300; height: 200; border-style: groove; position: absolute; top: 10; left: 10;" classid = "clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <param name = "Line0001" value = "SetLineStyle(0)" /> <param name = "Line0002" value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" /> <param name = "Line0003" value = "Oval( 20, 20, 50, 50 )" /> <param name = "MouseEventsEnabled" value = "1" /> </object> </body>

Outline
bounce2.html (3 of 3)

26

Enabling mouse events

63 </html>

© 2004 Prentice Hall, Inc.
All rights reserved.

1 2 3 4 5 6 7 8 9 10

SetLineStyle( 1, 3 ) SetFillStyle( 1 ) Oval( 20, 20, 50, 50, 0 ) SetLineStyle( 1, 1 ) PolyLine( 2, 45, 20, 45, 70, 0 ) PolyLine( 2, 45, 20, 45, 70, 90 ) PolyLine( 2, 45, 20, 45, 70, 45 ) PolyLine( 2, 45, 20, 45, 70, 135 )

Outline
newoval.txt (1 of 1) Code moved to a separate text file

27

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.

30.5 Mouse Events and External Source Files
Fig. 30.5 Using SourceURL and MouseEventsEnabled.

28

© 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig. 30.7: scaling.html --> <!-- Scaling a shape -->

Outline
scaling.html (1 of 4)

30

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Structured Graphics - Scaling</title> <script type = "text/javascript"> <!-var speedX = 0; var speedY = 0; var speedZ = 0; var scale = 1; function start() { window.setInterval( "run()", 100 ); }

© 2004 Prentice Hall, Inc.
All rights reserved.

24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

function run() { drawing.Rotate( speedX, speedY, speedZ ); drawing.Scale( scale, scale, scale ); } // --> </script> </head> <body onload = "start()"> <div style = "position: absolute; top: 25; left: 220"> <input type = "button" value = "Rotate-X" onclick = "speedX = ( speedX ? 0 : 5 )" /><br /> <input type = "button" value = "Rotate-Y" onclick = "speedY = ( speedY ? 0 : 5 )" /><br /> <input type = "button" value = "Rotate-Z" onclick = "speedZ = ( speedZ ? 0 : 5 )" /><br /> <br /> <input type = "button" value = "Scale Up" onclick = "scale = ( scale * 10 / 9 )" /><br /> <input type = "button" value = "Scale Down" onclick = "scale = ( scale * 9 / 10 )" /> </div>

Rotate and scale the drawing

Outline
scaling.html (2 of 4)

31

Defining buttons to control scaling, speed and rotation of the foreground

© 2004 Prentice Hall, Inc.
All rights reserved.

49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 <param name = "Line0008" value = "SetFillColor ( 255, 0, 0 )" /> <param name = "Line0009" value = "Oval( -15, -85, 7, 7, 0 )" /> <param name = "Line0007" value = "PolyLine( 3, -15, 90, 0, 50, 15, 90 )" /> <param name = "Line0006" value = "PolyLine( 3, -30, -25, 0, -15, 30, -25 )" /> <param name = "Line0005" value = "PolyLine(2, 0, -50, 0, 50 )" /> <param name = "Line0004" value = "Oval( -25, -100, 50, 50, 0 )" /> <param name = "Line0001" value = "SetFillColor( 0,0,0 )" /> <param name = "Line0002" value = "SetFillStyle( 0 )" /> <param name = "Line0003" value = "SetLineStyle( 1, 3 )" /> <object id = "drawing" style = " position: absolute; z-index: 2; width: 200; height: objects Stack 300;" classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">

using z-index property

Outline
scaling.html Definingof 4) (3 the background shapes

32

© 2004 Prentice Hall, Inc.
All rights reserved.

74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

<param name = "Line0010" value = "Oval( 5, -85, 7, 7, 0 )" /> <param name = "Line0011" value = "SetLineStyle( 1, 2 )" /> <param name = "Line0012" value = "SetLineColor( 255, 0, 0 )" /> <param name = "Line0013" value = "SetFont( 'Courier', 25, 200, 0, 0, 0 )" /> <param name = "Line0014" value = "Text( 'Hello', -35, -115 , 0 )" /> </object> <object id = "background" style = " position:absolute; z-index: 1; width: 200; height: 300; background-color: none" classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <param name = "Line0001" value = "SetFillColor( 38, 250, 38 )" /> <param name = "Line0002" value = "Oval( -75, -125, 150, 250, 0 )" /> </object> </body>

Outline
scaling.html (4 of 4)

33

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're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->