diff --git a/docs/assets/esphome-device-builder-add-button-module.gif b/docs/assets/esphome-device-builder-add-button-module.gif new file mode 100755 index 000000000..df4862177 Binary files /dev/null and b/docs/assets/esphome-device-builder-add-button-module.gif differ diff --git a/docs/assets/esphome-device-builder-install-button-component.gif b/docs/assets/esphome-device-builder-install-button-component.gif new file mode 100755 index 000000000..11a6a332b Binary files /dev/null and b/docs/assets/esphome-device-builder-install-button-component.gif differ diff --git a/docs/assets/esphome-device-builder-launch-webserver-from-visit-button.gif b/docs/assets/esphome-device-builder-launch-webserver-from-visit-button.gif new file mode 100755 index 000000000..5f45c6ab3 Binary files /dev/null and b/docs/assets/esphome-device-builder-launch-webserver-from-visit-button.gif differ diff --git a/docs/assets/esphome-device-builder-test-button-events.gif b/docs/assets/esphome-device-builder-test-button-events.gif new file mode 100755 index 000000000..eb344d63f Binary files /dev/null and b/docs/assets/esphome-device-builder-test-button-events.gif differ diff --git a/docs/products/ESPHome-Starter-Kit/modules/button-module.md b/docs/products/ESPHome-Starter-Kit/modules/button-module.md index 1f1458463..59c1f5ae3 100644 --- a/docs/products/ESPHome-Starter-Kit/modules/button-module.md +++ b/docs/products/ESPHome-Starter-Kit/modules/button-module.md @@ -4,7 +4,7 @@ description: >- Wire up the ESPHome Starter Kit button module, add it through ESPHome Device Builder, and verify presses in the web server. --- -# Adding the button module +# Adding the Button Module The button module is the first input your starter kit gets, and the fastest way to feel ESPHome respond to a physical action. By the end of this tutorial you'll have the button wired to your ESP32-C6, surfaced as a binary sensor in your YAML, and toggling live in the web server when you press it. @@ -12,20 +12,23 @@ The button module is the first input your starter kit gets, and the fastest way Work through the two prerequisites first: - - [First Steps](../first-steps/) to snap the button module off the panel. - - [Getting Started](../setup/getting-started/) to install ESPHome Device Builder and create your starter kit device. + * [Start Here](../start-here/) to snap the button module off the panel. + * [First Steps](../setup/first-steps/) to install ESPHome Device Builder and create your starter kit device. -## Start with your base config +#### Prerequisite -The starter kit project template gets you online, but it doesn't enable the web server yet. Add it now so you have a live page to test the button against after flashing. +The Web Server is used to broadcast a local website using your device. This allows you to navigate to the IP address of your device or hostname such as esphome-starter-kit.local to easily control your new device! -1. In ESPHome Device Builder, open your starter kit device and click **Edit**. -2. Add the `web_server` component, making sure to select version 3. -3. Click **Save**. Don't install yet, the button gets added in the next section. +1. In the ESPHome Device Builder, navigate to the **Core configuration** section. +2. Click **Add component**. +3. Scroll to **Web Server** and click **Add**. +4. Click **Add** once more to confirm. +5. Toggle **Show advanced settings**. +6. Scroll down to **Version** and select **3** from the dropdown. ![](../../../assets/device-builder-install-web-server-v3.gif) -## Plug in the button module +## Attach Button module Connect the button module to the ESP32-C6 using one of the FPC ribbon cables that came with the kit. Either FPC connector on the C6 works, top or bottom. @@ -47,16 +50,16 @@ Connect the button module to the ESP32-C6 using one of the FPC ribbon cables tha The latches are small and the ribbon cable is fragile. Lift the latch with a fingernail, slide the cable in, and press the latch down. Never pull on the cable itself. -## Add the button component in ESPHome Device Builder +## Add Component to ESPHome Device Builder -ESPHome Device Builder ships an Add Component flow that knows the pin layout for every Apollo Starter Kit module. Use it instead of writing the binary sensor by hand, and you'll get the right GPIO and inversion settings on the first try. +ESPHome Device Builder ships an **Add Component** flow that knows the pin layout for every Apollo Starter Kit module. Use it instead of writing the binary sensor by hand, and you'll get the right GPIO and inversion settings on the first try. 1. Open your starter kit device in Device Builder and click **Edit**. 2. Click **Add Component** in the editor toolbar. -3. Search for **Button** and select the Apollo Starter Kit button component. +3. Search for **Button** and select the **Button Module**. 4. Click **Add**. Device Builder inserts the button's binary sensor block into your YAML. -![](../../../assets/button_component.gif) +![](../../../assets/esphome-device-builder-add-button-module.gif) ??? note "What the button YAML does" @@ -92,22 +95,26 @@ ESPHome Device Builder ships an Add Component flow that knows the pin layout for Flash the device so the new web server and button entity go live. 1. Click **Install** on your device card in ESPHome Device Builder. -2. Choose **Plug into the computer running ESPHome Device Builder** for the first flash, or **Wirelessly** if the device is already on your Wi-Fi. +2. Choose **Plug into the computer running ESPHome Device Builder** for the first flash, or **On The Network** if the device is already on your Wi-Fi. 3. Wait for the compile and flash to finish. First builds can take a few minutes. 4. The device reboots and reconnects to your Wi-Fi on its own. -**GIF PLACEHOLDER** +![](../../../assets/esphome-device-builder-install-button-component.gif) -## Test it in the web server +## Test the Button With the device back online, the button entity is live on the web server. Open it in a browser on the same network and watch it react in real time. +![](../../../assets/esphome-device-builder-launch-webserver-from-visit-button.gif) + 1. In a browser, open `http://.local/`. If you used `esphome-starter-kit` as the device name in Getting Started, that's `http://esphome-starter-kit.local/`. 2. Find the **Button** entity in the binary sensor list. 3. Press the button on the module. The entity flips from **OFF** to **ON** while the button is held, then back to **OFF** when you release it. > Web server page showing the Button binary sensor toggling between ON and OFF as the button is pressed. -**GIF PLACEHOLDER** +![](../../../assets/esphome-device-builder-test-button-events.gif) + +!!! success "Your button module is now ready for you to use in automations!" -!!! success "Your button module is wired up" \ No newline at end of file + Your Button Module is now ready for some fun tasks.. like toggling lights on and off in your room, watering your plants, and more! \ No newline at end of file diff --git a/docs/products/ESPHome-Starter-Kit/modules/casita-module.md b/docs/products/ESPHome-Starter-Kit/modules/casita-module.md index 0ee81595e..4818abffd 100755 --- a/docs/products/ESPHome-Starter-Kit/modules/casita-module.md +++ b/docs/products/ESPHome-Starter-Kit/modules/casita-module.md @@ -1,10 +1,10 @@ --- -title: Adding the button module +title: Adding the Button Module description: >- Wire up the ESPHome Starter Kit button module, add it through ESPHome Device Builder, and verify presses in the web server. --- -# Adding the Casita notification module +# Adding the Casita Module The Casita is the starter kit's notification module, a strip of ten addressable RGB LEDs and a small piezo buzzer behind the ESPHome logo silkscreen. By the end of this tutorial you'll have the lights and buzzer wired to your ESP32-C6, surfaced in your YAML, and ready to flash, animate, or sing in response to anything else you build. @@ -12,18 +12,21 @@ The Casita is the starter kit's notification module, a strip of ten addressable Work through the two prerequisites first: - - [First Steps](../first-steps/) to snap the Casita module off the panel. - - [Getting Started](../setup/getting-started/) to install ESPHome Device Builder and create your starter kit device. + * [Start Here](../start-here/) to snap the button module off the panel. + * [First Steps](../setup/first-steps/) to install ESPHome Device Builder and create your starter kit device. -## Start with your base config +#### Prerequisite -The starter kit project template gets you online, but it doesn't enable the web server yet. Add it now so you have a live page to control the LEDs against after flashing. +The Web Server is used to broadcast a local website using your device. This allows you to navigate to the IP address of your device or hostname such as esphome-starter-kit.local to easily control your new device! -1. In ESPHome Device Builder, open your starter kit device and click **Edit**. -2. Add the `web_server` component, making sure to select version 3. -3. Click **Save**. Don't install yet, the Casita gets added in the next section. +1. In the ESPHome Device Builder, navigate to the **Core configuration** section. +2. Click **Add component**. +3. Scroll to **Web Server** and click **Add**. +4. Click **Add** once more to confirm. +5. Toggle **Show advanced settings**. +6. Scroll down to **Version** and select **3** from the dropdown. -![](../../../assets/webserver.gif) +![](../../../assets/device-builder-install-web-server-v3.gif) ## Plug in the Casita module diff --git a/docs/products/ESPHome-Starter-Kit/modules/pir-module.md b/docs/products/ESPHome-Starter-Kit/modules/motion-module.md similarity index 75% rename from docs/products/ESPHome-Starter-Kit/modules/pir-module.md rename to docs/products/ESPHome-Starter-Kit/modules/motion-module.md index 395158445..c4ac90c00 100755 --- a/docs/products/ESPHome-Starter-Kit/modules/pir-module.md +++ b/docs/products/ESPHome-Starter-Kit/modules/motion-module.md @@ -1,29 +1,30 @@ --- -title: Adding the motion module -description: >- - Wire up the ESPHome Starter Kit button module, add it through ESPHome Device - Builder, and verify presses in the web server. +title: Adding the Motion Module +description: Wire up the ESPHome Starter Kit Motion Module which will turn your starter kit into an accurate motion sensor! --- -# Adding the PIR motion module +# Adding the Motion Module -The PIR motion module turns your starter kit into a motion sensor. By the end of this tutorial you'll have an MH-SR602 wired to your ESP32-C6, surfaced as a binary sensor in your YAML, and flipping live in the web server whenever something moves in front of it. +The Motion Module turns your starter kit into a motion sensor. By the end of this tutorial you'll have an MH-SR602 wired to your ESP32-C6, surfaced as a binary sensor in your YAML, and flipping live in the web server whenever something moves in front of it. !!! note "Before you start" Work through the two prerequisites first: - - [First Steps](../first-steps/) to snap the PIR motion module off the panel. - - [Getting Started](../setup/getting-started/) to install ESPHome Device Builder and create your starter kit device. + * [Start Here](../start-here/) to snap the button module off the panel. + * [First Steps](../setup/first-steps/) to install ESPHome Device Builder and create your starter kit device. -## Start with your base config +#### Prerequisite -The starter kit project template gets you online, but it doesn't enable the web server yet. Add it now so you have a live page to test the sensor against after flashing. +The Web Server is used to broadcast a local website using your device. This allows you to navigate to the IP address of your device or hostname such as esphome-starter-kit.local to easily control your new device! -1. In ESPHome Device Builder, open your starter kit device and click **Edit**. -2. Add the `web_server` component, making sure to select version 3. -3. Click **Save**. Don't install yet, the sensor gets added in the next section. +1. In the ESPHome Device Builder, navigate to the **Core configuration** section. +2. Click **Add component**. +3. Scroll to **Web Server** and click **Add**. +4. Click **Add** once more to confirm. +5. Toggle **Show advanced settings**. +6. Scroll down to **Version** and select **3** from the dropdown. -![](../../../assets/webserver.gif) +![](../../../assets/device-builder-install-web-server-v3.gif) ## Install the PIR sensor into the module diff --git a/docs/products/ESPHome-Starter-Kit/modules/temperature-humidity-module.md b/docs/products/ESPHome-Starter-Kit/modules/temperature-humidity-module.md index 7327dedf8..f760db9f4 100755 --- a/docs/products/ESPHome-Starter-Kit/modules/temperature-humidity-module.md +++ b/docs/products/ESPHome-Starter-Kit/modules/temperature-humidity-module.md @@ -1,10 +1,8 @@ --- -title: Adding the button module -description: >- - Wire up the ESPHome Starter Kit button module, add it through ESPHome Device - Builder, and verify presses in the web server. +title: Adding the Temperature and Humidity Module +description: Wire up the ESPHome Starter Kit Temperature and Humidity module. This is a trustworthy aht20 great for accurate temp and humidity measurements in any room! --- -# Adding the temperature and humidity module +# Adding the Temperature and Humidity Module The temperature and humidity module is your starter kit's first environmental sensor, reading the air around it on whatever interval you choose. By the end of this tutorial you'll have an AHT20F wired to your ESP32-C6, surfaced as two sensors in your YAML, and updating live in the web server. @@ -12,18 +10,21 @@ The temperature and humidity module is your starter kit's first environmental se Work through the two prerequisites first: - - [First Steps](../first-steps/) to snap the temperature and humidity module off the panel. - - [Getting Started](../setup/getting-started/) to install ESPHome Device Builder and create your starter kit device. + * [Start Here](../start-here/) to snap the button module off the panel. + * [First Steps](../setup/first-steps/) to install ESPHome Device Builder and create your starter kit device. -## Start with your base config +#### Prerequisite -The starter kit project template gets you online, but it doesn't enable the web server yet. Add it now so you have a live page to test the sensor against after flashing. +The Web Server is used to broadcast a local website using your device. This allows you to navigate to the IP address of your device or hostname such as esphome-starter-kit.local to easily control your new device! -1. In ESPHome Device Builder, open your starter kit device and click **Edit**. -2. Add the `web_server` component, making sure to select version 3. -3. Click **Save**. Don't install yet, the sensor gets added in the next section. +1. In the ESPHome Device Builder, navigate to the **Core configuration** section. +2. Click **Add component**. +3. Scroll to **Web Server** and click **Add**. +4. Click **Add** once more to confirm. +5. Toggle **Show advanced settings**. +6. Scroll down to **Version** and select **3** from the dropdown. -![](../../../assets/webserver.gif) +![](../../../assets/device-builder-install-web-server-v3.gif) ## Plug in the temperature and humidity module diff --git a/mkdocs.yml b/mkdocs.yml index ccf904d90..042e434fb 100755 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -502,13 +502,13 @@ nav: - Teardown and Reassembly Of BTN-1: products/btn1/troubleshooting/btn1-teardown.md - Reset Wi-Fi Credentials: products/btn1/troubleshooting/btn1-reset-wi-fi-credentials.md - ESPHome Starter Kit: - - First Steps: products/ESPHome-Starter-Kit/first-steps.md - - Getting Started: products/ESPHome-Starter-Kit/setup/getting-started.md + - Start Here: products/ESPHome-Starter-Kit/start-here.md + - First Steps: products/ESPHome-Starter-Kit/setup/first-steps.md - Modules: - - Button Module: products/ESPHome-Starter-Kit/modules/button-module.md - - Motion Module: products/ESPHome-Starter-Kit/modules/pir-module.md - - Temp & Humidity Module: products/ESPHome-Starter-Kit/modules/temperature-humidity-module.md - - LED & Buzzer Module: products/ESPHome-Starter-Kit/modules/casita-module.md + - Button: products/ESPHome-Starter-Kit/modules/button-module.md + - Motion: products/ESPHome-Starter-Kit/modules/motion-module.md + - Temp & Humidity: products/ESPHome-Starter-Kit/modules/temperature-humidity-module.md + - LED & Buzzer: products/ESPHome-Starter-Kit/modules/casita-module.md - Tutorials: - Using Secrets: products/ESPHome-Starter-Kit/tutorials/using-secrets.md - Holiday Ornaments: