블록 코딩

1. Blockly — 왜 선택

한국 초등·중등 정보 교육 시장에서 가장 폭넓게 사용되는 엔트리(entry.co.kr) 와 스크래치(Scratch 3.0)는 Google Blockly를 진화시킨 UI입니다. mecha4wd의 블록코딩 UI는 다음을 직접 활용:

• Blockly (Google) — 오픈소스 (github.com/google/blockly) MIT License
• Entry — 한국형 커스마이징 (한국어 UI·교재 침투), 직접 호환
• Scratch 3.0 — 좌우도 호환 (블록 정의 XML이 호환됨)

2. 블록 라이브러리 카테고리 (초등 대상 7+ 카테고리)

3. 예제 — 사각 경로

학생이 블록으로 구성

[Start ▸ when ▶ clicked]
   Forever:
      [전진 1초]  [좌회전 90°]
      [전진 1초]  [좌회전 90°]
      [전진 1초]  [좌회전 90°]
      [전진 1초]  [좌회전 90°]
      [RGB ring: 신나게]

자동 생성된 Python

import asyncio
from mecha4wd import robot, sensors, led

async def main():
    await robot.start()
    while True:
        for _ in range(4):
            await robot.go_forward_for(1.0)   # 1초 전진 @ 0.4 m/s
            await robot.rotate_degrees(90)
        await led.ring_set(0x00ff00)   # green
        await asyncio.sleep(0.5)
        await led.ring_set(0xff00ff)   # magenta

asyncio.run(main())

4. 예제 — 라인 트레이서

잔잔히 라인 두 개 사이를 따라가는 0-line 카메라. 학습용 교과서에서 가장 자주 사용되는 클래스입니다.

[Start]
   Forever:
      off = 카메라.lane_offset()      # cm
      If off > 5:
         [좌회전 5°]
      Else if off < -5:
         [우회전 5°]
      Else:
         [전진 1초]    [RGB ring: 🌊]

5. 예제 — YOLO 내 '사람' 찾으면 멈춤

[Start]
   Forever:
      found = YOLO.detect("person")
      If found:
         [정지]
         [부저 on]
         [LCD print "STOP"]
         [RGB ring: 빨간색]
         Wait until: not YOLO.detect("person")

6. 코드 자동 생성기 · backend 구조

블록 XML 정의 → JavaScript로 즉시 Python 텍스트도 함께 생성. 전체는 mecha4wd-ui/blockly_to_python.js에 있음:

// Blockly generator · JavaScript
Blockly.Python['forward_for'] = function(block) {
  const secs = Blockly.Python.valueToCode(block, 'SECS', Blockly.Python.ORDER_NONE) || '1.0';
  return 'await robot.go_forward_for(' + secs + ')\n';
};

Blockly.Python['tof_distance'] = function(block) {
  const dir = block.getFieldValue('DIR');
  return ['sensors.tof_' + dir + '.distance_cm()', Blockly.Python.ORDER_ATOMIC];
};

// 사용자 Python 코드는 .transpiled.py로 저장 → SCP 전송
fetch('/api/compile', {
  method: 'POST',
  body: generated_python_text
}).then(r => alert('Uploaded to robot'))

7. 업로드 → Robot 실행

1. 학생이 브라우저에서 코드 완성
2. 'Compile + Upload' 버튼 클릭 → .transpiled.py 생성
3. ROS2 서비스 /mecha4wd/code_upload로 전송 (USB-CDC 또는 Wi-Fi)
4. Rock 5C의 code_runner 노드가 python3 ./.transpiled.py 실행
5. 실행 중 RGB ring 색상이 teal(전진)/orange(회전)/red(error)로 변경

8. 교사 처음 사용 가이드

• 학생 iPad 로 접속: http://rock5c.local:3000/blockly
• 오픈 후 page는 '시작' 블록 auto-드래그
• 사용자가 처음 시도하는 시퀀스: [전진 1초] → [정지] → [시작 클릭]
• 학생이 먼저 성고한 후 example 코드 열어 Python 자동 생성된 파일 살펴보기

다음 단계

• 📡 키보드/RC 조종으로 →