DOCS-1070: Pt3: Update UI on several more tutorials (#1783)

docs/components/board/upboard.md

@@ -13,7 +13,7 @@ Configure an `upboard` board to integrate an Intel-based board like the [UP4000]
 
 Complete the following setup requirements, then move on to configuring your board in [the Viam app](https://app.viam.com):
 
-## Set up requirements
+## Setup requirements
 
 Flash your Intel-based board with:
 
@@ -38,10 +38,6 @@ Edit and fill in the attributes as applicable.
 {{% /tab %}}
 {{% tab name="JSON Template" %}}
 
-Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Select **Raw JSON** mode and copy and paste the following:
-
 ```json {class="line-numbers linkable-line-numbers"}
 {
   "components": [
@@ -82,9 +78,6 @@ Select **Raw JSON** mode and copy and paste the following:
 {{% /tab %}}
 {{< /tabs >}}
 
-Save the config.
-Edit and fill in the attributes as applicable.
-
 The following attributes are available for `upboard` boards:
 
 | Name | Type | Inclusion | Description |

docs/components/component/model1.md

@@ -17,10 +17,6 @@ Optional additional description/information.
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-
-Enter a name for your arm, select the `arm` type, and select the `model1` model.
-
 Click on the **Components** subtab and click **Create component**.
 Select the `arm` type, then select the `model1` model.
 Enter a name for your arm and click **Create**.

docs/components/movement-sensor/adxl345.md

@@ -17,10 +17,9 @@ If you are using a [Viam Rover](https://docs.viam.com/try-viam/), this is the ac
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Enter a name for your movement sensor, select the `movement-sensor` type, and select the `accel-adxl345` model.
-
-Click **Create Component**
+Click on the **Components** subtab and click **Create component**.
+Select the `movement-sensor` type, then select the `accel-adxl345` model.
+Enter a name for your movement sensor and click **Create**.
 
 {{< imgproc src="/components/movement-sensor/adxl345-builder.png" alt="Creation of an `accel-adxl345` movement sensor in the Viam app config builder." resize="600x" >}}
 

docs/components/movement-sensor/wheeled-odometry.md

@@ -34,7 +34,6 @@ Make sure to configure the base width and circumference, as these measurements a
 ## Configuration
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
 Select **Raw JSON** mode.
 Copy and paste the following:
 

docs/manage/configuration.md

@@ -149,17 +149,17 @@ Depending on your robot, you may not need to configure any modules, remotes, pro
 
 Components represent the pieces of hardware on your robot that you want to control with Viam.
 
-You must configure each component with a name, a model, a type, attributes, and dependencies:
-
-- `name`: Serves as an identifier when accessing the resource from your code, as well as when configuring other resources that are dependent on that resource.
-You can choose any unique name for a component.
+You must configure each component with a type, a model, a name, attributes, and dependencies:
 
 - `type`: The broad component category, such as `motor`, `arm` or `camera`.
   Components of a given type have a common API.
 
 - `model`: Indicates the more specific category of hardware.
 Components of the same model are supported using the same low-level code.
 
+- `name`: Serves as an identifier when accessing the resource from your code, as well as when configuring other resources that are dependent on that resource.
+You can choose any unique name for a component.
+
 - `attributes`: A struct to define things like how the component is wired to the robot, its dimensions, and other specifications; attributes vary widely between models.
   See the [component documentation](/components/) for a given component type and model for more details.
 

docs/tutorials/custom/custom-base-dog.md

@@ -345,42 +345,59 @@ Name your module `my-custom-base`.
 Enter the path (for example, `/home/fido/robotdog/run.sh`) to your module's executable file in the **Executable path** field.
 Click **Save Config** at the bottom of the page.
 
-![Screenshot of the Viam app CONFIG tab with the Modules subtab open, showing my-custom-base configured.](/tutorials/custom-base-dog/module-config.png)
+![Screenshot of the Viam app Config tab with the Modules subtab open, showing my-custom-base configured.](/tutorials/custom-base-dog/module-config.png)
 
 ## Configure the components
 
 Now that the custom base code is set up, you need to configure all your hardware components.
-Navigate to the **Components** subtab of the **Config** tab.
+Navigate to the **Components** subtab of your robot's **Config** tab.
 
-### Configure the base
+### Configure the camera
 
-In the **Create Component** field, give your base a name.
-We called ours "quadruped".
-In the **Type** drop-down select `base`.
-In the **Model** field, type in `viamlabs:base:robotdog`.
-Click **Create Component**.
+Configure the ribbon camera on the dog as a `webcam` following our [webcam documentation](/components/camera/webcam/).
 
-![Screenshot of the Viam app CONFIG tab with the Config subtab open, showing quadruped configured.](/tutorials/custom-base-dog/config-modular-component.png)
+Click **Save config**.
 
-You need to add the `ip_address` and `port` attributes to your base config.
-In the attributes field, paste the following, replacing `<HOSTNAME>` with your Pi's hostname (for example, `"ip_address": "robotdog.local"`):
+### Configure the base
+
+Because your custom base relies on a local module, you need to use raw JSON to configure your modular resource.
+Use the **Mode** selector in the upper-left corner of the **Config** tab to switch to **Raw JSON** mode.
+
+Locate the `"components": []` portion of the config file.
+At the end of your camera configuration, add a comma and then add the following base configuration:
 
 ```json
-{
-  "ip_address": "<HOSTNAME>.local",
-  "port": 5001
-}
+    {
+      "namespace": "rdk",
+      "name": "quadruped",
+      "type": "base",
+      "model": "viamlabs:base:robotdog",
+      "attributes": {
+        "ip_address": "<HOSTNAME>.local",
+
+        "port": 5001
+      },
+      "depends_on": []
+    }
 ```
 
+Edit the `ip_address` attribute to match your robot's hostname, replacing `<HOSTNAME>` with your Pi's hostname (for example, `"ip_address": "robotdog.local"`).
 If this doesn't work, you can instead try using the IP address of the machine where the module is running, for example, `"ip_address": "10.0.0.123"`.
 
+If you are using a port other than `5001`, edit the `port` attribute.
 `5001` is the default port for sending and receiving instructions to and from the Freenove server.
 
-Click **Save Config**.
+Click **Save config**.
 
-### Configure the camera
+Your raw JSON configuration should look similar to the following:
 
-Configure the ribbon camera on the dog as a `webcam` following our [webcam documentation](/components/camera/webcam/).
+![Raw JSON mode on the Config tab, showing the components and modules sections of the robot's raw JSON config.](/tutorials/custom-base-dog/raw-json.png)
+
+Toggle back to **Builder** mode and make sure a configuration panel has been generated:
+
+![Screenshot of the Viam app CONFIG tab with the Config subtab open, showing quadruped configured.](/tutorials/custom-base-dog/config-modular-component.png)
+
+If yours doesn't resemble the following, go back to the raw JSON and double-check your JSON formatting.
 
 ## Start the Freenove server
 

docs/tutorials/get-started/blink-an-led.md

@@ -130,7 +130,7 @@ First, go to the [Viam app](https://app.viam.com/) on your web browser and navig
 {{% tab name="Config Builder" %}}
 
 Add a [*board component*](/components/board/) to represent your single-board computer, which in this case is the Raspberry Pi.
-To create the new component, click **Create component** in the lower left corner of the **Config** tab.
+To create the new component, click **Create component** in the lower-left corner of the **Config** tab.
 
 - Select `board` as the component type.
 - Select `pi` as the model.

docs/tutorials/projects/claw-game.md

@@ -164,18 +164,19 @@ Navigate to the **Config** tab of your robot's page and select your main part fr
 {{< tabs >}}
 {{% tab name="Builder UI" %}}
 
-Click on the **Components** subtab and navigate to the **Create component** menu.
+Click the **Components** subtab.
+Click the **Create component** button in the lower-left corner.
 
-Add your [board](https://docs.viam.com/components/board/) with the name `myBoard`, type `board`, and model `pi`.
-Click **Create Component**.
+Add your [board](https://docs.viam.com/components/board/) with type `board` and model `pi`.
+Name your board `myBoard` and click **Create**.
 
 ![Create component panel, with the name attribute filled as myBoard, type attribute filled as board and model attribute filled as pi.](/tutorials/claw-game/app-component-myboard.png)
 
 You can name your board whatever you want as long as you use the same name to refer to it in your code.
 We named it `myBoard` for simplicity.
 This is the only component in the main robot.
 
-Click **Save config** in the bottom left corner of the screen.
+Click **Save config** in the lower-left corner of the screen.
 
 {{% /tab %}}
 {{% tab name="Raw JSON" %}}
@@ -196,7 +197,7 @@ On the [`Raw JSON` tab](/manage/configuration/#the-config-tab), replace the conf
 }
 ```
 
-Click **Save config** in the bottom left corner of the screen.
+Click **Save config** in the lower-left corner of the screen.
 
 {{% /tab %}}
 {{< /tabs >}}
@@ -210,10 +211,11 @@ Use the parts drop-down menu to navigate to the `planning` sub-part.
 {{< tabs >}}
 {{% tab name="Builder UI" %}}
 
-Click on the **Components** subtab and navigate to the **Create component** menu.
+Click the **Components** subtab.
+Click the **Create component** button in the lower-left corner.
 
-Add your [arm](/components/arm/) with the name `myArm`, type `arm`, and model `xArm6`.
-Click **Create Component**.
+Add your [arm](/components/arm/) with type `arm`, and model `xArm6`.
+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)
 
@@ -222,7 +224,7 @@ Our arm's address was `10.1.1.26`, but you should use the IP address for your ar
 
 For more information on xArm6 configuration, see [Configure an xArm6 Arm](/components/arm/xarm6/).
 
-Click **Save config** in the bottom left corner of the screen.
+Click **Save config** in the lower-left corner of the screen.
 
 {{% /tab %}}
 {{% tab name="Raw JSON" %}}
@@ -274,8 +276,9 @@ Click **Save config** in the bottom left corner of the screen.
 {{< tabs >}}
 {{% tab name="Builder UI" %}}
 
-Add your [gripper](/components/gripper/) with the name `gripper`, type `gripper`, and model `fake`.
-Click **Create Component**.
+Click **Create component** and add your [gripper](/components/gripper/).
+Choose type `gripper` and model `fake`.
+Name it `gripper` and click **Create**.
 
 ![Create component panel, with the name attribute filled as gripper, type attribute filled as gripper and model attribute filled as fake. In the Frame section, there is a myArm parent in the frame.](/tutorials/claw-game/app-gripper.png)
 
@@ -285,7 +288,7 @@ You will only use this as a placeholder for the size of the gripper to use with
 Measure the claw's height and width, and enter these values for the `fake` model.
 Ours was 120mm for the width and 180mm for the height.
 
-Click **Save config** in the bottom left corner of the screen.
+Click **Save config** in the lower-left corner of the screen.
 
 {{% /tab %}}
 {{% tab name="Raw JSON" %}}

docs/tutorials/projects/foam-dart-launcher.md

@@ -171,11 +171,13 @@ Try activating the solenoid manually to ensure that it hits the foam dart launch
 ## Configure Your Foam Dart Launcher Robot with the Viam App
 
 Create a new robot in the Viam app and give it a name.
+Navigate to your new robot's **Config** tab and click the **Components** subtab.
 
 ### Board Configuration (Raspberry Pi)
 
-Add your board with the **Name** `local`, **Type** `board`, and **Model** `pi`.
-Click **Create Component**.
+Click **Create component** and add your [board](/components/board/).
+Choose type `board` and model `pi`.
+Name it `local` and click **Create**.
 
 {{<imgproc src="/tutorials/foam-dart-launcher/add-board.png" resize="800x" declaredimensions=true alt="Viam app board component attribute pane.">}}
 
@@ -186,8 +188,8 @@ Just remember to use that name consistently in the following steps.
 
 #### Left Motor
 
-Add the left [motor](/components/motor/) with the **Name** `left`, **Type** `motor`, and **Model** `gpio`.
-Click **Create Component**.
+Click **Create component** and add the left [motor](/components/motor/) with type `motor` and model `gpio`.
+Name it `left` and click **Create**.
 
 Select the name of the board the motor controller is wired to (for example, "local") from the **Board** drop-down.
 
@@ -203,8 +205,8 @@ Click **Save config** at the bottom of the screen.
 
 #### Right Motor
 
-Add the right motor with the **Name** `right`, **Type** `motor` and **Model** `gpio`.
-Click **Create Component**.
+Click **Create component** and add the right [motor](/components/motor/) with type `motor` and model `gpio`.
+Name it `right` and click **Create**.
 
 Select the name of the board the motor controller is wired to (for example, "local") from the **Board** drop-down.
 
@@ -228,7 +230,8 @@ Let’s add a base to be able to control them together.
 
 Configure a [base component](/components/base/) to coordinate your motors so you can move the base around with your keyboard.
 
-Give it a **Name** (you can just call it "base"), set **Type** to `base`, set **Model** to `wheeled`, and click **Create Component**.
+Click **Create component** and add the base with type `base` and model `wheeled`.
+Give it a name (you can call it `base`) and click **Create**.
 
 From the **Right Motors** and **Left Motors** drop downs, select `right` and `left`, respectively (the motors you configured in the previous step).
 

docs/tutorials/projects/guardian.md

@@ -126,24 +126,27 @@ Go to the **Setup** tab of your new robot's page and follow the steps [to instal
 {{% tab name="Builder UI" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Components** subtab and navigate to the **Create component** menu.
+Click on the **Components** subtab.
 
 1. **Add the board.**
 
-    Enter `local` for the name for your [board component](/components/board/), select the type `board`, and select the `pi` model.
-    Then click **Create component**.
+    Click **Create component** in the lower-left corner of the page.
+    Select `board` for the type, then select `pi` for the model.
+    Enter `local` as the name for your [board component](/components/board/), then click **Create**.
 
 2. **Add the camera.**
 
-    Create a [camera component](/components/camera/) with the name `cam`, the type `camera` and the model `webcam`.
-    Click **Create Component** to add the camera.
+    Click **Create Component** to add the [camera](/components/camera/).
+    Select `camera` for the type, then select `webcam` for the model.
+    Enter `cam` as the name for the camera, then click **Create**.
     In the new camera panel, click the **Video Path** field to reveal a drop-down populated with camera paths that have been identified on your machine.
     Select `mmal service 16.1 (platform:bcm2835_v4l2-0)`.
 
 3. **Add the servo.**
 
-    Create a [servo component](/components/servo/) with the name `servo`, the type `servo` and the model `pi`.
-    Click **Create Component** to add the servo.
+    Click **Create component** in the lower-left corner of the page.
+    Select `servo` for the type, then select `pi` for the model.
+    Enter `servo` as the name for your [servo component](/components/servo/), then click **Create**.
     Configure the attributes by adding the name of your board, `local`, and the {{< glossary_tooltip term_id="pin-number" text="pin number" >}} of the pin on `local` that you connected your servo PWM wire to, `12`:
 
     ```json

docs/tutorials/projects/light-up.md

@@ -122,8 +122,9 @@ Click on the **Services** subtab and navigate to the **Create service** menu.
 
 To be able to test that the vision service is working, add a `transform` camera which will add bounding boxes and labels around the objects the service detects.
 
-Click on the **Components** subtab and navigate to the **Create component** menu.
-Create a [transform camera](/components/camera/transform/) with the name `detectionCam`, the type `camera` and the model `transform`.
+Click the **Components** subtab and click the **Create component** button in the lower-left corner.
+Create a [transform camera](/components/camera/transform/) with type `camera` and model `transform`.
+Name it `detectionCam` and click **Create**.
 
 ![detectionCam component panel with type camera and model transform, Attributes section has source and pipeline but they are empty.](/tutorials/tipsy/app-detection-before.png)