Prepare release

esphome · Jun 4, 2021 · 7cf91fa · 7cf91fa
1 parent e20c21b
commit 7cf91fa
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 19 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+index.html
+firmware_build
+demo
diff --git a/index.html b/index.html
@@ -1,29 +1,27 @@
 <html>
   <head>
-    <title>ESPHome Web</title>
+    <title>ESP Web Tools</title>
     <style>
       body {
+        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+          Roboto, Ubuntu, sans-serif;
+        padding: 0;
+        margin: 0;
+        line-height: 1.4;
+      }
+      .content {
         max-width: 600px;
+        margin: 0 auto;
+        padding: 12px;
       }
-      esphome-web-flash-button {
+      esp-web-flash-button {
         display: inline-block;
         margin-bottom: 8px;
       }
       a {
         color: #03a9f4;
       }
     </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>
       import(
         // In development we import locally.
@@ -32,6 +30,65 @@
           : "https://unpkg.com/[email protected]/dist/web/install-button.js?module"
       );
     </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/[email protected]/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>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "esp-web-tools",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Web tools for ESP devices",
   "main": "dist/install-button.js",
   "repository": "https://github.com/esphome/web",

diff --git a/src/flash-log.ts b/src/flash-log.ts
@@ -9,7 +9,7 @@ interface Row {
   action?: boolean;
 }
 
-@customElement("esphome-web-flash-log")
+@customElement("esp-web-flash-log")
 class FlashLog extends LitElement {
   @state() _rows: Row[] = [];
 
@@ -97,6 +97,6 @@ class FlashLog extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "esphome-web-flash-log": FlashLog;
+    "esp-web-flash-log": FlashLog;
   }
 }
diff --git a/src/start-flash.ts b/src/start-flash.ts
@@ -27,7 +27,7 @@ export const startFlash = async (
   // For debugging
   (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.addRow({ id: "initializing", content: "Initializing..." });
   logParent.append(logEl);