mirror of
https://github.com/esphome/esp-web-tools.git
synced 2025-04-19 21:27:20 +00:00
95 lines
2.6 KiB
HTML
95 lines
2.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>ESP Web Tools</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, Ubuntu, sans-serif;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
.content {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 12px;
|
|
}
|
|
esp-web-flash-button {
|
|
display: inline-block;
|
|
margin-bottom: 8px;
|
|
}
|
|
a {
|
|
color: #03a9f4;
|
|
}
|
|
</style>
|
|
<script module>
|
|
import(
|
|
// In development we import locally.
|
|
window.location.hostname === "localhost"
|
|
? "/dist/web/install-button.js"
|
|
: "https://unpkg.com/esp-web-tools@1.0.1/dist/web/install-button.js?module"
|
|
);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="content">
|
|
<h1>ESP Web Tools</h1>
|
|
<p>
|
|
ESP Web Tools is a set of tools to allow working with ESP devices in the
|
|
browser.
|
|
</p>
|
|
<p>
|
|
To flash the ESPHome firmware, connect an ESP to your computer and hit
|
|
the button:
|
|
</p>
|
|
<esp-web-install-button
|
|
manifest="firmware_build/manifest.json"
|
|
></esp-web-install-button>
|
|
<p>
|
|
<i
|
|
>Note, this only works in desktop Chrome and Edge. Android support has
|
|
not been implemented yet.</i
|
|
>
|
|
</p>
|
|
<p>
|
|
This works by combining Web Serial with a
|
|
<a href="firmware_build/manifest.json">manifest</a> which describes the
|
|
firmware. It will automatically detect the type of the connected ESP
|
|
device and find the right firmware files in the manifest.
|
|
</p>
|
|
<p>
|
|
To add this to your own website, create a manifest and add the button
|
|
pointing at it to your website:
|
|
</p>
|
|
<pre>
|
|
<script
|
|
type="module"
|
|
src="https://unpkg.com/esp-web-tools@1.0.0/dist/web/install-button.js?module"
|
|
></script>
|
|
|
|
<esp-web-install-button
|
|
manifest="firmware_build/manifest.json"
|
|
></esp-web-install-button></pre
|
|
>
|
|
<p>
|
|
Add the attribute <code>erase-first</code> if you want to first fully
|
|
erase the ESP prior to installation.
|
|
</p>
|
|
<p>
|
|
Customize the button or unsupported message by using the
|
|
<code>activate</code> and <code>unsupported</code> slots:
|
|
</p>
|
|
<pre>
|
|
<esp-web-install-button
|
|
manifest="firmware_build/manifest.json"
|
|
erase-first
|
|
>
|
|
<button slot="activate">Custom install button</button>
|
|
<span slot="unsupported">Ah snap, your browser doesn't work!</span>
|
|
</esp-web-install-button>
|
|
</pre
|
|
>
|
|
</div>
|
|
</body>
|
|
</html>
|