Versions Compared

Old Version 4

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Renders a base image as the canvas and overlays viewer points; each viewer point combines spatial coordinates, a unique key, and a display label sourced from datasource fields.
  • Retrieves the base image and viewer points from dedicated datasources.

(Configured in Visual General Properties)

  • imageUrl displayName – Sets the URL display name of the image to be displayed component shown in the viewerstructure panel. For example, "https://example.com/floorplans/warehouse-a.jpg" provides the base image on which points will be overlaid. This property can also accept relative URLs to images stored within your application.
  • disableScrollbar – Controls whether scrollbars appear when the image is larger than its container. When set to true, scrollbars are hidden even if the image exceeds its container size, which can provide a cleaner appearance but may limit access to parts of the image.

Datasource

(Configured in Datasource)

  • Warehouse Floor Map" allows for easy identification of the component's purpose in the component structure, making it easier for developers to locate and work with this specific image viewer.

(Configured in Visual Properties)

  • imageUrl – Sets the URL of the image to be displayed in the viewer. For example, "https://example.com/floorplans/warehouse-a.jpg" provides the base image on which points will be overlaid. This property can also accept relative URLs to images stored within your application.
  • disableScrollbar – Controls whether scrollbars appear when the image is larger than its container. When set to true, scrollbars are hidden even if the image exceeds its container size, which can provide a cleaner appearance but may limit access to parts of the image.

(Configured in Visibility)

  • displayConditions – Defines conditions for displaying the component. This allows showing or hiding the image viewer based on complex rules involving form values, user roles, or application state. For example, the image viewer might only be shown when a specific building is selected.

Datasource

(Configured in Datasource)

  • imageDataSourceId – Specifies the data source ID for retrieving the image. For example, "api/images/floorplans" connects to an API endpoint that returns image data, allowing dynamic loading of images from a server.
  • getImageHttpRequestParametersMap – Configures HTTP parameters for image
  • imageDataSourceId – Specifies the data source ID for retrieving the image. For example, "api/images/floorplans" connects to an API endpoint that returns image data, allowing dynamic loading of images from a server.
  • getImageHttpRequestParametersMap – Configures HTTP parameters for image fetching. This object maps additional parameters needed for the image request, such as {"buildingId": "${context.selectedBuilding}"} to load the image for a specific building.
  • pointsDataSourceId – Specifies the data source ID for retrieving points to overlay on the image. For example, "api/safety-sensors/status" would connect to an API that returns data about safety sensor locations and their statuses.
  • getPointsHttpRequestParametersMap – Configures HTTP parameters for points data fetching. This object maps additional parameters needed for the points data image request, such as {"floorIdbuildingId": "${context.selectedFloorIdselectedBuilding}"} to load points the image for a specific floorbuilding.

Data Allocation

(Configured in Datasource)

  • positionXFieldName pointsDataSourceId – Specifies the field name in the data source that contains the X coordinate for each pointID for retrieving points to overlay on the image. For example, "locationX"api/safety-sensors/status" would connect to an API that returns data about safety sensor locations and their statuses.
  • getPointsHttpRequestParametersMap – Configures HTTP parameters for points data fetching. This object maps additional parameters needed for the points data request, such as {"floorId": "${context.selectedFloorId}"} to load points for a specific floor.

Data Allocation

(Configured in Datasource)

  • positionXFieldName – Specifies the field name in the data source that contains the X coordinate for 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, "locationYlocationX" tells the component which field in the data represents the vertical 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.

Point with data

Styling

(Configured in General Visual Properties)

  • displayName width – Sets the display name of the component shown in the structure panelwidth of the image when using "useStaticSize" strategy. For example, "Warehouse Floor Map" allows for easy identification of the component's purpose in the component structure, making it easier for developers to locate and work with this specific image viewer.

(Configured in Visual Properties)

  • 800px" sets a fixed width for the image viewer. This property accepts any valid CSS size value including pixels, percentages, or other units.
  • widthAuto
  • width – Sets the width of the image when using "useStaticSize" strategy. For example, "800px" sets a fixed width for the image viewer. This property accepts any valid CSS size value including pixels, percentages, or other units.
  • widthAuto – Controls whether the component width automatically adjusts to its content. When set to true, the component will take only as much width as needed; when false, it follows fixed width settings based on the container or specified values.
  • height – Sets the height of the image when using "useStaticSize" strategy. For example, "600px" sets a fixed height for the image viewer. This property accepts any valid CSS size value including pixels, percentages, or other units.
  • heightAuto – Controls whether the component height automatically adjusts to its content. When set to true, the component height is determined by its content; when false, it follows fixed height settings based on the container or specified values.
  • paddingClass – Configures spacing around the image viewer using CSS classes. For example, "p-3" adds medium padding on all sides of the component, improving its visual spacing within its container.
  • thresholdConfig – Configures conditional styling rules that change the color of points based on data values. For example, you can configure rules that render points as green when a status is "normal", yellow for "warning", and red for "critical", providing at-a-glance status information.

(Configured in Visibility)

  • displayConditions – Defines conditions for displaying the component. This allows showing or hiding the image viewer based on complex rules involving form values, user roles, or application state. For example, the image viewer might only be shown when a specific building is selected.

Actions Actions & Variants

(Configured in Events)

...

  • visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "safetyMonitoringAccess" restricts the image viewer to users with specific safety monitoring permissions, allowing for role-based display of sensitive information.
  • Figma: tba
    • Image: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-71930&t=ExcQFUXKvr1QdxTm-1
    • Data Points: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-72440&t=ExcQFUXKvr1QdxTm-1
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/image-point-viewer

...