开发ROS相关的web应用（二） - 在web中与turtlebot仿真互动

本文介绍如何用开发基于angular的应用，结合rosbridge和turtlebot3进行交互。

本文所用的环境是ubuntu20.04 (ros-noetic)，angular12

 

一. turtlebot3的仿真

在ROS上安装turtlebot3仿真环境：

首先安装基本pkg：

$ cd ~/catkin_ws/src/
$ git clone https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git -b noetic-devel
$ git clone  https://github.com/ROBOTIS-GIT/turtlebot3.git -b noetic-devel
$ cd ~/catkin_ws && catkin_make

之后安装sim:

$ cd ~/catkin_ws/src/
$ git clone https://github.com/ROBOTIS-GIT/turtlebot3_simulations.git
$ cd ~/catkin_ws && catkin_make

需要以下步骤来配置下系统环境：

source /opt/ros/noetic/setup.bash
source /home/akoubaa/catkin_ws/devel/setup.bash
export TURTLEBOT3_MODEL=waffle
export SVGA_VGPU10=0

其中SVGA_VGPU10是针对Nvidia显卡的选项，如果仍然有显示错误，更新显卡驱动或尝试将值改成1。

开启turtlebot3的gazebo仿真：

 

$ roslaunch turtlebot3_gazebo turtlebot3_house.launch

 

 

 

二. Ros消息的发布 

本节介绍用angular遥控器组件开发一个turtlebot3遥控器

首先安装遥控器的package：

npm install --save-dev ngx-joystick

所安装的angular控件是一个摇杆，支持三种遥感模式，这里示例static模式遥感的使用和ros消息的发布：

html template开发如下：

<div>
  <div class="container noselect">
    <div class="zone">
      <ngx-joystick #staticJoystic
                    [options]="staticOptions"
                    (start)="onStartStatic($event)"
                    (end)="onEndStatic($event)"
                    (move)="onMoveStatic($event)"
                    (plainUp)="onPlainUpStatic($event)"
                    (plainDown)="onPlainDownStatic($event)"
                    (plainLeft)="onPlainLeftStatic($event)"
                    (plainRight)="onPlainRightStatic($event)"></ngx-joystick>
    </div>
    <div *ngIf="staticOutputData && showInfo" class="zone-absolute">
      <div style="float: right;">
        <div>xPos: {{ staticOutputData.position.x | number:'3.2-2'}}</div>
        <div>yPos: {{ staticOutputData.position.y | number:'3.2-2'}}</div>
        <div>dirEvent: {{ directionStatic }}</div>
        <div>interact: {{ interactingStatic }}</div>
      </div>ng
      <div>frontXPos: {{ staticOutputData.instance.frontPosition.x | number:'2.5-5'}}</div>
      <div>frontYPos: {{ staticOutputData.instance.frontPosition.y | number:'2.5-5'}}</div>
      <div>force: {{ staticOutputData.force | number:'1.5-5'}}</div>
      <div>angle-deg: {{ staticOutputData.angle.degree | number:'3.5-5'}}</div>
      <div>angle-rad: {{ staticOutputData.angle.radian }}</div>
      <div>direction: {{ staticOutputData.direction ? staticOutputData.direction.angle : ''}}</div>
      <div>distance: {{ staticOutputData.distance }}</div>
    </div>
  </div>
</div>

遥控器逻辑：

import {Component, OnInit, ViewChild, Output, EventEmitter} from '@angular/core';
import { JoystickEvent, NgxJoystickComponent } from 'ngx-joystick';
import {Joystick, JoystickManagerOptions, JoystickOutputData, Position} from 'nipplejs';

@Component({
  selector: 'app-teleop',
  templateUrl: './teleop.component.html',
  styleUrls: ['./teleop.component.css']
})
export class TeleopComponent implements OnInit {

  @ViewChild('staticJoystic') staticJoystick: NgxJoystickComponent | undefined;

  @Output() moveEvent = new EventEmitter<JoystickOutputData>();

  staticOptions: JoystickManagerOptions = {
    mode: 'static',
    position: { left: '50%', top: '50%' },
    color: '#222222',
  };

  staticOutputData: JoystickOutputData | undefined;

  directionStatic: string;
  interactingStatic: boolean;
  showInfo: boolean = false;

  constructor() {
    this.directionStatic = '';
    this.interactingStatic = false;
  }

  ngOnInit() {
  }

  onStartStatic(event: JoystickEvent) {
    this.interactingStatic = true;
  }

  onEndStatic(event: JoystickEvent) {
    if (this.staticOutputData) {
      let data = this.staticOutputData;
      data.vector.x = 0;
      data.vector.y = 0;
      this.moveEvent.emit(data);
    }
    this.interactingStatic = false;
  }

  onMoveStatic(event: JoystickEvent) {
    this.staticOutputData = event.data;
    this.moveEvent.emit(this.staticOutputData);
  }

  onPlainUpStatic(event: JoystickEvent) {
    this.directionStatic = 'UP';
  }

  onPlainDownStatic(event: JoystickEvent) {
    this.directionStatic = 'DOWN';
  }

  onPlainLeftStatic(event: JoystickEvent) {
    this.directionStatic = 'LEFT';
  }

  onPlainRightStatic(event: JoystickEvent) {
    this.directionStatic = 'RIGHT';
  }

}

 

三. Ros消息的监听

这里监视turtlebot3 gazebo中的速度和位置：

为了正确显示角度，首先需要安装THREE这个库来将四元数转化成欧拉角：

npm install --save-dev three

html template:

<h3 class="text-center">Robot Position</h3>
<div class="row">
  <div class="col">
    <h4 class="mt-4">Position</h4>
    <p class="mt-0">x:{{this.state.x}}</p>
    <p class="mt-0">y:{{this.state.y}}</p>
    <p class="mt-0">orientation:{{this.state.orientation}}</p>
  </div>
  <div class="col">
    <h4 class="mt-4">Velocities</h4>
    <p class="mt-0">Linear Velocity:{{this.state.linear_velocity}}</p>
    <p class="mt-0">Angular Velocity:{{this.state.angular_velocity}}</p>
  </div>
</div>

逻辑：

import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {JoystickOutputData} from "nipplejs";
import * as THREE from "three";

declare var ROSLIB: any;
declare var ROS2D: any;

@Component({
  selector: 'app-robot-state',
  templateUrl: './robot-state.component.html',
  styleUrls: ['./robot-state.component.css']
})
export class RobotStateComponent implements OnInit, OnDestroy {

  @Input() ros: any = null;

  intervalId: number = 0;

  pose_subscriber: any = null;

  odom_subscriber: any = null;

  position: any = null;

  odom: any = null;

  state = {
    x: 0,
    y: 0,
    orientation: '0',
    linear_velocity: 0,
    angular_velocity: 0,
  }

  constructor() {

  }

  ngOnInit(): void {
    this.intervalId = setInterval(()=> {
      if (this.position){
        this.state.x = this.position.pose.pose.position.x.toFixed(2);
        this.state.y = this.position.pose.pose.position.y.toFixed(2);
        this.state.orientation = (RobotStateComponent.getOrientationFromQuaternion(this.position.pose.pose.orientation)).toFixed(2);
      }
      if (this.odom) {
        this.state.linear_velocity = this.odom.twist.twist.linear.x.toFixed(2);
        this.state.angular_velocity = this.odom.twist.twist.angular.z.toFixed(2);
      }
    }, 100);

    if (this.ros) {
      this.pose_subscriber = new ROSLIB.Topic({
        ros: this.ros,
        name: "/amcl_pose",
        messageType: '/geometry_msgs/PoseWithCovarianceStamped',
      });

      this.pose_subscriber.subscribe((message: any) => {
        this.position = message;
      });

      this.odom_subscriber = new ROSLIB.Topic({
        ros: this.ros,
        name: "/odom",
        messageType: 'nav_msgs/Odometry',
      });

      this.odom_subscriber.subscribe((message: any) => {
        this.odom = message;
      });
    }
  }

  ngOnDestroy() {
    clearInterval(this.intervalId);
  }

  private static getOrientationFromQuaternion(ros_orientation_quaternion: any): number {
    const q = new THREE.Quaternion(ros_orientation_quaternion.x, ros_orientation_quaternion.y,
      ros_orientation_quaternion.z, ros_orientation_quaternion.w);
    const RPY = new THREE.Euler().setFromQuaternion(q);
    return RPY.z * (180 / Math.PI);
  }

}

遥控器和监控panel效果如下：

 

 

 

 

四. 基于ROS2D的地图显示和导航

启动Rviz和导航功能：

$ roslaunch turtlebot3_navigation turtlebot3_navigation.launch map_file:=/your/path/to/map/tb3_house_map.yaml

安装ros2d:

npm install --save-dev ros2d

这里要注意ros2d的两个依赖并不会自动安装：easeljs 和 eventemitter2，分别到相应的git地址中找到相应的代码并放入当前项目中。要实现地图显示和导航还需要nav2d，也从git中找到代码：

 

 在angular.json中添加js代码：

 

 开发地图component,代码如下：

 html 模板：

<div id="nav_div"></div>

逻辑代码：

import {Component, Input, OnInit} from '@angular/core';
//import {ROS2D} from "../connection.component";

declare var ROS2D: any;
declare var NAV2D: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  @Input() ros: any = null;

  constructor() { }

  ngOnInit(): void {
    this.viewMap();
  }

  viewMap() {
    const viewer = new ROS2D.Viewer({
      divID: "nav_div",
      width: 640,
      height: 480,
    });
    console.log(viewer);
    const navCli = new NAV2D.OccupancyGridClientNav({
      ros: this.ros,
      rootObject: viewer.scene,
      viewer: viewer,
      serverName: "/move_base",
      widthOrientation: true,
    });
  }

}

效果：

 

 

注：本文中所有component的ROS object都是从主页面中注入的，可以确保所有模块所用ROS对象的一致性