制作简单的ROSWEB (2) -使用rosjs 进行栅格地图web端3d可视化

制作简单的ROSWEB (2) -使用rosjs 进行栅格地图web端3d可视化

rosweb可视化上位机

代码下载

本代码是通过网上拼接代码而成的，比较粗糙，是当时本科毕设的一个上位机界面，根据大家的强烈要求，开源此代码，如果对你有帮助，谢谢给赞或者star 喔~~~ ROS WEB可视化上位机
参考博客：
利用Websocket实现ROS与Web的交互
前言：
本次实现的功能主要是，在web浏览器端调用rosjslib实现控制机器人移动、和获取地图显示。因为个人不懂javascript，所以做的比较简陋，主要还是做代码拼接。两部分代码分别为：
一.3d栅格地图可视化
二.web端发布话题，实现按键控制车体前进后退
代码出处：
3d栅格地图可视化
web端发布话题，实现按键控制车体前进后退

环境说明

这里说明一下：
主机为机器人端(机器人master所在的电脑)
从机为浏览器端(可以使windows、linux)

使用我的代码需要主机和从机在同一网段上(同一wifi下)

主机配置

下载rosbridge工具

sudo apt-get install ros-kinetic-rosbridge-suite

启动机器人，我这里的机器人为古月老师的仿真机器人

roslaunch  mbot_gazebo mbot_laser_nav_gazebo.launch
roslaunch mbot_navigation gmapping_demo.launch

启动rosbridge websocket

roslaunch rosbridge_server rosbridge_websocket.launch

从机配置

查看主机的ip，注意是主机、主机、主机！！！

ifconfig

进入lib_web目录下，修改ip为当前ip，此处ip为订阅map显示。

使用chrome浏览器打开index.html

输入当前从机的IP地址，注意后缀为:9090 ，点击connect

连接成功：
从机：连接日记会刷新

主机：终端显示连接成功

web端地图显示：

主机端rviz地图显示：

通过点击，web端上的按钮可以通过websocket进行/cmd_vel话题发布

代码

代码为本人拼接开源代码而成，因为不是很懂前端工具，所以比较多bug，如有需要可以联系本人，谢谢指正。谢谢大家！！！