본문 바로가기
[자바스크립트] Canvas를 이용한 조이스틱 만들기 2019.05.19 - Canvas를 블로그 내에서 사용할 수 있도록 수정하였습니다. 이번 글은 Html의 태그를 이용해 조이스틱을 만드는 것을 목표로 하고 있고, RC카에 연동하기 위해 w, a, s, d, x 등 커맨드 보내는 것을 간단히 구현하도록 하겠습니다. 1. 완성 코드 2. 작동설명 해당 코드로 html 파일을 만들어 열어보면 조이스틱 모양이 보이고, 움직이면 console.log로 w, a, s, d, x 와 같은 출력을 나타냅니다. send함수를 수정하면 droidscript에서 블루투스로 신호를 보낼 수 있습니다. 모바일 환경의 터치 이벤트와, 마우스를 이용한 클릭 이벤트를 모두 수용하기 위해 try catch문을 사용했습니다. 3. 마무리 Html/css/javascript로 만든 웹.. 2021. 1. 23.
[자바스크립트] Droidscript - Tensorflow.js를 이용한 사물인식(Object Detection) 안녕하세요? 만들오 입니다. 오늘은~ Tensorflow.js를 이용해 사물인식을 구현했습니다. 대표적인 사물인식 신경망은 YOLO(You Only Look Once)가 있습니다. 제가 구현한 것은 SSD(Single Shot MultiBox Detector)방식입니다. 카메라가 달려있는 환경이라면 데모를 실행해보셔도 좋습니다. https://sein-oh.github.io/coco_ssd/ (demo) 설정이 마무리되지 않아 스마트폰에서는 오류가 발생하니 참고해 주세요. 1. 완성 코드 ... tf.min.js 파일과 coco-ssd.js 파일은 다음 링크에서 받아 위 코드가 있는 html파일과 같은 경로에 저장해주세요. https://github.com/Sein-Oh/coco_ssd 2. 코드 설명 .. 2021. 1. 23.
[자바스크립트] Droidscript - 물체추적(Object tracking) 앱 만들기 안녕하세요? 만들오 입니다. Html/Css/Javascirpt로 구현한 물체추적 프로젝트를 Droidscript로 바꾸어 보았습니다. https://sein-oh.github.io/LK_track/ -> (사용 예제) My LK Tracker sein-oh.github.io 1. 완성 코드 1.1. App이름.html 예) LK_track.html Mouse : 1.2. jsfeat (외부 라이브러리) 해당 파일을 Droidscript의 {App이름.html} 과 같은 폴더에 저장 0.06MB 2. 코드 설명 이제부터는 외부 라이브러리를 이용해 프로젝트를 구성했습니다. 위 코드는 나의 html파일이 있는 폴더에서 jsfeat-min.js라는 자바스크립트파일을 불러오라는 요청입니다. let w = 395.. 2021. 1. 23.
[자바스크립트] Droidscript - 카메라를 장착한 RC카 만들기 안녕하세요? 만들오 입니다. 오늘은 지난번 만든 안드로이드폰으로 CCTV만들기에 이어 RC카에 카메라를 달아 FPV를 구현하는게 목표입니다. 사실 마이크로비트 제어 + CCTV 만들기 내용을 잘 조합하기만 하면 됩니다 ㅋㅋ; 이제는 설치부분은 생략하고 각 코드부분만 올릴게요. 1. Droidscript HTML 앱 코드 New Html App 만들기로 파일을 만들어 줍니다. 저는 MB_FPV로 했습니다. 만든 MB_FPV.html의 코드를 다음과 같이 바꿔주세요 ... Waiting for Client... 2. index.html 추가하기 위 그림과 같이 프로젝트 내에서 New File을 선택하여 index.html파일을 생성 후 다음과 같이 수정해 주세요. w a s d x 위의 index.html파.. 2021. 1. 23.
[자바스크립트] Droidscript - 안드로이드폰 CCTV 앱 만들기 Droidscript는 안드로이드의 대부분 기능을 활용할 수 있습니다. 오늘은 카메라 영상을 웹으로 전송해 CCTV로 활용할 수 있는 방법을 소개하겠습니다. 1. Droidscript 설치하기 [필요시] 플레이스토어에서 Droidscript를 검색 후 설치합니다. 2. Droidscript 와이파이 에디터 실행 (필수는 아니지만 추천) Droidscript는 와이파이에 연결해 컴퓨터로 코딩할 수 있습니다. 실행해보면 Wifi Connect 알림창이 나오고 밑에 주소가 나옵니다. ex)192.168.0.2:8088 인터넷 브라우저(저는 크롬을 사용합니다)에서 주소를 입력하면 인터넷 화면에서 코드를 작성하고 수정할 수 있습니다. 편리한 기능이니 사용하도록 하고, 설명은 와이파이 에디터를 사용한 것으로 하겠습.. 2021. 1. 23.
[자바스크립트] Droidscript - 마이크로비트 조종앱 만들기 마이크로비트(Microbit)는 BLE를 내장하고 있습니다. 자바스크립트 기반의 안드로이드 앱인 Droidscript를 이용해 마이크로비트 조종 앱을 만들어 보겠습니다. 1. Droidscript 다운로드 플레이스토어에서 Droidscript를 검색 후 설치합니다. 2. Microbit 플러그인 다운로드 및 설치 2.1. 플레이스토어에서 Microbit plugin을 검색 후 설치합니다. 2.2. 플러그인을 실행한 후 Install을 실행하면 다음 사진과 같습니다. 3. 신규 프로젝트 생성 설치된 Droidscript를 실행하면 다음과 같은 창이 등장합니다. 우측 상단의 점모양을 누르고 New를 선택하면 어떤 타입의 앱을 만들지 묻는 창이 나오고, HTML을 선택하고 이름을 입력하고 OK 버튼을 누릅니다.. 2021. 1. 23.

티스토리툴바