我请插画师画了自己的房子,现在它成了我的 Home Assistant 仪表盘

查看原文 HN 讨论

文章摘要

Anton Frolov 在 Substack 上记录了他怎样把一幅手绘的自家房屋插画做成 Home Assistant 仪表盘。画面里壁炉会跳动火光,花园灯会亮起,卧室空调在吹风,和真实房子的设备状态同步。他说这是全家人第一次真正爱用的智能家居界面。

起因。 作者用 Home Assistant 自动化家里已经一年左右,大部分事情都已经自动运转:全家出门后空调全关;花园洒水器按天气算浇水时长,天热多浇,下雨就跳过。但有些事情还得人来操作,最典型的是花园灯:它只能在厂商应用或 Home Assistant 里打开,作者还设了一个定时器,到时自动关灯,快到时间时灯会闪烁,提醒大家去应用里延长。问题是,除了他没人愿意用 Home Assistant 的应用和原来的仪表盘。装物理开关解决不了定时器的问题,有些设备也确实更适合用应用控制,比如洒水器,总不能按下机器上的按钮再赶在被淋湿之前跑出花园。于是他想做一个酷到全家都想用的仪表盘。

找画师。 他看了很多「户型图仪表盘」,大多是 3D 的,但通常只是一张静态底图上叠一层图标;像素风很可爱,可要么自己画,要么在编辑器里一个个摆素材。他本想找像素画师,后来发现找到一位合适的画师并不容易:画师各有专长和风格,热门的要排几个月的档期,而且仪表盘这种委托比较特殊,画师得明白技术上需要什么。最后经人推荐,他找到一位擅长描绘室内空间的环境插画师,风格也更合他的心意,像素风的想法就自然放弃了。

给画师的资料包。 包括一张简单的房屋建筑平面图(他自己标上了家具位置)、各房间照片、风格和配色参考图、其他仪表盘的例子、一份简短的技术说明,以及上次装修用的油漆色号。技术要求是全文的关键:要带透明通道的 PNG(动画用 WebP);每层楼都要白天和夜晚两个版本;每个设备单独一层,「关」状态是一张静态图,「开」状态是一小段循环帧(8 帧就够了),白天夜晚各一套;最重要的一条是,所有文件都要导出在同一尺寸的共享画布上,每个元素放在它在房子里的实际位置,不要各自裁剪。作者说这一条能省下好几天的对齐工作,是他吃过亏才学到的。花园最后做了白天、夜晚、夜晚开灯三个版本;动画他原本要的是 PNG 精灵图,后来自己转成了动画 WebP,所以建议一开始就直接跟画师要 WebP。他认为找画师、想清楚需求、准备资料才是这个项目的主体,因为插画就是项目本身,界面只剩几个图标和传感器读数,没什么需要再设计或写代码的。

技术实现。 核心是 Home Assistant 自带的 picture-elements 卡片:插画做背景,设备和状态读数作为元素叠在上面。设备用 image 元素的 state_image,空调关着时显示静态图,打开(制冷、制热、除湿等模式)时换成动画 WebP,浏览器会自己播放动画,不需要写代码。昼夜切换靠一个辅助开关加自动化,日落日出时自动翻转,夜景图和各设备的夜间版本用 conditional 条件元素叠在白天版本上面。点击设备弹出 Home Assistant 自带的控制对话框(more-info);灌溉系统由好几个阀门和定时器组成,没有现成的对话框,他就用 HACS 上的 Browser Mod 自己做了一个弹窗。图片放在 Home Assistant 主机的 /config/www 目录下,用 /local/ 路径引用。

搬上电视。 他一开始就想让仪表盘显示在电视上。网上说 LG webOS 的浏览器不支持 WebP,他测试一张图就证明不是这样,这个说法大概来自电视自带的相册应用。真正的问题是 webOS 不能把网页设为屏保或浏览器默认主页,每次都得用遥控器点好几下。最后他绕开电视系统,在 Home Assistant 主机上装了 HAOS Kiosk Display 插件,直接用 HDMI 接到电视上,仪表盘就成了电视的一个固定输入源。

全屋视图。 每层楼和花园各有一个视图,另外有一个「全屋」视图把所有部分拼在一起。因为所有素材都在同一张大画布上,各部分放回原位就能自动对齐:花园垫在房子下面,二楼稍微抬高,做出一点「爆炸图」的效果,两层楼都能看到。为了不在楼层视图和全屋视图里重复配置设备,他把仪表盘改成 YAML 模式,每层楼的元素放在单独的文件里,两个视图都引用它,改一处就全部生效,代价是失去了可视化编辑器。picture-elements 卡片里不能嵌套其他卡片,所以全屋视图用 vertical-stack 把各楼层卡片叠起来,再用 card-mod 插件写 CSS 调整位置。

效果。 第一次在电视上打开时,全家都很兴奋,拿插画和真实房间对比,开关设备看画面有什么反应。现在电视每天早晚按计划自动切到仪表盘几小时(前提是没人在看节目),他还用 Kiosk Mode 把 Home Assistant 的菜单藏了起来。唯一遗憾的是电视遥控器没法通过 HDMI 操作仪表盘,所以电视上只能看不能点。没想到这反而让家人主动在手机上装了 Home Assistant 应用、在电脑上收藏了仪表盘,好随时操作。插画作者是 Owen Yeconiel,署名在文末。

HN 评论精华

这篇文章得了 900 多分。评论除了称赞之外,主要围绕三个话题:该不该雇人画(还是用 AI)、普通人花不花得起这笔钱、智能家居到底有没有用。

插画师和 AI 之争

花不花得起

智能家居到底有没有用