Chapter 17 - Dynamic HTML: Structured Graphics ActiveX Control Outline 17.1 Introduction 17.2 Shape Primitives 17.3 Moving Shapes with Translate 17.4 Rotation 17.5 Mouse Events and External Source Files 17.6 Scaling 17.7 Internet and World Wide Web Resources
Lines 15–17 insert the Structured Graphics ActiveX Control. 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 17.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 )" /> 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 )" /> Shapes.html Lines 15–17 insert the Structured Graphics ActiveX Control. The name attribute determines the order in which the function is called. The Pie method (lines 32–33) is similar to the Arc method, but it fills the arc with the color of the foreground, thus creating a pie shape.
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 )" /> 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> Shapes.html Line-style is the first parameter of SetLineStyle. A value 1 creates a solid line (the default), 0 does not draw any lines or borders and 2 creates a dashed line. Line width is the second parameter. It is set to 1 to create a dashed line. The PolyLine method is used to draw a line with multiple line segments.
Arc created with the Arc method. Shape created using the pie method. Program Output Arc created with the Arc method. Shape created using the pie method. Shape created with the Polygon method. Line segment created with the PolyLine method.
17.2 Shape Primitives
To make the ball appear to “bounce” off the walls. 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. 17.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 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 Bounce.html To make the ball appear to “bounce” off the walls.
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 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> we use the Translate method to translate the shape—that is, to move the shape in coordinate space without deforming it. Bounce.html The SetTextureFill method (line 52) is used to fill the oval with a texture. A texture is a picture that is placed on the surface of a polygon.
Program Output The application creates a simulation of a ball that bouncing around inside the Structured Graphics Control box.
Line 34 calls function Rotate to rotate the circle around the z-axis. 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. 17.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 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 } Gradient.html Lines 26–32 in the JavaScript code provide a mechanism for varying the speed of rotation about the z axis. Line 34 calls function Rotate to rotate the circle around the z-axis.
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 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> Gradient.html The gradient fills are set with the SetFillStyle method (lines 50, 55 and 60).
Program Output The output displays the image in its initial position and at a new rotated position.
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. 17.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 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 Bounce2.html Lines 12–17 designate a script for the onclick event of our Structured Graphics Control object. This event sets property SourceURL to newoval.txt—the new drawing instructions. When the new drawing instructions are assigned to the SourceURL property the ball is redrawn based on these new settings.
MouseEventsEnabled property allows the capturing of mouse events. 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 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> Bounce2.html MouseEventsEnabled property allows the capturing of mouse events. The MouseEventsEnabled property is enabled by setting value to 1.
Initial output of the program before the user clicks the mouse. Program Output After the user clicks the mouse, the ball is redrawn .according to the instructions in newoval.txt. Initial output of the program before the user clicks the mouse.
Fig. 17.6 External source file newoval.txt for Fig. 17.5. 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 ) Newoval.txt This file contains the new directions to redraw the ball when the user clicks the mouse. Fig. 17.6 External source file newoval.txt for Fig. 17.5.
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. 17.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 24 function run() 25 { 26 drawing.Rotate( speedX, speedY, speedZ ); 27 drawing.Scale( scale, scale, scale ); 28 } 29 30 function rotate( axis ) 31 { 32 axis = ( axis ? 0 : 5 ); 33 } 34 // --> 35 </script> Scaling.html The Scale method modifies the size of an object while retaining its position and shape.
Lines 55–90 create a control for our rotating foreground. 36 37 </head> 38 39 <body onload = "start()"> 40 41 <div style = "position: absolute; top: 25; left: 220"> 42 <input type = "button" value = "Rotate-X" 43 onclick = "speedX = ( speedX ? 0 : 5 )" /><br /> 44 <input type = "button" value = "Rotate-Y" 45 onclick = "speedY = ( speedY ? 0 : 5 )" /><br /> 46 <input type = "button" value = "Rotate-Z" 47 onclick = "speedZ = ( speedZ ? 0 : 5 )" /><br /> 48 <br /> 49 <input type = "button" value = "Scale Up" 50 onclick = "scale = ( scale * 10 / 9 )" /><br /> 51 <input type = "button" value = "Scale Down" 52 onclick = "scale = ( scale * 9 / 10 )" /> 53 </div> 54 55 <object id = "drawing" style = " position: absolute; 56 z-index: 2; width: 200; height: 300;" 57 classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> 58 59 <param name = "Line0001" value = "SetFillColor( 0,0,0 )" /> 60 <param name = "Line0002" value = "SetFillStyle( 0 )" /> 61 <param name = "Line0003" value = "SetLineStyle( 1, 3 )" /> 62 63 <param name = "Line0004" 64 value = "Oval( -25, -100, 50, 50, 0 )" /> 65 66 <param name = "Line0005" 67 value = "PolyLine(2, 0, -50, 0, 50 )" /> 68 69 <param name = "Line0006" 70 value = "PolyLine( 3, -30, -25, 0, -15, 30, -25 )" /> Scaling.html Lines 41-53 create 5 buttons used to control rotation and scaling of the foreground. Lines 55–90 create a control for our rotating foreground.
71 72 <param name = "Line0007" 73 value = "PolyLine( 3, -15, 90, 0, 50, 15, 90 )" /> 74 75 <param name = "Line0008" 76 value = "SetFillColor ( 255, 0, 0 )" /> 77 <param name = "Line0009" 78 value = "Oval( -15, -85, 7, 7, 0 )" /> 79 <param name = "Line0010" 80 value = "Oval( 5, -85, 7, 7, 0 )" /> 81 82 <param name = "Line0011" 83 value = "SetLineStyle( 1, 2 )" /> 84 <param name = "Line0012" 85 value = "SetLineColor( 255, 0, 0 )" /> 86 <param name = "Line0013" 87 value = "SetFont( 'Courier', 25, 200, 0, 0, 0 )" /> 88 <param name = "Line0014" 89 value = "Text( 'Hello', -35, -115 , 0 )" /> 90 </object> 91 92 <object id = "background" style = " position:absolute; 93 z-index: 1; width: 200; height: 300; 94 background-color: none" classid = 95 "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> 96 97 <param name = "Line0001" 98 value = "SetFillColor( 38, 250, 38 )" /> 99 <param name = "Line0002" 100 value = "Oval( -75, -125, 150, 250, 0 )" /> 101 </object> 102 </body> 103 </html> Scaling.html Lines 92-101 are used to control the positioning of the oval in the background. The position and z-index CSS attributes are used to position the oval and foreground over each other.
Program Output Possible outputs after the upper layer (the person) is rotated along the x, y and z axis with the top three buttons.
Program Output Possible out put after the initial image is scaled down (left) and scaled up (right).