What is a custom view?

A custom view is one developed and hosted externally but embedded inside Formant. Embedded views use the Formant toolkit to receive user authentication, device details, and leverage Formant's infrastructure like telemetry commands, and real-time channels. Custom views can satisfy any use case while keeping a consistent branding and user experience.

Adding a new custom view in Formant

First, navigate to Settings->Views.

Next, press "Add view" in the top right corner.

Toggle "custom view" to on to see the expanded custom view configuration.

The URL field is the link to the static website that will be embedded inside this custom view.

URL query parameters

Information can be passed to this URL via query string parameters. The toolkit will automatically know how to authenticate itself if auth is passed, or know which device to grab information from if device_id is passed, for instance.

For all custom views embedded inside Formant:
auth - an authorization token of the user visiting the custom view, used to access Formant APIs (This must be explicitly enabled that you want to pass this)

For custom views embedded in device pages:
device_id - the individual device you are looking at on device observability page

For custom views embedded in the overview 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

To get any of these parameters for explicit use in your script, you can use the URLSearchParams class:

const urlParams = new URLSearchParams(window.location.search);
const urlDevice = urlParams.get("device");
const urlAuth = urlParams.get("auth");
const urlGroupId = urlParams.get("group_id");
const urlStatus = urlParams.get("status");

Configuring the URL

688 — Add your URL where it says "Telemetry web view URL"

For example, you must include ?device={device_id}&auth={auth} at the end of any link that requires API authentication and device information.

For instance, if you are developing locally, you may use:
http://localhost:8000/index.html?device={device_id}&auth={auth}

If you hosted a static webpage on GitHub, your link would look something like:
https://<your company name>.github.io/<your repo name>/index.html/?device={device_id}&auth={auth}

Check out a simple example of a static web application created to be used in a custom view here:

toolkit/examples/simple-embedded-app at master · FormantIO/toolkit

github.com

toolkit/examples/simple-embedded-app at master · FormantIO/toolkit

Using the Data SDK to communicate with devices

The toolkit includes high-level APIs for communicating with your fleet. Using the Data SDK, you can use the same pipes Formant uses to build our observability and teleop products to build anything you need.

1045 — Formant provides the infrastructure to communicate with your robot fleet from any web application

Components

High-level components and CSS stylesheets are included with the toolkit. These include 3D primitives, software joysticks, and login windows.

725 — Include a stylesheet to give your app a Formant look and feel

The toolkit is hosted on GitHub and can be found here:

GitHub - FormantIO/toolkit: A collection of open source libraries and documentation for building robot platforms on Formant APIs 🤖

github.com

GitHub - FormantIO/toolkit: A collection of open source libraries and documentation for building robot platforms on Formant APIs 🤖

Support for 3D Visualizations

The toolkit has elements that can help accelerate the creation of your 3D visualization in ThreeJS. Currently there are two components that can help bring functionality for a configured Formant device:

Realtime Video Plane - Allows you to easily put a image of realtime view of your robot.
URDF Joint State - Allows you to see a realtime visualization of the robot's physical structure.