diff --git a/docs/assets/esphome-device-builder-add-automation.gif b/docs/assets/esphome-device-builder-add-automation.gif new file mode 100755 index 0000000000..c10500a0dc Binary files /dev/null and b/docs/assets/esphome-device-builder-add-automation.gif differ diff --git a/docs/assets/esphome-device-builder-example-rgb-button-automation.webp b/docs/assets/esphome-device-builder-example-rgb-button-automation.webp new file mode 100755 index 0000000000..c92bf2e2de Binary files /dev/null and b/docs/assets/esphome-device-builder-example-rgb-button-automation.webp differ diff --git a/docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md b/docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md index 46d4fa3c13..730dc6adad 100644 --- a/docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md +++ b/docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md @@ -8,8 +8,6 @@ description: >- This tutorial uses the Button module and the RGB & Buzzer module connected to the ESP32-C6, all sitting in the starter kit case. - - !!! note "Before you start" Work through these pages first. This tutorial assumes your device is flashed and both modules are connected: @@ -22,32 +20,32 @@ This tutorial uses the Button module and the RGB & Buzzer module connected to th ESPHome Device Builder has a new GUI for building automations, so you can wire a trigger to an action without hand-writing YAML. The trigger is the *when* of the automation, the thing that makes it fire. The action is the *then do*, what happens when it fires. If you've built automations in Home Assistant, this is the same mental model. -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](/products/ESPHome-Starter-Kit/learning-the-basics/device-builder-tour/#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](/products/ESPHome-Starter-Kit/learning-the-basics/device-builder-tour/#editor). +2. In the editor's left pane, expand the **Automations** dropdown and click **Add Automation**. - - **What should this automation react to?** → **A configured component** - - **Which configured component?** → **Button Module (binary_sensor.gpio)** - - **Which trigger?** → **Binary Sensor → On Click** (1) +![](../../../assets/esphome-device-builder-add-automation.gif) -
+1. Set up the trigger: - 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: + - **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. +2. Click **Continue**. You land on the **Binary Sensor → On Click** editor with the **Target** already set to your Button module. +3. Set up the action: - - Under **Actions**, click **+ Add action**. - - In the **Add action** dialog, stay on the **By target** tab and choose **Light → Toggle** under the RGB LED group. - - On the new action, click the **ID** dropdown and select **RGB LEDs**. (1) +
-
+ - Under **Actions**, click **+ Add action**. + - In the **Add action** dialog, stay on the **By target** tab and choose **Light → Toggle** 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. +
+ 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. ??? note "What the GUI built in YAML" @@ -79,10 +77,14 @@ Your automation is saved in Device Builder, but the device is still running its 2. Click **Install**, then pick **On the Network** to push the new firmware over Wi-Fi. 3. Wait for the compile and flash to finish. The device reboots once the install is done. +![](../../../assets/esphome-device-builder-install-button-component.gif) + ## Test the automation With the device back online, press the button on the Button module. You should hear a soft click, and the RGB LEDs turn on. Press it again and they turn off. +![](../../../assets/esphome-device-builder-example-rgb-button-automation.webp) + !!! success "You've built your first GUI automation!" - The same trigger-then-action pattern works for every automation you'll build in Device Builder. Swap the trigger (motion, temperature crossing a threshold, a schedule) or the action (turn on, dim, play a buzzer tone) and you have a new automation. + The same trigger-then-action pattern works for every automation you'll build in Device Builder. Swap the trigger (motion, temperature crossing a threshold, a schedule) or the action (turn on, dim, play a buzzer tone) and you have a new automation. \ No newline at end of file