Add custom tracking views to ops dashboard

Introduction

Businesses with teams tracking their assets on the move with HyperTrack need feature-rich map-enabled dashboards.


As fleets of devices get tracked throughout the day, their operations managers need a tool to review their teams in their dashboards in both real-time and as well as with detailed historical reports. As the count of assets on the move grow larger, operation managers need scalable dashboards that provide a quick assessment of whereabouts of their teams, hierarchically grouped based on organizational criteria, such as, for example, team names, their categorization, or geographic regions. They need an ability to see where these devices are at any present moment, review their location history, activity, and tracking status now or in the past. Additionally, for reporting and auditing purposes, they need to export detailed device history data as well as aggregated reports organized per their preferences.

To achieve the ease of use in reviewing large counts of devices on the move, HyperTrack provides hierarchical view functionality which automatically organizes devices in hierarchy using device metadata set through the SDK or API. Each level in the hierarchy has a unique view with its own URL that may be embedded in your operations dashboard with restricted access.

View devices on the map

Go to Views on your HyperTrack dashboard to map all devices that you intend to track.

  • Clustered live location of all devices right now
  • Day-wise list of all devices you intend to track, classified as active, inactive or disconnected
  • Location polyline and movement timeline of each device for the selected day
  • Aggregate durations, steps and distances of stops, walks and drives
  • Hierarchical views organized and filtered by metadata

Map view of all devices

  • The default view shows a map with a list of all devices you intended to track today
  • User may select the day and timezone to view devices for
  • Devices are grouped by device status
  • User may search devices by name or metadata
  • Each device shows associated metadata and a status bar with split of stop, walk, drive, inactive and disconnected durations
  • Every device that tracked location(s) that day is classified as active for that day
  • Devices that were inactive all day have an associated reason and the last updated location timestamp
  • Devices that were disconneced all day show the last updated location timestamp
  • Clicking on a device will show the day's movement timeline on the map
  • User may popout the device history in a new browser window if you prefer

Map View

Day and timezone select

Users can select the day and timezone for which they want to view the list of devices on a map, and drill down into individual devices and their histories.

Calendar

Device status and metadata

Devices in the list show a status bar and metadata for each device. For selected day, the status bar indicates the duration of stop, walk, drive, inactive and disconnected for the device. Metadata shows the values set in the device metadata JSON, and shows the corresponding keys on hover.

Device status and metadata

Live location of a device

The view for today shows live location of devices on the map with last known locations. Live locations automatically update in the view as the device moves. Hovering on live location opens a card with the following information:

  • Device status: active, inactive or disconnected. Read more here.
  • Activity: stop, walk or drive
  • Recorded: Timestamp of the location as recorded by the OS
  • Altitude: Altitide of the device at that location
  • Bearing: Bearing of the device at that location
  • Speed: Speed of device at that location
  • Location: Latitude, Longitude
  • Accuracy: Accuracy of the location

Live Location View

There are additional visual elements to make the live location of other devices come alive in a way that is consistent with on-device views of location in popular mapping apps.

  • Live location pulsates if recorded under a minute ago
  • Live location shows bearing when the device is moving
  • The halo around the live location dot indicates accuracy

Viewing inactive device status

In the dashboard, you may observe inactive device status for your app user's devices in your account as shown in the image below.

Tracking Experience

Device timeline

Clicking a device in the list or clicking the dot on the map shows the device timeline.

  • Location polyline with replay to drill down where the device was at what point in time
  • Movement timeline card organized by activity and outages
  • Addresses for stops, distances for drives, and steps for walks
  • Option to view or hide the device info and metadata
  • If selected day is today and the device is active, ongoing activity, last updated and speed become visible

Device Timeline

Enabling hierarchical views

To enable hierarchical view functionality, device metadata can be used to create restricted views for subsets of your tracked devices. HyperTrack uses this metadata to automatically arrange your devices. Additionally, metadata values can be utilized in creating restricted access dashboards.

Setting device metadata

Device metadata can be set via these three options:

  • By using PlayGround in the Dashboard. Please go here to explore setting device metadata without coding required.
  • By invoking methods in SDK. To learn more about how to set metadata via our SDKs, please read this guide for iOS or Android.
  • By using Devices API. Please see Device PATCH API that also allows to set or change name as well as metadata.

With device metadata in mind, you may be able to quickly create and deliver customized embeddable dashboards for operations managers and their teams restricted by metadata attributes that are relevant only to their teams and their devices under your HyperTrack account.

See an example of device metadata for three devices with device_id such as 7BEEABA4-4890-4AFA-916A-AA80FE659C5A, D5FCE235-4650-476F-9871-59AC7F9BE48B, and 9F9DB479-E07B-4120-A27E-10964BC93FAB.

[
{ "device_id": "7BEEABA4-4890-4AFA-916A-AA80FE659C5A",
"metadata": {
"person_name": "Alex",
"vehicle_type": "bike",
"group_id": 3
}
},
{ "device_id": "D5FCE235-4650-476F-9871-59AC7F9BE48B",
"metadata": {
"person_name": "Kishan",
"vehicle_type": "scooter",
"group_id": 1
}
},
{ "device_id": "9F9DB479-E07B-4120-A27E-10964BC93FAB",
"metadata": {
"person_name": "Kaitlin",
"vehicle_type": "scooter",
"group_id": 3
}
}
]

With this example metadata structure above, you should be able to easily organize device views by person_name, vehicle_type, or group_id as explained in the next section below.

Hierarchical organization of metadata

If you have metadata attached to your devices, you will see the hierarchical device management icon, which is displayed as Device Management in the dashboard, on the top left, below the calendar and timezone selector as shown in the animated image below.

Dashboard View Selection

Initial view

By default, the view shows all of devices that are intended to be tracked today.

Dashboard View

If you set name and metadata for your devices, you will see name and metadata highlighted in green background color for each device entry in the left column. The map on the right will load the entire area for all devices under your account with a known last recorded location for the day.

You may select date and timezone for which you wish to see devices that you intended to track. Note that date and timezone selection is preserved as you navigate this dashboard.

Selecting view from hierarchy

Upon selecting hierarchical view icon Device Management, you will see that the embedded dashboard view is laid out automatically based on the metadata you create and assign to your devices. The map view on the right remains unchanged while the hierarchical device management icon Device Management turns blue.

By default, the view shows all of devices that are intended to be tracked today.

Dashboard View

View after selecting metadata and resetting the view

Once a selection is picked as shown in the image below, the view for the map on the right will be restricted only to devices that are grouped under this metadata key.

Dashboard View

In order to go back to the previous unfiltered hierarchical view, clicking on x next to a chosen metadata value above will allow to go back to the original hierarchical dashboard view.

Selection toggle

If you select a metadata key and want to go back to the standard device list column view while preserving the metadata selection, you can click on the hierarchical device management icon Device Management . The icon will turn back to black and you will see that the hierarchical arrangement of devices in the left panel will get you to this view as shown below.

Dashboard View

In order to go back to the previous unfiltered device list column view, clicking on x next to a previously selected metadata value will allow to reset back to the original view.

Creating restricted view embedded dashboards

You may want to be able to restrict these dashboards only to devices that are relevant to operation managers responsible for their teams. In order to do this, you may leverage metadata filter URL encoding to embed these dashboards into your web application.

As you navigate hierarchical views, you will notice that the URL contains metadata_selection parameter that contains your current selection.

For example, with this code below:

https://embed.hypertrack.com/devices?publishable_key=...&metadata_selection=Zone__East

The restricted view will look like this image below with devices filtered for key Zone with value East in their metadata:

Restricted dashboard View

Only valid JSON strings can be passed to the URL, and your objects must have a max nesting depth of 1. While testing, you can use this linter to validate JSON.

Your browser will most likely encode { } and : special characters, but when distributing embed URLs with a metadata_selection, be sure to encode your link. To read more about URL encoding, please read this guide.

Embed views in your dashboard

Embed views require the HyperTrack publishable key. Get your publishable key from the Setup page on your HyperTrack dashboard.

## Coding view instructions
const baseUrl = "https://embed.hypertrack.com/devices"
## This is an example Publishable Key. Please replace it with the key you obtain from the Setup page.
const publishableKey = "rYd51pSVlZkhisUkcQCncp-c5CVxQeRi6s6bAWXM6T76bWwUlaUMlQ"
const metadataObject = {
vehicle_type: "scooter"
}
const metadataFilter = JSON.stringify(metadataObject)
## Embeddable widget for Get Devices Status by metadata
<iframe width="400px" height="400px" src=`{baseUrl}?metadata_filter={metadataFilter}&publishable_key={publishableKey}` />

Single device view

In certain cases, you may decide to create a single device view experience in your dashboard as shown in the image below. The corresponding embed URL would be:

https://embed.hypertrack.com/devices/{deviceID}?publishable_key={publishable_key}
Single Device View

If you prefer, the Devices API returns embed_url for single device views that you may directly use. This approach allows you to create single device views in your operations dashboard dynamically as you get new devices registered under your HyperTrack account.

Inline Frames

In order to embed a dashboard into your web application, you need to create embeddable views are implemented with HTML inline frames and require JavaScript to be executed successfully.

Iframes have important properties to be considered during implementation. Please read the following instructions carefully to ensure a seamless integration:

  • Iframe size: By default, Iframes are sized with 200 pixels height and 300 pixels width. It is recommended to implement responsiveness using CSS. Here is a sample implementation
  • Responsive views: All embeddable views are responsive and the mobile views will be displayed when the Iframe size is below 500 pixels
  • Security: When you activate the sandbox property for this Iframe, please include allow-scripts allow-same-origin to ensure successful execution of the JavaScript present in the Views
  • Compatibility: Please review browser compatibility of IFrame properties you want to use
  • Loading times: In order to improve speed, it's recommended to set the iframe's src attribute with JavaScript after the main content is done with loading
## Coding view instructions
const baseUrl = "https://embed.hypertrack.com/devices"
## This is an example Publishable Key. Please replace it with the key you obtain from the Setup page.
const publishableKey = "rYd51pSVlZkhisUkcQCncp-c5CVxQeRi6s6bAWXM6T76bWwUlaUMlQ"
const metadataObject = {
vehicle_type: "scooter"
}
const metadataFilter = JSON.stringify(metadataObject)
## Embeddable widget for Get Devices Status by metadata
<iframe width="400px" height="400px" src=`{baseUrl}?metadata_filter={metadataFilter}&publishable_key={publishableKey}` />

Questions?

If your have urgent needs to help you with creating customizable and real-time operations dashboards in your app, questions or comments on any of the topics above, please do not hesitate to contact us.

Is this page useful?