2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 30 - Dynamic HTML: Structured Graphics...

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


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.


3

30.1 Introduction

• Structured Graphics ActiveX Control– object element

– Visual presentation via DirectAnimation• Subset of DirectX software


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


5


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


6


• 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


7


• 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


8


• 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 

6 

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 )" />


22 value = "SetLineStyle( 1, 1 )" />


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


Outline10

shapes.html(2 of 3)


26 value = "SetFillStyle( 1 )" />

27


29 value = "Oval( 0, -175, 25, 50, 45 )" />


31 value = "Arc( -200, -125, 100, 100, 45, 135, 0 )" />


33 value = "Pie( 100, -100, 150, 150, 90, 120, 0 )" />


35 value = "Polygon(5, 0, 0, 10, 20, 0, -30,

36 -10, -10, -10, 25)" />


38 value = "Rect( -185, 0, 60, 30, 25 )" />


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


Outline11

shapes.html(3 of 3)

41


43 value = "SetFont( 'Arial', 65, 400, 0, 0, 0 )" />


45 value = "Text( 'Shapes', -200, 200 , -35 )" />

46


48 value = "SetLineStyle( 2,1 )" />


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


12

30.2 Shape PrimitivesFig. 30.1 Structured Graphics ActiveX Control creates shapes.


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

Outline14

bounce.html(1 of 3)




4

5 

6 

7


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


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


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


49

50 <param name = "Line0001" value = "SetLineStyle( 0 )" />


52 value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" />


54 value = "Oval( 15, 15, 50, 50 )" />

55 </object>

56

57 </body>

58 </html>

Fill the ball with texture from file ball.gif


17

30.3 Moving Shapes With TranslateFig. 30.3 Methods SetTextureFill and Translate.


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

Outline19

gradient.html(1 of 3)




4

5 

6 

7


9 <head>

10 <title>Structured Graphics - Gradients</title>

11


13 <!--

14 var speed = 5;

15 var counter = 180;

16

17 function start()

18 {


20 }

21


Outline20


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


42

43 <object id = "pies" style = "background-color:blue;

44 width: 300; height: 200;"


46

Vary the speed of rotation

Rotate the pies

Declaring the pies


Outline21



48 value = "SetFillColor( 255, 0, 0, 0, 0, 0 )" />




52 value = "Pie( -75, -75, 150, 150, 90, 120, 300 )" />

53




57 value = "Pie( -75, -75, 150, 150, 90, 120, 180 )" />

58




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


22

30.4 RotationFig. 30.4 Using gradients and Rotate.


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

Outline24

bounce2.html(1 of 3)




4

5 

6 

7


9 <head>

10 <title>Structured Graphics - Shapes</title>

11

12 <script for = "ball" event = "onclick" type =

13 "text/javascript">

14 

17 </script>

18


20 <!--

21 var x = 20;

22 var y = 20;

23 var upDown = -1;

24 var leftRight = 1;

25

Import code from newoval.txt


Outline25


26 function start()

27 {


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


Outline26



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)" />


56 value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" />


58 value = "Oval( 20, 20, 50, 50 )" />

59 <param name = "MouseEventsEnabled" value = "1" />

60 </object>

61

62 </body>

63 </html>

Enabling mouse events


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


28

30.5 Mouse Events and External Source Files

Fig. 30.5 Using SourceURL and MouseEventsEnabled.


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

Outline30

scaling.html(1 of 4)




4

5 

6 

7


9 <head>

10 <title>Structured Graphics - Scaling</title>

11


13 <!--

14 var speedX = 0;

15 var speedY = 0;

16 var speedZ = 0;

17 var scale = 1;

18

19 function start()

20 {


22 }

23


Outline31


24 function run()

25 {

26 drawing.Rotate( speedX, speedY, speedZ );

27 drawing.Scale( scale, scale, scale );

28 }

29 // -->

30 </script>

31

32 </head>

33


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


Outline32


49

50 <object id = "drawing" style = " position: absolute;

51 z-index: 2; width: 200; height: 300;"


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


59 value = "Oval( -25, -100, 50, 50, 0 )" />

60


62 value = "PolyLine(2, 0, -50, 0, 50 )" />

63


65 value = "PolyLine( 3, -30, -25, 0, -15, 30, -25 )" />

66


68 value = "PolyLine( 3, -15, 90, 0, 50, 15, 90 )" />

69


71 value = "SetFillColor ( 255, 0, 0 )" />


73 value = "Oval( -15, -85, 7, 7, 0 )" />

Stack objects using z-index property

Defining the background shapes


Outline33



75 value = "Oval( 5, -85, 7, 7, 0 )" />

76


78 value = "SetLineStyle( 1, 2 )" />


80 value = "SetLineColor( 255, 0, 0 )" />


82 value = "SetFont( 'Courier', 25, 200, 0, 0, 0 )" />


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


93 value = "SetFillColor( 38, 250, 38 )" />


95 value = "Oval( -75, -125, 150, 250, 0 )" />

96 </object>

97 </body>

98 </html>


34

30.6 ScalingFig. 30.7 Rotating a shape in three dimensions and scaling up and down .

2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 30 - Dynamic HTML: Structured Graphics...

Documents

Transcript of 2004 Prentice Hall, Inc. All rights reserved. 1 Chapter 30 - Dynamic HTML: Structured Graphics...