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.
Custom view configuration
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
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:
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].