5.9 KiB
5.9 KiB
界面 01：主界面（根页）— 规格说明
配套样机：
01_主界面.html（仅渲染页面本身）。本文件为设计规格（source of truth）：布局参数、字符集核对、待确认问题、映射、LVGL 翻译要点。 规则：160×160 设备像素 | 1bpp 纯黑白 | SimSun 12px（汉字 12px/字，ASCII 6px/字，行高 13） 布局依据：原图01_主界面原始图片.png（628×631 @ 3.925x 缩放）实测 + 渲染目视比对。
一、布局参数（单位：设备像素）
| 项 | 值 | 说明 |
|---|---|---|
| 顶部装饰 | 开口浅 V，两腿 3px / 水平线 2px | 左尖 (7,7)、底左 (16,17)、底右 (145,17)、右尖 (158,7)；底边 y=17，两腿外上翘至 y=7。实现拆 3 段 lv_line：两腿加粗（MENU_DECO_LEG_W=3）补偿 1bpp 斜线边缘阈值损耗，水平线保持 2px（MENU_DECO_HORIZ_W） |
| 状态行 | 左对齐 x=17，顶 y=20 | 行高 13，文案"当前模式 ： 无模式"（全角冒号，两侧半角空格） |
| 列表框 | x=0，顶 y=44，宽 99，高 107 | 左对齐（非通栏），1px 白边框，内 7 行 × 15px（7×15+2 边框=107） |
| 行高 | 15 | 7 行 |
| 行内文字 | 左对齐，左留白 8 | 4 字 = 48px（x 8~56） |
| 箭头 ▶ | x=58（紧跟文字） | 非右对齐；仅第 2~7 行有 |
| 选中行 | 第 1 行整行反色 | 白底黑字，无箭头，白色高亮铺满框宽 |
二、行内容与状态
| 行 | 文本 | 箭头 | 状态 |
|---|---|---|---|
| 1 | 装置信息 | 无 | 选中（整行反色：白底黑字） |
| 2 | 实时数据 | ▶（紧跟文字） | 普通（黑底白字） |
| 3 | 参数定值 | ▶（紧跟文字） | 普通 |
| 4 | 三遥设置 | ▶（紧跟文字） | 普通 |
| 5 | 装置维护 | ▶（紧跟文字） | 普通 |
| 6 | 通讯参数 | ▶（紧跟文字） | 普通 |
| 7 | 记录查询 | ▶（紧跟文字） | 普通 |
说明：选中行（第 1 行）无 ▶ 箭头；其余行 ▶ 紧跟在 4 字文本后（非右对齐）。行内文字左对齐、左留白 8px。
三、字符集核对（对照现有 ui_font_cn_12：78 汉字 + ASCII 0x20~0x7E）
- 菜单 7 项共 22 个唯一汉字：命中 21（装 置 信 息 实 时 数 据 参 定 值 遥 设 维 护 通 讯 记 录 查 询），新增 1（三）。
- 状态行"当前模式 ： 无模式"：新增 5（当 前 模 式 无） + 全角冒号 ：（U+FF1A，新增）；空格为 ASCII（已在字库）。
- 箭头：▶（U+25B6，新增符号）。
→ 确定新增 8 个字形：三 当 前 模 式 无 ： ▶。
写 LVGL 代码前必须重新生成字体，否则新增字在真机显示为空白。流程：代码落库 → python tools/font_gen/extract_cn.py（自动从 UI 源码字符串提取）→ python tools/font_gen/make_font.py → 两端（MCU/模拟器）同时生效。
四、待确认问题
设计形态（框宽/选中态/装饰形状/冒号）已按原图定形（见第一、二节），不再待确认。以下为内容/数据问题，需用户答复。
| # | 问题 | 说明 |
|---|---|---|
| Q1 | 7 个条目 ↔ 子树映射（见第五节表）是否成立？ | 其中 3 项疑似重命名（参数定值/三遥设置/通讯参数），需逐项确认 |
| Q2 | "三遥设置"对应现有哪个节点？ | 现有 g_menu_tab 有"遥测量"（测量值/遥调系数/遥测系数/双字节/装置遥调）；"三遥"是否 = 遥测+遥信+遥控 的新节点？ |
| Q3 | "厂家设置 / 版本信息"入口在哪？ | 旧菜单中"厂家设置"为独立顶级项（含元件设置/恢复默认/版本显示/版本信息），新 7 项列表未包含——从哪进入？ |
| Q4 | "当前模式"指什么、数据从哪来？ | 状态行动态值来源（运行/保护/通信模式？）；"无模式"为默认？需 App 层供给字符串 |
五、条目 → 子树 建议映射（Q1，均待确认；对照现有 g_menu_tab）
| # | 条目 | 现有节点 | 建议映射 |
|---|---|---|---|
| 1 | 装置信息 | 装置信息（L1） | 直接沿用（无变化） |
| 2 | 实时数据 | 实时数据（L1）→ 交流量/直流量/开入量 | 直接沿用（无变化） |
| 3 | 参数定值 | 定值参数（L1）→ 定值/查看 | 重命名 定值参数 → 参数定值？（待确认） |
| 4 | 三遥设置 | 遥测量（L1）→ 测量值/遥调系数/… | 对应"遥测量"？或新增"三遥"（遥测/遥信/遥控）节点？（Q2） |
| 5 | 装置维护 | 装置维护（L1）→ 时间设置/强制复归/手动录波/自动录波 | 直接沿用（无变化） |
| 6 | 通讯参数 | 通讯设置（L1）→ 通讯参数/网络配置/SNTP设置 | 重命名 通讯设置 → 通讯参数？或提升 L2"通讯参数"？（待确认） |
| 7 | 记录查询 | 记录查询（L1）→ SOE/事故/操作/告警/… | 直接沿用（无变化） |
注：旧菜单中的"厂家设置"（L0，含 元件设置/恢复默认/版本显示/版本信息/装置遥调/装置记录）未出现在新 7 项列表中，入口待 Q3 确认。
六、LVGL 翻译要点（阶段 2 用）
- 列表 = 持久容器
lv_obj（x=0, y=44, 99×107，1px 边框）+ 7 个行子lv_obj（高 15，绝对定位lv_obj_set_pos，固定布局更可控） - 行 =
lv_obj+lv_label（静态文本，左对齐 x=8）+lv_label（"▶"，x=58，紧跟文字）；选中行 =LV_STATE_CHECKED整行反色（白底黑字，高亮铺满框宽） - 状态行 =
lv_label（x=17, y=20，文本由 App 层供给，Q4） - 顶部装饰 = 开口浅 V（4 段折线：(7,7)→(16,17)→(145,17)→(158,7)）：LVGL 可用 3 条
lv_obj线段拼合（斜线用lv_line），或预渲染 1bpp 位图lv_image（更省对象、更精确） - 1bpp 禁区（本样机均未使用）：圆角 / 阴影 / 透明度 / 渐变 / 多色
- 内存：根页 = 1 列表容器 + 7 行 ×（行 obj + 2 label）+ 状态 label + 装饰 ≈ 20+ 个对象，为最高频页面，阶段 2 需核算 40KB LVGL 池占用