IT & Art

오늘은 ROS 컨트롤러와 영상을 보여주는 React 웹앱을 만들고 CLOi 시뮬레이터에 연결해 보겠습니다. React-Nipple 먼저 조이스틱을 직접 만들기 어려우니, 널리 알려진 nipple.js를 사용합니다. React에서 사용할 수 있는 버전이 npm에서 제공되므로 그걸 사용합니다. react-nipple A react wrapper for the [nipplejs](https://www.npmjs.com/package/nipplejs) on-screen-joystick. www.npmjs.com ReactNipple 설치 후 import해서 move, end 이벤트만 처리하면 되는데요, 조이스틱을 움직이기 시작하면 start(무시해도 됩니다) 이벤트 이후 지속적으로 move 이벤트가 올라오고 조..

지난 편에서 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 ..

ROS는 로봇을 컨트롤하는 기술입니다. OS라기보다는 (MQTT처럼) publish-subscribe 구조로 명령과 상태를 주고 받는 메시지 브로커에 가깝죠. 꼭 로봇이 없어도 시뮬레이터를 사용해 ROS를 해볼 수 있는데요, 오늘은 인천공항 로봇으로 널리 알려진 LG CLOi 로봇 시뮬레이터를 통해 작업해 보겠습니다. ROS2 설치 및 실행 ROS는 ROS1과 ROS2 두 개 버전이 있는데요, ROS1에 비해 ROS2는 설치부터 아주 간단합니다. ROS1 설치하려면 준비과정도 복잡하고 오류도 많이 나는 데다가 설치 후에도 설정해 줄 것들이 많아요. 따라서 우리는 ROS2를 사용하겠습니다. 윈도우나 맥에서도 ROS2를 깔 수 있지만, 여기서는 리눅스(Ubuntu 18.04 LTS)를 기준으로 합니다. In..

MQTT 통신 시리즈입니다. 네트워크 - 1. MQTT 네트워크 - 2. MQTT Client ★Sample Code MQTT Client : 웹앱 웹앱에서 MQTT Client를 설치하는 방법은 다음과 같습니다. 일반적인 Javascript 코드라면, mqtt.js를 CDN으로 링크할 수 있습니다. Node 앱이라면 npm(node package manager)를 사용하여 mqtt.js로 설치할 수 있습니다. React 앱이라면 위 2번 방법으로 할 수도 있고 별도의 react-mqtt 패키지도 있긴 한데, 저는 개인적으로 2번 방식을 추천합니다. 우리는 간단한 React 앱을 만들어 볼 텐데요, 아래와 같이 MqttComponent를 품고 있는 앱인데요, MQTT 연결 상태나 설정은 MqttCompo..

MQTT 통신 시리즈입니다. 네트워크 - 1. MQTT 네트워크 - 2. MQTT Client ★Sample Code 웹앱에서 다른 앱이나 서버 등과 통신할 수 있는 다양한 프로토콜 서비스가 있지만, Restful, 웹소켓, MQTT이 자주 사용됩니다. 오늘은 그중 MQTT에 대해 알아볼 텐데요, 사실 MQTT는 웹앱에서만 쓰이는 것이 아니라 광범위하게 사용되는 일반적인 통신 프로토콜입니다. MQTT MQTT(Message Queuing Telemetry Transport)는 발행-구독(Publish-Subscribe) 구조로 구성되는데요, 말 그대로 누군가 어떤 주제(topic)로 메시지를 발행하면 해당 주제에 가입된, 즉 해당 주제를 구독 중인 디바이스들만 메시지를 받게 됩니다. 또한 이러한 발행-구..

주의! 폰트는 라이선스에 항상 유의해야 합니다. 오늘 소개할 Art Deco Font는 독특하고 재미있는 폰트가 아주 많습니다. 제목 그대로 예술적인 폰트가 많아 저는 개인적으로 앨범 커버와 같은 예술 작품을 제작할 때 사용하는데요, 폰트마다 라이선스가 다르기 때문에 꼼꼼히 살펴야 합니다. 그럼에도 거의 조건 없는 무료 폰트가 많기 때문에 아주 유용합니다. 259 Free Art Deco Fonts · 1001 Fonts × An error has occured. Please try again later. www.1001fonts.com 상단 검색창에서 원하는 키워드(e.g. horror)로 검색하고 녹색 태그만 필터링하면, Gypsy Curse 폰트 옆에 녹색 태그가 라이선스 정보인데요, 유료인 경우에..