DCU_DesktopController/pages/can.html

<!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=20260924a">
<link rel="stylesheet" href="../css/components.css?v=20260924a">
<link rel="stylesheet" href="../css/can.css?v=c06f5688">
<link rel="stylesheet" href="../css/responsive.css?v=quiet20260919a">
</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>

<!-- �喃儒皛穃枂嚗鋴AN �交𤣰�烐綉嚗�� 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�?/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 �𡁻�嚗?Hz嚗?/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">���衰D</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">���蚜EX</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">���衰D</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">���蚜EX</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">���衰D</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">���蚜EX</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=20260919a"></script>
</body>
</html>