产品众筹网站开发,大型网站外链是怎么建设的,企业在线设计网站,住房城乡住房和城乡建设部网站首页通过ROSbridge控制小海龟#xff08;turtlesim#xff09;的具体案例。使用一个简单的Python脚本通过通过局域网上连接上传ROSbridge服务器#xff0c;并发送速度指令来控制小海龟的移动 功能包的结构如下#xff1a;
HTML文件的编写#xff08;界面#xff09;
html用…通过ROSbridge控制小海龟turtlesim的具体案例。使用一个简单的Python脚本通过通过局域网上连接上传ROSbridge服务器并发送速度指令来控制小海龟的移动 功能包的结构如下
HTML文件的编写界面
html用于存放html文件内容包含了可以通过前进后退左转右转停止等动作在这里已经编写好了最后的效果如下图 在这里附上程序源码将源码复制自己的目录的当中即可也不一定是要在自己的功能包当中
!DOCTYPE html
html langen
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleTurtle Control/title style /* 简单的样式 */ body { font-family: Arial, sans-serif; text-align: center; } button { margin: 10px; padding: 10px 20px; font-size: 16px; } /style
/head
body h1Turtle Control/h1 button idforwardButton前进/button button idbackwardButton后退/button button idleftButton左转/button button idrightButton右转/button button idstopButton停止/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 version1.0?
launchnode pkgturtlesim typeturtlesim_node nameturtle1 outputscreen/node pkgrosbridge_server typerosbridge_websocket namerosbridge_server outputscreen/
/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
