Home Assistant初学者指南 - 5 之如何在Home Assistant中设置Picture Elements卡 - Lovelace

最新推荐文章于 2024-09-13 22:50:18 发布

hjf0124

最新推荐文章于 2024-09-13 22:50:18 发布

阅读量9.6k

点赞数

分类专栏： Home Assistant/HASS.IO

Home Assistant/HASS.IO 专栏收录该内容

15 篇文章 7 订阅

订阅专栏

Home Assistant中的Picture Elements卡是Lovelace UI中最灵活的卡之一。允许在图像的不同部分添加图标，文本和服务。今天，我将向您展示如何设置平面图的图像，并使用Picture Elements卡将实体添加到该图像。

如何制定平面图

有一些应用程序可用于创建平面图，但我强烈推荐的应用程序称为Magicplan。它使用起来很简单，并且可以在IOS和Android上使用。您可以免费创建楼层平面图并以3美元的价格导出该楼层平面图的图像，这对于您获得的所有功能而言非常便宜，而且使用起来也非常简单。所以我绝对推荐它。

将平面图设置为视图中的面板

获得平面图的图像后，需要将其保存在www文件夹中。如果您还没有此文件夹，则需要在Home Assistant的config 文件夹中创建它。然后，打开lovelace.yaml文件并 View为平面图设置一个单独的文件。您还希望将“视图”设置为面板，以便“图片元素”卡以全宽显示。然后，将卡类型定义为a picture-elements及以下，使用路径添加楼层平面图**/local/**，然后添加包含文件扩展名的图片名称。

- title: Floor plan
  panel: true
    cards:
      - type: picture-elements
        image: /local/Apartment_FP.png
        elements:

在下面，您现在可以开始在平面图上添加所需的所有元素。您可以使用以下几个元素：

state-badge
state-label
state-icon
service-button
icon
image
我们要看的第一个是状态徽章，它允许向图像添加传感器。
国家徽章元素

将元素定义type为state-badge。然后，entity输入要显示的传感器的名称。现在，要指定图像上元素的位置，您需要使用style变量并设置top和left变量的值。如果你增加顶部的百分比，它会将元素更多地放在底部，左边也是如此。如果增加该值，则会将元素向右移动。

样式变量使用CSS，因此您可以更改几件事。例如，如果要更改字体大小，可以使用变量进行更改font-size
```
 - type: state-badge
  entity: sensor.dark_sky_temperature
  style:
    top: 12%
    left: 32%
    font-size: 17px
```
将更改保存到文件并刷新Lovelace UI，您现在可以在完整面板视图中创建平面图，并创建新的州徽章。现在，当您单击徽章时，它将打开该特定实体的更多信息弹出窗口。

没有其他变量可用于您可以添加的州徽章，但是，要向传感器实体添加更多功能，您可以使用state-label。

国家标签元素

使用state-label，您可以添加相同的传感器实体，并使用变量prefix和实体在实体之前或之后添加一些文本suffix。您还可以使用该变量tap_action并hold_action打开更多信息弹出窗口，调用服务或导航到另一个视图。

以下是同一天气实体的示例。

我将元素设置type为state-label。对于entity，我进入相同的天气传感器。然后，我在使用prefix变量的实体之前添加了一些文本。文本也包含在引号内，" "因此可以在末尾添加空格以将文本与实体值分开。我还添加了tap_action变量，并将其设置为 action: navigate然后在下面我使用navigation_path变量设置到我要导航到的视图。最后，我使用style变量来设置标签的位置，我也改变了字体大小。
```
- type: state-label
  entity: sensor.dark_sky_temperature
  prefix: "Outside Temp "
  tap_action:
    action: navigate
    navigation_path: /lovelace/2
  style:
    top: 22%
    left: 32%
    font-size: 20px
```
现在，状态标签显示实体数据，当单击时，它将导航到指定的视图

状态图标元素

除了state-badge和state-label之外，还有state-icon元素，允许添加像开关和灯光这样的实体图标来查看它们的当前状态。随着state_icon，您还可以使用变量tap_action，hold_action，navigation_path，和service

这是我为客厅灯设置的一个例子。

我定义了元素类型a state-icon。为了entity，我添加了一个连接到我的灯的开关，我还给了它一个title，当我将鼠标悬停在图标上时它会显示出来。我设置的tap_action是 action: toggle如此喜欢，当我点击它，它打开和关闭的光。
```
- type: state-icon
  entity: switch.living_room_light
  title: Living room light
  tap_action:
    action: toggle
  style:
    top: 73%
    left: 18%
    --iron-icon-height: 42px
    --iron-icon-width: 42px
```
默认情况下，图标有点小，但您可以通过添加选项 –iron-icon-height 和 –icon-iron-width 样式变量来使它们更大。

图标元素

现在还有一个图标元素，其工作方式类似于状态图标。唯一的区别是它不显示实体的状态。它还具有相同的变量，添加了icon变量，以便能够定义我们想要为特定实体显示的图标。这是我如何使用这个元素的一个例子。
```
- type: icon
  title: Living room camera
  icon: mdi:cctv
  entity: camera.living_room_camera
  style:
    top: 30.5%
    left: 22%
    --iron-icon-fill-color: "#11AB7D"
    --iron-icon-height: 40px
    --iron-icon-width: 40px
```
我为我的客厅相机设置了一个图标元素，我定义了icon我想用于这个实体的图标元素。然后我添加了变量**–iron-icon-fill-color**以匹配图标的颜色与我当前的主题。

现在，我没有添加tap_action变量，因为默认情况下，当您点击图标时，它会显示更多信息弹出，但如果您想设置其他内容，您可以随时设置该变量，就像我设置的示例一样和图标导航到另一个视图。
```
- type: icon
  icon: mdi:fullscreen
  title: Living room Floor Plan
  tap_action:
    action: navigate
    navigation_path: /lovelace/3
  style:
    top: 61.5%
    left: 32.5%
    --iron-icon-fill-color: "#11AB7D"
    --iron-icon-height: 60px
    --iron-icon-width: 60px
```
服务按钮元素

好吧，那些是可用的州元素，加上图标元素。现在让我们看看服务按钮，它允许添加一个按钮来调用服务。一个完美的例子是创建一个主按钮，可以同时关闭所有灯。让我举个例子。
```
- type: service-button
  title: Turn lights off
  service: homeassistant.turn_off
  service_data:
    entity_id: group.all_lights
  style:
    top: 93%
    left: 65%
```
将元素定义type为service-button，添加一个title该按钮的标签。该service套它homeassistant.turn_off。然后，service_data使用entity_id 设置变量group.all_lights

如果您像我一样并且有一些轻实体以及一些连接到灯的智能开关，那么您可以创建一个脚本将所有灯组合在一起，然后将脚本名称添加到服务变量中。
```
#### 关闭所有灯光脚本 ####

turn_off_lights:
  alias: Turn lights off 
  sequence:
    - service: switch.turn_off
      data:
        entity_id: switch.living_room_light
    - service: switch.turn_off
      data:
        entity_id: switch.bedroom_light
    - service: light.turn_off
      data:
        entity_id: light.desk_light
```
```
#### Service button for script ####

- type: service-button
  title: Turn lights off
  service: script.turn_off_lights
  style:
    top: 93%
    left: 65%
```
现在，只要您想立即关闭所有灯光，而不是点击每个单独的灯光，您可以使用此服务按钮快速完成。所以，这绝对是设置平面图的基本要素。特别是如果你家里有很多灯。

图像元素

好吧，最后但并非最不重要的，让我们来看一下图像元素，它允许在主图片的顶部添加额外的图像。这很方便，因为你可以制作一些很酷的效果，例如，当灯光关闭时，使平面图上的房间看起来更暗，而当灯光打开时，使房间更亮。

您也可以访问，我们已经与添加变量由先前的元素使用的变量image，camera_image，state_image，filter，和state_filter

例1

例如，为了在灯光关闭时使房间看起来更暗，您首先需要复制平面图并将图像裁剪到您需要的房间。之后，将图像保存在www文件夹中。然后，在Lovelace文件中，将元素类型定义为a image，entity为该房间设置灯光。然后，添加tap_action变量，如果要点击图像上的任何位置以打开和关闭灯光，则将其设置为toggle。否则，none如果您使用状态图标来切换灯光，请将其设置为。

之后，添加变量image并添加新裁剪图像的路径。然后，使用该变量state_filter设置亮实体的开启和关闭状态。现在使用style变量定位图像，并添加width以指定图像的大小。
```
- type: image
  entity: switch.living_room_light
  tap_action:
    action: none
  image: /local/Living_room_FP.png
  state_filter:
    "on": brightness(100%)
    "off": brightness(50%)
    style:
      top: 57.2%
      left: 31.8%
      width: 64.4%
```
现在，无论何时打开和关闭灯光，平面图中的特定房间都会在正常图像和较暗图像之间变换。

例2

我们可以设置同一示例的另一种方法是为房间使用2个裁剪图像。一个具有正常亮度，另一个具有较暗的亮度。或者，您可以像我一样设置一个小插图，以便在灯关闭时更好地观察它。然后，您可以使用和设置打开和关闭状态下的2个图像，而不是使用filter和state_filter变量state_image。
```
- type: image
  entity: switch.living_room_light
  tap_action:
    action: none
  image: /local/Living_room_FP.png
  state_image:
    "on": /local/Living_room_FP.png
    "off": /local/Living_room_FP_off.png
  style:
    top: 57.2%
    left: 31.8%
    width: 64.4%
```
好的，所以有很多方法可以使用Picture Elements卡并使其在您的设置上更好地工作。我希望这些可用元素的演练可以帮助您实现这一目标。

在未来的文章/视频中，我还想了解一些可用于Lovelace的定制卡片。我已经考虑到了一些我要介绍的内容，但我想获得更多反馈，如果您可以通过Twitter或上面的视频说明告诉我。