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 withinmetropolis-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.
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.