Use AssetDrawingControl

Whenever possible, use the AssetDrawingControl reusable component. It configures the HTML drawing control with typical application settings and event listeners.

Applications that use the common drawing controller:

  • Telecom Console
  • Equipment Systems Console
  • Capital Projects reports
  • Risk report

This topic has the following sections:

When to Use

Use the controller in these situations:

Is recommended by default for new apps. It contains most of the drawing controller API and the configuration is easy to understand and use. Less code to write and independent on the core feature changes (if something was changed in the core API the changes will propagate only to the common drawing controller and you don't need to check all the view files that are using the core drawing API).

  • Single and multiple drawings.
  • Selecting assets and layers in multiple drawings.
  • Hatch pattern/gradient highlights.
  • Border highlights.
  • Highlight and border highlight legend panels.
  • Mouse zoom, pan, and zoom window.
  • Asset window.
  • Additional controller features: Straight forward configuration, more control over the displayed drawings and selected assets.

Do not use it for:

  • For advanced customization.
  • Drag and drop assets between multiple drawings and the asset window.
  • Redlining API (integrated into the main control, not a separate control).

File Structure

Control files are in the \ schema\ab-products\common\resources\view\drawing\ folder.

FIle Description Cmment
ab-drawing-controller-common.axvw Drawing view definition. Contains the drawing panel with svg drawing div. Required
ab-drawing-controller-common.js The drawing control. Used like reusable component (Best practices for reusable components). Required
ab-drawing-controller-common-ds.axvw Common list of data sources used for highlights, borders, labels and asset tooltips. Optional

The test view is /ab-products/solutions/programming/drawing/ab-ex-dwg-html-control-common-drawing-control.axvw

Adding an Asset Drawing Control to a View

View definition

1. Include the drawing control file (required)

<panel type="view" id="drawingPanelView" file="ab-drawing-controller-common.axvw" layoutRegion="drawingRegion"/>

2. Include in the .axvw file the common drawing datasources file (optional). This can be manually defined in the view file.

<panel type="view" id="commonDrawingDataSources" file="ab-drawing-controller-common-ds.axvw"/>

3. Initialize the drawing object with configuration properties:

var drawingControl = View.createControl({ control: 'AssetDrawingControl', panel: 'drawingPanel', container: 'svgDiv', assetTypes: ['rm', 'eq', 'jk', 'fp', 'pn'], highlightParameters: [{ ... }] actions: actions, reports: reports, //... other configuration options ... });

Configuration Properties

Property Description Example value Comment
panel The ID of the HTML panel in the view. 'drawingPanel'
container The ID of the HTML element that contains the control. 'svgDiv'
assetTypes An array of asset type. ['rm', 'eq', 'jk', 'fp', 'pn']

Optional. If not specified, ; default 'click' and 'contextmenu' is not added for each asset type.

topLayers Asset top layers. jk;fp Optional. Assets layers to place on top so that event will fire on them (not blocked by bigger assets, i.e. rm).
multipleSelectionEnabled

Allows to select multiple assets.

true Optional. By default multiple selection is disabled.
allowMultipleDrawings Allows multiple drawings true Optional. By default multiple drawings is disabled.
orderByColumn Multiple drawings layout. false Optional. By default true if ordering the buildings by column, meaning the floors from the same building will display on the same column (vertically), false otherwise, meaning the floors from the same building will display on the same row (horizontally).

bordersHighlightSelector

Show border highlight selector true Optional. By default, border highlight selector is not enabled.
borderSize Border highlight selector size 18 Optional. By default, the border width is 20.
diagonalSelection diagonal selection border size { borderWidth: 15}

Optional. By default, the border width is 20.

showNavigation Display drawing navigation. false Optional. By default navigation is visible.
showPanelTitle

Display panel title after the drawing is loaded

true Optional. Title: Plan for building {0} and floor {1}.
selectAssetHighlightColor Select asset highlight color 'orange' Optional. By default, the color is #00ffff
legendPanel Enable custom legend panel legendPanel: 'customLegendPanelId'

Optional. By default, the legend panel is displayed if highlightParameters are provided and showSelector is true.

borderLegendPanel Enable custom border legend panel legendPanel: 'customBorderLegendPanelId' Optional. By default, the border legend panel is displayed if highlightParameters are provided and showSelector is true.
print Display drawing print action. true

Optional. By default the print action is not displayed.

reset Display drawing reset action. true true
Highlight Parameters
highlightParameters highlightParameters
view_file View file name [{ 'view_file': "ab-drawing-controller-common-ds.axvw", 'hs_ds': "highlightDivisionsDs", 'label_ds': 'labelNamesDs', 'label_ht': '0.60', showSelector: false }]

Optional. By default no highlight is applied on the drawing.

hs_ds Highlight data source
label_ht Label height.
showSelector Show data source selector. Default true. If false, the highlight selector and legend panels are not displayed.
Layers Popup
LayersPopup Custom drawing layers

{layers: "rm-assets;rm-labels;eq-assets;eq-labels;jk-assets;jk-labels;gros-assets;gros-labels;background",

defaultLayers: "rm-assets;rm-labels;eq-assets;jk-assets;gros-assets "}

Optional. If not specified, no layers are displayed.
layers Available drawing layers.
default layers Default selected layers.
Asset Tooltip
assetTooltip assetTooltip [
{assetType: 'rm', datasource: 'labelStandardsDs', fields: 'rm.rm_id;rm.rm_std'},
{assetType: 'eq', datasource: 'tooltipEqDs', fields: 'eq.eq_id;eq.eq_std;'},
{assetType: 'jk', datasource: 'tooltipJkDs', fields: 'jk.jk_id;jk.jk_std'},
{assetType: 'fp', datasource: 'tooltipFpDs', fields: 'fp.fp_id;fp.fp_std'},
{assetType: 'pn', datasource: 'tooltipPnDs', fields: 'pn.pn_id;pn.pn_std'} ]

Optional. If not specified, no tooltips are displayed.

Tooltip datasource and fields are optional.

Without specifying them, the control will grasp displayed SVG labels as tooltip - much faster and more efficient than querying database to get tooltip.

Maximize
maximize An object that defines how the drawing view is maximized. Optional. By default is true, the drawing view is maximized as pop-up dialog.
showAsDialog Maximize view as opop-up dialog. {showAsDialog:false} When false, the drawing view has layout actions (expand, collapse)
viewName Custom view name to open drawing when maximize. 'ab-eam-asset-drawing.axvw' Optional. If not specified, the drawing is maximized using the view file 'ab-eam-asset-drawing.axvw'
expand . Function to expand a drawing view layout function (
var layout = View.getLayoutManager('mainLayout');
layout.expandRegion('north');
layout.expandRegion('west');
layout.recalculateLayout();
)

Optional by default.

Required when showAsDialog=false.

collapse Function to collapse a drawing view layout. function (
var layout = View.getLayoutManager('mainLayout');
layout.collapseRegion('north');
layout.collapseRegion('west');
layout.recalculateLayout();
) 		Optional by default. Required when showAsDialog=false.
icon Maximize action icon. '/schema/ab-core/graphics/icons/view/maximize.png'

Optional.

When showAsDialog=false, the icons are set dynamically depending on the action: maximize: '/schema/ab-core/graphics/icons/view/maximize.png' minimize: '/schema/ab-core/graphics/icons/view/minimize.png'

Info window
infoWindow Set info window drawing properties { width: '400px', position: 'bottom', customEvent: customCloseInfoWindow}

Optional. If not specified, the info window is displayed at the bottom of the drawing with the width of 400px.

On close, the drawingState is set to 'select'.. Position values: 'top' or 'bottom'

Actions
actions Array of objects the contains custom asset actions triggered when an asset is selected and right clicked. {
text: "actionName",
id: 'action_id',
visible: function (assetType) { return 'eq' === assetType; },
listener: function (id, assetType, selectedAssetId) { // {app code}
}
}

Optional. If not specified, no action is performed on context menu on the assets.

The config parameter assetTypes needs to be defined.

Reports
reports Array of objects the contains reports to display as menu action in the drawing panel. {text: "reportName",listener: function () { // {app code} }} Optional. If not specified, reports menu is not displayed.
Listeners
listeners Event listeners to auto-wire to control events. Optional. If not specified, no listener is applied.
afterDrawingLoaded Event called after the drawing is loaded. function (drawingController, svgId) { ... } Optional. If not specified, nothing happens.
afterDrawingsLoaded Event called after all drawings are loaded. function (drawingController, drawings) { ... } Optional. The drawings object contains all the loaded drawings.

onClickAsset

Overwrite default onClickAsset event function (drawingController, svgId, selectedAssetId, assetType) { ... } Optional. If not specified, the asset is highlighted.
onClickAssetAfter Called after the default onClickAsset event when it's not overwrite. function (drawingController, svgId, selectedAssetId, assetType, selectedAssets, selected) { ... } Optional. If not specified, nothing happens.
onContextMenu Overwrite default onContextMenu event function (drawingController, svgId, selectedAssetId, assetType, el) { ... } Optional. If not specified, context menu action is displayed if actions parameters is defined.
onRenderLegendLabel Use to set legend text according the legend level value function (row, column, cellElement) { ... } Optional. Called on afterCreateCellContent for both legendPanel and borderLegendPanel
customPanelTitle Overwite default setPanelTitle function (drawingController, drawings) { ... } Optional. If not specified, panel title is set as: "Plan for building {0} and floor {1}". Case of multiple drawings: "Multiple Drawings".
maximize Overwrite default maximize function (drawingController) { ... } Optional. If not specified, the drawing is maximized using the default view file 'ab-eam-asset-drawing.axvw'
reset Overwrite default reset function (drawingController) { ... } Optional. If not specified, the all drawing highlights are reset.
print Overwrite default print function (drawingController) { ... } Optional. If not specified, the drawing svg is printed to PDF, what you see is what you get.

Controller Methods

Method Parameters Return Value Description
showDrawing

{
// Required
pkeyValues: {blId: 'SRL', flId: '03'},
// Optional. If not present, the drawing name is returned from db based on pkeyValues drawingName: 'srl03',
// Optional. Array of assets to find.
findAssets: [{
assetType: 'rm',
assetIds: [376],
highlightCss: 'zoomed-asset-red-bordered',
// Default: zoomed-asset-default zoom: false // zoom to asset. Optional. If not present, the drawing is zoomed to the asset.
}],
// Optional. Array of highlight assets. highlightAssets: [{ assetType: 'eq',
assetIds: ['45001','45002','45003'],
color: 'blue' // Optional. Default: #FF9632
}, {
assetType: 'rm',
assetIds: ['370B','370A','371CHS'],
color: 'green'
}]
};

Display drawing on drawing panel.
showDrawings [{
pkeyValues: {blId: 'SRL', flId: '03'},
findAssets: [{
assetType: 'rm',
assetIds: ['376'],
highlightCss: 'zoomed-asset-red-bordered',
zoom: false
}],
highlightAssets: [{
assetType: 'eq',
assetIds: ['45001','45002','45003'],
color: 'blue'
}, {
assetType: 'rm',
assetIds: ['370B','370A','371CHS'], color: 'green'
}]
},{
pkeyValues: {blId: 'HQ', flId: '18'},
}] 		Display a list of drawings on the drawing panel.

unloadDrawing

{string} blId - building id.

{string} flId - floor id.

{string} [drawingName] - Drawing name. Optional, to be specified when exists more drawing on the same building and floor

Unload a specific drawing
getDrawingsConfigParameters {Array.<Object>} - Existing drawings parameters. Get drawing config parameters.
getDrawingConfiguration

{string} blId - Building id.

{string} flId - Floor id.

{Object} A map of selected drawings Get drawing by blId and flId
addHighlightParameterRestriction {Ab.view.Restriction} restriction Pass runtime restriction to highlight dataSource.
addHighlightDataSourceParameter {Object} parameter - {consoleRestriction: 'activity_log.is_hazard='Yes''} Pass runtime values to highlight dataSource parameters.
clearDrawingPanel Clear drawing panel with actions
resetHighlight

Reset all drawing highlights and set drawing state to select

setDrawingPanelTitle Set drawing panel title.
showDrawingPanelActions Show drawing panel actions.
displaySelectWindowResult Show select assets on info window.

Drawings object - A map of Selected Drawings

Parameter Description Example Comment
pkeyValues Drawing primary key values
(blID + fl_id) 		{blId: 'SRL', flId: '03'} Required
drawingName Drawing name. 'srl03' Optional. If not present, the drawing name is returned from database based on pkeyValues.
findAssets Array of assets to find. [{assetType: 'rm',
assetIds: [376],
highlightCss: 'zoomed-asset-red-bordered', // Default: zoomed-asset-default
zoom: false // zoom to asset. Optional. If not present, the drawing is zoomed to the asset.
},...] 		Optional
highlightAssets Array of highlight assets. [ {assetType: 'eq',
assetIds: ['45001','45002','45003'],
color: 'blue' // Optional. Default: #00ffff
},...] 		Optional.

Display One Drawing at a Time

var drawing = { // Required pkeyValues: {blId: 'SRL', flId: '03'}, // Optional. If not present, the drawing name is returned from db based on pkeyValues drawingName: 'srl03', // Optional. Array of assets to find. findAssets: [{ assetType: 'rm', assetIds: [376], highlightCss: 'zoomed-asset-red-bordered', // Default: zoomed-asset-default zoom: false // zoom to asset. Optional. If not present, the drawing is zoomed to the asset. }], // Optional. Array of highlight assets. highlightAssets: [{ assetType: 'eq', assetIds: ['45001','45002','45003'], color: 'blue' // Optional. Default: #FF9632 }, { assetType: 'rm', assetIds: ['370B','370A','371CHS'], color: 'green' }] }; drawingControl.showDrawing(drawing);

Display Multiple Drawings at Once

var drawings = [{ pkeyValues: {blId: 'SRL', flId: '03'}, findAssets: [{ assetType: 'rm', assetIds: ['376'], highlightCss: 'zoomed-asset-red-bordered', zoom: false }], highlightAssets: [{ assetType: 'eq', assetIds: ['45001','45002','45003'], color: 'blue' }, { assetType: 'rm', assetIds: ['370B','370A','371CHS'], color: 'green' }] },{ pkeyValues: {blId: 'HQ', flId: '18'}, }]; drawingControl.showDrawings(drawings);

Drawing Actions and Reports

// List of object actions that will be displayed when right clicked on an asset. var actions = []; actions.push({ text: "action1", id: 'action1', visible: function (assetType) { // visible action for asset type return 'eq' === assetType; }, listener: function (svgId, actionId, assetType, selectedAssetId) { onAction(this, svgId, actionId, assetType, selectedAssetId); } }); actions.push({ text: "action2", id: 'action2', visible: function (assetType) { return 'jk' === assetType; }, listener: function (svgId, actionId, assetType, selectedAssetId) { onAction(this, svgId, actionId, assetType, selectedAssetId); } }); actions.push({ text: "action3", id: 'action3', listener: function (svgId, actionId, assetType, selectedAssetId) { onAction(this, svgId, actionId, assetType, selectedAssetId); } }); // List of object reports that will be displayed on the drawing panel toolbar like a Menu. var reports = []; reports.push({ text: "report1", listener: function () { onReport(this, 'report1'); } }); reports.push({ text: "report2", listener: function () { onReport(this, 'report2'); } }); reports.push({ text: "report3", listener: function () { onReport(this, 'report3'); } }); /** * On contextmenu asset action. * @param {Object} drawingController - Drawing control. * @param {string} svgId - Drawing svg id. * @param {string} actionId - Action id. * @param {string} assetType - Asset type. * @param {string} selectedAssetId - Selected asset id. */ function onAction(drawingController, svgId, actionId, assetType, selectedAssetId) { drawingController.svgControl.getAddOn('InfoWindow').setText(svgId + ' ' + actionId + ' ' + assetType + ' ' + selectedAssetId); } /** * On report action. * @param {Object} drawingController - Drawing control. * @param {string} reportId - Report id. */ function onReport(drawingController, reportId) { drawingController.svgControl.getAddOn('InfoWindow').setText('Report ' + reportId + ' was selected'); }

Map of Selected Assets

The selected object contains for each drawing the selected asset ids by asset type. Usefull to query asset data.

// asset type: asset defined in config.assetTypes selectedAssets[svgId] = [ {assetType: ['assetId1','assetId2']} ] .... // Display select window result drawingCOntrol.displaySelectWindowResult();