墨水屏股市信息自动更新展示
·
fifteenbao
周六参加了 OPENElab x seeedstudio 墨水屏创意工作坊，用Hermes生成了一个html网页，用seeed的在线小工具投屏了一下，意外获得了最佳UI设计奖。不做UI了，但获得了UI设计奖，还得了一个 XIAO ESP32-S3 sense，人生充满了惊喜和意外啊。
切换 Hermes
最近我的2核2G服务器的龙虾在上总是跑不动挂掉，就顺手切换到了Hermes，操作丝滑了很多，服务器压力也小了不少。这段时间为了学习股市，在上面配置了一个 TradingView-MCP 帮我获取 美股/A股 数据，还补充了一个 daily_stock_analysis 完善A股数据，每天上午会根据前一天的股票数据，推送三个值得关注的股市。
数据来源
为了让信息在墨水屏上更容易扫读，页面按“状态 → 行情 → 操作 → 持仓”的顺序组织内容：
| 模块 | 主要内容 | 展示规则 |
|---|---|---|
| 顶栏 | 页面标题、市场状态 | 开市市场排在前面；美股开市使用橘黄色，A 股休市使用黑色，并显示下次开市时间 |
| 指数条 | 最多 6 个市场指数 | 当前开市市场优先展示；市场名称沿用橘黄色 / 黑色区分 |
| 推荐卡 | 当前开市市场的候选股票 | 每小时刷新；美股以代码开头，A 股以中文名称开头；第二行显示技术标签和现价 |
| 日 K · 操作图 | 重点关注的股票 | 按飞书《股票池》中勾选的“重点关注”标记轮播；每 15 分钟切换一只，展示 40 根日 K、MA5、MA20、成本虚线和三行读数 |
| 持仓盈亏 | 收益率、大额盈亏、市值、成本、今日盈亏、已实现盈亏 | 按币种分别汇总 |
| 持仓明细 | 名称、代码、市值、盈亏、股数、成本 | 休市市场的标的增加“昨”标记，数字不使用涨跌颜色 |
| 底部 | 图例、数据源、更新时间 | 左侧展示“▲涨 / ▼跌”和数据源，右侧展示更新时间 |
工作坊的作品
基于已有的数据信息，叫 Hermes 根据 taiwind CSS 设计框架设计了股市信息以及盈利情况，把html用seeed官方工具映射出来。墨水屏用的是 seeed 的 7.5inch 4阶灰度屏。
得这个奖多少有投机取巧的成分，相当于找了个外包…… 奖品里面有个带摄像头的 ESP32 S3，准备参考 reframe 把它接个墨水屏改造成拍立得。可能未来真正值钱的是想法，基础设施搭建几句话就完成了……
后续的迭代
回来之后用 5.65inch 600x448 7色墨水屏改造了一下，在服务器加了一个渲染功能，把整页渲染成设备可直接写屏的 4bpp 原始帧(134400 字节),设备只做「拉帧 → 写屏」,零渲染、零解码。 每15分钟自动更新数据。
迭代版布局
| 区域 | 内容 | 更新 / 交互 |
|---|---|---|
| 顶栏 | 标题、市场状态 | 开市市场优先；显示休市日期和下次开市时间 |
| 指数条 | 6 个市场指数 | 当前开市市场优先；用橘黄色 / 黑色区分状态 |
| 推荐卡 | 当前开市市场的候选股票 | 每小时刷新；展示名称、代码、技术标签和现价 |
| 日 K · 操作图 | 重点关注的股票 | 每 15 分钟轮播；展示 40 根日 K、MA5、MA20、成本线和读数 |
| 持仓盈亏 | 收益率、盈亏、市值、成本和已实现盈亏 | 按币种汇总 |
| 持仓明细 | 每只股票的名称、代码、市值、盈亏、股数和成本 | 休市标的标记“昨”，数字保持黑色 |
| 底部 | 涨跌图例、数据源和更新时间 | 固定在页面底部，方便快速确认数据是否新鲜 |
数据库的维护
用飞书表格作为交易数据管理，每天自动拉取更新。由于涉及到持仓的敏感信息，页面公开访问,但持仓明细需要密钥(?k=)
最终效果展示
