jeans/esp-web-tools
jeans/esp-web-tools
1
0
Fork 0
mirror of https://github.com/esphome/esp-web-tools.git synced 2025-07-15 15:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prepare release

Browse Source
This commit is contained in:
Paulus Schoutsen 2021-06-04 00:41:17 -07:00
parent e20c21ba1a
commit 7cf91fa76b
6 changed files with 80 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.npmignore Normal file
View File

@ -0,0 +1,3 @@
index.html
firmware_build
demo

87
index.html
View File

@ -1,11 +1,20 @@
<html> <html>
<head> <head>
<title>ESPHome Web</title> <title>ESP Web Tools</title>
<style> <style>
body { body {
max-width: 600px; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
Roboto, Ubuntu, sans-serif;
padding: 0;
margin: 0;
line-height: 1.4;
} }
esphome-web-flash-button { .content {
max-width: 600px;
margin: 0 auto;
padding: 12px;
}
esp-web-flash-button {
display: inline-block; display: inline-block;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -13,17 +22,6 @@
color: #03a9f4; color: #03a9f4;
} }
</style> </style>
</head>
<body>
<p>ESPHome Web 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></div>
<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>
<script module> <script module>
import( import(
// In development we import locally. // In development we import locally.
@ -32,6 +30,65 @@
: "https://unpkg.com/esp-web-tools@1.0.0/dist/web/install-button.js?module" : "https://unpkg.com/esp-web-tools@1.0.0/dist/web/install-button.js?module"
); );
</script> </script>
<script src="./dist/web/install-button.js" type="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>
&lt;script
type="module"
src="https://unpkg.com/esp-web-tools@1.0.0/dist/web/install-button.js?module"
>&lt;/script>
&lt;esp-web-install-button
manifest="firmware_build/manifest.json"
>&lt;/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>
&lt;esp-web-install-button
manifest="firmware_build/manifest.json"
erase-first
>
&lt;button slot="activate">Custom install button&lt;/button>
&lt;span slot="unsupported">Ah snap, your browser doesn't work!&lt;/span>
&lt;/esp-web-install-button>
</pre
>
</div>
</body> </body>
</html> </html>

2
package-lock.json generated
View File

@ -1,5 +1,5 @@
{ {
"name": "esphome-web", "name": "esp-web-tools",
"version": "0.0.1", "version": "0.0.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "esp-web-tools", "name": "esp-web-tools",
"version": "0.0.1", "version": "1.0.0",
"description": "Web tools for ESP devices", "description": "Web tools for ESP devices",
"main": "dist/install-button.js", "main": "dist/install-button.js",
"repository": "https://github.com/esphome/web", "repository": "https://github.com/esphome/web",

4
src/flash-log.ts
View File

@ -9,7 +9,7 @@ interface Row {
action?: boolean; action?: boolean;
} }
@customElement("esphome-web-flash-log") @customElement("esp-web-flash-log")
class FlashLog extends LitElement { class FlashLog extends LitElement {
@state() _rows: Row[] = []; @state() _rows: Row[] = [];
@ -97,6 +97,6 @@ class FlashLog extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"esphome-web-flash-log": FlashLog; "esp-web-flash-log": FlashLog;
} }
} }

2
src/start-flash.ts
View File

@ -27,7 +27,7 @@ export const startFlash = async (
// For debugging // For debugging
(window as any).esploader = esploader; (window as any).esploader = esploader;
const logEl = document.createElement("esphome-web-flash-log"); const logEl = document.createElement("esp-web-flash-log");
// logEl.esploader = esploader; // logEl.esploader = esploader;
logEl.addRow({ id: "initializing", content: "Initializing..." }); logEl.addRow({ id: "initializing", content: "Initializing..." });
logParent.append(logEl); logParent.append(logEl);