URL query parameters

List of URL Query Parameters

auth -- for authorizing without explicit login
module
device_id
group_id
status
debug
Place the parameters you want to pass in the URL on the setup page for your custom view. Each parameter is auto-filled by Formant and must be of the formparam={param} (e.g. ?auth={auth}&device_id={device_id}.

Information can be passed to this URL via query string parameters, as noted above. 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.

Parameters in detail

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)
debug – set to True or False if the "debug" toggle is selected.

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. An overview page is a tab in the default page shown when visiting app.formant.io:

1286 — Tabs on the Formant overview page. Defaults are "Map" and "List." Here are two custom overview pages "Reports" and "Style Guide."

1464 — Make a view an "Overview tab" by toggling the setting on in the custom view configuration.

📘
Tip: Accessing query parameters in JavaScript
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

1414 — 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 might 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.