mirror of
https://github.com/esphome/esp-web-tools.git
synced 2025-07-28 14:16:41 +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;
|
||||
padding: 12px;
|
||||
}
|
||||
.project .logo {
|
||||
float: right;
|
||||
h2 {
|
||||
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 {
|
||||
height: 50px;
|
||||
}
|
||||
.project .name {
|
||||
margin-top: 8px;
|
||||
}
|
||||
a {
|
||||
color: #03a9f4;
|
||||
}
|
||||
@ -79,12 +96,6 @@
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.supported-info {
|
||||
display: none;
|
||||
}
|
||||
esp-web-install-button[install-supported] + .supported-info {
|
||||
display: block;
|
||||
}
|
||||
.content pre {
|
||||
max-width: 100%;
|
||||
overflow-y: scroll;
|
||||
@ -133,11 +144,18 @@
|
||||
<div class="content">
|
||||
<h1>ESP Web Tools</h1>
|
||||
<p>
|
||||
ESP Web Tools allows you to manage ESP8266 and ESP32 devices in the
|
||||
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>.
|
||||
User friendly tools to manage ESP8266 and ESP32 devices in the browser:
|
||||
</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">
|
||||
<lite-youtube
|
||||
videoid="E8bdATqXM8c"
|
||||
@ -145,23 +163,6 @@
|
||||
></lite-youtube>
|
||||
</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>
|
||||
<p>
|
||||
This demo will install
|
||||
@ -178,90 +179,113 @@
|
||||
>.
|
||||
</i>
|
||||
</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>
|
||||
<div class="project">
|
||||
<a href="https://wled.me" class="logo"
|
||||
><img src="static/logos/wled.png" alt="WLED logo"
|
||||
/></a>
|
||||
<h3>WLED</h3>
|
||||
<p>
|
||||
Fast and feature-rich firmware to control NeoPixel (WS2812B, WS2811,
|
||||
SK6812) LEDs and SPI based chipsets like the WS2801 and APA102.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://install.wled.me" target="_blank"
|
||||
>Installation Website</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<a href="https://tasmota.github.io" class="logo"
|
||||
><img src="static/logos/tasmota.svg" alt="Tasmota logo"
|
||||
/></a>
|
||||
<h3>Tasmota</h3>
|
||||
<p>
|
||||
Firmware with easy configuration using webUI, OTA updates, automation
|
||||
using timers or rules, expandability and entirely local control over
|
||||
MQTT, HTTP, Serial or KNX.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://arendst.github.io/Tasmota-firmware/" target="_blank"
|
||||
>Installation Website</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<a href="http://www.espeasy.com/" class="logo"
|
||||
><img src="static/logos/espeasy.png" alt="ESPEasy logo"
|
||||
/></a>
|
||||
<h3>ESPEasy</h3>
|
||||
<p>Easy MultiSensor device based on ESP8266/ESP32.</p>
|
||||
<p>
|
||||
<a href="https://td-er.nl/ESPEasy/" target="_blank"
|
||||
>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 class="projects">
|
||||
<a href="https://install.wled.me" target="_blank" class="project">
|
||||
<div class="logo">
|
||||
<img src="static/logos/wled.png" alt="WLED logo" />
|
||||
</div>
|
||||
<div class="name">WLED</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://arendst.github.io/Tasmota-firmware/"
|
||||
target="_blank"
|
||||
class="project"
|
||||
>
|
||||
<div class="logo">
|
||||
<img src="static/logos/tasmota.svg" alt="Tasmota logo" />
|
||||
</div>
|
||||
<div class="name">Tasmota</div>
|
||||
</a>
|
||||
<a href="https://td-er.nl/ESPEasy/" target="_blank" class="project">
|
||||
<div class="logo">
|
||||
<img src="static/logos/espeasy.png" alt="ESPEasy logo" />
|
||||
</div>
|
||||
<div class="name">ESPEasy</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://canair.io/installer.html"
|
||||
target="_blank"
|
||||
class="project"
|
||||
>
|
||||
<div class="logo">
|
||||
<img src="static/logos/canairio.png" alt="CanAirIO logo" />
|
||||
</div>
|
||||
<div class="name">CanAirIO</div>
|
||||
</a>
|
||||
<a href="https://web.esphome.io" target="_blank" class="project">
|
||||
<div class="logo">
|
||||
<img src="static/logos/esphome.svg" alt="ESPHome logo" />
|
||||
</div>
|
||||
<div class="name">ESPHome</div>
|
||||
</a>
|
||||
</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>
|
||||
<p>
|
||||
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
|
||||
ESP Web Tools button.
|
||||
JavaScript files on your website, create a manifest file and add the ESP
|
||||
Web Tools button HTML.
|
||||
</p>
|
||||
<p>
|
||||
You can import the JavaScript files directly from the unpkg CDN or
|
||||
@ -288,7 +312,8 @@
|
||||
>
|
||||
<p>
|
||||
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>
|
||||
If your manifest or the firmware files are hosted on another server,
|
||||
@ -314,7 +339,7 @@
|
||||
of ESP devices. Current supported chip families are
|
||||
<code>ESP8266</code>, <code>ESP32</code>, <code>ESP32-C3</code> and
|
||||
<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>
|
||||
<pre>
|
||||
{
|
||||
@ -370,33 +395,6 @@
|
||||
<code>new_install_improv_wait_time</code> to the number of seconds to
|
||||
wait. Set to <code>0</code> to disable Improv Serial detection.
|
||||
</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>
|
||||
<p>
|
||||
@ -437,41 +435,6 @@
|
||||
</esp-web-install-button>
|
||||
</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>
|
||||
<div class="videoWrapper">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user