通过ROSbridge控制小海龟(turtlesim)的具体案例。使用一个简单的Python脚本通过通过局域网上连接上传ROSbridge服务器,并发送速度指令来控制小海龟的移动
功能包的结构如下:
HTML文件的编写(界面)
html用于存放html文件,内容包含了可以通过前进,后退,左转,右转,停止等动作,在这里已经编写好了,最后的效果如下图:
在这里附上程序源码,将源码复制自己的目录的当中即可,也不一定是要在自己的功能包当中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Turtle Control</title>
<style>
/* 简单的样式 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Turtle Control</h1>
<button id="forwardButton">前进</button>
<button id="backwardButton">后退</button>
<button id="leftButton">左转</button>
<button id="rightButton">右转</button>
<button id="stopButton">停止</button>
<script src="../js/turtle_control.js"></script>
</body>
</html>
在上述的html文件当中,会用到一个叫turtle_control.js的文件,这个文件就是后续需要通过编写然后给ROS系统传递信息。路径需要自行记住。
JS文件的编写(发送控制消息)
同样的通过编写js文件,语法就是经典的JavaScript,程序源码如下:
下面的程序当中,192.168.31.110要更换成自己的 ip地址,后面的9090要记住,后面调用rosbridge 的时候会用得上。
// WebSocket连接信息
const wsUri = "ws://192.168.31.110:9090";
let socket = new WebSocket(wsUri);
// 定义速度消息
function createVelocityCommand(linear, angular) {
return JSON.stringify({
op: "publish",
type: "geometry_msgs/Twist",
topic: "/turtle1/cmd_vel",
msg: {
linear: { x: linear, y: 0, z: 0 },
angular: { x: 0, y: 0, z: angular }
}
});
}
// 处理WebSocket连接打开
socket.onopen = function(event) {
console.log("Connected to ROSbridge");
};
// 处理WebSocket接收到的消息
socket.onmessage = function(event) {
console.log("Received:", event.data);
};
// 处理WebSocket错误
socket.onerror = function(error) {
console.error("WebSocket Error:", error);
};
// 处理按钮点击事件
document.getElementById('forwardButton').addEventListener('click', function() {
socket.send(createVelocityCommand(1, 0)); // 前进
});
document.getElementById('backwardButton').addEventListener('click', function() {
socket.send(createVelocityCommand(-1, 0)); // 后退
});
document.getElementById('leftButton').addEventListener('click', function() {
socket.send(createVelocityCommand(0, 1)); // 左转
});
document.getElementById('rightButton').addEventListener('click', function() {
socket.send(createVelocityCommand(0, -1)); // 右转
});
document.getElementById('stopButton').addEventListener('click', function() {
socket.send(createVelocityCommand(0, 0)); // 停止
});
// 可以在这里添加更多的逻辑,比如处理关闭连接等
安装rosbridge_suite包
确保你已经安装了ROS和rosbridge_suite
包。你可以通过以下命令安装它们(以ROS Noetic为例):
sudo apt-get install ros-noetic-rosbridge-suite
开始执行
然后,启动ROScore和小海龟仿真器:
roscore
rosrun turtlesim turtlesim_node
接下来,启动ROSbridge WebSocket服务器。你可以使用rosbridge_websocket
包来做到这一点:
rosrun rosbridge_server rosbridge_websocket
在这里为了方便,我写成了一个launch文件同时启动这两个节点,程序内容如下:
<?xml version="1.0"?>
<launch>
<node pkg="turtlesim" type="turtlesim_node" name="turtle1" output="screen"/>
<node pkg="rosbridge_server" type="rosbridge_websocket" name="rosbridge_server" output="screen"/>
</launch>
接着就可以按部就班的执行了
-
新建一个命令行终端,输入指令
roslaunch web_rosbridge web_rosbridge.launch
-
然后再新建一个命令行终端,接着输入指令
python3 -m http.server 8080
这两个指令的ip地址要区分开rosbridge通信的地址是的localhost:9090,而上传到本地的服务端用到的是8080端口,也就是我们只需要通过查看自己的设备在同一个局域网下的ip地址,后面跟上8080,就可以访问了,还有就是需要注意的就是输入第二个指令执行这个http.server服务的时候,尽量在自己html目录下进行执行,方便打开对应的ip地址直接可以进行查看。
同样的我们通过手机,连接上同样的局域网之后,接着输入自己手机的ip地址到浏览器上,记得加上对应的8080号端口,效果如下:
🌸🌸🌸完结撒花🌸🌸🌸
🌈🌈Redamancy🌈🌈