Drive a rover in a square using the Viam TypeScript SDK.

Prerequisites

What You'll Learn

What You'll Need

What You'll Build

Watch the Video

Follow along with the step-by-step video.
  1. Go to Try Viam in your web browser to remotely control a rover pre-configured with components in the NYC Viam robotics lab. This may take up to 30 seconds. Try Viam landing page
  2. Once your rover is configured and online, click Try My Rover. Try My Rover
  3. Under the CONFIGURE tab, review the configuration details. Notice the components in the left sidebar, such as the viam_base and overhead-camera.
  4. Find the CONTROL tab. This is where you can control your Viam rover. Find the viam_base in the left sidebar, and click on it. Notice the components in the left sidebar correspond to a more detailed view on the right side of the page. Viam base
  5. Within the viam_base card, toggle on the Keyboard control so that you can control the rover using keyboard keys WASD. keyboard controls
  6. To see the rover move, find the overhead-cam. Select Live from the dropdown options to see a live feed of the rover in the robotics lab. And then use the WASD keys to control the rover in real-time. overhead cam

If you want more time to keep playing with your borrowed rover, hit the Extend button in the top right of the page.

Now that you know how to manually control the rover using the Viam app, let's control the rover programmatically with code.

  1. From the command line within your terminal window, let's use a command line utility to quickly set up a new TypeScript project. Input the following command: 
    $ npm create robot-app
  2. At the command-line prompt, input your project name. Or hit Enter to accept the default project name, my-viam-project. command line prompt
  3. Once the project setup is completed, follow the command-line instructions. Navigate into your new project directory. In the example shown below, we are using the default project name my-viam-project. 
    $ cd my-viam-project
  4. In the Viam app, find the CONNECT page, select the TypeScript SDK, and turn on Include API key to reveal your machine credentials within the code sample. Use these machine credentials to update the .env file in your new project directory, and save your changes. machine credentials
  5. Start the application server. Your web app should be running at http://localhost:5173/
    $ npm start
  6. Open your browser's devtools, for example, by right-clicking and selecting Inspect, to see the browser's console logs. And position the browser window so you can once again see the overhead-cam in the CONTROL tab within the Viam app. Press the Click me button in the web application to see the console logs and camera feed of the rover in the robotics lab at the same time. drive it
  7. In your IDE, edit src/main.ts to change the logic being run. Edit index.html to change the layout of the web application.

What You Learned

Related Resources