Merge branch 'main' into JessamyT-patch-1

.github/workflows/docs.yml

@@ -13,9 +13,9 @@ permissions:
 jobs:
   build:
     if: github.repository_owner == 'viamrobotics'
-    runs-on: [self-hosted, x64, private]
+    runs-on: [self-hosted, x64, linux]
     container:
-      image: ghcr.io/viamrobotics/canon:amd64
+       image: ghcr.io/viamrobotics/canon:amd64
     steps:
       - name: Checkout Push/Workflow Dispatch
         uses: actions/checkout@v3

.github/workflows/pr-deploy-and-comment.yml

@@ -12,9 +12,9 @@ on:
 jobs:
   pr-deploy-and-comment:
     if: ${{ contains(github.event.*.labels.*.name, 'safe to build') }}
-    runs-on: [self-hosted, x64, private]
+    runs-on: [self-hosted, x64, linux]
     container:
-      image: ghcr.io/viamrobotics/canon:amd64
+       image: ghcr.io/viamrobotics/canon:amd64
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.github/workflows/run-htmltest.yml

@@ -8,9 +8,9 @@ name: run-htmltest
 on: pull_request
 jobs:
   htmltest:
-    runs-on: [self-hosted, x64, private]
+    runs-on: [self-hosted, x64, linux]
     container:
-      image: ghcr.io/viamrobotics/canon:amd64
+       image: ghcr.io/viamrobotics/canon:amd64
     steps:
       - name: Check out repository
         uses: actions/checkout@v3

assets/scss/_styles_project.scss

@@ -63,31 +63,37 @@ h1, .h1 {
 h2, .h2 {
   font-size: 1.5rem !important;
   line-height: 2.625rem;
+  clear: both;
 }
 
 h3, .h3 {
   font-size: 1.1667rem !important;
+  clear: both;
 }
 
 h4, .h4 {
   font-size: 1.0625rem !important;
   line-height: 1.4375em;
+  clear: both;
 }
 
 h5, .h5 {
   font-size: 0.833 !important;
+  clear: both;
 }
 
 h6, .h6 {
   font-size: 0.833rem !important;
   line-height: 1.0625rem;
+  clear: both;
 }
 
 h7, .h7 {
   font-size: 0.833rem !important;
   line-height: 1.0625rem;
   font-weight: 400;
   font-style: italic;
+  clear: both;
 }
 
 .td-content > h3 {

docs/components/movement-sensor/viam-visual-odometry.md

@@ -59,27 +59,28 @@ To configure the `viam-visual-odometry` module on your robot, follow the instruc
 {{% tab name="Config Builder" %}}
 
 1. Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-1. Click on the **Components** subtab and find the **Create component** pane.
-1. Enter a name for your camera, select the `camera` type, and select the `webcam` model.
-1. Click **Create Component**.
-1. In the resulting `camera` component configuration pane, select a **Video path** for your camera.
+1. Click on the **Components** subtab and click **Create component** in the lower-left corner.
+1. Select the `camera` type, then select the `webcam` model.
+1. Enter a name for your camera, then click **Create**.
+1. In the resulting camera component configuration pane, select a **Video path** for your camera.
    If your robot is live, the drop-down menu auto-populates any identified camera stream paths.
 1. Switch to the **Modules** subtab and find the **Add module** pane.
 1. Enter a name for your visual odometry module, and provide the full path to the `run.sh` file in the **Executable path** field, then click **Add module**.
-1. Switch back to the **Components** subtab and find the **Create component** pane.
-1. Enter a name for your odometry movement sensor, select the `movement_sensor` type, and enter `viam:visual_odometry:opencv_orb` for `model`, then click **Create component**.
+1. Switch back to the **Components** subtab and click the **Create component** button.
+1. Select the `movement_sensor` type, and select `viam:visual_odometry:opencv_orb` for model.
+1. Enter a name for your odometry movement sensor, then click **Create**.
 1. In the resulting `movement_sensor` component configuration pane, paste the following configuration into the **Attributes** text window:
 
-   ```json {class="line-numbers linkable-line-numbers"}
-   {
-     "camera_name": "<your-camera-name>",
-     "time_between_frames_s": <time_seconds>,
-     "lowe_ratio_threshold": <lowe_ratio_threshold>
-   }
-   ```
+  ```json {class="line-numbers linkable-line-numbers"}
+  {
+    "camera_name": "<your-camera-name>",
+    "time_between_frames_s": <time_seconds>,
+    "lowe_ratio_threshold": <lowe_ratio_threshold>
+  }
+  ```
 
-   Provide the same camera name as you used in step 3.
-   See the [Attributes](#attributes) section for more information on the other attributes.
+  Provide the same camera name as you used in step 4.
+  See the [Attributes](#attributes) section for more information on the other attributes.
 
 1. Click **Save config** at the bottom of the page.
 

docs/tutorials/get-started/lazy-susan.md

@@ -102,29 +102,24 @@ Wait a moment until your robot connects to the Viam app.
 
 1. **Configure the board**
 
-    First, configure your {{< glossary_tooltip term_id="board" text="board" >}} component.
-    Navigate to the **Config** tab of your robot’s page in the [Viam app](https://app.viam.com).
-    Add a new component with the following attributes:
+   First, configure your {{< glossary_tooltip term_id="board" text="board" >}} component:
 
-    * **Name**: `local`  - you can name this whatever you want: remember that you will reference it later in your code.
-    * **Type**: `board`
-    * **Model**: `pi`
+   Navigate to the **Config** tab of your robot’s page in the [Viam app](https://app.viam.com).
+   Click the **Components** subtab, then click **Create component** in the lower-left corner.
 
-    <br>
+   Select `board` for type and `pi` for model.
 
-    ![The board component being created with the name local, type board, and  model pi.](/tutorials/lazy-susan/config-board.png)
+   Enter `local` as the name for your board, then click **Create**.
 
 2. **Configure the motor**
 
-   Next, add a new motor component:
+   Next, add a [motor component](/components/motor/):
 
-   * **Name**:  `dcmotor`
-   * **Type**:  `motor`
-   * **Model**:  `gpio`
+   Navigate to the **Components** subtab and click **Create component** in the lower-left corner.
 
-    <br>
+   Select `motor` for type and `gpio` for model.
 
-   ![The motor component being built with the name dcmotor, type motor, and model gpio.](/tutorials/lazy-susan/config-motor.png)
+   Enter `dcmotor` as the name for your motor, then click **Create**.
 
    After creating your motor component, fill in the [required attributes for a gpio motor](/components/motor/gpio/):
 

docs/tutorials/get-started/servo-mousemover.md

@@ -63,7 +63,8 @@ This project is a good place to begin if you're new to robotics and would like t
 
 First, install `viam-server` according to our [installation guide](/installation/)
 
-Next, run this command in your Raspberry Pi terminal to install the pip package manager. Select "yes" when it asks if you want to continue.
+Next, run this command in your Raspberry Pi terminal to install the pip package manager.
+Select "yes" when asked if you want to continue.
 
 ```sh {class="command-line" data-prompt="$"}
 sudo apt-get install pip
@@ -151,38 +152,36 @@ The servo is now physically connected to the Raspberry Pi, but the Viam app hasn
 
 Go to the [Viam app](https://app.viam.com), and navigate to the **Config** tab.
 
-![This is a screenshot of the Viam app on the CONFIG page. It shows that Builder is chosen as the mode. Below that in the components tab it shows Create Component and to the far left It says Name with a box for a Name to be typed in. The next box to the right says Type and it shows a drop down list of different types of components in Viam. To the far right it says Model, but it's greyed out because none of the previous two fields have been filled in. Directly to the right of Model is a Create Component button that will create the component.](/tutorials/single-component-tutorials-servo-mousemover/new-component.png)
-
 ### Board component
 
-In the **Config** tab, create a new component with the following attributes:
+Create a [board component](/components/board/):
+
+Navigate to the **Components** subtab of your robot's **Config** tab.
+
+Click **Create component** in the lower-left corner.
 
-- **Name**: `local` - you can name this whatever you want, you will reference it later.
-- **Type**: `board`
-- **Model**: `pi`
+Select `board` for type and `pi` for model.
 
-![This is a screenshot of the Viam app on the CONFIG page. It shows that Builder is chosen as the mode. Below that in the components tab it shows Create Component and to the far left It says Name with a box and the name local typed in. The next box to the right says Type and it shows a drop down list of different types of components in Viam with board selected. To the far right it says Model with a drop down list and pi is selected. Directly to the right of Model is a Create Component button that will create the component.](/tutorials/single-component-tutorials-servo-mousemover/new-board.png)
+Enter `local` as the name for your board, then click **Create**.
 
-Click **Create Component** to create the pi [board component](/components/board/) component.
+You can name the board whatever you want.
+You will reference it later.
 
 ### Servo component
 
-After the board component, create a new [servo component](/components/servo/) with the following attributes:
+Create a [servo component](/components/servo/):
 
-- **Name**: `FS90R` - we named the servo using the model number, but you can use whatever you want, you will reference it later.
-- **Type**: `servo`
-- **Model**: `pi`
+Click **Create component** in the lower-left corner.
 
-![This is a screenshot of the Viam app on the CONFIG page. It shows that Builder is chosen as the mode. Below that in the components tab it shows Create Component and to the far left It says Name with a box and the name FS90R typed in. The next box to the right says Type and it shows a drop down list of different types of components in Viam with servo selected. To the far right it says Model with a drop down list and pi is selected. Directly to the right of Model is a Create Component button that will create the component.](/tutorials/single-component-tutorials-servo-mousemover/new-servo.png)
+Select `servo` for type and `pi` for model.
 
-Click **Create Component** to create the [servo component](/components/servo/).
+Enter `fsr90r` as the name for your servo, then click **Create**.
 
-You will then see where you can put in Attributes for the servo.
+After clicking **Create** you will see where you can put in attributes for the servo.
 This is where you tell Viam which hardware pin to use to control the servo.
 
-- For "pin": use "12" - this is the pin you attached the PWM (Pulse Width Modulation) jumper wire to.
-- For "board": use "local"
-- For **Depends On** click **local.** This ensures that the board is initialized before the servo.
+- For `"pin"` use `12` - this is the pin you attached the PWM (Pulse Width Modulation) jumper wire to.
+- For `"board"` use `"local"`.
 
 The attribute section will look like this:
 
@@ -259,21 +258,21 @@ Gently push on the box to get a mark on the inside of the box, then create a cut
   {{<gif webm_src="/tutorials/single-component-tutorials-servo-mousemover/cut-box.webm" mp4_src="/tutorials/single-component-tutorials-servo-mousemover/cut-box.mp4" alt="This is sped up gif showing using a marker and marking the screw of the servo, then shutting the box quick and getting the marker on the lid, then opening it back up. Then using that mark to make a cut with a box cutter, and on the other side of the lid which is the outside, marking that cut hole and putting a large roll of tape down to draw a circle. Finally, cutting the circle out with box cutters.">}}
 </div>
 
-### Tape the box shut, add "babygates", and plug in the Raspberry Pi
+### Tape the box shut, add "baby gates", and plug in the Raspberry Pi
 
 When taping the box shut be sure the servo with the circle cut out sits fairly flush to the top of the box.
-Add "babygates" or rails to keep the mouse from wandering off if it catches some friction.
+Add "baby gates" or rails to keep the mouse from wandering off if it catches some friction.
 
 <div class="td-max-width-on-larger-screens">
   {{<gif webm_src="/tutorials/single-component-tutorials-servo-mousemover/finish-box.webm" mp4_src="/tutorials/single-component-tutorials-servo-mousemover/finish-box.mp4" alt="This is sped up gif showing a person plugging in the power cable to the raspberry pi through the power hole made earlier, then pushing the rocker switch to turn it on. When the Raspberry Pi is turned on, the circle turns for a millisecond. Then they draw a swirl design on the circle. Then they make the circle spin and put a mouse on it and it falls off immediately. The next thing they do is they put cardboard on two sides of the box and at the end, they place the mouse on top.">}}
 </div>
 
 ### Control your robot with code
 
-Copy the code from the [mousemover Github repository](https://github.com/viam-labs/tutorial-mousemover) into your nano file, save it, and run it.
+Copy the code from the [mousemover GitHub repository](https://github.com/viam-labs/tutorial-mousemover) into your nano file, save it, and run it.
 
 The code uses the Python SDK to securely connect to your robot through Viam app.
-Then, it enters a for loop in which **position** tells us the servo **myServo** to move to positions (angle, or speed/direction) between 80 and 93 degrees as specified in the **sequence** list.
+Then, it enters a for loop in which **position** tells us the servo to move to positions (angles) between 80 and 93 degrees as specified in the **sequence** list.
 The code uses **pause_time** to wait for a random amount of time between 5 and 20 seconds to stay at that position.
 
 You can adjust the range (or speed/direction) by changing the two numbers in the position statement. (Currently set at 80 and 93).

docs/tutorials/projects/integrating-viam-with-openai.md

@@ -185,11 +185,15 @@ Now that we've set up the rover by attaching the servo and making the tutorial s
 
 ### 1. Configure the servo
 
-To configure your [servo](/components/servo/), go to your rover's **Config** page, scroll to the bottom and create a new instance of the `servo` component.
-Name it `servo1` (or something else if you prefer, but then you will need to update references to it in the tutorial code).
+To configure your [servo](/components/servo/), go to your rover's **Config** tab and click the **Components** subtab.
 
+Click **Create component** in the lower-left corner of the screen.
+
+Select type `servo`.
 Since you've attached your servo to a Raspberry Pi, choose the model `pi`.
-Click **Create Component**.
+
+Name it `servo1`.
+Click **Create**.
 
 {{<imgproc src="/tutorials/ai-integration/servo_component_add.png" resize="900x" declaredimensions=true alt="Adding the servo component." style="border:1px solid #000" >}}
 

docs/tutorials/projects/light-up.md

@@ -60,17 +60,13 @@ Go to the **Setup** tab of your new robot's page and follow the steps to install
 
 On your new robot's page, go to the **Config** tab.
 
-![The CONFIG tab in Builder mode on the Viam app.](/tutorials/light-up/config-tab.png)
+Navigate to the **Components** subtab and click **Create component** in the lower-left corner.
 
-On the **Config** tab, create a new component:
+Select `camera` for type and `webcam` for model.
 
-- **Name**: `my-camera`
-- **Type**: `camera`
-- **Model**: `webcam`
+Enter `my-camera` as the name for your camera, then click **Create**.
 
-Click **Create Component** to add the camera.
-
-Click the **Video Path** field to reveal a drop-down populated with camera paths that have been identified on your machine.
+Click the **video path** field to reveal a drop-down populated with camera paths that have been identified on your machine.
 
 Select the path to the camera you want to use.
 

docs/tutorials/projects/send-security-photo.md

@@ -70,23 +70,19 @@ Go to the **Setup** tab of your new robot's page and follow the steps [to instal
 
 ### Configure the camera component
 
-On your new robot's page, go to the **Config** tab.
+On your new robot's page, go to the **Config** tab and create a [camera component](/components/camera/):
 
-![The CONFIG tab in Builder mode on the Viam app.](/tutorials/light-up/config-tab.png)
+Click **Create component** in the lower-left corner of the screen.
 
-On the **Config** tab, create a new component:
+Select type `camera` and model `webcam`.
 
-- **Name**: `my-camera`
-- **Type**: `camera`
-- **Model**: `webcam`
-
-Click **Create Component** to add the camera.
+Enter `my-camera` as the name, then click **Create** to add the camera.
 
 Click the **Video Path** field to reveal a drop-down populated with camera paths that have been identified on your machine.
 
 Select the path to the camera you want to use.
 
-Click **Save Config** in the bottom left corner of the screen.
+Click **Save config** in the lower-left corner of the screen.
 
 Navigate to the **Control** tab where you can see your camera working.
 
@@ -107,6 +103,7 @@ Click the **Services** subtab.
 
     Click **Create service** in the lower-left corner of the **Services** subtab.
     Select type `mlmodel`, then select model `tflite_cpu`.
+
     Enter `people` as the name, then click **Create**.
 
     In the new ML Model service panel, configure your service.

docs/tutorials/projects/tipsy.md

@@ -92,7 +92,11 @@ Click on the **Components** subtab.
 
 2. **Configure the motors**
 
-    Add your right [motor](/components/motor/) with the name `rightMotor`, type `motor`, and model `gpio`.
+    Add your right [motor](/components/motor/):
+
+    Click **Create component** in the lower-left corner of the page.
+    Select type `motor`, then select model `gpio`.
+    Enter `rightMotor` as the name, then click **Create**.
 
     After clicking **Create**, a panel will pop up with empty sections for Attributes, Component Pin Assignment, and other information.
 
@@ -115,8 +119,12 @@ Click on the **Components** subtab.
 
 3. **Configure the base**
 
-    Next, add a [base component](/components/base/), which describes the geometry of your chassis and wheels so the software can calculate how to steer the rover in a coordinated way.
-    Name your base `tipsy-base`. Select `base` for **Type** and `wheeled` for **Model**.
+    Next, add a [base component](/components/base/), which describes the geometry of your chassis and wheels so the software can calculate how to steer the rover in a coordinated way:
+
+    Click **Create component**.
+    Select `base` for type and `wheeled` for model.
+    Name your base `tipsy-base`, then click **Create**.
+
     In the **Right Motors** drop-down, select `rightMotor` and in the **Left Motors** drop-down select `leftMotor`.
     Enter `250` for **Wheel Circumference (mm)** and `400` for **Width (mm)**.
     The width describes the distance between the midpoints of the wheels.
@@ -126,8 +134,12 @@ Click on the **Components** subtab.
 
 4. **Configure the camera**
 
-    Next, add the [camera component](/components/camera/).
-    Name it `cam`, with the type `camera` and model `webcam`, and click **Create Component**.
+    Add the [camera component](/components/camera/):
+
+    Click **Create component**.
+    Select type `camera` and model `webcam`.
+    Name it `cam` and click **Create**.
+
     In the configuration panel, click the video path field.
     If your robot is connected to the Viam app, you will see a drop-down populated with available camera names.
 
@@ -140,7 +152,12 @@ Click on the **Components** subtab.
 
 5. **Configure the ultrasonic sensors**
 
-    Add a [sensor component](/components/sensor/) with the name `ultrasonic`, type `sensor`, and model `ultrasonic`.
+    Add a [sensor component](/components/sensor/):
+
+    Click **Create component**.
+    Select type `sensor` and model `ultrasonic`.
+    Name your sensor `ultrasonic`, then click **Create**.
+
     Then fill in the attributes: enter `38` for `echo_interrupt_pin` and `40` for `trigger_pin`, according to the wiring diagram.
     Enter `local` for `board`.
 

docs/tutorials/services/data-management-tutorial.md

@@ -97,7 +97,7 @@ This allows you to capture not just image data, but sensor data, robot state dat
 
 To enable image data capture for a camera component, follow these steps:
 
-1. Navigate to the **Components** tab on your robot's **Config** page.
+1. Navigate to the **Components** subtab of your robot's **Config** tab.
 2. Scroll down to the camera component.
    If you are using a Viam Rover, the camera is named `cam`.
    The camera component has a section labeled **Data Capture Configuration**.