天啊，你这SVG咋搞得？自己一个一个抠出来的？你真是太神了。我是前天才初步装上，还没有细搞呢。家人开始看着还觉得挺有意思的，过一会就鄙视我了。人家说人家不用 
那我把存hassbian好几个月的草稿发出来, 未完成. 希望给大伙一个参考. 我很懒, 感觉这个是写不完的
先看结果
这里只是分享一些技巧,具体的配置步骤其他帖子里已经很详细了.
实现的一些效果:
- 根据功能分层
- 门窗的开关动画
- 灯光动画
- 扫地机的一些效果
- 适应主题
SVG的绘制
工具其他帖子里介绍的很多.
我这里说一下Magicplan, 这款软件使用起来非常好, 介绍的也很多. 但是呢, 收费的. 你要导出svg需要收费. (话说在community.home-assistant.io我也看到不少老外付费画图的)
Magicplan
我们在app画房型图,里面还有家具啊什么的, 布置完后. 点输出, 这里有个在网络上发布的选项, 然后会有给URL的地址. 我们在pc浏览器(建议chrome)里打开. 这个页面里实际就包含一个SVG图片. 我们在这个平面图上右击, 点"检查" 在源码里你会发现这个
<img class="leaflet-image-layer leaflet-zoom-animated" src="/api/v1/plans/view-plan-image/9a66b32c-61cb-41ba-9f83-d30207b16013/cb799a434d5c2dc9e154003a227bf8a55d53bee5-9724cbff1.svg" alt="" style="z-index: 1; transform: translate3d(505px, 94px, 0px); width: 512px; height: 512px;">
好了,现在你就可以把这个svg文件下载下了了.
Inkscape改图
我们得到的svg感觉像cad绘制的,线条都是比较复杂的, 然后我们首先要在inkscape里清理一下. 这样会提高性能, svg类似于html, 节点元素越多渲染就越慢.
在处理图片的时候, 我们把元素分层, 把地板-墙-家具-灯具-插座-空调-人体感应-扫地机,这些都分别放在不同的层, 并且附上id
你老婆连拖鞋都画出来了，你拖鞋里面有没有传感器啊？
回头试一试大佬这个，一直想把floorplan用起来，一直懒，谢谢分享。
泛艺大佬 机器人轨迹是实时的？还是只是循环动画？
眼尖啊 很多细节的 不过都没得控制，比如烤箱上画的烤串，地漏的纹理… 我媳妇比较较真 哈哈
据我观察 有的动画会把整体拖卡顿，比如我做了个闪烁，透明度0到100循环，加上ease in out 效果，会把其他动画也弄卡顿…
实时需要扫地机刷机, 我放弃了.
玩Lovelace配置还不能落后太多.
我想把ipad pro上墙的, 没好的方案.
用安卓平板，玩法更多。
怎么刷机 有链接吗
看了大佬们的作品，感觉都不好意思承认我也弄过。
这个话SVG真好用，我要去画我们家的平面图咯，谢谢大佬的推荐和教程。
支持大佬，UI还没开始学！来不及
土豆兄到时候要啥资源可以联系我 话说你QQ是忘记密码了么
UI大佬，膜拜 中。
有个会画图的媳妇真爽！！是真的好爽。。我想到了各种场景、、好邪恶！！
大佬，这个分享下载SVG的功能已经被改掉了，还有招吗？
图片咋都没了呢？