#27/28 [매직미러 HowTo] / 스텝 4

서드파티 모듈 만들기

  서드파티 모듈을 만들어 여러분들이 사용할 수 있게 만들어 GitHub라는 소스 공유 사이트에 올렸습니다. 서드파티 모듈이 어떻게 만들어지는지 어떤 구조를 가지고 있는지 궁금하실 것 같아 소개를 하려고 합니다. 소스 전체를 설명드리는 것은 어려울 수 있을 것으로 생각되어 어떤 아이디어를 가지고 개발을 했는지를 알려 드리려고 합니다. 또한 GitHub에서 소스를 등록해서 다운로드를 받을 수 있게 만드는 과정을 소개합니다.

모듈 만들기 기초

  서드파티 모듈을 만들기 위한 기초 정보는 [그림168]과 같이 매직미러사이트의 Documented 좌측 하단의 Module Development를 참고하시면 됩니다. 

 

그림 168. 모듈개발 안내

 

  Introduction 페이지를 가서 보면 서드파티 모듈은 modules 폴더에 위치를 해야 한다고 명시가 되어 있습니다. 모듈 이름과 같은 이름의 자바스크립트 파일(js)이 필요합니다. 이 js 파일에서 화면에 보여지는 사항이 그려지게 됩니다. 그리고 옵션 사항으로 node_helper.js가 필요할 수 있습니다. 여기에는 주로 센서와의 통신 등과 같이 화면에 보여지는 요소(프론트 엔드)보다는 기능적인 부분(백엔드), 예를 들면 센서, 또는 버튼의 감지와 같은 부분이 구현이 됩니다. 이 두 개의 js는 소켓 통신이라는 방식을 통해 상호 호출, 또는 자료를 교환하게 됩니다.

 

  센서와 버튼을 위한 모듈은 모듈 자체에서 그려지는 내용이 없습니다. 그런데 무엇인가 그려야 한다면 앞에서 배운 CSS 파일이 필요합니다. 이 CSS 파일은 화면에 보여지는 사항이기 때문에  모듈명.js에서 읽어 들이게 됩니다. 앞서 우리 매직미러에 포함을 했었던 MMM-BackgroundSlideshow 모듈을 살펴보시면 BackgroundSlideshow.js에서 CSS 파일을 읽어들이는 부분을 찾을 수 있습니다.

 

그림 169. CSS 파일 호출

모듈간 통신

  모듈명.js와 node_helper.js간에 통신은 앞서 소켓 통신을 한다고 말씀을 드렸습니다. [그림170]에 MMM-HideAndShow-Sensor와 node helper 사이의 관계를 표시했습니다. 복잡하게 선이 그려져 있는데 선을 제외한 나머지를 살펴보면 Main이 되는 모듈에서는 ③과 같이 화면에 그리는 것이 주 내용이고 오른쪽의 helper는 화면에 그리는 것을 결정해 주는 센서나 버튼의 동작을 감지해 내는 부분으로 이루어져 있음을 알 수 있습니다.  

 

그림 170. 메인 모듈과 node helper

 

  순서대로 MMM-HideAndShow-Sensor 모듈의 동작을 살펴 보도록 하겠습니다. 매직미러가 실행이 되면 매직미러에서 각 모듈의 모듈.js를 실행시키고 이어서 node_helper가 있으면 node_helper가 실행이 됩니다. 

우선 모듈이 시작을 하면 ①과 같이 CONFIG Notification을 발생시켜 Helper로 보냅니다. Helper는 모션센서를 초기화 하고 반대로 STARTED Notification을 발생시켜 모듈을 호출을 하고 모듈에서 그림에는 표시되어 있지 않지만 ACTIVE_MEASURING Notification을 호출하여 모션센서를 시작합니다. 모션센서가 시작이 되면 5분이 설정이 됩니다. 5분은 config 파일에서 5*60 즉 300초로 설정을 합니다. 

 

  다음으로 config에 설정을 한 switch_on이 true이냐 false이냐에 따라서 helper쪽으로 전달하는 메시지가 선택이 됩니다. true이면 스위치를 이용해서 거울모드와 앨범모드를 변경하게 되고 false이면 초음파 센서에 1미터 안쪽에 물체가 감지되는지에 따라서 모드가 변경이 됩니다. 

 

  모듈.js가 시작됨과 동시에 helper도 시작이 됩니다. helper의 시작에서는 ⓐ와 같이 1초마다 수행하는 타이머가 설정이 됩니다. 1초마다 앞서 5분을 설정한 값 300에서 1을 뺍니다. 그리고 0이 되는지 확인해서 0이 됐을 경우에는 HIDE_ALL Notification을 전달해서 모듈.js에서 모든 모듈을 숨기도록 하는 것입니다. 

하지만 모션센서로 어떤 입력값이 들어오면 다시 300으로 설정이 되고 SHOW_PHOTO가 함께 호출이 되기 때문에 모션이 감지되는 동안에는 HIDE_ALL이 발생하지 않겠죠.

 

  ⓑ는 switch_on이 false일 경우에 동작하는 초음파 센서의 동작입니다. 모듈이 시작할 때 notification에 의해서 시작이 된 후에 0.5초 간격으로 초음파를 발생하고 돌아오는 시간을 재서 센서 앞의 물체와의 거리를 측정합니다. 측정을 한 값이 1m 보다 크면 SHOW_PHOTO notification을 발생시켜 앨범모드로 동작을 시키고 1m보다 작으면 거울 모드로 변환이 됩니다. 

 

  마지막으로 ⓒ는 버튼을 동작시키는 부분으로 switch_on이 true인 경우에만 동작을 합니다. 버튼의 상태를 내부적으로 Photo로 설정을 해 놓고 버튼이 눌릴 때마다 Photo에서 Mirror로 바꿉니다. 그리도 또 버튼이 눌리면 Mirror에서 Photo로 변경을 하면서 그에 맞게 SHOW_PHOTO와 SHOW_MIRROR Notification을 수행하도록 합니다. 

 

   SHOW_MIRROR, SHOW_PHOTO, HIDE_ALL은 여러번 동일하게 호출이 되긴 하지만 해당 Notification을 받았을 때는 이전 모드와 동일하면 무시하게 되도록 코딩이 되어 있습니다.

설정 만들기

  앞서 설정을 했던 config 파일은 [그림171]과 같이 모션센서를 위한 23번 핀, 그리고 초음파 센서를 위해서 Echo Pin과 Trigger Pin을 각각 24와 18번을 할당을 했습니다. 초음파 센서는 switch_on이 false일 경우에만 동작을 합니다. 이 값이 true일 경우에는 echo Pin이 할당된 24번에는 스위치의 데이터 선이 연결됩니다. 마지막으로 iSlideShowTime은 모션센서 감지 시간에 대한 sec 단위의 값입니다. 300초이므로 5분 동안 모션이 감지가 안되면 모든 모듈들을 화면에서 보이지 않도록 합니다.

그림 171. config 파일 

 

  [그림172]의 내용은 MMM-HideAndShow-Sensor.js의 start function입니다. 여기서 참고하셔야 할 부분은 this.sendSocketNotification(‘CONFIG’, this.config) 입니다. CONFIG는 Notification이고 그 뒤에 따라오는 this.config가 [그림171]에 정의된 config 내용을 Node Helper로 전달하는 역할을 합니다.  현재의 모듈에서는 this.config.switch_on과 같이 ‘.’으로 구분해서 config의 내용을 사용할 수 있습니다.

 

그림 172. config 파일 내 설정

GitHub 사용하기

  github는 소스를 관리하고 배포할 수 있는 git을 사용하는 사이트입니다. 이 사이트를 이용해서 개인적인 목적으로 소스 관리를 할 수 있고, 개발한 소스를 public하고 open을 할 수도 있습니다. 대표적인 것인 매직미러를 배포하는 git 입니다. 또한 모든 서드파티 모듈들도 git을 통해서 배포하고 관리되고 있습니다.

 

  github.com에 접속해서 sign up을 클릭하여 회원 가입을 합니다. 가입이 완료되고 나서 sign in을 합니다. 그러면 [그림 173]과 같이 New 버튼이 좌측 상단에 보입니다. New를 눌러 신규 프로젝트를 생성하고 관련된 소스들을 올릴 수 있습니다. 또한 그 아래 Find a repository...아래를 보시면 센서를 위해서 만들고 앞에서 설명드렸던 MMM-HideAndShow-Sensor 모듈이 보입니다. 모듈 앞에는 로그인 ID 명입니다.

 

그림 173. github.com 

 

 

  New를 클릭하고 들어가서 테스트용으로 repository를 만들어 보도록 하겠습니다. 꼭 배포 뿐만 아니라 개인적인 프로젝트의 소스를 관리하고 작업한 내용들을 보관해 둠으로써 소스의 버전 관리를 할 수 있습니다. 예를 들어 어제 개발을 마치고 테스트까지 완료한 소스를 보관해 두었다고 합시다. 그런데 오늘 추가 작업을 하다가 문제가 되었을 때 어제 날짜의 소스를 받아 볼 수도 있고 그 이전에 올렸던 소스도 참고 할 수 있습니다. 

그림 174. 신규 Repository 생성

 

[그림174]를 보시면 테스트 용도로 gitTest라는 이름으로 프로젝트를 만들었습니다. 개인 용도의 테스트 목적이기 때문에 Private으로 설정을 했습니다. 그 아래에 있는 체크박스들은 해당 파일을 자동 생성할 것인지를 묻는 것으로 README 파일을 추가하는 곳에 체크를 했습니다. 이 파일은 다목적으로 사용할 수 있으며 보통 Repository의 목적, 사용법 등을 작성합니다. 다음에 있는 .gitignore는 gitignore는 Project에 원하지 않는 백업파일 등을 Git에서 제외시킬 수 있는 설정 파일입니다. 마지막은 해당 프로젝트의 라이선스에 대한 파일 추가할 수 있는 옵션입니다. 참고로 매직미러 프로젝트는 MIT 라이선스를 가지고 있습니다. 

 

그림 175. gitTest Repository

Create Repository를 눌러 생성을 하면 [그림175]와 같은 화면으로 전환이 됩니다. 생성 옵션으로 주었던 README는 README.md 파일로 생성이 되어 있습니다. 그 아래에는 gitTest라고 우리가 생성한 git 프로젝트 이름이 크게 보이는데 이 내용이 README.md를 읽어 보여주고 있습니다. READMI.md 파일을 클릭하면 우측에 연필 모양의 아이콘이 보이는데 이 아이콘을 클릭해서 README.md 파일을 수정할 수 있습니다. 파일을 수정하고 프로젝트 repository 페이지가 다르게 보이는지 확인해 보시기 바랍니다.

 

그림 176. 파일의 History

 

  Repository 홈으로 돌아가려면 화면 상단의 sohyemini/gitTest에서 gitTest를 클릭하면 됩니다. 홈에서 파일명 우측에 “Update README.md”를 클릭해서 들어가면 파일의 history를 [그림176]과 같은 화면을 볼 수 있습니다. 좌측 살구색은 이전의 파일 내용이고 오른쪽은 현재의 파일 내용입니다. 현재의 파일 기준으로 좌측에 ‘-’로 표시된 부분은 이전 파일에 있던 내용이 최종 파일에서 삭제되었다는 의미이고 오른쪽의 ‘+’는 이전 파일에 없었던 내용이 추가되었다는 것을 의미합니다. 이와 같이 두 버전을 비교해 볼 수 있습니다. 

 

그림 177. git 주소

 

  작성된 gitTest의 주소는 프로젝트 홈에서 code 아이콘을 눌러보면 [그림177]과 같이 확인을 할 수 있습니다. 이 프로젝트의 주소는 “https://github.com/sohyemini/gitTest.git” 입니다. 서드파티 모듈을 다운로드 받을 때 “git clone git주소”와 같은 명령을 사용했던 것을 기억할 것입니다. 똑같이 우리가 만든 프로젝트에서도 이 명령을 사용할 수 있습니다.

 

그림 178. 소스 다운로드

 

  라즈베리파이에서 다른 서드파티 모듈을 받을 때와 같이 modules 폴더로 이동을 해서 git clone을 통해서 소스를 다운로드 받아 봅니다. private로 설정을 했기 때문에 일반 서드파티 모듈을 받을 때와는 달리 Username과 Password를 요구합니다. 맞게 입력을 했다면 modules 폴더에 gitTest 폴더가 생성이 되고 README.md 파일이 다운로드가 되었을 것입니다.

 

그림 179. git status

 

  받아 놓은 README.md를 간단하게 수정을 하고, 우리가 작업을 했었던 MMM-HideAndShow-Sensor.js를 ~/MagicMirror/modules/gitTest 폴더로 복사를 해 넣습니다. 하나의 파일은 수정이 되고 하나는 추가가 되었습니다. git status를 입력하면  [그림179]와 같이 변경된 파일의 내용을 보여줍니다. 

 

그림 180.  git에 변경될 파일 추가

 

파일들이 변경된 사항을 git에 추가하기 위해서는 git add 명령을 통해서 추가를 해 주고 git commit 명령을 통해서 그림 181과 같이 코멘트를 입력합니다. 

 

그림 181. git commit 

 

 

저장을 하고 다시 터미널로 나옵니다.

 

그림 182. git push

 

마지막으로 git push를 입력하면 github에 최종적으로 지금까지 변경한 파일 README.md와 추가한 MMM-HideAndShow-Sensor.js가 추가 됩니다. 마지막으로 [그림183]과 같이 GitHub를 접속해 보면 파일이 모두 적용되어 업데이트 된 것을 볼 수 있습니다.

 

그림 183. 업데이트 된 github

 

  지금까지 확인한 바와 같이 gitHub는 소스를 관리하는데 유용한 툴입니다. 라즈베리파이 OS에서만 다운로드 받고 업로드 하는 것을 확인했는데 윈도우에서도 같은 작업을 할 수 있습니다. 직접 검색해서 방법을 확인해 보시기 바랍니다.