周末折腾记-用树莓派搭了一个家庭仪表盘

2026-09-17 · 生活 · 返回列表

title: "周末折腾记：用树莓派搭了一个家庭仪表盘" date: 2026-09-08 tags: [树莓派, DIY, 智能家居, 硬件] category: 动手折腾 description: "一个周末的成果：旧树莓派 3B + 二手屏幕，做了一个显示天气、日程和待办的桌面小仪表盘。"

周末折腾记：用树莓派搭了一个家庭仪表盘

翻出来一个吃灰两年的树莓派 3B，配了一个闲鱼上 45 块收的 7 寸触摸屏。

一个周末，做了一个桌面仪表盘。

要解决的问题

每天早上出门前，我要查三样东西：

今天天气怎么样（要不要带伞）
今天有什么会（几点、在哪）
今天最重要的三件事是什么

以前是分别打开三个 App。现在抬头看一眼仪表盘就行。

硬件清单

| 物料 | 来源 | 价格 | |------|------|------| | 树莓派 3B | 抽屉里翻出来的 | ¥0 | | 7 寸触摸屏 | 闲鱼 | ¥45 | | 外壳 + 支架 | 淘宝 | ¥25 | | 电源 + SD 卡 | 已有 | ¥0 |

总成本：¥70。

软件方案

不想搞太复杂。前端一个静态页面，全屏 kiosk 模式显示，数据通过 API 拉取。

数据源

天气： 和风天气 API（免费额度够用）
日程： CalDAV 接口，从 Nextcloud 拉取
待办： 自己写的一个极简 Todo API，数据存在 SQLite 里

前端

一个单页 HTML，用 vanilla JS 定时刷新数据。没有框架，没有构建工具，就是一个 .html 文件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      font-family: -apple-system, sans-serif;
      background: #1a1a2e;
      color: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .card {
      background: #16213e;
      border-radius: 12px;
      padding: 24px;
      margin: 12px;
      min-width: 200px;
    }
    .temp { font-size: 3em; font-weight: bold; }
    .time { font-size: 4em; text-align: center; }
  </style>
</head>
<body>
  <div class="card">
    <div class="time" id="clock"></div>
  </div>
  <div class="card">
    <h2>🌤 今日天气</h2>
    <div class="temp" id="weather">--°</div>
    <div id="weather-desc">加载中...</div>
  </div>
  <div class="card">
    <h2>📋 今日待办</h2>
    <ul id="todos"></ul>
  </div>
  <script>
    // 时钟
    setInterval(() => {
      document.getElementById('clock').textContent =
        new Date().toLocaleTimeString('zh-CN', {hour:'2-digit', minute:'2-digit'});
    }, 1000);

    // 天气和待办每 10 分钟刷新
    async function refresh() {
      const w = await fetch('/api/weather').then(r => r.json());
      document.getElementById('weather').textContent = w.temp + '°';
      document.getElementById('weather-desc').textContent = w.desc;

      const todos = await fetch('/api/todos').then(r => r.json());
      document.getElementById('todos').innerHTML =
        todos.map(t => `<li>${t.text}</li>`).join('');
    }
    refresh();
    setInterval(refresh, 600000);
  </script>
</body>
</html>

启动方式

树莓派启动后自动全屏打开 Chromium，指向本地服务：

# /etc/xdg/autostart/dashboard.desktop
[Desktop Entry]
Type=Application
Name=Dashboard
Exec=chromium-browser --kiosk --noerrdialogs http://localhost:8080

踩的坑

树莓派 3B 的 WiFi 模块很烂 — 经常断连。后来换了 USB WiFi 适配器解决了。
屏幕旋转 — 二手屏默认是竖屏，要改 /boot/config.txt 里的 display_rotate。
Chromium 内存泄漏 — 跑一周左右会 OOM。写了个 cron 每天凌晨 4 点重启 Chromium。

成果

放在书桌上，早上起来看一眼就知道今天大概什么情况。

不酷，不智能，不是「智能家居」。但确实省了我每天三分钟。

有时候最好的工具就是最简单的工具。

下一步打算加一个「PM2.5」的卡片。[[树莓派常用命令备忘]] 里有更多树莓派折腾记录。