Real Time Location System UI

Note

The web UI is only provided as a reference interface on how to use the Analytics & Tracking API to query & present various data metrics & KPIs, not meant for production. You’ll need to improve use-case specificity, usability, robustness, scalability, & security, etc., for production.

This web UI, developed with ReactJS framework, Google Maps API, and Networking API, provides a reference UI for the Occupancy Analytics application.

The following sections describe the architecture of this web UI and the user workflow.

Note

This reference UI is well tested on Chrome Browser.

Overview

This visualization application involves presentation of locations/markers over a floor-map and numerical/textual analytics data in congruence for a contextual understanding of the scenario being shown to the user, all in real-time. For all the analytics data and application metadata, the UI application queries the Web APIs server using HTTP channels.

Configurations

For more context on configuration

As a component of the Real Time Location System application, please refer to its Operation Parameters section.
As a standalone microservice, refer to the README.md in its respective directory within metropolis-apps-standalone-deployment/modules/.

If any parameter needs to be changed, UI needs to be restarted.

The parameters in Real Time Location System UI configuration are described as follows:

{
  "docType": "uiConfig", -- used by UI app
  "mapVizPerIdPastLocationsLengthMs": 5000 -- time based (milliseconds) length of object trajectories on the map
}

User Interactions

Application Place Header

On the left side, the widget displays the name of the deployment location, while the right side shows the current local time of the deployment location, adjusted to the time zone of the UI viewer.

Map View

This widget provides:

Visualization of object locations and their recent past trajectories on a top-view map of the scene.
Representation of camera locations, including orientations (if available in the system calibration file) and field of view (FOV).

The top-view image is either inserted during end-to-end deployment or through the Application Menu’s Upload Images Panel.

At the bottom of the widget, textual content displays object counts, distinguishing between two types: Person and Autonomous Mobile Robot (AMR).

Each object trajectory is assigned a different color from a predefined set, with a colored circle filled with white at the head depicting the object’s most recent location. The trajectory tail represents recent past locations (by default, within the last 5 seconds or a specified value in the UI configuration at deployment). Each trajectory includes an object ID label next to the head circle. For AMRs, the text label is accompanied by a robot avatar below it.

../_images/rtls-map-view-camera-with-fov.svg

When hovering over a camera with the mouse pointer, the camera ID is displayed along with its polygonal or arc-based FOV, if this information is available in the system’s calibration file.

Settings

The widget also includes settings where users can choose whether to display camera icons or not. Icons are only displayed if the necessary information is available in the system’s calibration file.

AMR Route Change Event Display

An AMR, while on its current route, might encounter congestion ahead, leading to a change in its route towards the same destination. Such a route change event is displayed for 5 seconds on the UI. Only the latest event for the AMR is always displayed.

The event display begins by showing the current route and any blockages. The current path line/curve blinks alternately between black and grey, drawing the user’s attention to the change event. The blockage circle’s circumference matches the color assigned to the associated robot for correlation. Similarly, the source of the current route is represented by a solid filled circle of the same color. The origin of the new route shares the same color for consistency.

After the current route blinks for a short while, the new path starts blinking between green and black. The blockage is shown alongside the current route, with its center blinking between grey and red.