added: quickstart guide for flashing (#48)

Schluggi · May 21, 2023 · 39eb2a8 · 39eb2a8
1 parent 3137d8d
commit 39eb2a8
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 10 deletions.
diff --git a/docs/homeassistant.md b/docs/homeassistant.md
diff --git a/docs/img/add-on_esphome.png b/docs/img/add-on_esphome.png
diff --git a/docs/img/add-on_store.png b/docs/img/add-on_store.png
diff --git a/docs/img/add-ons.png b/docs/img/add-ons.png
diff --git a/docs/img/esphome_flashing.png b/docs/img/esphome_flashing.png
diff --git a/docs/img/esphome_install.png b/docs/img/esphome_install.png
diff --git a/docs/img/esphome_new_device.png b/docs/img/esphome_new_device.png
diff --git a/docs/img/esphome_webusb.png b/docs/img/esphome_webusb.png
diff --git a/docs/img/homeassistant_esphome_install.png b/docs/img/homeassistant_esphome_install.png
diff --git a/docs/img/settings.png b/docs/img/settings.png
diff --git a/docs/img/sidebar.png b/docs/img/sidebar.png
diff --git a/docs/quickstart.md b/docs/quickstart.md
@@ -47,14 +47,95 @@ found [here](bom.md).
 
 Should be easy and self explainable.
 
-## Flash ESPHome
+## Flashing Firmware
 
-[Click here](flashing.md).
+Now you have a fully assembled AIOsense but how can you integrate this in
+Home Assistant?
+
+### Installing the ESPHome dashboard
+
+> This will only work for _Home Assistant OS_ and _Supervised_. For all other
+> versions please use the
+> [docker image](https://esphome.io/guides/getting_started_command_line.html#)
+> or install it [manually](https://esphome.io/guides/installing_esphome.html).
+
+First we need an ESPHome Dashboard. The best way to get one is by using the
+official Home Assistant add-on.
+
+Therefore, we go to our Home Assistant instance and click
+on `Settings -> Add-ons`:
+
+![settings.png](img/settings.png)
+![add-ons.png](img/add-ons.png)
+
+We can find the `ADD-ON STORE` in the bottom right corner:
+
+![add-on_store.png](img/add-on_store.png)
+
+We are looking for the ESPHome add-on (without beta and dev) and install it.
+![add-on_esphome.png](img/add-on_esphome.png)
+![homeassistant_esphome_install.png](img/homeassistant_esphome_install.png)
+
+The installation can take several minutes, so please be patient. Afterward we
+enable `Start on boot`, `Auto update` and `Show in sidebar`.
+![homeassistant_esphome_add-on.png](img/homeassistant_esphome_add-on.png)
+
+We can now open our dashboard by clicking on it at the sidebar:
+![sidebar.png](img/sidebar.png)
+
+### Flashing
+
+With an open dashboard we can now flash our device, but first we need some
+configuration.
+
+Click `New Device` and fill out the form:
+
+![esphome_new_device.png](img/esphome_new_device.png)
+
+Skip the installation on the second screen and choose the ESP32-C3.
+
+We don't need the encryption key yet. Skip it.
+
+Our device is now displayed on the dashboard. You need to change the
+configuration. Click `EDIT`.
+
+This is the configuration that will be flashed onto your device. We need nothing of
+this but the api encryption key and the ota password so copy/save these values
+for later.
+
+Replace the hole file with the content of
+[this](https://github.com/Schluggi/AIOsense/blob/main/esphome/esphome.yaml)
+file and replace both `<secret>` values with your saved ones and change lines
+2-4 to the name you pick earlier.
+
+Everything changed? Great! If not already done, connect the board via USB to
+your PC, click `INSTALL` in the top right corner and
+select `Plug into this computer` as flashing method.
+
+![esphome_install.png](img/esphome_install.png)
+
+> This will only work on a Chromium based browser. For all other browser please
+> take a look how to flash manually
+
+A popup will ask for the COM port. Select the port of the board and click
+`Connect`.
+
+![esphome_webusb.png](img/esphome_webusb.png)
+
+Your browser will now connect to your board and flash it. This can take several
+minutes. The blue circle will spin without any additional feedback. Be patient.
+
+![esphome_flashing.png](img/esphome_flashing.png)
+
+Your AIOsense is now ready to use
+
+## Home Assistant Integration (wip)
+
+...
 
 ## Further steps (optional)
 
-- [Integrate Home Assistant](homeassistant.md).
-- Print a case (wip)
+- [Print a case](case.md)
 
 <hr>
 ³ Affiliate link