在使用 Home Assistant 自动化了灯光、气候和喷洒系统后,Anton Frolov 发现他的家庭很少打开伴随应用或面板,导致智能家居功能闲置。为了让界面对每个人都友好,他决定委托定制艺术品来描绘他们的房屋,而不是依赖通用的 UI 面板。他通过推荐找到了插画师 Owen Yeconiel,并提供了一个包含建筑平面图、房间照片、风格参考、示例面板以及详细说明所需文件格式、图层和动画需求的简短技术规范的资料包。
插画师 Owen Yeconiel 制作了一组 PNG 和 WebP 图像:每层楼和花园作为独立图层,具有时白和时黑版本,单独的设备使用静态图像表示关闭状态,使用短动画循环表示开启状态。所有资源共享相同的画布尺寸和对齐方式,使其可以精确放置在 Home Assistant 的 picture‑elements 卡片中,其中插图作为背景,设备图像和状态标签位于顶层,通过 state_image 属性进行切换。一个辅助脚本和自动化在日落和日出时在日间和夜间模式之间切换,条件元素仅在需要时显示夜间图层。对于如花园灌溉等没有原生弹出窗口的设备,Frolov 使用 Browser Mod 集成启动自定义对话框,保持整体 UI 的简洁。

此图像是 Owen Yeconiel 为 Anton Frolov 的 Home Assistant 面板创作的一套插图的一部分,描绘了房屋的一层楼,作为 picture-elements 卡片的图层。

此图像展示了所有楼层和花园的组合图层,已对齐到共同画布,以便在 Home Assistant 的 picture-elements 卡片中使用。

此动画代表插画师创建的设备状态之一,其中短循环表示灯或开关等设备的‘开’状态。
为了持续显示面板,Frolov 安装了 HAOS Kiosk Display 插件,该插件将页面路由到他的 LG webOS 电视的 HDMI 输入,绕过了浏览器无法将网页设置为屏保或默认页面的限制。虽然电视遥控器无法通过 HDMI 与面板交互,但家庭成员在需要调整设置时会使用 Home Assistant 移动应用或浏览器书签,面板在早晨和晚上按照计划运行,提供“一屏管全家”的体验,现在全家都享受这一点。单独的楼层视图在手机上表现良好,而合并视图则受益于笔记本电脑尺寸的屏幕,插画师的贡献直接写在面板的页脚中。