终于到了大家翘首以待的 Floorplan 篇了，大家惊不惊喜、意不意外呢？先展示一下最终的效果吧：

为了回馈各位派友的期待，本期教程将采用视频教程的形式，这份视频不出意外的话应该是全球第一份有关 Home Assistant Floorplan 的教学视频。中文版本视频发布于优酷及 B 站平台中，本周内我也将制作英文版本发送至  YouTube 上，有需要的朋友也欢迎持续关注。

• 腾讯：https://v.qq.com/x/page/y0549h32lw7.html
• 优酷：http://v.youku.com/v_show/id_XMzAyMjQxOTgzNg==.html
• B 站：https://www.bilibili.com/video/av14441514/
• 英文版：https://www.youtube.com/watch?v=glIkVSxP1oU
  

视频中涉及的链接我都附在了『视频简介』中，制作较为匆忙，我也将和其他篇文字教程一样保持视频教程的更新。以下是简短的文字补充说明：

平面图设计

Floorplan 是由『底层』的平面设计图加上『顶层』的矢量图交互元素部分组成，对于底图的格式并没有硬性的规定，但需要以方便导入为前提。底图可随意发挥，或 2D 或 3D，甚至是简单的一个交互面板都可以，不必拘泥于『房屋平面图』这个概念，这也正是 Floorplan 的魅力所在。

最终的成图必须为 svg 的矢量图格式，视频中使用的是 Inkscape，软件较为轻量，当然 Illustrator 更是没有问题，其他的矢量图绘图工具亦可使用。

这里提供几个交互元素图标的下载地址：

绘图工具

绘制平面图，除了高大上的 3dsMax，其实有很多亲民的 apps 可供选择，这里推荐几个：

Live Home 3D：组件库丰富。

Home Design 3D：iOS，安卓，macOS，Windows全部支持，甚至可以在 Steam 上购买。

MagicPlan：亮点在可以通过摄像头自动测量绘制房屋架构。

前端入门

制作 Floorplan 的最后一步将涉及浅显的前端知识，建议大家通过 W3school 进行扫盲，只需要知道非常简单的 Javascript 条件语句、CSS 选择器、类、ID 和 CSS 动画即可，实在拿不下的，也可以照搬我的配置，但鼓励举一反三。

Bug

由于 0.52 版本的 HA 将 Polymer 升级到最新版本，Floorplan 尚未跟进，因此可能出现 iOS 设备无法打开 Floorplan 的情况，目前无解状态，有新的消息我将及时告知各位。

插件作者已于近日修复了 iOS 和 macOS 设备中存在的 script error 问题，请至 Github  下载最新的代码。

最后，有关 HA 的所有问题我撰写了特别篇，也烦请各位遇到问题时移步『答疑篇』，我将在统一在那里进行解答。

更新日志