mirror of
https://github.com/esphome/esp-web-tools.git
synced 2025-07-28 06:06:36 +00:00
Update README + website (#93)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
e8288b8425
commit
002b7367b8
20
README.md
20
README.md
@ -63,11 +63,6 @@ The following variables can be used to change the colors of the default UI eleme
|
||||
|
||||
- `--esp-tools-button-color`
|
||||
- `--esp-tools-button-text-color`
|
||||
- `--esp-tools-success-color`
|
||||
- `--esp-tools-error-color`
|
||||
- `--esp-tools-progress-color`
|
||||
- `--esp-tools-log-background`
|
||||
- `--esp-tools-log-text-color`
|
||||
|
||||
### Slots
|
||||
|
||||
@ -79,21 +74,6 @@ The following slots are available:
|
||||
| `unsupported` | Message to show when the browser is not supported
|
||||
| `not-allowed` | Message to show when not a secure context
|
||||
|
||||
## Events
|
||||
|
||||
When the state of flashing changes, a `state-changed` event is fired.
|
||||
|
||||
A `state-changed` event contains the following information:
|
||||
|
||||
Field | Description
|
||||
-- | --
|
||||
state | The current [state](https://github.com/esphome/esp-web-tools/blob/main/src/const.ts)
|
||||
message | A description of the current state
|
||||
manifest | The loaded manifest
|
||||
build | The manifest's build that was selected
|
||||
chipFamily | The chip that was detected; "ESP32" \| "ESP8266" \| "ESP32-S2" \| "ESP32-C3" \| "Unknown Chip"
|
||||
details | An optional extra field that is different [per state](https://github.com/esphome/esp-web-tools/blob/main/src/const.ts)
|
||||
|
||||
## Development
|
||||
|
||||
Run `script/develop`. This starts a server. Open it on http://localhost:5001.
|
||||
|
||||
154
index.html
154
index.html
@ -125,8 +125,6 @@
|
||||
computer and hit the button:
|
||||
</p>
|
||||
<esp-web-install-button
|
||||
log-console
|
||||
erase-first
|
||||
manifest="static/firmware_build/manifest.json"
|
||||
></esp-web-install-button>
|
||||
<p>
|
||||
@ -157,16 +155,15 @@
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<h2 id="used-by">Projects using ESP Web Tools</h2>
|
||||
<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>
|
||||
A fast and feature-rich implementation of an ESP8266/ESP32 firmware to
|
||||
control NeoPixel (WS2812B, WS2811, SK6812) LEDs or also SPI based
|
||||
chipsets like the WS2801 and APA102.
|
||||
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"
|
||||
@ -180,9 +177,9 @@
|
||||
/></a>
|
||||
<h3>Tasmota</h3>
|
||||
<p>
|
||||
Alternative firmware for ESP8266 with easy configuration using webUI,
|
||||
OTA updates, automation using timers or rules, expandability and
|
||||
entirely local control over MQTT, HTTP, Serial or KNX.
|
||||
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"
|
||||
@ -202,6 +199,19 @@
|
||||
>
|
||||
</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>
|
||||
<h2 id="add-website">Adding ESP Web Tools to your website</h2>
|
||||
<p>
|
||||
To add this to your own website, create a manifest and add the button to
|
||||
@ -238,10 +248,6 @@
|
||||
>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Add the attribute <code>erase-first</code> if you want to first fully
|
||||
erase the ESP prior to installation.
|
||||
</p>
|
||||
<p>
|
||||
ESP Web Tools can also be integrated in your projects by installing it
|
||||
via NPM:<br />
|
||||
@ -299,24 +305,6 @@
|
||||
already installed devices and re-configure the wireless network
|
||||
settings.
|
||||
</p>
|
||||
<p>TODO EXAMPLE VIDEO</p>
|
||||
<!-- <p>
|
||||
Each build also allows you to specify if it supports
|
||||
<a href="https://www.improv-wifi.com">the Improv Wi-Fi standard</a>. If
|
||||
it does, the user will be offered to configure the Wi-Fi after
|
||||
installation is done as can be seen in the video below.
|
||||
</p>
|
||||
<div class="videoWrapper">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube-nocookie.com/embed/k88BS8zgWq0?start=33"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div> -->
|
||||
|
||||
<h3 id="customize">Customizing the look and feel</h3>
|
||||
<p>
|
||||
@ -331,14 +319,6 @@
|
||||
<ul>
|
||||
<li><code>--esp-tools-button-color</code></li>
|
||||
<li><code>--esp-tools-button-text-color</code></li>
|
||||
|
||||
<li><code>--esp-tools-success-color</code></li>
|
||||
<li><code>--esp-tools-error-color</code></li>
|
||||
|
||||
<li><code>--esp-tools-progress-color</code></li>
|
||||
|
||||
<li><code>--esp-tools-log-background</code></li>
|
||||
<li><code>--esp-tools-log-text-color</code></li>
|
||||
</ul>
|
||||
<p>There are also some attributes that can be used for styling:</p>
|
||||
<table>
|
||||
@ -352,15 +332,7 @@
|
||||
</td>
|
||||
<td>Added if installing firmware is not supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>active</code></td>
|
||||
<td>Added when flashing is active</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
When you are using a custom button, you should disable it when the
|
||||
<code>active</code> attribute is present.
|
||||
</p>
|
||||
<h4>Replace the button and message with a custom one</h4>
|
||||
<p>
|
||||
You can replace both the activation button and the message that is shown
|
||||
@ -371,8 +343,6 @@
|
||||
<pre>
|
||||
<esp-web-install-button
|
||||
manifest="static/firmware_build/manifest.json"
|
||||
show-log
|
||||
erase-first
|
||||
>
|
||||
<button slot="activate">Custom install button</button>
|
||||
<span slot="unsupported">Ah snap, your browser doesn't work!</span>
|
||||
@ -380,92 +350,6 @@
|
||||
</esp-web-install-button>
|
||||
</pre
|
||||
>
|
||||
<h4>Show or hide the progress bar and log</h4>
|
||||
<p>
|
||||
By default there is a progress bar showing the state and progress of the
|
||||
flashing progress, you can change this progress bar to a log view with
|
||||
the <code>show-log</code> attribute.
|
||||
</p>
|
||||
<p>
|
||||
You can also hide all progress indicators by adding the
|
||||
<code>hide-progress</code>
|
||||
attribute. This will hide both the progress bar and the log view. You
|
||||
can then implement your own progress elements using the
|
||||
<a href="#state-events">state events</a>.
|
||||
</p>
|
||||
|
||||
<h3 id="state-events">State events</h3>
|
||||
<p>
|
||||
During the flash progress the button will fire
|
||||
<code>state-changed</code> events for every step of the progress and to
|
||||
signal progress in the writing.
|
||||
</p>
|
||||
<p>
|
||||
With these events you can create your own progress UI or trigger certain
|
||||
actions. You can also find the current state as the
|
||||
<code>state</code> property of the
|
||||
<code>esp-web-install-button</code> element.
|
||||
</p>
|
||||
<p>Events for the following states are fired:</p>
|
||||
<ul>
|
||||
<li>initializing</li>
|
||||
<li>manifest</li>
|
||||
<li>preparing</li>
|
||||
<li>erasing</li>
|
||||
<li>writing</li>
|
||||
<li>finished</li>
|
||||
<li>error</li>
|
||||
</ul>
|
||||
<p>
|
||||
A <code>state-changed</code> event contains the following information:
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td><code>state</code></td>
|
||||
<td>The current state; one of the above</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>message</code></td>
|
||||
<td>A description of the current state</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>manifest</code></td>
|
||||
<td>The loaded manifest</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>build</code></td>
|
||||
<td>The manifest's build that was selected</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>chipFamily</code></td>
|
||||
<td>
|
||||
The chip that was detected;
|
||||
<code>"ESP32" | "ESP8266" | "ESP32-S2" | "Unknown Chip"</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>details</code></td>
|
||||
<td>
|
||||
An optional extra field that is different
|
||||
<a
|
||||
href="https://github.com/esphome/esp-web-tools/blob/main/src/const.ts"
|
||||
>per state</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>An example that logs all state events:</p>
|
||||
<pre>
|
||||
<esp-web-install-button
|
||||
manifest="static/firmware_build/manifest.json"
|
||||
></esp-web-install-button>
|
||||
<script>
|
||||
const espWebInstallButton = document.querySelector("esp-web-install-button");
|
||||
espWebInstallButton.addEventListener(
|
||||
"state-changed", (ev) => { console.log(ev.detail) }
|
||||
);
|
||||
</script>
|
||||
</pre>
|
||||
<h3 id="drivers">USB Serial Drivers</h3>
|
||||
<p>
|
||||
If the serial port is not showing up, your computer might be missing the
|
||||
|
||||
1
static/logos/esphome.svg
Normal file
1
static/logos/esphome.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 73"><g fill="none" fill-rule="evenodd"><path d="M72.63 16.18V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.27 0V12c0-1.47 1.19-2.66 2.66-2.66A2.65 2.65 0 0 1 69 11.99v4.18m-14.28.01V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.28 0V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.28 0V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18m-14.27 0V12c0-1.47 1.19-2.66 2.66-2.66 1.47 0 2.66 1.19 2.66 2.66v4.18M77.95 56.07v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.63 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.64 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.64 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.64 0v4.68c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.68m-3.63.26v4.43c0 1.47-1.19 2.66-2.66 2.66-1.47 0-2.66-1.19-2.66-2.66v-4.43" fill="#fff" stroke="#000" stroke-width="2.178"/><path fill="#fff" stroke="#000" stroke-width="2.42" d="M79.29 16.18H26.51a.97.97 0 0 0-.97.97v37.96c0 .53.43.97.97.97h52.77c.53 0 .97-.43.97-.97V17.15c0-.54-.43-.97-.96-.97z"/><path fill="#000" fill-rule="nonzero" d="M61.6 35.42v-5.07h-1.8v3.28l-6.81-6.81-11.49 11.5h2.87v7.75h17.25v-7.75h2.87z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.961" d="M61.6 35.42v-5.07h-1.8v3.28l-6.81-6.81-11.49 11.5h2.87v7.75h17.25v-7.75h2.87z"/><path d="M25.34 53.77H9.52v-3.89h11.86v-3.89H9.52v-3.88h11.86v-3.89H9.52v-3.89h11.86v-3.88H9.52V18.47" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.159"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Loading…
x
Reference in New Issue
Block a user