A series of examples about how to extend Formants capabilities; including views, adapters and functionalities.
-
- Represent altitude and orientation on a map(React)
- Issue a command (React)
- Commands (TypeScript)
- How to download video stream (React)
- ROS Topic diagnostics (React)
- Login form (React)
- Customizable welcome page (HTML / CDN)
- Weather visualization (HTML/CDN)
- URDF (TypeScript / Three.JS / Data-SDK)
- Scatter plot (Typescript / D3)
-
-
Teleoperation using Data-SDK (React)
-
Teleoperation using Data-SDK (TypeScript)
-
Binary request response (TypeScript + Python Adapter)
-
Custom data channel comminucation (TypeScript + Python Adapter)
-
Protobuf communication (TypeScript + Python Adapter)
-
Request response protocol (TypeScript + Python Adapter)
-
-
- Style components (HTML /CDN)
-
- Login and list devices (Electron)
-
- ROS Topics Monitor (Python)
- ROS Services (Python)
- Examples of what can be built that can be embeded on Formant or individually hosted.
The Formant agent is able to collect data points that represent the altitude and orientation of a device. This data is collected from the 'Location' stream.
The altitude is measured in Meters (m), the orientation is measured in Radians (rotation). To use orientation in the map it is necessary to convert Radian to Degrees.
Issue a command (React)
This example encapsulates the proccess of sending a command to a device using the data-sdk inside a React component. It is a button which takes as a parametere the name of the command, and when you click on it it issue the command to your device.
import { CommandIssuer } from "./CommandIssuer/index";
function App() {
<CommandIssuer command="Start" />;
}
Commands (TypeScript)
This custom view is a demonstration of how the data sdk can be used for sending commands to a robot. When you're device is ready, find a command, type its name in the input, and type in a string into the command data input.
Download video with a button (React)
This example shows how to download a video from a stream.
ROS Topics Diagnostics (React + Python Adapter)
This module has a configuration that shows which ROS topics are expected. It reads the data that was sent from the adapter and then it compares the data from the configuration with the data that is being received.
Login Form (React)
We provide a simple component ui-sdk-login to handle authorization for you if you just want to focus on user experience. Try it
Customizable welcome page (HTML/Formant CDN)
This is a sample welcome page that can be completely customized to show off your robot's value at your customer's farm.
Formant CDN:
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/formantio/toolkit/css/formant.css"
/>
</head>
Weather visualization (HTML/ Formant CDN)
Example of a custom module that can be embeded inside Formant
URDF (TypeScript / Three.JS / Data-SDK)
This exaple shows how to use tranformation tree stream to create visual representation of the robot.
Visualize different streams in the same graph (TypeScript / D3)
This example how you can display different streams in the same graph.
- Examples of how to perform a teleoperation using the Data SDK.
Teleoperation using Data-SDK (React)
This custom view is a demonstration of how the data sdk can be used with the ui sdk for realtime teleop views. In particular we use ui-sdk-joystick and ui-sdk-realtime-player. Checkout https://github.com/FormantIO/toolkit for more information!
Teleoperation using Data-SDK (TypeScript)
This custom view is a demonstration of how the data sdk can be used with the ui sdk for realtime teleop views. In particular we use ui-sdk-joystick and ui-sdk-realtime-player. Checkout https://github.com/FormantIO/toolkit for more information!
Binary request response (TypeScript + Python Adapter)
This custom view demonstrates how RequestDataChannel can be used to write applications with a request-response pattern. This particular example is for binary request data channels, which accept Uint8Array requests in javascript and can be used for protocols like protobuf. Press spacebar to make a request. If the adapter is running, a response will come in. If no adapter is running, the request will time out.
Custom data channel communication (TypeScript + Python Adapter)
This custom view demonstrates how arbitrary bi-directional communication over real-time custom data channels works.
Protobuf communication (TypeScript + Python Adapter)
This custom view demonstrates how to send binary data, such as protobuf, over real-time custom data channels.
This custom view demonstrates how RequestDataChannel can be used to write applications with a request-response pattern.
- Example of components using Formant's CDN, providing the ability to focus on developing while we will handle the design.
Style components (HTML / Formant CDN)
You can easily set the default styling of your HTML to something Formant-y with a single line:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/formantio/toolkit/css/formant.css"
/>With this in your html head you will get default colors, appropriate fonts, and very basic elements will be styled.
- Example of how to create a Formant desktop application.
Login and list devices (Electron)
- Examples of how to extend Formant's agent caplabilities to perform communication with our APIs
ROS Topics Monitor (Python)
This adapter collects all the online ROS topics and publish them to our API
ROS Services (Python)
This adapter collects all the available ROS services and publish them to our API