在这篇文章中，我们将尝试解释如何制定我们的房子计划并将其集成到 Home Assistant 中, 目的是集成我们在 Hassio 中已有的设备，让飞机栩栩如生. 这是非常有吸引力的东西，最重要的是视觉上的, 这是他们在家里会欣赏的东西, 因为通过图像，我们可以看到我们家的状态，并且我们可以从中与我们添加的设备进行交互.

这是我们将在帖子中做的示例, 我们将拥有带有实时信息的房屋地图, 我们会看到灯亮着, 歌词大意： 带着他们的影子, 我们在电视上看到的内容, 我们感兴趣的任何指标的值… 我们甚至可以与他们每个人互动, 将扬声器静音, 升高或降低盲注, View 安防摄像头, 我们工厂的状态, 温度, 阻尼, 消费, 如果我们把自己放在…

首先, 在你开始之前，这将是最费力的, 我们将不得不为我们的房子制定一个计划, 世界上最简单的事情就是使用像 Sweet Home 3D 这样的工具, 一个免费且超级直观的工具，我们不会在这篇文章中解释其用途, since with 5 几分钟，我相信你会知道如何使用它，并且你将能够制定你的计划, 这需要时间才能让它变得美丽, 但这将取决于我们每个人想要的细节水平. 您将从绘制墙壁开始, 然后，您将添加您的对象，您必须使其尽可能接近现实.

作为帮助，我给您留下了 3D WareHouse de Sketchup 作为可导入图像库, 寻找我们拥有的家具是个好主意, 对象, 沙发, 灯… 而且这也取决于你想让它保持原样的薄度，你需要导入一些纹理让它更逼真, 为此，我写下来使用 存档纹理. 我们将在上方的视图中工作，在下方的视图中，我们将看到它们在 3D 中的外观, 就是这个想法, 尽可能将其放在离家近的地方. 当您或多或少地完成了计划, 我们的想法是，我们将不得不拍摄我们想看到的东西的不同航拍照片, 就个人而言，我建议您在不同时间拍摄多张照片, 从那时起，我们可以将它们放在 Home Assistant 中，并且 General Shot 会根据时间改变太阳的阴影, 或者在一天结束时，黑夜来了, 歌词大意： 让房子变得黑暗. 这真的很简单, 真, 花几分钟在上面，你就会被吸走. 另一个提示, 以尽可能高的质量制作图像, 就我而言，我使用 1920×1080 像素分辨率 (在 document/drawing 属性中, 就像你拍照时一样).

后, 使用任何 PhotoShop 类型编辑器, 或 Inkscape (开源) 我们将不得不制作我们需要的房子的所有图像. 我解释一下我的例子, 有 3 整个飞机的图像, 一与晨光同在, 下午和晚上各有一次, 中午 12 点拍摄的照片, 17h 和 22h 分别. 除了当晚的照片外，您还必须拍摄另一张照片, 但这一次，所有的灯都亮着, 我有类似:

• planta_baja_manana.png 01/08/2020 中午 12 点
• planta_baja_tarde.png 01/08/2020 下午 5 点
• planta_baja_noche.png 01/08/2020 在 21:27h
• planta_baja_noche_luz.png 01/08/2020 在 21:27h

在灯光下的夜晚形象中, 我们将不得不使用这些编辑器剪掉有光的区域, 例如厨房, 大厅, 过道, 房间… 有时，如果灯或机舱中有多个灯，我们将不得不进行渐变… 以下图像仍然存在 (重复, 他是我的榜样) PNG 格式，带透明胶片:

• hall_luz.png
• lampara_sala_luz.png
• sala_luz.png
• cocina_luz.png
• comedor_luz.png

不错, 当我们准备好这部分时, 我们可以从 Home Assistant 开始, 我们将不得不制定一个计划并逐渐添加我们生成的所有图像. 首先, 我们要在传感器领域创建的第一件事 (传感器:), 这是太阳的海拔告诉我们的事情, 因此，我们可以稍后在开始时使用它，如果是早上，镜头的背景会发生变化, 中午, 下午或晚上, 这样，我们就用相应的太阳阴影来放置不同的背景, 并随着夜幕降临使图像更加暗. 我们将创建一个传感器, 我称他为brillo_sol, 我把代码留给你，我们将放在 configuration.yaml 中:

传感器:
...
  - 平台: 模板传感器:
      brillo_sol:
        friendly_name: "阳光"
        value_template: >-
          {% 如果 state_attr('sun.sun', 'elevation') > 20  %}
            明亮
          {% Elif state_attr('sun.sun', 'elevation') > 9 %}
            中
          {% Elif state_attr('sun.sun', 'elevation') > -3 %}
            黑暗
          {% 还 %}
            黑
          {% Endif （结束） %}
...

请记住重新启动 Home Assistant，以便它为我们刚刚插入的更改充电 (每次我们点击配置文件, 你知道的). 最后, 我们可以从地图开始! 开始!!! 在 Lovelace UI 中，我们将能够创建手动卡. 我把下面的代码留给你作为例子，它所做的就是所说的, 将从传感器读取 'Sunshine’ 你的状态，这取决于你拥有什么状态, 因为它会放置一张或另一张背景图片. 我们的第一张卡示例:

元素:
  - 实体: sensor.brillo_sol: /本地/planta_baja/planta_baja_negro.png state_image:
      黑: /局部/planta_baja/planta_baja_noche.png Bright: /本地/planta_baja/planta_baja_mediodia.png 深色: /本地/planta_baja/planta_baja_tarde.png 中路: /本地/planta_baja/planta_baja_manana.png 样式:
      左: 50%
      返回页首: 50%
      宽度: 100%
    tap_action:
      行动: 无类型: 图片: /本地/planta_baja/planta_baja_tarde.png 类型: 图片元素

如果有人对结果有疑问, 以下是我们将得到的, (就我而言) 是 4 图像, 以下, 你会看到阴影发生了变化, 白天和晚上的最后. 如您所见, 您必须将每个 PNG 图像保存在您在 Hassio 计算机上创建的目录中, 就我而言，我将其保存在 docker 容器中, 在里面，我们将创建一个文件夹，例如使用 WinSCP 将图像复制到那里.

不错, 我们该何去何从? 我们是否添加了灯泡？? 按下时，它还会打开相应的灯, 不? 我们走吧!!! 这里 和 这里 您有两张图片，对我们有很大帮助, 我们的想法是把它们放在我们感兴趣的地方, 在此示例中，我们将它们放在大厅的中央, 使用我们添加到上一个 Lovelace 卡的下一个代码，我们将拥有它, 答案是肯定的, 每个人都必须根据自己的喜好移动它并调整它的大小, 当然，还要在大厅的灯光下选择相应的身份:

- 实体: light.luz_hall state_image:
    'off': /local/planta_baja/liteoff.png
    'on': /本地/planta_baja/lite.png 样式:
    左: 45%
    返回页首: 65%
    宽度: 10%
  tap_action:
    行动: 肘节类型: 图像

这就是结果, 如果你看一个灯泡，我们会在大厅里, 如果它关闭了，那就是一个红点, 如果我们点击它，它会发出光，而且点会变成绿色，周围有美丽的白色模糊. 准备? 我们!

让我们点亮小屋, 在本例中为 Hall, 当灯泡亮起时, 更改大厅的图像并亮起. 灯在光线下使用降级的图像也很酷… 为此，, 首先，我们必须 下载此文件 并将其保存在我们的文件夹 '/config/www/js/’ 然后我们必须添加 “配置” > “Lovelace 控制面板” > ” 资源”:

网址: /local/js/color-lite-card.js 类型: JS 系列[/源代码]

现在是, 我们可以退回我们的卡, 并继续喂它. 如果我们记得, 在帖子的开头，我们已经指出我们必须让每个房间都修剪好灯光, 我们将使用以下代码将其添加到我们的卡片中:

- 实体: light.luz_hall 图像: /本地/planta_baja/hall_luz.png 样式:
    左: 50%
    返回页首: 50%
    宽度: 100%
  tap_action:
    行动: 无类型: 'custom:color-lite-card'

如果我们有 LED 灯条, 我们可以显示您现在正在使用的颜色, 就我而言，我想无数次提醒您 WLED 系列 这真是太棒了, 我们需要一张图像，其中该区域仅用红色照明和变换, 我该如何离开这个 我的例子 重命名为 _color. 使用以下代码，我们可以开始可视化集成到平面图中的 LED 灯条.

- color_image: /local/planta_baja/wled_cocina_color.png 实体: light.wled_cocina 图像: /local/planta_baja/wled_cocina_normal.png 样式:
    左: 50%
    返回页首: 50%
    宽度: 100%
  类型: 'custom:color-lite-card'

还有什么? 您使用 Kodi 看电视? 好吧，如果您有投影仪，能够添加您在电视或墙上观看的内容也很好… 所以它会显示你所看到🙂的 第一件事 下载此文件 并保持原样, 在 '/config/www/js/' 中. 再次来自 “配置” > “Lovelace 控制面板” > ” 资源” 加:

网址: /local/js/now-playing-card.js 类型: JS 系列[/源代码]

还行, 现在, 塑造电视或投影在墙上的形状, 我们得做一个梯形, 当然为什么, 每个人都会正确看待他们想看到的东西, 为了使其更逼真，您必须使用您在 Kodi 上看到的内容制作图形. 为此，它有一个 设计工具 你会看到什么，用它是胡说八道, 只需下载, 打开它带来的网站并播放, 添加我们的底部并快速拉出我们需要旋转或扭曲它的测量值. 总, 在我们的卡片上，我们将添加 Kodi 实体并放置生成这个出色工具输出的代码, 我们看起来像:

- 实体: media_player.kodi_sala 样式:
    左: 64%
    返回页首: 11%
    变换: >-
      旋转(46.5度) 旋转X(29度) 旋转 Y(-38度) 偏斜 X(10度)
      偏斜 Y(-30度)
    宽度: 8%
  类型: 'custom:now-playing-poster'

这将是美妙的结果, 当然，如果你有投影仪, 您还可以将动画 GIF 文件放置在投影位置，以模拟灰尘… 等, 等… 你可以做很酷的事情. 当然，如果您修改我们添加到卡片中的每个对象的操作，您将能够与它们进行交互.

好吧，最后, 但还有更多的事情可以做, 嘿! 将, 让我们看看 Home Assistant 中某个实体的值, 例如, 如果我们有温度传感器, 那么，什么标记, 我做的学位, 它被放在我们每个有温度计的房间里… 如果我们测量设备的消耗量，也可以做同样的事情, 因此，当我们看到地图时, 因为我们将实时看到温度, 湿度, 消费… 无论什么! 来, 我们将其添加到我们正在使用的卡牌中, 每个 API 都会将他们的实体, 您的字母颜色…:

- 实体: 传感器.0x00158d000444587d_temperature 风格:
    颜色: 橙色字体大小: 12px 字体粗细: 粗体左: 54%
    返回页首: 16%
  类型: 状态标签

井, 每一个都赋予了想象力, 这是所有这些动画效果的 GIF, 我希望它能启发和帮助你, 非常感谢所有让 Home Assistant 成为可能的人, 以及在 GitHub 上分享其作品的每个人 (等等). 感谢您在社交媒体上的分享!!!