jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-24 17:57:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update s3-box-customize.markdown (#30351)

Browse Source 
Replacing ```substitution:``` with ```substitutions:```
This commit is contained in:
Glenn Morrison 2023-12-15 04:19:01 -06:00 committed by GitHub
parent 0ebdd9a3fe
commit 1ab88795e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
source/voice_control/s3-box-customize.markdown
View File

@ -60,10 +60,10 @@ If you want to use your own images, skip this procedure and go to [Option 2: Usi
2. For inspiration, we have prepared some images for you. 2. For inspiration, we have prepared some images for you.
- Check them out in this [repository](https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/tree/main/frenck/illustrations). - Check them out in this [repository](https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/tree/main/frenck/illustrations).
3. For this tutorial, we will use some images of Frenck. 3. For this tutorial, we will use some images of Frenck.
- Add the following lines into the `substitution` block. - Add the following lines into the `substitutions` block.
```yaml ```yaml
substitution: substitutions:
loading_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/frenck/illustrations/loading.png 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 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 listening_illustration_file: https://github.com/jlpouffier/home-assistant-s3-box-community-illustrations/raw/main/frenck/illustrations/listening.png
@ -128,10 +128,10 @@ If your images have transparency, you can define the background color in the con
- **Result**: An editor opens, showing the configuration file. - **Result**: An editor opens, showing the configuration file.
![ESP32-S3-BOX-3 config file](/images/assist/esp32-adopt-s3-01.png) ![ESP32-S3-BOX-3 config file](/images/assist/esp32-adopt-s3-01.png)
3. To add your images, add the following lines into the `substitution` block. 3. To add your images, add the following lines into the `substitutions` block.
```yaml ```yaml
substitution: substitutions:
loading_illustration_file: voice_assistant_gfx/loading.png loading_illustration_file: voice_assistant_gfx/loading.png
idle_illustration_file: voice_assistant_gfx/idle.png idle_illustration_file: voice_assistant_gfx/idle.png
listening_illustration_file: voice_assistant_gfx/listening.png listening_illustration_file: voice_assistant_gfx/listening.png
@ -140,13 +140,13 @@ If your images have transparency, you can define the background color in the con
error_illustration_file: voice_assistant_gfx/error.png error_illustration_file: voice_assistant_gfx/error.png
``` ```
4. If you used transparency in your images and you want to change the background color, add the following lines into the `substitution` block: 4. If you used transparency in your images and you want to change the background color, add the following lines into the `substitutions` block:
- The `000000` stands for black, `FFFFFF` stands for white in [hexadecimal color code](https://www.w3schools.com/html/html_colors_hex.asp). - The `000000` stands for black, `FFFFFF` stands for white in [hexadecimal color code](https://www.w3schools.com/html/html_colors_hex.asp).
- If you want to use different colors, replace the corresponding color code. - If you want to use different colors, replace the corresponding color code.
- To find the color code, you can use a tool like the Google color picker. - To find the color code, you can use a tool like the Google color picker.
```yaml ```yaml
substitution: substitutions:
... ...
loading_illustration_background_color: '000000' loading_illustration_background_color: '000000'
idle_illustration_background_color: '000000' idle_illustration_background_color: '000000'