HTML Drawing Control

Load and Display a Single Drawing

Load a single drawing into the panel with a set of add-ons, if defined in Ab.view.ConfigObject object:

• NavigationToolbar
• LayersPopup
• AssetTooltip
• DatasourceSelector
• AssetLocator
• AssetPanel
• SelectWindow
• InfoBar
• InfoWindow
• MarkupControl
• User-defined custom add-ons

Syntax

1. Set parameters in ConfigObject:

You need specify no required parameters. You can, however, specify optional parameters used by all drawings under HTML Drawing Control:

• allowMultipleDrawings (allow multiple drawings loaded in the <div>. default to false)
• showTooltips (show asset tooltips. Default to false.)
• …

For other optional parameters, refer to the Define HTML Drawing Control in .axvw file topic.

2. Initialize the drawing control

/**
* Constructor.
* @param divId String Id of <div/> that holds the svg* @param panelId String Id of the panel
* @param config configObject
*/
constructor: function(divId, panelId, config);

Example:

this.svgControl = new Drawing.DrawingControl("svgDiv", "svg_ctrls", parameters);
Loading/Displaying the SVG drawing

3. Load and display the SVG drawing

First, set parameters specific to the SVG drawing, such as pKeyValues, drawingName, and so on.

Example:

var parameters = new Ab.view.ConfigObject(); parameters['pkeyValues'] = {'bl_id':bl_id, 'fl_id': fl_id}; parameters['drawingName'] = drawingName; parameters['orderByColumn'] = 'false'; ….

Then, load the SVG drawing with the passed parameters:

* Retrieves the drawing SVG from server and displays it. Sets add-ons parameters. Updates Navigation toolbar and resizes the drawing to fit panel size. * * @param parameters Object server-side required info such as as bl_id, fl_id, viewName, highlight * and label dataSource names to get and process corresponding SVG * @return DrawingBase reference to the drawing loaded */ load: function(parameters);

Example:

this.svgControl.load(parameters);

By default, the drawing will be in "Zoom Extents" mode within the container. The drawing control automatically resizes the drawing when the panel or window resizes.

Unlike Flash, drawing name does not display at bottom of the drawing, instead, user has the option to specify them in panel's title bar, InfoBar, InfoWindow, or other <div> object at application level.

Example View: http://localhost:8080/archibus/schema/ab-products/solutions/programming/drawing/ab-ex-dwg-html-control-highlightselector.axvw