规范网站维护 建设 管理,wordpress新增站点,常用的网站流量统计软件有哪些,wordpress 菜单栏调用ros2与web通信实例
最近需要进行ros2与web端进行通信操作#xff0c;目标是ros2发送的消息web端能够显示在界面#xff0c;并且前端能够发布数据#xff0c;最终实例如下#xff1a; 然而网上查的的资料如古月居的#xff1a;
利用Websocket实现ROS与Web的交互 https:/…ros2与web通信实例
最近需要进行ros2与web端进行通信操作目标是ros2发送的消息web端能够显示在界面并且前端能够发布数据最终实例如下 然而网上查的的资料如古月居的
利用Websocket实现ROS与Web的交互 https://www.guyuehome.com/5386
包括ros官网上以及目前网上绝大部分资料都是ros1与web交互的 http://wiki.ros.org/roslibjs/Tutorials/BasicRosFunctionality
使用它们的资料将会出现非常多的麻烦本人经过艰难的查找和验证终于成功实现ros2与web交互记录如何在前人ros1的基础上进行修改实现ros2与web交互
1、下载rosbridge-suite
介绍以下所需要的工具包rosbridge_suite功能包roslibjs,ros2djsros3djs。 rosbridge_suite:实现Web浏览器与ROS之间的数据交互
roslibjs:实现了ROS中的部分功能如Topic,Service,URDF等
ros2djs:提供了二维可视化的管理工具可以用来在Web浏览器中显示二维地图
ros3djs:提供了三维可视化的管理工具可以在Web端显示三维模型。
在这几个功能包中rosbridge_suite是最重要的它是Web和ROS沟通的桥梁roslibjs也是必须的它能实现ROS中最基本的功能下面的例程就是用它来实现的至于ros2djs和ros3djs是后期开发所需要的对于新手来说可以暂时不用下载。它们的下载安装方法如下在终端中分别输入以下指令
请注意第一句的 sudo apt-get install ros-kinetic-rosbridge-suite kinetic是ros的不同版本请换成自己的ros版本本人使用的是humble版本的
sudo apt-get install ros-kinetic-rosbridge-suite
git clone https://github.com/RobotWebTools/roslibjs.git
git clone https://github.com/RobotWebTools/ros2djs
git clone https://github.com/RobotWebTools/ros3djs2、再运行launch文件 ros1的命令如下 roslaunch rosbridge_server rosbridge_websocket.launch 但是rosbridge是经过更新的没有rosbridge_websocket.launch ros2的命令应该改成如下形式
ros2 launch rosbridge_server rosbridge_websocket_launch.xml3、打开example.html
运行了这个launch文件后只需要在浏览器中打开我们设计的html文件就能够实现Web端与ROS的交互了。下面来看一个简单的example.html的例子。 !DOCTYPE html
html
head
meta charsetutf-8 /script typetext/javascript srchttp://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js/script
script typetext/javascript srchttp://static.robotwebtools.org/roslibjs/current/roslib.min.js/scriptscript typetext/javascript typetext/javascript// Connecting to ROSvar ros new ROSLIB.Ros({url : ws://localhost:9090});//判断是否连接成功并输出相应的提示消息到web控制台ros.on(connection, function() {console.log(Connected to websocket server.);});ros.on(error, function(error) {console.log(Error connecting to websocket server: , error);});ros.on(close, function() {console.log(Connection to websocket server closed.);});// Publishing a Topicvar cmdVel new ROSLIB.Topic({ros : ros,name : /cmd_vel,messageType : geometry_msgs/Twist});//创建一个topic,它的名字是/cmd_vel,,消息类型是geometry_msgs/Twistvar twist new ROSLIB.Message({linear : {x : 0.1,y : 0.2,z : 0.3},angular : {x : -0.1,y : -0.2,z : -0.3}});//创建一个messagefunction func()//在点击”Publish”按钮后发布消息并对消息进行更改{cmdVel.publish(twist);//发布twist消息twist.linear.x twist.linear.x 0.1;twist.linear.y twist.linear.y 0.1;twist.linear.z twist.linear.z 0.1;twist.angular.x twist.angular.x 0.1;twist.angular.y twist.angular.y 0.1;twist.angular.z twist.angular.z 0.1;}// Subscribing to a Topicvar listener new ROSLIB.Topic({ros : ros,name : /chatter,messageType : std_msgs/String});//创建一个topic,它的名字是/chatter,,消息类型是std_msgs/Stringfunction subscribe()//在点击”Subscribe”按钮后订阅/chatter的消息并将其显示到网页中{listener.subscribe(function(message) {document.getElementById(output).innerHTML (Received message on listener.name : message.data);});}function unsubscribe()//在点击”Unsubscribe”按钮后取消订阅/chatter的消息{listener.unsubscribe();}/script
/headbodyh1Simple roslib Example/h1pCheck your Web Console for output./pp id output/pbutton onclick func()Publish/buttonbutton onclick subscribe()Subscribe/buttonbutton onclick unsubscribe()Unsubscribe/buttonbr /
/body
/html请注意上面这两个 .js 链接已经失效了需要自己换成新的连接或下载到本地下面是最新的地址本人是直接下载到本地的 http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js http://static.robotwebtools.org/roslibjs/current/roslib.min.js 最新的两个.js下载地址如下:
https://github.com/RobotWebTools/roslibjs https://github.com/EventEmitter2/EventEmitter2
这是本人下载到本地后调用的修改注意改成自己的地址
script typetext/javascript src/root/myjs/EventEmitter2-master/lib/eventemitter2.js/script
script typetext/javascript src/root/myjs/roslibjs-develop/build/roslib.min.js/script4、启动talker
原文的这一步也有问题建议修改成自己编写的talker
rosrun roscpp_tutorials talker本人自己写的talker如下
/*send hello wordl! with a fixed-frequency and add 1 to the number for each data sent
*/
// 1.include header files
#include rclcpp/rclcpp.hpp
#include std_msgs/msg/string.hppusing namespace std::chrono_literals;
// 3.define node class
class MinimalPublisher: public rclcpp:: Node{public:MinimalPublisher(): Node(minimal_publisher),count(0){RCLCPP_INFO(this-get_logger(),create the publish node!);// 3-1 create a publisher/*template:the type of messages publishedparameter:1.topic name2.QOS(Quality of Service) message queue lengthreturn:publish object pointer*/publisher_ this-create_publisherstd_msgs::msg::String(/chatter,10);// 3-2 create a timer/*parameter:1.time interval2.callback functionreturn:timer object pointer*/timer_ this-create_wall_timer(1s, std::bind(MinimalPublisher::timer_callback,this));}private:void timer_callback(){// 3-3 organize messages and publish themauto message std_msgs::msg::String();message.data Hello world! std::to_string(count);RCLCPP_INFO(this-get_logger(), Published message: %s,message.data.c_str());publisher_-publish(message);}rclcpp::TimerBase::SharedPtr timer_;rclcpp::Publisherstd_msgs::msg::String::SharedPtr publisher_;size_t count;
};
int main(int argc,char const *argv[]){// 2.initialize ROS2 clientrclcpp::init(argc,argv);// 4.call the spin function and pass in the node object pointerrclcpp::spin(std::make_sharedMinimalPublisher());// 5.release resourcesrclcpp::shutdown();return 0;
}点击web上的Subscribe后可以看到web的订阅话题自己对着这个话题编写ros2发布方程序就可以了 5、启动listener
先运行
ros2 topic list然后点击web端的Publish就可以从web端发送信息到ros2 参考链接
古月居的利用Websocket实现ROS与Web的交互 https://www.guyuehome.com/5386
ros官网 http://wiki.ros.org/roslibjs/Tutorials/BasicRosFunctionality
