Merge branch 'current' into next

_redirects

@@ -37,3 +37,5 @@
 /cookbook/sonoff-dual-light-switch.html https://devices.esphome.io/devices/Sonoff-Dual-DIY-light 301
 /cookbook/sonoff-t1-3.html https://devices.esphome.io/devices/Sonoff-T1-T2-T3 301
 /cookbook/dual-r2-cover.html /cookbook/lambda_magic.html#one-button-cover-control 301
+
+/ready-made/projects /projects/ 301

changelog/2023.9.0.rst

@@ -49,6 +49,14 @@ Release 2023.9.1 - September 28
 - Tuya Number Scaling :esphomepr:`5108` by :ghuser:`InvncibiltyCloak`
 - Migrate dashboard json files to /data folder instead of wiping out :esphomepr:`5441` by :ghuser:`jesserockz`
 
+Release 2023.9.2 - October 2
+----------------------------
+
+- SPI fixes for buggy components :esphomepr:`5446` by :ghuser:`clydebarrow`
+- Fix an Issue with IR Remote Climate and Whirlpool protocol toggle :esphomepr:`5447` by :ghuser:`the-mentor`
+- Fix SPI support for second bus on 2023.9.1 :esphomepr:`5456` by :ghuser:`angelnu`
+- Ensure esphome directory exists on addon startup :esphomepr:`5464` by :ghuser:`jesserockz`
+
 Breaking Changes
 ----------------
 

guides/supporters.rst

@@ -207,6 +207,7 @@ Contributors
 - `Matt Burke (@burkemw3) <https://github.com/burkemw3>`__
 - `buxtronix (@buxtronix) <https://github.com/buxtronix>`__
 - `bvansambeek (@bvansambeek) <https://github.com/bvansambeek>`__
+- `bvarick (@bvarick) <https://github.com/bvarick>`__
 - `c0ffeeca7 (@c0ffeeca7) <https://github.com/c0ffeeca7>`__
 - `Captain Haddock (@ca-haddock) <https://github.com/ca-haddock>`__
 - `Cal Howard (@calhoward) <https://github.com/calhoward>`__
@@ -288,6 +289,7 @@ Contributors
 - `Justin Grover (@dancingcactus) <https://github.com/dancingcactus>`__
 - `Dan C Williams (@dancwilliams) <https://github.com/dancwilliams>`__
 - `Daniel Bjørnbakk (@danibjor) <https://github.com/danibjor>`__
+- `danielionutmuresan (@danielionutmuresan) <https://github.com/danielionutmuresan>`__
 - `Daniel Kucera (@danielkucera) <https://github.com/danielkucera>`__
 - `Daniel O'Connor (@DanielO) <https://github.com/DanielO>`__
 - `Daniel Rheinbay (@danielrheinbay) <https://github.com/danielrheinbay>`__
@@ -548,7 +550,6 @@ Contributors
 - `Henrik Fransson (@hmfhmf) <https://github.com/hmfhmf>`__
 - `Hamish Moffatt (@hmoffatt) <https://github.com/hmoffatt>`__
 - `Hobby Components (@HobbyComponents) <https://github.com/HobbyComponents>`__
-- `Marcel Hoppe (@hobbypunk90) <https://github.com/hobbypunk90>`__
 - `Hopperpop (@Hopperpop) <https://github.com/Hopperpop>`__
 - `Ilia Sotnikov (@hostcc) <https://github.com/hostcc>`__
 - `Yang Hau (@howjmay) <https://github.com/howjmay>`__
@@ -577,7 +578,6 @@ Contributors
 - `Dom (@Ing-Dom) <https://github.com/Ing-Dom>`__
 - `Ingo Becker (@ingobecker) <https://github.com/ingobecker>`__
 - `Ingurum (@Ingurum) <https://github.com/Ingurum>`__
-- `Marc J (@InvncibiltyCloak) <https://github.com/InvncibiltyCloak>`__
 - `IoT-devices LLC (@iotdevicesdev) <https://github.com/iotdevicesdev>`__
 - `Ivo Roefs (@ironirc) <https://github.com/ironirc>`__
 - `irtimaled (@irtimaled) <https://github.com/irtimaled>`__
@@ -780,7 +780,6 @@ Contributors
 - `Marcel van der Veldt (@marcelveldt) <https://github.com/marcelveldt>`__
 - `Marc (@MarcHagen) <https://github.com/MarcHagen>`__
 - `marcinkowalczyk (@marcinkowalczyk) <https://github.com/marcinkowalczyk>`__
-- `Marcio Granzotto Rodrigues (@marciogranzotto) <https://github.com/marciogranzotto>`__
 - `marecabo (@marecabo) <https://github.com/marecabo>`__
 - `Ben Marengo (@marengaz) <https://github.com/marengaz>`__
 - `Marvin Gaube (@margau) <https://github.com/margau>`__
@@ -870,6 +869,7 @@ Contributors
 - `Oskar Napieraj (@napieraj) <https://github.com/napieraj>`__
 - `Patrick ZAJDA (@Nardol) <https://github.com/Nardol>`__
 - `Nate Lust (@natelust) <https://github.com/natelust>`__
+- `Nathan Marlor (@nathanmarlor) <https://github.com/nathanmarlor>`__
 - `ueno (@nayuta-ueno) <https://github.com/nayuta-ueno>`__
 - `Nazar Mokrynskyi (@nazar-pc) <https://github.com/nazar-pc>`__
 - `Bergont Nicolas (@nbergont) <https://github.com/nbergont>`__
@@ -964,6 +964,7 @@ Contributors
 - `Q. Marchi (@preeefix) <https://github.com/preeefix>`__
 - `Francesco Ciocchetti (@primeroz) <https://github.com/primeroz>`__
 - `probonopd (@probonopd) <https://github.com/probonopd>`__
+- `Gary Morris (@progrmr) <https://github.com/progrmr>`__
 - `Mike Lynch (@Prow7) <https://github.com/Prow7>`__
 - `Peter Tatrai (@ptatrai) <https://github.com/ptatrai>`__
 - `Leandro Puerari (@puerari) <https://github.com/puerari>`__
@@ -1102,7 +1103,6 @@ Contributors
 - `Jan Gutowski (@Switch123456789) <https://github.com/Switch123456789>`__
 - `Sybren A. Stüvel (@sybrenstuvel) <https://github.com/sybrenstuvel>`__
 - `synco (@synco) <https://github.com/synco>`__
-- `Marcel Feix (@Syndlex) <https://github.com/Syndlex>`__
 - `Suryandaru Triandana (@syndtr) <https://github.com/syndtr>`__
 - `SyXavier (@SyXavier) <https://github.com/SyXavier>`__
 - `Szewcson (@Szewcson) <https://github.com/Szewcson>`__
@@ -1120,6 +1120,7 @@ Contributors
 - `Terry Hardie (@thardie) <https://github.com/thardie>`__
 - `Michael Jahn (@thatSecOpsGuy) <https://github.com/thatSecOpsGuy>`__
 - `thatslolo (@thatslolo) <https://github.com/thatslolo>`__
+- `Avri Chen-Roth (@the-mentor) <https://github.com/the-mentor>`__
 - `The-Paran0id-Andr0id (@The-Paran0id-Andr0id) <https://github.com/The-Paran0id-Andr0id>`__
 - `Thomas Eckerstorfer (@TheEggi) <https://github.com/TheEggi>`__
 - `Theexternaldisk (@Theexternaldisk) <https://github.com/Theexternaldisk>`__
@@ -1223,6 +1224,7 @@ Contributors
 - `Sven Serlier (@wrt54g) <https://github.com/wrt54g>`__
 - `Wolfgang Tremmel (@wtremmel) <https://github.com/wtremmel>`__
 - `wysiwyng (@wysiwyng) <https://github.com/wysiwyng>`__
+- `De Cock Xavier (@xdecock) <https://github.com/xdecock>`__
 - `Jakob (@XDjackieXD) <https://github.com/XDjackieXD>`__
 - `Mike Brown (@xenoxaos) <https://github.com/xenoxaos>`__
 - `Péter Sárközi (@Xmister) <https://github.com/Xmister>`__
@@ -1244,4 +1246,4 @@ Contributors
 - `Zsolt Zsiros (@ZsZs73) <https://github.com/ZsZs73>`__
 - `Christian Zufferey (@zuzu59) <https://github.com/zuzu59>`__
 
-*This page was last updated September 28, 2023.*
+*This page was last updated October 2, 2023.*

index.rst

@@ -32,6 +32,11 @@ ESPHome is a system to control your microcontrollers by simple yet powerful conf
                         using the command line
                     </a>
                 </li>
+                <li>
+                    <a class="reference" href="/projects/">
+                        install ready-made project
+                    </a>
+                </li>
                 <li>
                     <a class="reference" href="/guides/migrate_sonoff_tasmota.html">
                         by migrating from Tasmota
@@ -902,3 +907,4 @@ If you'd like to share configurations for specific devices, please contribute to
     changelog/index
     custom/index
     images/index
+    projects/index

projects/index.rst

@@ -0,0 +1,17 @@
+.. _ready_made_projects:
+
+Ready-Made Projects
+====================
+
+.. seo::
+    :description: Install ready-made projects directly on your device.
+    :image: auto-fix.svg
+
+
+Unleash the potential of your device by installing ready-made ESPHome
+projects from this page. Connect your device to your PC, a few clicks in the browser
+and your ESPHome device is ready to do its magic - as a Bluetooth proxy or a media player.
+No programming or other software required.
+
+.. raw:: html
+   :file: ./installer.html

projects/installer.html

@@ -0,0 +1,719 @@
+<style>
+  .hidden {
+    display: none;
+  }
+  .question-prompt {
+    margin-top: 56px;
+    margin-bottom: 24px;
+    font-style: italic;
+  }
+  esp-web-install-button {
+    display: inline-block;
+    margin-bottom: 24px;
+  }
+  .types label {
+    display: flex;
+    margin-bottom: 24px;
+    align-items: top;
+    flex-direction: column;
+    position: relative;
+    padding-left: 48px;
+  }
+  .types input {
+    position: absolute;
+    left: 16px;
+  }
+  .types .name {
+    font-weight: bold;
+  }
+  .type {
+    margin-top: 56px;
+  }
+  .radios {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .radios label {
+    padding: 4px;
+    cursor: pointer;
+    width: calc(33.3% - 16px);
+    display: block;
+    position: relative;
+  }
+  .radios input {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+  }
+  .radios img {
+    display: block;
+    width: calc(100% - 8px);
+    border: 4px solid rgba(0, 0, 0, 0);
+    aspect-ratio: 1;
+  }
+  .radios input:checked + img {
+    border-color: #58a6ff;
+  }
+  @media only screen and (max-width: 450px) {
+    .radios label {
+      width: calc(50% - 16px);
+      max-width: initial;
+    }
+  }
+  .info ol {
+    margin-top: 0;
+    margin-bottom: 24px;
+  }
+  .info ol li {
+    margin-bottom: 8px;
+  }
+  .diy::after {
+    content: "DIY";
+    background-color: #f44336;
+    color: #fff;
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-size: 0.8em;
+    position: absolute;
+    bottom: 12px;
+    left: 12px;
+  }
+  body .diy {
+    display: none;
+  }
+  body.show-diy .diy {
+    display: initial;
+  }
+  .installer-footer {
+    margin-top: 56px;
+    padding-top: 16px;
+    font-size: 0.8em;
+    border-top: 1px solid darkgrey;
+  }
+</style>
+<script
+  type="module"
+  src="https://unpkg.com/esp-web-tools@9/dist/web/install-button.js?module"
+></script>
+
+<div class="admonition note unsupported hidden">
+  <p class="admonition-title">Note</p>
+  <p>
+    This page requires a browser that supports WebSerial. Please open this
+    website on your desktop using Google Chrome or Microsoft Edge.
+  </p>
+</div>
+
+<div class="question-prompt">I want to create a:</div>
+<div class="types">
+  <label>
+    <input type="radio" name="type" value="bluetooth" checked />
+    <div class="name">Bluetooth Proxy</div>
+    <div class="description">
+      Create a device to allow Home Assistant to control Bluetooth devices.
+    </div>
+  </label>
+  <label>
+    <input type="radio" name="type" value="media" />
+    <div class="text">
+      <div class="name">Media Player</div>
+      <div class="description">
+        Create an internet connected smart media player.
+      </div>
+    </div>
+  </label>
+  <label>
+    <input type="radio" name="type" value="empty" />
+    <div class="name">Empty ESPHome device</div>
+    <div class="description">
+      No special features built-in. Ready to make it your own.
+    </div>
+  </label>
+</div>
+
+<div
+  class="type type-bluetooth"
+  data-manifest-root="https://esphome.github.io/bluetooth-proxies"
+>
+  <div class="question-prompt">
+    Pick the device you want to turn into a Bluetooth proxy:
+  </div>
+  <div class="radios">
+    <label>
+      <input
+        type="radio"
+        name="bluetooth-device"
+        class="device-option"
+        value="esp32-generic"
+        checked
+      />
+      <img
+        src="/_static/projects/bluetooth-proxy/esp32_generic.png"
+        alt="ESP32 Generic"
+      />
+    </label>
+    <label>
+      <input
+        type="radio"
+        name="bluetooth-device"
+        class="device-option"
+        value="m5stack-atom-lite"
+      />
+      <img
+        src="/_static/projects/bluetooth-proxy/m5stack_atom_lite.png"
+        alt="M5Stack Atom Lite"
+      />
+    </label>
+    <label>
+      <input
+        type="radio"
+        name="bluetooth-device"
+        class="device-option"
+        value="olimex-esp32-poe-iso"
+      />
+      <img
+        src="/_static/projects/bluetooth-proxy/olimex_esp32_poe_iso.png"
+        alt="Olimex ESP32 Power-over-Ethernet ISO"
+      />
+    </label>
+    <label class="diy">
+      <input
+        type="radio"
+        name="bluetooth-device"
+        class="device-option"
+        value="lilygo-t-eth-poe"
+      />
+      <img
+        src="/_static/projects/bluetooth-proxy/lilygo-eth-poe.png"
+        alt="LilyGO T-ETH-POE"
+      />
+    </label>
+    <label class="diy">
+      <input
+        type="radio"
+        name="bluetooth-device"
+        class="device-option"
+        value="gl-s10"
+      />
+      <img
+        src="/_static/projects/bluetooth-proxy/gl-s10.png"
+        alt="GL.iNet GL-S10"
+      />
+    </label>
+    <label class="diy">
+      <input
+        type="radio"
+        name="bluetooth-device"
+        class="device-option"
+        value="wt32-eth01"
+      />
+      <img
+        src="/_static/projects/bluetooth-proxy/wt32-eth01.png"
+        alt="Wireless-Tag WT32-ETH01"
+      />
+    </label>
+  </div>
+
+  <div class="question-prompt">Start the installation:</div>
+  <esp-web-install-button
+    manifest="https://firmware.esphome.io/esphome-web/manifest.json"
+  ></esp-web-install-button>
+
+  <div class="hidden info esp32-generic">
+    <h3>Generic ESP32</h3>
+    <p>
+      Turn any ESP32 into a Bluetooth proxy for Home Assistant. This option only
+      works for "plain" ESP32 and not for ESP32-C3 or other variants.
+    </p>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a
+          href="https://www.amazon.com/ESP-WROOM-32-Development-Microcontroller-Integrated-Compatible/dp/B08D5ZD528/?&_encoding=UTF8&tag=homeassista0e-20&linkCode=ur2&linkId=f9087b654cd5735f0761ae5db99e1e1a&camp=1789&creative=9325"
+          >Amazon</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <div class="hidden info gl-s10">
+    <h3>GL.iNet GL-S10</h3>
+    <p>
+      ESP32 in a case with external antenna and wired Ethernet connection that
+      can also be powered using Power over Ethernet 802.3af. Note that when
+      installed via this website, Wi-Fi is disabled and it needs to be connected
+      via Ethernet.
+    </p>
+    <b>Warning: This board requires extra work.</b>
+    This device requires you to disassemble the device to be able to install it
+    as a Bluetooth proxy. This installation method is for revision 2.X of their
+    board. See instructions for the configuration of other revisions.
+    <a href="https://blakadder.com/gl-s10/">Read DIY instructions.</a>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a
+          href="https://store.gl-inet.com/collections/iot-gateway/products/gl-s10-bluetooth-iot-gateway"
+          >GL.iNet Shop</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <div class="hidden info m5stack-atom-lite">
+    <h3>M5Stack Atom Lite</h3>
+    <p>Small ESP32 board with a case.</p>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a
+          href="https://shop.m5stack.com/products/atom-lite-esp32-development-kit?ref=NabuCasa"
+          >M5Stack Shop</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://www.aliexpress.com/item/1005003299215808.html?aff_platform=portals-tool&sk=_A8G2YF&aff_trace_key=90326d2a90444b4887632f62dd533ce4-1654058373639-07963-_A8G2YF&terminal_id=c5517a8c9bb44b4fb32147398fbc2576&aff_fcid=90326d2a90444b4887632f62dd533ce4-1654058373639-07963-_A8G2YF&tt=CPS_NORMAL&aff_fsk=_A8G2YF"
+          >AliExpress</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <div class="hidden info olimex-esp32-poe-iso">
+    <h3>Olimex ESP32 Power-over-Ethernet ISO</h3>
+    <p>
+      ESP32 board with wired Ethernet connection that can also be powered using
+      Power over Ethernet 802.3af. Note that when installed via this website,
+      Wi-Fi is disabled and it needs to be connected via Ethernet. The
+      <i>ESP32-POE-ISO-EA</i> variant may provide better Bluetooth range since
+      it has an external antennae.
+
+      <a href="https://www.thingiverse.com/thing:3857281"
+        >Case on Thingiverse.</a
+      >
+    </p>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a
+          href="https://www.olimex.com/Products/IoT/ESP32/ESP32-POE-ISO-EA/open-source-hardware"
+          >Olimex</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://www.mouser.com/ProductDetail/Olimex-Ltd/ESP32-POE-ISO?qs=sGAEpiMZZMuqBwn8WqcFUj2aNd7i9W7uc087HzBKguU1UBkflb3j3w%3D%3D"
+          >Mouser</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <div class="hidden info wt32-eth01">
+    <h3>Wireless-Tag WT32-ETH01</h3>
+    <p>
+      ESP32 board with wired Ethernet connection. Note that when installed via
+      this website, Wi-Fi is disabled and it needs to be connected via Ethernet.
+      <a href="https://www.thingiverse.com/search?q=WT32-ETH01"
+        >Various enclosures on Thingiverse.</a
+      >
+    </p>
+    <p>
+      <b>Warning: This board requires extra work.</b>
+      This device requires you to create a special flash tool to be able to
+      install it as a Bluetooth proxy.
+      <a
+        href="https://community.home-assistant.io/t/how-i-installed-esphome-on-the-wt32-eth01/359027"
+        >Read DIY instructions.</a
+      >
+    </p>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a href="https://www.aliexpress.com/wholesale?SearchText=WT32-ETH01"
+          >AliExpress</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://eu.mouser.com/ProductDetail/Seeed-Studio/102991455?qs=hd1VzrDQEGjybZ4QAH35DA%3D%3D"
+          >Mouser</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://www.tubeszb.com/product/wt32-eth01-bluetooth-proxy-kit/53"
+          >TubesZB - Kit with enlosure and USB-C</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <div class="hidden info lilygo-t-eth-poe">
+    <h3>LilyGO T-ETH-POE ESP32-WROOM</h3>
+    <p>
+      A compact board with an ESP32-WROOM module and wired Ethernet connection.
+      Can be powered via Power over Ethernet 802.3af or via the built in USB-C
+      port. Note that when installed via this website, Wi-Fi is disabled and it
+      needs to be connected via Ethernet.
+      <a
+        href="https://www.thingiverse.com/search?q=LILYGO TTGO T-Internet-POE ESP32"
+        >Various enclosures on Thingiverse.</a
+      >
+    </p>
+    <p>
+      <b>Warning: This board requires extra work.</b>
+      This device comes with a special "download tool" that needs to be used to
+      install it as a Bluetooth proxy.
+    </p>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a
+          href="https://www.aliexpress.com/item/2255800936677694.html?pdp_ext_f=%7B%22sku_id%22%3A%2210000014557692201%22%7D"
+          >AliExpress</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <h3>For advanced users</h3>
+  <ul>
+    <li>
+      The device is adoptable in
+      <a
+        href="https://my.home-assistant.io/redirect/supervisor_addon/?addon=5c53de3b_esphome&repository_url=https%3A%2F%2Fgithub.com%2Fesphome%2Fhome-assistant-addon"
+        >the ESPHome dashboard</a
+      >
+    </li>
+    <li>
+      The YAML configuration is on
+      <a href="https://github.com/esphome/bluetooth-proxies/">GitHub</a>
+    </li>
+  </ul>
+</div>
+
+<div
+  class="type type-media hidden"
+  data-manifest-root="https://esphome.github.io/media-players"
+>
+  <div class="question-prompt">
+    Pick the device you want to turn into a media player:
+  </div>
+  <div class="radios">
+    <label>
+      <input
+        type="radio"
+        name="media-device"
+        class="device-option"
+        value="raspiaudio-muse-luxe"
+        checked
+      />
+      <img
+        src="/_static/projects/media-player/esp_muse_luxe.png"
+        alt="Raspiaudio ESP Muse Luxe"
+      />
+    </label>
+    <label>
+      <input
+        type="radio"
+        name="media-device"
+        class="device-option"
+        value="raspiaudio-muse-proto"
+      />
+      <img
+        src="/_static/projects/media-player/esp_muse_proto.png"
+        alt="Raspiaudio ESP Muse Proto"
+      />
+    </label>
+    <label>
+      <input
+        type="radio"
+        name="media-device"
+        class="device-option"
+        value="m5stack-atom-speaker-kit"
+      />
+      <img
+        src="/_static/projects/media-player/atom_speaker_kit.png"
+        alt="M5Stack Atom Speaker Kit"
+      />
+    </label>
+    <label>
+      <input
+        type="radio"
+        name="media-device"
+        class="device-option"
+        value="m5stack-atom-echo"
+      />
+      <img
+        src="/_static/projects/media-player/atom_echo.png"
+        alt="M5Stack Atom Echo Development Kit"
+      />
+    </label>
+  </div>
+
+  <div class="question-prompt">Start the installation:</div>
+  <esp-web-install-button></esp-web-install-button>
+
+  <div class="hidden info raspiaudio-muse-luxe">
+    <h3>Raspiaudio ESP Muse Luxe</h3>
+    <p>
+      Portable speaker with two 5 Watt speakers built-in. Can run 4 hours off
+      the built-in battery or be powered by a cable.
+    </p>
+    <p>
+      This is a powerful device. If you want to use it solely as a media player,
+      we recommend to use the
+      <a href="https://raspiaudio.github.io/">Squeezelite-ESP32 firmware</a>.
+    </p>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a href="https://raspiaudio.com/produit/esp-muse-luxe">Raspiaudio</a>
+      </li>
+      <li>
+        <a
+          href="https://www.amazon.com/gp/product/B09N3S9S29/?&_encoding=UTF8&tag=homeassista0e-20&linkCode=ur2&linkId=71c80756dcd782eba9f1a80dc576c7d3&camp=1789&creative=9325"
+          >Amazon</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <div class="hidden info raspiaudio-muse-proto">
+    <h3>Raspiaudio ESP Muse Proto</h3>
+    <p>Powerful audio prototyping board to create your own smart speakers.</p>
+    <p>
+      This is a powerful device. If you want to use it solely as a media player,
+      we recommend to use the
+      <a href="https://raspiaudio.github.io/">Squeezelite-ESP32 firmware</a>.
+    </p>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a href="https://raspiaudio.com/produit/muse-proto">Raspiaudio</a>
+      </li>
+      <li>
+        <a
+          href="https://www.amazon.com/gp/product/B097F884WL/?&_encoding=UTF8&tag=homeassista0e-20&linkCode=ur2&linkId=71c80756dcd782eba9f1a80dc576c7d3&camp=1789&creative=9325"
+          >Amazon</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <div class="hidden info m5stack-atom-speaker-kit">
+    <h3>M5Stack Atom Speaker Kit</h3>
+    <p>Small ESP32 board with a built-in speaker and a headphone jack.</p>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a
+          href="https://shop.m5stack.com/products/atom-speaker-kit-ns4168?ref=NabuCasa"
+          >M5Stack Shop</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://www.aliexpress.com/item/1005003297368240.html?aff_platform=portals-tool&sk=_A8G2YF&aff_trace_key=90326d2a90444b4887632f62dd533ce4-1654058373639-07963-_A8G2YF&terminal_id=c5517a8c9bb44b4fb32147398fbc2576&aff_fcid=90326d2a90444b4887632f62dd533ce4-1654058373639-07963-_A8G2YF&tt=CPS_NORMAL&aff_fsk=_A8G2YF"
+          >AliExpress</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <div class="hidden info m5stack-atom-echo">
+    <h3>M5Stack Atom Echo Development Kit</h3>
+    <p>Tiny ESP32 board with a built-in speaker.</p>
+    <p>Buy</p>
+    <ul>
+      <li>
+        <a
+          href="https://shop.m5stack.com/collections/m5-controllers/products/atom-echo-smart-speaker-dev-kit?ref=NabuCasa"
+          >M5Stack Shop</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://www.aliexpress.com/item/1005003299332198.html?aff_platform=portals-tool&sk=_A8G2YF&aff_trace_key=90326d2a90444b4887632f62dd533ce4-1654058373639-07963-_A8G2YF&terminal_id=c5517a8c9bb44b4fb32147398fbc2576&aff_fcid=90326d2a90444b4887632f62dd533ce4-1654058373639-07963-_A8G2YF&tt=CPS_NORMAL&aff_fsk=_A8G2YF"
+          >AliExpress</a
+        >
+      </li>
+    </ul>
+  </div>
+
+  <h3>For advanced users</h3>
+  <ul>
+    <li>
+      The device is adoptable in
+      <a
+        href="https://my.home-assistant.io/redirect/supervisor_addon/?addon=5c53de3b_esphome&amp;repository_url=https%3A%2F%2Fgithub.com%2Fesphome%2Fhome-assistant-addon"
+        >the ESPHome dashboard</a
+      >
+    </li>
+    <li>
+      The YAML configuration is on
+      <a href="https://github.com/esphome/media-players/">GitHub</a>
+    </li>
+  </ul>
+</div>
+
+<div class="type type-empty">
+  <div class="question-prompt">
+    Pick the manufacturer of the device you want to set up:
+  </div>
+
+  <div class="radios">
+    <label>
+      <input
+        type="radio"
+        name="esphome-device"
+        class="device-option"
+        value="espressif"
+        checked
+      />
+      <img src="/_static/projects/empty/espressif.png" alt="Espressif" />
+    </label>
+    <label>
+      <input
+        type="radio"
+        name="esphome-device"
+        class="device-option"
+        value="raspberry"
+      />
+      <img src="/_static/projects/empty/pico-w.png" alt="Raspberry Pi Pico W" />
+    </label>
+  </div>
+
+  <div class="hidden info espressif">
+    <div class="question-prompt">Start the installation:</div>
+    <esp-web-install-button
+      manifest="https://firmware.esphome.io/esphome-web/manifest.json"
+    ></esp-web-install-button>
+  </div>
+
+  <div class="hidden info raspberry">
+    <div class="question-prompt">Installation instructions:</div>
+
+    <ol>
+      <li>Disconnect your Raspberry Pi Pico from your computer</li>
+      <li>
+        Hold the BOOTSEL button and connect the Pico to your computer. The Pico
+        will show up as a USB drive named RPI-RP2
+      </li>
+      <li>
+        Download
+        <a
+          href="https://firmware.esphome.io/esphome-web/pico-w/esphome-web-rp2040.uf2"
+          >ESPHome for Pico</a
+        >
+      </li>
+      <li>
+        Drag the downloaded file to the RPI-RP2 USB drive. The installation is
+        complete when the drive disappears
+      </li>
+      <li>
+        Connect your Pico to the Wi-Fi network. Once connected, it will
+        automatically show up on your ESPHome dashboard.<br />
+        <button type="button" onclick="showImprovWifiSerial()">
+          Configure Wi-Fi
+        </button>
+      </li>
+    </ol>
+  </div>
+</div>
+
+<div class="installer-footer">
+  ESP installer powered by
+  <a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a>.
+  Affiliated links are used on this website to support ESPHome development. Use
+  Coupon code <code>NABUCASA</code> on
+  <a href="https://shop.m5stack.com/discount/NABUCASA?ref=NabuCasa">M5Stack</a>
+  for 5% off your order.
+</div>
+
+<script>
+  async function showImprovWifiSerial() {
+    import(
+      "https://unpkg.com/improv-wifi-serial-sdk@2.5.0/dist/web/serial-launch-button.js?module"
+    );
+    let port;
+    try {
+      port = await navigator.serial.requestPort({
+        filters: [
+          {
+            usbProductId: 61450,
+            usbVendorId: 11914,
+          },
+        ],
+      });
+    } catch (err) {
+      if (err.name !== "NotFoundError") {
+        alert(`Error: ${err.message}`);
+      }
+      return;
+    }
+
+    try {
+      await port.open({ baudRate: 115200 });
+    } catch (err) {
+      alert(err.message);
+      return;
+    }
+
+    const improv = document.createElement(
+      "improv-wifi-serial-provision-dialog"
+    );
+    improv.port = port;
+    document.body.appendChild(improv);
+  }
+
+  document.querySelectorAll('input[name="type"]').forEach((radio) =>
+    radio.addEventListener("change", () => {
+      document.querySelectorAll(".type").forEach((info) => {
+        info.classList.add("hidden");
+      });
+      document.querySelector(`.type-${radio.value}`).classList.remove("hidden");
+    })
+  );
+  document.querySelectorAll("input.device-option").forEach((radio) =>
+    radio.addEventListener("change", () => {
+      const typeRoot = radio.closest(".type");
+      const manifestRoot = typeRoot.dataset.manifestRoot;
+      if (manifestRoot) {
+        const button = typeRoot.querySelector("esp-web-install-button");
+        button.manifest = `${manifestRoot}/${radio.value}-manifest.json`;
+      }
+
+      typeRoot.querySelectorAll(".info").forEach((info) => {
+        info.classList.add("hidden");
+      });
+      typeRoot.querySelector(`.info.${radio.value}`).classList.remove("hidden");
+    })
+  );
+  document
+    .querySelector('input[name="type"]:checked')
+    .dispatchEvent(new Event("change"));
+  document
+    .querySelectorAll("input.device-option:checked")
+    .forEach((radio) => radio.dispatchEvent(new Event("change")));
+  customElements.whenDefined("esp-web-install-button").then((cls) => {
+    if (cls.isSupported) {
+      return;
+    }
+    // show unsupported note
+    document.querySelector(".unsupported").classList.remove("hidden");
+    // disable all radio
+    document
+      .querySelectorAll('input[name="type"]')
+      .forEach((radio) => radio.setAttribute("disabled", "disabled"));
+    // Hide all types
+    document.querySelectorAll(".type").forEach((info) => {
+      info.classList.add("hidden");
+    });
+    document.querySelector(".installer-footer").classList.add("hidden");
+  });
+</script>