157 lines
4.7 KiB
JavaScript
157 lines
4.7 KiB
JavaScript
/**
|
||
* wx.send("操作类型|操作状态|其他数值")
|
||
* 操作类型：y 代表速度摇杆
|
||
* x 代表方向摇杆
|
||
* o 代表其他操作
|
||
*/
|
||
class IndexPage {
|
||
constructor() {
|
||
|
||
// 自动壁障的开关
|
||
this.obstacleStatus =
|
||
localStorage.getItem("obstacleStatus") == null
|
||
? false
|
||
: JSON.parse(localStorage.getItem("obstacleStatus"))
|
||
|
||
// 前大灯的开关
|
||
this.fronLamp =
|
||
localStorage.getItem("fronLamp") == null
|
||
? false
|
||
: JSON.parse(localStorage.getItem("fronLamp"))
|
||
|
||
// 双闪的开关
|
||
this.doubleStatus =
|
||
localStorage.getItem("doubleStatus") == null
|
||
? false
|
||
: JSON.parse(localStorage.getItem("doubleStatus"))
|
||
|
||
|
||
// 手势跟随的开关
|
||
this.handStatus =
|
||
localStorage.getItem("handStatus") == null
|
||
? false
|
||
: JSON.parse(localStorage.getItem("handStatus"))
|
||
|
||
|
||
this.doubleIntervalId = null;
|
||
this.socket = new WS();
|
||
this.Joystick();
|
||
this.bindActionButton();
|
||
}
|
||
|
||
Joystick() {
|
||
// 前进后退摇杆
|
||
// status：-1 前进 1 后退，0 停止
|
||
// speed：前进后退的速度 0 ~ 255 之间
|
||
var s1 = new Joystick("stick1", "y", (status, speed) => {
|
||
this.socket.ws.send(`y|${status}|${speed}`)
|
||
});
|
||
|
||
// 左右转向摇杆
|
||
// status：3左转 4右转 0 转向恢复原样（直行）
|
||
var s2 = new Joystick("stick2", "x", (status) => {
|
||
this.socket.ws.send(`x|${status}`)
|
||
});
|
||
|
||
this.socket.onmessage((res) => {
|
||
console.log("res = ",res);
|
||
alert("web收到请求为：")
|
||
alert(JSON.stringify(res))
|
||
res = res.split("|");
|
||
switch (res[0]) {
|
||
case "server":
|
||
if (res[1] == "y") {
|
||
$("#stick1").style = "";
|
||
$("#stick2").style = "";
|
||
s1.active = false;
|
||
s1.dragStart = { x: 0, y: 0 };
|
||
|
||
s2.active = false;
|
||
s2.dragStart = { x: 0, y: 0 };
|
||
}
|
||
break;
|
||
case "client":
|
||
|
||
break;
|
||
|
||
default:
|
||
break;
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
bindActionButton() {
|
||
|
||
if (this.obstacleStatus) {
|
||
$(".obstacle_wrap").classList.add("open")
|
||
}
|
||
|
||
if (this.fronLamp) {
|
||
$(".icon-zidongdadeng").classList.add("open")
|
||
}
|
||
|
||
if (this.doubleStatus) {
|
||
$(".icon-jinggao_o").classList.add("open")
|
||
}
|
||
|
||
if (this.handStatus) {
|
||
$(".hand_wrap").classList.add("open")
|
||
}
|
||
|
||
// 喇叭开关
|
||
$(".icon-xiaolaba").onclick = () => {
|
||
this.play();
|
||
this.socket.ws.send(`b|buzzer|1`)
|
||
}
|
||
|
||
// 手势跟随
|
||
$(".hand_wrap").onclick = () => {
|
||
this.play();
|
||
this.handStatus = !this.handStatus
|
||
$(".hand_wrap").classList.toggle("open")
|
||
localStorage.setItem("handStatus", this.handStatus)
|
||
this.socket.ws.send(`b|openHand|${this.handStatus ? '1' : '0'}`)
|
||
}
|
||
|
||
// 前面大灯
|
||
$(".icon-zidongdadeng").onclick = () => {
|
||
this.play();
|
||
this.fronLamp = !this.fronLamp
|
||
$(".icon-zidongdadeng").classList.toggle("open")
|
||
localStorage.setItem("fronLamp", this.fronLamp)
|
||
this.socket.ws.send(`b|fronLamp|${this.fronLamp ? '1' : '0'}`)
|
||
}
|
||
|
||
// 双闪
|
||
$(".icon-jinggao_o").onclick = () => {
|
||
this.play();
|
||
this.doubleStatus = !this.doubleStatus
|
||
$(".icon-jinggao_o").classList.toggle("open")
|
||
localStorage.setItem("doubleStatus", this.doubleStatus)
|
||
if (this.doubleStatus) {
|
||
this.doubleIntervalId = setInterval(() => this.socket.ws.send(`b|doubleFlash|1`), 1000)
|
||
} else {
|
||
clearInterval(this.doubleIntervalId)
|
||
this.socket.ws.send(`b|doubleFlash|0`)
|
||
}
|
||
}
|
||
|
||
$(".obstacle_wrap").onclick = () => {
|
||
this.play();
|
||
// 1 true, 0 false
|
||
this.obstacleStatus = !this.obstacleStatus
|
||
|
||
$(".obstacle_wrap").classList.toggle("open")
|
||
localStorage.setItem("obstacleStatus", this.obstacleStatus)
|
||
this.socket.ws.send(`b|obstacle|${this.obstacleStatus ? '1' : '0'}`)
|
||
|
||
}
|
||
}
|
||
|
||
play() {
|
||
$(".actionAudio").play();
|
||
}
|
||
}
|
||
|
||
new IndexPage(); |