|
|
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/json-formatter-js@2.3.4/dist/json-formatter.umd.min.js"></script> <title>Document</title> <style> *, html, body { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } .container { display: flex; width: 100vw; align-items: center; box-sizing: border-box; justify-content: space-between; } .left_chat { border: solid 1px #000; height: 100vh; display: flex; box-sizing: border-box; flex-direction: column; padding: 24px; overflow: scroll; width: 500px; min-width: 500px; } .right_message { height: 100vh; box-sizing: border-box; flex: 1; max-width: calc(100vw - 500px); } .btn { padding: 36px; font-size: 24px; margin-top: 24px; width: 100%; } .right_message { padding: 24px; border: solid 1px #000; display: flex; flex-direction: column; } .message_wrap { flex: 1; border: solid 1px #ddd; overflow: scroll; } .message { padding: 6px 8px; border-bottom: solid 1px #ddd; } .input_wrap { display: flex; align-items: center; /* margin-bottom: 20px; */ } .input_wrap .ws_connnect { flex: 2; padding: 4px 0; margin-right: 20px; } .input_wrap .connect { flex: 1; } .order { display: grid; grid-template-columns: repeat(1, 1fr); column-gap: 20px; row-gap: 10px; margin-bottom: 20px; } .status { padding: 4px 0; border-bottom: solid 2px #ddd; margin-bottom: 10px; } .tabs { margin: 20px 0; }
.tab-bar { display: flex; }
.tab { padding: 10px 20px; border: 1px solid #ccc; border-bottom: none; cursor: pointer; }
/* .active { border-bottom: 2px solid blue; } */
.tab-panel { display: none; padding: 20px; border: 1px solid #ccc; }
.active { display: block; }
.common_order_input { display: flex; align-items: center; justify-content: space-evenly; padding: 0 20px; margin-bottom: 10px; } .common_order_input .single { display: flex; flex-direction: column; align-items: center; } .single .input { width: 100%; text-align: center; padding: 4px; } .common_btns { width: 100%; } .btn_c { width: 100%; padding: 4px 0; margin-bottom: 10px; } .report_c { border: solid 1px #ddd; padding: 10px; } .form_line { display: flex; align-items: center; width: 100%; margin-bottom: 10px; } .form_line .tit { margin-right: 6px; white-space: nowrap; } .form_line .info { width: 100%; text-align: center; padding: 4px 0; } .report_c .title { border-bottom: solid 1px #ddd; margin-bottom: 10px; }
.mod-tab .tab_top { float: left; padding: 5px 20px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; background-color: #ddd; } .header .tab_top:last-child { border-right: 1px solid #ccc; } .content { border: 1px solid #ccc; width: 100%; height: 100%; } .header::after { content: ""; display: block; clear: both; }
.mod-tab .header .active { background-color: #fff; }
.mod-tab .content .panel { display: none; } .mod-tab .content .active { display: block; }
.card_container { padding: 0 10px; } .card_container .title { margin-bottom: 10px; border-bottom: solid 1px #ddd; } .card_container .form { display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; } .card_container .form .label { white-space: nowrap; margin-right: 10px; } .card_container .form .input { flex: 1; padding: 4px 0; text-align: center; } .card_container .form .btn { padding: 0; margin: 0; width: 40px; margin-left: 10px; } .card_container .form .input_config { width: 60px; padding: 4px 0; text-align: center; } </style> </head> <body> <div class="container"> <div class="left_chat"> <div class="input_wrap"> <input type="text" class="ws_connnect" id="ws_connnect_input" /> <button class="connect" onclick="connectWs()">连接</button> </div> <p class="status" id="status">当前状态： 未连接</p> <div class="mod-tab"> <div class="header"> <button class="tab_top active button1">基本控制</button> <button class="tab_top button2">舵机控制</button> <button class="tab_top button3">电机控制</button> </div> <div class="content"> <div class="panel active"> <div class="report_c"> <p class="title">上报解析</p> <div class="form_line"> <p class="tit">ADDRESS：</p> <input type="text" class="info" disabled id="report_address" /> </div> <div class="form_line"> <p class="tit">VALUE：</p> <input type="text" class="info" disabled id="report_val" /> </div> </div> <div class="report_c"> <p class="title">回执解析</p> <div class="form_line"> <p class="tit">ADDRESS：</p> <input type="text" class="info" disabled id="receipt_address" /> </div> <div class="form_line"> <p class="tit">VALUE：</p> <input type="text" class="info" disabled id="receipt_val" /> </div> <div class="form_line"> <p class="tit">结果：</p> <input type="text" class="info" value="无" disabled id="receipt_message" /> </div> </div> <div class="tabs"> <ul class="tab-bar"> <li class="tab active">通用指令</li> <li class="tab">指令列表</li> </ul> <div class="tab-content"> <div class="tab-panel active"> <div class="common_order_input"> <div class="single"> <p>ID</p> <input type="text" class="input" id="common_id" /> </div> <div class="single" style="margin-left: 10px; margin-right: 5px" > <p>BASE</p> <input type="text" class="input" id="common_base" /> </div> <div class="single" style="margin-left: 5px; margin-right: 10px" > <p>OFFSET</p> <input type="text" class="input" id="common_off" /> </div> <div class="single"> <p>VALUE</p> <input type="text" class="input" id="common_value" /> </div> </div> <div class="common_btns"> <button class="btn_c" onclick="writeFun()">写</button> <button class="btn_c" onclick="read()">读</button> <button class="btn_c" onclick="autoReport()"> 使能自动上报 </button> <button class="btn_c" onclick="reportCycle()"> 设置上报周期 </button> </div> </div> <div class="tab-panel"> <div class="order" id="order"></div> </div> </div> </div> </div> <div class="panel"> <div class="common_order_input" style="border-bottom: solid 2px #ddd; padding-bottom: 10px" > <div class="single"> <p>ID</p> <input type="text" class="input" id="duoji_id" /> </div> <div class="single" style="margin-left: 10px; margin-right: 5px" > <p>BASE</p> <input type="text" class="input" id="duoji_base" /> </div> <div class="single" style="margin-left: 5px; margin-right: 10px" > <p>OFFSET</p> <input type="text" class="input" id="duoji_offset" /> </div> </div> <div class="card_container"> <h3 class="title">状态</h3> <div class="form"> <p class="label">异常</p> <input type="text" class="input" id="duoji_exception" /> <button class="btn" onclick="readValue('#duoji_exception', 'read')" > 读 </button> </div> <div class="form"> <p class="label">状态</p> <input type="text" class="input" id="duoji_status" /> <button class="btn" onclick="readValue('#duoji_status', 'read')" > 读 </button> </div> <div class="form"> <p class="label">位置</p> <input type="text" class="input" id="duoji_position" /> <button class="btn" onclick="readValue('#duoji_position', 'read')" > 读 </button> </div> </div> <div class="card_container"> <h3 class="title">配置</h3> <div class="form"> <p class="label">反复运动启始位置</p> <input type="text" id="duoji_config_1" class="input_config" /> <button class="btn" onclick="readValue('#duoji_config_1', 'read')" > 读 </button> <button class="btn" onclick="readValue('#duoji_config_1', 'write')" > 写 </button> </div> <div class="form"> <p class="label">反复运动终止位置</p> <input type="text" class="input_config" id="duoji_config_2" /> <button class="btn" onclick="readValue('#duoji_config_2', 'read')" > 读 </button> <button class="btn" onclick="readValue('#duoji_config_2', 'write')" > 写 </button> </div> <div class="form"> <p class="label">运行时速度配置</p> <input type="text" class="input_config" id="duoji_config_3" /> <button class="btn" onclick="readValue('#duoji_config_3', 'read')" > 读 </button> <button class="btn" onclick="readValue('#duoji_config_3', 'write')" > 写 </button> </div> </div> <div class="card_container"> <h3 class="title">动作</h3> <div class="form"> <p class="label">舵机移动到角度</p> <input type="text" class="input" id="duoji_move_1" /> <button class="btn" onclick="readValue('#duoji_move_1', 'write')" > 写 </button> </div> <div class="form"> <p class="label">舵机停止</p> <input type="text" class="input" id="duoji_move_2" /> <button class="btn" onclick="readValue('#duoji_move_2', 'write')" > 写 </button> </div> <div class="form"> <p class="label">清除异常</p> <input type="text" class="input" id="duoji_move_3" /> <button class="btn" onclick="readValue('#duoji_move_3', 'write')" > 写 </button> </div> <div class="form"> <p class="label">反复运动</p> <input type="text" class="input" id="duoji_move_4" /> <button class="btn" onclick="readValue('#duoji_move_4', 'write')" > 写 </button> </div> </div> </div> <div class="panel"> <div class="common_order_input" style="border-bottom: solid 2px #ddd; padding-bottom: 10px" > <div class="single"> <p>ID</p> <input type="text" class="input" id="dianji_id" /> </div> <div class="single" style="margin-left: 10px; margin-right: 5px" > <p>BASE</p> <input type="text" class="input" id="dianji_base" /> </div> <div class="single" style="margin-left: 5px; margin-right: 10px" > <p>OFFSET</p> <input type="text" class="input" id="dianji_offset" /> </div> </div> <div class="card_container"> <h3 class="title">状态</h3> <div class="form"> <p class="label">设备状态</p> <input type="text" class="input" id="dianji_status_1" /> <button class="btn" onclick="readValueD('#dianji_status_1', 'read')" > 读 </button> </div> <div class="form"> <p class="label">异常状态</p> <input type="text" class="input" id="dianji_status_2" /> <button class="btn" onclick="readValueD('#dianji_status_2', 'read')" > 读 </button> </div> <div class="form"> <p class="label">当前转速</p> <input type="text" class="input" id="dianji_status_3" /> <button class="btn" onclick="readValueD('#dianji_status_3', 'read')" > 读 </button> </div> <div class="form"> <p class="label">当前位置</p> <input type="text" class="input" id="dianji_status_4" /> <button class="btn" onclick="readValueD('#dianji_status_4', 'read')" > 读 </button> </div> </div> <div class="card_container"> <h3 class="title">配置</h3> <div class="form"> <p class="label">加速度</p> <input type="text" class="input_config" id="dianji_config_1" /> <button class="btn" onclick="readValueD('#dianji_config_1', 'read')" > 读 </button> <button class="btn" onclick="readValueD('#dianji_config_1', 'write')" > 写 </button> </div> <div class="form"> <p class="label">减速度</p> <input type="text" class="input_config" id="dianji_config_2" /> <button class="btn" onclick="readValueD('#dianji_config_2', 'read')" > 读 </button> <button class="btn" onclick="readValueD('#dianji_config_2', 'write')" > 写 </button> </div> <div class="form"> <p class="label">速度</p> <input type="text" class="input_config" id="dianji_config_3" /> <button class="btn" onclick="readValueD('#dianji_config_3', 'read')" > 读 </button> <button class="btn" onclick="readValueD('#dianji_config_3', 'write')" > 写 </button> </div> <div class="form"> <p class="label">零点偏移</p> <input type="text" class="input_config" id="dianji_config_4" /> <button class="btn" onclick="readValueD('#dianji_config_4', 'read')" > 读 </button> <button class="btn" onclick="readValueD('#dianji_config_4', 'write')" > 写 </button> </div> <div class="form"> <p class="label">归零速度</p> <input type="text" class="input_config" id="dianji_config_5" /> <button class="btn" onclick="readValueD('#dianji_config_5', 'read')" > 读 </button> <button class="btn" onclick="readValueD('#dianji_config_5', 'write')" > 写 </button> </div> <div class="form"> <p class="label">归零减速度</p> <input type="text" class="input_config" id="dianji_config_6" /> <button class="btn" onclick="readValueD('#dianji_config_6', 'read')" > 读 </button> <button class="btn" onclick="readValueD('#dianji_config_6', 'write')" > 写 </button> </div> <div class="form"> <p class="label">归零最大位移</p> <input type="text" class="input_config" id="dianji_config_7" /> <button class="btn" onclick="readValueD('#dianji_config_7', 'read')" > 读 </button> <button class="btn" onclick="readValueD('#dianji_config_7', 'write')" > 写 </button> </div> <div class="form"> <p class="label">归零第一阶段移动距离</p> <input type="text" class="input_config" id="dianji_config_8" /> <button class="btn" onclick="readValueD('#dianji_config_8', 'read')" > 读 </button> <button class="btn" onclick="readValueD('#dianji_config_8', 'write')" > 写 </button> </div> </div> <div class="card_container"> <h3 class="title">动作</h3> <div class="form"> <p class="label">速度模式控制</p> <input type="text" class="input" id="dianji_move_1" /> <button class="btn" onclick="readValueD('#dianji_move_1', 'write')" > 写 </button> </div> <div class="form"> <p class="label">位置模式控制</p> <input type="text" class="input" id="dianji_move_2" /> <button class="btn" onclick="readValueD('#dianji_move_2', 'write')" > 写 </button> </div> <div class="form"> <p class="label">位置模式相对位置</p> <input type="text" class="input" id="dianji_move_3" /> <button class="btn" onclick="readValueD('#dianji_move_3', 'write')" > 写 </button> </div> <div class="form"> <p class="label">归零</p> <input type="text" class="input" id="dianji_move_4" /> <button class="btn" onclick="readValueD('#dianji_move_4', 'write')" > 写 </button> </div> <div class="form"> <p class="label">零位校准</p> <input type="text" class="input" id="dianji_move_5" /> <button class="btn" onclick="readValueD('#dianji_move_5', 'write')" > 写 </button> </div> <div class="form"> <p class="label">停止</p> <input type="text" class="input" id="dianji_move_6" /> <button class="btn" onclick="readValueD('#dianji_move_6', 'write')" > 写 </button> </div> <div class="form"> <p class="label">清空异常</p> <input type="text" class="input" id="dianji_move_7" /> <button class="btn" onclick="readValueD('#dianji_move_7', 'write')" > 写 </button> </div> </div> </div> </div> </div> </div> <div class="right_message"> <div class="message_wrap" id="message_wrap"></div> <div style="display: flex; align-items: center; margin-top: 10px"> <textarea style="flex: 1" name="bio" rows="15" cols="40"></textarea> <div style="display: flex; flex-direction: column; height: 100%"> <button style="flex: 1" onclick="sendMessage()">发送</button> <button style="flex: 1" onclick="clearTextArea()">清空</button> </div> </div> </div> </div> </body> <script src="./config.js"></script> <script> window.onload = () => { const commonI = document.querySelector("#common_id"); const commonB = document.querySelector("#common_base"); const dianI = document.querySelector("#dianji_id"); const dianB = document.querySelector("#dianji_base"); const duoI = document.querySelector("#duoji_id"); const duoB = document.querySelector("#duoji_base"); commonI.value = localStorage.getItem("id"); commonB.value = localStorage.getItem("base"); dianI.value = localStorage.getItem("d_id"); dianB.value = localStorage.getItem("d_base"); duoI.value = localStorage.getItem("du_id"); duoB.value = localStorage.getItem("du_base"); }; var ws = null; const websocketInput = document.querySelector("#ws_connnect_input"); websocketInput.value = websocketAddress; // 先向order下动态添加指令集合 const order = document.querySelector("#order");
for (let key in config) { const button = document.createElement("button"); button.textContent = key; button.className = "order_btn"; button.setAttribute("v", key); order?.appendChild(button); }
order.addEventListener("click", (e) => { const item = e.target; if (item && item.getAttribute("v")) { const key = item.getAttribute("v"); sendOrder(config[key]); } });
const commonI = document.querySelector("#common_id"); const commonB = document.querySelector("#common_base"); const dianI = document.querySelector("#dianji_id"); const dianB = document.querySelector("#dianji_base"); const duoI = document.querySelector("#duoji_id"); const duoB = document.querySelector("#duoji_base"); commonI.addEventListener("input", (e) => { localStorage.setItem("id", e.target.value); }); commonB.addEventListener("input", (e) => { localStorage.setItem("base", e.target.value); }); dianI.addEventListener("input", (e) => { localStorage.setItem("d_id", e.target.value); }); dianB.addEventListener("input", (e) => { localStorage.setItem("d_base", e.target.value); }); duoI.addEventListener("input", (e) => { localStorage.setItem("du_id", e.target.value); }); duoB.addEventListener("input", (e) => { localStorage.setItem("du_base", e.target.value); });
const tabs = document.querySelector(".tabs"); const tabBars = document.querySelectorAll(".tab-bar .tab"); const tabPanels = document.querySelectorAll(".tab-content .tab-panel");
for (let i = 0; i < tabBars.length; i++) { tabBars[i].onclick = function () { removeActive(); this.classList.add("active"); tabPanels[i].classList.add("active"); }; }
function removeActive() { for (let i = 0; i < tabBars.length; i++) { tabBars[i].classList.remove("active"); tabPanels[i].classList.remove("active"); } } const clearMessage = () => { const messageWrap = document.querySelector("#message_wrap"); messageWrap.innerHTML = ""; }; const clearTextArea = () => { const textArea = document.querySelector("textarea"); textArea.value = ""; clearMessage(); }; const sendMessage = () => { if (ws) { const textArea = document.querySelector("textarea"); const messageVal = textArea.value; ws.send(messageVal); const messageWrap = document.querySelector("#message_wrap"); const div = document.createElement("div"); div.classList = ["message"]; div.textContent = `Tx: ${messageVal}`; messageWrap.appendChild(div); messageWrap.scrollTop = messageWrap.scrollHeight - messageWrap.clientHeight; } else { } };
const transValToName = (val) => { switch (val) { case 0x00: return "kSuccess"; case 2: return "kRegNotFound"; case 3: return "kRegNotWritable"; case 4: return "kRegNotReadable"; case 5: return "kIllegalValue"; case 6: return "kDeviceBusy"; case 7: return "kDeviceException"; case 8: return "kChannelDeviceException"; case 9: return "kParameterError"; case 10: return "kOvertime"; case 11: return "kOperationInvalid"; case 12: return "kunsupportOperation"; case 13: return "kIllegalOperation"; case 14: return "kPermissionDenied"; case 15: return "koutOfRange"; case 16: return "kmotorNotRunToHome"; case 17: return "kParameterOutOfLimit"; } }; const connectWs = () => { console.log(123); const input = document.querySelector("#ws_connnect_input"); const status = document.querySelector("#status"); const address = input.value; try { ws = new WebSocket(address); ws.onopen = function () { console.log("Connected to WebSocket server."); // 改变状态 status.innerHTML = `当前状态： 已连接${address}`; };
ws.onmessage = function (evt) { const messageWrap = document.querySelector("#message_wrap"); const div = document.createElement("div"); div.classList = ["message"]; const formatter = new JSONFormatter(JSON.parse(evt.data), 2); const formatted = formatter.render(); // div.textContent = `Rx: ${evt.data}`; const p = document.createElement("p"); p.innerHTML = `Rx:`; p.style.background = "#ddd"; messageWrap.appendChild(p); messageWrap.appendChild(formatted); messageWrap.scrollTop = messageWrap.scrollHeight - messageWrap.clientHeight; // 对消息进行处理 try { const { message: messageBody } = JSON.parse(evt.data); const { type, ctrlPointAddr, ctrlPointVal } = messageBody; const receiptMessage = document.querySelector("#receipt_message"); const receiptAddress = document.querySelector("#receipt_address"); const receiptVal = document.querySelector("#receipt_val"); const reportAddress = document.querySelector("#report_address"); const reportVal = document.querySelector("#report_val"); if (type == "receipt") { receiptMessage.value = "正确"; receiptAddress.value = ctrlPointAddr; receiptVal.value = ctrlPointVal; } if (type == "error_receipt") { receiptMessage.value = "错误"; receiptAddress.value = ctrlPointAddr; // 错误回执需要吧值和英文进行对应 receiptVal.value = transValToName(ctrlPointVal); } if (type == "report") { reportAddress.value = ctrlPointAddr; reportVal.value = ctrlPointVal; } } catch (error) { console.log(error); } };
ws.onclose = function () { status.innerHTML = `当前状态： 已关闭`; }; } catch (error) { status.innerHTML = `当前状态： 连接错误`; } }; const sendOrder = (msg) => { if (ws) { ws.send(msg); const messageWrap = document.querySelector("#message_wrap"); const div = document.createElement("div"); div.classList = ["message"]; const formatter = new JSONFormatter(JSON.parse(msg), 2); const formatted = formatter.render(); const p = document.createElement("p"); p.innerHTML = `Tx:`; p.style.background = "#ddd"; messageWrap.appendChild(p); messageWrap.appendChild(formatted); messageWrap.scrollTop = messageWrap.scrollHeight - messageWrap.clientHeight; } };
const getCommonOrderInput = (type) => { const id = document.querySelector("#common_id"); const base = document.querySelector("#common_base"); const off = document.querySelector("#common_off"); const value = document.querySelector("#common_value"); const { protocol, message } = commonMessage; return JSON.stringify({ protocol, message: { ...message, targetId: parseInt(id.value), ctrlPointAddr: parseInt(base.value) + parseInt(off.value), ctrlPointVal: parseInt(value.value), type, }, }); };
const writeFun = () => { const msg = getCommonOrderInput("write"); sendOrder(msg); }; const read = () => { const msg = getCommonOrderInput("read"); sendOrder(msg); }; const autoReport = () => { const msg = getCommonOrderInput("set_auto_report_enable_flag"); sendOrder(msg); }; const reportCycle = () => { const msg = getCommonOrderInput("set_auto_report_period"); sendOrder(msg); };
document.querySelectorAll(".tab_top").forEach(function (node) { node.addEventListener("click", function () { var index; this.parentElement .querySelectorAll(".tab_top") .forEach(function (e, inx) { //e.style.display='none' 跳转的时候隐藏按钮 e.classList.remove("active"); if (node === e) { index = inx; } }); this.classList.add("active"); this.parentElement.nextElementSibling .querySelectorAll(".panel") .forEach(function (panel) { panel.classList.remove("active"); }); this.parentElement.nextElementSibling .querySelectorAll(".panel") [index].classList.add("active"); }); }); </script> <script> // 舵机封装读写方法 const readValue = (id, type) => { const duoId = document.querySelector("#duoji_id"); const duoBase = document.querySelector("#duoji_base"); const duoOff = document.querySelector("#duoji_offset"); const ele = document.querySelector(id); const { protocol, message } = commonMessage; let addr = 0; if (duoBase.value && duoOff.value) { addr = parseInt(duoBase.value) + parseInt(duoOff.value); } else { addr = parseInt(duoBase.value); } const msg = JSON.stringify({ protocol, message: { ...message, targetId: parseInt(duoId.value), ctrlPointAddr: addr, ctrlPointVal: parseInt(ele.value), type, }, }); sendOrder(msg); }; </script> <script> // 电机js const readValueD = (id, type) => { const duoId = document.querySelector("#dianji_id"); const duoBase = document.querySelector("#dianji_base"); const duoOff = document.querySelector("#dianji_offset"); const ele = document.querySelector(id); const { protocol, message } = commonMessage; let addr = null; if (duoBase.value && duoOff.value) { addr = parseInt(duoBase.value) + parseInt(duoOff.value); } else { addr = parseInt(duoBase.value); } console.log(addr); const msg = JSON.stringify({ protocol, message: { ...message, targetId: parseInt(duoId.value), ctrlPointAddr: addr, ctrlPointVal: parseInt(ele.value), type, }, }); sendOrder(msg); }; </script></html>
|
