Customizing Constellation Roamer for Your App

There are several options for customizing Constellation Roamer™ to suit your specific needs. The configuration file allows you to change the behavior of the visualization, the details of integration with the embedding page, and the way data is loaded from the server.

There are also several properties for changing the appearance of nodes and edges. These options allow you to control the shapes, colors, and sizes of individual nodes and edges.

Node Customization Properties

The following options control the appearance of nodes. Default values can be set in the configuration file but the true power comes from being able to set these properties for each individual node in the graph data file.

string label = ""

The label text for the node. Line breaks can be inserted using the string, "\n".

string tooltip = ""

The tooltip text that pops up when the mouse is held over the node. Leave blank for no tooltip. Line breaks can be inserted using the string, "\n".

string url = ""

The URL associated with the node. If the url property is not empty and the node is already selected then clicking the node will load the given URL. The target window can be set using the url_target property.

string url_target = "_self"

The target window used when a URL is loaded.

string graphic_type = "shape"

The type of graphic to display for the node. The graphic can either be a shape or an externally loaded image.

Acceptable values: shape, image

string graphic_image_url = ""

The URL of the image to display as the node graphic. This property only applies when graphic_type is set to 'image'.

string graphic_shape = "circle"

The specific shape to use for the node graphic. This property only applies when graphic_type is set to 'shape'.

Acceptable values: circle, triangle, square, diamond, pentagon

color graphic_fill_color = #ffffff

The fill color of the graphic. This property only applies when graphic_type is set to 'shape'.

color graphic_line_color = #000000

The line color of the graphic. This property only applies when graphic_type is set to 'shape'.

boolean graphic_gradient_fill = true

Indicates whether to use a gradient fill or a flat fill. This property only applies when graphic_type is set to 'shape'.

number graphic_size = 30

The size of the graphic. The value is measured as the radius of the smallest circle that can contain the graphic.

color selected_graphic_fill_color = #ffffff

The fill color of the graphic when the node is selected. This property only applies when graphic_type is set to 'shape'.

color selected_graphic_line_color = #000000

The line color of the graphic when the node is selected. This property only applies when graphic_type is set to 'shape'.

boolean selected_graphic_gradient_fill = true

Indicates whether to use a gradient fill or a flat fill when the node is selected. This property only applies when graphic_type is set to 'shape'.

number selected_graphic_size = 30

The size of the graphic when the node is selected. The value is measured as the radius of the smallest circle that can contain the graphic.

string left_icon_url = ""

The URL of the icon to the left of the label.

string right_icon_url = ""

The URL of the icon to the left of the label.

string selected_left_icon_url = ""

The URL of the icon to the left of the label when selected.

string selected_right_icon_url = ""

The URL of the icon to the right of the label when selected.

number left_icon_spacing = 0

The spacing between the label and the left icon.

number right_icon_spacing = 0

The spacing between the label and the right icon.

boolean label_bg_enabled = true

Indicates whether the label background should be displayed.

color label_bg_fill_color = #ffffff

The fill color of the label background.

color label_bg_line_color = #000000

The line color of the label background.

boolean label_bg_rounded_corners = true

Indicates whether the label background should have rounded corners.

boolean selected_label_bg_enabled = true

Indicates whether the label background should be displayed when the node is selected.

color selected_label_bg_fill_color = #ffffff

The fill color of the label background when the node is selected.

color selected_label_bg_line_color = #000000

The line color of the label background when the node is selected.

boolean selected_label_bg_rounded_corners = true

Indicates whether the label background should have rounded corners when the node is selected.

boolean label_embed_fonts = false

Indicates whether to use embedded fonts or system fonts. Text rendered using embedded fonts moves more smoothly when animated but the font family is limited to Arial and only english and basic latin characters are supported. Using system fonts allows any font family and character that can be rendered on the client machine include East Asian unicode characters.

string label_position = "false"

Controls the placement of the node's label with respect to the graphic, whether it's an image or a shape. Accepted values are "top", "right", "bottom", "left", and "center".

color label_font_color = #000000

The font color of the label text.

boolean label_font_bold = false

Indicates whether the label text is bold.

string label_font_family = "Arial"

The font name of the label text. If label_embed_fonts is set to 'true' this value is forced to 'Arial'.

boolean label_font_italic = false

Indicates whether the label text is italic.

number label_font_size = 12

The font size of the label text.

color selected_label_font_color = #000000

The font color of the label text when the node is selected.

boolean selected_label_font_bold = true

Indicates whether the label text is bold when the node is selected.

string selected_label_font_family = "Arial"

The font name of the label text when the node is selected. If selected_label_embed_fonts is set to 'true' this value is forced to 'Arial'.

boolean selected_label_font_italic = false

Indicates whether the label text is italic when the node is selected.

number selected_label_font_size = 12

The font size of the label text when the node is selected.

Edge Customization Properties

The following options control the appearance of edges. Like the node properties above, these properties can be set for individual nodes in the graph data file. Default values can also be set in the configuration file.

string tooltip = "": The tooltip text that pops up when the mouse is held over the edge. Leave blank for no tooltip. Line breaks can be inserted using the string, "\n".
color edge_line_color = #000000: The line color of the edge.
number edge_line_thickness = 1: The line thickness of the edge.
boolean arrowhead = true: Indicates whether arrowheads should be drawn.
boolean bidirectional = false: Indicates whether the edge is bidirectional. If both the arrowhead and bidirectional properties are set to 'true' then an arrowhead will be drawn at each end of the edge.
number edge_length_weight = 0: The edge's weighting value for determining the edge length. Edge's with a larger weight will have proportionatey longer length. See base_edge_length and edge_length_variation under the visualization config properties.

Configuration options

These properties are set in the XML configuration file. They control the visualization's behavior, the way Constellation Roamer interacts with the embedding webpage, and the way graph data is loaded from the server.

Visualization Config Properties

number tree_depth = 2

The depth of the tree displayed in the visualization. The depth includes the selected node. For example, a depth of 1 will display only the selected node. A depth of 2 will display the selected node and its neighbours. A depth of 3 will display the selected node, its neighbours, and their neighbours.

number node_repulsion_distance = 100

The preferred minimum distance between unconnected nodes.

number base_edge_length = 100

The base value for calculating the preferred distance between two connected nodes. The actual edge length depends on other factors but this value can be used to influence it.

Larger values result in more spread out node layouts.

number edge_length_variation = 0

The amount of variation allowed in the preferred distance between two connected nodes. This value determines the extent to which an edge's edge_length_weight property affects the preferred edge length. The preferred length will be between:

base_edge_length * (1 - edge_length_variation)

and

base_edge_length * (1 + edge_length_variation)

The value should be a number between 0 and 1. Larger values result in larger differences in the distance between nodes.

boolean mouse_drag_panning = true

Indicates whether the mouse can be used to drag the visualization. When set to true, clicking the background and dragging the mouse will pan the visualization.

boolean horizontal_scrollbar = false

Indicates whether the horizontal scrollbar should be displayed.

boolean vertical_scrollbar = false

Indicates whether the vertical scrollbar should be displayed.

boolean zoom_controls = false

Indicates whether the zoom controls should be displayed.

color tooltip_background_color = #ffffcc

The background color for the mouse over tooltip.

color tooltip_font_color = #000000

The font color for the mouse over tooltip.

boolean tooltip_font_bold = false

Indicates whether tooltips should use bold fonts.

boolean tooltip_font_italic = false

Indicates whether tooltips should use italic fonts.

string tooltip_font_family = "Arial"

The tooltip font family. This value is ignored if embedded fonts are used.

number tooltip_font_size = 12

The tooltip font size.

boolean tooltip_embed_fonts = true

Indicates whether tooltips should use embedded fonts. If set to true, the font family is forced to Arial.

number tooltip_max_width = 350

The maximum width of a tooltip.

Integration Config Properties

boolean use_javascript = false: Indicates whether the javascript interface should be activated. When set to true, the Flash movie can communicate with the embedding web page via javascript.
boolean include_instance_id = false: Indicates whether javascript calls receive an instance ID. The instance ID is set by the embedding web page and setting this to true will have it passed back to the web page's javascript methods as the first argument. If you have multiple instances on the same page, this allows you to determine which one is firing an event.

Data Config Properties

The following options allow you to change the way that Constellation Roamer loads data from your server. For more details, see the page on data integration.

string interface_mode = "static_xml"

The type of interface used to load graph data. Currently supported values are 'static_xml' and 'rest_tree'.

The 'static_xml' interface mode simply loads an XML file containing graph data from the given URL. This is the simplest interface but since all the data is loaded before the visualization is displayed, it is not suitable for large datasets.

The 'rest_tree' interface mode loads data dynamically from a REST-like web service. The client sends the ID of a node and the server responds with the nodes and edges contained in a tree rooted at that node.

string url = "sample_graph_data.xml"

The URL where the graph data is loaded. When the request is made, the following strings will be replaced with variable values:

[instance_id]: The instance ID passed to the Constellation instance in the flash_vars
[passthru]: A pass-through variable that comes from the FlashVar of the same name.
[node_id]: The ID of the node being loaded
[depth]: The depth of the tree to load from the server
[timestamp]: The current unix timestamp. Use to break caching of the graph data.

number load_depth = 2

The depth of the tree to load from the server. In any tree interface mode, the client will request a tree of this depth. Ensure that the value of 'load_depth' is not lower than 'min_load_depth', otherwise cached data will be ignored and each traversal will trigger a new request to the server.

number min_load_depth = 3

The depth of the selected node's tree that must be loaded. In any tree interface mode, when a node is selected, the client will ensure that all the nodes in the tree of this depth and rooted at the selected node will be loaded. For example, if node A is selected and the load ahead depth is 2, then the client will check whether node A's neighbours have been loaded. if not, it will request the information from the server.

The depth value includes the selected node. So a value of 1 will only require that the selected node is loaded. A value of 2 will require that the selected node and its neighbours are loaded. A value of 3 will require the selected node, its neighbours, and their neighbours.

Find out what comes with your purchase »