[分享] ROS2 Web开发做个遥控器

最新推荐文章于 2025-03-10 21:16:47 发布

鱼香ROS

最新推荐文章于 2025-03-10 21:16:47 发布

阅读量1.1k

点赞数 7

文章标签： ROS2 ROS2 Web 遥控器

本文链接：https://blog.csdn.net/qq_27865227/article/details/139332468

版权

ROS（机器人操作系统）是一个用于开发机器人软件的开源框架，而rosbridge_server则提供了一种在ROS和其他系统之间进行通信的方式。在本文中，我们将介绍如何通过Web页面实现一个简单的ROS遥控器，使用rosbridge_websocket连接到ROS系统，并通过按键控制机器人的运动。

在这里插入图片描述

准备工作

首先，确保你已经安装了ROS2，并且已经启动了rosbridge_server的rosbridge_websocket插件。你可以使用以下命令安装和启动：

sudo apt install ros-$ROS_DISTRO-rosbridge-suite 
ros2 run rosbridge_server rosbridge_websocket

这将在本地WebSocket服务器的9090端口上启动rosbridge_websocket。

创建Web

接着随便新建一个文件 index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: Arial, sans-serif;
    }

    button {
      margin: 5px;
      padding: 10px 20px;
      font-size: 18px;
      border: 2px solid #3498db;
      border-radius: 5px;
      background-color: #3498db;
      color: #ffffff;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #2980b9;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/roslib@1.3.0/build/roslib.js"></script>
</head>

<body>
  <h1>ROS Web Controller</h1>
  <div>
    <button onclick="moveForward()">Forward</button>
    <button onclick="moveBackward()">Backward</button>
  </div>
  <div>
    <button onclick="moveLeft()">Left</button>
    <button onclick="stopMovement()">Stop</button>
    <button onclick="moveRight()">Right</button>
  </div>

  <script>
    let ros;
    let cmdVel;

    function startConnection() {
      ros = new ROSLIB.Ros({
        url: 'ws://localhost:9090' // 替换为你的Rosbridge服务器地址,主要将 localhost 改成你的主机IP地址，比如 ws://192.168.1.2:9090
      });

      ros.on('connection', () => {
        console.log('Connected to ROS Bridge');
        cmdVel = new ROSLIB.Topic({
          ros: ros,
          name: '/cmd_vel',
          messageType: 'geometry_msgs/Twist'
        });
      });

      ros.on('error', (error) => {
        console.error('Error connecting to ROS: ', error);
        alert('Error connecting to ROS: 9090', error);
      });

      ros.on('close', () => {
        console.log('Disconnected from ROS');
        alert('Disconnected from ROS');
      });
    }

    function move(direction) {
      if (!ros) {
        console.error('ROS connection not established');
        alert('ROS connection not established');
        return;
      }

      if (!cmdVel) {
        console.error('Publisher not created');
        alert('Publisher not created');
        return;
      }

      const twist = new ROSLIB.Message({
        linear: {
          x: direction.linear.x,
          y: direction.linear.y,
          z: direction.linear.z
        },
        angular: {
          x: direction.angular.x,
          y: direction.angular.y,
          z: direction.angular.z
        }
      });

      cmdVel.publish(twist);
    }

    function moveForward() {
      const moveForwardMsg = {
        linear: { x: 0.2, y: 0, z: 0 },
        angular: { x: 0, y: 0, z: 0 }
      };
      move(moveForwardMsg);
    }

    function moveBackward() {
      const moveBackwardMsg = {
        linear: { x: -0.2, y: 0, z: 0 },
        angular: { x: 0, y: 0, z: 0 }
      };
      move(moveBackwardMsg);
    }

    function moveLeft() {
      const moveLeftMsg = {
        linear: { x: 0, y: 0.0, z: 0 },
        angular: { x: 0, y: 0, z: 0.5 }
      };
      move(moveLeftMsg);
    }

    function moveRight() {
      const moveRightMsg = {
        linear: { x: 0, y: 0, z: 0 },
        angular: { x: 0, y: 0, z: -0.5 }
      };
      move(moveRightMsg);
    }

    function stopMovement() {
      const stopMsg = {
        linear: { x: 0, y: 0, z: 0 },
        angular: { x: 0, y: 0, z: 0 }
      };
      move(stopMsg);
    }

    startConnection(); // 初始化ROS连接
  </script>
</body>

</html>