maochaoying
/
websocket-util
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

local storage

main
maochaoying 2 years ago
parent
73edc545fd
commit
c52cb0db65
1 changed files with 259 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 308
      index.html

308
index.html
View File

@ -38,6 +38,7 @@
height: 100vh;
box-sizing: border-box;
flex: 1;
max-width: calc(100vw - 500px);
}
.btn {
padding: 36px;
@ -495,133 +496,300 @@
>
<div class="single">
<p>ID</p>
<input type="text" class="input" />
<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" />
<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" />
<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" />
<button class="btn">读</button>
<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" />
<button class="btn">读</button>
<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" />
<button class="btn">读</button>
<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" />
<button class="btn">读</button>
<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" />
<button class="btn">读</button>
<button class="btn">写</button>
<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" />
<button class="btn">读</button>
<button class="btn">写</button>
<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" />
<button class="btn">读</button>
<button class="btn">写</button>
<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" />
<button class="btn">读</button>
<button class="btn">写</button>
<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" />
<button class="btn">读</button>
<button class="btn">写</button>
<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" />
<button class="btn">读</button>
<button class="btn">写</button>
<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" />
<button class="btn">读</button>
<button class="btn">写</button>
<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" />
<button class="btn">读</button>
<button class="btn">写</button>
<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" />
<button class="btn">写</button>
<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" />
<button class="btn">写</button>
<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" />
<button class="btn">写</button>
<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" />
<button class="btn">写</button>
<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" />
<button class="btn">写</button>
<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" />
<button class="btn">写</button>
<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" />
<button class="btn">写</button>
<input type="text" class="input" id="dianji_move_7" />
<button
class="btn"
onclick="readValueD('#dianji_move_7', 'write')"
>
写
</button>
</div>
</div>
</div>
@ -645,8 +813,16 @@
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");
@ -672,12 +848,28 @@
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");
@ -912,5 +1104,23 @@
</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;
const msg = JSON.stringify({
protocol,
message: {
...message,
targetId: parseInt(duoId.value),
ctrlPointAddr: parseInt(duoBase.value) + parseInt(duoOff.value),
ctrlPointVal: parseInt(ele.value),
type,
},
});
sendOrder(msg);
};
</script>
</html>
Write Preview
Loading…
Cancel
Save