通过本篇教程，你将获得 Home Assistant 的另一种交互方式：平面图（Floorplan），并跟随示例创建属于你独一无二的个人家庭控制界面。 一、效果展示
▲Floorplan for Home Assistant 1
▲Floorplan for Home Assistant 2
▲Floorplan for Home Assistant 3
▲Floorplan for Home Assistant 4
二、基础准备 实现原理
Home Assistant 提供的前端 平面图 （Floorplan）中，通过使自定义的 ha-floorplan.html 页面文件配合SVG 格式图片 floorplan.svg，可以将图片中的可视化设备赋予系统设备的实例 ID（Entity ID），达到关联控制的目的。
3D 的显示效果很棒，可是由于下面几个原因我最终仍选择了 2D 视图模式：
SVG：可缩放矢量图形（Scalable Vector Graphics）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。 使用工具
SVG 编辑软件 ：Inkscape
▲Inkscape
三、安装项目 复制文档
在项目文档 百度网盘
▲目录结构
主要需要修改的文件：
floorplan.yaml：设备配置文件
floorplan.svg：平面图图片文件
floorplan.css：显示效果样式文件
平面图（Floorplan）在 Home Assistant 中有两种显示方式：
侧边栏
▲侧边栏
在 configuration.yaml 添加如下配置：
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:bulletin-board
url_path: floorplan
config: !include floorplan.yaml复制代码
状态卡片
▲状态卡片
在 configuration.yaml 添加如下配置：
# 虚拟了一个实例来表示平面图，实例类型任意。
homeassistant:
customize:
binary_sensor.floorplan:
custom_ui_state_card: floorplan
config: !include floorplan.yaml
binary_sensor:
- platform: mqtt
state_topic: dummy/floorplan/sensor
name: Floorplan
group:
zones:
name: Zones
entities:
- binary_sensor.floorplan复制代码
以任意方式配置之后重启 Home Assistant 服务，在 Floorplan 面板中你应该能看见如下界面：
▲Floorplan 初始界面
官方文档提供了默认的配置文件与 SVG 平面图文件，由于没有跟你的系统关联，无法进行任何操作，下面让我们先将你的设备加入 floorplan.yaml 文件中。
四、添加设备
目前仅支持传感器（Sensor）、开关（Switch）、灯具（Light）、报警面板（Alarm Panel）、二进制传感器（Binary Sensors）、摄像头（Camera）、媒体播放器（Media Player），将你的设备的实例 ID（Entity ID） 添加到 floorplan.yaml 文件相应位置（仅以部分设备为例，详情参照下载文档）：
name: Demo Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
# 可选项
warnings: # 开启错误提示，可以在Web页面查看
# pan_zoom: # 缩放
# hide_app_toolbar: # 隐藏 Toolbar
# date_format: DD-MMM-YYYY # 自定义日期格式
last_motion_entity: sensor.template_last_motion # 最后动作设备
last_motion_class: last-motion
groups:
- name: Sensors #传感器 名称自定 可以有多组
entities:
- sensor.dark_sky_temperature # 温度传感器 在此处添加你的设备 ID
# 文字显示模板，在我的文档中定义了两类，分别带有温湿度单位的，可自行参考
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}'
# 显示模板 调用不同的 CSS 信息
class_template: '
var temp = parseFloat(entity.state.replace("°", ""));
if (temp < 10)
return "temp-low"; # 在 CSS 文件中的 .temp-low 类下修改相关显示属性
else if (temp < 30)
return "temp-medium";
else
return "temp-high";
'
- name: Lights
entities:
- light.hallway
- light.living_room
- light.patio
- group.kitchen_lights
- group.living_room_lights
states: # 状态 以及相应调用的 CSS 信息
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action: #执行动作
domain: homeassistant
service: toggle复制代码
▲错误提示
配置完成后，需要重启 Home Assistant 服务，如果你开启了配置文件中的 warnings 错误提示，刷新浏览器，你将会看到类似上图的信息，提示我们在 SVG 文件中没有找到相应的设备，下面我们将绘制属于你的平面图并将设备与图形关联起来。
五、平面图绘制
平面图一般是在你的户型图基础上进行修改与添加相关设备显示，通过 floorplan.svg 文件展示出来。
获取你的户型图
如果你拥有自己的户型图源文件，你可以直接导入到 Inkscape
Inkscape 支持 CAD 文件导入，但是会产生很多杂项，线条也是独立的，不方便后期修改，经过测试仍推荐重绘个人平面图。如果你不需要后期美化，可以在
酷家乐 下载你的户型图 CAD 文件，并通过在线
DXF转SVG 直接获得的你的户型图 SVG 文件。
酷家乐
▲新建户型
▲导出户型
magicplan 注意 的是 magicplan 导出功能需要收费，这里我们仅使用制成后的截图来供我们参考制作所需的平面图。
▲magicplan
户型图 SVG 文件的绘制
为了后期进一步美化与定制，我们没有使用 CAD 源文件，这就需要我们手动修改户型图。将之前得到的户型图文件拖拽进 Inkscape ▲ 绘制户型图
美化后的户型图完全符合 SVG 文件的要求，你可以试着再往里面添加你的家具家电。
▲ 绘制户型图
设备的关联
之所以重绘户型图，一个原因是为了能够使你的平面图看起来更美观，另一个原因就是为了之后的设备关联。所有你想要在平面图中控制的设备，你都需要设置它在 SVG 文件中的属性，赋予相关图形你的实例 ID（Entity ID）。
为了方便触控设备的操作，遵循人机交互的需求（Human Interface），我采用统一大小格式的图标来作为设备的控件。大多数相关图标可以在
FLATICON 网站下载，文末的附件中也含有我用到的一些图标供大家参考。
以下仅以灯具控制以及温湿度信息显示为例：
关联灯具
在平面图中适合位置添加你选择的图标，调整到适合大小，设置对象属性。
▲添加灯具
关联温湿度信息 在平面图中适合位置添加任意文字，调整到你希望显示的大小，设置对象属性。
▲添加温湿度信息
完成后保存 floorplan.svg 文件并替换原文件，刷新浏览器，查看效果，并注意错误提示。
六、个性化设置
经过前面几步，你已经可以在浏览器中使用平面图控制你的设备了，下面主要涉及 floorplan.css 文件的修改，也就是对设备开关状态显示效果、信息显示效果、门窗状态显示效果的自定义，示例如下：
SVG 与 CSS 文件的修改不需要重启 Home Assistant 服务，保存后刷新浏览器即可。
信息文本样式
如我们在 floorplan.yaml 文件中添加的温湿度传感器为例（本例包含多种样式的判断选择）：
# 温度 由于温湿度的单位不同，将之分别定义显示模板 text_template
- name: Sensors
entities:
- sensor.temperature_158d0001141e1a
- sensor.temperature_158d0001145a31
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
# 样式模板，温度在低于15、15-30、高于30，分别按照 temp-low temp-medium temp-high 的样式显示，在本例中分别显示 蓝色（寒冷）、绿色（舒适）、红色（炎热）
class_template: '
var temp = parseFloat(entity.state);
if (temp < 15)
return "temp-low";
else if (temp < 30)
return "temp-medium";
else
return "temp-high";
'
# 湿度
- name: Sensors
entities:
- sensor.humidity_158d0001141e1a
- sensor.humidity_158d0001145a31
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
# 样式模板，湿度在低于45、45-65、高于65，分别按照 humidity-low humidity-medium humidity-high 的样式显示，在本例中分别显示 黄色（干燥）、绿色（舒适）、蓝色（潮湿）
class_template: '
var humidity = parseFloat(entity.state);
if (humidity < 45)
return "humidity-low";
else if (humidity < 65)
return "humidity-medium";
else
return "humidity-high";复制代码
'
在 floorplan.css 文件中对应如下：
/*CSS样式表，修改类似#5bc0de的信息，即改变相应状态显示颜色*/
.temp-low {
fill: #5bc0de !important;
}
.temp-medium {
fill: #5cb85c !important;
}
.temp-high {
fill: #d9534f !important;
}
.humidity-low {
fill: #f0ad4e !important;
}
.humidity-medium {
fill: #5cb85c !important;
}
.humidity-high {
fill: #5bc0de !important;
}复制代码
如我们在 floorplan.yaml 文件中添加的灯具为例。通常会有开和关两个状态，对应两个样式。
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'复制代码
在 floorplan.css 文件中对应如下：
.light-off {
opacity: 0.75; /*关闭时不透明度为75%*/
}
.light-on { /*开启时正常显示*/
}复制代码
效果如下：
▲图标控件样式
给一组样式对比， floorplan.css 文件：
.light-off {
stroke: white; !important;
fill: #C3B7F4 !important;
}
.light-on {
stroke: white; !important;
fill: #F8D2B9 !important;
}复制代码
效果如下：
▲图标控件样式
同理我们可以设置门窗、人体感应器不同状态下的颜色、显示，这里就不一一说明了。
目前大多数浏览器支持的 CSS 效果还有很多，如果你对相关知识有一定了解，你还可以设置动态显示效果，比如风扇开时显示动态图标，关闭时显示静态图标。
七、相关文档下载
文中用到的配置文件、图标、SVG、CSS文档在百度网盘 
[复制链接]
发表于 2017-9-9 13:57:50
