diff --git a/assets/how-tos/teleop/blank-workspace.png b/assets/how-tos/teleop/blank-workspace.png new file mode 100644 index 0000000000..63deb2dd1b Binary files /dev/null and b/assets/how-tos/teleop/blank-workspace.png differ diff --git a/assets/how-tos/teleop/configured-workspace.png b/assets/how-tos/teleop/configured-workspace.png new file mode 100644 index 0000000000..183a09805a Binary files /dev/null and b/assets/how-tos/teleop/configured-workspace.png differ diff --git a/assets/how-tos/teleop/four-panes.png b/assets/how-tos/teleop/four-panes.png new file mode 100644 index 0000000000..f6f315041b Binary files /dev/null and b/assets/how-tos/teleop/four-panes.png differ diff --git a/assets/how-tos/teleop/full-workspace.png b/assets/how-tos/teleop/full-workspace.png new file mode 100644 index 0000000000..b909154301 Binary files /dev/null and b/assets/how-tos/teleop/full-workspace.png differ diff --git a/docs/how-tos/_index.md b/docs/how-tos/_index.md index 4c9e8c2cd7..8f69da897f 100644 --- a/docs/how-tos/_index.md +++ b/docs/how-tos/_index.md @@ -53,11 +53,12 @@ The guides on this page provide solutions for common tasks and workflows. Browse {{< /cards >}} {{< /how-to-expand >}} -{{< how-to-expand "Work with sensor data" "3" "INTERMEDIATE" >}} +{{< how-to-expand "Work with sensor data" "4" "INTERMEDIATE" >}} {{< cards >}} {{% card link="/how-tos/collect-sensor-data/" noimage="true" %}} {{% card link="/how-tos/sensor-data-visualize/" noimage="true" %}} {{% card link="/how-tos/sensor-data-query-with-third-party-tools/" noimage="true" %}} +{{% card link="/how-tos/configure-teleop-workspace/" noimage="true" %}} {{< /cards >}} {{< /how-to-expand >}} diff --git a/docs/how-tos/configure-teleop-workspace.md b/docs/how-tos/configure-teleop-workspace.md new file mode 100644 index 0000000000..db758e7939 --- /dev/null +++ b/docs/how-tos/configure-teleop-workspace.md @@ -0,0 +1,112 @@ +--- +title: "Configure a teleop workspace" +linkTitle: "Configure a teleop workspace" +weight: 10 +type: "docs" +description: "Create and configure a teleop workspace with widgets." +images: ["/how-tos/teleop/full-workspace.png"] +icon: true +tags: ["teleop", "configuration"] +languages: [] +viamresources: ["sensor", "camera", "movement sensor"] +platformarea: ["viz", "data"] +level: "Intermediate" +date: "2024-11-13" +# updated: "2024-08-26" # When the tutorial was last entirely checked +cost: "0" +--- + +You can use teleop to create a custom workspace where you can visualize and aggregate data from a machine. +You can currently visualize data from a camera, a sensor, or a movement sensor. + +{{% alert title="In this page" color="info" %}} + +- [Configure a workspace](#configure-a-workspace) + +{{% /alert %}} + +## Prerequisites + +{{% expand "A configured machine with teleoperable components" %}} + +Make sure your machine has at least one of the following: + +- A [camera](/components/camera/) +- A [movement sensor](/components/movement-sensor/) +- A [sensor](/components/sensor/) + +See [configure a machine](/how-tos/configure/) for more information. + +{{% /expand%}} + +## Configure a workspace + +{{< table >}} +{{% tablestep %}} +**1. Create a workspace in the Viam app** + +Log in to the [Viam app](https://app.viam.com/). + +Navigate to the **FLEET** page's **TELEOP** tab. +Create a workspace by clicking **+ Create workspace**. +Give it a name. + +{{}} + +{{% /tablestep %}} +{{% tablestep %}} +**2. Add widgets** + +Click **Add widget** and select the appropriate widget for your machine. +Repeat as many times as necessary. + +- If you have a camera, select **Camera stream**, which allows you to view a camera stream. + Enter the name of your camera. + +- If you have a movement sensor, select a **GPS map**, which displays the location of a machine on a map. + Enter the name of your movement sensor. + Toggle **Historic positions** to on to see how position has changed over time. + +- If you have a sensor, select **Stat** to view a single sensor value. + Enter the name of the sensor for **Sensor name** and enter the key for the value in **Path**, for example `time_unix`. + Optionally, add **Units** and give the stat a **Widget title**. + + Then, add that same sensor as a time series graph. + Click **Add widget** again and select **Time series**, which allows you to graph sensor values over time. + Enter the name of the sensor for **Sensor name**. + Give the graph a line title and enter the key for the sensor value in **Path**, for example `time_unix`. + Add more lines if your sensor measures multiple values. + +Now your workspace setup is complete: + +{{}} + +{{% /tablestep %}} +{{% tablestep %}} +**3. Select a machine** + +Now, select a machine with which to make your teleop workspace come to life. +Select **Monitor** in the top right corner to leave editing mode. +Click **Select machine** and select your configured machine. + +Your dashboard now shows the configured widgets for the data from your machine: + +{{}} + +You can go back to **Edit** mode and drag and drop the widgets' panes around to edit their appearance. +For example: + +{{}} + +{{% /tablestep %}} +{{< /table >}} + +## Next steps + +Follow more of our how-to guides to do more with the Viam platform: + +{{< cards >}} +{{% card link="/how-tos/detect-people/" %}} +{{% card link="/how-tos/drive-rover/" %}} +{{% card link="/how-tos/train-deploy-ml/" %}} +{{< /cards >}} diff --git a/layouts/docs/howto.html b/layouts/docs/howto.html index 6aad18385e..5216af0224 100644 --- a/layouts/docs/howto.html +++ b/layouts/docs/howto.html @@ -71,6 +71,7 @@

Javascript

{{ partial "tutorialcard-no-js.html" (dict "link" "/how-tos/collect-sensor-data/") }} {{ partial "tutorialcard-no-js.html" (dict "link" "/how-tos/sensor-data-query-with-third-party-tools/") }} {{ partial "tutorialcard-no-js.html" (dict "link" "/how-tos/sensor-data-visualize/") }} + {{ partial "tutorialcard-no-js.html" (dict "link" "/how-tos/configure-teleop-workspace/") }} {{ partial "tutorialcard-no-js.html" (dict "link" "/how-tos/create-module/") }} {{ partial "tutorialcard-no-js.html" (dict "link" "/how-tos/sensor-module/") }} {{ partial "tutorialcard-no-js.html" (dict "link" "/how-tos/upload-module/") }}