Scratch 3.0 확장블럭 종류

Scratch엔 다양한 종류의 블럭들이 존재한다. 사용자가 확장 블럭을 만들 경우, 제공되는 데이터의 종류에 맞추어 블럭을 만들어야 하는데, 반드시 다음의 종류 중 하나 이어야 한다.

참고할 파일은 scratch/scratch-vm/src/extension-support/block-type.js이다.

1.BOOLEAN

육각형 모양으로 되어 있으며, 출력 결과는 true or false 두개의 값만을 가진다. 주로 논리(If else 등)에서 사용된다.

2.COMMAND

위와 아래에 다른 블럭을 연결할 수 있으며, 주로 어떠한 명령을 내리기 위해 사용한다.

3.CONDITIONAL

COMMAND 블럭의 특수한 형태로, 주어진 조건에 맞을 시, 바로 아래에 연결된 블럭을 실행한다. 조건이 맞든 맞지 않든, 다음 블럭으로 무조건 실행한다. (Non blocking 실행이라는 의미인듯)

4.HAT

위와 같이 생긴 블럭으로 스택 (블럭들이 연결되어 있는 모듬)의 처음에만 위치 할 수 있다. 한마디로 특정 기능의 맨처음에 위치

5.EVENT

HAT 블럭의 특수한 형태로, 특정 이벤트를 만족하면 실행하는 블럭. 거의 대부분의 HAT 블럭이 이와 같은 형태임.

6.LOOP

위아래 블럭 연결이 가능하고, Child 블럭을 포함하는 블럭. Child 블럭을 반복하여 실행함. 횟수나 조건식 등을 포함하여 Loop를 제어할 수 있음.

7. REPORTER

숫자나 문자등 값을 저장하고 있는 블럭. 단일값인 경우 앞쪽에 체크 박스가 존재하며 이를 클릭하면 Sprite 화면에서 값을 모니터링 가능. 배열값인 경우는 체크박스가 존재하지 않으며, 블럭을 터치하는 경우 값 확인 가능.

solve connection problem for surface mouse on ubuntu 16.04

Edit the file /etc/bluetooth/main.conf

line 89, uncomment

AutoEnable=false -> AutoEnable=true

and, edit the file /lib/udev/rules.d/50-bluetooth-hci-auto-poweron.rules

uncomment all

# Set bluetooth power up
ACTION=="add", SUBSYSTEM=="bluetooth", KERNEL=="hci[0-9]*", RUN+="/bin/hciconfig %k up"

done.

Scratch 3.0 확장블럭 다국어 지원

Scratch 3.0은 다국어를 지원한다. 인터페이스에서부터 블럭까지 모든 부분을 다국어를 지원하도록 만들수 있다. 이를 위해선 scratch-l10n 을 수정하여야 한다.

먼저 지난번 개발환경 구축과 마찬가지로 scratch-l10n을 클론하여 사용한다. 지난번 Scratch 개발 공간 내에 다음과 같이 입력한다.

$ git clone https://github.com/byeongkyu/scratch-l10n.git
$ cd scratch-l10n
$ npm install
$ npm link

이제 scratch-gui가 local에 있는 scratch-l10n을 사용하도록 연결하여 준다.

$ cd scratch-gui
$ npm install
$ npm link scratch-l10n scratch-blocks scratch-vm
/Users/byeongkyu/Developer/scratch/scratch-gui/node_modules/scratch-blocks -> /usr/local/lib/node_modules/scratch-blocks -> /Users/byeongkyu/Developer/scratch/scratch-blocks
/Users/byeongkyu/Developer/scratch/scratch-gui/node_modules/scratch-vm -> /usr/local/lib/node_modules/scratch-vm -> /Users/byeongkyu/Developer/scratch/scratch-vm
/Users/byeongkyu/Developer/scratch/scratch-gui/node_modules/scratch-l10n -> /usr/local/lib/node_modules/scratch-l10n -> /Users/byeongkyu/Developer/scratch/scratch-l10n

확장카드

먼저 확장카드에 대한 부분을 수정해보록 한다. 지난번 설명했던 바와 같이, 확장카드는 scratch/scratch-gui/src/lib/libraries/extensions/index.jsx 파일 내에 위치한다. Edubot의 경우엔 다음과 같이 되어 있다.

    {
        name: 'OROCA Edubot',
        extensionId: 'edubot',
        collaborator: 'OROCA',
        iconURL: edubotImage,
        insetIconURL: edubotMenuImage,
        description: (
            <FormattedMessage
                defaultMessage="Play with powerful small robot!"
                description="Description for the 'OROCA_Edubot' extension"
                id="gui.extension.edubot.description"
            />
        ),
        featured: true,
        disabled: false,
        bluetoothRequired: true,
        launchPeripheralConnectionFlow: true,
        useAutoScan: false,
        peripheralImage: edubotPeripheralImage,
        smallPeripheralImage: edubotMenuImage,
        connectingMessage: (
            <FormattedMessage
                defaultMessage="Connecting"
                description="Message to help people connect to their edubot."
                id="gui.extension.edubot.connectingMessage"
            />
        ),
        helpLink: 'https://github.com/oroca/OROCA-EduBot'
    },

여기에서 다국어 지원이 가능한 부분은 description의 “Play with powerful small robot!”과 connectingMessage의 “Connecting”이다. 이 부분은 각각 gui.extension.edubot.description과 gui.extension.edubot.connectingMessage와 같은 id를 가지고 있다.

이제 다시 scratch-l10n으로 가서 다음의 경로에 있는 파일을 수정한다.

scratch/scratch-l10n/editor/interface/en.js

파일을 열고, 임의의 곳에 다음과 같이 입력한다.

    "gui.extension.edubot.description": "Play with powerful small robot!",
    "gui.extension.edubot.connectingMessage": "Connecting",

이제 한국어를 지원하게 하려면, 같은 경로의 ko.js 파일을 열고 다음과 같이 입력한다.

    "gui.extension.edubot.description": "조그맣지만 강력한 로봇과 놀아보세요.",
    "gui.extension.edubot.connectingMessage": "연결 중",

저장한 다음, 빌드한다. 실제로 빌드를 하여야 scratch-gui에서 사용할 수 있는 파일이 만들어진다.

$ cd scratch/scratch-l10n
$ npm run-script build

빌드 과정이 완료되면, dist와 locales 디렉토리가 생성되고 위에서 수정된 내용을 반영하여 파일을 만들어준다. 이제 Scratch를 실행하고, 잘 적용되었는지 확인해본다.

다국어의 선택은 왼쪽 상단의 지구본 모양을 눌러서 선택한다.

먼저 영어 버전은 다음과 같다.

다음으로 인터페이스를 한국어로 바꾸면,

한글도 잘 적용됨을 볼 수 있다.


확장블럭

블럭들도 위와 마찬가지로 각 요소별로 id를 가지고 있다. 이 id를 각 언어에 맞추어 작성해주면 된다. 반복 작업이 대부분이므로 한가지 예만 들어보도록 한다. Edubot의 블럭 중 버튼에 관련된 다음의 블럭에 대해 한국어로 표시되게끔 해보도록 한다.

위 블럭에 대한 서술은 scratch/scratch-vm/src/extensions/scratch3_edubot/index.js 파일에 있다. getInfo() 함수 내에

                {
                    opcode: 'whenButtonPressed',
                    text: formatMessage({
                        id: 'edubot.whenButtonPressed',
                        default: 'when button pressed',
                        description: 'when the button on the edubot is pressed'
                    }),
                    blockType: BlockType.HAT,
                    arguments: {
                    }
                },
                {
                    opcode: 'isButtonPressed',
                    text: formatMessage({
                        id: 'edubot.isButtonPressed',
                        default: 'button pressed?',
                        description: 'is the button on the edubot pressed?'
                    }),
                    blockType: BlockType.BOOLEAN,
                    arguments: {
                    }
                },

와 같이 되어 있는데, 좀 전과 마찬가지로 각 텍스트에 대해 id가 부여되어 있음을 볼수 있다. 따라서 이에 대한 부분을 수정해주면 된다. 블럭에 관련한 부분은 scratch/scratch-l10n/editor/extensions 디렉토리에 있다. 먼저 영어 대한 부분부터 작성한다. en.js 파일을 열고 임의의 위치에 다음과 같이 입력한다.

    "edubot.whenButtonPressed": "when button pressed",
    "edubot.isButtonPressed": "button pressed?",

다음으로 한국어에 대한 부분은 ko.js 파일을 열고 임의의 위치에 다음과 같이 입력한다.

    "edubot.whenButtonPressed": "버튼이 눌리면",
    "edubot.isButtonPressed": "버튼이 눌러졌는가?",

수정된 파일을 저장하고, 위와 마찬가지고 빌드 작업을 진행한다.

$ cd scratch/scratch-l10n
$ npm run-script build

이제 Scratch를 다시 실행해보면,

잘 적용이 됨을 볼수 있다. 끝!

Scratch 3.0 확장블럭 추가 (2)

업데이트


본 예제를 실행해서 로봇과 연결하려면 Edubot과 최신 펌웨어가 있어야 한다. Edubot과 펌웨어 관련한 내용은 https://github.com/oroca/OROCA-EduBot/tree/android_app을 참고한다. 펌웨어 개발환경 구축은 https://cafe.naver.com/openrt/19738을 참고한다.


이제 Scratch Link와 확장블럭에 대한 모든 것이 준비되었으니 실제 사용해보록 한다.

지난번 포스팅에서 언급했던 개발환경 (https://ahnbk.com/?p=366)은 모두 갖춰져 있다는 가정하에 진행한다.

scratch 3.0의 원래 소스를 가져와 현재 작업중인 OROCA-EduBot에 대한 확장블럭을 작성하였다. 수정된 소스는 다음의 링크에서 확인 가능하다. 지난번과는 달리 scratch-blocks에 대한 부분은 현재까진 수정할 필요가 없으므로, 이는 사용하지 않는다.

개발환경 구축 포스팅에서 설명했던 것과 같이, 임의의 디렉토리에 위 repository를 클론한다. (윈도우나 macOS나 모두 동일함).

$ git clone https://github.com/byeongkyu/scratch-gui.git
$ git clone https://github.com/byeongkyu/scratch-vm.git

scratch-vm부터 설치한다.

$ cd scratch-vm
$ npm install
$ npm link

다음으로 scratch-gui를 설치한다.

$ cd ../scratch-gui
$ npm install
$ npm link scratch-vm

이제 실행해보면

$ npm start

크롬이나 사파리, 인터넷 익스플로러 등 브라우져를 열고 http://localhost:8601 로 접속하면 다음의 화면을 볼 수 있다.

왼쪽 하단의 확장블럭 추가 버튼을 누른다.

Edubot의 확장카드가 보이고 이를 누르면,

스캔을 자동을 실행하고, 주변의 Edubot을 보여준다. Connect 버튼을 눌러 연결한다.

정상적으로 연결됨을 볼 수 있다. 이제 Go to Editor 버튼을 눌러 메인 화면으로 이동한다.

왼쪽에 Edubot에 대한 블럭들이 생겼음을 볼 수 있다. 이제 이 블럭들을 이용하여 코딩해보면 된다.