DeepHub® UI

Introduction

The DeepHub® UI is a web application that can run in every modern web browser, on any OS. It fulfills several tasks:

  • Provides an overview of the current status of the overall system

  • Allows for easy configuration of zones, location providers, trackables and fences

  • Visualizes a live view of tracked objects and their movement

In addition to these functional features, the UI represents a kind of showcase: the DeepHub UI only uses the documented REST and WebSocket APIs of the DeepHub locating middleware. Therefore, any partner or customer could build their own UI, tailored to their unique needs and requirements. Our UI is simply one possible implementation of a solution.

Note

The DeepHub UI visualizes the entities of the whole system on top of a web map. The latter is delivered online by a mapping service provider. We recommend using Maptiler as our preferred provider, and therefore use their maps by default. If you intend to use the DeepHub UI in a production environment, you will need to order your own Maptiler license key: Maptiler Cloud.

Overview

The user interface consists of five system components:

  • Live View - logs information of triggered events when trackables propagate through fences. Event information in the log consists of the fence name through which a trackable is moving, along with entry and exit timestamps.

  • Trackables - allows users to assign trackables to the asset being tracked and attach the associated positioning providers. Trackable parameters such as it’s radius, exit delay, and collision tolerance can be defined as per requirements. Additionally, custom properties such as information about the asset can be assigned in this section.

  • Location Providers - allows users to create location providers for different positioning technologies (ex. GPS, WiFi, UWB, etc.). Parameters such as the fence timeout, exit delay, and collision tolerance can be defined as per requirements. Additionally, custom properties for the location provider can be assigned in this section.

  • Fence Management - allows users to locate numerous fences in one or multiple localization zones. Trackables entering and exiting fences would trigger an event. Different fences could be associated with different localization zones. The system operator and moderator would be responsible for creating and monitoring fences.

  • Zone Setup - used to define the localization zones on the map for multiple positioning technologies (ex. WiFi, UWB, RFID, etc.). The individual responsible for installing and implementing the localization infrastructure would set up the zones based on localization techniques. Zones need to be set up once for each site.


../_images/hub_interface.png

Live View

Live View fetches the event triggers when a trackable is detected in a zone or fence. An event is triggered when a trackable enters a fence, as well as when a trackable exits a fence. Additionally, a timestamp is displayed in the left side pane within the user interface.

../_images/hub_i_live.png

When a trackable enters a fence, the fence is highlighted in green. Similarly, when a trackable leaves a fence, it is highlighted in red.

Fences

Step 1

To access the Fences menu, click the gear icon at the top right corner of the DeepHub® UI to open the Configuration menu. Click on “Fences”.

../_images/hub_i_fence_1.png
Step 2

To create a fence, click on “New Fence” from the option in the menu. This will launch a new pop-up window prompting for a name of the fence and the floor.

Name the fence and specify the floor level. Click “Next” in the pop-up window.

../_images/hub_i_fence_2.png
Step 3

Select points on the map to create a polygon-shaped fence. For example, select 4 points on the map to create a rectangular fence.

Additionally, custom properties can be assigned to fences, such as the name of the operation or the name of the material being stored in a fence.

../_images/hub_i_fence_3.png
Step 4

A new fence will appear on the map.

../_images/hub_i_fence_4.png

Zones

Step 1

To access the Zones menu, click the gear icon at the top right corner of the DeepHub® UI to open the Configuration menu. Click on “Zones”.

../_images/hub_i_zone_1.png
Step 2

To create a new localization zone, click on “New Zone” and a new pop-up window will be launched to specify characteristics of the zone.

../_images/hub_i_zone_2.png

Fill in the name of the zone and the floor level upon which the zone is to be created.

Select the desired technology from the dropdown menu.

Step 3

Select a method of creating a zone from the dropdown list and click on “Next”. There are 4 methods to create a zone.

../_images/hub_i_zone_3.png
Step 3.1

Extent based geometries (height/width)

Enter the height and width of the zone rectangle in meters. It is also possible to enter the approximate address where the zone is to be created. Click on “Next” and the zone will appear on the user interface or at the approximate location that was specified.

../_images/hub_i_zone_4.png

Adjust the zone orientation by moving and rotating the zone and click on “Save” to update the zone on the user interface.

../_images/hub_i_zone_5.png

Local Position Input (Four-sided Polygon)

Enter the coordinates for each corner of a rectangular zone in meters. It is also possible to enter the approximate address where the zone is to be created. Click on “Next” and the zone will appear on the user interface or at the approximate location that was specified.

../_images/hub_i_zone_6.png

Adjust the zone orientation by moving and rotating the zone and click on “Save” to update the zone on the user interface.

../_images/hub_i_zone_5.png

GPS Position Input (Four-sided Polygon)

Enter the geographic coordinates for each corner of a rectangular zone in the form of longitude and latitude. Click on “Next” and the zone will appear on the user interface.

../_images/hub_i_zone_7.png

Adjust the zone orientation by moving and rotating the zone and click on “Save” to update the zone on the user interface.

../_images/hub_i_zone_5.png

Drawing on map

Locate the desired site on the map using the search bar. Left click on the map to draw a polygonal zone in any shape. For example: Click 4 points to draw a rectangular zone. On the right side of the user interface, the local position for each point of the newly introduced zone can be modified. Click on the “Save” button to integrate the new zone into the map.

../_images/hub_i_zone_8.png
Step 4

The newly created zone will appear on the map. On the left side pane, the list of created zones will appear.

../_images/hub_i_zone_9.png

Trackables

Step 1

To create a new trackable in the DeepHub® frontend, click on “New Trackables” and a new window will launch prompting for the trackable information.

Please fill in the information as required and click “Save” to create a trackable.

../_images/hub_i_track_1.png
Step 2

Once a trackable has been created, it is possible to add custom properties to it.

../_images/hub_i_track_2.png ../_images/hub_i_track_3.png

Location Providers

Step 1

To create a new location provider in the DeepHub® frontend, click on “New Location Provider” and a new window will launch prompting for the location provider information.

Please fill in the information as required and click “Save” to create a location provider.

../_images/hub_i_loc_pro_1.png
Step 2

Once a location provider has been created, it is possible to add custom properties to it.

../_images/hub_i_loc_pro_2.png ../_images/hub_i_loc_pro_3.png

Subscription

Within the DeepHub® UI, there is a section called “License Information” that includes relevant details related to the license/subscription of your DeepHub instance.

To access this menu, click the gear icon at the top right corner of the UI to open the Configuration menu. Click on “Subscription”.

../_images/hub_i_subscription_1.png

The “License Information” page provides administrative information, such as the license type (Trial, Development, Production), customer email, a link to request a license key if needed, and a text box to enter and apply a license key. If the DeepHub instance has an active trial license, the end date and time of the trial period will be shown here as well.

../_images/hub_i_subscription_2.png

For more information on DeepHub licenses, refer to the License Mechanism section.

“API” of the DeepHub UI

The DeepHub UI offers several URL parameters to customize the Live View.

Pan & Zoom to a specific location by specifying:

  • lng: the longitude to which the map should pan.

  • lat: the latitude to which the map should pan.

  • zoom: the zoom level. Must be in the range [0,16], where 0 corresponds to a zoomed out view of the globe, and 16 corresponds to a detailed, zoomed in view. For more information, refer to MapTiler - our default mapping service provider: Tiles à la Google Maps.

OR:

  • id: pan & zoom to the last known location of a trackable or location provider with the given id(s). If several ids are provided, they must be comma-separated.

  • filterid: only render trackables and location providers with the given id(s). If several ids are provided, they must be comma-separated.

Examples:

/map/system/live?lng=9.5367&lat=49.4055&zoom=9

or

/map/system/live?id=d49f0712-dcbd-4cbc-8b4f-c006b8555839

Changelog

Changelog