The SymbolCollection class is a container for holding a variety of shapes that can be used to generate visualizations that does not directly fit a specific data structure, but assists illustrating its underlying concepts. For example, the Towers of Hanoi problem can be implemented using a set of simple shapes : 3 circles for the disks and 3 long thin rectangles to represent the towers. SymbolCollection works currently in BRIDGES with 5 shapes: Rectangle, Circle, Polygon, Polyline and a Label (facilitates textual information on the visualization). See the associated help pages for the API. Each symbol has a name, location (where it will be placed on the display) and other common stylistic attributes. The subclasses of Symbol have more specific geometric properties: width, height for rectangle, center, radius for circle, list of points for Polygon,Polyline. The example below illustrates how to construct shapes and its corresponding visualization.

All shapes (except the Label) can be transformed by translation, scaling or rotation. Combinations of transforms are composed, by premultiplication, i.e., if a rectangle is specified to be translated and then rotated, then the translation will be applied first to its vertices, followed by rotation.

SymbolCollection also supports groups (as in SVG); symbols can be put together in groups, and groups can be within groups. Groups can take a transformation matrix as its attribute, which will transform the entire group of symbols and possibly applying any transformations the symbols within that group may themselves specify.

Finally, ordering is implemented as a symbol attribute, termed layer. These are used to specify the depth of a symbol and used by the rendering algorithm to draw shapes in the specified order. Layers are integers, and smaller the integer, the closer the shape is towards the viewer.

See also

This tutorial gives an introduction to the usage of ColorGrid. You can find the complete documentation of the features in the Doxygen documentation of the following classes and functions:

1. SymbolCollection [Java] [C++] [Python]
2. Symbol [Java] [C++] [Python]
3. Circle [Java] [C++] [Python]
4. Polyline [Java] [C++] [Python]
5. Polygon [Java] [C++] [Python]
6. Rectangle [Java] [C++] [Python]
7. SymbolGroup [Java] [C++] [Python]
8. Text [Java] [C++] [Python]

SymbolCollection - Example BRIDGES Programs that illustrate the various features of symbols

1. Getting Started: A barebones example to display shapes

• In this example, we illustrate the various symbols supported by BRIDGES. You will see a red rectangle and gree circle and two crossed lines, built by a set of points on a polygon.

Here's the final code:

2. Using symbol groups with shapes

• In this example, we illustrate how to group symbols to create a hierarchical structures. Two groups are illustrated, but note that groups can be within groups.

Here's the final code:

3. Using layers with symbols to specify drawing order

• In this example, we illustrate how to put symbols into layers so as to specify a desired drawing orderl

Here's the final code:

4. Text alignment with Symbols

• In this example, we illustrate the different ways text labels can be aligned, given its location.

Here's the final code:

Bridges Visualization

• Once all your code is in order, run your file.
• Assuming all your code is correct and it compiles correctly, a link to the Bridges website will be generated on the console.
• Copy/paste this link into your favorite browser to view a visualization of the data structure you just created.
• It should look something like this:

Well done! You’ve just completed your Bridges Shape Collection project!