一. 進入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
}
}