Scribd Logo
Upload

Welcome to Scribd!

  • DHTML Structured Graphics ActiveX Control

    Uploaded by

    api-3760405
    2K views34 pages
    This chapter explains how to use the Structured Graphics ActiveX control. You will also understand how to modify colors and fill styles. You'll also learn how to import external lists of methods into the structured graphics control.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This chapter explains how to use the Structured Graphics ActiveX control. You will also understand how to modify colors and fill styles. You'll also learn how to import external lists of methods into the structured graphics control.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2K views34 pages

    DHTML Structured Graphics ActiveX Control

    Uploaded by

    api-3760405
    This chapter explains how to use the Structured Graphics ActiveX control. You will also understand how to modify colors and fill styles. You'll also learn how to import external lists of methods into the structured graphics control.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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