From aadc6be94fb767f0e689851f20bfc5ea5c383a2c Mon Sep 17 00:00:00 2001 From: Brandon Harvey <8107750+bharvey88@users.noreply.github.com> Date: Fri, 29 May 2026 14:28:32 -0500 Subject: [PATCH] Restore broken list/annotation formatting on automation pages (#892) The CloudCannon web editor flattened the nested `
` blocks and ordered-list indentation on the Play a Tune and Motion-Activated Light tutorials, which left the trigger/action bullets running together with literal hyphens, the step numbers restarting mid-page, and the demo GIFs falling outside their parent steps. Restore the indentation and div attribute order so the pages render the same way the Button Controlled LEDs tutorial does, while keeping the new tune, the "By type" hint, and the additional trigger/action GIFs the CloudCannon edit added. --- .../automations/motion-activated-light.md | 53 ++++++++++--------- .../automations/play-a-tune.md | 52 +++++++++--------- 2 files changed, 56 insertions(+), 49 deletions(-) diff --git a/docs/products/ESPHome-Starter-Kit/automations/motion-activated-light.md b/docs/products/ESPHome-Starter-Kit/automations/motion-activated-light.md index 46a6bf84dd..86b0ac08db 100644 --- a/docs/products/ESPHome-Starter-Kit/automations/motion-activated-light.md +++ b/docs/products/ESPHome-Starter-Kit/automations/motion-activated-light.md @@ -20,34 +20,39 @@ This tutorial uses the Motion module and the LED & Buzzer module connected to th ESPHome Device Builder has a GUI for building automations, 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**. -3. Set up the trigger: +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) - - **What should this automation react to?** → **A configured component** - - **Which configured component?** → **Motion Module (binary_sensor.gpio)** - - **Which trigger?** → **Binary Sensor → On Click** (1) +3. Set up the trigger: -
![](../../../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. +
-![](../../../assets/esphome-device-builder-motion-sensor-trigger.gif) + - **What should this automation react to?** → **A configured component** + - **Which configured component?** → **Motion Module (binary_sensor.gpio)** + - **Which trigger?** → **Binary Sensor → On Click** (1) -1. Set up the action: +
-
+ 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. - - 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) + ![](../../../assets/esphome-device-builder-motion-sensor-trigger.gif) -
- 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. +4. Click **Continue**. You land on the **Binary Sensor → On Click** editor with the **Target** already set to your Motion module. +5. Set up the action: -![](../../../assets/esphome-device-builder-light-turn-on-action.gif) +
+ + - 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) + +
+ + 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" @@ -89,15 +94,15 @@ 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. +1. Add another automation, this time choosing **Binary Sensor → On Release** as the trigger for the Motion module. -![](../../../assets/esphome-device-builder-motion-sensor-on-release.gif) + ![](../../../assets/esphome-device-builder-motion-sensor-on-release.gif) -1. Give it a **Light → Turn Off** action targeting **RGB LEDs**. +2. Give it a **Light → Turn Off** action targeting **RGB LEDs**. -![](../../../assets/esphome-device-builder-light-turn-off-action.gif) + ![](../../../assets/esphome-device-builder-light-turn-off-action.gif) -1. **Save** and **Install** again. +3. **Save** and **Install** again. ??? note "What the GUI built in YAML" diff --git a/docs/products/ESPHome-Starter-Kit/automations/play-a-tune.md b/docs/products/ESPHome-Starter-Kit/automations/play-a-tune.md index c8bbd305f7..2a907c3250 100644 --- a/docs/products/ESPHome-Starter-Kit/automations/play-a-tune.md +++ b/docs/products/ESPHome-Starter-Kit/automations/play-a-tune.md @@ -30,43 +30,45 @@ When you added the LED & Buzzer module, Device Builder created an `rtttl` compon ESPHome Device Builder has a GUI for building automations, 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: -
+
- - **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) -
- 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) + 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. -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: + ![](../../../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: - - 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) +
-
- 1. If your device has more than one `rtttl` component, set the **ID** to **rtttl\_buzzer**. With a single buzzer it's already selected. + - 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) - 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 - ``` + 1. If your device has more than one `rtttl` component, set the **ID** to **rtttl_buzzer**. With a single buzzer it's already selected. -![](../../../assets/esphome-device-builder-configure-rtttl-play-action.gif) + 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 + ``` + + ![](../../../assets/esphome-device-builder-configure-rtttl-play-action.gif) ??? note "What the GUI built in YAML" @@ -136,4 +138,4 @@ Want more?