HTML Drawing Control

Define HTML drawing control in a panel

Add the libraries

Step 1: Add reusable controller and components.

< panel type="view" id="highlightStylesView" file="drawing-common-controls.axvw"/>

This is required for all HTML drawing control views.

Step 2: Add your custom controller js file to load drawing control SVG and custom events.

This is required for all HTML drawing control views.

Step 3: Add user defined datasources to support datasource/label selector.

The specification below is optional, necessary to designate views only when the Datasource/Labels selector add-on is enabled. For your API, define the datasources and labels you want to show.

< panel type="view" id="highlightStylesView" file="ab-ex-dwg-html-control-datasources.axvw"/>

<panel> syntax:

Parameters:

type	use html to define HTML Drawing Control
id	the panel id
dataSource	always use none
region	the layout region to display drawing SVG

<panel>'s children elements:

<title> - title to display at the panel title bar.
<html>'s <div> syntax

Parameters:

id	the container id to hold the drawing SVG content

Example

<panel type="html" id="svg_ctrls" dataSource="none" region="center"> <title>Highlight Assets</title> <html> <div id="svgDiv"> </div> </html> </panel>

Define the HTML Drawing Control in custom controller js file

There is no panel tag for the HTML drawing control, so you need to define “html” type and add the drawing control in the js file dynamically.

Step 1: Define parameters to pass to the drawing control's constructor.

These parameters are applied to all drawings.

Parameter	Description	Example
divId	Container's div id to hold SVG drawing. This value should match the panel's <html>'s <div> id.	parameters['divId'] = "svgDiv";
multipleSelectionEnabled	Allows you to select multiple assets in SVG. Possible values are: 'true' or 'false' If the value is true, and you enable `Navigation Toolbar` add-on,the multiple select iconappears. Click the icon to select and unselect.	parameters['multipleSelectionEnabled'] = 'true';
zoomWindowEnabled	Allows you to zoom into selected window area in SVG. Possible values are: 'true' or 'false'. If the value is true, and you enable `Navigation Toolbar` add-on, the zoom into selected window area icon appears.Click the icon to select and unselect.	parameters[‘zoomWindowEnabled’] = 'true';
showTooltip	Display tooltip when the user hovers the mouse over the asset. If this is set 'true', you need to define '`AssetTooltip`' add-on in the `'addOnsConfig`'.	parameters['showTooltip'] = 'true';
orderByColumn	True, if ordering the buildings by column, which means the floors for a given building display in the same column, or vertically in the data table. Otherwise false, which means the floors for a given building display in the same row, or horizontally in the data table. Default is true.	parameters['orderByColumn'] = 'false';
events	Define custom event or events for assets. Create one event for each asset type.	parameters['events'] = [{'eventName': 'contextmenu', 'assetType' : 'rm', 'handler' : this.onContextMenuRoom}, ...];
allowMultipleDrawings	Allows multiple drawings to display within a panel. Default to ‘false’.	parameters['allowMultipleDrawings'] = 'true';
topLayers	Specify the layers that need to be re-ordered to go above the rest of the asset layers so that registered events can be triggered.	parameters['topLayers'] = 'eq;pn;jk;fp';
highlightParameters	Define basic highlight parameter. Refer to Highlight and Border Highlight for details.	parameters['highlightParameters'] = [{'view_file':"ab-ex-dwg-control-datasources.axvw", 'hs_ds': "highlightNoneDs", 'label_ds':'labelNoneDs'}];
bordersHighlightSelector	Enable borders highlight datasource selector. Refer to Highlight and Border Highlight for details.	parameters['bordersHighlightSelector'] = true;
borderSize	Pass borderSize for border highlight. Refer to Highlight and Border Highlight for details.	parameters['borderSize'] = 18;
legendPanel	Enable legend panels. Refer to Highlight and Border Highlight for details.	parameters['legendPanel'] = 'legendGrid';
borderLegendPanel	Enable border legend panels. Refer to Highlight and Border Highlight for details.	parameters['borderLegendPanel'] = 'borderLegendGrid';
addOnsConfig	JSON map of a list of add-ons and their parameters. The add-on can be one or more of the following: NavigationToolbar LayersPopup AssetTooltip DatasourceSelector AssetLocator SelectWindow InfoBar InfoWindow Cluster Marker AssetPanel MarkupControl	parameters['addOnsConfig'] = { 'NavigationToolbar': {divId: "svgDiv"}, … }

addOnsConfig JSON key-value parameters

The table below contains details for each add-on key-value.

Key	List of possible keys	Example
NavigationToolbar	divId: SVG container <div> id	'NavigationToolbar': {divId: "svgDiv"}
LayersPopup	divId: SVG container <div> id layers: user-defined layers list to show in popup window, could be svg or ACAD format defaultLayers: user-defined default layers list to be checked in popup window and turned on in SVG drawing customEvent: user-defined event handler when user check or uncheck the specified layer collapsed: true if layers popup window is collapsed; false if the window is open. By default, the window is open	'LayersPopup': {divId: "svgDiv", layers:"rm$;rm$TXT;eq-assets;eq-labels;jk-assets;jk-labels;background", defaultLayers:"rm-assets;eq-assets;jk-assets;", customEvent: onCheckBoxChanged, collapsed: true }
AssetTooltip	handlers: an array of handlers, within which a JSON object of the following format: assetType: asset type datasource: the datasource where the tooltip retreive value from fields: the fields of the datasources to show on the tooltip handler: custom handler when user puts mouse over the asset type	'AssetTooltip': {handlers: [{assetType: 'rm', datasource: 'labelDepartmentDs', fields: 'rm.rm_id;rm.dv_id;rm.dp_id'}, {assetType: 'eq'}, {assetType: 'jk', handler: this.onMouseOverJack}]}
DatasourceSelector	panelId: the id of panel holding SVG drawing afterSelectedDataSourceChanged: custom event handler when user changes Datasource selector item	`'DatasourceSelector': {panelId: "svg_ctrls", afterSelectedDataSourceChanged: this.afterSelectedDataSourceChanged }`
AssetLocator	divId: SVG container <div> id	`'AssetLocator': {divId: "svgDiv"}`
SelectWindow	assetType: a list of asset types customEvent: user-defined event handler when user finishes window selecting by releasing the mouse.	'SelectWindow': {assetType: "rm;eq", customEvent: this.onSelectWindow}
InfoWindow	width: the width of the window. Default is 300px. position: values are 'top' or 'bottom'. Default to 'top'. customEvent: user-defined event handler when user closes the InfoWindow	'InfoWindow': {width: '400px', position: 'bottom', customEvent: this.onCloseInfoWindow},
Cluster	Refer to the Cluster topic.	n/a
Marker	Refer to the Cluster and Marker topics	n/a
Asset Panel	Refer to the Asset Panel topics	n/a
MarkupControl	Refer to Markup Control topics	n/a

Example:

var parameters = new Ab.view.ConfigObject();
// pass bl/fl or site to find SVG drawing name to load
parameters['pkeyValues'] = {'bl_id':bl_id, 'fl_id':fl_id};
// pass the container's div id
parameters['divId'] = "svgDiv";
// pass other paramters
parameters['multipleSelectionEnabled'] = 'true';
parameters['showTooltip'] = 'true';
parameters['topLayers'] = 'eq;pn;jk;fp';
// pass paremters for add-on components such as navigation toolbars.
parameters['addOnsConfig'] = {…}

Step 2: Define event handlers and construct Drawing Control.

Example:

// call the drawing control constructor and pass in parameters
this.svgControl = new Drawing.DrawingControl("svgDiv", "svg_ctrls", parameters);

Step 3: Define parameters to pass into Drawing Control’s load() API, to load one or more SVG drawings into drawing control. These parameters apply only to the loaded drawing.

Parameter	Description	Example
pkeyValues	JSON map of either bl_id/fl_id or site_id. The value is used to determine the SVG drawing name to load from server-side.	`parameters['pkeyValues'] = {'bl_id': 'HQ', 'fl_id':'17'};` Or `parameters['pkeyValues'] = { 'site_id': 'MARKET'};`
highlightParameters	Define basic highlight parameter. Refer to Highlight and Border Highlight for details.	`parameters['highlightParameters'] = [{'view_file':"ab-ex-dwg-control-datasources.axvw", 'hs_ds': "highlightNoneDs", 'label_ds':'labelNoneDs'}];`
bordersHighlightSelector	Enable borders highlight datasource selector. Refer to Highlight and Border Highlight for details.	`parameters['bordersHighlightSelector'] = true;`
borderSize	Pass borderSize for border highlight. Refer to Highlight and Border Highlight for details.	`parameters['borderSize'] = 18;`
legendPanel	Enable legend panels. Refer to Highlight and Border Highlight for details.	`parameters['legendPanel'] = 'legendGrid';`
borderLegendPanel	Enable border legend panels. Refer to Highlight and Border Highlight for details.	`parameters['borderLegendPanel'] = 'borderLegendGrid';`

Example:

var parameters = new Ab.view.ConfigObject(); // pass bl/fl or site to find SVG drawing name to load parameters['pkeyValues'] = {'bl_id':bl_id, 'fl_id':fl_id}; //pass in drawing name parameters['drawingName'] = drawingName; // load SVG from server and display in SVG panel's <div id="svgDiv"> this.svgControl.load(parameters);