지난 편에서 ROS2와 LG CLOi 시뮬레이터를 설치하고 터미널에서 명령을 보내봤습니다.
오늘은 방향키 GUI를 가진 React 웹앱을 만들어 연결해 봅시다.
CLI - Subscribe 테스트
지난 편에서 키보드를 누르면 ROS 토픽(/cloi1/cmd_vel)으로 데이터가 publish되어 시뮬레이터의 클로이를 움직였는데요, 클로이가 해당 토픽에 subscribe하고 있기 때문에 움직일 수 있던 거에요. 이는 ROS2 CLI로도 확인할 수 있는데요, ros2 topic echo <토픽> 명령을 치면, 키보드를 누를 때 전송되는 데이터를 확인할 수 있습니다.
$ ros2 topic echo /cloi1/cmd_vel
linear:
x: 0.0
y: 0.0
z: 0.0
angular:
x: 0.0
y: 0.0
z: -1.0
---
위와 같이 linear와 angular 데이터가 오는군요.
CLI - Publish 테스트
키보드로 명령을 보내는 대신 CLI로 명령을 보낼 수도 있습니다. 새로운 터미널을 열어 ROS를 적용한 후,
$ros2 topic pub --once /cloi1/cmd_vel geometry_msgs/msg/Twist '{linear: {x: 2.0, y: 0.0, z: 0.0}, angular: {x: 0.0, y: 0.0, z: 1.8}}'
publisher: beginning loop
publishing #1: geometry_msgs.msg.Twist(linear=geometry_msgs.msg.Vector3(x=2.0, y=0.0, z=0.0), angular=geometry_msgs.msg.Vector3(x=0.0, y=0.0, z=1.8))이렇게 하면 키보드를 쳤을 때와 같이 CLI - Subscribe 테스트 터미널에 데이터가 날라오는 것이 보입니다.
이제 웹앱에서 보내 보겠습니다.
ROS2 Web Server
지금까지 사용해 온 CLI 대신 웹앱에서 명령을 보내려면 먼저 ROS2 Web Server를 설치해야 합니다.
RobotWebTools/ros2-web-bridge
Bridging your browser to the ROS 2.0. Contribute to RobotWebTools/ros2-web-bridge development by creating an account on GitHub.
github.com
이는 웹앱이 ROS2가 설치된 디바이스와 통신하기 위한 일종의 안테나로 이해하면 되는데요, 웹앱에서 ROS2 Web Server의 웹소켑에 연결해서 ROS 메시지를 보내면 웹 서버 내에서 ROS2와 통신(rclnodejs; ros client library for node js를 이용하는 거죠)하고 결과를 포워딩해주는 브릿지 역할을 해줍니다.
이 툴은 Node.js 버전 10.23.1 ~ 12.x 에서 동작하는데요, 보통 요즘에는 현재 Node.js 버전이 16까지 나왔고 LTS(안정화된 버전)가 14인 시점에서 구버전을 쓰면 다른 Node 프로그램들에 문제가 생기겠죠. 이럴 때 사용하는 것이 NVM(Node Version Manager)인데요, 터미널(쉘)마다 다른 Node.js 버전을 사용할 수 있게 해줍니다. 즉, 원래 Node.js v14를 사용하는데 어떤 터미널에서만 v10을 사용할 수 있다는 것이죠.
NVM 설치는 링크를 참고해서 세 줄을 실행하면 됩니다.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
NVM 버전을 사용할 때는 nvm use v10 이런 식으로 사용하면 됩니다.
다시 본론으로 돌아가서, 소스를 다운받아 빌드합니다. 이때 터미널에 ROS 환경이 적용돼 있어야 합니다.
$ git clone https://github.com/RobotWebTools/ros2-web-bridge.git
package.json을 열어보면 rclnodejs 버전이 안 정해져있는데요, 저는 ROS2 Eloquent니까, 0.18.2로 변경해주고 nvm use v10.24.1로 설정 후 npm install 완료했습니다.
빌드에 성공했다면, 이제 실행합니다.
ros2-web-bridge$ node bin/rosbridge.js
Websocket started on ws://localhost:9090
웹앱
잘 돌아가는지 간단한 HTML 코드로 검증해 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="https://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
<script>
const ros = new ROSLIB.Ros();
ros.connect('ws://localhost:9090');
const rosTopic = new ROSLIB.Topic({
ros : ros,
name : '/cloi1/cmd_vel',
messageType : 'geometry_msgs/Twist'
});
const twist = new ROSLIB.Message({
linear: {
x: 0.25,
y: 0,
z: 0
},
angular: {
x: 0,
y: 0,
z: 0.25
}
});
function sendTwist(){
console.log("sendTwist", rosTopic, twist);
rosTopic.publish(twist);
}
</script>
</head>
<body>
<h1>RubenChoi Test</h1>
<button onclick="sendTwist()">Send ROS</button>
</body>
</html>
Send ROS 버튼을 누르면 Twist 토픽 데이터가 publish되고 이를 클로이가 받아 움직이기 시작합니다.
'IT > Network & OS' 카테고리의 다른 글
| [AWS] EC2 (0) | 2022.02.05 |
|---|---|
| ROS - 3. React 웹앱 (0) | 2021.05.27 |
| ROS - 1. ROS2 설치 및 CLOi 시뮬레이터 (0) | 2021.05.17 |
| 네트워크 - 2. MQTT Client (0) | 2021.04.08 |
| 네트워크 - 1. MQTT (0) | 2021.04.02 |