Dynamic HTML

Structured Graphics ActiveX Control

17.1 Introduction
The Structured Graphics Control, like the Tabular
Data Control, is an ActiveX control that can be
added to web page with an object tag.
Like the TDC, the Structured Graphics Control is
easily accessible through scripting.
Unlike the TDC, the Structured Graphics Control is
meant primarily for visual presentations, not for
displaying data and content.

Introduction
The Structured Graphics Control is a Web
interface for the widely used DirectAnimation
subset of Microsofts DirectX software, used in
many high-end video games and graphical
applications.

17.2 Shape Primitives

The Structured Graphics Control allows you to
create simple shapes by using methods that
can be called via scripting or through param
tags inside object tag.

For the SGC, the basic syntax of the <PARAM> tag is

<PARAM
NAME="Linexxxx"
VALUE="method(parameters)">
The order of calls would be Line0001, Line0002,
Line0003, and so on.
The 'xxxx' must be similar to 0001, and must proceed
in an integer sequential manner, e.g. 0002, 0003, etc.
VALUE can be any available method and its
parameters.

shape.html

<param name = "Line0001"

value="SetLineColor(0,0,0)" />
RED

BLUE

GREEN

Method SetLineColor (R, G, B) :

sets the color of lines and borders of shapes.

takes an RGB triplet in decimal notation as its

three parameters

<param name = "Line0002"

value="SetLineStyle(1,1)" />
LINE SYTLE

value 0 does not draw any lines or borders

value 1 creates a solid line (the default)
value 2 creates a dashed line

LINE WIDTH

specified in pixels

NOTE:
To create a dashed line with the SetLineStyle method, you
must set the line width to 1.

<param name = "Line0003"

value="SetFillColor(0,0,0)" />
RED

BLUE

GREEN

Method SetFillColor (R, G, B) :

Sets the fill color

sets the foreground color with which to fill shapes.
takes an RGB triplet in decimal notation as its three
parameters

<param name = "Line0004"

value = "SetFillStyle(1)" />
- determines the style in which a shape is
filled with color.
- In the example program (shape.html) a
value 1 fills shapes with the solid color.
- There are 14 possible fill styles

<param name = "Line0005"

value = "Oval(0,-175,25,50,45)" />
X coordinate
Y coordinate

height

width

clockwise rotation relative to the x-axis,

(expressed in degrees)
NOTE
All shapes in the Structured Graphics Control effectively
have a surrounding box

<param name = "Line0006"

value = "Arc(-200,-125,100,100,45,135,0 )" />
1. X coordinate
2. Y coordinate
3. height
4. width

5. starting angle in
degrees
6. size of the arc relative to the starting angle (in degrees)
7. the rotation of the arc

<param name = "Line0007"

value = Pie(-200,-125,100,100,45,135,0 )" />
1. X coordinate
2. Y coordinate
3. height
4. width

5. starting angle in
degrees
6. size of the arc relative to the starting angle
(in degrees)
7. the rotation of the arc

NOTE:
The Pie method takes the same parameters
as does the Arc method, but it fills the arc with the
color of the foreground, thus creates a pie shape.

<param name = "Line0008"

value = "Polygon(5, 0, 0, 10, 20, 0, -30,10, -10, -10, 25)" />
1.the number of vertices in the polygon
2. each successive pair of parameters specifies the xy
coordinates of the next vertex of the polygon
3. The last point of the polygon is automatically
connected to the first, to close the polygon.

Polygon(5, x1, y1, x2, y2, x3, y3,x4, y4, x5, y5)

<param name = "Line0009"

value="Rect( -185, 0, 60, 30, 25 )" />
1. X coordinate
2. Y coordinate
3. height
4. width
5.
Rotation
in
degrees

1.
2.
3.
4.
5.
6.
7.

<param name = "Line0009"

value="RoundRect( 200, 100, 35, 60, 10,
10, 25 ) />
X coordinate
RoundRect() adds two new
parameters the Rect().
Y coordinate
height
width
Rotation in degrees
width of the rounded arc at the corners
height of the rounded arc at the corners

<param name = "Line0011"

value = "SetFont( 'Arial', 65, 400, 0, 0, 0 ) />
The SetFont method sets the font style to use when
we use the Text method to place text.
1.
2.
3.
4.
5.
6.

font face
Font size in points
Font weight (boldness ranging from 100 to 700)
Italic (0/1)
Underline (0/1)
Strikethrough (0/1)

<param name="Line0012"
value="Text( 'Shapes', -200, 200 ,-35)"/>

1.
2.
3.
4.

Text to be placed.
X coordinate
Y coordinate
Rotation in degrees

<param name = "Line0014"

value = "PolyLine( 5, 100, 0, 120, 175, -150,
-50, 51 -75, -75, 75, -75)" />
1.The PolyLine method to draw a line
with multiple line segments.
2.The PolyLine method itself operates
much like the Polygon method.
3.

The first parameter declares the

number of points in the line, and each
successive pair declares the xy