URL Query Parameters

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 form param={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:

📘

Tip: Accessing query parameters in JavaScript

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

JavaScript

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

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:

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.

Components

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

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

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.