Web Toolkit Overview

The Web Toolkit is Formant's developer toolkit for creating custom views and modules within the Formant web platform. For more general web/HTTP API documentation, see the Admin API (for querying and administering your account) or the Data Query API (for querying and working with device data).

📘

Views vs. Modules

A view takes up the full page, providing a particular lens on a device within your system. A view is typically made of many modules in a grid-like layout.

A module is a small UI component that can access and visualize a data stream. For example, a module might display a live video stream, textual information, battery levels, etc.

Every robotics application is different, and Formant's default views and modules may not satisfy the needs of your application. Provided by Formant is a suite of tools that enable you to develop your own views and modules that can seamlessly integrate with the Formant platform.

These tools will allow you to:

1. Create modules (i.e. data widgets) that can be displayed in a standard Formant-powered view.
2. Create entirely and fully custom views with a toolkit of Formant-ready UI components.
3. Establish Real-time connections with WebRTC.
4. Create rich 3D Visualizations.

Available Tools

The two primary packages (UI SDK and Data SDK) and how they interact with the system are displayed in the diagram below.

The external server is managed by you. It will provide the views or modules that the web application (denoted by the dotted boxes in the "Web Application" channel) will pull in as an iFrame. Custom Views and Custom Modules can use the Data SDK to securely access any data stream from any device. For more performance/throughput, the Real-Time SDK can be used to establish a real-time peer-to-peer connection between a custom module and your device.

The Data SDK

The Data SDK is a TypeScript library providing easy and authenticated access to any device or data within the Formant platform. Use this to create custom data modules that you can include in any Formant-built view.

In the below diagram, your custom module would be hosted on your own server and embedded inside the web application. This module can then be given access to any telemetry stream, command, or realtime connection.

Up-to-date Typescript documentation can be found here. The source code can be found on Github here. And many examples can be found here, with a couple of in-depth tutorials here.

The UI SDK

The UI SDK is a library of UI components to make it simple to build a custom view with the same look and feel as the Formant platform. In the SDK are standard components like text, drop-downs, text inputs, and buttons.

See an example of available UI components below: