webviz安装，docker安装可正常使用与Foxglove Studio

_无往而不胜_

已于 2023-05-26 13:39:04 修改

阅读量4.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： ros 文章标签： npm webviz TypeError ros webros

于 2023-01-11 12:10:24 首次发布

本文链接：https://blog.csdn.net/qq_15204179/article/details/128641088

ros 专栏收录该内容

90 篇文章

订阅专栏

Foxglove Studio

Foxglove Studio与webviz使用起来非常类似去可以直接使用web也可以下载安装包

Foxglove Studio不提供源码

安装包下载地址： https://foxglove.dev/download

web端访问 https://studio.foxglove.dev/

点击 open connection

点rosbrideg 点击 open

不要忘记启动以下

启动本机 10.6.162.111 仿真环境：

   roslaunch turtlebot3_gazebo turtlebot3_house.launch
   roslaunch turtlebot3_teleop turtlebot3_teleop_key.launch
   roslaunch turtlebot3_navigation turtlebot3_navigation.launch   map_file:=/home/sukai/slam/map/map_1.yaml

启动

roslaunch rosbridge_server rosbridge_websocket.launch

好了可以使用了：

桌面版的界面与web版一致。

或者安装

sudo apt install ros-noetic-foxglove-bridge

启动：

rosrun foxglove_bridge foxglove_bridge

启动后终端还报了个错：

[ERROR] [1673434716.779121307]: Skipped loading plugin with error: XML Document '/opt/ros/noetic/share/tf2_server/tf2_server_test_nodelets.xml' has no Root Element. This likely means the XML is malformed or missing..

但还年能用。

选择 Foxglove Websocket 连接ros了

webviz安装，docker安装可正常使用

换源加速

更换npm源为淘宝的源

npm config set registry https://registry.npm.taobao.org

在 ~/.bashrc 中添加下列语句

export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

Webviz项目暂时仅支持 node10 和 node11，高版本的 node 会出现编译错误。

查看可安装的node版本

nvm ls-remote

安装指定版本的node

nvm install 10.19.0

查看当前的node版本

nvm current

查看已安装的node版本

nvm list

选择需要的node版本

nvm use 10.19.0

检查是否配置成功

npm config get registry

克隆代码

git clone https://github.com/cruise-automation/webviz.git

cd webviz/

手动安装node-sass

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

npm install node-sass

npm run bootstrap

执行脚本安装项目依赖

npm run bootstrap

编译项目

npm run build

使用Webviz

运行rosbridge_websocket

roslaunch rosbridge_server rosbridge_websocket.launch

在webviz根目录执行启动

npm run docs

npm install node-sass 报错：

TypeError: Object.fromEntries is not a function

at Object.<anonymous> (/home/sukai/workspace/workspace_ros_car_noetic/webviz/node_modules/@npmcli/fs/lib/fs.js:6:23)

at Module._compile (internal/modules/cjs/loader.js:778:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

at Module.load (internal/modules/cjs/loader.js:653:32)

at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

at Function.Module._load (internal/modules/cjs/loader.js:585:3)

at Module.require (internal/modules/cjs/loader.js:692:17)

at require (internal/modules/cjs/helpers.js:25:18)

at Object.<anonymous> (/home/sukai/workspace/workspace_ros_car_noetic/webviz/node_modules/@npmcli/fs/lib/index.js:2:6)

at Module._compile (internal/modules/cjs/loader.js:778:30)

解决办法：

先清依赖残留，否则安装不上

npm rebuild node-sass

npm uninstall node-sass

安装 4.14的

npm install node-sass@4.14

参考博客：https://blog.csdn.net/qq_44226094/article/details/117792206

npm run bootstrap 报错：

lerna ERR! npm install --global-style --legacy-peer-deps exited 1 in 'webviz-core'

lerna ERR! npm install --global-style --legacy-peer-deps stderr:

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

npm WARN tar ENOENT: no such file or directory, open '/home/sukai/workspace/workspace_ros_car_noetic/webviz/packages/webviz-core/node_modules/.staging/prettier-e8261b17/parser-angular.js'

npm WARN @cruise-automation/button@0.0.7 requires a peer of react@16.x but none is installed. You must install peer dependencies yourself.

【***】 npm WARN styled-components@3.4.10 requires a peer of react@>= 0.14.0 < 17.0.0-0 but none is installed. You must install peer dependencies yourself.

npm WARN webviz-core@0.0.1 No repository field.

npm ERR! Error while executing:

npm ERR! /usr/bin/git ls-remote -h -t ssh://git@github.com/davidswinegar/react-document-events.git

npm ERR!

npm ERR! git@github.com: Permission denied (publickey).

解决：

  npm install react@16.10.2 --save

npm run bootstrap 其它各种依赖报错：

例子：

npm ERR! /usr/bin/git ls-remote -h -t ssh://git@github.com/davidswinegar/Chart.js.git

npm ERR!

npm ERR! git@github.com: Permission denied (publickey).

npm ERR! fatal: 无法读取远程仓库。

npm ERR!

npm ERR! 请确认您有正确的访问权限并且仓库存在。

npm ERR!

npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:

npm ERR! /home/sukai/.npm/_logs/2023-01-11T02_25_33_601Z-debug.log

解决：

暂时没法解决！

尝试：

webviz/packages/webviz-core

gedit package-lock.json 把

搜索 git+ssh://git@github.com 替换：https://github.com但是还是没能解决问题

npm install 安装或者 npm run bootstrap 卡在某一行时请删除以下后重新执行命令

删除 node_modules package-lock.json

docer安装Webviz

后来我用了docer成功使用：

一.准备Webviz的镜像

docker pull cruise/webviz

运行拉下的容器 8080端口太常用了容易冲突我们用7070映射8080

docker run -p 7070:8080 cruise/webviz

http://127.0.0.1:7070/

我电脑本机的 ipv4地址：10.6.162.111

游览器： http://10.6.162.111:7070

游览器： http://10.9.162.111:7070/?demo 官方例子

启动本机 10.6.162.111 仿真环境：

   roslaunch turtlebot3_gazebo turtlebot3_house.launch
   roslaunch turtlebot3_teleop turtlebot3_teleop_key.launch
   roslaunch turtlebot3_navigation turtlebot3_navigation.launch   map_file:=/home/sukai/slam/map/map_1.yaml

启动 roslaunch rosbridge_server rosbridge_websocket.launch

<launch>

    <!-- sudo apt-get install ros-melodic-rosbridge-suite -->
    <!-- roslaunch rosbridge_server rosbridge_websocket.launch -->

   <include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch" >
    <!--   <arg name="port" value="8080"/>-->
   </include>

    <!-- sudo apt-get install ros-noetic-tf2-web-republisher -->
    <!-- rosrun tf2_web_republisher tf2_web_republisher -->
    <node  pkg="tf2_web_republisher" type="tf2_web_republisher"  name="tf2_web_republisher"   output="screen"  >
    </node>

    <!--  sudo apt-get install ros-noetic-web-video-server -->
    <!-- rosrun web_video_server web_video_server -->

    <node  pkg="web_video_server" type="web_video_server"  name="web_video_server"   output="screen"  >
    </node>


</launch>

能够正常使用，想使用熟练就需要下功夫了