San José State University
Thayer Watkins
Silicon Valley
& Tornado Alley

Structured Graphics Control

Structured Graphics Control (SGC) is a set of graphics primitives developed by Microsoft for creating graphics in web pages. In an HTML file SGC is activated by the inclusion of a screen object by means of the following code:

<OBJECT ID="name"
CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
STYLE="position:absolute; height:Hpx; width:Wpx" </OBJECT>

where H and W stand for the numerical size of the window.

The actual drawing is carried out by means of <PARAM> tags. For example, to tell the browser to draw a rectangle with an upper left corner at (0,-80) and with a width and height of 60 and 40 and with a rotation of 30 degrees clockwise about the upper left corner, the following line of codes is entered:

<PARAM NAME="Line0001" VALUE="Rect(200,100,60,40,30)">

The result is shown below.

The default fill color is white. For another color rectangle, say red, the fill color must be set with a <PARAM> tag giving the RGB color values; i.e.,
<PARAM NAME="Line0001" VALUE="SetFillColor(255,0,0)">

The Rect() command must then be named Line0002. The result is:

For an oval of diameters 100 and 60 which is rotated clockwise 45 degrees, the line of code is:

<PARAM NAME="Line0001" VALUE="Oval(0,-80,100,60,45)">

For a green ellipse Line0001 must set the fill color.

The result is:

The graphics primitives included in SGC are:

In addition to commands for drawing the above geometric features SGC has commands for controlling colors, fonts, line type, fill type, gradients and styles. Graphic features can be rotated, scaled, translated and transformed.

An awkward feature of SGC is that the origin of its coordinate system is set in the center of the screen window created. If the coordinates of an object are taken from a representation in which the origin is the upper left corner then the object will be displayed in lower right quadrant of the screen window. For example, suppose a screen window of dimensions 200 by 200 is created and a green rectangle of 60 by 40 is to be displayed. If the upper left of that rectangle happens to be at (20,30) in another representation then the entry of those coordinates in the SGC command gives:

The remedy is of course to subtract some fraction of the width and height of the screen window from the coordinates from the other represenation. If the fraction substracted is one half the object will be located in the upper left quadrant as senn below.

SGC allows for a gradient fill in which the fill color shades from one color to another. This option is achieved simply by specifying two colors in the SetFillColor command and a command to set the fill style. For example, a rectangle with a gradient fill shading from green to red apperars as:

SGC also allows for 14 different fill styles (counting no fill as one of these styles) such as horizontal, vertical or diagonal hatching as well as a solid fill. For example,

For an example of a map created using SGC see Zimbabwe.

HOME PAGE OF applet-magic
HOME PAGE OF Thayer Watkins