v4.0.0 - Next Gen (#87)

README.md

@@ -13,10 +13,10 @@ Manifest definition:
 ```json
 {
   "name": "ESPHome",
+  "version": "2021.10.3",
   "builds": [
     {
       "chipFamily": "ESP32",
-      "improv": true,
       "parts": [
         { "path": "bootloader.bin", "offset": 4096 },
         { "path": "partitions.bin", "offset": 32768 },
@@ -46,17 +46,6 @@ Manifest definition:
 }
 ```
 
-Allows for optionally passing an attribute to trigger an erase before installation.
-
-```html
-<esp-web-install-button
-  manifest="firmware_esphome/manifest.json"
-  erase-first
-></esp-web-install-button>
-```
-
-All attributes can also be set via properties (`manifest`, `eraseFirst`)
-
 ## Styling
 
 ### Attributes
@@ -67,14 +56,6 @@ The following attributes are automatically added to `<esp-web-install-button>` a
 | -- | -- |
 | `install-supported` | Added if installing firmware is supported
 | `install-unsupported` | Added if installing firmware is not supported
-| `active` | Added when flashing is active
-
-You can add the following attributes or properties to change the UI elements:
-
-| Attribute | Property | Description |
-| -- | -- | -- |
-| `show-log` | `showLog` | Show a log style view of the progress instead of a progress bar
-| `hide-progress` | `hideProgress` | Hides all progress UI elements
 
 ### CSS custom properties (variables)
 
@@ -115,4 +96,4 @@ details | An optional extra field that is different [per state](https://github.c
 
 ## Development
 
-Run `script/develop`. This starts a server. Open it on http://localhost:5000.
+Run `script/develop`. This starts a server. Open it on http://localhost:5001.

index.html

@@ -90,13 +90,22 @@
         padding: 8px;
         border-bottom: 1px solid #ccc;
       }
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #333;
+          color: #fff;
+        }
+        a {
+          color: #58a6ff;
+        }
+      }
     </style>
     <script module>
       import(
         // In development we import locally.
         window.location.hostname === "localhost"
           ? "/dist/web/install-button.js"
-          : "https://unpkg.com/esp-web-tools@3.6.0/dist/web/install-button.js?module"
+          : "https://unpkg.com/esp-web-tools@4.0.0/dist/web/install-button.js?module"
       );
     </script>
   </head>
@@ -112,8 +121,8 @@ <h1>ESP Web Tools</h1>
       </p>
       <p>
         To try it out and install
-        <a href="https://esphome.io">the ESPHome firmware</a>, connect an ESP to
-        your computer and hit the button:
+        <a href="https://esphome.io">ESPHome</a> on an ESP, connect it to your
+        computer and hit the button:
       </p>
       <esp-web-install-button
         log-console
@@ -209,7 +218,7 @@ <h2 id="add-website">Adding ESP Web Tools to your website</h2>
       <pre>
 &lt;script
   type="module"
-  src="https://unpkg.com/esp-web-tools@3.6.0/dist/web/install-button.js?module"
+  src="https://unpkg.com/esp-web-tools@4.0.0/dist/web/install-button.js?module"
 >&lt;/script>
 
 &lt;esp-web-install-button
@@ -243,17 +252,17 @@ <h3 id="manifest">Creating your manifest</h3>
         ESP Web Tools manifest describe the firmware that you want to install.
         It allows specifying different builds for the different types of ESP
         devices. Current supported chip families are <code>ESP8266</code>,
-        <code>ESP32</code>, <code>ESP32-C3</code> and <code>ESP32-S2</code>. The
+        <code>ESP32</code>, <code>ESP32C3</code> and <code>ESP32S2</code>. The
         correct build will be automatically selected based on the type of the
         ESP device we detect via the serial port.
       </p>
       <pre>
 {
   "name": "ESPHome",
+  "version": "2021.11.0",
   "builds": [
     {
       "chipFamily": "ESP32",
-      "improv": true,
       "parts": [
         { "path": "bootloader.bin", "offset": 4096 },
         { "path": "partitions.bin", "offset": 32768 },
@@ -276,7 +285,22 @@ <h3 id="manifest">Creating your manifest</h3>
         where it should be installed. Part paths are resolved relative to the
         path of the manifest, but can also be URLs to other hosts.
       </p>
+      <h3 id="improv">Wi-Fi provisioning</h3>
+      <p>
+        ESP Web Tools has support for 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 Improv is supported, a user will be guided to connect the device to
+        the network after installation. It also allows the user to connect
+        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
@@ -292,7 +316,7 @@ <h3 id="manifest">Creating your manifest</h3>
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowfullscreen
         ></iframe>
-      </div>
+      </div> -->
 
       <h3 id="customize">Customizing the look and feel</h3>
       <p>