Upstream/esphome-docs
1
0
Fork 0
mirror of https://github.com/esphome/esphome-docs.git synced 2025-01-25 22:11:29 +01:00
Code Issues Projects Releases Wiki Activity

Add Voice installers to ready-made projects (#3256)

Browse Source 
* Add voice

* Add button

* Apply suggestions from code review

Co-authored-by: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com>

* Update voice follow-up instruction

* Remove dig2go

* Remove ESP Muse

* Remove unused CSS

---------

Co-authored-by: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com>
This commit is contained in:
Paulus Schoutsen 2023-10-11 18:06:25 -07:00 committed by GitHub
parent c305a836f9
commit b3fa1836be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 171 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
_static/projects/voice-assistant/esp32-s3-box-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

176
projects/installer.html
View File

@ -109,8 +109,15 @@
<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>
<input type="radio" name="type" value="voice" checked />
<div class="name">Voice assistant</div>
<div class="description">
Create a device to control Home Assistant with your voice.
</div>
</label>
<label>
<input type="radio" name="type" value="bluetooth" />
<div class="name">Bluetooth proxy</div>
<div class="description">
Create a device to allow Home Assistant to control Bluetooth devices.
</div>
@ -133,6 +140,145 @@
</label>
</div>
<div
class="type type-voice hidden"
data-manifest-root="https://firmware.esphome.io/voice-assistant"
>
<div class="question-prompt">
Pick the device you want to turn into a voice assistant:
</div>
<div class="radios">
<label>
<input
type="radio"
name="voice-device"
class="device-option"
value="m5stack-atom-echo"
checked
/>
<img
src="/_static/projects/media-player/atom_echo.png"
alt="M5Stack Atom Echo Development Kit"
/>
</label>
<!-- <label>
<input
type="radio"
name="voice-device"
class="device-option"
value="esp32-s3-box-3"
/>
<img
src="/_static/projects/voice-assistant/esp32-s3-box-3.png"
alt="ESP32-S3-BOX-3"
/>
</label> -->
</div>
<div class="hidden info esp32-s3-box-3">
<div class="question-prompt">Select your variant:</div>
<div class="types">
<label>
<input
type="radio"
name="esp32-s3-box-3-variant"
value="box-3"
disabled
/>
<div class="name" style="opacity: 0.7">
ESP32-S3-BOX-3 (Coming soon)
</div>
</label>
</div>
<div class="types">
<label>
<input
type="radio"
name="esp32-s3-box-3-variant"
value="esp32-s3-box"
checked
/>
<div class="name">ESP32-S3-BOX</div>
</label>
</div>
<div class="types">
<label>
<input
type="radio"
name="esp32-s3-box-3-variant"
value="esp32-s3-box-lite"
/>
<div class="name">ESP32-S3-BOX-Lite</div>
</label>
</div>
</div>
<div class="question-prompt">Start the installation:</div>
<esp-web-install-button></esp-web-install-button>
<div class="question-prompt">Configure Home Assistant:</div>
<p>
Follow
<a
href="https://www.home-assistant.io/voice_control/thirteen-usd-voice-remote/"
target="_blank"
>this tutorial</a
>
to configure Home Assistant to use your new voice assistant.
</p>
<div class="hidden info esp32-s3-box-3">
<h3>ESP32-S3-BOX-3</h3>
<p>The open-source reference design for voice assistants by Espressif.</p>
<p>Buy</p>
<ul>
<li>
<a
href="https://www.aliexpress.us/item/3256805733893224.html?gatewayAdapt=glo2usa4itemAdapt"
>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/firmware/tree/main/voice-assistant/"
>GitHub</a
>
</li>
</ul>
</div>
<div
class="type type-bluetooth"
data-manifest-root="https://firmware.esphome.io/bluetooth-proxy"
@ -688,13 +834,33 @@
const manifestRoot = typeRoot.dataset.manifestRoot;
if (manifestRoot) {
const button = typeRoot.querySelector("esp-web-install-button");
button.manifest = `${manifestRoot}/${radio.value}/manifest.json`;
let device = radio.value;
const variant = typeRoot.querySelector(
`input[name="${device}-variant"]:checked`
);
if (variant) {
device = variant.value;
}
button.manifest = `${manifestRoot}/${device}/manifest.json`;
}
// Show matching info blocks, hide the others
typeRoot.querySelectorAll(".info").forEach((info) => {
info.classList.add("hidden");
info.classList.toggle("hidden", !info.classList.contains(radio.value));
});
typeRoot.querySelector(`.info.${radio.value}`).classList.remove("hidden");
})
);
// Handle selecting a variant
document.querySelectorAll('input[name$="-variant"]').forEach((radio) =>
radio.addEventListener("change", () => {
const typeRoot = radio.closest(".type");
// Selecting a device handles the variant, so just trigger change again
typeRoot
.querySelector("input.device-option:checked")
.dispatchEvent(new Event("change"));
})
);