websocket快速操作工具
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

916 lines
30 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. <style>
  9. *,
  10. html,
  11. body {
  12. margin: 0;
  13. padding: 0;
  14. box-sizing: border-box;
  15. }
  16. li {
  17. list-style: none;
  18. }
  19. .container {
  20. display: flex;
  21. width: 100vw;
  22. align-items: center;
  23. box-sizing: border-box;
  24. justify-content: space-between;
  25. }
  26. .left_chat {
  27. border: solid 1px #000;
  28. height: 100vh;
  29. display: flex;
  30. box-sizing: border-box;
  31. flex-direction: column;
  32. padding: 24px;
  33. overflow: scroll;
  34. width: 500px;
  35. min-width: 500px;
  36. }
  37. .right_message {
  38. height: 100vh;
  39. box-sizing: border-box;
  40. flex: 1;
  41. }
  42. .btn {
  43. padding: 36px;
  44. font-size: 24px;
  45. margin-top: 24px;
  46. width: 100%;
  47. }
  48. .right_message {
  49. padding: 24px;
  50. border: solid 1px #000;
  51. display: flex;
  52. flex-direction: column;
  53. }
  54. .message_wrap {
  55. flex: 1;
  56. border: solid 1px #ddd;
  57. overflow: scroll;
  58. }
  59. .message {
  60. padding: 6px 8px;
  61. border-bottom: solid 1px #ddd;
  62. }
  63. .input_wrap {
  64. display: flex;
  65. align-items: center;
  66. /* margin-bottom: 20px; */
  67. }
  68. .input_wrap .ws_connnect {
  69. flex: 2;
  70. padding: 4px 0;
  71. margin-right: 20px;
  72. }
  73. .input_wrap .connect {
  74. flex: 1;
  75. }
  76. .order {
  77. display: grid;
  78. grid-template-columns: repeat(1, 1fr);
  79. column-gap: 20px;
  80. row-gap: 10px;
  81. margin-bottom: 20px;
  82. }
  83. .status {
  84. padding: 4px 0;
  85. border-bottom: solid 2px #ddd;
  86. margin-bottom: 10px;
  87. }
  88. .tabs {
  89. margin: 20px 0;
  90. }
  91. .tab-bar {
  92. display: flex;
  93. }
  94. .tab {
  95. padding: 10px 20px;
  96. border: 1px solid #ccc;
  97. border-bottom: none;
  98. cursor: pointer;
  99. }
  100. /* .active {
  101. border-bottom: 2px solid blue;
  102. } */
  103. .tab-panel {
  104. display: none;
  105. padding: 20px;
  106. border: 1px solid #ccc;
  107. }
  108. .active {
  109. display: block;
  110. }
  111. .common_order_input {
  112. display: flex;
  113. align-items: center;
  114. justify-content: space-evenly;
  115. padding: 0 20px;
  116. margin-bottom: 10px;
  117. }
  118. .common_order_input .single {
  119. display: flex;
  120. flex-direction: column;
  121. align-items: center;
  122. }
  123. .single .input {
  124. width: 100%;
  125. text-align: center;
  126. padding: 4px;
  127. }
  128. .common_btns {
  129. width: 100%;
  130. }
  131. .btn_c {
  132. width: 100%;
  133. padding: 4px 0;
  134. margin-bottom: 10px;
  135. }
  136. .report_c {
  137. border: solid 1px #ddd;
  138. padding: 10px;
  139. }
  140. .form_line {
  141. display: flex;
  142. align-items: center;
  143. width: 100%;
  144. margin-bottom: 10px;
  145. }
  146. .form_line .tit {
  147. margin-right: 6px;
  148. white-space: nowrap;
  149. }
  150. .form_line .info {
  151. width: 100%;
  152. text-align: center;
  153. padding: 4px 0;
  154. }
  155. .report_c .title {
  156. border-bottom: solid 1px #ddd;
  157. margin-bottom: 10px;
  158. }
  159. .mod-tab .tab_top {
  160. float: left;
  161. padding: 5px 20px;
  162. border-top: 1px solid #ccc;
  163. border-left: 1px solid #ccc;
  164. background-color: #ddd;
  165. }
  166. .header .tab_top:last-child {
  167. border-right: 1px solid #ccc;
  168. }
  169. .content {
  170. border: 1px solid #ccc;
  171. width: 100%;
  172. height: 100%;
  173. }
  174. .header::after {
  175. content: "";
  176. display: block;
  177. clear: both;
  178. }
  179. .mod-tab .header .active {
  180. background-color: #fff;
  181. }
  182. .mod-tab .content .panel {
  183. display: none;
  184. }
  185. .mod-tab .content .active {
  186. display: block;
  187. }
  188. .card_container {
  189. padding: 0 10px;
  190. }
  191. .card_container .title {
  192. margin-bottom: 10px;
  193. border-bottom: solid 1px #ddd;
  194. }
  195. .card_container .form {
  196. display: flex;
  197. margin-bottom: 10px;
  198. align-items: center;
  199. justify-content: space-between;
  200. }
  201. .card_container .form .label {
  202. white-space: nowrap;
  203. margin-right: 10px;
  204. }
  205. .card_container .form .input {
  206. flex: 1;
  207. padding: 4px 0;
  208. text-align: center;
  209. }
  210. .card_container .form .btn {
  211. padding: 0;
  212. margin: 0;
  213. width: 40px;
  214. margin-left: 10px;
  215. }
  216. .card_container .form .input_config {
  217. width: 60px;
  218. padding: 4px 0;
  219. text-align: center;
  220. }
  221. </style>
  222. </head>
  223. <body>
  224. <div class="container">
  225. <div class="left_chat">
  226. <div class="input_wrap">
  227. <input type="text" class="ws_connnect" id="ws_connnect_input" />
  228. <button class="connect" onclick="connectWs()">连接</button>
  229. </div>
  230. <p class="status" id="status">当前状态: 未连接</p>
  231. <div class="mod-tab">
  232. <div class="header">
  233. <button class="tab_top active button1">基本控制</button>
  234. <button class="tab_top button2">舵机控制</button>
  235. <button class="tab_top button3">电机控制</button>
  236. </div>
  237. <div class="content">
  238. <div class="panel active">
  239. <div class="report_c">
  240. <p class="title">上报解析</p>
  241. <div class="form_line">
  242. <p class="tit">ADDRESS:</p>
  243. <input
  244. type="text"
  245. class="info"
  246. disabled
  247. id="report_address"
  248. />
  249. </div>
  250. <div class="form_line">
  251. <p class="tit">VALUE:</p>
  252. <input type="text" class="info" disabled id="report_val" />
  253. </div>
  254. </div>
  255. <div class="report_c">
  256. <p class="title">回执解析</p>
  257. <div class="form_line">
  258. <p class="tit">ADDRESS:</p>
  259. <input
  260. type="text"
  261. class="info"
  262. disabled
  263. id="receipt_address"
  264. />
  265. </div>
  266. <div class="form_line">
  267. <p class="tit">VALUE:</p>
  268. <input type="text" class="info" disabled id="receipt_val" />
  269. </div>
  270. <div class="form_line">
  271. <p class="tit">结果:</p>
  272. <input
  273. type="text"
  274. class="info"
  275. value="无"
  276. disabled
  277. id="receipt_message"
  278. />
  279. </div>
  280. </div>
  281. <div class="tabs">
  282. <ul class="tab-bar">
  283. <li class="tab active">通用指令</li>
  284. <li class="tab">指令列表</li>
  285. </ul>
  286. <div class="tab-content">
  287. <div class="tab-panel active">
  288. <div class="common_order_input">
  289. <div class="single">
  290. <p>ID</p>
  291. <input type="text" class="input" id="common_id" />
  292. </div>
  293. <div
  294. class="single"
  295. style="margin-left: 10px; margin-right: 5px"
  296. >
  297. <p>BASE</p>
  298. <input type="text" class="input" id="common_base" />
  299. </div>
  300. <div
  301. class="single"
  302. style="margin-left: 5px; margin-right: 10px"
  303. >
  304. <p>OFFSET</p>
  305. <input type="text" class="input" id="common_off" />
  306. </div>
  307. <div class="single">
  308. <p>VALUE</p>
  309. <input type="text" class="input" id="common_value" />
  310. </div>
  311. </div>
  312. <div class="common_btns">
  313. <button class="btn_c" onclick="writeFun()"></button>
  314. <button class="btn_c" onclick="read()"></button>
  315. <button class="btn_c" onclick="autoReport()">
  316. 使能自动上报
  317. </button>
  318. <button class="btn_c" onclick="reportCycle()">
  319. 设置上报周期
  320. </button>
  321. </div>
  322. </div>
  323. <div class="tab-panel">
  324. <div class="order" id="order"></div>
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. <div class="panel">
  330. <div
  331. class="common_order_input"
  332. style="border-bottom: solid 2px #ddd; padding-bottom: 10px"
  333. >
  334. <div class="single">
  335. <p>ID</p>
  336. <input type="text" class="input" id="duoji_id" />
  337. </div>
  338. <div
  339. class="single"
  340. style="margin-left: 10px; margin-right: 5px"
  341. >
  342. <p>BASE</p>
  343. <input type="text" class="input" id="duoji_base" />
  344. </div>
  345. <div
  346. class="single"
  347. style="margin-left: 5px; margin-right: 10px"
  348. >
  349. <p>OFFSET</p>
  350. <input type="text" class="input" id="duoji_offset" />
  351. </div>
  352. </div>
  353. <div class="card_container">
  354. <h3 class="title">状态</h3>
  355. <div class="form">
  356. <p class="label">异常</p>
  357. <input type="text" class="input" id="duoji_exception" />
  358. <button
  359. class="btn"
  360. onclick="readValue('#duoji_exception', 'read')"
  361. >
  362. </button>
  363. </div>
  364. <div class="form">
  365. <p class="label">状态</p>
  366. <input type="text" class="input" id="duoji_status" />
  367. <button
  368. class="btn"
  369. onclick="readValue('#duoji_status', 'read')"
  370. >
  371. </button>
  372. </div>
  373. <div class="form">
  374. <p class="label">位置</p>
  375. <input type="text" class="input" id="duoji_position" />
  376. <button
  377. class="btn"
  378. onclick="readValue('#duoji_position', 'read')"
  379. >
  380. </button>
  381. </div>
  382. </div>
  383. <div class="card_container">
  384. <h3 class="title">配置</h3>
  385. <div class="form">
  386. <p class="label">反复运动启始位置</p>
  387. <input type="text" id="duoji_config_1" class="input_config" />
  388. <button
  389. class="btn"
  390. onclick="readValue('#duoji_config_1', 'read')"
  391. >
  392. </button>
  393. <button
  394. class="btn"
  395. onclick="readValue('#duoji_config_1', 'write')"
  396. >
  397. </button>
  398. </div>
  399. <div class="form">
  400. <p class="label">反复运动终止位置</p>
  401. <input type="text" class="input_config" id="duoji_config_2" />
  402. <button
  403. class="btn"
  404. onclick="readValue('#duoji_config_2', 'read')"
  405. >
  406. </button>
  407. <button
  408. class="btn"
  409. onclick="readValue('#duoji_config_2', 'write')"
  410. >
  411. </button>
  412. </div>
  413. <div class="form">
  414. <p class="label">运行时速度配置</p>
  415. <input type="text" class="input_config" id="duoji_config_3" />
  416. <button
  417. class="btn"
  418. onclick="readValue('#duoji_config_3', 'read')"
  419. >
  420. </button>
  421. <button
  422. class="btn"
  423. onclick="readValue('#duoji_config_3', 'write')"
  424. >
  425. </button>
  426. </div>
  427. </div>
  428. <div class="card_container">
  429. <h3 class="title">动作</h3>
  430. <div class="form">
  431. <p class="label">舵机移动到角度</p>
  432. <input type="text" class="input" id="duoji_move_1" />
  433. <button
  434. class="btn"
  435. onclick="readValue('#duoji_move_1', 'write')"
  436. >
  437. </button>
  438. </div>
  439. <div class="form">
  440. <p class="label">舵机停止</p>
  441. <input type="text" class="input" id="duoji_move_2" />
  442. <button
  443. class="btn"
  444. onclick="readValue('#duoji_move_2', 'write')"
  445. >
  446. </button>
  447. </div>
  448. <div class="form">
  449. <p class="label">清除异常</p>
  450. <input type="text" class="input" id="duoji_move_3" />
  451. <button
  452. class="btn"
  453. onclick="readValue('#duoji_move_3', 'write')"
  454. >
  455. </button>
  456. </div>
  457. <div class="form">
  458. <p class="label">反复运动</p>
  459. <input type="text" class="input" id="duoji_move_4" />
  460. <button
  461. class="btn"
  462. onclick="readValue('#duoji_move_4', 'write')"
  463. >
  464. </button>
  465. </div>
  466. </div>
  467. </div>
  468. <div class="panel">
  469. <div
  470. class="common_order_input"
  471. style="border-bottom: solid 2px #ddd; padding-bottom: 10px"
  472. >
  473. <div class="single">
  474. <p>ID</p>
  475. <input type="text" class="input" />
  476. </div>
  477. <div
  478. class="single"
  479. style="margin-left: 10px; margin-right: 5px"
  480. >
  481. <p>BASE</p>
  482. <input type="text" class="input" />
  483. </div>
  484. <div
  485. class="single"
  486. style="margin-left: 5px; margin-right: 10px"
  487. >
  488. <p>OFFSET</p>
  489. <input type="text" class="input" />
  490. </div>
  491. </div>
  492. <div class="card_container">
  493. <h3 class="title">状态</h3>
  494. <div class="form">
  495. <p class="label">设备状态</p>
  496. <input type="text" class="input" />
  497. <button class="btn"></button>
  498. </div>
  499. <div class="form">
  500. <p class="label">异常状态</p>
  501. <input type="text" class="input" />
  502. <button class="btn"></button>
  503. </div>
  504. <div class="form">
  505. <p class="label">当前转速</p>
  506. <input type="text" class="input" />
  507. <button class="btn"></button>
  508. </div>
  509. <div class="form">
  510. <p class="label">当前位置</p>
  511. <input type="text" class="input" />
  512. <button class="btn"></button>
  513. </div>
  514. </div>
  515. <div class="card_container">
  516. <h3 class="title">配置</h3>
  517. <div class="form">
  518. <p class="label">加速度</p>
  519. <input type="text" class="input_config" />
  520. <button class="btn"></button>
  521. <button class="btn"></button>
  522. </div>
  523. <div class="form">
  524. <p class="label">减速度</p>
  525. <input type="text" class="input_config" />
  526. <button class="btn"></button>
  527. <button class="btn"></button>
  528. </div>
  529. <div class="form">
  530. <p class="label">速度</p>
  531. <input type="text" class="input_config" />
  532. <button class="btn"></button>
  533. <button class="btn"></button>
  534. </div>
  535. <div class="form">
  536. <p class="label">零点偏移</p>
  537. <input type="text" class="input_config" />
  538. <button class="btn"></button>
  539. <button class="btn"></button>
  540. </div>
  541. <div class="form">
  542. <p class="label">归零速度</p>
  543. <input type="text" class="input_config" />
  544. <button class="btn"></button>
  545. <button class="btn"></button>
  546. </div>
  547. <div class="form">
  548. <p class="label">归零减速度</p>
  549. <input type="text" class="input_config" />
  550. <button class="btn"></button>
  551. <button class="btn"></button>
  552. </div>
  553. <div class="form">
  554. <p class="label">归零最大位移</p>
  555. <input type="text" class="input_config" />
  556. <button class="btn"></button>
  557. <button class="btn"></button>
  558. </div>
  559. <div class="form">
  560. <p class="label">归零第一阶段移动距离</p>
  561. <input type="text" class="input_config" />
  562. <button class="btn"></button>
  563. <button class="btn"></button>
  564. </div>
  565. </div>
  566. <div class="card_container">
  567. <h3 class="title">动作</h3>
  568. <div class="form">
  569. <p class="label">速度模式控制</p>
  570. <input type="text" class="input" />
  571. <button class="btn"></button>
  572. </div>
  573. <div class="form">
  574. <p class="label">位置模式控制</p>
  575. <input type="text" class="input" />
  576. <button class="btn"></button>
  577. </div>
  578. <div class="form">
  579. <p class="label">位置模式相对位置</p>
  580. <input type="text" class="input" />
  581. <button class="btn"></button>
  582. </div>
  583. <div class="form">
  584. <p class="label">归零</p>
  585. <input type="text" class="input" />
  586. <button class="btn"></button>
  587. </div>
  588. <div class="form">
  589. <p class="label">零位校准</p>
  590. <input type="text" class="input" />
  591. <button class="btn"></button>
  592. </div>
  593. <div class="form">
  594. <p class="label">停止</p>
  595. <input type="text" class="input" />
  596. <button class="btn"></button>
  597. </div>
  598. <div class="form">
  599. <p class="label">清空异常</p>
  600. <input type="text" class="input" />
  601. <button class="btn"></button>
  602. </div>
  603. </div>
  604. </div>
  605. </div>
  606. </div>
  607. </div>
  608. <div class="right_message">
  609. <div class="message_wrap" id="message_wrap"></div>
  610. <div style="display: flex; align-items: center; margin-top: 10px">
  611. <textarea style="flex: 1" name="bio" rows="15" cols="40"></textarea>
  612. <div style="display: flex; flex-direction: column; height: 100%">
  613. <button style="flex: 1" onclick="sendMessage()">发送</button>
  614. <button style="flex: 1" onclick="clearTextArea()">清空</button>
  615. </div>
  616. </div>
  617. </div>
  618. </div>
  619. </body>
  620. <script src="./config.js"></script>
  621. <script>
  622. window.onload = () => {
  623. const commonI = document.querySelector("#common_id");
  624. const commonB = document.querySelector("#common_base");
  625. commonI.value = localStorage.getItem("id");
  626. commonB.value = localStorage.getItem("base");
  627. };
  628. var ws = null;
  629. const websocketInput = document.querySelector("#ws_connnect_input");
  630. websocketInput.value = websocketAddress;
  631. // 先向order下动态添加指令集合
  632. const order = document.querySelector("#order");
  633. for (let key in config) {
  634. const button = document.createElement("button");
  635. button.textContent = key;
  636. button.className = "order_btn";
  637. button.setAttribute("v", key);
  638. order?.appendChild(button);
  639. }
  640. order.addEventListener("click", (e) => {
  641. const item = e.target;
  642. if (item && item.getAttribute("v")) {
  643. const key = item.getAttribute("v");
  644. sendOrder(config[key]);
  645. }
  646. });
  647. const commonI = document.querySelector("#common_id");
  648. const commonB = document.querySelector("#common_base");
  649. commonI.addEventListener("input", (e) => {
  650. localStorage.setItem("id", e.target.value);
  651. });
  652. commonB.addEventListener("input", (e) => {
  653. localStorage.setItem("base", e.target.value);
  654. });
  655. const tabs = document.querySelector(".tabs");
  656. const tabBars = document.querySelectorAll(".tab-bar .tab");
  657. const tabPanels = document.querySelectorAll(".tab-content .tab-panel");
  658. for (let i = 0; i < tabBars.length; i++) {
  659. tabBars[i].onclick = function () {
  660. removeActive();
  661. this.classList.add("active");
  662. tabPanels[i].classList.add("active");
  663. };
  664. }
  665. function removeActive() {
  666. for (let i = 0; i < tabBars.length; i++) {
  667. tabBars[i].classList.remove("active");
  668. tabPanels[i].classList.remove("active");
  669. }
  670. }
  671. const clearMessage = () => {
  672. const messageWrap = document.querySelector("#message_wrap");
  673. messageWrap.innerHTML = "";
  674. };
  675. const clearTextArea = () => {
  676. const textArea = document.querySelector("textarea");
  677. textArea.value = "";
  678. clearMessage();
  679. };
  680. const sendMessage = () => {
  681. if (ws) {
  682. const textArea = document.querySelector("textarea");
  683. const messageVal = textArea.value;
  684. ws.send(messageVal);
  685. const messageWrap = document.querySelector("#message_wrap");
  686. const div = document.createElement("div");
  687. div.classList = ["message"];
  688. div.textContent = `Tx: ${messageVal}`;
  689. messageWrap.appendChild(div);
  690. messageWrap.scrollTop =
  691. messageWrap.scrollHeight - messageWrap.clientHeight;
  692. } else {
  693. }
  694. };
  695. const transValToName = (val) => {
  696. switch (val) {
  697. case 0x00:
  698. return "kSuccess";
  699. case 2:
  700. return "kRegNotFound";
  701. case 3:
  702. return "kRegNotWritable";
  703. case 4:
  704. return "kRegNotReadable";
  705. case 5:
  706. return "kIllegalValue";
  707. case 6:
  708. return "kDeviceBusy";
  709. case 7:
  710. return "kDeviceException";
  711. case 8:
  712. return "kChannelDeviceException";
  713. case 9:
  714. return "kParameterError";
  715. case 10:
  716. return "kOvertime";
  717. case 11:
  718. return "kOperationInvalid";
  719. case 12:
  720. return "kunsupportOperation";
  721. case 13:
  722. return "kIllegalOperation";
  723. case 14:
  724. return "kPermissionDenied";
  725. case 15:
  726. return "koutOfRange";
  727. case 16:
  728. return "kmotorNotRunToHome";
  729. case 17:
  730. return "kParameterOutOfLimit";
  731. }
  732. };
  733. const connectWs = () => {
  734. console.log(123);
  735. const input = document.querySelector("#ws_connnect_input");
  736. const status = document.querySelector("#status");
  737. const address = input.value;
  738. try {
  739. ws = new WebSocket(address);
  740. ws.onopen = function () {
  741. console.log("Connected to WebSocket server.");
  742. // 改变状态
  743. status.innerHTML = `当前状态: 已连接${address}`;
  744. };
  745. ws.onmessage = function (evt) {
  746. const messageWrap = document.querySelector("#message_wrap");
  747. const div = document.createElement("div");
  748. div.classList = ["message"];
  749. div.textContent = `Rx: ${evt.data}`;
  750. messageWrap.appendChild(div);
  751. messageWrap.scrollTop =
  752. messageWrap.scrollHeight - messageWrap.clientHeight;
  753. // 对消息进行处理
  754. try {
  755. const { message: messageBody } = JSON.parse(evt.data);
  756. const { type, ctrlPointAddr, ctrlPointVal } = messageBody;
  757. const receiptMessage = document.querySelector("#receipt_message");
  758. const receiptAddress = document.querySelector("#receipt_address");
  759. const receiptVal = document.querySelector("#receipt_val");
  760. const reportAddress = document.querySelector("#report_address");
  761. const reportVal = document.querySelector("#report_val");
  762. if (type == "receipt") {
  763. receiptMessage.value = "正确";
  764. receiptAddress.value = ctrlPointAddr;
  765. receiptVal.value = ctrlPointVal;
  766. }
  767. if (type == "error_receipt") {
  768. receiptMessage.value = "错误";
  769. receiptAddress.value = ctrlPointAddr;
  770. // 错误回执需要吧值和英文进行对应
  771. receiptVal.value = transValToName(ctrlPointVal);
  772. }
  773. if (type == "report") {
  774. reportAddress.value = ctrlPointAddr;
  775. reportVal.value = ctrlPointVal;
  776. }
  777. } catch (error) {
  778. console.log(error);
  779. }
  780. };
  781. ws.onclose = function () {
  782. status.innerHTML = `当前状态: 已关闭`;
  783. };
  784. } catch (error) {
  785. status.innerHTML = `当前状态: 连接错误`;
  786. }
  787. };
  788. const sendOrder = (msg) => {
  789. if (ws) {
  790. ws.send(msg);
  791. const messageWrap = document.querySelector("#message_wrap");
  792. const div = document.createElement("div");
  793. div.classList = ["message"];
  794. div.textContent = `Tx: ${msg}`;
  795. messageWrap.appendChild(div);
  796. messageWrap.scrollTop =
  797. messageWrap.scrollHeight - messageWrap.clientHeight;
  798. }
  799. };
  800. const getCommonOrderInput = (type) => {
  801. const id = document.querySelector("#common_id");
  802. const base = document.querySelector("#common_base");
  803. const off = document.querySelector("#common_off");
  804. const value = document.querySelector("#common_value");
  805. const { protocol, message } = commonMessage;
  806. return JSON.stringify({
  807. protocol,
  808. message: {
  809. ...message,
  810. targetId: parseInt(id.value),
  811. ctrlPointAddr: parseInt(base.value) + parseInt(off.value),
  812. ctrlPointVal: parseInt(value.value),
  813. type,
  814. },
  815. });
  816. };
  817. const writeFun = () => {
  818. const msg = getCommonOrderInput("write");
  819. sendOrder(msg);
  820. };
  821. const read = () => {
  822. const msg = getCommonOrderInput("read");
  823. sendOrder(msg);
  824. };
  825. const autoReport = () => {
  826. const msg = getCommonOrderInput("set_auto_report_enable_flag");
  827. sendOrder(msg);
  828. };
  829. const reportCycle = () => {
  830. const msg = getCommonOrderInput("set_auto_report_period");
  831. sendOrder(msg);
  832. };
  833. document.querySelectorAll(".tab_top").forEach(function (node) {
  834. node.addEventListener("click", function () {
  835. var index;
  836. this.parentElement
  837. .querySelectorAll(".tab_top")
  838. .forEach(function (e, inx) {
  839. //e.style.display='none' 跳转的时候隐藏按钮
  840. e.classList.remove("active");
  841. if (node === e) {
  842. index = inx;
  843. }
  844. });
  845. this.classList.add("active");
  846. this.parentElement.nextElementSibling
  847. .querySelectorAll(".panel")
  848. .forEach(function (panel) {
  849. panel.classList.remove("active");
  850. });
  851. this.parentElement.nextElementSibling
  852. .querySelectorAll(".panel")
  853. [index].classList.add("active");
  854. });
  855. });
  856. </script>
  857. <script>
  858. // 舵机封装读写方法
  859. const readValue = (id, type) => {
  860. const duoId = document.querySelector("#duoji_id");
  861. const duoBase = document.querySelector("#duoji_base");
  862. const duoOff = document.querySelector("#duoji_offset");
  863. const ele = document.querySelector(id);
  864. const { protocol, message } = commonMessage;
  865. const msg = JSON.stringify({
  866. protocol,
  867. message: {
  868. ...message,
  869. targetId: parseInt(duoId.value),
  870. ctrlPointAddr: parseInt(duoBase.value) + parseInt(duoOff.value),
  871. ctrlPointVal: parseInt(ele.value),
  872. type,
  873. },
  874. });
  875. sendOrder(msg);
  876. };
  877. </script>
  878. <script>
  879. // 电机js
  880. </script>
  881. </html>