mirror of
https://github.com/esphome/esp-web-tools.git
synced 2025-07-29 06:36:47 +00:00
Update website
This commit is contained in:
Paulus Schoutsen
parent
b5f82ff461
commit
1571c31aa4
305
index.html
305
index.html
@ -47,12 +47,29 @@
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
.project .logo {
|
h2 {
|
||||||
float: right;
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
.projects {
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 24px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.projects a {
|
||||||
|
color: initial;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.project .logo img {
|
.project .logo img {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
.project .name {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
color: #03a9f4;
|
color: #03a9f4;
|
||||||
}
|
}
|
||||||
@ -79,12 +96,6 @@
|
|||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.supported-info {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
esp-web-install-button[install-supported] + .supported-info {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.content pre {
|
.content pre {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
@ -133,11 +144,18 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>ESP Web Tools</h1>
|
<h1>ESP Web Tools</h1>
|
||||||
<p>
|
<p>
|
||||||
ESP Web Tools allows you to manage ESP8266 and ESP32 devices in the
|
User friendly tools to manage ESP8266 and ESP32 devices in the browser:
|
||||||
browser: install new firmware, update firmware, connect device to the
|
|
||||||
Wi-Fi network, visit the device's hosted web interface and add devices
|
|
||||||
to <a href="https://www.home-assistant.io">Home Assistant</a>.
|
|
||||||
</p>
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>Install & update firmware</li>
|
||||||
|
<li>Connect device to the Wi-Fi network</li>
|
||||||
|
<li>Visit the device's hosted web interface</li>
|
||||||
|
<li>Access logs and send terminal commands</li>
|
||||||
|
<li>
|
||||||
|
Add devices to
|
||||||
|
<a href="https://www.home-assistant.io">Home Assistant</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
<div class="videoWrapper">
|
<div class="videoWrapper">
|
||||||
<lite-youtube
|
<lite-youtube
|
||||||
videoid="E8bdATqXM8c"
|
videoid="E8bdATqXM8c"
|
||||||
@ -145,23 +163,6 @@
|
|||||||
></lite-youtube>
|
></lite-youtube>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
|
||||||
ESP Web Tools works by combining
|
|
||||||
<a
|
|
||||||
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API"
|
|
||||||
>Web Serial</a
|
|
||||||
>, <a href="https://www.improv-wifi.com/">Improv Wi-Fi</a> (optional),
|
|
||||||
and a manifest which describes the firmware. It will automatically find
|
|
||||||
the supported firmware files from the manifest by detecting the chipset
|
|
||||||
of the connected ESP device.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Web Serial is available in Google Chrome and Microsoft Edge
|
|
||||||
browsers<span class="not-supported-i hidden">
|
|
||||||
(but not on your iOS device)</span
|
|
||||||
>. Android support should be possible but has not been implemented yet.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 id="demo">Try a live demo</h2>
|
<h2 id="demo">Try a live demo</h2>
|
||||||
<p>
|
<p>
|
||||||
This demo will install
|
This demo will install
|
||||||
@ -178,90 +179,113 @@
|
|||||||
>.
|
>.
|
||||||
</i>
|
</i>
|
||||||
</esp-web-install-button>
|
</esp-web-install-button>
|
||||||
<p class="supported-info">
|
|
||||||
If you don't see your ESP device in the list of devices to choose, you
|
|
||||||
might need to install
|
|
||||||
<a href="#drivers">the drivers</a>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 id="used-by">Products using ESP Web Tools</h2>
|
<h2 id="used-by">Products using ESP Web Tools</h2>
|
||||||
<div class="project">
|
<div class="projects">
|
||||||
<a href="https://wled.me" class="logo"
|
<a href="https://install.wled.me" target="_blank" class="project">
|
||||||
><img src="static/logos/wled.png" alt="WLED logo"
|
<div class="logo">
|
||||||
/></a>
|
<img src="static/logos/wled.png" alt="WLED logo" />
|
||||||
<h3>WLED</h3>
|
</div>
|
||||||
<p>
|
<div class="name">WLED</div>
|
||||||
Fast and feature-rich firmware to control NeoPixel (WS2812B, WS2811,
|
</a>
|
||||||
SK6812) LEDs and SPI based chipsets like the WS2801 and APA102.
|
<a
|
||||||
</p>
|
href="https://arendst.github.io/Tasmota-firmware/"
|
||||||
<p>
|
target="_blank"
|
||||||
<a href="https://install.wled.me" target="_blank"
|
class="project"
|
||||||
>Installation Website</a
|
>
|
||||||
>
|
<div class="logo">
|
||||||
</p>
|
<img src="static/logos/tasmota.svg" alt="Tasmota logo" />
|
||||||
</div>
|
</div>
|
||||||
<div class="project">
|
<div class="name">Tasmota</div>
|
||||||
<a href="https://tasmota.github.io" class="logo"
|
</a>
|
||||||
><img src="static/logos/tasmota.svg" alt="Tasmota logo"
|
<a href="https://td-er.nl/ESPEasy/" target="_blank" class="project">
|
||||||
/></a>
|
<div class="logo">
|
||||||
<h3>Tasmota</h3>
|
<img src="static/logos/espeasy.png" alt="ESPEasy logo" />
|
||||||
<p>
|
</div>
|
||||||
Firmware with easy configuration using webUI, OTA updates, automation
|
<div class="name">ESPEasy</div>
|
||||||
using timers or rules, expandability and entirely local control over
|
</a>
|
||||||
MQTT, HTTP, Serial or KNX.
|
<a
|
||||||
</p>
|
href="https://canair.io/installer.html"
|
||||||
<p>
|
target="_blank"
|
||||||
<a href="https://arendst.github.io/Tasmota-firmware/" target="_blank"
|
class="project"
|
||||||
>Installation Website</a
|
>
|
||||||
>
|
<div class="logo">
|
||||||
</p>
|
<img src="static/logos/canairio.png" alt="CanAirIO logo" />
|
||||||
</div>
|
</div>
|
||||||
<div class="project">
|
<div class="name">CanAirIO</div>
|
||||||
<a href="http://www.espeasy.com/" class="logo"
|
</a>
|
||||||
><img src="static/logos/espeasy.png" alt="ESPEasy logo"
|
<a href="https://web.esphome.io" target="_blank" class="project">
|
||||||
/></a>
|
<div class="logo">
|
||||||
<h3>ESPEasy</h3>
|
<img src="static/logos/esphome.svg" alt="ESPHome logo" />
|
||||||
<p>Easy MultiSensor device based on ESP8266/ESP32.</p>
|
</div>
|
||||||
<p>
|
<div class="name">ESPHome</div>
|
||||||
<a href="https://td-er.nl/ESPEasy/" target="_blank"
|
</a>
|
||||||
>Installation Website</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="project">
|
|
||||||
<a href="https://canair.io" class="logo"
|
|
||||||
><img src="static/logos/canairio.png" alt="CanAirIO logo"
|
|
||||||
/></a>
|
|
||||||
<h3>CanAirIO</h3>
|
|
||||||
<p>
|
|
||||||
Citizen science initiative for monitoring air quality. CanAirIO uses
|
|
||||||
mobile and fixed sensors to measure air quality with smartphones and
|
|
||||||
ESP32 devices.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<a href="https://canair.io/installer.html" target="_blank"
|
|
||||||
>Installation Website</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="project">
|
|
||||||
<a href="https://esphome.io" class="logo"
|
|
||||||
><img src="static/logos/esphome.svg" alt="ESPHome logo"
|
|
||||||
/></a>
|
|
||||||
<h3>ESPHome</h3>
|
|
||||||
<p>
|
|
||||||
No-code platform for ESP devices. Uses ESP Web Tools in their
|
|
||||||
dashboard to install ESPHome on devices.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<a href="https://esphome.io" target="_blank">Website</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h2>How it works</h2>
|
||||||
|
<p>
|
||||||
|
ESP Web Tools works by combining
|
||||||
|
<a
|
||||||
|
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API"
|
||||||
|
>Web Serial</a
|
||||||
|
>, <a href="https://www.improv-wifi.com/">Improv Wi-Fi</a> (optional),
|
||||||
|
and a manifest which describes the firmware. ESP Web Tools detects the
|
||||||
|
chipset of the connected ESP device and automatically selects the right
|
||||||
|
firmware variant from the manifest.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Web Serial is available in Google Chrome and Microsoft Edge
|
||||||
|
browsers<span class="not-supported-i hidden">
|
||||||
|
(but not on your iOS device)</span
|
||||||
|
>. Android support should be possible but has not been implemented yet.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 id="improv">Configuring Wi-Fi</h3>
|
||||||
|
<p>
|
||||||
|
ESP Web Tools supports the
|
||||||
|
<a href="https://www.improv-wifi.com/serial"
|
||||||
|
>Improv Wi-Fi serial standard</a
|
||||||
|
>. This is an open standard to allow configuring Wi-Fi via the serial
|
||||||
|
port.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
If the firmware supports Improv, a user will be asked to connect the
|
||||||
|
device to the network after installing the firmware. Once connected, the
|
||||||
|
device can send the user to a URL to finish configuration. For example,
|
||||||
|
this can be a link to the device's IP address where it serves a local
|
||||||
|
UI.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
At any time in the future a user can use ESP Web Tools to find the
|
||||||
|
device link or to reconfigure the Wi-Fi settings without doing a
|
||||||
|
reinstall.
|
||||||
|
</p>
|
||||||
|
<p class="screenshot">
|
||||||
|
<img
|
||||||
|
src="./static/screenshots/dashboard.png"
|
||||||
|
alt="Screenshot showing ESP Web Tools dialog offering visting the device, adding it to Home Assistant, change Wi-Fi, show logs and console and reset data."
|
||||||
|
/>
|
||||||
|
<i>Screenshot showing the ESP Web Tools interface</i>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 id="logs">Viewing logs & sending commands</h3>
|
||||||
|
<p>
|
||||||
|
ESP Web Tools allows users to open a serial console to see the logs and
|
||||||
|
send commands.
|
||||||
|
</p>
|
||||||
|
<p class="screenshot">
|
||||||
|
<img
|
||||||
|
src="./static/screenshots/logs.png"
|
||||||
|
alt="Screenshot showing ESP Web Tools dialog with a console showing ESPHome logs and a terminal prompt to sent commands."
|
||||||
|
/>
|
||||||
|
<i>Screenshot showing the ESP Web Tools logs & console</i>
|
||||||
|
</p>
|
||||||
|
|
||||||
<h2 id="add-website">Adding ESP Web Tools to your website</h2>
|
<h2 id="add-website">Adding ESP Web Tools to your website</h2>
|
||||||
<p>
|
<p>
|
||||||
To add this to your own website, you need to include the ESP Web Tools
|
To add this to your own website, you need to include the ESP Web Tools
|
||||||
JavaScript files on your website, create a manifest file and render the
|
JavaScript files on your website, create a manifest file and add the ESP
|
||||||
ESP Web Tools button.
|
Web Tools button HTML.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
You can import the JavaScript files directly from the unpkg CDN or
|
You can import the JavaScript files directly from the unpkg CDN or
|
||||||
@ -288,7 +312,8 @@
|
|||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
ESP Web Tools requires that your website is served over
|
ESP Web Tools requires that your website is served over
|
||||||
<code>https://</code> to work. This is a Web Serial security limitation.
|
<code>https://</code> to work. This is a Web Serial security
|
||||||
|
requirement.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
If your manifest or the firmware files are hosted on another server,
|
If your manifest or the firmware files are hosted on another server,
|
||||||
@ -314,7 +339,7 @@
|
|||||||
of ESP devices. Current supported chip families are
|
of ESP devices. Current supported chip families are
|
||||||
<code>ESP8266</code>, <code>ESP32</code>, <code>ESP32-C3</code> and
|
<code>ESP8266</code>, <code>ESP32</code>, <code>ESP32-C3</code> and
|
||||||
<code>ESP32-S2</code>. The correct build will be automatically selected
|
<code>ESP32-S2</code>. The correct build will be automatically selected
|
||||||
based on the type of the ESP device we detect via the serial port.
|
based on the type of the connected ESP device.
|
||||||
</p>
|
</p>
|
||||||
<pre>
|
<pre>
|
||||||
{
|
{
|
||||||
@ -370,33 +395,6 @@
|
|||||||
<code>new_install_improv_wait_time</code> to the number of seconds to
|
<code>new_install_improv_wait_time</code> to the number of seconds to
|
||||||
wait. Set to <code>0</code> to disable Improv Serial detection.
|
wait. Set to <code>0</code> to disable Improv Serial detection.
|
||||||
</p>
|
</p>
|
||||||
<h2 id="improv">Configuring Wi-Fi</h2>
|
|
||||||
<p>
|
|
||||||
ESP Web Tools supports the
|
|
||||||
<a href="https://www.improv-wifi.com/serial"
|
|
||||||
>Improv Wi-Fi serial standard</a
|
|
||||||
>. This is an open standard to allow configuring Wi-Fi via the serial
|
|
||||||
port.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
If the firmware supports Improv, a user will be asked to connect the
|
|
||||||
device to the network after installing the firmware. Once connected, the
|
|
||||||
device can send the user to a URL to finish configuration. For example,
|
|
||||||
this can be a link to the device's IP address where it serves a local
|
|
||||||
UI.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
At any time in the future a user can use ESP Web Tools to find the
|
|
||||||
device link or to reconfigure the Wi-Fi settings without doing a
|
|
||||||
reinstall.
|
|
||||||
</p>
|
|
||||||
<p class="screenshot">
|
|
||||||
<img
|
|
||||||
src="./static/screenshots/dashboard.png"
|
|
||||||
alt="Screenshot showing ESP Web Tools dialog offering visting the device, adding it to Home Assistant, change Wi-Fi, show logs and console and reset data."
|
|
||||||
/>
|
|
||||||
<i>Screenshot showing the ESP Web Tools interface</i>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3 id="customize">Customizing the look and feel</h3>
|
<h3 id="customize">Customizing the look and feel</h3>
|
||||||
<p>
|
<p>
|
||||||
@ -437,41 +435,6 @@
|
|||||||
</esp-web-install-button>
|
</esp-web-install-button>
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<h2 id="logs">Viewing logs & sending commands</h2>
|
|
||||||
<p>
|
|
||||||
ESP Web Tools allows users to open a serial console to see the logs and
|
|
||||||
send commands.
|
|
||||||
</p>
|
|
||||||
<p class="screenshot">
|
|
||||||
<img
|
|
||||||
src="./static/screenshots/logs.png"
|
|
||||||
alt="Screenshot showing ESP Web Tools dialog with a console showing ESPHome logs and a terminal prompt to sent commands."
|
|
||||||
/>
|
|
||||||
<i>Screenshot showing the ESP Web Tools logs & console</i>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 id="drivers">USB Serial Drivers</h2>
|
|
||||||
<p>
|
|
||||||
If the serial port is not showing up, your computer might be missing the
|
|
||||||
drivers for the USB serial chip used in your ESP device. These drivers
|
|
||||||
work for most ESP devices:
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
CP2102 (square chip):
|
|
||||||
<a
|
|
||||||
href="https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers"
|
|
||||||
>driver</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
CH341:
|
|
||||||
<a
|
|
||||||
href="https://github.com/nodemcu/nodemcu-devkit/tree/master/Drivers"
|
|
||||||
>driver</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Why we created ESP Web Tools</h2>
|
<h2>Why we created ESP Web Tools</h2>
|
||||||
<div class="videoWrapper">
|
<div class="videoWrapper">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user