我正在构建一个基于树莓派的机器人。我目前正在研究控制部分。
我找到了2个独立的脚本，它们自己工作得很好，但我似乎找不到一种方法来构建我想要的这些脚本。
这就是我想要的。我想用一个软操纵杆来控制我的机器人(见下面操纵杆的代码)操纵杆的代码工作完美，因为它绘制了一个操纵杆，并将X和Y值实时返回给浏览器。现在我想要的是使用websocket将这些值发送到我的服务器。我在我的服务器上用python安装了一个websocket服务器，它正在从我发现的示例脚本中接收值。
所以我想能够传递的值从操纵杆到websocket服务器。
如有任何提示，不胜感激
这是操纵杆部分
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
overflow : hidden;
padding : 0;
margin : 0;
background-color: #BBB;
}
#info {
position : absolute;
top : 0px;
width : 100%;
padding : 5px;
text-align : center;
}
#info a {
color : #66F;
text-decoration : none;
}
#info a:hover {
text-decoration : underline;
}
#container {
width : 100%;
height : 100%;
overflow : hidden;
padding : 0;
margin : 0;
-webkit-user-select : none;
-moz-user-select : none;
}
</style>
</head>
<body>
<div id="container"></div>
<label id="conn_text"></label><br />
<div id="messages_txt" /></div>
<div id="info">
Touch the screen and move
-
works with mouse too as debug
<br/>
<span id="result"></span>
</div>
<script src="virtualjoystick.js"></script>
<script>
console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available");
var joystick = new VirtualJoystick({
container : document.getElementById('container'),
mouseSupport : true,
//stationaryBase: true,
baseX: 200,
baseY: 200,
limitStickTravel: true,
stickRadius: 100
});
joystick.addEventListener('touchStart', function(){
console.log('down')
})
joystick.addEventListener('touchEnd', function(){
console.log('up')
})
setInterval(function(){
var outputEl = document.getElementById('result');
outputEl.innerHTML = '<b>Result:</b> '
+ ' dx:'+joystick.deltaX()
+ ' dy:'+joystick.deltaY()
+ (joystick.right() ? ' right' : '')
+ (joystick.up() ? ' up' : '')
+ (joystick.left() ? ' left' : '')
+ (joystick.down() ? ' down' : '')
}, 1/30 * 1000);
setInterval(function(){
var message = joystick.deltaX();
ws.send(message);
}, 1/30 * 1000);
</script>
</body>
</html>
这里是socket部分
<html>
<head>
<title>Websocket</title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
</head>
<body>
<h1>Websocket</h1>
<label id="conn_text"></label><br />
<input type="text" id="input_text"/>
<input type="submit" id="button" value="Send" /><br />
<div id="messages_txt" />
<script>
$(document).ready(function () {
//change example.com with your IP or your host
var ws = new WebSocket("ws://192.168.2.35:8888/ws");
ws.onopen = function(evt) {
var conn_status = document.getElementById('conn_text');
conn_status.innerHTML = "Connection status: Connected!"
};
ws.onmessage = function(evt) {
var newMessage = document.createElement('p');
newMessage.textContent = "Server: " + evt.data;
document.getElementById('messages_txt').appendChild(newMessage);
};
ws.onclose = function(evt) {
alert ("Connection closed");
};
$("#button").click(function(evt) {
evt.preventDefault();
var message = $("#input_text").val();
ws.send(message);
var newMessage = document.createElement('p');
newMessage.textContent = "Client: " + message;
document.getElementById('messages_txt').textContent=newMessage.textContent;
});
});
</script>
</body>
</html>
在
var message = joystick.deltaX();
ws.send(message);
包含在load事件处理程序
window.onload = function() {
console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available");
var joystick = new VirtualJoystick({
container : document.getElementById('container'),
mouseSupport : true,
//stationaryBase: true,
baseX: 200,
baseY: 200,
limitStickTravel: true,
stickRadius: 100
});
joystick.addEventListener('touchStart', function(){
console.log('down')
});
joystick.addEventListener('touchEnd', function(){
console.log('up')
});
var outputEl = document.getElementById('result');
setInterval(function(){
outputEl.innerHTML = '<b>Result:</b> '
+ ' dx:'+joystick.deltaX()
+ ' dy:'+joystick.deltaY()
+ (joystick.right() ? ' right' : '')
+ (joystick.up() ? ' up' : '')
+ (joystick.left() ? ' left' : '')
+ (joystick.down() ? ' down' : '')
}, 1/30 * 1000);
setInterval(function(){
var message = joystick.deltaX();
ws.send(message);
}, 1/30 * 1000);
}
或使用.ready(function() {})。
$(function() {/* joystick stuff here */})
var outputEl = document.getElementById('result');不能在尝试赋值时被定义。
同样，没有必要在每次setInterval()调用时重新定义outputEl。您可以在setInterval调用之外定义变量。