diff --git a/docs/assets/esphome-device-builder-dashboard-card-overview.png b/docs/assets/esphome-device-builder-dashboard-card-overview.png new file mode 100755 index 0000000000..340b367767 Binary files /dev/null and b/docs/assets/esphome-device-builder-dashboard-card-overview.png differ diff --git a/docs/assets/esphome-device-builder-device-navigator.gif b/docs/assets/esphome-device-builder-device-navigator.gif new file mode 100755 index 0000000000..907d02441b Binary files /dev/null and b/docs/assets/esphome-device-builder-device-navigator.gif differ diff --git a/docs/assets/esphome-device-builder-form-panel.png b/docs/assets/esphome-device-builder-form-panel.png new file mode 100755 index 0000000000..7a6d8a2c7c Binary files /dev/null and b/docs/assets/esphome-device-builder-form-panel.png differ diff --git a/docs/assets/esphome-device-builder-logs-start-stop.gif b/docs/assets/esphome-device-builder-logs-start-stop.gif new file mode 100755 index 0000000000..41ed729384 Binary files /dev/null and b/docs/assets/esphome-device-builder-logs-start-stop.gif differ diff --git a/docs/assets/esphome-device-builder-navigate-to-editor.gif b/docs/assets/esphome-device-builder-navigate-to-editor.gif new file mode 100755 index 0000000000..b6218ac0d1 Binary files /dev/null and b/docs/assets/esphome-device-builder-navigate-to-editor.gif differ diff --git a/docs/assets/esphome-device-builder-save-validate-install.gif b/docs/assets/esphome-device-builder-save-validate-install.gif new file mode 100755 index 0000000000..c332a080a6 Binary files /dev/null and b/docs/assets/esphome-device-builder-save-validate-install.gif differ diff --git a/docs/assets/esphome-device-builder-yaml-editor.png b/docs/assets/esphome-device-builder-yaml-editor.png new file mode 100755 index 0000000000..7f4e2a9832 Binary files /dev/null and b/docs/assets/esphome-device-builder-yaml-editor.png differ diff --git a/docs/products/ESPHome-Starter-Kit/learning-the-basics/device-builder-tour.md b/docs/products/ESPHome-Starter-Kit/learning-the-basics/device-builder-tour.md index f9915c4048..bc8fd1f06b 100644 --- a/docs/products/ESPHome-Starter-Kit/learning-the-basics/device-builder-tour.md +++ b/docs/products/ESPHome-Starter-Kit/learning-the-basics/device-builder-tour.md @@ -1,6 +1,8 @@ --- title: Device Builder Tour -description: A guided tour of every screen in the ESPHome Device Builder, using your Apollo ESPHome Starter Kit as the example device. +description: >- + A guided tour of every screen in the ESPHome Device Builder, using your Apollo + ESPHome Starter Kit as the example device. --- # Device Builder Tour @@ -12,8 +14,7 @@ The **ESPHome Device Builder** is the app you used in [First Steps](../setup/fir When you open **ESPHome Device Builder**, you see a list of your ESPHome devices. - -![ESPHome Device Builder landing page with the Starter Kit card visible](../../../assets/device-builder-tour-landing.png) +![](../../../assets/esphome-device-builder-dashboard-card-overview.png) * The blue **Edit** button on your device card opens the [configuration editor](#editor). You'll use this most. @@ -29,26 +30,23 @@ When you open **ESPHome Device Builder**, you see a list of your ESPHome devices Click **Edit** on your device card and the screen flips into the configuration editor. It has three panes: the **Device navigator** on the left, the **Form pane** in the middle, and the **YAML editor** on the right. - -![ESPHome Device Builder editor in three-pane mode](../../../assets/device-builder-tour-editor.png) +![](../../../assets/esphome-device-builder-navigate-to-editor.gif) #### Device navigator (left) The left pane is your config's table of contents. It groups everything into three buckets: * **Core configuration.** Foundational settings like the device name, Wi-Fi, the connection to Home Assistant, OTA updates, and the web server. For the Starter Kit these are all pre-configured. See [Core Components](core-components.md) for details on each. -* **Components.** The things your device does: switches, sensors, lights. The default Starter Kit has the accessory power switch, the I²C bus, and the AHT10 temperature and humidity sensor. Use **+ Add component** to add more. +* **Components.** The things your device does: switches, sensors, lights. The default Starter Kit has the accessory power switch, the I²C bus, and the AHT10 temperature and humidity sensor. Use **\+ Add component** to add more. * **Automations.** Reactions that run on the device, like "when this button is pressed, turn that switch on". The Starter Kit ships with none by default. - -![Device navigator with one component selected](../../../assets/device-builder-tour-navigator.png) +![](../../../assets/esphome-device-builder-device-navigator.gif) #### Form pane (middle) Click anything in the navigator to see its settings here as a form. Every field has inline help text, and a **Docs** link in the top right takes you to the official ESPHome reference for that component. - -![A component form in the middle pane](../../../assets/device-builder-tour-form-pane.png) +![](../../../assets/esphome-device-builder-form-panel.png) #### YAML editor (right) @@ -56,26 +54,23 @@ The right pane is the raw YAML for your device, colour-coded with line numbers. The form pane and the YAML editor are always in sync. Edit either side and the other updates instantly. You can learn [YAML](what-is-yaml.md) by reading what the forms produce. - -![Form and YAML staying in sync](../../../assets/device-builder-tour-form-yaml-sync.gif) +![](../../../assets/esphome-device-builder-yaml-editor.png) ## Publishing Changes When you have finished making changes: -1. Click **Validate** at the bottom right. ESPHome compiles your config and reports any errors with the exact line and reason. -2. Click **Save**. This writes the YAML file. Nothing is sent to the device yet. -3. After saving, an **Install** button appears at the bottom right of the editor. If there's also a new ESPHome release available, the button reads **Update** instead. Click it, then pick **Wirelessly** for day-to-day OTA, or **Plug into this computer** for USB. +1. Click **Save**. This writes the YAML file. Nothing is sent to the device yet. +2. Click **Validate** at the bottom right. ESPHome checks your config and reports any errors with the exact line and reason. +3. After saving, an **Install** button appears at the bottom right of the editor. If there's also a new ESPHome release available, the button reads **Update** instead. Click it, then pick **On the Network** for OTA, or **Plug into this computer** for USB. - -![The Install dialog with three install paths](../../../assets/device-builder-tour-install-dialog.png) +![](../../../assets/esphome-device-builder-save-validate-install.gif) #### Logs -Click **Logs** from the info panel or the device card's three-dot menu to open a live stream of what the device is reporting. +Click **Logs** from the info panel or the device card's three-dot menu to open a live stream of what the device is reporting. Click **Stop** when done. - -![Live logs from the Starter Kit](../../../assets/device-builder-tour-logs.png) +![](../../../assets/esphome-device-builder-logs-start-stop.gif) Pop them open when something looks off, or just to watch sensor readings come in. @@ -85,4 +80,4 @@ Pop them open when something looks off, or just to watch sensor readings come in * Read [What is secrets.yaml?](what-is-secrets-yaml.md) to understand how Wi-Fi and encryption keys are stored. * Bookmark the [official ESPHome documentation](https://esphome.io) for component reference whenever you click a **Docs** link. - Back - Explaining ESPHome Next - What is YAML? + Back - Explaining ESPHome Next - What is YAML? \ No newline at end of file