Merge request branch dev into main via CloudCannon

docs/products/ESPHome-Starter-Kit/automations/motion-activated-light.md

@@ -1,8 +1,8 @@
 ---
 title: Turn On a Light with Motion
 description: >-
-  Build an ESPHome Device Builder automation: the Motion module turns on the
-  LED & Buzzer module's RGB light whenever it detects movement.
+  Build an ESPHome Device Builder automation: the Motion module turns on the LED
+  & Buzzer module's RGB light whenever it detects movement.
 ---
 # Turn On a Light with Motion
 
@@ -20,35 +20,34 @@ This tutorial uses the Motion module and the LED & Buzzer module connected to th
 
 ESPHome Device Builder has a GUI for building <a href="https://esphome.io/automations/" target="_blank" rel="noreferrer nofollow noopener">automations</a>, so you can wire a trigger to an action without hand-writing YAML. The trigger is the *when*, the thing that makes it fire. The action is the *then do*, what happens when it fires.
 
-1.  Open your starter kit device in ESPHome Device Builder and click **Edit**. If you need a refresher on the editor, see the [Device Builder Tour](../learning-the-basics/device-builder-tour.md#editor).
-2.  In the editor's left pane, expand the **Automations** dropdown and click **Add Automation**.
+1. Open your starter kit device in ESPHome Device Builder and click **Edit**. If you need a refresher on the editor, see the [Device Builder Tour](../learning-the-basics/device-builder-tour.md#editor).
+2. In the editor's left pane, expand the **Automations** dropdown and click **Add Automation**.
+3. Set up the trigger:
 
-    ![](../../../assets/esphome-device-builder-add-automation.gif)
+   <div markdown class="annotate">
 
-3.  Set up the trigger:
+                - **What should this automation react to?** → **A configured component**
+                - **Which configured component?** → **Motion Module (binary_sensor.gpio)**
+                - **Which trigger?** → **Binary Sensor → On Click** (1)
 
-    <div class="annotate" markdown>
+                </div> ![](../../../assets/esphome-device-builder-add-automation.gif)
+   1. **On Click** fires the moment the sensor detects motion. The dropdown also offers **On Release** (the moment motion stops) and **On State** for other occupancy behaviors. You'll use **On Release** in the optional step below to turn the light back off.
+4. Click **Continue**. You land on the **Binary Sensor → On Click** editor with the **Target** already set to your Motion module.
 
-    - **What should this automation react to?** → **A configured component**
-    - **Which configured component?** → **Motion Module (binary_sensor.gpio)**
-    - **Which trigger?** → **Binary Sensor → On Press** (1)
+![](../../../assets/esphome-device-builder-motion-sensor-trigger.gif)
 
-    </div>
+1. Set up the action:
 
-    1.  **On Press** fires the moment the sensor detects motion. The dropdown also offers **On Release** (the moment motion stops) and **On State** for other occupancy behaviors. You'll use **On Release** in the optional step below to turn the light back off.
+   <div markdown class="annotate">
 
-4.  Click **Continue**. You land on the **Binary Sensor → On Press** editor with the **Target** already set to your Motion module.
-5.  Set up the action:
+                - Under **Actions**, click **+ Add action**.
+                - In the **Add action** dialog, stay on the **By target** tab and choose **Light → Turn On** under the RGB LED group.
+                - On the new action, click the **ID** dropdown and select **RGB LEDs**. (1)
 
-    <div class="annotate" markdown>
+                </div>
+   1. The **ID** dropdown only needs changing if your device also has an **Onboard RGB LED** component configured. If **RGB LEDs** is the only light, it's already selected.
 
-    - Under **Actions**, click **+ Add action**.
-    - In the **Add action** dialog, stay on the **By target** tab and choose **Light → Turn On** under the RGB LED group.
-    - On the new action, click the **ID** dropdown and select **RGB LEDs**. (1)
-
-    </div>
-
-    1.  The **ID** dropdown only needs changing if your device also has an **Onboard RGB LED** component configured. If **RGB LEDs** is the only light, it's already selected.
+![](../../../assets/esphome-device-builder-light-turn-on-action.gif)
 
 ??? note "What the GUI built in YAML"
 
@@ -91,8 +90,14 @@ With the device back online, wave your hand in front of the PIR sensor. The RGB
 Right now the light turns on with motion but never turns off. Add a second trigger to the same Motion module so the light switches off once motion clears.
 
 1. Add another automation, this time choosing **Binary Sensor → On Release** as the trigger for the Motion module.
-2. Give it a **Light → Turn Off** action targeting **RGB LEDs**.
-3. **Save** and **Install** again.
+
+![](../../../assets/esphome-device-builder-motion-sensor-on-release.gif)
+
+1. Give it a **Light → Turn Off** action targeting **RGB LEDs**.
+
+![](../../../assets/esphome-device-builder-light-turn-off-action.gif)
+
+1. **Save** and **Install** again.
 
 ??? note "What the GUI built in YAML"
 
@@ -115,4 +120,4 @@ Right now the light turns on with motion but never turns off. Add a second trigg
 
 !!! success "You've built a motion-activated light!"
 
-    Same trigger-then-action pattern, new trigger. Swap the action (play a buzzer tune, dim the light, send a notification) or the trigger (a button, a temperature threshold, a schedule) and you have a new automation.
+    Same trigger-then-action pattern, new trigger. Swap the action (play a buzzer tune, dim the light, send a notification) or the trigger (a button, a temperature threshold, a schedule) and you have a new automation.

docs/products/ESPHome-Starter-Kit/automations/play-a-tune.md

@@ -30,41 +30,43 @@ When you added the LED & Buzzer module, Device Builder created an `rtttl` compon
 
 ESPHome Device Builder has a GUI for building <a href="https://esphome.io/automations/" target="_blank" rel="noreferrer nofollow noopener">automations</a>, so you can wire a trigger to an action without hand-writing YAML. The trigger is the *when*, the thing that makes it fire. The action is the *then do*, what happens when it fires.
 
-1.  Open your starter kit device in ESPHome Device Builder and click **Edit**. If you need a refresher on the editor, see the [Device Builder Tour](../learning-the-basics/device-builder-tour.md#editor).
-2.  In the editor's left pane, expand the **Automations** dropdown and click **Add Automation**.
+1. Open your starter kit device in ESPHome Device Builder and click **Edit**. If you need a refresher on the editor, see the [Device Builder Tour](../learning-the-basics/device-builder-tour.md#editor).
+2. In the editor's left pane, expand the **Automations** dropdown and click **Add Automation**.
 
-    ![](../../../assets/esphome-device-builder-add-automation.gif)
+   ![](../../../assets/esphome-device-builder-add-automation.gif)
 
-3.  Set up the trigger:
+3. Set up the trigger:
 
-    <div class="annotate" markdown>
+   <div markdown class="annotate">
 
-    - **What should this automation react to?** → **A configured component**
-    - **Which configured component?** → **Button Module (binary_sensor.gpio)**
-    - **Which trigger?** → **Binary Sensor → On Click** (1)
+             - **What should this automation react to?** → **A configured component**
+             - **Which configured component?** → **Button Module (binary_sensor.gpio)**
+             - **Which trigger?** → **Binary Sensor → On Click** (1)
 
-    </div>
+             </div>
+   1. The trigger dropdown also offers **On Double Click**, **On Multi Click**, **On Press**, **On Release**, **On State**, and **On State Change** for other button gestures. Swap any of these in once you're comfortable with the On Click flow.
 
-    1.  The trigger dropdown also offers **On Double Click**, **On Multi Click**, **On Press**, **On Release**, **On State**, and **On State Change** for other button gestures. Swap any of these in once you're comfortable with the On Click flow.
+   ![](../../../assets/esphome-device-builder-add-button-trigger-automation.gif)
 
-4.  Click **Continue**. You land on the **Binary Sensor → On Click** editor with the **Target** already set to your Button module.
-5.  Set up the action:
+4. Click **Continue**. You land on the **Binary Sensor → On Click** editor with the **Target** already set to your Button module.
+5. Set up the action:
 
-    <div class="annotate" markdown>
+   <div markdown class="annotate">
 
-    - Under **Actions**, click **+ Add action**.
-    - In the **Add action** dialog, choose **Rtttl → Play**.
-    - In the **Rtttl** (tune) field, paste an RTTTL string. Copy the one below to get started, or use one of the [examples below](#find-more-tunes). (1)
+             - Under **Actions**, click **+ Add action**.
+             - In the **Add action** dialog, click **By type** then search Rtttl and choose **Rtttl → Play**.
+             - In the **Rtttl** (tune) field, paste an RTTTL string. Copy the one below to get started, or use one of the [examples below](#find-more-tunes). (1)
 
-    </div>
+             </div>
+   1. If your device has more than one `rtttl` component, set the **ID** to **rtttl\_buzzer**. With a single buzzer it's already selected.
 
-    1.  If your device has more than one `rtttl` component, set the **ID** to **rtttl_buzzer**. With a single buzzer it's already selected.
+   Copy this tune and paste it into the **Rtttl** field:
 
-    Copy this tune and paste it into the **Rtttl** field:
+   ```text
+   The Simpsons:d=4,o=5,b=160:c.,e,f#,8a,g.,e,c,8a4,8f#4,8f#4,8f#4,2g4,8p,8p,8f#4,8f#4,8f#4,8g4,a4.,8c,16p,8c,16p,8c,2c
+   ```
 
-    ```text
-    scale_up:d=32,o=5,b=100:c,c#,d,d#,e,f,f#,g,g#,a,a#,b
-    ```
+![](../../../assets/esphome-device-builder-configure-rtttl-play-action.gif)
 
 ??? note "What the GUI built in YAML"
 
@@ -83,7 +85,7 @@ ESPHome Device Builder has a GUI for building <a href="https://esphome.io/automa
         id: button_module
         on_click:
           then:
-            - rtttl.play: "scale_up:d=32,o=5,b=100:c,c#,d,d#,e,f,f#,g,g#,a,a#,b"
+            - rtttl.play: "The Simpsons:d=4,o=5,b=160:c.,e,f#,8a,g.,e,c,8a4,8f#4,8f#4,8f#4,2g4,8p,8p,8f#4,8f#4,8f#4,8g4,a4.,8c,16p,8c,16p,8c,2c"
     ```
 
     See [Device Builder Tour → YAML editor (right)](../learning-the-basics/device-builder-tour.md#yaml-editor-right) for the full breakdown of the YAML pane.
@@ -134,4 +136,4 @@ Want more? <a href="https://picaxe.com/rtttl-ringtones-for-tune-command/" title=
 
     Same trigger-then-action pattern, new action. Swap the trigger (motion, a temperature threshold, a schedule) or the tune, and you have a new automation.
 
-[Check out these Holiday themed buzzer examples too! :material-music-note:](https://wiki.apolloautomation.com/products/general/holiday-songs/){ .md-button .md-button--primary }
+[Check out these Holiday themed buzzer examples too! :material-music-note:](https://wiki.apolloautomation.com/products/general/holiday-songs/){    .md-button .md-button--primary }