智能车比赛——webviz阶段总结
| 日期 | 内容 |
|---|---|
| 7.10 – 7.11 | webviz实现上位机 |
参考网站：
github：https://github.com/cruise-automation/webviz
博客园：介绍webviz、本地构建（博客是使用nvm+npm在linux系统里构建，有问题）
https://www.cnblogs.com/FUJI-Mount/p/12728421.html
https://www.cnblogs.com/FUJI-Mount/p/12695792.html
docker学习：
https://www.runoob.com/docker/docker-tutorial.html
https://www.runoob.com/docker/docker-run-command.html
docker安装在windows上，家庭版不行，所以安装docker toolbox（效果差不多）
https://blog.csdn.net/tina_ttl/article/details/51372604
过程中遇到版本问题，基本都是安装对应的版本
都在 F:\桌面\智能车比赛里
https://www.daixiaorui.com/read/277.html
前言
官方给的c++写的上位机的代码实在太难读了，所以我们使用webviz作为上位机
一、webviz是啥
微信文章：Cruise数据可视化工具Webviz
ROS组件Rviz和rqt虽功能强大，但对ROS具有强依赖，即若要使用必须安装ROS并运行ROS Master，其次Rviz也经常运行不稳定，启动过程时常伴随一些警告和报错。
对于开发者，在测试过程中，既想快速稳定的调出可视化工具，又希望对不同的数据以各自合理的可视化方式显示在一个共有的界面中以方便查看和对比，而像Rviz和rqt插件，若想查看3D信息需要单独运行Rviz、2D信息则需要运行rqt_plot，其次还需要在不同界面间进行切换，非常的不便。
而Cruise的Webviz工具是一款基于Web的应用程序，可用于回访和可视化ROS Bag文件，只需将ROS Bag文件直接拖入（回放功能）。
- 可视化（显示坐标数据 摄像头画面） 实时监控 发布信息（设置三个位置的坐标）…
二、nvm+npm+node进行本地构建（结果失败了，原因不太明确，应该涉及webviz的依赖包跟npm版本不匹配）
2.1 安装nvm+npm+node
https://www.cnblogs.com/jing-tian/p/11225123.html
按照过程来就行
webviz适配的npm和node版本：10.19.0 + 对应的npm版本（10 11都行）
nvm install node版本号
#会自动安装对应的npm
nvm use node版本号
#使用这个node版本
遇到的坑：
-
把之前安装的node都删干净，要不很离谱
-
nvm安装路径 没空格没汉字
-
环境变量：路径要正确
- 如果自己没生成node的快捷方式，直接写原来的文件夹的路径就行
三、安装docker
按照下面的过程来
https://blog.csdn.net/tina_ttl/article/details/51372604
过程中遇到版本问题，基本都是配套的插件版本过低，上网上找个对应的版本替换就行
都在 F:\桌面\智能车比赛里
https://www.daixiaorui.com/read/277.html
虚拟机：
四、docker部署webviz
Docker
The easiest way to use the static build, is to use our Docker image, which is automatically built on every commit to the master branch.
docker run -p 8080:8080 cruise/webviz
将容器的8080端口映射到宿主机的8080端口
curise/webviz是镜像的名称
控制的网址
http://192.168.99.100:8080/?rosbridge-websocket-url=ws://192.168.31.67:9090
- 前面是分配的虚拟IP；后面是局域网的IP
- 因为使用了docker toolbox，需要将请求转发
样式表：
{
"layout": {
"first": "ImageViewPanel!3243nn0",
"second": {
"direction": "row",
"first": "Publish!myxagm",
"second": {
"direction": "row",
"first": "Publish!3n92a1p",
"second": {
"direction": "row",
"first": "Publish!1c46hij",
"second": {
"first": "Publish!3vtf2ky",
"second": {
"first": "RosOut!1f38b3d",
"second": "3D Panel!14y8zxq",
"direction": "row",
"splitPercentage": 5.8319235654984665
},
"direction": "row",
"splitPercentage": 32.523877405315176
},
"splitPercentage": 23.3879781420765
},
"splitPercentage": 19.100099328227515
},
"splitPercentage": 15.5949741315595
},
"direction": "row",
"splitPercentage": 12.760416666666666
},
"savedProps": {
"Publish!myxagm": {
"topicName": "/move_base_simple/goal",
"datatype": "geometry_msgs/PoseStamped",
"buttonText": "Publish",
"buttonTooltip": "",
"buttonColor": "#00A871",
"advancedView": true,
"value": "{
\n \"header\": {\n \"seq\": 0,\n \"stamp\": {\n \"sec\": 0,\n \"nsec\": 0\n },\n \"frame_id\": \"map\"\n },\n \"pose\": {\n \"position\": {\n \"x\": 0,\n \"y\": 0,\n \"z\": 0\n },\n \"orientation\": {\n \"x\": 0,\n \"y\": 0,\n \"z\": 0,\n \"w\": 1\n }\n }\n}"
},
"Publish!3n92a1p": {
"topicName": "/move_base_simple/goal",
"datatype": "geometry_msgs/PoseStamped",
"buttonText": "Publish",
"buttonTooltip": "",
"buttonColor": "#00A871",
"advancedView": true,
"value": "{
\n\n \"header\": {\n \"seq\": 0,\n \"stamp\": {\n \"sec\": 0,\n \"nsec\": 0\n },\n \"frame_id\": \"map\"\n },\n \"pose\": {\n \"position\": {\n \"x\": 2.22,\n \"y\": -4.081,\n \"z\": 0\n },\n \"orientation\": {\n \"x\": 0,\n \"y\": 0,\n \"z\": -0.697,\n \"w\": 0.717\n }\n }\n}"
},
"Publish!1c46hij": {
"topicName": "/move_base_simple/goal",
"datatype": "geometry_msgs/PoseStamped",
"buttonText": "Publish",
"buttonTooltip": "",
"buttonColor": "#00A871",
"advancedView": true,
"value": "{
\n \"header\": {\n \"seq\": 0,\n \"stamp\": {\n \"sec\": 0,\n \"nsec\": 0\n },\n \"frame_id\": \"map\"\n },\n \"pose\": {\n \"position\": {\n \"x\": -2.3738,\n \"y\": -6.015,\n \"z\": 0\n },\n \"orientation\": {\n \"x\": 0,\n \"y\": 0,\n \"z\": 0.7071,\n \"w\": 0.7071\n }\n }\n}"
},
"Publish!3vtf2ky": {
"topicName": "/move_base_simple/goal",
"datatype": "geometry_msgs/PoseStamped",
"buttonText": "Publish",
"buttonTooltip": "",
"buttonColor": "#00A871",
"advancedView": true,
"value": "{
\n \"header\": {\n \"seq\": 0,\n \"stamp\": {\n \"sec\": 0,\n \"nsec\": 0\n },\n \"frame_id\": \"map\"\n },\n \"pose\": {\n \"position\": {\n \"x\": -1.66163678445,\n \"y\": -1.1153812368,\n \"z\": 0\n },\n \"orientation\": {\n \"x\": 0,\n \"y\": 0,\n \"z\": 0.5457,\n \"w\": 0.8379\n }\n }\n}"
},
"3D Panel!14y8zxq": {
"checkedKeys": [
"t:/tf",
"name:Topics"
],
"expandedKeys": [
"name:Topics"
],
"followTf": "map",
"cameraState": {
"distance": 32.40348278372656,
"perspective": true,
"phi": 0.7778710972168562,
"targetOffset": [
-0.04219731024826272,
-0.2380927577009127,
0
],
"thetaOffset": 3.895259562429368,
"fovy": 0.7853981633974483,
"near": 0.01,
"far": 5000
},
"modifiedNamespaceTopics": [],
"pinTopics": false,
"settingsByKey": {
},
"autoSyncCameraState": false,
"autoTextBackgroundColor": true
}
},
"globalVariables": {
},
"userNodes": {
},
"linkedGlobalVariables": [],
"playbackConfig": {
"speed": 0.2,
"messageOrder": "receiveTime",
"timeDisplayMethod": "ROS"
},
"version": 17
}
五、问题
不稳定，重启
重启rosbridge后，网页不稳定
待解决