【亲测免费】 开源项目 `button-card` 使用教程

项目介绍

button-card 是一个为 Home Assistant 设计的自定义 Lovelace 按钮卡片。它允许用户在 Home Assistant 的 Lovelace UI 中创建高度可定制的按钮。这些按钮可以用于控制各种家庭自动化设备，如开关、灯光等。button-card 提供了丰富的配置选项，包括自定义图标、颜色、状态显示等，使得用户可以根据自己的需求设计出独特的按钮界面。

项目快速启动

安装

首先，确保你已经安装了 HACS（Home Assistant Community Store）。然后在 HACS 中搜索 button-card 并安装。

resources:
  - url: /hacsfiles/button-card/button-card.js
    type: module

配置

在 ui-lovelace.yaml 文件中添加以下配置来创建一个基本的按钮卡片：

- type: 'custom:button-card'
  entity: switch.ac
  icon: mdi:air-conditioner
  color: rgb(28, 128, 199)

应用案例和最佳实践

案例一：空调控制按钮

创建一个按钮来控制空调，按钮颜色在空调开启时为蓝色，关闭时为灰色。

- type: 'custom:button-card'
  entity: switch.ac
  icon: mdi:air-conditioner
  color: rgb(28, 128, 199)
  state:
    - value: 'off'
      color: var(--disabled-text-color)

案例二：灯光组控制按钮

创建一个按钮来控制整个灯光组，显示 ON/OFF 状态。

- type: 'custom:button-card'
  entity: group.home_lights
  show_icon: false
  show_state: true

典型生态项目

button-card 通常与其他 Home Assistant 组件和卡片一起使用，以构建完整的前端界面。以下是一些常见的生态项目：

1. Lovelace UI：Home Assistant 的默认用户界面，button-card 是其重要组成部分。
2. HACS：Home Assistant Community Store，用于管理和安装各种社区贡献的组件和卡片。
3. Home Assistant：一个开源的家庭自动化平台，button-card 是其前端自定义的重要工具。

通过结合这些项目，用户可以创建出功能丰富、界面友好的家庭自动化控制系统。