cbb/DCU_DesktopController
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9bb804ec350534e462599d9c2524eacc0a88d207
DCU_DesktopController/pages/can.html
T
cbb 31b90f68b3 refactor: 按角色分层目录, HTML 不再平铺根目录 
根目录原本平铺 7 个 HTML, 而 js/ 已按功能域分子目录, 两级结构不对称;
且自包含实验页与主功能页平级摆放, 看不出可随时删除。现按角色分三层:

  tabs.html  标签外壳留在根 = 工具入口
  pages/     index / can / can_monitor / motor  主功能页
  lab/       continuity_test / spi_test  自包含实验页(零外部依赖)
  scripts/   build_mem.bat

随迁修正(全部实跑验证):
- pages/ 下 4 页共 22 处 css/js 引用加 ../ 前缀; 页面互链同目录无需改
- js/motor/main.js 的 Worker URL 改用 import.meta.url 解析: 原文档相对
  路径 "js/motor/tick.worker.js" 在 pages/ 下会解析成 /pages/js/... 而
  404, 静默退化到 setTimeout 兜底、丢失后台不节流能力(已验证旧写法 404)
- tabs.html 的 TABS 登记新路径; pageToTab 改按文件名匹配, 旧版
  localStorage 存的裸文件名(can.html)自动迁移到 pages/can.html
- esp32_server.py: GET / 与 /index.html 302 到 /tabs.html(根下已无
  index.html); 注入脚本的 ⌂ 主页判定基准由 index.html 改为 tabs.html
- serve.bat 打印外壳与 OTA 页新地址; README 补目录结构与路径约定

验证: 39/39 静态资源 200, 7 页 200 且注入生效, 逐页解析引用 0 坏链,
路由 / 与 /index.html 302、未知页 404, node --check 与 py_compile 通过。
2026-09-03 21:51:17 +08:00

335 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 CAN 通信控制台</title>
<!-- 空 favicon：阻止浏览器自动请求 /favicon.ico（本地静态服务无此文件会 404） -->
<link rel="icon" href="data:,">
<link rel="stylesheet" href="../css/base.css?v=857f83a5">
<link rel="stylesheet" href="../css/layout.css?v=acd17001">
<link rel="stylesheet" href="../css/components.css?v=7bc7d5db">
<link rel="stylesheet" href="../css/can.css?v=c06f5688">
<link rel="stylesheet" href="../css/responsive.css?v=46449483">
</head>
<body class="can-page">
<div class="container can-container">
<header class="header-bar can-header">
<div class="header-brand">
<span class="brand-logo" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<rect x="6" y="6" width="12" height="12" rx="2.5"/>
<rect x="9.5" y="9.5" width="5" height="5" rx="1" fill="currentColor" stroke="none" opacity=".85"/>
<path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/>
</svg>
</span>
<div class="brand-text">
<strong>ESP32 CAN 通信控制台</strong>
<span class="brand-sub">DCU · Robot_v2 · CAN FD</span>
</div>
</div>
<div class="header-status">
<span class="pill offline" id="canConnPill"><span class="indicator"></span><span id="canConnTxt">未连接</span></span>
<span class="pill" id="canIpPill">IP --</span>
<span class="pill" id="canRssiPill">RSSI --</span>
<span class="pill" id="canUptimePill">运行 --</span>
<span class="pill" id="canVersionPill">v--</span>
<span class="pill" id="canChannelPill">CH0</span>
<span class="pill" id="dbcSummaryPill">未导入 DBC</span>
<span class="pill" id="messageSummaryPill">0 报文</span>
<span class="pill" id="fbModePill">模式: --</span>
<span class="pill" id="fbPollStatus">轮询: --</span>
</div>
<div class="header-sub can-header-actions">
<a class="pill can-link-pill" href="index.html">返回 OTA 控制台</a>
<a class="pill can-link-pill" href="can_monitor.html" title="独立全屏监控页">监控全屏</a>
</div>
</header>
<!-- DBC 并入报文列表：无文件时列表内大拖放区；有文件时标题栏紧凑摘要 + 更换 -->
<input type="file" id="dbcFileInput" accept=".dbc,text/plain" multiple style="display:none;">
<div class="can-editor-layout">
<div class="can-main-col">
<section class="card can-table-card" id="dbcDropZone">
<div class="card-head can-msg-list-head">
<span class="ico">📚</span>
<span>报文列表</span>
<!-- 已导入：合计 + 文件 chip（可逐个移除） -->
<div class="dbc-summary-strip dbc-summary-inline" id="dbcFileInfo" hidden>
<span class="dbc-summary-meta">
<span><b id="dbcFileCount">0</b>文件</span>
<span><b id="dbcMessageCount">0</b>报文</span>
<span><b id="dbcSignalCount">0</b>信号</span>
<span><b id="dbcNodeCount">0</b>节点</span>
<span id="dbcFileSize">0 B</span>
</span>
<span class="dbc-file-chips" id="dbcFileChips"></span>
</div>
<div class="can-msg-head-actions">
<button class="btn btn-ghost btn-sm" id="clearDbcBtn" type="button" title="清除全部 DBC" hidden>全部清除</button>
<button class="btn btn-primary btn-sm" id="importDbcBtn" type="button">导入 DBC</button>
</div>
</div>
<!-- 通道 / 搜索 / 勾选 / 节点 / 批量 同一工具栏 -->
<div class="can-msg-toolbar" id="canMsgToolbar">
<label class="can-msg-channel" for="defaultChannel">
<span class="can-msg-channel-label">通道</span>
<select class="input can-msg-channel-select" id="defaultChannel" title="默认发送通道">
<option value="0">CH0</option>
<option value="1">CH1</option>
<option value="2">CH2</option>
</select>
</label>
<div class="can-msg-search-wrap">
<input class="input can-msg-search" type="text" id="dbcSearch"
placeholder="搜索报文名 / ID / 节点 / 信号" autocomplete="off">
</div>
<div class="can-batch-actions">
<span class="pill" id="selectedCountPill">已勾选 0</span>
<div class="can-node-filter" id="nodeFilterWrap">
<button class="btn btn-outline btn-sm can-node-filter-btn" id="nodeFilterBtn" type="button" aria-haspopup="true" aria-expanded="false">
<span class="can-node-filter-label" id="nodeFilterLabel">发送节点：全部</span>
<span class="can-node-filter-caret">▾</span>
</button>
<div class="can-node-filter-panel" id="nodeFilterPanel" hidden>
<div class="can-node-filter-head">
<input class="input can-node-filter-search" id="nodeFilterSearch" type="text" placeholder="筛选节点名…">
<div class="can-node-filter-actions">
<button class="btn btn-ghost btn-sm" id="nodeFilterAllBtn" type="button">全选</button>
<button class="btn btn-ghost btn-sm" id="nodeFilterNoneBtn" type="button">清空</button>
</div>
</div>
<div class="can-node-filter-list" id="nodeFilterList">
<div class="status-empty">先导入 DBC。</div>
</div>
</div>
</div>
<label class="checkbox-inline can-batch-all-label" title="全选/取消当前过滤的所有报文">
<input type="checkbox" id="selectAllBox">
<span>全选当前过滤</span>
</label>
<button class="btn btn-outline btn-sm" id="expandAllBtn" type="button">展开全部</button>
<button class="btn btn-outline btn-sm" id="collapseAllBtn" type="button">收起全部</button>
<button class="btn btn-primary btn-sm" id="sendCheckedBtn" type="button">批量发送勾选</button>
</div>
</div>
<div class="card-body can-table-card-body">
<div class="message-list" id="messageList">
<div class="dbc-empty-drop" id="dbcEmptyDrop">
<div class="upload-ico">📥</div>
<h4>导入 DBC 开始编辑报文</h4>
<p>点击此处或拖拽 <code>.dbc</code> 文件到列表区域</p>
</div>
</div>
<div class="helper-note" id="dbcHint" hidden></div>
</div>
</section>
<section class="card can-history-card">
<div class="card-head"><span class="ico">🕘</span> 最近发送</div>
<div class="card-body">
<div class="history-list history-list-compact" id="historyList">
<div class="status-empty">尚未发送任何 CAN 帧。</div>
</div>
</div>
</section>
</div>
<aside class="can-sidepanel">
<section class="card can-preview-card">
<div class="card-head"><span class="ico">🛰️</span> 帧预览</div>
<div class="card-body">
<div class="can-frame-panel can-frame-panel-compact">
<div class="can-frame-hex" id="generatedHex">--</div>
<div class="can-byte-strip" id="generatedBytes"></div>
<div class="helper-note" id="encodeHint">选择报文后，信号值会实时编码为 CAN 数据。</div>
<div class="btn-row can-frame-actions">
<button class="btn btn-outline btn-sm" id="loadPreviewToRawBtn" type="button">载入到原始发送区</button>
<button class="btn btn-primary btn-sm" id="sendSelectedBtn" type="button">发送当前预览帧</button>
</div>
<div class="can-response" id="dbcResp" style="display:none;">
<div class="can-response-label">设备响应</div>
<div id="dbcRespText"></div>
</div>
</div>
</div>
</section>
<section class="card can-raw-card">
<div class="card-head"><span class="ico">✍️</span> 原始帧发送</div>
<div class="card-body">
<div class="row-2 can-raw-grid">
<div class="form-row" style="margin:0;">
<label class="form-label" for="manualChannel">通道</label>
<select class="input" id="manualChannel">
<option value="0">CH0</option>
<option value="1">CH1</option>
<option value="2">CH2</option>
</select>
</div>
<div class="form-row" style="margin:0;">
<label class="form-label" for="manualId">CAN ID</label>
<input class="input" type="text" id="manualId" value="0x18DA00F1" placeholder="支持 0x 或十进制">
</div>
</div>
<div class="form-row" style="margin-top:10px;">
<label class="form-label" for="manualDlc">DLC</label>
<input class="input" type="number" id="manualDlc" value="8" min="0" max="64">
</div>
<div class="form-row" style="margin-top:10px;">
<label class="form-label" for="manualData">HEX 数据</label>
<input class="input" type="text" id="manualData" value="0102030405060708" placeholder="01020304...">
</div>
<div class="helper-note" id="manualHint">
原始帧模式适合绕过 DBC 直接发 HEX，或发送当前预览帧后二次微调。
</div>
<div class="btn-row">
<button class="btn btn-primary" id="sendManualBtn" type="button">发送原始帧</button>
<button class="btn btn-outline" id="resetManualBtn" type="button">重置</button>
</div>
<div class="can-response" id="manualResp" style="display:none;">
<div class="can-response-label">设备响应</div>
<div id="manualRespText"></div>
</div>
</div>
</section>
</aside>
</div>
</div>
<!-- 右侧滑出：CAN 接收监控（与 OTA 页「堆与任务栈」同样交互） -->
<aside class="sys-drawer can-monitor-drawer" id="canMonitorDrawer" aria-label="CAN 接收监控">
<div class="sys-drawer-rail" title="悬停展开 CAN 接收监控">
<span class="sys-drawer-rail-ico">📊</span>
<span class="sys-drawer-rail-text">CAN 接收监控</span>
</div>
<div class="sys-drawer-panel card">
<div class="card-head sys-drawer-head">
<span class="ico">📊</span> CAN 接收监控
</div>
<div class="card-body sys-drawer-body">
<div class="status-section-title">接收模式</div>
<div class="input-group" style="margin-bottom:12px;flex-wrap:wrap;">
<button class="btn btn-primary btn-sm" id="btnModeAllPass" type="button">全收模式</button>
<button class="btn btn-outline btn-sm" id="btnModeFilter" type="button">过滤模式</button>
<button class="btn btn-outline btn-sm" id="btnModeBridge" type="button" title="CAN0 收到的每一帧按原帧格式自动转发到 CAN1 与 CAN2">CAN0→1/2 桥接</button>
</div>
<div class="helper-note" id="monHelper" style="margin-bottom:14px;">
地址与顶栏一致；1Hz <code>/can/feedback</code>。悬停抽屉保持展开。
</div>
<div class="status-section-title">三路 CAN 通道（1Hz）</div>
<div class="feedback-grid feedback-grid-drawer">
<div class="feedback-channel collapsed" id="fbCh0">
<div class="feedback-ch-head" role="button" tabindex="0" title="点击展开/折叠详情">
<span class="ch-dot ch0"></span> CAN0
<span class="feedback-expand-caret">▾</span>
</div>
<div class="feedback-primary">
<div class="feedback-row"><span class="fb-label">状态</span><span class="fb-val" id="fb0State">--</span></div>
<div class="feedback-row"><span class="fb-label">接收数</span><span class="fb-val" id="fb0Rx">--</span></div>
<div class="feedback-row"><span class="fb-label">发送数</span><span class="fb-val" id="fb0Tx">--</span></div>
<div class="feedback-row"><span class="fb-label">丢帧</span><span class="fb-val" id="fb0Drop">--</span></div>
<div class="feedback-row"><span class="fb-label">错误</span><span class="fb-val" id="fb0Err">--</span></div>
</div>
<div class="feedback-detail">
<div class="feedback-row"><span class="fb-label">TEC</span><span class="fb-val" id="fb0Tec">--</span></div>
<div class="feedback-row"><span class="fb-label">REC</span><span class="fb-val" id="fb0Rec">--</span></div>
<div class="feedback-row"><span class="fb-label">总线状态</span><span class="fb-val" id="fb0Bus">--</span></div>
<div class="feedback-row"><span class="fb-label">最新ID</span><span class="fb-val mono" id="fb0LastId">--</span></div>
<div class="feedback-row"><span class="fb-label">DLC</span><span class="fb-val" id="fb0Dlc">--</span></div>
<div class="feedback-row"><span class="fb-label">FD/BRS/ESI</span><span class="fb-val" id="fb0Flags">--</span></div>
<div class="feedback-row"><span class="fb-label">Seq</span><span class="fb-val" id="fb0Seq">--</span></div>
<div class="feedback-row"><span class="fb-label">Δrx/s</span><span class="fb-val" id="fb0Delta">--</span></div>
<div class="feedback-row"><span class="fb-label">最新HEX</span><span class="fb-val mono fb-data-cell" id="fb0LastData">--</span></div>
</div>
</div>
<div class="feedback-channel collapsed" id="fbCh1">
<div class="feedback-ch-head" role="button" tabindex="0" title="点击展开/折叠详情">
<span class="ch-dot ch1"></span> CAN1
<span class="feedback-expand-caret">▾</span>
</div>
<div class="feedback-primary">
<div class="feedback-row"><span class="fb-label">状态</span><span class="fb-val" id="fb1State">--</span></div>
<div class="feedback-row"><span class="fb-label">接收数</span><span class="fb-val" id="fb1Rx">--</span></div>
<div class="feedback-row"><span class="fb-label">发送数</span><span class="fb-val" id="fb1Tx">--</span></div>
<div class="feedback-row"><span class="fb-label">丢帧</span><span class="fb-val" id="fb1Drop">--</span></div>
<div class="feedback-row"><span class="fb-label">错误</span><span class="fb-val" id="fb1Err">--</span></div>
</div>
<div class="feedback-detail">
<div class="feedback-row"><span class="fb-label">TEC</span><span class="fb-val" id="fb1Tec">--</span></div>
<div class="feedback-row"><span class="fb-label">REC</span><span class="fb-val" id="fb1Rec">--</span></div>
<div class="feedback-row"><span class="fb-label">总线状态</span><span class="fb-val" id="fb1Bus">--</span></div>
<div class="feedback-row"><span class="fb-label">最新ID</span><span class="fb-val mono" id="fb1LastId">--</span></div>
<div class="feedback-row"><span class="fb-label">DLC</span><span class="fb-val" id="fb1Dlc">--</span></div>
<div class="feedback-row"><span class="fb-label">FD/BRS/ESI</span><span class="fb-val" id="fb1Flags">--</span></div>
<div class="feedback-row"><span class="fb-label">Seq</span><span class="fb-val" id="fb1Seq">--</span></div>
<div class="feedback-row"><span class="fb-label">Δrx/s</span><span class="fb-val" id="fb1Delta">--</span></div>
<div class="feedback-row"><span class="fb-label">最新HEX</span><span class="fb-val mono fb-data-cell" id="fb1LastData">--</span></div>
</div>
</div>
<div class="feedback-channel collapsed" id="fbCh2">
<div class="feedback-ch-head" role="button" tabindex="0" title="点击展开/折叠详情">
<span class="ch-dot ch2"></span> CAN2
<span class="feedback-expand-caret">▾</span>
</div>
<div class="feedback-primary">
<div class="feedback-row"><span class="fb-label">状态</span><span class="fb-val" id="fb2State">--</span></div>
<div class="feedback-row"><span class="fb-label">接收数</span><span class="fb-val" id="fb2Rx">--</span></div>
<div class="feedback-row"><span class="fb-label">发送数</span><span class="fb-val" id="fb2Tx">--</span></div>
<div class="feedback-row"><span class="fb-label">丢帧</span><span class="fb-val" id="fb2Drop">--</span></div>
<div class="feedback-row"><span class="fb-label">错误</span><span class="fb-val" id="fb2Err">--</span></div>
</div>
<div class="feedback-detail">
<div class="feedback-row"><span class="fb-label">TEC</span><span class="fb-val" id="fb2Tec">--</span></div>
<div class="feedback-row"><span class="fb-label">REC</span><span class="fb-val" id="fb2Rec">--</span></div>
<div class="feedback-row"><span class="fb-label">总线状态</span><span class="fb-val" id="fb2Bus">--</span></div>
<div class="feedback-row"><span class="fb-label">最新ID</span><span class="fb-val mono" id="fb2LastId">--</span></div>
<div class="feedback-row"><span class="fb-label">DLC</span><span class="fb-val" id="fb2Dlc">--</span></div>
<div class="feedback-row"><span class="fb-label">FD/BRS/ESI</span><span class="fb-val" id="fb2Flags">--</span></div>
<div class="feedback-row"><span class="fb-label">Seq</span><span class="fb-val" id="fb2Seq">--</span></div>
<div class="feedback-row"><span class="fb-label">Δrx/s</span><span class="fb-val" id="fb2Delta">--</span></div>
<div class="feedback-row"><span class="fb-label">最新HEX</span><span class="fb-val mono fb-data-cell" id="fb2LastData">--</span></div>
</div>
</div>
</div>
<div class="status-section-title" style="margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
<span>每 ID 快照表</span>
<select class="input" id="idsnapChannel" style="width:100px;text-transform:none;">
<option value="0">CAN0</option>
<option value="1">CAN1</option>
<option value="2">CAN2</option>
</select>
<span class="pill" id="idsnapStatus">--</span>
</div>
<div class="idsnap-table-wrap">
<table class="idsnap-table" id="idsnapTable">
<thead>
<tr>
<th>#</th><th>CAN ID</th><th>DLC</th>
<th>FD</th><th>BRS</th><th>ESI</th><th>数据 (HEX)</th>
</tr>
</thead>
<tbody id="idsnapBody">
<tr><td colspan="7" class="status-empty">等待数据...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</aside>
<div class="toast" id="toast">
<span class="toast-ico" id="toastIco">✓</span>
<span id="toastMsg">操作成功</span>
</div>
<script type="module" src="../js/can.js?v=20260801f"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink