Page tree
Skip to end of metadata
Go to start of metadata

SINCE 3.2.0


Introduction

This functionality is part of HDC.EmbeddedAPI controller and allows an external application to place selected icons based on object ID.

For available system icons, please review this guide: Icons

Sample icons with a context menu placed in individual rooms:

Configuration

Both internal and external IDs are supported. Icons are created based on configuration object with the following structure:

var symbols = {    
      //general call options
      options: {
            domain: "12",          
            objectClass: "HDV_H1_SPACE",
            iconId: "123",		
			sizePercentage: 50,
			alignTo:"C",
			fixedSize: false
      },

         
      menu: [{          
            name: 'My Menu Item',
            callback: this.myFunction,            
            context: this,           
            iconCls: 'far fa-address-card',
      }],  

      "objects": [{          
            id: "5105701/10/1",
            label: 'Room 01'
            iconId: "123",
			fixedSize: false,   
        
            position: {
                  x: 12.32,
                  y: 14.56
            }
      }, {
            id: "5105701/10/107",
            label: 'Room 02'
      }, {
            id: "5105701/10/106",
            label: "Room 03"
      }, {
            id: "5105701/10/7",
            label: "Room 03"
      }]
};

Options:

ParameterDefault OptionsObjectDescription
domain
x

Applicable if IDs given are from external domain

objectClass
x

External object class (only used with domain ID

iconId
xx

Common icon ID for all objects (check icon ID in system configuration) Can be used per object

sizePercentage
xx

If the real icon size is not adequate, it can be altered by changing this parameter accepted values are between 1 and 100. It will be applied evenly to width and height to maintain proper aspect ratio Can be used per icon.

alignTo
xx

Optional icon alignment parameter, can be used per object.

Available options for optional alignTo parameter

  • C - Center

  • LT - Left Top

  • RT - Right Top

  • LB - Left Bottom

  • RB - Right Bottom

  • L - Left

  • R - Right

  • T - Top

  • B - Bottom

fixedSize

SINCE V3.7

xx

Indicate a default value for icon fixed size:

  • true - icon will maintain its size independent from zoom level

  • false - icon will be resized to match current zoom level

position

x

Optional fixed position of the icon (can be saved and restored by an external system)

   position: {
                  x: 12.32,
                  y: 14.56
            }
id
x

Internal or external domain ID (see domain config above)

label

x

Optional object label for the context menu


Menu - Callback Function

A function given as callback in configuration must be set before the configuration object is created and passed to HD.EmbeddedAPI.

Menu configuration parameters:

ParameterValueDescription
name
String

Name of the menu item

callback
Function

Callback function that should be called when menu item is selected

context
Object

Context that should be set for callback

iconCls
String

Icon class to be used, choose from any FontAwsome 5 icons

Choose from gallery of icons in Regular type:

https://fontawesome.com/icons?d=gallery&s=regular


A test function can look like this:

var myFunction = function(params){console.log(params)};


The function will be called with a proper context as set in configuration and with "parameters" argument containing the following information:

classId:"108"
iconId:"1843"
label:"Room 02"
objectId:"76933"
position:{x: 1.6299999505281448, y: 7.682500123977661}
sizePercentage:10
tslSvgId:"ENT-195768"
height:90
width:90


Events

Symbols are a special case of Spots, and support the following events:

  • '*.*.user.spot.select'
  • '*.*.spot.update'


Samples:

HD.PageBus.subscribe('*.*.spot.update', function(event, data) {
    console.log('Spot changed'); console.log(data);
});
var myHandler = function(subject, data) { console.log(data) }; 
HD.PageBus.subscribe('*.*.user.spot.select', this.myHandler, this);

with payload:

docSvgView:constructor 
entity:image#SUB-43
entityId:"SUB-43"
isTempSymbol:true
targetObject:null
symbolData:
	classId:"108"
	height:90
	iconId:"1843"
	label:"Room 02"
	objectId:"76932"
	position:{x: 4.184999942779541, y: 7.882499933242798}
	sizePercentage:10
	tslSvg:null
	tslSvgId:"ENT-195767"
	width:90



Change Icon Location

A preset Icon position can be passed for each object in a configuration:

position: {
     x: 123.333,
     y: 353.443
}


A position of an Icon can be changed by the user. Later on, the position can be recorded as a reaction to event or by using getSymbols() function. 

Functions

FunctionDescriptionArguments
HD.EmbededApi.clearSymbols()Clear all symbols on the current drawingN/A
HD.EmbededApi.setSymbols(symbols);Set symbols according to passed configurationSymbols definition object as described in this manual.
HD.EmbededApi.getSymbols()Get current state of symbols, including their positionN/A

Performance

If a high frequency refresh rate is needed for the same objects, it is advised to perform object conversion from external to internal domain once, and then use internal object class and ID to set symbols.

Otherwise, when objects are passed with external domain, conversion and server round-trip will be performed for every call. HD.EmbededApi.convertEid2hdid function can be used for this conversion. 


  • No labels