by Transitive Robotics

TransAct is an example of the kinds of robot fleet management dashboards/cloud portals/mission control centers/robot operating centers you can build using Transitive. It serves three purposes:

1. demonstrate how Transitive can be used to build web-based robot management systems,

2. demonstrate how to integrate Transitive Capabilities into your own web dashboards, and

3. serve as a reference implementation that we invite you to fork and build on if you are just starting out building your own system.

We believe that robotics companies face a make-vs-buy dilemma and our mission is to solve this by offering a middle-ground: making it easy for them to build their own fleet management system that perfectly meets their needs.

In the standard configuration it embeds several capabilities:

• Remote Teleop, to control your robot with low-latency video from anywhere in the world,
• Terminal, for web-based shell access,
• ROS Tool, for subscribing to ROS topics from the web, used to show robot pose, battery and charging status in our example, and make service calls,
• Configuration Management, for editing config files on your fleet hierarchically (with fleet defaults and robot specific overwrites), and
• Health Monitoring, for monitoring device diagnostics and aggregated fleet diagnostics.

We encourage you to fork this repository and use it as a starting point to build your own dashboard.

After forking, clone transAct locally (replace SUPERBOTS with your github org)

git clone [email protected]:SUPERBOTS/transact.git

Or you can just clone from this repo directly if you're just taking a look

git clone [email protected]:transitiverobotics/transact.git

Your local transAct deployment will interface with a Transitive deployment to find robots and capabilities.

1. Go to https://portal.transitiverobotics.com and create an account.
2. In your local transAct clone, copy sample.env file to .env and edit it:
3. Run npm install to install all dependencies.

1. Run npm run dev to start transAct locally in dev mode.
2. Navigate to http://localhost:3000/.
3. Enjoy!

At first you won't see any robots on your dashboard. This is because you haven't yet added any robots to your Transitive account on transitiverobotics.com. We'll do this next.

Follow the instructions to add robots to your Transitive account. If you just want to see it working quickly you can use our example Docker image. Go to fleet page, down to the end of the Add devices section and you'll find a command you can grab to run a local Docker robot.

Finally add some capabilities to the devices you've added from the fleet page

Once these robots show up in the Transitive Portal, they will also appear in your local transAct deployment.

Edit src/client/config/config.ts to set the Transitive capabilities you have installed on your robots (e.g., webrtc-video) and the props you want to use for them (see the Embed in the Transitive Portal after you've configured a capability).

The code is yours! A good first step is to find and replace "SuperBots" in the entire project with the name of your own company and change the logo. After that you'll probably want to go through the sections in src/client/sections and edit the properties of the embedded Transitive capabilities to fit your needs, e.g., choose the right video sources (cameras, ROS topics, etc.) for webrtc-video and remote-teleop. The easiest way to do this is to go to your Transitive Portal page, open the capability there, configure it, and then get the pre-configured React code from the "Embed" modal.

This project uses ShadCn project for UI components and Tailwind CSS for styling. You have a lot of beautiful components to choose from in the ShadCn collection, you can find instructions on how to use them there, but as an example, if you need a Slider component in your app you just need to:

npx shadcn@latest add slider

Once it's installed (it just gets copied in the client/components/ui folder) you can use it like this:

import { Slider } from "@/components/ui/slider"
...
<div>
  <Label  htmlFor="password"  className="text-xl"> Robot happiness </Label>
  <Slider id="robot-happiness" defaultValue={[100]} max={100} step={1} />
</div>

Note that the className="text-xl" is from tailwindcss.

Questions? Join our Slack and we'll try to help. For suggestions, please open issues or pull-requests.

SuperBots Logo: Robot icons created by Freepik - Flaticon