Blockly 블럭 만들기 #1

Blockly는 사용자가 원하는 기능의 블럭을 자유롭게 만들수 있다. 기본 제공된 블럭 외에 사용자의 로봇이나 기타 기능과 연동하기 위한 블럭을 생성하고, 이를 툴박스에 넣어 사용하면 된다.

Blockly는 이러한 블럭들을 쉽게 만들수 있도록 도구를 제공한다. 재밌게도 블럭을 생성하는 것도 블럭으로 만든다. 물론 나중에 좀 익숙해지만 텍스트로 편집하는게 좀더 쉬울 수 있지만, 제공되는 도구를 이용하면 생성되는 블럭 모양을 확인하면서 수정이 가능하다.

먼저 Blockly Developer Tools를 사용해보자. 사파리나 크롬 등 브라우저를 열고 (https://blockly-demo.appspot.com/static/demos/blockfactory/index.html)으로 이동한다.

위와 같은 화면이 나오는데, 왼쪽은 블럭을 생성하기 위한 블럭 코딩 영역, 오른쪽 상단엔 생성된 블럭 모양을 실시간으로 확인이 가능하고, 오른쪽 중앙엔 추후 코드에 삽입하기 위한 JSON 코드, 오른쪽 하단엔 블럭을 실제 코드로 생성하기 위한 generator 코드가 생성된다.

일단 흐름을 보기 위해 아주 간단한 블럭을 생성해보도록 한다. 사용자의 문자열 입력을 받아 console에 출력하는 블럭을 만들어 보록 한다. 먼저 블럭의 name을 수정한다. 여기선 console_print로 한다.

다음으로 이 블럭은 다른 블럭들과 상하 연결하여 사용 가능해야 하므로, connection을 top+bottom connections로 변경한다. 이렇게 되면 미리보기 창의 블럭 모양이 변경됨을 볼 수 있다.

다음으로 사용자의 문자열을 입력 받아야 한다. 왼쪽 툴박스 창에서 Input 카테고리내에 value input 블럭을 inputs에 추가한다. 이 입력을 받아서 내부에서 처리하기 위한 변수명은 value_input 옆에 있는 NAME이다. 이를 필요에 따라 적절하게 수정한다.

이제 블럭에 기능을 설명하기 위한 텍스트 블럭을 추가한다. (Field 카테고리 Text 블럭)

입력은 Text만 받아야 하므로, 입력 type에 String 블럭을 추가한다.

마지막으로 블럭의 색상과, 이 블럭을 사용하는데 필요한 tooltip, help url 등을 입력한다.

이제 생성된 블럭의 모양을 확인해보면,

와 같이 간단한 모양의 블럭이 생성되었다. 생성된 JSON 코드를 확인해보면,

{
  "type": "console_print",
  "message0": "console print %1",
  "args0": [
    {
      "type": "input_value",
      "name": "NAME",
      "check": "String"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 330,
  "tooltip": "Block for printing the user message",
  "helpUrl": "https://ahnbk.com"
}

그리고, 이와 같이 생성된 Generator stub을 보면,

Blockly.JavaScript['console_print'] = function(block) {
  var value_name = Blockly.JavaScript.valueToCode(block, 'NAME', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = '...;\n';
  return code;
};

와 같이 되어 있다. 자 이제 블럭이 생성되었으므로, 이를 지난번에 만들었던 예제에 생성된 블럭을 추가해보도록 한다. 예제 디렉토리로 이동하여, my_blocks.js 파일을 생성하고, 다음과 같이 입력한다.

'use strict';

goog.require('Blockly.Blocks');
goog.require('Blockly');

Blockly.defineBlocksWithJsonArray(
[
    // insert blocks here

]);

이제 “insert blocks here 부분에 위에서 생성된 코드를 붙여 넣는다.

'use strict';

goog.require('Blockly.Blocks');
goog.require('Blockly');

Blockly.defineBlocksWithJsonArray(
[
    {
        "type": "console_print",
        "message0": "console print %1",
        "args0": [
          {
            "type": "input_value",
            "name": "NAME",
            "check": "String"
          }
        ],
        "previousStatement": null,
        "nextStatement": null,
        "colour": 330,
        "tooltip": "Block for printing the user message",
        "helpUrl": "https://ahnbk.com"
      },
]);

저장한 다음, index.html 파일을 열고 위 파일을 로딩하도록 추가한다.

<!DOCTYPE html>
<!-- HTML file to host Blockly in a mobile WebView. -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <style type="text/css">
    html, body, #blocklyDiv {
      border: 0;
      height: 100%;
      margin: 0;
      padding: 0;
      width: 100%;
    }
  </style>
  <script src="blockly_compressed.js"></script>
  <script src="blocks_compressed.js"></script>
  <!-- TODO: Select msg file based on locale. -->
  <script src="msg/js/en.js"></script>
  <script src="toolbox_standard.js"></script>
  <script src="my_blocks.js"></script>
</head>
<body>
  <div id="blocklyDiv"></div>
  <script type="text/javascript">
    var workspacePlayground = Blockly.inject('blocklyDiv', {
          media: 'media/',
          toolbox: BLOCKLY_TOOLBOX_XML['standard'],
          zoom: {controls: true}
        });
  </script>
</body>
</html>

바로 이전 포스팅에서 만든 Custom 카테고리에 생성된 블럭을 추가한다.

+ '<category name="Custom" colour="100">'
+   '<block type="console_print">'
+   '</block>'
+ '</category>'

자, 이제 예제를 다시 열어보면,

Custom 카테고리에 console print 블럭이 추가되어 있음을 볼 수있다. 만약 문자열 입력에 default 값을 넣어 주고 싶다면, 툴박스에 코드를 다음과 같이 수정한다.

+ '<category name="Custom" colour="100">'
+   '<block type="console_print">'
+     '<value name="NAME">'
+       '<shadow type="text">'
+         '<field name="TEXT">Hello Blockly</field>'
+       '</shadow>'
+     '</value>'
+   '</block>'
+ '</category>'

이제 다시 예제를 확인해보면,

와 같이 되어 있음을 확인할 수 있다. 다음엔 좀더 다양한 모양의 블럭을 만들어보록 한다.

Scratch 3.0 Scratch Link를 수정해보기

Scratch 3.0은 외부기기와 연동하기 위해서 Scratch Link 앱을 이용해야 한다. (Scratch 내부에 구현할 수도 있을 것 같은데, 이렇게 되면 다른 운영체제에서 호환이 안될테니 아마도 이렇게 만들어 놓은듯 하다) 내부를 들여다보면 Scratch Link에서 WebSocket 서버를 제공하고, BLE, BT로 구분하여 접속할 수 있다. 통신은 JSONRPC를 이용한다. BLE, BT 모두 프로토콜은 동일하다.

따라서 Bluetooth 시리얼, BLE 등을 이용한 기기들은 기존 프로토콜을 이용하여 접속 및 연동이 가능하다. OROCA-Edubot도 이와 같은 과정을 통해 연동에 성공하였다. 이제 좀더 나아가 시리얼포트를 이용할 경우 (예를 들어 Arduino 보드나 사용자가 개발한 보드들)엔 어떻게 해야 할까?

고민해본 결과 가장 클리어한 방법은 Scratch Link를 확장하여 시리얼 통신을 지원하게끔 하면 될 것 같다. 마침 기존까진 실행파일로만 제공되었던 Scratch Link가 이젠 소스까지 제공되고 있다. 개발 지원 운영체제는 macOS와 윈도우이다.

소스는 https://github.com/llk/scratch-link에서 받을 수 있다. 개발PC에 일단 클론해 보고,

$ git clone https://github.com/LLK/scratch-link.git

README.md 파일에 나온 것과 같은 과정을 통해 빌드해보자. 보안 WebSocket를 사용해야 하므로 인증서가 필요하다. 나중에 판매하거나 양상 목적이라면 돈을 주고 구입해야 하지만, 개인이 사용할 경우엔 PC에서 쉽게 생성 가능하다.

$ cd scratch-link
$ cd Certificates
$ openssl req -x509 -out scratch-device-manager.cer -keyout scratch-device-manager.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=scratch-device-manager' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

$ ./convert-certificates.sh

위 과정이 완료되면 out 디렉토리에  scratch-device-manager.pem, scratch-device-manager.pfx 파일이 생성된다.

현재 내가 사용하고 있는 개발환경은 macOS 이므로, macOS 폴더로 이동하여 빌드를 시작한다. Xcode, pngcrush를 미리 설치되어 있어야 한다. Xcode는 앱스토어에서, pngcrush는 homebrew를 이용하면 쉽게 설치할 수 있다.

$ cd ..
$ cd macOS
$ make

빌드에 필요한 패키지들이 자동으로 설치되고, 에러가 없이 완료되면 dist 디렉토리가 생성되고 Scratch Link 앱이 생성되어 있음을 볼 수 있다.

이제 이 앱을 실행해보면, 기존과 같이 메뉴바에 Scratch Link가 위치한다.

Scratch 3.0를 실행하고, BLE와 BT 등 기존과 동일하게 동작하는지 확인한다. 지난번 개발환경 구축 포스팅에서 device-manager.scratch.mit.edu를 hosts 파일을 이용해 127.0.0.1로 강제 변경하였는데, 이제 Scratch Link를 직접 사용할 수 있으므로 localhost로 변경하여 사용해도 무방하다.

따라서, hosts 파일을 변경하는 작업을 하지 않고, scratch-vm 내에서 다음의 파일에 있는 웹소켓 주소를 localhost로 변경한다.

> scratch-vm/src/io/ble.js

const ScratchLinkWebSocket = 'wss://localhost:20110/scratch/ble';
> scratch-vm/src/io/bt.js

const ScratchLinkWebSocket = 'wss://localhost:20110/scratch/bt';

(추가) 최근 변경된 버전에선 ./util/scratch-link-websocket.js 에서 저 링크들을 관리하는 듯 하다. 따라서 해당 파일을 수정해주면 됨.

> scratch-vm/src/util/scratch-link-websocket.js
28: this._ws = new WebSocket('wss://device-manager.scratch.mit.edu:20110/scratch/ble');
31: this._ws = new WebSocket('wss://device-manager.scratch.mit.edu:20110/scratch/bt'); 

이제 Scratch 3.0을 실행하고 확장카드를 실행해보면,

사파리의 경우, 위와 같이 Scratch Link와의 연결이 되지 않는다. 새로운 사파리 창을 띄우고 https://localhost:20110 로 접속한다. 다음과 같이 나오는데,

Show Details 버튼을 누르고, 아래쪽에 visit this website 링크를 누르고 다시 한번 접속하겠다고 하면, 어드민 암호를 입력하고 현재의 인증서가 사파리에 저장된다.

이제 Scratch 3.0에서 정상적으로 실행됨을 볼 수 있다.

다음엔 Scratch Link의 소스를 분석하고 시리얼 통신이 가능하도록 모듈을 작성해보도록 한다.


참고링크

잔치국수

아들 녀석이 국수를 좋아하여 종종 끓여주고 있음.

육수

  1. 물 650ml 정도에 국간장, 양조간장을 같은 비율로 섞어주고 끓인다. 이때 간을 봤을 따, 살짝 간장맛이 들 정도로.
  2. 당근, 호박, 양파를 채 썰고 끓는 물이 넣어준다.
  3. 야채가 익으면, 계란 한개를 풀어 불을 끈 상태에서 넣어준다.
  4. 다시 끓이면서, 소금으로 간을 맞춘다. 후추도 첨가.

국수

  1. 면의 종류가 많긴한데, 먹기 부드러운 세면으로 선택
  2. 1인분 양을 잡아 끓이고, 다 익었다 싶으면 찬물에 행궈서 그릇에 이쁘게 담아준다.

완성

  1. 국수를 담은 그릇에 국물만 적당량을 살살 부어준다.
  2. 야채 및 계란 등 삶은 건더기를 국수 위에 살포시 얹어준다.

간장을 많이 넣으면 국물이 짙은 색으로 탁해지니 약간만 넣고, 최종 간은 소금으로. 양념장을 만들어 넣어 먹어도 되지만 이대로 먹어도 큰 무리수는 없음.

취향에 따라 김치 등을 얇게 썰어 같이 먹어도 별미.

Anki Vector 언박싱

얼마전 Anki社가 문을 닫았다. Cozi, Vector 등 귀엽고 기능 많은 로봇들을 개발하였고, 언뜻 보기엔 많이 팔리기도 하였는데… 왜 그랬을까… 뭐 암튼! 항상 구매해보고 싶단 생각은 갖고 있었는데, 문을 닫았다니 더 구매해보고 싶어서 뉴스가 뜬 날 바로 주문했다. 가격은 대충 30만원 정도? 해외주문이라 시간이 좀 걸리는 듯 하더니 드디어 도착.

이 로봇은 저 귀여운 눈이 포인트! 로봇 전체 색상은 아주 짙은 회색 (검은색이라고 해야 되나?)이 기본이고, 군데군데 금색 포인트, LED 등이 배치되어 있다.

상자를 열어보면 알차게 로봇과 큐브가 넣어져 있다. 역시 제품은 꺼내자마자 켜고 동작되어야 제맛. 이것저것 많이 설정하거나 하면 사용자는 힘들어진다. 전원키고 스맛폰 연결해서 계정 연동하면 끝.

한글이 지원되지는 않고 영어로 명령을 내리거나 의사소통해야 된다. Wakeup 단어는 “Hey! Vector.”이다. 로봇이 뭔가 처리를 하는 동안엔 알아듣지 못하며, 중간중간 idle 상태에선 칼 같이 알아듣는다.

큐브를 이용해 이것저것 명령을 내릴수도 있고, 그냥 냅두면 알아서 갖고 논다. 몇시간 정도 갖고 놀아본 결과, 이 제품의 컨셉은 애완동물인듯 하다. 가만히 냅둬도 이곳저곳 돌아다니고, 충전을 위한 도킹 스테이션을 자기의 집으로 생각하는…

거리센서와 카메라를 이용해 어느 정도 SLAM 기능을 수행하는 듯하다. “Go to charging station!”이라고 명령을 내리면 스스로 주변에 있는 도킹 스테이션을 찾아 충전을 시작한다.

로봇을 제어하기 위한 API도 상당히 충실하게 지원한다. python3로 프로그래밍 가능하니 쉬울듯. 잠깐 생각해본 바로는 ROS 연동도 쉽게 될것 같다. 실제로 여러가지 프로젝트들이 Vector를 이용해서 진행되고 있는 듯.

참고링크

Jetson Nano에서 Intel RealSense D435 카메라 사용해보기

Jetson Nano에는 USB 3.1 gen2 포트가 4개 존재한다. 문득 집에서 놀고 있는 인텔 리얼센스 카메라가 있어 연결해보기 위해 작업 시작.

Intel에서 Intel® RealSense™ SDK의 arm64용 빌드된 패키지를 제공해주지 않으므로, Jetson Nano에서 사용하기 위해선 소스를 직접 빌드하여야 한다. 먼저 소스 빌드를 위해 필요한 패키지들을 설치한다.

$ sudo apt install libgtk-3-dev libxcursor-dev libxinerama-dev

다음으로 레포지토리 (https://github.com/IntelRealSense/librealsense)에서 최신 릴리즈된 소스를 받아온다. (https://github.com/IntelRealSense/librealsense/releases)

받아온 소스의 압축을 풀고,

$ tar zxf librealsense-2.21.0.tar.gz
$ cd librealsense.2.21.0
$ mkdir build
$ cd build 
$ cmake ..

정상적으로 종료되면, 빌드를 시작한다. 이때 메모리 부족이 일어나므로 이번 포스트와 마찬가지로 swap 파티션을 활성화 한다.

$ sudo swapon /swapfile

빌드 시작

$ make -j1

정상적으로 빌드가 완료되면, 이제 설치.

$ sudo make install

이제 리얼센스 카메라를 연결하고, 테스트용 프로그램인 realsense-viewer를 실행해본다.

$ realsense-viewer

카메라가 정상적으로 인식되고 USB 3.1 gen2로 연결되어 있음을 볼수 있다. 몇가지 테스트 해본 결과 Jetson Nano에서는 1280×720의 해상도를 처리하기엔 너무 느리다. 따라서 해상도를 640×480으로 변경하여 사용한다.

이제 카메라를 켜보면~,

Depth 이미지와 RGB 이미지가 정상적으로 잘 보인다. 코어의 성능때문인지 30프레임이 다 나오는 것 같진 않다.


주의사항! 현재 Jetson Nano에는 5V, 2.1A 어뎁터를 사용하여 연결하였는데, 위와 같이 코어의 성능을 뽑아쓰는 어플리케이션을 돌리다보면 갑자기 전원이 나가는 경우가 가끔씩 발생하였다. 좀더 높은 전류를 제공하는 어댑터를 사용하기를 권장함.