ESP Web Tools 下一代

用户友好的工具，用于在桌面和Android浏览器中管理ESP8266和ESP32设备：

尝试实时演示

此演示将安装 ESPHome。开始前，将ESP设备连接到计算机，然后点击按钮：

演示不可用，因为您的浏览器不支持Web串口。请在Google Chrome或Microsoft Edge中打开此页面。

使用ESP Web Tools的产品

Tasmota
ESPEasy
WLED
CanAirIO
Squeezelite-ESP32
2Smart
Clockwise
Luciferin
ESPHome

工作原理

ESP Web Tools通过结合 Web串口、Improv Wi-Fi（可选）和描述固件的清单文件来工作。ESP Web Tools检测连接的ESP设备的芯片组，并从清单中自动选择正确的固件变体。

Web串口可在Google Chrome和Microsoft Edge浏览器中使用。现在通过Chrome 61+和USB OTG完全支持Android。

配置Wi-Fi

ESP Web Tools支持 Improv Wi-Fi串行标准。这是一个开放标准，允许通过串口配置Wi-Fi。

如果固件支持Improv，安装固件后将提示用户将设备连接到网络。连接后，设备可以将用户引导至URL以完成配置。例如，可以是设备IP地址的链接，在那里它提供本地UI。

将来任何时候，用户都可以使用ESP Web Tools找到设备链接或重新配置Wi-Fi设置，而无需重新安装。

截图显示ESP Web Tools对话框，提供访问设备、将其添加到Home Assistant、更改Wi-Fi、显示日志和控制台以及重置数据的选项。 截图显示ESP Web Tools界面

查看日志和发送命令

ESP Web Tools允许用户打开串行控制台查看日志并发送命令。

截图显示ESP Web Tools对话框，包含一个显示ESPHome日志的控制台和一个用于发送命令的终端提示符。 截图显示ESP Web Tools日志和控制台

将ESP Web Tools添加到您的网站

要将其添加到您自己的网站，您需要在网站上包含ESP Web Tools JavaScript文件，创建一个清单文件，并添加ESP Web Tools按钮HTML。

点击此处查看完整示例。

步骤1：通过添加以下HTML片段加载ESP Web Tools JavaScript。 

<script
  type="module"
  src="https://unpkg.com/tasmota-esp-web-tools/dist/web/install-button.js?module"
></script>

（如果您希望本地托管JavaScript， 请在此下载）

步骤2：在您的页面上找到一个位置放置按钮，并包含以下HTML片段。更新 manifest属性以指向您的清单文件。 

<esp-web-install-button
  manifest="https://firmware.esphome.io/esphome-web/manifest.json"
></esp-web-install-button>

可选：配置刷写速度（波特率）以实现更快的刷写。默认使用115200波特以实现最大兼容性。您可以通过添加baud-rate属性来提高速度： 

<esp-web-install-button
  manifest="https://firmware.esphome.io/esphome-web/manifest.json"
  baud-rate="2000000"
></esp-web-install-button>

可用波特率：230400、460800、 921600、1500000、2000000（推荐用于现代芯片）。更高的速度大约快17倍，但需要兼容的USB串行芯片。

注意：ESP Web Tools要求您的网站通过https://提供才能工作。这是Web串口的安全要求。

如果您的清单或固件文件托管在另一台服务器上，请确保配置 CORS标头，以便允许您的网站获取这些文件，通过添加标头 Access-Control-Allow-Origin: https://domain-of-your-website.com。

ESP Web Tools也可以通过NPM安装集成到您的项目中。

准备您的固件

ESP32固件分为4个不同的文件。当使用命令行工具esptool安装这些文件时，它会修补闪存频率、闪存大小和闪存模式以匹配目标设备。ESP Web Tools无法即时执行此操作，因此您需要使用esptool创建单个二进制文件，并将其与ESP Web Tools一起使用。

使用以下esptool命令创建单个二进制文件： 

esptool --chip esp32 merge-bin \
  -o merged-firmware.bin \
  --flash-mode dio \
  --flash-freq 40m \
  --flash-size 4MB \
  0x1000 bootloader.bin \
  0x8000 partitions.bin \
  0xe000 boot.bin \
  0x10000 your_app.bin

如果您的内存类型是opi_opi或opi_qspi，请将闪存模式设置为dout。否则，如果您的闪存模式是qio或qout，请将闪存模式覆盖为dio。

创建您的清单

清单描述您希望提供给用户安装的固件。它允许为不同类型的ESP设备指定不同的构建。当前支持的芯片系列有： ESP8266、ESP32、ESP32-C2、 ESP32-C3、ESP32-C5、ESP32-C6、 ESP32-C61、ESP32-S2、ESP32-S3、 ESP32-H2 和 ESP32-P4。 将根据连接设备的类型自动选择正确的构建。 

{
  "name": "ESPHome",
  "version": "2021.11.0",
  "home_assistant_domain": "esphome",
  "funding_url": "https://esphome.io/guides/supporters.html",
  "new_install_prompt_erase": false,
  "builds": [
    {
      "chipFamily": "ESP32",
      "parts": [
        { "path": "merged-firmware.bin", "offset": 0 },
      ]
    },
    {
      "chipFamily": "ESP8266",
      "parts": [
        { "path": "esp8266.bin", "offset": 0 }
      ]
    }
  ]
}

每个构建包含要安装到ESP设备的部件列表。每个部件由文件路径和闪存上的偏移量组成，应安装在该偏移量处。部件路径是相对于清单路径解析的，但也可以是其他主机的URL。

如果您的固件受Home Assistant支持，您可以添加可选的键home_assistant_domain。如果存在，ESP Web Tools将链接用户将此设备添加到Home Assistant。

默认情况下，新安装将在安装前擦除所有数据。如果您希望将此选择留给用户，请将可选的清单键 new_install_prompt_erase设置为true。如果ESP Web Tools无法检测到设备的当前固件（通过Improv串行），或者检测到的固件与清单中指定的名称不匹配，则会向用户提供新安装选项。

当固件首次安装在设备上时，它可能需要执行一些耗时的任务，如初始化文件系统。默认情况下，ESP Web Tools将等待10秒以接收Improv串行响应，指示启动完成。您可以通过将可选的清单键 new_install_improv_wait_time设置为等待的秒数来增加此超时时间。设置为0以禁用Improv串行检测。

如果您的产品接受捐赠，您可以将funding_url添加到清单中。这允许您链接到您的页面，向用户解释他们如何资助开发。当连接到运行您的固件的设备（通过Improv检测）时，此链接在ESP Web Tools菜单中可见。

ESP Web Tools允许您提供自己的检查，以确定设备是否运行清单中指定的相同固件。可以通过在<esp-web-install-button>上设置overrides属性来实现此检查。该值是一个包含 checkSameFirmware(manifest, improvInfo)函数的对象。 manifest参数是您的清单，improvInfo是从Improv返回的信息： { name, firmware, version, chipFamily }。仅当通过Improv检测到设备固件时才会调用此检查。 

const button = document.querySelector('esp-web-install-button');
button.overrides = {
  checkSameFirmware(manifest, improvInfo) {
    const manifestFirmware = manifest.name.toLowerCase();
    const deviceFirmware = improvInfo.firmware.toLowerCase();
    return manifestFirmware.includes(deviceFirmware);
  }
};

自定义外观

您可以使用CSS自定义属性（变量）更改默认UI元素的颜色，以下变量可用：

还有一些可用于样式的属性：

install-supported 如果支持安装固件则添加
install-unsupported 如果不支持安装固件则添加

用自定义按钮和消息替换

您可以使用自己的元素替换激活按钮以及当用户使用不受支持的浏览器或非安全上下文时显示的消息。可以使用activate、unsupported和not-allowed插槽来完成： 

<esp-web-install-button
  manifest="https://firmware.esphome.io/esphome-web/manifest.json"
>
  <button slot="activate">自定义安装按钮</button>
  <span slot="unsupported">哎呀，您的浏览器不支持！</span>
  <span slot="not-allowed">哎呀，不允许在HTTP上使用！</span>
</esp-web-install-button>
ESP Web Tools是 开源的