Home Assistant初学者指南 -4 之 如何在Home Assistant上设置Lovelace

Lovelace是Home Assistant的新成员。允许自定义用户界面的外观和可用性。在本文中，我将向您展示如何在Home Assistant上设置和配置Lovelace。另外，我将介绍一些可用于自定义Web界面的不同卡片样式。

 

创建一个Lovelace yaml文件

您需要做的第一件事是在Home Assistant Config 文件夹中创建一个名为ui-lovelace.yaml 的空文件。然后重新启动Home Assistant以应用更改。Home Assistant重新联机后，您可以访问Lovelace 文件以开始使用新的卡样式自定义Web界面。

为了能够在用户界面中显示卡片，您需要设置它们Views 在Home Assistant中的选项卡。对于每个视图，您可以设置标题或图标来表示该选项卡。如果您只设置了1个视图，则除非您添加2个或更多视图，否则标题或图标将不可见。

views:
  - title: main
    icon: mdi:home-outline
    cards:

在“视图”标题下方输入单词，cards以便您可以输入要在此视图中显示的不同类型的卡片。将更改保存到文件，然后通过在Home Assistant URL末尾添加lovelace 一词来访问Lovelace界面。

https://yourdomain.duckdns.org/lovelace

Lovelace的一大优点是，您无需每次更改UI时都重新启动Home Assistant或重新加载页面。您只需要保存Lovelace文件上的更改，然后单击Home Assistant右上角的Refresh选项。

一瞥卡

Glance卡是一个非常有用的卡，允许一个接一个地添加多个实体，最小化卡的整体大小。您还可以将实体设置为切换，只需单击实体图标即可触发操作。这种类型的卡非常适合实体，例如开关和灯。让我举个例子。

一瞥卡

好吧所以在这里我有一张Glance卡，我设置了3个实体来打开3个不同的灯。设置卡时，需要定义要使用的卡类型。在这种情况下，一张Glance卡。然后，您可以为卡片添加标题以及要在卡片中显示的实体。您还可以通过添加变量show_name 或 show_state设置值来显示实体的名称或状态false。

- type: glance
  title: Lights
  show_name: false
  show_state: false
  entities:
    - light.desk_light
    - switch.living_room_light
    - switch.bedroom_light

另一个可用选项是使用变量设置每行的列数columns。默认情况下，根据实体数自动设置列数。但是，您可以使用此变量更改总金额。所以，让我们说对于上面的3个实体示例，我们想要设置总共5列而不是3列，我们可以这样设置： columns: 5

- type: glance
  title: Lights
  show_state: false
  ＃如果每行需要不同数量的列，请添加列
  columns: 5
  entities:
    - light.desk_light
    - switch.living_room_light
    - switch.bedroom_light

将实体设置为对象
现在，这几乎是设置Glance卡的基本方法。当您单击某个实体时，它会为您提供更多信息以及一个用于打开或关闭它的切换按钮。现在我们可以将实体定义为对象，并添加更多自定义以便能够更改，例如，名称，图标以及点击操作。要将实体定义为对象，请将实体设置为  entity: light.desk_light 在其下方，您可以添加变量name,, icon或tap_action。保存文件并刷新Home Assistant以查看更改。

- type: glance
  title: Lights
  show_state: false
  entities:
    - entity: light.desk_light
      name: Desk
      icon: mdi:desk-lamp
      tap_action:
        action: toggle
    - entity: switch.living_room_light
      name: Living room
      tap_action:
        action: toggle
    - entity: switch.bedroom_light
      name: bedroom
      tap_action:
        action: toggle

图片卡样式
接下来，我们将查看Picture Card ，Picture Entity卡和Picture Glance卡。这些卡片允许我们：

设置图像以触发服务
导航到Home Assistant中的特定路径
设置2个单独的图片，代表实体的开启和关闭状态
例如，设置房间的图像并在该房间内添加实体，以便我们可以打开和关闭它们。
在设置任何图片卡样式之前，您需要首先在config文件夹中创建一个标有www的新文件夹，用于保存图像。创建该文件夹后，您需要重新启动Home Assistant，以便它知道新目录的路径。之后，只要您将新图像添加到此文件夹，就不需要重新启动Home Assistant。

 

图片卡

图片卡（左）和图片一览卡（右）

好吧，我在这里设置了一张可以打开桌面灯的照片卡。我添加了一个图像，我使用路径保存到我的www 文件夹/local/，然后是图片的名称，包括文件扩展名。然后，我设置了打开和关闭灯的服务，为我添加了桌面灯的实体ID。现在，只要我点击图像，它就会打开和关闭灯光。 light.toggle service_data

- type: picture
  image: /local/desk_light.jpg
  service: light.toggle
  service_data:
    entity_id: light.desk_light

图片实体卡

现在，如果我们想要有两个相同的图像，一个用彩色来表示它打开时的光线，另一个用黑色和白色当灯光关闭时怎么办？那么，我们可以使用图片实体卡来定义根据光的状态显示什么图像。这是怎么做的。

- type: picture-entity
  entity: light.desk_light
  tap_action:
    action: toggle
  state_image:
    "on": /local/desk_light.jpg
    "off": /local/desk_light_bw.jpg

我将卡片类型定义为picture-entity，因为entity，我添加了桌面灯，然后，我设置了tap_action 并设置了action切换，以便在点击图像时弹出更多信息，它只会切换光线开和关。最后，我使用变量为开启和关闭状态定义了2个图像state_image。现在，当您单击图像时，它将打开和关闭灯光，图像将更改为表示特定状态。

图片实体卡

 

图片一览卡

想要将多个实体关联到图像时，Picture Glance 卡非常出色。在上面的例子中，我为我的客厅设置了，我添加了4个实体。1个开关，实际连接到落地灯，我桌上的实际灯，以及2个打开电视和条形音箱的脚本。最后，我添加了要在卡片上显示的图像。现在，开关和指示灯将作为切换工作，2个脚本将显示更多信息对话框弹出窗口，这将允许我们执行脚本。

type: picture-glance
  entities:
    - switch.living_room_light
    - light.desk_light
    - script.tv_power_toogle
    - script.soundbar_power_toogle
  image: /local/living_room.jpg

现在，就像在图片实体卡上一样，我们可以设置2个图像来表示房间内灯光的开启和关闭状态。为此，请将image变量替换为，state_image并为开启和关闭状态定义2个图像。然后，在下面输入将改变图像的entity灯光。现在，只要您切换起居室的灯光，图像也会根据状态而改变。

- type: picture-glance
  entities:
    - switch.living_room_light
    - light.desk_light
    - script.tv_power_toogle
    - script.soundbar_power_toogle
  state_image:
    "on": /local/living_room.jpg
    "off": /local/living_room_bw.jpg
  entity: switch.living_room_light

我没有在本教程中介绍另一张图片卡，它是Picture Elements卡。这种类型的卡允许设置平面图的图像并在图像的不同部分中添加图标，文本和服务。我想在单独的教程中更详细地介绍此卡，如果您有兴趣，请通过社交媒体或上述视频的评论告诉我。

 

有条件的卡和媒体控制卡

条件卡允许仅根据实体的状态显示卡。例如，如果我们使用媒体控制卡设置Chromecast，我们可以使用条件卡定义仅在Chromecast上播放某些内容时显示该卡，而不是在设备关闭或不可用时显示。

 

我在这里设置了这张有条件的卡片，在我的下面conditions，我两次进入我的起居室Chromecast。一个state_not设置为off ，另一个设置为unavailable。然后，在下面我设置卡与media-control卡和entity客厅Chromecast。因此，现在如果Chromecast没有关闭或不可用，则会显示客厅Chromecast的媒体控制卡。

- type: conditional
  conditions:
    - entity: media_player.living_room_tv
      state_not: "off"
    - entity: media_player.living_room_tv
      state_not: "unavailable"
  card:
    type: media-control
    entity: media_player.living_room_tv

如果您有多个Chromecast设备，Google Homes以及您只想在特定状态下显示的其他设备，则此处的这个小设置非常完美。

 

实体卡

现在，如果我们想要使用传统的卡片样式，那么您将列表中的实体分组？好吧，我们仍然可以使用实体卡进行更多自定义。

实体卡

 

在我为办公区域设置的这个示例中，我为我的台灯添加了一个灯光实体，一个用于打开和关闭计算机的开关以及用于锁定计算机的脚本。正如我们在其他卡片上所做的那样，我们也可以将这里的实体定义为对象，并能够更改名称和图标。

- type: entities
  title: Office
  show_header_toggle: false
  entities:
    - entity: light.desk_light
      icon: mdi:desk-lamp
    - switch.computer
    - script.pc_lock

对于像脚本这样的实体，您可以在其中获得EXECUTE 按钮，现在我们可以使用该元素将按钮标签更改为其他call-service内容。

例如，要锁定我的计算机的脚本，我们将该类型定义为call-service。为实体添加名称和图标。然后，为了自定义按钮标签，我们将添加变量action_name并将值设置为我们想要的标签。然后，我们需要添加service和service data我们要触发。在这种情况下是一个脚本，所以我们将为服务和服务数据添加相同的实体Id。最后，保存文件并刷新Lovelace，脚本现在看起来像这样。

- type: entities
  title: Office
  show_header_toggle: false
  entities:
    - entity: light.desk_light
      icon: mdi:desk-lamp
    - switch.computer
    - type: call-service
      name: PC
      icon: mdi:lock
      action_name: Lock
      service: script.pc_lock
      service_data:
        entity_id: script.pc_lock

实体卡 - 分隔线和网络链接

我们可以与实体卡一起使用的其他元素是分隔符和网络链接。要添加分隔符，您只需添加即可 - type: divider

现在，默认情况下，分隔符设置为1px，并使用当前主题中的辅助文本颜色。您可以使用style变量并更改height和值来自定义此项background-color 。

- type: divider
  style:
    height: 2px
    background-color: “#B3B3B3”

要添加Weblink ，您可以输入以下内容并自定义特定URL的名称和图标。

- type: weblink
  name: JuanMTech
  icon: mdi:link
  url: https://www.juanmtech.com
- type: weblink
  name: Home Assistant page
  icon: mdi:home-assistant
  url: https://www.home-assistant.io/

实体过滤卡

与我们之前使用条件卡的方式类似，我们可以设置仅在特定状态下显示的实体。这种卡片风格非常适合当您想要追踪留下的灯光或仅在他们回家时显示人员列表时。

 

所以在这里我将灯光添加到实体滤镜卡片中，然后将其设置为主视图中的第一张卡片，这样我打开Home Assistant时看到的第一张卡片就是当前打开的灯光。与其他卡一样，我们可以将实体定义为对象，并自定义名称，图标和点击操作。然后在下面，我添加了state_filter，并将其设置为，on以便实体仅在它们打开时显示。我还添加了show_empty变量集，false以便卡片仅在灯亮时显示。现在，默认情况下，此卡使用实体卡样式，但我将其更改为使用Glance卡，通过定义下面的卡类型，我还添加了标题。

- type: entity-filter
  entities:
    - entity: light.desk_light
      name: Desk
      icon: mdi:desk-lamp
      tap_action:
        action: toggle
    - entity: switch.living_room_light
      name: Living room
      tap_action:
        action: toggle
    - entity: switch.bedroom_light
      name: Bedroom
      tap_action:
        action: toggle
    state_filter:
      - "on"
    show_empty: false
    card:
      type: glance
      title: Lights currently on

现在，只要我的灯打开，主助手顶部就会弹出一张新卡，显示当前指示灯亮起。

 

垂直堆栈和水平堆栈卡

这些卡片允许我们垂直或水平地对多张卡片进行分组，这样卡片可以始终保持在同一列中，也可以在列空间内彼此相邻。

垂直和水平卡

 

在这个例子中，我设置了一个包含1个Markdown 卡的垂直堆栈，它允许我们添加自定义文本，以便我们可以将其用作标题。然后我设置了一个带有4张Glance 卡的水平堆栈，每张卡各有一个实体。然后，我为第二行设置了另一个水平堆栈，其中包含另外4个Glance 卡。现在，每张Glance卡都设置为不显示名称或状态，也可用作切换，因此您可以快速单击图标以触发实体。

- type: vertical-stack
  cards:
    - type: markdown
      content: >
        ## Living room TV
      - type: horizontal-stack
        cards:
          - type: glance
            show_name: false
            show_state: false
            entities:
              - entity: script.tv_power_toogle
                tap_action:
                  action: toggle
          - type: glance
            show_name: false
            show_state: false
            entities:
              - entity: script.cable_power_toogle
                tap_action:
                  action: toggle
          - type: glance
            show_name: false
            show_state: false
            entities:
              - entity: script.soundbar_power_toogle
                tap_action:
                  action: toggle
          - type: glance
            show_name: false
            show_state: false
            entities:
              - entity: script.lr_tv_volume_up
                tap_action:
                  action: toggle
      - type: horizontal-stack
        cards:
          - type: glance
            show_name: false
            show_state: false
            entities:
              - entity: script.cable_input
                tap_action:
                  action: toggle
          - type: glance
            show_name: false
            show_state: false
            entities:
              - entity: script.chromecast_input
                tap_action:
                  action: toggle
          - type: glance
            show_name: false
            show_state: false
            entities:
              - entity: script.switch_input
                tap_action:
                  action: toggle
          - type: glance
            show_name: false
            show_state: false
            entities:
              - entity: script.lr_tv_volume_down
                tap_action:
                  action: toggle

将Lovelace设置为默认值

我今天要向您展示的最后一件事是，当您打开Home Assistant时，如何使Lovelace UI成为默认界面。要执行此操作，请单击“ 开发人员”工具下的“ 信息” ，然后单击“ 设置Lovelace”作为此设备上的默认页面。现在，无论何时打开家庭助手而不在URL末尾添加单词lovalace，它都会自动将您重定向到Lovelace页面。

标题

您需要记住的另一件事是，您需要在访问Home Assistant的所有设备上执行此步骤。

好吧，大家好，所以还有很多内容可以用于新的Lovelace UI，例如Home Assistant社区提供的自定义卡片。因此，如果你们想看到本教程的第2部分，请务必通过社交媒体或上述视频的评论告诉我，并让我知道你希望我提供哪些自定义卡片。

我在GitHub上有我的Home Assistant配置，所以如果你想查看它并获得一些设置的想法，你可以在这里查看。