我构建了一个简易的智能家居仪表板,因为 Home Assistant 的 UI 让我想哭
Source: Dev.to
The breaking point
我爱 Home Assistant。真的爱。它功能强大、可无限自定义,社区也很棒。
但我们能聊聊仪表盘的现状吗?
我只想要一个挂在墙上的平板,显示我的家庭温度和灯光状态。仅此而已。结果,我整个周末都在与 YAML、定制卡片、card-mod CSS 覆盖以及每次打喷嚏都会崩溃的 Lovelace 布局搏斗。
凌晨 2 点左右,我盯着仍然显示不正常的平板仪表盘,心想:“我是一名网页开发者。我可以用比配置它更少的时间,直接构建我想要的东西。”
于是,我动手了。
Meet HomeDash
HomeDash 是一个一目了然的智能家居仪表盘。大数字、简洁设计、零杂乱。它正是我希望 HA 的仪表盘开箱即用的样子。
Features
- 🌡️ 传感器小部件 – 温度、湿度、灯光、运动。大号可读数字,适合远距离快速查看。
- 🏡 基于房间的布局 – 客厅、卧室、厨房。按照你对家的认知进行组织。
- 📊 24 小时火花线图 – 小型内嵌图表显示温度趋势。无需配置,直接可用。
- 🌗 暗色 & 亮色主题 – 自动切换或手动切换。昼夜皆美观。
- 📱 完全响应式 – 手机、平板、桌面、墙面显示器。随处可用。
- 🔗 Home Assistant 集成 – 通过 HA URL + 长期访问令牌连接,或完全不使用 HA,手动添加小部件。
The part I’m most proud of
零依赖。总共约 30 KB。
没有 React。没有 Vue。没有构建步骤。没有占据小国家大小的 node_modules 文件夹。
只有三个文件:
index.html
style.css
app.js
在浏览器中打开 index.html,整个部署即完成。
我并不是反框架——我在工作中每天都在使用它们。但对于需要在廉价平板上瞬间加载并且一直显示数据的仪表盘来说,原生 JS 更合适。
How it works
该应用使用长期访问令牌连接 Home Assistant 的 REST API。它轮询你的实体,根据房间(使用 HA 的区域分配)进行分组,并将其渲染为简洁的小部件卡片。
火花线图使用纯代码绘制——大约 40 行代码。它们将 24 小时的读数存入 localStorage 并绘制一条简单的折线。无需图表库。
如果你不使用 Home Assistant,也可以在设置面板中手动配置小部件。所有数据都存储在 localStorage 中,实际上没有服务器组件。
Who is this for?
- 你使用 Home Assistant,但想要一个 更简洁的墙面平板仪表盘。
- 你想要 快速概览 家庭状态,而不必打开 HA 应用。
- 你厌倦了与 Lovelace 斗争,只想要一个 默认就好看的 方案。
- 你是开发者,欣赏 只需三文件即可交付 的美感。
Try it / steal it / improve it
它是完全开源的。Fork、改造、让它成为你的专属。
我真诚期待你的反馈——缺少了什么?什么功能能让它更适合你的使用场景?在评论区留言或在 GitHub 上打开 issue。
用挫败感、咖啡因和原生 JavaScript 打造。