Deep dive

From remote debugging to data discovery, learn how Formant works from top to bottom.

    Build custom interface within Formant

    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:

    1. Create a view as described on this page

    2. Enable custom views & choose the location of the view

    3. 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>
    © 2020 Formant • 1999 Bryant St · San Francisco, CA 94110