마이크로비트(Microbit)는 BLE를 내장하고 있습니다.
자바스크립트 기반의 안드로이드 앱인 Droidscript를 이용해 마이크로비트 조종 앱을 만들어 보겠습니다.
1. Droidscript 다운로드
플레이스토어에서 Droidscript를 검색 후 설치합니다.
2. Microbit 플러그인 다운로드 및 설치
2.1. 플레이스토어에서 Microbit plugin을 검색 후 설치합니다.
2.2. 플러그인을 실행한 후 Install을 실행하면 다음 사진과 같습니다.
<플러그인이 설치된 모습>
3. 신규 프로젝트 생성
설치된 Droidscript를 실행하면 다음과 같은 창이 등장합니다.
우측 상단의 점모양을 누르고 New를 선택하면 어떤 타입의 앱을 만들지 묻는 창이 나오고,
HTML을 선택하고 이름을 입력하고 OK 버튼을 누릅니다.
Droidscript의 배경화면에 입력한 이름으로 아이콘이 1개 생성된걸 볼 수 있습니다.
터치하여 실행하면 기본 예제가 실행됩니다.
4. 완성 코드
4.1. Droidscript 완성 코드
다음의 완성된 코드를 전체 선택 후 복사합니다.
<!DOCTYPE html>
<html>
<head>
<title>OCOACH</title>
<meta name="viewport" content="width=device-width">
<script src='file:///android_asset/app.js'></script>
</head>
<style>
body{
background-color:rgb(150,150,150);
text-align:center;
-webkit-user-select:none;
}
button{
width:90px;
height:90px;
margin:6px 1px 6px 1px;
font-size:30px;
color: white;
background-color:rgb(51,51,51);
border:none;
border-radius:20px;
box-shadow: 0 9px rgba(104,104,104, 0.5);
}
button:active{
box-shadow: 0 5px rgba(104,104,104, 0.5);
transform: translateY(4px);
}
</style>
<body>
<div align='center'>
<div style='position:relative; width:90%; height:90%; top:300px; border:2px dashed #BDBDBD'>
<button id='w' onmousedown=touch(this.id) ontouchstart=touch(this.id) onmouseup=touch('s') ontouchend=touch('s')>w</button>
<div>
<button id='a' onmousedown=touch(this.id) ontouchstart=touch(this.id) onmouseup=touch('s') ontouchend=touch('s')>a</button>
<button id='s' onmousedown=touch(this.id) ontouchstart=touch(this.id) onmouseup=touch('s') ontouchend=touch('s')>s</button>
<button id='d' onmousedown=touch(this.id) ontouchstart=touch(this.id) onmouseup=touch('s') ontouchend=touch('s')>d</button>
</div>
<button id='x' onmousedown=touch(this.id) ontouchstart=touch(this.id) onmouseup=touch('s') ontouchend=touch('s')>x</button>
</div>
</div>
</body>
<script>
app.LoadPlugin("MicroBit");
microbit = app.CreateMicroBit();
microbit.SetOnConnect(connected);
microbit.SetOnReceive(receive);
microbit.Scan();
function touch(id){
microbit.Send(id+"\n");
//app.ShowPopup(id+"\n", "short" );
}
function connected(){
app.ShowPopup("MicroBit is connected!");
microbit.Send("Hi\n");
}
function receive(data){
app.ShowPopup(data);
}
</script>
</html>
4.2. 코드 붙여넣기
Droidscript의 배경화면에 입력한 이름으로 아이콘이 1개 생성된걸 볼 수 있습니다.
아이콘을 길게 터치(꾸욱 누르고 있기)하면 Actions창이 뜨는데
Edit을 누르면 다음 그림과 같은 창을 볼 수 있습니다.
왼쪽 아래의 파란 버튼을 더블클릭하듯 두번 터치하면 우측의 메뉴가 나옵니다.
메뉴는 위에서부터 부분 선택, 전체선택, 복사, 잘라내기, 붙여넣기 입니다.
전체선택한 후 붙여넣기를 실행!
4.3. 실행 및 코드 작동설명
실행하면 Microbit를 스캔하여 리스트를 보여줍니다. 사전에 페어링을 완료해야 하며
자신의 마이크로비트를 선택해 정상적으로 연결되면 MicroBit is connected! 팝업이 보이고
마이크로비트로 "Hi" 라는 문구를 보냅니다.
조작부의 이미지는 다음과 같습니다.
드디어 HTML/css로 만든 버튼이 보입니다!
버튼을 누르면 각 버튼의 이름(w, a, s, d, x)을 마이크로비트로 전송합니다.
버튼에서 손을 떼는 순간은 알파벳 s를 전송합니다. (RC카 조종시에는 이런 기능이 편함)
4.4. 마이크로비트 블럭 코딩
프로그램과 연동할 간단한 마이크로비트 블럭코딩을 첨부합니다.
마이크로비트 블럭 코딩에 대해서는 따로 설명하지 않아도 잘 아실거라고 믿습니다~
5. 마무리
안드로이드용 블루투스 통신 프로그램은 App Inventor로 많이 만들고 계실겁니다.
마이크로비트와 비슷한 블럭코딩 방식이어서 배우기도 쉽죠~ 저 또한 App Inventor를 이용했었습니다.
하지만, 사용하면서 좀 더 강력한? 기능을 원하게 되었고 조금씩 배우다 보니 이것저것 할 수 있는?? 상태가 되었습니다.
Droidscript는 Javascript의 라이브러리를 사용할 수 있습니다.(엄청난 능력입니다!)
WebRTC를 이용해 화상채팅을 할 수도 있고, 머신러닝도 적용할 수 있습니다.
아직 글로 쓰지는 않았지만 카메라를 이용해 물체를 추적하는것도 완성했답니다 ^^
차차 정리해서 공유하도록 하겠습니다.
코드에 대한 부분은 설명하려니 너무 길어질것 같아 설명이 필요하신분은 댓글을 달아주세요.
이상으로 마이크로비트용 블루투스 앱 만들기를 종료합니다.
* 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코취) 글을 옮겨왔습니다.
[끝].
'소프트웨어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] Canvas를 이용한 조이스틱 만들기 (1) | 2021.01.23 |
|---|---|
| [자바스크립트] Droidscript - Tensorflow.js를 이용한 사물인식(Object Detection) (0) | 2021.01.23 |
| [자바스크립트] Droidscript - 물체추적(Object tracking) 앱 만들기 (0) | 2021.01.23 |
| [자바스크립트] Droidscript - 카메라를 장착한 RC카 만들기 (0) | 2021.01.23 |
| [자바스크립트] Droidscript - 안드로이드폰 CCTV 앱 만들기 (0) | 2021.01.23 |
댓글