URL query parameters
List of URL Query Parameters
auth-- for authorizing without explicit loginmoduledevice_idgroup_idstatusdebug
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:
Tabs on the Formant overview page. Defaults are "Map" and "List." Here are two custom overview pages "Reports" and "Style Guide."
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
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:
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.
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.
Include a stylesheet to give your app a Formant look and feel
The toolkit is hosted on GitHub and can be found here:
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.
If you notice an issue with this page or need help, please reach out to us! Use the 'Did this page help you?' buttons below, or get in contact with our Customer Success team via the Intercom messenger in the bottom-right corner of this page, or at [email protected].