Asset labeling and tooltips

The control accesses asset labels and displays tooltips by following published SVG group element <g id="asset-labels"> .

<g id="asset-labels" font-family="Arial" font-weight="bold" font-size="1.5em" text-anchor="middle"> <g id="rm-labels" font-size="1.5em"> <g id="l-rm-HQ;19;168" transform="translate(532.2,211.02)"> <text>168</text> <text>OFFICE-A</text> </g> .... </g> <g id="eq-labels" font-size="5.2"> <g id="l-eq-SMOK-DET-003" transform="translate(377.31,530.84)"> <text>SMOK-DET-003</text> </g> </g> <g id="fn-labels" font-size="3.9"> <g id="l-fn-688" transform="translate(765.97,241.39)"> <text>688</text> </g> </g>

Each asset type has its group element like <g id="rm-labels"> to hold all its labels.

<g id="rm-labels" font-size="1.5em"> <g id="l-rm-HQ;19;168" transform="translate(532.2,211.02)"> <text>168</text> <text>OFFICE-A</text> </g> .... </g>

Each individual asset has its group element with the id to contain its primary key values like <g id="l-rm-HQ;19;168"> .

<g id="l-rm-HQ;19;168" transform="translate(532.2,211.02)"> <text>168</text> <text>OFFICE-A</text> </g>

Refer to the Java Script example below to grasp SVG asset labels.

/** * Gets asset labels by specified asset type and id. * *@param: assetType asset type like "rm". *@param: assetId asset id like "HQ;19;168". *@return: The asset labels in HTML format. */ getAssetLabels: function(assetType, assetId){ var content = ''; var label = d3.select("[id='l-"+assetType+"-" + assetId + "']"); if(label === undefined || label=== null){ return assetId; } var texts = label.selectAll('text'); var text; texts.each(function() { text = d3.select(this).text(); if(text && text !== ''){ content += text + '<br>'; } }); return content; }

Asset highlighting

The control uses published SVG group element <g id="assets" > to handle asset highlighting.

<g id="assets" fill="none"> <g id="rm-assets" class="rm-asset"> <path id="HQ;19;168" d="M848.95,141.02l-81.5,0l-9,0l-462,0l-33,0l0,-83l-48,0l0,63l0,108l0,84l0,51l48,0l0,-83l512,0l0,2l71.5,0l0,-72l2,0z" /> ... </g> <g id="eq-assets" class="eq-asset"> <use xlink:href="#SMOKDET2" id="SMOK-DET-003" x="644.02" y="544.09" insX="644.02" insY="544.09">.</use> </g> <g id="fn-assets" class="fn-asset"> <use xlink:href="#circleblock" id="688" x="967.81" y="241.39" insX="967.81" insY="241.39">.</use> </g> </g>

Each asset type has its group element like <g id="rm-assets"> to hold its all assets.

<g id="rm-assets" class="rm-asset"> <path id="HQ;19;168" d="M848.95,141.02l-81.5,0l-9,0l-462,0l-33,0l0,-83l-48,0l0,63l0,108l0,84l0,51l48,0l0,-83l512,0l0,2l71.5,0l0,-72l2,0z" /> <path id="HQ;19;109" d="M1455.47,285.09l0,-54.98l-1,0l0,-81l-29.25,0l0,-3l-165.75,0l0,3l-32,0l0,135.98z" /> ... </g>

Each asset has its own element with the id to contain its primary key values like <path id="HQ;19;168" ...> .

<path id="HQ;19;168" d="M848.95,141.02l-81.5,0l-9,0l-462,0l-33,0l0,-83l-48,0l0,63l0,108l0,84l0,51l48,0l0,-83l512,0l0,2l71.5,0l0,-72l2,0z" />

Refer to the Java Script example below to access SVG assets by their type.

/** * Highlights the assets by specified asset type. * * @param: assetType asset type like "rm". * @param: options Map of highlight options such as color and so on. */ highlightAssetsByType: function(assetType, options){ var self = this; d3.selectAll("#" + assetType + "-assets").selectAll("*") .each(function () { options['svgId'] = this.farthestViewportElement.id; self.highlightAsset(this.id, options); }); }

Asset background layers

The control checks and displays asset and background layers with SVG <g id="background"> .

<g id="background" fill="none"> <g id="layer-WA-EXT" class="cnc-0"> <path d="M1226.47,149.11l0,-64" /> <path d="M752.47,139.11l0,-54" /> ... </g> <g id="layer-DR" class="dr"> <path d="M1146.94,424.62l-25.46,-25.46" /> ... </g> ... </g>

Each layer has its group element with id to contain its layer name like <g id="layer-WA-EXT">.

<g id="layer-WA-EXT" class="cnc-0"> <path d="M1226.47,149.11l0,-64" /> <path d="M752.47,139.11l0,-54" /> ... </g>

Refer to the Java Script example below to collect SVG background layers.

/** * Gets background layers by specified floor plan SVG. * *@param: SVG floor plan. *@return: Array of published SVG background layers. */ getBackgroundLayers: function(svg){ var bgLayersNode = svg.selectAll("#background").node(); var bgLayers = (bgLayersNode ? bgLayersNode.childNodes: []); var svgLayers = []; for(var j=0; j<bgLayers.length; j++) { if (bgLayers[j].nodeName === 'g') { svgLayers.push(bgLayers[j].id); } } return svgLayers.sort(); }

Area unit in markup

The control's area markup displays the area with units, which relies on the published units in floor plan's SVG <view id="defaultView" viewBox="-47.89 -312 1614 1056" units="inches" /> .

The control displays area markup with imperial or metric units, based on the following logic.