mirror of
https://github.com/esphome/esp-web-tools.git
synced 2025-07-28 14:16:41 +00:00
Write more documentation
This commit is contained in:
parent
1f643f3aa4
commit
b7230c3d01
131
index.html
131
index.html
@ -20,13 +20,23 @@
|
|||||||
a {
|
a {
|
||||||
color: #03a9f4;
|
color: #03a9f4;
|
||||||
}
|
}
|
||||||
|
.footer {
|
||||||
|
margin-top: 24px;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
padding-top: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.footer .initiative {
|
||||||
|
font-style: italic;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script module>
|
<script module>
|
||||||
import(
|
import(
|
||||||
// In development we import locally.
|
// In development we import locally.
|
||||||
window.location.hostname === "localhost"
|
window.location.hostname === "localhost"
|
||||||
? "/dist/web/install-button.js"
|
? "/dist/web/install-button.js"
|
||||||
: "https://unpkg.com/esp-web-tools@1.0.3/dist/web/install-button.js?module"
|
: "https://unpkg.com/esp-web-tools@2.0.0/dist/web/install-button.js?module"
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
@ -34,31 +44,41 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>ESP Web Tools</h1>
|
<h1>ESP Web Tools</h1>
|
||||||
<p>
|
<p>
|
||||||
ESP Web Tools is a set of tools to allow working with ESP devices in the
|
ESP Web Tools is a set of open source tools to allow working with ESP
|
||||||
browser.
|
devices in the browser.
|
||||||
|
<a href="https://github.com/esphome/esp-web-tools"
|
||||||
|
>The code is available on GitHub.</a
|
||||||
|
>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
To install the ESPHome firmware, connect an ESP to your computer and hit
|
To try it out and install
|
||||||
the button:
|
<a href="https://esphome.io">the ESPHome firmware</a>, connect an ESP to
|
||||||
|
your computer and hit the button:
|
||||||
</p>
|
</p>
|
||||||
<esp-web-install-button
|
<esp-web-install-button
|
||||||
manifest="firmware_build/manifest.json"
|
manifest="firmware_build/manifest.json"
|
||||||
></esp-web-install-button>
|
></esp-web-install-button>
|
||||||
<p>
|
<p>
|
||||||
<i
|
<i>
|
||||||
>Note, this only works in desktop Chrome and Edge. Android support has
|
Note, this only works in desktop Chrome and Edge. Android support
|
||||||
not been implemented yet.</i
|
should be possible but has not been implemented yet.
|
||||||
|
</i>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
This works by combining
|
||||||
|
<a
|
||||||
|
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API"
|
||||||
|
>Web Serial</a
|
||||||
>
|
>
|
||||||
|
with a manifest 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>
|
||||||
|
<h2>Using ESP Web Tools on your website</h2>
|
||||||
<p>
|
<p>
|
||||||
This works by combining Web Serial with a
|
To add this to your own website, create a manifest and add the button to
|
||||||
<a href="firmware_build/manifest.json">manifest</a> which describes the
|
your website. Make sure you update the manifest attribute to point at
|
||||||
firmware. It will automatically detect the type of the connected ESP
|
your manifest.
|
||||||
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>
|
</p>
|
||||||
<pre>
|
<pre>
|
||||||
<script
|
<script
|
||||||
@ -70,13 +90,76 @@
|
|||||||
manifest="firmware_build/manifest.json"
|
manifest="firmware_build/manifest.json"
|
||||||
></esp-web-install-button></pre
|
></esp-web-install-button></pre
|
||||||
>
|
>
|
||||||
|
<p>
|
||||||
|
Your website needs to be served over <code>https://</code>. If your
|
||||||
|
manifest is hosted on another server, make sure you configure
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS"
|
||||||
|
>the CORS-headers</a
|
||||||
|
>
|
||||||
|
for your manifest and firmware files such that your website is allowed
|
||||||
|
to fetch those files by adding the header
|
||||||
|
<code
|
||||||
|
>Access-Control-Allow-Origin: https://domain-of-your-website.com</code
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Add the attribute <code>erase-first</code> if you want to first fully
|
Add the attribute <code>erase-first</code> if you want to first fully
|
||||||
erase the ESP prior to installation.
|
erase the ESP prior to installation.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Customize the button or unsupported message by using the
|
ESP Web Tools can also be integrated in your projects by installing it
|
||||||
<code>activate</code> and <code>unsupported</code> slots:
|
via NPM:<br />
|
||||||
|
<code>npm install --save esp-web-tools</code>
|
||||||
|
</p>
|
||||||
|
<h3 id="manifest">Creating your manifest</h3>
|
||||||
|
<p>
|
||||||
|
ESP Web Tools manifest describe the firmware that you want to install.
|
||||||
|
It allows specifying different builds for the different types of ESP
|
||||||
|
devices. Current supported devices are ESP8266, ESP32 and ESP32-S2. The
|
||||||
|
correct build will be automatically selected based on the type of the
|
||||||
|
ESP device we detect via the serial port.
|
||||||
|
</p>
|
||||||
|
<pre>
|
||||||
|
{
|
||||||
|
"name": "ESPHome",
|
||||||
|
"builds": [
|
||||||
|
{
|
||||||
|
"chipFamily": "ESP32",
|
||||||
|
"improv": true,
|
||||||
|
"parts": [
|
||||||
|
{ "path": "bootloader.bin", "offset": 4096 },
|
||||||
|
{ "path": "partitions.bin", "offset": 32768 },
|
||||||
|
{ "path": "ota.bin", "offset": 57344 },
|
||||||
|
{ "path": "firmware.bin", "offset": 65536 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"chipFamily": "ESP8266",
|
||||||
|
"parts": [
|
||||||
|
{ "path": "esp8266.bin", "offset": 0 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}</pre
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
Each build contains a list of parts to be flashed to the ESP device.
|
||||||
|
Each part consists of a path to the file and an offset on the flash
|
||||||
|
where it should be installed. Part paths are resolved relative to the
|
||||||
|
path of the manifest, but can also be URLs to other hosts.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Each build also allows you to specify if it supports
|
||||||
|
<a href="https://www.improv-wifi.com">the Improv WiFi standard</a>. If
|
||||||
|
it does, the user will be offered to configure the WiFi after flashing
|
||||||
|
is done.
|
||||||
|
</p>
|
||||||
|
<h3>Customizing the look and feel</h3>
|
||||||
|
<p>
|
||||||
|
You can customize both the activation button and the message that is
|
||||||
|
shown when the user uses an unsupported browser. This can be done using
|
||||||
|
the <code>activate</code> and <code>unsupported</code> slots:
|
||||||
</p>
|
</p>
|
||||||
<pre>
|
<pre>
|
||||||
<esp-web-install-button
|
<esp-web-install-button
|
||||||
@ -88,6 +171,18 @@
|
|||||||
</esp-web-install-button>
|
</esp-web-install-button>
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
|
<div class="footer">
|
||||||
|
<div>
|
||||||
|
ESP Web Tools –
|
||||||
|
<a href="https://github.com/esphome/esp-web-tools">GitHub</a>
|
||||||
|
</div>
|
||||||
|
<div class="initiative">
|
||||||
|
ESP Web Tools is a project by
|
||||||
|
<a href="https://esphome.io">ESPHome</a>.<br />
|
||||||
|
Development is funded by
|
||||||
|
<a href="https://www.nabucasa.com">Nabu Casa</a>.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user