使用Angular运行roslibjs

章节目录

1. 概述
2. 环境
3. 引入Angular端
4. 引入ROS端
5. 实践
6. 结语

总结

今年的ROS Advent Calendar上有很多关于ROS和Web协作的文章,我觉得非常有趣,所以一直在看。
不过我发现,虽然有关于Vue和React与ROS协作的文章,但是几乎没有关于Angular和ROS的文章。
因此,在本文中,我将简要介绍如何使用Angular进行ROS通信。
如果有任何错误之处,请您发现后留下评论,我将不胜感激。

环境

    • Ubuntu 20.04

 

    • ROS 1 noetic

 

    • node v16.10.0

 

    Angular 13

在中文翻译为:“引入Angular侧”。

前提 – Only need one option

假设已经完成了Angular和ROS的环境设置。
此外,将在接下来的项目中使用Angular进行操作。

1. 安装roslibjs

引入roslibjs库,该库用于与ROS进行通信。

npm install roslib

2. 安装数据类型定义

为了让TypeScript能够使用roslibjs,需要安装类型定义文件,因为roslibjs是用于JavaScript的。

npm i @types/roslib --save-dev

3. 安装依赖关系

由于roslibjs依赖于许多库,因此需要安装这些库。

npm install

4. 对WebWorkify进行修复。

我参考了@shiro-kuma先生使用React实时绘制ROS主题并入门到前端部分。非常感谢!

从Angular 12开始,Webpack升级到了版本5,但是根据这里所写的,Webpack 5和roslibjs似乎不兼容。
具体来说,这似乎是由于Webpack 5中包含的Webworkify存在问题,所以我们将根据Webworkify的问题报告来修复相关部分。

首先,打开Angular项目中的node_modules/webworkify/index.js文件。然后,

 var bundleFn = arguments[3];
 var sources = arguments[4];
 var cache = arguments[5];
 var stringify = JSON.stringify;
module.exports = function (fn, options) {  

成为了

var stringify = JSON.stringify;

module.exports = function (fn, options) {
    var bundleFn = arguments[3];
    var sources = arguments[4];
    var cache = arguments[5];

我会像这样进行更改。

Angular的引入已经完成了。

ROS的引入

请安装ros-bridge-server。

请参考:http://wiki.ros.org/rosbridge_suite,并安装ros-bridge-server。这是一个ROS包,它允许通过websocket通信方式来访问ROS。

sudo apt-get install ros-noetic-rosbridge-server

ROS的安装到此为止。

实践 (shí

暂时先创建一个Component和一个Service。
Service的代码可以按照以下方式编写。

服务

import { Injectable } from '@angular/core';
import * as ROSLIB from 'roslib';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class RosService {
  ros: ROSLIB.Ros;
  url = 'ws://127.0.0.1:9090';
  isConnected: Subject<boolean> = new Subject();
  listener: ROSLIB.Topic;
  talker: ROSLIB.Topic;

  constructor() {
    this.ros = new ROSLIB.Ros({
      url: this.url,
    });
    this.ros.on('connection', () => {
      console.log('Connected');
      this.isConnected.next(true);
    });

    this.ros.on('error', (error) => {
      console.log('error', error);
      this.isConnected.next(false);
    });

    this.ros.on('close', () => {
      console.log('closed');
      this.isConnected.next(false);
    });

    this.listener = new ROSLIB.Topic({
      ros: this.ros,
      name: '/listener',
      messageType: 'std_msgs/String',
    });

    this.talker = new ROSLIB.Topic({
      ros: this.ros,
      name: '/talker',
      messageType: 'std_msgs/String',
    });
  }
}

在构造函数中创建ROSLIB.Ros对象。由于只需要一个对象,因此在Service中声明以便可以重新使用。
此外,还在这里生成用于Subscribe/Publish时使用的ROSLIB.Topic对象。
然后按照下面的方式编写组件。

组件

import { Component, OnInit } from '@angular/core';
import * as ROSLIB from 'roslib';
import { RosService } from '../ros.service';

export interface String {
  data: string;
}

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.scss'],
})
export class TopComponent implements OnInit {
  isConnected: boolean = false;
  message: string = '';
  constructor(private rosService: RosService) {}

  ngOnInit(): void {
    this.rosService.isConnected.subscribe(
      (data: boolean) => (this.isConnected = data)
    );
    this.rosService.listener.subscribe((msg: ROSLIB.Message) => {
      this.message = (msg as String).data;
    });
  }

  talk(message: any): void {
    const publishMsg: String = { data: message };
    this.rosService.talker.publish(publishMsg);
  }
}

请不要在意名字叫top.component的这个名字,不太清楚啊笑
在组件中主要进行数据的展示和发布。
需要注意的是,ROS中不存在std_msgs/String类型。

export interface String {
  data: string;
}

这个步骤是为自己定义模式的部分。
最后是HTML。

HTML的中文释义是超文本标记语言。

<h1>ROS connected: {{ isConnected }}</h1>
<h1>Subscribed Message:{{ message }}</h1>
<label>
  publish message:
  <input type="text" #msg />
</label>
<button (click)="talk(msg.value)">publish</button>

我先简单地写了HTML,当在输入框中输入文字并按下“publish”按钮时,它会被发布出去。

实际显示的界面

Screenshot from 2021-12-15 19-36-21.png

执行

打开终端

  roslaunch rosbridge_server rosbridge_websocket.launch

输入该命令后,服务器将启动并开始与网站进行通信。如果在网站上看到ROS connected:true,说明连接已经建立完成。

订阅

刚才是在另一个终端上。 shì .)

 rostopic pub /listener std_msgs/String "data: 'hello world'" 

请在网站上输入“ と”(tó) 。如果在订阅消息上显示“hello world!”,则表示您已进行了订阅。

发布

在另一个终端上

rostopic echo /talker
モザイク.png

我可以看出已经成功发布了。

結論-

我最近在Angular上成功地创建了一个简单的程序来实现ROS和发布/订阅通信。由于在网络上很少有关于Angular和ROS协作的资源,所以我希望这能帮到一些遇到困难的人们。

请提供相关文献参考。

    • ReactでROSのtopicをリアルタイム描画しながらフロントに入門する

 

    • Roslib with Angular 10

 

    roslibjsの基本的な使い方