Home Assistant 手绘风格仪表盘搭建指南：从委托插画师到配置
I hired an illustrator to draw my house. Now it's my Home Assistant dashboard
给 Home Assistant 玩家的一份硬核实操指南，不仅给出了完整的 YAML 配置示例，还详细拆解了如何向插画师提需求的技术规范，直接解决 UI 定制中的常见坑点，值得收藏参考。
I hired an illustrator to draw my house. Now it's my Home Assistant dashboard.
我雇了一位插画师来画我的房子。现在它成了我的 Home Assistant 仪表盘。
A flickering fireplace, a softly lit garden, and a smart home the whole family finally enjoys.
闪烁的壁炉、柔和照明的花园，以及一个全家终于能享受到的智能家居。
Anton Frolov
Oct 05, 2026
2026年10月5日
35
Share
分享
The fireplace flickers, the garden lights glow, and the air conditioner in the bedroom is quietly blowing — not only in my house, but in a hand-drawn picture of it. This is my Home Assistant dashboard, and for the first time, it’s one the whole family actually enjoys using.
壁炉在闪烁，花园灯光在发光，卧室里的空调正在安静地吹着风——这不仅是在我的房子里，也是在一幅手绘图画中。这是我的 Home Assistant 仪表盘，而且这是第一次，整个家庭都真正喜欢使用它。
For the last year I’ve been automating my home with Home Assistant, the open-source smart home platform. I tried to automate as much as possible, so things just work without anyone touching them. When everyone leaves, all the air conditioners switch off. The garden sprinkler calculates its run time from the weather: longer on hot days, skipped entirely when it rains.
在过去的一年里，我一直在用 Home Assistant（开源智能家居平台）对我的家进行自动化改造。我尽量实现尽可能多的自动化，让一切无需任何人操作就能正常运行。当所有人都离开时，所有空调都会自动关闭。花园洒水器的运行时间会根据天气计算：炎热日子延长，下雨天则完全跳过。
Thanks for reading! Subscribe for free to receive new posts and support my work.
感谢阅读！免费订阅以接收新文章并支持我的工作。
Subscribe
订阅
But some things still need a human. The garden lights are the best example. They can only be turned on from an app, either the manufacturer’s or Home Assistant’s. And I made it worse myself: a timer in Home Assistant turns garden lights off automatically after a while. When it’s about to run out, the lights start blinking, giving you time to open the app and extend it while they’re still on. The problem? Nobody else in the household wanted to use the Home Assistant app, or the dashboard I had at the time.
但有些事情仍然需要人工干预。花园灯就是最好的例子。它们只能通过应用程序开启，无论是制造商的应用程序还是 Home Assistant 的应用程序。我自己还让情况变得更糟：Home Assistant 中的一个定时器会在一段时间后自动关闭花园灯。当定时器即将耗尽时，灯光开始闪烁，给你留出时间打开应用程序并在灯光仍亮着的时候延长计时。问题在于？家里其他人都不愿意使用 Home Assistant 应用程序，或者我当时拥有的那个仪表盘。
Original dashboard
原始仪表盘
I could have installed a physical switch, but that wouldn’t solve the timer. And some devices are simply easier to control from an app. Try starting the sprinkler with the button on the unit itself, then running out of the garden before you get soaked.
我可以安装一个物理开关，但这并不能解决定时器的问题。而且有些设备通过应用程序控制确实更方便。试试用设备本身的按钮启动洒水器，然后在你被淋湿之前跑出花园。
So I thought: why not build a dashboard so cool that everyone would want to use it?
于是我想：为什么不做一个酷到每个人都想用的仪表盘呢？
I looked through a lot of dashboards and fell for the idea of a floor plan: an interactive map of the house that mirrors the real one. Most of the ones I found were 3D, built either with Home Assistant custom cards or in third-party modelling software, and I found one article about a pixel-art floor plan.
我浏览了许多仪表盘，并对平面图的想法产生了兴趣：一个与现实房屋镜像对应的交互式房屋地图。我发现的大多数都是 3D 的，要么是用 Home Assistant 自定义卡片构建的，要么是在第三方建模软件中制作的，我还找到了一篇关于像素艺术平面图的文章。
3D and pixel-art floor plan styles (illustrations generated for this article)
3D 和像素艺术平面图风格（为本篇文章生成的插图）
The 3D plans didn’t quite click for me. In most of the ones I saw, the model itself was a static picture, and everything interactive was a layer of icons on top of it.1 The pixel-art approach was charming, but it meant either drawing everything yourself or placing library sprites one by one in a graphical editor.
3D 平面图并没有完全打动我。在我看到的大多数方案中，模型本身是一张静态图片，所有交互功能都是叠加在其上的一层图标。[1] 像素艺术的方法虽然迷人，但它意味着要么自己绘制所有内容，要么在图形编辑器中逐个放置库中的精灵图。
Finding an artist
寻找艺术家
I liked the pixel-art idea enough to go looking for an artist, and soon realised that finding and booking a good one is harder than it sounds. Artists specialise, and each has a style of their own. Popular artists are easier to find, but likely they are already booked for months in advance and even if they are free, artwork itself is going to take anything from few weeks to few months. On top of that, a dashboard is an unusual commission: the artist has to understand what it is and what it needs technically, not just paint a nice picture.
我对像素艺术的想法足够感兴趣，于是开始寻找一位艺术家，并很快意识到，找到并聘请一位优秀的艺术家比听起来要难得多。艺术家们各有专长，且拥有独特的风格。知名艺术家虽然容易找到，但他们通常早在几个月前就被预订了；即使有空档，创作作品本身也需要数周到数月的时间。此外，仪表盘（dashboard）是一种不寻常的委托：艺术家必须理解其技术需求，而不仅仅是画出一张漂亮的图片。
Luckily, I was recommended an amazing environment artist whose portfolio was already full of beautifully illustrated spaces. I loved their style, and after a few messages back and forth I was sure we were on the same page about the end goal. The pixel-art idea died a natural death: I’d found someone whose style appealed to me even more, and who already knew how to draw a room.
幸运的是，有人推荐了一位出色的环境艺术家，其作品集里已经充满了精美绘制的空间场景。我非常喜欢他们的风格，经过几次来回沟通后，我确信我们对最终目标达成了共识。像素艺术的想法自然消亡了：我找到了一位风格更吸引我的艺术家，而且他们已经知道如何绘制房间。
To get us started, I put together a package for the artist:
为了启动项目，我为这位艺术家准备了一份资料包：
- A simple architectural plan of the house. It had no furniture on it, so I marked that in myself.
- Photos of the rooms, as a reference for what’s really there.
- Illustrations I found online, as references for style and colour.
- Examples of other dashboards, so the artist could see what the end result was for.
- A short technical spec: the requirements, which files and formats I needed back, and a note on each of the resources above explaining what it was for.
- Paint colour codes from our last renovation. Nice to have rather than essential, since colours can be matched from the photos.
- 房屋的建筑平面图。图上没有家具，所以我自行标注了这一点。
- 房间的照片，作为实际存在的参考。
- 我在网上找到的插图，作为风格和色彩的参考。
- 其他仪表盘的示例，以便艺术家了解最终成果的样子。
- 简短的技术规范：列出了要求、我需要返回的文件和格式，以及对上述每项资源的说明，解释其用途。
- 上次装修时的油漆色号。这属于锦上添花而非必需，因为颜色可以从照片中匹配。
I want to say a bit more about the technical part of the brief, because the rest of the article builds on it. Ask for PNGs with transparency (WebP for animations), a day and a night version of every floor, and every device on its own layer: a still image for “off” and a short loop of frames for “on” (eight was plenty), in both day and night lighting. Most importantly, every file should be exported on one shared canvas of the same size, with each piece sitting exactly where it belongs in the house rather than cropped to itself. That one rule saves days of lining things up later, which I learned the hard way.
我想再多谈谈简报中的技术部分，因为文章的其余内容都基于此。要求提供带透明度的 PNG 文件（动画使用 WebP），每个楼层都要有白天和夜晚两个版本，每个设备单独分层：“关闭”状态为静态图像，“开启”状态为短循环帧序列（八个帧就足够了），并且都要在白天和夜晚两种光照下呈现。最重要的是，所有文件都应导出到同一个相同尺寸的共享画布上，每个元素都精确放置在房屋中对应的位置，而不是各自裁剪。这一条规则能省去日后对齐的大量时间，这是我吃过大亏后才明白的。
A couple of notes from my own build. For the garden I ended up with three versions: day, night, and night with the lights on. And I originally asked for the animations as PNG sprite sheets, but ended up converting the frames to animated WebP myself, so you might as well ask the artist for WebP from the start.
分享一些我自行构建时的注意事项。对于花园场景，我最终做了三个版本：白天、夜晚，以及开灯后的夜晚。起初我要求艺术家以 PNG 精灵图（sprite sheets）格式提供动画，但后来我自己将帧转换成了动态 WebP，所以不如一开始就请艺术家直接提供 WebP 格式。
Finding an artist, working out what the dashboard needed and preparing all the documentation was probably the bulk of the work on this project. That makes total sense, because the artwork is the project! When the dashboard is an illustration, with states shown as animations and the UI reduced to a few icons and sensor readings, there simply isn’t much left to design or code.
寻找合适的艺术家、明确仪表盘所需内容并准备所有文档，大概构成了该项目的大部分工作量。这完全合理，因为艺术创作才是项目的核心！当仪表盘表现为插画形式，状态通过动画展示，UI 简化为少量图标和传感器读数时，确实没剩下多少需要设计或编码的内容了。
How it works
工作原理
Once the illustration is ready, it’s time to put it to work. Fortunately, Home Assistant makes this fairly easy: under the hood, it’s one stock card and a couple of tricks.
插画准备好后，就该让它发挥作用了。幸运的是，Home Assistant 让这一过程相当简单：底层只需一个标准卡片加上一些小技巧。
The card is picture-elements. The illustration is its background (image:), and everything that changes, the devices and the status readouts, is placed on top of it as elements:, each at its own position. Of the element types it supports, I mostly used image for the devices, icon and state-label for the status readouts, and conditional to show or hide elements depending on state.
使用的卡片是 picture-elements。插画作为其背景（image:），所有会变化的元素，如设备和状态读数，都作为 elements: 叠加在上面，各自定位。在支持的元素类型中，我主要用 image 表示设备，用 icon 和 state-label 显示状态读数，并用 conditional 根据状态显示或隐藏元素。
The first trick is how a device comes alive. An image element can change its picture with the device’s state (state_image): while the AC is off it shows a still frame, and when it’s on, the animated WebP. The browser simply plays the animation, so no custom code is involved.
第一个小技巧是让设备“活”起来。图像元素可以根据设备状态更改图片（state_image）：空调关闭时显示静态帧，开启时则播放动态 WebP。浏览器直接播放动画，无需自定义代码。
type: picture-elements
image: /local/floorplan/ground/ground_day.webp
elements:
- type: conditional
conditions:
- entity: input_boolean.dashboard_night
state: 'on'
elements:
- type: image
image: /local/floorplan/ground/ground_night.webp
- type: conditional
conditions:
- entity: input_boolean.dashboard_night
state: 'off'
elements:
- type: image
entity: climate.main_room_ac
image: /local/floorplan/ground/ac_living_off.webp
state_image:
cool: /local/floorplan/ground/ac_living_on.webp
heat: /local/floorplan/ground/ac_living_on.webp
heat_cool: /local/floorplan/ground/ac_living_on.webp
auto: /local/floorplan/ground/ac_living_on.webp
dry: /local/floorplan/ground/ac_living_on.webp
fan_only: /local/floorplan/ground/ac_living_on.webp
tap_action:
action: more-infoThe second trick is day and night. I created a helper to switch between day and night modes, and an automation that flips it at sunset and sunrise. It's easy to set up, and being able to flip it by hand is very useful while testing. The night illustration is laid on top of the day one as a conditional element, and each device gets a day and a night version the same way.
第二个小技巧是白天与夜晚的切换。我创建了一个辅助实体来切换白天和夜晚模式，并设置了一项自动化任务，在日落和日出时自动翻转。设置很简单，而在测试期间能够手动翻转也非常有用。夜晚插画作为 conditional 元素叠加在白天的插画之上，每个设备也以相同方式拥有白天和夜晚两个版本。
更进一步：量化金融体系
看懂新闻只是起点——沿量化金融路径，把它变成能交付的工程能力