diff --git a/docs/assets/esphome-device-builder-add-button-trigger-automation.gif b/docs/assets/esphome-device-builder-add-button-trigger-automation.gif new file mode 100755 index 0000000000..cb54eb5dbf Binary files /dev/null and b/docs/assets/esphome-device-builder-add-button-trigger-automation.gif differ diff --git a/docs/assets/esphome-device-builder-configure-rtttl-play-action.gif b/docs/assets/esphome-device-builder-configure-rtttl-play-action.gif new file mode 100755 index 0000000000..ad3c7b18ff Binary files /dev/null and b/docs/assets/esphome-device-builder-configure-rtttl-play-action.gif differ diff --git a/docs/assets/esphome-device-builder-light-turn-off-action.gif b/docs/assets/esphome-device-builder-light-turn-off-action.gif new file mode 100755 index 0000000000..abfb189d8d Binary files /dev/null and b/docs/assets/esphome-device-builder-light-turn-off-action.gif differ diff --git a/docs/assets/esphome-device-builder-light-turn-on-action.gif b/docs/assets/esphome-device-builder-light-turn-on-action.gif new file mode 100755 index 0000000000..2c07b6a839 Binary files /dev/null and b/docs/assets/esphome-device-builder-light-turn-on-action.gif differ diff --git a/docs/assets/esphome-device-builder-motion-sensor-on-release.gif b/docs/assets/esphome-device-builder-motion-sensor-on-release.gif new file mode 100755 index 0000000000..6e40a2f7b3 Binary files /dev/null and b/docs/assets/esphome-device-builder-motion-sensor-on-release.gif differ diff --git a/docs/assets/esphome-device-builder-motion-sensor-trigger.gif b/docs/assets/esphome-device-builder-motion-sensor-trigger.gif new file mode 100755 index 0000000000..255a2e374c Binary files /dev/null and b/docs/assets/esphome-device-builder-motion-sensor-trigger.gif differ 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 13d239d762..46a6bf84dd 100644 --- a/docs/products/ESPHome-Starter-Kit/automations/motion-activated-light.md +++ b/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 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**. +3. Set up the trigger: - ![](../../../assets/esphome-device-builder-add-automation.gif) +
-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) -
+
![](../../../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) -
+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. +
-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) -
+
+ 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) - -
- - 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. \ No newline at end of file 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 431b8c1e32..c8bbd305f7 100644 --- a/docs/products/ESPHome-Starter-Kit/automations/play-a-tune.md +++ b/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 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. - 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: -
+
- - 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) -
+
+ 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