Page History
...
- The Dynamic Image Point Viewer displays an image with interactive points overlaid.
- It allows users to view and interact with specific locations on an image.
- Points can change appearance based on data values.
- It is suited for interactive maps, facility diagrams, or process visualizations.
- The component supports dynamic data sources for images and points.
Specs
Tokens
| Token | Description |
|---|---|
| displayName | Display name shown in the structure panel |
| imageUrl | URL of the image displayed in the viewer |
| resizeImageStrategy | Strategy for resizing image |
| fitToContainer | Scales the image to fit the container |
| useStaticSize | Uses specified width and height values |
| fillWholeContent | Fills the entire container, may crop |
| useRealSize | Displays the image at actual size |
| width | Fixed width when using static size strategy |
| widthAuto | Automatically adjusts width to content |
| height | Fixed height when using static size strategy |
| heightAuto | Automatically adjusts height to content |
| disableScrollbar | Controls visibility of scrollbars |
| paddingClass | Adds spacing around the image viewer |
| thresholdConfig | Conditional styling rules for points |
| imageDataSourceId | Data source ID for retrieving the image |
| getImageHttpRequestParametersMap | HTTP parameters for image fetching |
| pointsDataSourceId | Data source ID for retrieving points |
| getPointsHttpRequestParametersMap | HTTP parameters for points fetching |
| positionXFieldName | Field name for X coordinate |
| positionYFieldName | Field name for Y coordinate |
| keyFieldName | Field name for unique point identifier |
| displayFieldName | Field name for tooltip display text |
| events | Configurable events the component can trigger |
| ON_IMAGE_POINT_CLICK (Events) | Event when a point is clicked |
| ON_IMAGE_CLICK (Events) | Event when the image is clicked |
| ON_IMAGE_POINT_DRAG_ENDED (Events) | Event when a point drag ends |
| ON_IMAGE_POINT_VIEWER_CONTEXT_MENU_ACTION (Events) | Event when a context menu action is selected |
| ON_GLOBAL_PARAMETERS_CHANGE (Events) | Event when global parameters change |
| ON_INIT (Events) | Event when the component is initialized |
| ON_DESTROY (Events) | Event when the component is destroyed |
| contextMenuLabel | Text label for context menu actions |
| visibilityPolicySetId | Policy set ID controlling visibility |
| displayConditions | Rules for showing or hiding the component |
| dataTestId | Identifier for automated testing |
| enableAsHotspot | Enables guided tour hotspot |
| guidedTourHotSpotTitle | Title for guided tour hotspot |
| guidedTourHotSpotDescription | Description for guided tour hotspot |
...
- positionXFieldName – Specifies the field name in the data source that contains the X coordinate for each point. For example,
"locationX"tells the component which field in the data represents the horizontal position of each point on the image. - positionYFieldName – Specifies the field name in the data source that contains the Y coordinate for each point. For example,
"locationY"tells the component which field in the data represents the vertical position of each point on the image. - keyFieldName – Specifies the field name that uniquely identifies each point. For example,
"sensorId"helps the component track individual points and associate them with data records. - displayFieldName – Specifies the field name that contains the display text for each point's tooltip. For example,
"sensorName"determines what text is shown when users hover over a point.
Styling
(Configured in General Properties)
...
