一. 进入Webviz网站
使用Webviz工具有两种方式，需要特别注意的是，两者方式都需要下载Chrome浏览器
-
直接进入官方在线网站 https://webviz.io/app/ （由于网站服务器在国外，国内使用体验不佳）
-
在GitHub上下载开源项目进行本地构建（可参考博客Webviz - ROS可视化开源项目 - 本地构建教程）
二. 基本使用
Webviz支持两种可视化的方式：ROS bag files 回放 和 ROS bridge 实时监测。
1. ROS bag files 回放
第一步，获得ROS bag文件：
#运行ROS
……
#查看当前所有topic
rostopic list -v
#记录指定的topic
rosbag record /topic1 /topic2
#记录所有的topic
rosbag record -a
第二步，将ROS bag文件拖放到Webviz网站界面：
2. ROS bridge 实时监测
第一步，安装ROS bridge：
sudo apt-get install ros-<rosdistro>-rosbridge-suite
第二步，启动ROS bridge：
启动rosbridge后，默认在9090端口建立WebSocket连接（与Webviz默认端口一致，不需要更改）
source /opt/ros/<rosdistro>/setup.bash
roslaunch rosbridge_server rosbridge_websocket.launch
第三步，启动您的ROS程序：
三. 自定义功能
1. 自定义功能窗口
点击设置按钮 ➡ 点击
Change panel➡ 根据需要选择功能窗口即可
2. 保存/加载自定义布局
点击设置按钮 ➡ 点击
import/export panel setting➡ 选择copy或 粘贴自定义配置 ➡ 选择Apply将设置应用到网站中（需要注意的是，如果要改变整体布局，请选择下图右上角的设置按钮；若要改变单个窗口布局，请选择上图的设置按钮）
四. 常用功能简介
1. 监控并可视化ROS Messages
2. 监控ROS Topic内信息变化并绘图
3. 监控并显示ROS图像信息
4. 回放ROS日志信息
附录
下面是一个包含常用功能窗口的配置，可通过上面提到的方法导入到自己的面板上进行预览和进一步修改
{
"layout": {
"direction": "row",
"first": {
"direction": "column",
"first": {
"direction": "row",
"first": "DiagnosticSummary!3edblo1",
"second": "StateTransitions!3c71bze"
},
"second": "Plot!3s13ldj",
"splitPercentage": 37.359550561797754
},
"second": {
"direction": "row",
"first": {
"direction": "column",
"first": "RosOut!1f38b3d",
"second": "RawMessages!2d7jlx6"
},
"second": "3D Panel!1my2ydk",
"splitPercentage": 50
},
"splitPercentage": 33.3333333333
},
"savedProps": {
"StateTransitions!3c71bze": {
"paths": [
{
"value": "/move_base/status.status_list[:]{goal_id==0}.status",
"timestampMethod": "receiveTime"
}
]
},
"Plot!3s13ldj": {
"paths": [
{
"value": "/odom.twist.twist.linear.x",
"enabled": true,
"timestampMethod": "receiveTime"
},
{
"value": "/odom.twist.twist.linear.y",
"enabled": true,
"timestampMethod": "receiveTime"
}
],
"minYValue": "",
"maxYValue": "",
"showLegend": true,
"xAxisVal": "timestamp"
},
"RosOut!1f38b3d": {
"searchTerms": [
"/gazebo",
"/rviz",
"/move_base"
],
"minLogLevel": 8,
"topicToRender": "/rosout"
},
"RawMessages!2d7jlx6": {
"topicPath": "/camera/depth/image_raw",
"diffTopicPath": "",
"diffMethod": "custom",
"diffEnabled": false,
"showFullMessageForDiff": false
},
"3D Panel!1my2ydk": {
"checkedNodes": [
"/amcl/parameter_descriptions",
"/amcl/parameter_updates",
"/amcl_pose",
"/camera/depth/camera_info",
"/camera/depth/image_raw",
"/camera/depth/points",
"/camera/parameter_descriptions",
"/camera/parameter_updates",
"/camera/rgb/camera_info",
"/camera/rgb/image_raw",
"/camera/rgb/image_raw/compressed",
"/camera/rgb/image_raw/compressed/parameter_descriptions",
"/camera/rgb/image_raw/compressed/parameter_updates",
"/camera/rgb/image_raw/compressedDepth/parameter_descriptions",
"/camera/rgb/image_raw/compressedDepth/parameter_updates",
"/camera/rgb/image_raw/theora",
"/camera/rgb/image_raw/theora/parameter_descriptions",
"/camera/rgb/image_raw/theora/parameter_updates",
"/clock",
"/cmd_vel_mux/active",
"/cmd_vel_mux/input/navi",
"/cmd_vel_mux/parameter_descriptions",
"/cmd_vel_mux/parameter_updates",
"/gazebo/link_states",
"/gazebo/model_states",
"/gazebo/parameter_descriptions",
"/gazebo/parameter_updates",
"/gazebo_gui/parameter_descriptions",
"/gazebo_gui/parameter_updates",
"/joint_states",
"/map",
"/map_metadata",
"/mobile_base/commands/velocity",
"/mobile_base/sensors/imu_data",
"/mobile_base_nodelet_manager/bond",
"/move_base/DWAPlannerROS/cost_cloud",
"/move_base/DWAPlannerROS/global_plan",
"/move_base/DWAPlannerROS/local_plan",
"/move_base/DWAPlannerROS/parameter_descriptions",
"/move_base/DWAPlannerROS/parameter_updates",
"/move_base/DWAPlannerROS/trajectory_cloud",
"/move_base/NavfnROS/plan",
"/move_base/current_goal",
"/move_base/feedback",
"/move_base/global_costmap/costmap",
"/move_base/global_costmap/costmap_updates",
"/move_base/global_costmap/footprint",
"/move_base/global_costmap/inflation_layer/parameter_descriptions",
"/move_base/global_costmap/inflation_layer/parameter_updates",
"/move_base/global_costmap/obstacle_layer/parameter_descriptions",
"/move_base/global_costmap/obstacle_layer/parameter_updates",
"/move_base/global_costmap/parameter_descriptions",
"/move_base/global_costmap/parameter_updates",
"/move_base/global_costmap/static_layer/parameter_descriptions",
"/move_base/global_costmap/static_layer/parameter_updates",
"/move_base/goal",
"/move_base/local_costmap/costmap",
"/move_base/local_costmap/costmap_updates",
"/move_base/local_costmap/footprint",
"/move_base/local_costmap/inflation_layer/parameter_descriptions",
"/move_base/local_costmap/inflation_layer/parameter_updates",
"/move_base/local_costmap/obstacle_layer/parameter_descriptions",
"/move_base/local_costmap/obstacle_layer/parameter_updates",
"/move_base/local_costmap/parameter_descriptions",
"/move_base/local_costmap/parameter_updates",
"/move_base/parameter_descriptions",
"/move_base/parameter_updates",
"/move_base/result",
"/move_base/status",
"/move_base_simple/goal",
"/navigation_velocity_smoother/parameter_descriptions",
"/navigation_velocity_smoother/parameter_updates",
"/navigation_velocity_smoother/raw_cmd_vel",
"/odom",
"/particlecloud",
"/rosout",
"/rosout_agg",
"/tf",
"/tf_static",
"/turtlebot/laser/scan",
"name:Topics"
],
"expandedNodes": [
"name:Topics"
],
"followTf": "map",
"cameraState": {
"targetOffset": [
0,
0,
0
]
},
"modifiedNamespaceTopics": [],
"pinTopics": false,
"topicSettings": {},
"autoSyncCameraState": false,
"topicGroups": [
{
"displayName": "Imported Group",
"visibilityByColumn": [
true,
true
],
"expanded": true,
"items": []
}
],
"savedPropsVersion": 14
}
},
"globalVariables": {},
"userNodes": {},
"linkedGlobalVariables": [],
"playbackConfig": {
"speed": 0.2
}
}