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

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

如何制定平面图

有一些应用程序可用于创建平面图,但我强烈推荐的应用程序称为Magicplan。它使用起来很简单,并且可以在IOSAndroid上使用。您可以免费创建楼层平面图并以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
  • 我们要看的第一个是状态徽章,它允许向图像添加传感器。

    国家徽章元素

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

    样式变量使用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_actionhold_action打开更多信息弹出窗口,调用服务或导航到另一个视图。

    以下是同一天气实体的示例。
    在这里插入图片描述
    我将元素设置typestate-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_actionhold_actionnavigation_path,和service

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

    状态图标

    我定义了元素类型a state-icon。为了entity,我添加了一个连接到我的灯的开关,我还给了它一个title,当我将鼠标悬停在图标上时它会显示出来。我设置的tap_actionaction: 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%
    

    将元素定义typeservice-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%
    

    现在,只要您想立即关闭所有灯光,而不是点击每个单独的灯光,您可以使用此服务按钮快速完成。所以,这绝对是设置平面图的基本要素。特别是如果你家里有很多灯。

    图像元素

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

    您也可以访问,我们已经与添加变量由先前的元素使用的变量imagecamera_imagestate_imagefilter,和state_filter

    例1

    例如,为了在灯光关闭时使房间看起来更暗,您首先需要复制平面图并将图像裁剪到您需要的房间。之后,将图像保存在www文件夹中。然后,在Lovelace文件中,将元素类型定义为a imageentity为该房间设置灯光。然后,添加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个图像,而不是使用filterstate_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或上面的视频说明告诉我。

    展开阅读全文

    没有更多推荐了,返回首页