Docker部署Webviz：实现ros与网页交互

已于 2024-05-21 10:21:17 修改
阅读量950 收藏 22
点赞数 26
分类专栏： ROS 文章标签： docker 容器 机器人
于 2024-05-15 22:19:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Adoreuu/article/details/138925628
版权

系列文章目录

Docker部署Webviz：实现ros与网页交互
利用Rosweb实现ros与网页交互（1）

文章目录

前言

1、需求：在网页上实时显示slam建图、导航等交互。即利用rosbridge -Websocket实现ROS与Web的交互；
2、本章节利用cruise/webviz实现；
3、操作环境：Ubuntu20.04，ROS版本：noetic，docker容器，谷歌浏览器；
4、本项目需要用谷歌浏览器才能打开；
5、需要安装rosbridge_suite功能包，请看这篇文章利用Rosweb实现ros与网页交互（1）

一、Docker安装步骤

1.引入库

可以在Ubuntu 20.04上部署Webviz并使用Docker来简化这一过程。Webviz是一个基于React的开源工具，用于可视化ROS（Robot Operating System）数据，常用于机器人系统数据分析。以下是使用Docker部署Webviz的基本步骤。

准备工作

  1. 安装Docker：首先确保的Ubuntu 20.04系统上安装了Docker，可以按照以下步骤操作：

    • 更新软件包索引：

      sudo apt update

    • 安装一些必要的软件包，以便通过HTTPS使用存储库：

      sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

    • 添加Docker的官方GPG密钥：

      curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

    • 添加Docker存储库：

      echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

    • 更新软件包索引并安装Docker：

      sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io

  2. 启动Docker并允许开机启动：

    sudo systemctl start docker
sudo systemctl enable docker

二、部署Webviz

  1. 运行Webviz：可以通过以下命令运行Webviz容器：
 sudo docker run -p 8080:8080 cruise/webviz

在这里插入图片描述

这个命令会下载镜像，然后启动一个容器，将容器内部的80端口映射到主机的8080端口。curise/webviz是镜像的名称。
2. 启动rosbridge websocket：
在终端上启动launch文件

roslaunch rosbridge_server rosbridge_websocket.launch
  1. 访问Webviz：容器启动后，可以在谷歌浏览器中访问来查看Webviz界面。
http://localhost:8080

在这里插入图片描述
4. 测试Webviz：导入bag文件。
下载地址：Bag文件，然后直接把文件拖拽到页面即可。bag文件的作用：可以模拟仿真环境在某时刻的情况，也就是说这个是录制好的一个包在这里插入图片描述
需要在三个终端打开三个命令行：
（1）启动仿真环境

roslaunch turtlebot3_gazebo turtlebot3_house.launch

在这里插入图片描述

（2）启动键盘控制

roslaunch turtlebot3_teleop turtlebot3_teleop_key.launch

（3）启动可视化

roslaunch turtlebot3_navigation turtlebot3_navigation.launch

在这里插入图片描述

附录

下面是一个包含常用功能窗口的配置，可通过上面提到的方法导入到自己的面板上进行预览和进一步修改

{
  "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
  }
}

总结

1、下载docker的时候会报错，一般是网络问题，白天或者趁老外睡觉的时间段一般就没啥问题了。
2、下一章详细介绍webviz的使用

参考地址：
①webviz源码网址
②智能车比赛—webviz阶段总结
③利用Rosweb实现ros与网页交互（1）
④webviz安装，docker安装可正常使用与Foxglove Studio

奋斗的好青年
关注
  • 26
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ROSAppsDeployment：使用Docker部署ROS应用
02-05
ROSAppsDeployment：使用Docker部署ROS应用
ros-web-app:ROS Web控制面板
04-03
ros-web-app 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
webviz:基于Web的可视化库
04-28
将您自己的bag文件拖放到以浏览您的机器人数据，或者使用连接到实时机器人或仿真。 Webviz是一个基于Web的应用程序，用于回放和可视化 。 该存储库还包含一些库，可以独立使用它们来构建基于Web的可视化工具。 webviz-core （，， ）：一种检查工具。 regl-worldview （， ， ）：React库，用于使用渲染2D和3D场景。 @ cruise-automation / hooks （ npm ，github ）：可重用的React钩子列表。 @ cruise-automation / button （ npm ， github ）：React按钮组件，支持破坏性动作，“脉冲”动画和布尔玛类的动画进度。 @ cruise-automation / tooltip （ npm ， github ）：React组件，使用popper.js向DOM元素添
ROS1可视化利器---Webviz
muxiaoyu0318的博客
05-06 851
对于ROS1而言，rqt和plotjuggler是我们最常用的工具，这两个工具：rqt中嵌入了很多有用的小工具，但是它需要播放离线包，没有办法对离线包进行实时的分析。而plotjuggler支持对离线bag包进行分析，但是不支持可视化的工具，这两个各有千秋。而近年来，有更多的工作开始落实在可视化上。
webviz - Ros1通信
qq_32640191的博客
07-09 990
webviz-ros1通信前言rosbridge 安装测试ros与webviz通信过程首先启动webviz启动 rosbridge运行bag查看topicwebviz界面去引入包数据，进行展示 同一台主机下面，如何实现ros与webviz的通信呢？怎么让运行的ros程序让webviz订阅到其topic，并在页面上展示topic消息呢？ 前言 目前webviz只能支持ros1，还不能支持ros2，所以本次ros与webviz的通信是基于ros1 的。 本机webviz与ros的通信，主要是ros运行，会产生t
webviz-ros1-ros1通信
qq_32640191的博客
07-09 389
如何实现不同主机下，ros1-ros1-webviz的通信，即在主机b中运行ros程序，然后连通到主机a的ros1，然后再在主机a的webviz上展示 主机A和主机B的ros系统配置 1.分别查看各自主机的ip以及hostname： 查看ip命令： ifconfig 查看hostname命令： hostname 2.查看计算机之间是否能直接通信：在A、B计算机终端分别ping对方IP地址 若通信成功，可以看到显示接收到包的time，通常是0.3ms左右； 若显示以下结果，则通常是物理连接的问题，检查你
webviz
luoendong的博客
07-26 456
webviz安装，docker安装可正常使用换源加速更换npm源为淘宝的源在 ~/.bashrc 中添加下列语句Webviz项目暂时仅支持 node10 和 node11，高版本的 node 会出现编译错误。查看可安装的node版本安装指定版本的node查看当前的node版本查看已安装的node版本nvm list选择需要的node版本检查是否配置成功克隆代码cd webviz/手动安装node-sass执行脚本安装项目依赖编译项目使用Webviz。
webviz -ros1 -ros2通信
qq_32640191的博客
07-09 436
webviz-ros1-ros2通信过程 本文基于不同主机，主机A上运行ros1和webviz，主机b运行ros2，主机A的webviz可以订阅到主机B运行的ros2程序的topic 主机A： 开启一个终端： source /opt/ros/melodic/setup.bash roslaunch rosbridge_server rosbridge_websocket.launch 主机B: 开启一个终端： source /opt/ros/melodic/setup.bash source /opt/r
webviz初探
qq_32640191的博客
06-25 1997
webviz初探安装分析webviz源码 可以直接进入webviz网站：https://webviz.io/，不过存在网络问题，建议本地构建，然后进行开发使用 安装 1.nvm安装： #预备工作 sudo apt-get update sudo apt-get install build-essential libssl-dev #获取脚本并安装 #方法一 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh |
webviz-config：使用用户友好的配置文件制作Dash应用程序
02-05
使Python Web应用程序民主化 编写具有很大的灵活性，但是，这也需要 :snake: 设置人员的Python知识。 Webviz:trade_mark:是Dash之上的MIT许可配置层，它鼓励制作可重用的组件和仪表板，然后在使用短配置文件创建应用程序时可以添加/删除这些组件和仪表板。 这个Python软件包webviz-config是核心插件框架。 有关使用此插件系统的真实示例存储库，请参见例如 。 这些是Webviz:trade_mark:定位的主要用户组： 您不了解Python ，仅希望按特定顺序和/或在应用程序的不同页面上添加不同的预定义仪表板或可视化效果/组件。 （可选）在仪表板之间带有一些文本和数学方程式（由您提供），以说
docker-glpi:使用Docker部署GLPI的项目
05-05
使用Docker部署GLPI的项目目录 使用持久性数据进行部署mysql.env 码头工人组成.yml 环境变量时区 介绍使用docker安装并运行GLPI实例。 使用CLI部署 部署GLPI docker run --name mysql -e MYSQL_ROOT_PASSWORD=diouxx...
docker-conductor:一种自动化和协调Docker部署的方法
05-10
去做 健康检查 TLS连接 搜索/列出项目/主机的容器码头指挥一种自动化和协调Docker部署的方法安装go install github.com/joshrendek/docker-conductor 用法在其中包含conductor.yml的目录中运行docker-conductor 。...
homeland-docker::rocket: 使用 Docker 部署 Homeland
05-29
基于 Docker 的自动化部署方案。 系统需求 Linux Server [4 Core CPU, 4G Memory, 50G Disk, 64 位] - 建议 Ubuntu Server 14.04 , 或 用于文件存储。 使用说明 Versions 分支对应 Homeland 版本 master - ...
Docker实战指南：高效应用部署与管理策略详解
最新发布
11-22
Docker Client是用户与Docker Daemon交互的工具；而Docker Registry则是存储和分发Docker镜像的仓库。 在学习过程中，我们不仅强调代码的编写和实现，更注重需求分析和方案设计。因此，建议读者结合这些内容进行...
webviz安装
weixin_61403766的博客
07-10 321
1、版本卸载install后面，可以只写大版本号，自动匹配大版本下面最新的小版本。测试11不行、14可以。npm跟着nodejs的版本适配。三个语句对应三个脚本，目前还没整明白每个都是啥。2、下载nvm（用的魔法 + 第二种方式）更多脚本在webviz 的github上有。
docker 下使用Webviz（一）
weixin_43134049的博客
04-28 4162
docker官方Webviz连接连接 —————————————————————— ROS官网 —————————————————————— 一.准备Webviz的镜像 docker pull cruise/webviz 拉下后得到这样一个镜像 运行拉下的容器 docker run -p 8080:8080 cruise/webviz 然后浏览器中访问 http://127.0.0.1:8080/ 或你的ipv4地址如下我的是192.168.31.232 http://192.168.31.232:
webviz安装，docker安装可正常使用与Foxglove Studio
苏凯的博客
01-11 2922
webviz安装
docker 安装部署mysql:5.7
03-11
可以回答这个问题。以下是安装部署mysql:5.7的步骤： 1. 安装docker：在官网下载docker安装包，根据安装向导进行安装。 2. 拉取mysql:5.7镜像：在终端输入命令“docker pull mysql:5.7”即可拉取mysql:5.7镜像。 3. 创建并启动mysql容器：在终端输入命令“docker run -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7”即可创建并启动mysql容器。其中，-p参数指定容器端口和主机端口的映射关系，-e参数指定mysql的root用户密码，-d参数指定容器在后台运行。 4. 进入mysql容器：在终端输入命令“docker exec -it mysql bash”即可进入mysql容器。 5. 登录mysql：在终端输入命令“mysql -u root -p”即可登录mysql。 6. 创建数据库和表：在mysql中输入命令“CREATE DATABASE test;”创建数据库，再输入命令“USE test;CREATE TABLE user(id INT NOT NULL AUTO_INCREMENT, name VARCHAR(20) NOT NULL, age INT NOT NULL, PRIMARY KEY(id));”创建表。 7. 测试mysql：在mysql中输入命令“INSERT INTO user(name, age) VALUES('Tom', 18);SELECT * FROM user;”插入数据并查询数据。 以上就是docker安装部署mysql:5.7的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值