DOCS-2172: Update attribute field references (#2797)

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 >}}

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 >}}

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 >}}

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"}

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 >}}

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 >}}

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:
 

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" %}}

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"}
 {

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"}
 {

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"}
 {

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" %}}

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"}
 {

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"}
 {

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" %}}

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
 {

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"}
    {

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/).

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"}
    {

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"}
 {

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

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"}
    {

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"}
    {

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"}
 {