Custom views

If Formant's configurable user interface elements don't cover your use case, you can create a custom view.

All current states, historical telemetry data, device configuration, connectivity pipelines (including peer-to-peer), and commands are accessible via our APIs to use in order to create custom visualizations and operational interfaces.

Currently custom views can be used in the following ways:

A view on a device’s observability page
An additional tab on an overview or group page, for multi-device views
A full screen experience with no Formant-related UI that does use Formant authentication
To add a custom visualization, use the following steps:

Create a view as described on this page
Enable custom views & choose the location of the view
Paste the URL of the embedded code on the next window

The URL used for a custom view is the location of a static HTML page that is hosted outside of Formant. A common thing to do is to upload an index.html file onto Amazon S3 or Google Firebase. This will result in a URL such as:

https://formant-test-app.s3-us-west-2.amazonaws.com/index.html

📘
Important note
The URL must use HTTPS unless it is using localhost

Information is passed to this URL via query string parameters.

{device_id} - the individual device you are looking at on device observability page
{group_id} - the group you are looking at on overview page
{status} - a filter of whether to show “online” “offline” or “all” robots on overview page
{auth} - an authorization token used to access Formant’s API (This must be explicitly enabled that you want to pass this)

Here’s an example of a URL that might be used for a device observability view:

s3.mycustomrobotexperience.com//index.html?device_id={device_id}&auth={auth}

In the following example of code, let’s look at a simple example to use the auth token to receive the latest values of the device with the device id. We’ll just fetch the results from our API and emit HTML into the web page’s body by looping over the result.

<html>
   <head>
       <style>
           html,
           body {
               background: white;
               font-family: sans-serif;
               font-size: 20px;
           }
       </style>
   </head>
   <body>
       <script>
           (async () => {
               const urlParams = new URLSearchParams(window.location.search);
               let result = await fetch(
                   “https://api.formant.io/v1/queries/stream-current-value”,
                   {
                       method: “POST”,
                       headers: {
                           Authorization: “Bearer ” + urlParams.get(“auth”),
                           “Content-Type”: “application/json”
                       },
                       body: JSON.stringify({
                           deviceIds: [urlParams.get(“device_id”)]
                       })
                   }
               ).then(_ => _.json());
               document.body.innerHTML =
                   “<table>” +
                   result.items
                       .map(
                           _ =>
                               `<tr><td>${
                                   _.streamName
                               }</td><td>${JSON.stringify(
                                   _.currentValue
                               )}</td></tr>`
                       )
                       .join(“”) +
                   “</table>“;
           })();
       </script>
   </body>
</html>

Updated about 1 year ago

📘Important note

📘
Important note