HTML Drawing Control

Add HTML drawing control for desktop web browsers

You can add HTML drawing control to views designed to be accessed by Web Central running on the desktop. HTML drawing control for desktop is implemented in /schema/ab-core/controls/drawing/drawing-control.js .

Load a drawing in Web Central

  1. Construct HTML drawing Control by calling Drawing.DrawingControl(svgDivId, svgPanelId , parameters).

    • svgDivId: String – the ID of the div element that will display SVG drawing
    • svgPanelId: String – the ID of the drawing panel
    • parameters: name-value map – common parameters used by all drawings

    var parameters = new Ab.view.ConfigObject(); parameters.divId = "svgDiv"; Var svgControl = new Drawing.DrawingControl(svgDivId, svgPanelId, parameters);

  1. Optionally, you can add ‘events’ parameter by specifying event handlers for different asset types:

    • eventName: String – the event name
    • assetType: String – the asset type that event has effect on
    • handler: Function Object – the custom event handler

    parameters['events'] = [{'eventName': 'contextmenu', 'assetType' : 'rm', 'handler' : this.onContextMenuRoom}, {'eventName': 'click', 'assetType' : 'rm', 'handler' : this.onClickAsset}, {'eventName': 'click', 'assetType' : 'eq', 'handler' : this.onClickEquipment, 'bbox': {width: 25, height: 32}}, ... ];

  2. Call DrawingControl.load(parameters) to load the SVG XML file from server-side and display it in the control.
    • parameters : name-value map – parameters required by the server to find the drawing SVG file and highlight it.

    You must specify primary keys and drawing name of the drawing record in the parameters:

    var parameters = new Ab.view.ConfigObject();
    //primary key values of floor plan location bl_id and fl_id
    parameters.pkeyValues = {'bl_id':bl_id, 'fl_id':fl_id}; parameters.drawingName = drawing_name;

    There are two ways to specify highlights. One way is use to reference the active_plantypes table:

    // plan_type: primary key value of database table active_plantypes
    parameters.plan_type='1 - ALLOCATION';

    See Changing Highlights and Labels on Floor Plans for more details on the active_plantypes table.

    Alternatively, you can specify your own highlight parameters:

    parameters.highlightParameters = [ {
    'view_file' : "ab-sp-space-book-rmxrmstd.axvw",
    'hs_ds' : "ds_ab-sp-space-book-rmxrmstd_rmHighlight",
    'label_ds' : 'ds_ab-sp-space-book-rmxrmstd_rmLabel',
    'label_clr' : 'gray',
    'label_ht' : '0.50'
    }
    ];

    The HTML drawing control also allows you to highlight multiple (up to two) assets. In this example, we are highlighting equipment on top of rooms highlighted by room standards.

    parameters.highlightParameters = [ {
    'view_file' : "ab-sp-space-book-rmxrmstd.axvw",
    'hs_ds' : "ds_ab-sp-space-book-rmxrmstd_rmHighlight",
    'label_ds' : 'ds_ab-sp-space-book-rmxrmstd_rmLabel',
    'label_clr' : 'gray',
    'label_ht' : '0.50'
    }, {
    'view_file' : "ab-sp-space-book-eqxeqstd.axvw",
    'hs_ds' : "ds_ab-sp-space-book-exeqstd_eqxeqstdHighlight",
    'label_ds' : 'ds_ab-sp-space-book-eqxeqstd_eqxeqstdLabel'
    } ];

Sample view