← 返回列表

2026-09-27-2K大屏最终形态-Homepage与Netdata.md

2K 大屏最终形态：Homepage + Netdata + 自用 WebKit kiosk

一、最终架构（为什么是这个组合）

┌─ 自用 WebKitGTK kiosk（cage + kiosk-webkit.py，零 UI 全屏）
│   └─ http://127.0.0.1:3000  Homepage 2.4.0（Docker，配置驱动）
│        ├─ datetime 信息组件  → 东八区大时钟/日期（北京时间）
│        ├─ glances 信息组件   → 宿主机 CPU / 内存 / 磁盘 / 温度 / 运行时长
│        ├─ customapi 卡片     → GPU 利用率·显存·温度·功耗（读本机小 API）
│        ├─ customapi 卡片     → 端口存活 UP/DOWN（读本机小 API）
│        └─ 服务卡片 + siteMonitor → 彩色状态点（ComfyUI/LLM/LM Studio/H3/Netdata）
├─ 本机小 API：homelab-metrics.py（:8787，扁平 JSON 适配层，systemd 托管）
├─ Glances web：glances-web.service（:61208，宿主机指标，systemd 托管）
└─ Netdata 2.11.1（:19999，GPU 13 图 + 端口 18 图 + 温度，做深度下钻与历史）

为什么不用单一工具：没有哪个成熟项目同时覆盖"系统指标 + 端口存活 + 时钟日历"。 MagicMirror 时钟日历最强但系统统计模块停更；Homarr/Dashy 无 GPU；Homepage 指标要靠 glances/customapi 拼。所以采面板层（Homepage）+ 指标源（Glances/自用 API/Netdata）。

二、本次修掉的问题（都踩过）

现象根因修法
时钟显示 UTC（差 8 小时）Homepage 的 datetime 是浏览器端渲染，浏览器进程时区=系统时区=UTCtimedatectl set-timezone Asia/Shanghai（系统级）
Homepage 页面完全没样式qutebrowser 的 Qt5 WebEngine 太老，扛不住 Next.js 16 的现代 CSS/JS弃用 qutebrowser；改用 epiphany 同款 WebKitGTK 4.1
epiphany 渲染正常但带标题栏/地址栏epiphany 无 kiosk 开关（-a 要 .desktop 文件），cog 不在源里自写 kiosk-webkit.py（十几行：GTK 无装饰窗口 + WebView + 全屏 + 缩放）
python3 -c "from gi.repository import WebKit2" 报 Namespace 不可用缺 GI 绑定apt install gir1.2-webkit2-4.1
中文显示成方块系统无 CJK 字体apt install fonts-noto-cjk
Glances web 起不来：Bottle module not foundUbuntu 的 glances 包不依赖 bottleapt install python3-bottle
每次 pkill -f <模式串> 命令静默不执行模式串出现在自己的命令行里 → 自杀（本次又中了两次）一律 pkill -x <进程名>，或让模式串不与命令行重复
SUDO tee <<EOF 写进去的是密码SUDO() 用管道喂密码，heredoc 被顶掉本地写文件 → scp → install -m

三、大屏上现在能看到什么（实测截图见 screenshots/）

四、日常操作

display-mode kiosk webkit   # 2K 屏放大屏（cage + kiosk-webkit.py + Homepage），当前模式
display-mode console        # 回 btop 文本面板
display-mode status         # 看模式与各服务状态

# 大屏要显示别的东西：改 ~/.kiosk-url 后重启大屏，例如
echo http://127.0.0.1:19999/ > ~/.kiosk-url     # 换成 Netdata
display-mode kiosk webkit                        # 生效

# 改大屏内容：编辑 ~/homepage/config/{settings,widgets,services,custom}.css|yaml
sudo docker restart homepage                     # 配置热加载，但 custom.css 建议重启

五、还能继续做的（按性价比排序）

  1. 填满下半屏：把 DSH 机（192.168.31.76）的服务也加进来 —— 下载中心 8899、相册 8900、 酒馆 8000、DSH Web 3080，都是 siteMonitor: http://192.168.31.76:xxxx 一行搞定。
  2. 天气 + 户外温度：Homepage openmeteo 组件（需经纬度）。
  3. 整月日历：Homepage/MagicMirror 的 calendar 都是 ICS 议程订阅，没有"月历格子"组件； 要月历得在自定义页里补一个纯 JS 月历（约 20 行）。
  4. 要更"大屏感"：换 Grafana（社区看板 1860 + 12239）+ clock/calendar 插件，图表最强但组件最多。

六、文件与脚本（本目录 scripts/）

文件作用
homelab-metrics.py + homelab-metrics.service:8787 扁平 JSON 适配层（GPU/CPU/内存/磁盘/温度/端口）
glances-web.service:61208 宿主机 Glances API（Homepage glances 组件的数据源）
kiosk-webkit.py自用 WebKitGTK 全屏 kiosk 浏览器
netdata-kiosk.sh大屏启动器（cage + 浏览器，支持 URL/刷新/缩放）
homepage-settings.yaml / homepage-widgets.yaml / homepage-services.yaml / homepage-custom.cssHomepage 配置
deploy-homepage.sh / deploy-polish.sh / pull-homepage.sh部署脚本（含镜像源回退）
display-mode.shkiosk / console 一键切换

七、补：环形/柱状/折线图 —— 社区的标准配法（2026-09-27 追加）

结论：Homepage 的图表不是靠 resources，而是靠 type: glances 的 metric: 参数（官方文档 docs/widgets/services/glances.md）。它支持这些 metric，全部渲染为面积/折线图（另可 chart: false 切成无图紧凑视图）：

metric 写法内容
cpuCPU 使用率折线
memory内存使用折线（Used/Free/Total）
sensor:Package id 0指定温度传感器折线（含 Warn/Crit 阈值线）
network:enp2s0网卡 RX/TX 折线
disk:<盘符>磁盘 I/O 折线
fs:/挂载点用量（进度条）
gpu:0GPU 使用（本机 Glances 的 gpu 插件取不到 NVML 数据，返回 []，故 GPU 趋势走 Netdata）
processCPU 占用 Top5 进程

可直接抄的配置（config/services.yaml，这些条目不需要 href/icon/description）：

- 图表监控:
    - CPU 使用率:
        widget:
          type: glances
          url: http://127.0.0.1:61208
          metric: cpu
          pointsLimit: 20
          refreshInterval: 2000
    - CPU 温度:
        widget:
          type: glances
          url: http://127.0.0.1:61208
          metric: "sensor:Package id 0"

实测效果见 screenshots/2026-09-27-2K大屏-图表监控.png：CPU/内存/CPU温度/网络/磁盘 五张面积图 + Top5 进程，配上面的大时钟与 Glances 概览，整屏填满。

环形图（真正的圆环 gauge）怎么办

下载此文件