From 37465cb8424b45f1ff09923da1a96a7de8e17f45 Mon Sep 17 00:00:00 2001
From: sky leilani <45158875+skyleilani@users.noreply.github.com>
Date: Wed, 17 Apr 2024 14:24:23 -0400
Subject: [PATCH] DOCS-2172: Update attribute field references (#2797)

---
 docs/build/micro-rdk/movement-sensor/accel-adxl345.md  |  2 +-
 docs/build/micro-rdk/movement-sensor/gyro-mpu6050.md   |  2 +-
 docs/build/micro-rdk/servo/gpio.md                     |  2 +-
 docs/components/camera/join-color-depth.md             |  2 +-
 docs/components/component/model1.md                    |  2 +-
 docs/components/input-controller/gpio.md               |  2 +-
 docs/components/realsense-cam.md                       |  2 +-
 docs/data/trigger-sync.md                              |  2 +-
 docs/get-started/installation/prepare/pumpkin.md       |  2 +-
 docs/ml/vision/detector_3d_segmenter.md                |  2 +-
 docs/ml/vision/mlmodel.md                              |  2 +-
 docs/ml/vision/obstacles_depth.md                      |  2 +-
 docs/ml/vision/obstacles_distance.md                   |  2 +-
 docs/ml/vision/obstacles_pointcloud.md                 |  2 +-
 docs/mobility/slam/orbslamv3/_index.md                 |  8 ++++----
 docs/registry/create/_index.md                         |  2 +-
 docs/tutorials/configure/pet-photographer.md           |  2 +-
 docs/tutorials/projects/claw-game.md                   |  3 ++-
 docs/tutorials/projects/helmet.md                      |  4 ++--
 .../tutorials/projects/integrating-viam-with-openai.md |  2 +-
 docs/tutorials/projects/make-a-plant-watering-robot.md |  2 +-
 docs/tutorials/projects/verification-system.md         | 10 +++++-----
 docs/tutorials/services/data-mlmodel-tutorial.md       |  2 +-
 docs/tutorials/services/try-viam-color-detection.md    |  2 +-
 24 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/docs/build/micro-rdk/movement-sensor/accel-adxl345.md b/docs/build/micro-rdk/movement-sensor/accel-adxl345.md
index dd7a06a194..cc5b3be9ed 100644
--- a/docs/build/micro-rdk/movement-sensor/accel-adxl345.md
+++ b/docs/build/micro-rdk/movement-sensor/accel-adxl345.md
@@ -25,7 +25,7 @@ Enter a name or use the suggested name for your movement sensor and click **Crea
 
 {{< imgproc src="/components/movement-sensor/adxl345-builder.png" alt="Creation of an `accel-adxl345` movement sensor in the Viam app config builder." resize="600x" >}}
 
-Copy and paste the following attribute template into your movement sensor's **Attributes** box.
+Copy and paste the following attribute template into your movement sensor's attributes field.
 Then remove and fill in the attributes as applicable to your movement sensor, according to the table below.
 
 {{< tabs >}}
diff --git a/docs/build/micro-rdk/movement-sensor/gyro-mpu6050.md b/docs/build/micro-rdk/movement-sensor/gyro-mpu6050.md
index 4f7759ccbc..50099ca2d4 100644
--- a/docs/build/micro-rdk/movement-sensor/gyro-mpu6050.md
+++ b/docs/build/micro-rdk/movement-sensor/gyro-mpu6050.md
@@ -22,7 +22,7 @@ Enter a name or use the suggested name for your movement sensor and click **Crea
 
 {{< imgproc src="/components/movement-sensor/mpu6050-builder.png" alt="Creation of an `gyro-mpu6050` movement sensor in the Viam app config builder." resize="600x" >}}
 
-Copy and paste the following attribute template into your movement sensor's **Attributes** box.
+Copy and paste the following attribute template into your movement sensor's attributes field.
 Then remove and fill in the attributes as applicable to your movement sensor, according to the table below.
 
 {{< tabs >}}
diff --git a/docs/build/micro-rdk/servo/gpio.md b/docs/build/micro-rdk/servo/gpio.md
index 8a8df25933..7542c08e6e 100644
--- a/docs/build/micro-rdk/servo/gpio.md
+++ b/docs/build/micro-rdk/servo/gpio.md
@@ -24,7 +24,7 @@ Enter a name or use the suggested name for your servo and click **Create**.
 
 ![An example configuration for a gpio servo in the Viam app Config Builder.](/components/servo/gpio-servo-ui-config.png)
 
-Copy and paste the following attribute template into your servo's **Attributes** box.
+Copy and paste the following attribute template into your servo's attributes field.
 Then remove and fill in the attributes as applicable to your servo, according to the table below.
 
 {{< tabs >}}
diff --git a/docs/components/camera/join-color-depth.md b/docs/components/camera/join-color-depth.md
index e1cc8d445a..911c72a7c9 100644
--- a/docs/components/camera/join-color-depth.md
+++ b/docs/components/camera/join-color-depth.md
@@ -26,7 +26,7 @@ Enter a name or use the suggested name for your camera and click **Create**.
 
 ![Configuration of a join color depth view in the Viam app config builder.](/components/camera/configure-join-color-depth.png)
 
-Copy and paste the following attribute template into your camera's **Attributes** box.
+Copy and paste the following attribute template into your camera's attributes field.
 Then remove and fill in the attributes as applicable to your camera, according to the table below.
 
 ```json {class="line-numbers linkable-line-numbers"}
diff --git a/docs/components/component/model1.md b/docs/components/component/model1.md
index 055d161291..e8f5d0bf86 100644
--- a/docs/components/component/model1.md
+++ b/docs/components/component/model1.md
@@ -27,7 +27,7 @@ Edit and fill in the attributes as applicable.
 
 <!-- If the model does not have a fancy config UI available, such that the user needs to write JSON attributes, refer to one of the other component models as an example. You should include easily copy-pastable attribute templates on the config tab. For example, replace "Edit and fill in the attributes as applicable." with the following:
 
-Copy and paste the following attribute template into your COMPONENT's **Attributes** box.
+Copy and paste the following attribute template into your COMPONENT's attributes field.
 Then remove and fill in the attributes as applicable to your COMPONENT, according to the table below.
 
 {{< tabs >}}
diff --git a/docs/components/input-controller/gpio.md b/docs/components/input-controller/gpio.md
index 1e32cbcbe6..2c4c7d136b 100644
--- a/docs/components/input-controller/gpio.md
+++ b/docs/components/input-controller/gpio.md
@@ -23,7 +23,7 @@ Enter a name or use the suggested name for your input controller and click **Cre
 
 ![An example configuration for a GPIO input controller component in the Viam App config builder](/components/input-controller/gpio-input-controller-ui-config.png)
 
-Copy and paste the following attribute template into your input controller's **Attributes** box.
+Copy and paste the following attribute template into your input controller's attributes field.
 Then remove and fill in the attributes as applicable to your input controller, according to the table below.
 
 {{< tabs >}}
diff --git a/docs/components/realsense-cam.md b/docs/components/realsense-cam.md
index e360c3be1f..3c1c5a1b93 100644
--- a/docs/components/realsense-cam.md
+++ b/docs/components/realsense-cam.md
@@ -64,7 +64,7 @@ They will have the names `intel:color` and `intel:depth`.
 
 Click **Components** on the **CONFIGURE** tab.
 Now, add the `align_color_depth` camera model.
-The **Attributes** pane on the left allows you to enter the necessary attributes for your component.
+Click the **{}** (Switch to Advanced) button in the top right of the component panel to edit the component's attributes directly with JSON.
 
 Enter the necessary JSON configuration for your camera:
 
diff --git a/docs/data/trigger-sync.md b/docs/data/trigger-sync.md
index 1604f67b39..3aacd0e057 100644
--- a/docs/data/trigger-sync.md
+++ b/docs/data/trigger-sync.md
@@ -49,7 +49,7 @@ To use [`sync-at-time:timesyncsensor`](https://app.viam.com/module/naomi/sync-at
 2. Then select the `sync-at-time:timesyncsensor` model from the [`sync-at-time` module](https://app.viam.com/module/naomi/sync-at-time).
 3. Click **Add module**, then enter a name or use the suggested name for your sensor and click **Create**.
    The sensor will return true and enable sync when in a specified time frame.
-4. To configure your time frame, go to the new component panel and copy and paste the following attribute template into your sensor’s **Attributes** box:
+4. To configure your time frame, go to the new component panel and copy and paste the following attribute template into your sensor’s attributes field:
 
    {{< tabs >}}
    {{% tab name="Config builder" %}}
diff --git a/docs/get-started/installation/prepare/pumpkin.md b/docs/get-started/installation/prepare/pumpkin.md
index 19c7a3dbbc..c37d06a5ac 100644
--- a/docs/get-started/installation/prepare/pumpkin.md
+++ b/docs/get-started/installation/prepare/pumpkin.md
@@ -218,7 +218,7 @@ Enter a name or use the suggested name for your `customlinux` board and click **
 
 ![An example configuration for a customlinux board in the Viam app Config Builder.](/components/board/customlinux-ui-config.png)
 
-Copy and paste the following json object into your board's **Attributes** box.
+Copy and paste the following json object into your board's attributes field.
 
 ```json {class="line-numbers linkable-line-numbers"}
 {
diff --git a/docs/ml/vision/detector_3d_segmenter.md b/docs/ml/vision/detector_3d_segmenter.md
index 45a90e8e69..1d1dd18687 100644
--- a/docs/ml/vision/detector_3d_segmenter.md
+++ b/docs/ml/vision/detector_3d_segmenter.md
@@ -24,7 +24,7 @@ Click the **+** icon next to your machine part in the left-hand menu and select
 Select the `vision` type, then select the `detector to 3D segmenter` model.
 Enter a name or use the suggested name for your service and click **Create**.
 
-In your vision service's panel, fill in the **Attributes** field.
+In your vision service's panel, fill in the attributes field.
 
 ```json {class="line-numbers linkable-line-numbers"}
 {
diff --git a/docs/ml/vision/mlmodel.md b/docs/ml/vision/mlmodel.md
index bf91da5950..8c524307f8 100644
--- a/docs/ml/vision/mlmodel.md
+++ b/docs/ml/vision/mlmodel.md
@@ -47,7 +47,7 @@ Click the **+** icon next to your machine part in the left-hand menu and select
 Select the `vision` type, then select the `ML model` model.
 Enter a name or use the suggested name for your service and click **Create**.
 
-In your vision service's panel, fill in the **Attributes** field.
+In your vision service's panel, fill in the attributes field.
 
 ```json {class="line-numbers linkable-line-numbers"}
 {
diff --git a/docs/ml/vision/obstacles_depth.md b/docs/ml/vision/obstacles_depth.md
index 7b0da8aec5..7bd588a816 100644
--- a/docs/ml/vision/obstacles_depth.md
+++ b/docs/ml/vision/obstacles_depth.md
@@ -23,7 +23,7 @@ Click the **+** icon next to your machine part in the left-hand menu and select
 Select the `vision` type, then select the `obstacles depth` model.
 Enter a name or use the suggested name for your service and click **Create**.
 
-In your vision service's panel, fill in the **Attributes** field.
+In your vision service's panel, fill in the attributes field.
 
 {{< tabs >}}
 {{% tab name="Attribute Template" %}}
diff --git a/docs/ml/vision/obstacles_distance.md b/docs/ml/vision/obstacles_distance.md
index f453c39fe7..7ad6dc921d 100644
--- a/docs/ml/vision/obstacles_distance.md
+++ b/docs/ml/vision/obstacles_distance.md
@@ -23,7 +23,7 @@ Click the **+** icon next to your machine part in the left-hand menu and select
 Select the `vision` type, then select the `obstacles distance` model.
 Enter a name or use the suggested name for your service and click **Create**.
 
-In your vision service's configuration panel, fill in the **Attributes** field with the following:
+In your vision service's configuration panel, fill in the attributes field with the following:
 
 ```json {class="line-numbers linkable-line-numbers"}
 {
diff --git a/docs/ml/vision/obstacles_pointcloud.md b/docs/ml/vision/obstacles_pointcloud.md
index 1ce84d6346..ca4622fba7 100644
--- a/docs/ml/vision/obstacles_pointcloud.md
+++ b/docs/ml/vision/obstacles_pointcloud.md
@@ -21,7 +21,7 @@ Click the **+** icon next to your machine part in the left-hand menu and select
 Select the `vision` type, then select the `obstacles pointcloud` model.
 Enter a name or use the suggested name for your service and click **Create**.
 
-In your vision service's panel, fill in the **Attributes** field.
+In your vision service's panel, fill in the attributes field.
 
 ```json {class="line-numbers linkable-line-numbers"}
 {
diff --git a/docs/mobility/slam/orbslamv3/_index.md b/docs/mobility/slam/orbslamv3/_index.md
index 93d6dcfa17..1c5124ed29 100644
--- a/docs/mobility/slam/orbslamv3/_index.md
+++ b/docs/mobility/slam/orbslamv3/_index.md
@@ -73,7 +73,7 @@ Add a service with type `slam`, model `orbslamv3`, and a name of your choice.
 
 ![adding orbslam3 slam service](/mobility/slam/add-orbslam-service-ui.png)
 
-Paste the following into the **Attributes** field of your new service:
+Paste the following into the attributes field of your new service:
 
 ```json
 {
@@ -87,7 +87,7 @@ Paste the following into the **Attributes** field of your new service:
 }
 ```
 
-![adding orbslam3 slam service attributes box](/mobility/slam/add-orbslam-service-attributes-live.png)
+![adding orbslam3 slam service attributes field](/mobility/slam/add-orbslam-service-attributes-live.png)
 
 {{% /tab %}}
 {{% tab name="JSON Template" %}}
@@ -182,7 +182,7 @@ Add a service with type `slam`, model `orbslamv3`, and a name of your choice:
 
 ![adding orbslam3 slam service](/mobility/slam/add-orbslam-service-ui.png)
 
-Paste the following into the **Attributes** field of your new service:
+Paste the following into the attributes field of your new service:
 
 ```json
 {
@@ -195,7 +195,7 @@ Paste the following into the **Attributes** field of your new service:
 }
 ```
 
-![adding orbslam3 slam service attributes box](/mobility/slam/add-orbslam-service-attributes-offline.png)
+![adding orbslam3 slam service attributes field](/mobility/slam/add-orbslam-service-attributes-offline.png)
 
 {{% /tab %}}
 {{% tab name="JSON Template" %}}
diff --git a/docs/registry/create/_index.md b/docs/registry/create/_index.md
index 77ef9ae93c..4ea958998c 100644
--- a/docs/registry/create/_index.md
+++ b/docs/registry/create/_index.md
@@ -1188,7 +1188,7 @@ This module implements the [`rdk:component:base` API](https://docs.viam.com/comp
 
 Navigate to the **CONFIGURE** tab of your machine’s page in [the Viam app](https://app.viam.com/). Click the **+** icon next to your machine part in the left-hand menu and select **Component**. Select the `base` type, then search for and select the `agilex-limo` model. Click **Add module**, then enter a name or use the suggested name for your base and click **Create**.
 
-On the new component panel, copy and paste the following attribute template into your base’s **Attributes** box:
+On the new component panel, copy and paste the following attribute template into your base’s attributes field:
 
 ```json
 {
diff --git a/docs/tutorials/configure/pet-photographer.md b/docs/tutorials/configure/pet-photographer.md
index 9611a145ce..15b42e89ba 100644
--- a/docs/tutorials/configure/pet-photographer.md
+++ b/docs/tutorials/configure/pet-photographer.md
@@ -943,7 +943,7 @@ Your machine's configuration page now includes a panel for your camera.
       {{<imgproc src="/tutorials/pet-photographer/add-colorfilter-module-create.png" resize="400x" declaredimensions=true alt="The add a component model showing the create a module step for a local color filter module">}}
 
 1. Click **Create** to create the modular resource component.
-1. In the resulting module configuration pane, copy the following JSON configuration into the **Attributes** section:
+1. In the resulting module configuration pane, copy the following JSON configuration into the attributes field:
 
    ```json {class="line-numbers linkable-line-numbers"}
    {
diff --git a/docs/tutorials/projects/claw-game.md b/docs/tutorials/projects/claw-game.md
index 3e767cf211..12f6221eab 100644
--- a/docs/tutorials/projects/claw-game.md
+++ b/docs/tutorials/projects/claw-game.md
@@ -219,7 +219,8 @@ Name it `myArm` and click **Create**.
 
 ![Create component panel, with the name attribute filled as myArm, type attribute filled as arm and model attribute filled as xArm6. In the Attributes section, host is filled 10.1.1.26 and in Frame section, there is a world frame.](/tutorials/claw-game/app-myarm.png)
 
-Configure the arm component with the arm's IP address in the `host` field under **Attributes**.
+Configure the arm component with the arm's IP address in the `host` field.
+Click the **{}** (Switch to Advanced) button in the top right of the component panel to edit the component's attributes directly with JSON.
 Our arm's address was `10.1.1.26`, but you should use the IP address for your arm.
 
 For more information on xArm6 configuration, see [Configure an xArm6 Arm](/components/arm/xarm6/).
diff --git a/docs/tutorials/projects/helmet.md b/docs/tutorials/projects/helmet.md
index e38e4c08e4..3cd13e390b 100644
--- a/docs/tutorials/projects/helmet.md
+++ b/docs/tutorials/projects/helmet.md
@@ -107,7 +107,7 @@ The [YOLOv8 module](https://github.com/viam-labs/YOLOv8) enables you to use any
 
 3. Give your vision service a name, for example `yolo`, and click **Create**.
 
-4. In the attributes box of your new vision service, paste the following JSON:
+4. In the attributes field of your new vision service, paste the following JSON:
 
    ```json {class="line-numbers linkable-line-numbers"}
    {
@@ -139,7 +139,7 @@ This module also filters the output so that later, when you configure data manag
 
 3. Name your filtering camera something like `objectfilter-cam` and click **Create**.
 
-4. Paste the following into the attributes box:
+4. Paste the following into the attributes field:
 
    ```json {class="line-numbers linkable-line-numbers"}
    {
diff --git a/docs/tutorials/projects/integrating-viam-with-openai.md b/docs/tutorials/projects/integrating-viam-with-openai.md
index c138b6cd87..8762cfee33 100644
--- a/docs/tutorials/projects/integrating-viam-with-openai.md
+++ b/docs/tutorials/projects/integrating-viam-with-openai.md
@@ -329,7 +329,7 @@ Navigate to the **CONFIGURE** page of your rover robot in [the Viam app](https:/
 - Search `speech`.
 - Select the `speech/speechio` option and click **Add module**.
 - Give your new speech module a name of your choice.
-- In the pane that appears for the service, copy and paste the following JSON into the attributes box:
+- In the pane that appears for the service, copy and paste the following JSON into the attributes field:
 
 ```json {class="line-numbers linkable-line-numbers"}
 {
diff --git a/docs/tutorials/projects/make-a-plant-watering-robot.md b/docs/tutorials/projects/make-a-plant-watering-robot.md
index 2f81d0e7f8..d4911b1fb2 100644
--- a/docs/tutorials/projects/make-a-plant-watering-robot.md
+++ b/docs/tutorials/projects/make-a-plant-watering-robot.md
@@ -358,7 +358,7 @@ Add the mcp300x-adc-sensor module to your robot in 3 steps:
    Click **Add module**.
 3. Give your module a name of your choice, and click **Create** to add this module to your machine.
 4. Find your module's card on the **Config** page.
-   In **Attributes**, add the necessary attributes as `"channel_map"` and `"sensor_pin"`.
+   In the attributes field, add the necessary attributes as `"channel_map"` and `"sensor_pin"`.
    For example, if you have a moisture sensor on channel 0, and your `sensor_pin` is 8, your configuration should look like this:
 
    ```json
diff --git a/docs/tutorials/projects/verification-system.md b/docs/tutorials/projects/verification-system.md
index 15d1932752..63df34163e 100644
--- a/docs/tutorials/projects/verification-system.md
+++ b/docs/tutorials/projects/verification-system.md
@@ -101,7 +101,7 @@ Finally, configure an `mlmodel` detector vision service to use your new `"person
 2. Click the **Services** subtab and click **Create service** in the lower-left corner.
 3. Select the `Vision` type, then select the `ML Model` model.
 4. Give the detector the name `people-detect` and click **Create**.
-5. In your vision service's panel, fill in the **Attributes** field:
+5. In your vision service's panel, fill in the attributes field:
 
    ```json {class="line-numbers linkable-line-numbers"}
    {
@@ -181,7 +181,7 @@ Finally, configure an `mlmodel` detector to use your new `"persondetect"` ML mod
 2. Click the **Services** subtab and click **Create service** in the lower-left corner.
 3. Select the `Vision` type, then select the `ML Model` model.
 4. Give the detector the name `people-detect` and click **Create**.
-5. In your vision service's panel, fill in the **Attributes** field:
+5. In your vision service's panel, fill in the attributes field:
 
 ```json {class="line-numbers linkable-line-numbers"}
 {
@@ -220,7 +220,7 @@ To add the `facial-detector` module to your machine:
 1. Click the **Create service** button at the bottom of the page, select `vision`, then select the `detector:facial-detector` model.
    You can also search for `facial-detector` directly.
 1. Name your modular vision service `face-detect`, then click **Create**.
-1. On the panel that appears, enter the following configuration into the **Attributes** field:
+1. On the panel that appears, enter the following configuration into the attributes field:
 
    ```json {class="line-numbers linkable-line-numbers"}
    {
@@ -252,7 +252,7 @@ For this, add and configure the `verification-system` module from the Viam regis
 1. Click the **Create services** button at the bottom of the page, select `vision`, then select the `classifier:verification-system` model.
    You can also search for `verification-system` directly.
 1. Name your modular vision service `security`, then click **Create**.
-1. On the panel that appears, enter the following configuration into the **Attributes** field:
+1. On the panel that appears, enter the following configuration into the attributes field:
 
    ```json {class="line-numbers linkable-line-numbers"}
    {
@@ -295,7 +295,7 @@ To add a transform camera to your machine:
 1. On your machine's **Config** page in the [Viam app](https://app.viam.com), navigate to the **Components** tab.
 1. Click the **Create component** button at the bottom of the page, select `camera`, then select the built-in `transform` model.
 1. Give the transform camera a name, like `my-transform-camera`, then click **Create**.
-1. On the panel that appears, enter the following configuration into the **Attributes** field:
+1. On the panel that appears, enter the following configuration into the attributes field:
 
    ```json {class="line-numbers linkable-line-numbers"}
    {
diff --git a/docs/tutorials/services/data-mlmodel-tutorial.md b/docs/tutorials/services/data-mlmodel-tutorial.md
index 1f4a354ec6..c015df2a03 100644
--- a/docs/tutorials/services/data-mlmodel-tutorial.md
+++ b/docs/tutorials/services/data-mlmodel-tutorial.md
@@ -250,7 +250,7 @@ You can then see the tagged objects on the **Control** tab.
 1. On your machine's **Config** page in the [Viam app](https://app.viam.com), navigate to the **Components** tab.
 1. Click the **Create components** button at the bottom of the page, and select **Camera**, then select **Transform camera**.
 1. Give the camera a name, like `my-transform-cam`, then click **Create**.
-1. In the resulting camera components configuration pane, enter the following into the **Attributes** section for the transform camera:
+1. In the resulting camera components configuration pane, enter the following into the attributes field for the transform camera:
 
    ```json {class="line-numbers linkable-line-numbers"}
    {
diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index 6f9f1e82d5..9a5db01a2b 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -134,7 +134,7 @@ Viam generates an **Attributes** section for the detection camera's component pa
 
 ![The Viam app showing the detectionCam component section. The Attributes section contains a skeleton configuration, including source, pipeline, type, and attributes. On the upper right there is a trash bin icon.](/tutorials/try-viam-color-detection/transform-camera-config.png)
 
-Copy the following JSON configuration into the **Attributes** section:
+Copy the following JSON configuration into the attributes field:
 
 ```json {class="line-numbers linkable-line-numbers"}
 {