-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrobo_arm.html
154 lines (125 loc) · 5.21 KB
/
robo_arm.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!--
课程系列: micropython进阶拓展(esp32单片机开发)
https://edu.csdn.net/course/detail/29666
制作人信息:
微信: gamefunc / 18576539615
qq: 32686647
转载与修改需要附带以上信息;
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>gamefunc: robo_arms_control</title>
</head>
<body>
<h1 id = "SHOW_TEXT_H1">控制机械臂: (websocket 未连接)</h1>
<h1 id="button_description" >
w: 爪前; s: 爪后; a: 左转; d: 右转;<br>
空格: 爪上; ctrl: 爪下;<br>
1: 爪开; 2: 爪合;
</h1>
<br><hr><br>
<!-- 创建一个div, 用于显示从 websocket 发送过来的信息 -->
<div id="ws_msg_black_board"
style="
/* 设置blackboard宽度 */
width:900px;
/* 设置blackboard高度*/
height:100px;
/* 背景: 黑色*/
background-color:black;
/* 字体: 白色*/
color:white;
/* 边框 红色*/
border: solid 2px rgb(243,12,70);
/* 内容多到超过了这个blackboard尺寸后干什么, 默认滚动机制 */
overflow:auto ;
margin:0px auto;
"
></div>
<br><hr><br>
<input type="button"
id = "on_off_button"
onclick="switch_on_off()"
value="步进角度, 可以是小数点, 该按按钮绿色的时候允许控制servo电机">
<input type="text" id="turn_step" value="0.5">
<!--javascript 相关代码: 开始-->
<script type="text/javascript">
var CAN_CTL_SERVO = true;
// send websocket 的开关;
function switch_on_off(){
if(CAN_CTL_SERVO == false){
CAN_CTL_SERVO = true;
document.getElementById(
"on_off_button").style.backgroundColor = "green";
}else{
CAN_CTL_SERVO = false;
document.getElementById(
"on_off_button").style.backgroundColor = "red";
}
}// switch_on_off()
// 先允许一次, 开头不允许控制电机;
switch_on_off();
// 实例化websockets连接;
var WS_CON = new WebSocket("ws://10.2.0.252/servo_control");
// 当ws_con实例连上后执行函数里面内容;
WS_CON.onopen = function(){
console.log("已链上ws");
document.getElementById("SHOW_TEXT_H1").innerHTML =
"控制机械臂: (websocket 已连接)";
}// WS_CON.onopen()
// 当ws_con收到消息后显示;
WS_CON.onmessage = function(recv_msg){
// console.log("收到信息: " + recv_msg.data);
let recv_data = recv_msg.data;
let w = document.getElementById("ws_msg_black_board");
w.innerHTML = recv_data;
}// WS_CON.onmessage()
// 当ws_con实例连接过程发生错误时:
WS_CON.onerror = function(error_msg){
console.log("错误信息: " + error_msg);
}
// 当ws_con实例断开连接时:
WS_CON.onclose = function(close_msg){
console.log(close_msg);
}
// 监听用户按下哪个按键并且干什么的函数;
document.onkeydown = function(event){
if(CAN_CTL_SERVO == false){ return; }
// 获取用户按下哪个案件:
let k = String.fromCharCode(
event.keyCode).toLowerCase();
console.log(k);
// 获取 加/减 多少度;
let turn_step = document.getElementById("turn_step").value;
// 判断 turn_step 是不是 数字;
if(isNaN(turn_step) == true){ return; }
// f"{控制的电机号的k}_{添加/减少多少度}_p加m减"
let protocol_msg = "";
if(k == " "){// 爪上
protocol_msg = `16_${turn_step}_p`;
}else if(k == ""){// 爪下
protocol_msg = `16_${turn_step}_m`;
}else if(k == "1"){// 爪开
protocol_msg = `19_${turn_step}_p`;
}else if(k == "2"){// 爪合
protocol_msg = `19_${turn_step}_m`;
}else if(k == "w"){// 爪前
protocol_msg = `17_${turn_step}_p`;
}else if(k == "s"){// 爪后
protocol_msg = `17_${turn_step}_m`;
}else if(k == "a"){// 左转
protocol_msg = `18_${turn_step}_p`;
}else if(k == "d"){// 右转
protocol_msg = `18_${turn_step}_m`;
}else{
return;
}
console.log(protocol_msg);
WS_CON.send(protocol_msg);
}// document.onkeydown()
</script>
<!--javascript 相关代码: 结束-->
</body>
</html>