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.

<js file="ab-ex-dwg-html-control-eq-events.js"/>

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 icon multi_select_blue.png appears. 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 zoom_selected_window_area.png 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.

K ey

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);