首页 ▸ Voice control ▸

自定义 S3-BOX-3

使用您自己的插图自定义 S3-BOX-3

本教程将向您展示如何用您自己的图像替换 Espressif ESP32-S3-BOX-3 上的家庭助理状态插图。

您可以准备自己的插图，也可以从社区库中导入一些插图。

ESP32-S3-BOX-3 语音助理状态插图

ESP32-S3-BOX-3 语音助理有 6 张插图来指示其状态：

显示能源价格图的截图。 ESP32-S3-BOX-3 的状态：加载中、空闲、听取中、思考中、回复中、错误。

该图表显示了默认插图。接下来的步骤将向您展示如何更改这些插图。

先决条件

最新版的家庭助理，安装有家庭助理操作系统
家庭助理云或手动配置的助理管道
ESP32-S3-BOX-3。ESP32-S3-BOX-Lite 或 ESP32-S3-BOX 也可以使用，但它们目前不在市场上。
成功完成 ESP32-S3-BOX-3 语音助理教程

在 ESPHome 插件中采纳设备

在您可以导入新插图之前，您需要安装 ESPHome 插件并在插件中采纳该设备。

确保 ESP32-S3-BOX-3 正在运行并连接到您的 Wi-Fi。
转到设置 > 插件，检查您是否已安装 ESPHome 插件。
- 如果还没有，请转到设置 > 插件 > ESPHome 来安装该插件。
启动该插件并选择 打开网页界面。
在 ESPHome 插件仪表板上，在 ESP32-S3-BOX-3 卡片上选择采纳。
如果愿意，可以为它取一个新名字。然后，选择采纳。
- 采纳 ESPHome 设备允许我们自定义现有软件。
- 结果：状态会更改为在线。
现在您已设置 ESPHome 插件，继续以下 2 种不同方法之一以添加自定义图像：
- 选项 1：使用社区库中的图像
- 选项 2：使用您自己的图像

选项 1：使用社区库中的图像

如果您想要新的图像，但不想自己创建，可以使用社区中的图像。如果您想使用自己的图像，请跳过此步骤并转到选项 2：使用您自己的图像。

使用社区中的图像

在 ESP32-S3-BOX-3 插件中，选择编辑。
- 结果：打开一个编辑器，显示配置文件。
为了获得灵感，我们为您准备了一些图像。
- 在此库中查看它们。

在本教程中，我们将使用一些 Frenck 的图像。

将以下行添加到 substitutions 块中。

substitutions:
  loading_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/frenck/illustrations/loading.png
  idle_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/frenck/illustrations/idle.png
  listening_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/frenck/illustrations/listening.png
  thinking_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/frenck/illustrations/thinking.png
  replying_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/frenck/illustrations/replying.png
  error_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/frenck/illustrations/error.png

保存更改并选择安装：
- 具体的安装过程可能会根据您的环境而有所不同，可能需要一些时间。
安装完成后，您可以在 ESP32-S3-BOX-3 上看到新图像。
- 现在，发出命令以测试新设置。例如，OK Nabu，关闭客厅灯。

选项 2：使用您自己的插图

这有两个部分：

准备您自己的插图
将您的插图添加到配置中

关于图像规格

以下是您需要了解的内容，以便在 ESP32-S3-BOX-3 屏幕上获得最佳效果。

使用浅色和深色的图像背景

在概览图中，您可以看到默认图像使用了不同的背景颜色。这使得在查看屏幕时更容易识别状态变化。

在您的图像中，可以使用 2 种不同的背景颜色：

对于加载和空闲：使用深色背景
对于听取、思考和回复：使用浅色背景
对于错误：根据自己喜欢的即可

如果您的图像具有透明度，您可以在配置中定义背景颜色。以下步骤展示了如何更改背景。

图像尺寸和文件格式

尺寸：屏幕为 320 x 240 像素。如果您提供的图像不是 4:3 比例，剩余区域将填充背景颜色。
文件格式：PNG、JPEG 或 SVG

准备您自己的图像

根据关于图像规格部分中定义的规格创建自己的图像。
- 您甚至可以自己绘画！
- 有一个模板可供使用。
将所有 6 张图像复制到一个文件夹中。例如：voice_assistant_gfx。
确保您可以访问您的配置文件。
- 安装 Samba 插件。
- 这允许您一次复制多个文件。
将您的图像文件夹复制到配置文件夹中：
- 打开 config 文件夹并打开 ESPHome 文件夹。
- 将您的图像文件夹复制到此处。

将您的图像添加到配置中

在家庭助理中，转到设置 > 插件 > ESPHome，并 打开网页界面。
在 ESP32-S3-BOX-3 插件中，选择编辑。
- 结果：打开一个编辑器，显示配置文件。

要添加您的图像，将以下行添加到 substitutions 块中。

substitutions:
  loading_illustration_file: voice_assistant_gfx/loading.png
  idle_illustration_file: voice_assistant_gfx/idle.png
  listening_illustration_file: voice_assistant_gfx/listening.png
  thinking_illustration_file: voice_assistant_gfx/thinking.png
  replying_illustration_file: voice_assistant_gfx/replying.png
  error_illustration_file: voice_assistant_gfx/error.png

如果您在图像中使用了透明度并想更改背景颜色，请将以下行添加到 substitutions 块中：

000000 表示黑色，FFFFFF 表示白色，使用十六进制颜色代码。
如果要使用不同的颜色，请替换相应的颜色代码。

要找到颜色代码，您可以使用 Google 颜色选择器等工具。

substitutions:
  ...
  loading_illustration_background_color: '000000'
  idle_illustration_background_color: '000000'
  listening_illustration_background_color: 'FFFFFF'
  thinking_illustration_background_color: 'FFFFFF'
  replying_illustration_background_color: 'FFFFFF'
  error_illustration_background_color: '000000'

保存更改并选择安装。
保存更改。
- 根据您的环境，安装过程可能会需要一些时间。
安装完成后，您可以在 S3-BOX 上看到新图像。
- 现在，发出命令以测试新设置。例如，OK Nabu，打开灯。

绘制您自己的图像

我们为您准备了一个模板来绘制您自己的状态图像。
下载文件并开始绘制！
完成后：
- 拍下每个图像的照片。
- 按照这些步骤将它们导入到您的语音助手中。

自定义设备上的唤醒词（microWakeWord）

您可以更改用于 S3-BOX-3 的设备上唤醒词（microWakeWord）。

先决条件

家庭助理 2024.2，安装有家庭助理操作系统。如果您还未安装家庭助理，请参阅安装页面以获取说明。
成功在 S3-BOX-3 上安装 ESPHome
ESPHome 2024.2 或更高版本
家庭助理服务器具有至少 2 GB 的可用 RAM
- 固件需要在服务器上编译，然后安装到 S3-BOX-3 上。
- 编译需要一些 RAM。
设备上的唤醒词已安装在您的 S3-BOX-3 上。

(它也适用于（现已停产的）S3-BOX 和 S3-BOX-Lite)