ELIO Block Rendering Demo
엘리오 블록코딩을 이미지 없이 벡터처럼 렌더합니다
Scratch 확장 블록, 앱 Blockly 대표 블록, 유아용 아이콘 블록을 순수 HTML/CSS와 인라인 SVG만으로 구성했습니다.
교안 이미지 교체용으로 글자·순서·색상 재현성을 우선한 데모입니다.
Scratch 3.0 — 엘리오 확장
카테고리 색상 #1E5FA8, command는 연결형 블록, reporter는 둥근 pill 형태로 렌더합니다.
엘리오 확장 블록 16개
요청서 원문 블록 15개에 데모용 reporter `ELIO 연결 상태`를 더해 16개 구성으로 맞췄습니다.
ELIO 연결하기
ELIO 연결 해제
DC1▾ 모터를 50 % 로 설정
DC1 50 % DC2 50 % 동시 설정
SV1▾ 서보를 0 도로 설정
SV1 0 도 SV2 0 도 동시 설정
IO1▾ 출력을 100 으로 설정
모두 정지
초음파▾ 센서 ON▾
ELIO 연결 상태
초음파 거리 (cm)
라인1 감지값
라인2 감지값
온도
습도
수분
앱 Blockly — 엘리오 대표 블록
시작, 모터/서보, IO/LED, 센서, 음성/카메라 AI, 시간·정지를 대표 색상으로 나눴습니다.
시작하기
DC모터 DC1▾ 속도 50 %
서보 SV1▾ 각도 90 도
LED IO1▾ 밝기 100
초음파 거리 cm
라인 센서 라인1▾
온습도 센서 값
음성 명령 감지▾
카메라 AI 객체 감지▾
1 초 기다리기
정지
유아 스크래치 elio-for-kids
아이콘과 짧은 텍스트만으로 읽히는 7개 블록입니다. 아이콘은 모두 인라인 SVG입니다.
▶ 앞으로 3칸
◀ 뒤로 3칸
↺ 좌회전 1번
↻ 우회전 1번
■ 정지
💡 LED 1번 켜기
LED 1번 끄기
예제 스크립트 3개
세로로 쌓았을 때 교안에 바로 넣을 수 있는 형태를 확인합니다.
Scratch: 연결 후 1초 주행
ELIO 연결하기
DC1▾ 모터를 60 % 로 설정
1 초 기다리기
모두 정지
앱 Blockly: 장애물 감지
시작하기
만약 초음파 거리 cm < 10 이면
정지
유아: 이동과 LED
▶ 앞으로 3칸
↻ 우회전 2번
💡 LED 1번 켜기
■ 정지
외부 이미지, 외부 스크립트, 이미지 생성 API를 사용하지 않았습니다. 블록 아이콘은 인라인 SVG입니다.