我构建了一个简易的智能家居仪表板,因为 Home Assistant 的 UI 让我想哭

发布: (2026年2月16日 GMT+8 21:30)
5 分钟阅读
原文: Dev.to

Source: Dev.to

The breaking point

我爱 Home Assistant。真的爱。它功能强大、可无限自定义,社区也很棒。

但我们能聊聊仪表盘的现状吗?

我只想要一个挂在墙上的平板,显示我的家庭温度和灯光状态。仅此而已。结果,我整个周末都在与 YAML、定制卡片、card-mod CSS 覆盖以及每次打喷嚏都会崩溃的 Lovelace 布局搏斗。

凌晨 2 点左右,我盯着仍然显示不正常的平板仪表盘,心想:“我是一名网页开发者。我可以用比配置它更少的时间,直接构建我想要的东西。”

于是,我动手了。

Meet HomeDash

🌐 Live Demo · 📦 GitHub

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 打造。

0 浏览
Back to Blog

相关文章

阅读更多 »

n8n 是纯粹的精彩

!Miguel Valdeshttps://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2...