diff --git a/docs/assets/esphome-starter-kit-attach-fpc-to-button-module.webp b/docs/assets/esphome-starter-kit-attach-fpc-to-button-module.webp new file mode 100755 index 000000000..0ef10ca53 Binary files /dev/null and b/docs/assets/esphome-starter-kit-attach-fpc-to-button-module.webp differ diff --git a/docs/assets/esphome-starter-kit-attach-top-fpc-ribbon.webp b/docs/assets/esphome-starter-kit-attach-top-fpc-ribbon.webp new file mode 100755 index 000000000..63846dfac Binary files /dev/null and b/docs/assets/esphome-starter-kit-attach-top-fpc-ribbon.webp differ diff --git a/docs/assets/esphome-starter-kit-remove-usb.webp b/docs/assets/esphome-starter-kit-remove-usb.webp new file mode 100755 index 000000000..0d53e5a0e Binary files /dev/null and b/docs/assets/esphome-starter-kit-remove-usb.webp differ diff --git a/docs/products/ESPHome-Starter-Kit/modules/button-module.md b/docs/products/ESPHome-Starter-Kit/modules/button-module.md index 91f34b40f..1f1458463 100644 --- a/docs/products/ESPHome-Starter-Kit/modules/button-module.md +++ b/docs/products/ESPHome-Starter-Kit/modules/button-module.md @@ -23,20 +23,29 @@ The starter kit project template gets you online, but it doesn't enable the web 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. -![](../../../assets/webserver.gif) +![](../../../assets/device-builder-install-web-server-v3.gif) ## Plug in the 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. -1. Unplug the USB-C cable from the ESP32-C6 so the board is powered off. -2. Flip up the latch on the FPC connector on both the C6 and the button module. -3. Slide one end of the ribbon cable into each connector with the contacts facing the board, then press each latch back down to lock the cable in. -4. Plug the C6 back into your computer. +1\. Unplug the USB-C cable from the ESP32-C6 so the board is powered off. -**GIF PLACEHOLDER** +![](../../../assets/esphome-starter-kit-remove-usb.webp) + +2\. Flip up the latch on the FPC connector then gently slide the ribbon cable in to the connector. Gently press the latch down to lock it in place + +![](../../../assets/esphome-starter-kit-attach-top-fpc-ribbon.webp) + +3\. Slide the ribbon cable into the button module with the blue side facing upwards then press the latch down to lock it in place. + +![](../../../assets/esphome-starter-kit-attach-fpc-to-button-module.webp) + +4\. Plug the C6 back into your computer. + +!!! warning "Handle the FPC connectors gently" -!!! warning "Handle the FPC connectors gently" 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. + 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 @@ -101,4 +110,4 @@ With the device back online, the button entity is live on the web server. Open i **GIF PLACEHOLDER** -!!! success "Your button module is wired up" +!!! success "Your button module is wired up" \ No newline at end of file diff --git a/docs/products/ESPHome-Starter-Kit/setup/getting-started.md b/docs/products/ESPHome-Starter-Kit/setup/first-steps.md similarity index 99% rename from docs/products/ESPHome-Starter-Kit/setup/getting-started.md rename to docs/products/ESPHome-Starter-Kit/setup/first-steps.md index d116dd5e2..6fab778d9 100755 --- a/docs/products/ESPHome-Starter-Kit/setup/getting-started.md +++ b/docs/products/ESPHome-Starter-Kit/setup/first-steps.md @@ -1,8 +1,8 @@ --- -title: Getting Started with the ESPHome Starter Kit +title: First Steps with the ESPHome Starter Kit description: Step by step guide for getting started with the ESPHome Starter Kit --- -# ESPHome Starter Kit - Getting Started +# ESPHome Starter Kit - First Steps This guide walks you through installing the ESPHome Device Builder app, and writing your first ESPHome YAML configuration from scratch. diff --git a/docs/products/ESPHome-Starter-Kit/first-steps.md b/docs/products/ESPHome-Starter-Kit/start-here.md similarity index 100% rename from docs/products/ESPHome-Starter-Kit/first-steps.md rename to docs/products/ESPHome-Starter-Kit/start-here.md