Skip to the content.

← go back to the list

Smart Mirror

Introduction Video

Members

Agenda




Preparation

부품 목록

Raspbian 설치 및 기본 설정

Smart Mirror 설치 (참고: docs.smart-mirror.io)

  1. 우선 node.js가 설치되어 있어야 한다.

  2. Raspbian에서 root folder에 Evan Cohen의 Smart Mirror를 복사한다. Root에 smart-mirror라는 이름의 폴더가 생성된다.
    cd ~
    git clone https://github.com/evancohen/smart-mirror.git
    
  3. 음성인식을 위해 sox와 libatlas-base-dev을 설치한다.
    sudo apt-get install sox libatlas-base-dev
    
  4. Smart Mirror에 필요한 javascript package들을 자동 설치한다. npm install을 통해 package.json에 적시된 필수 package들이 설치된다. 설치되는 package들 중에 electron이라는 것이 있는데, web browser가 아닌 환경에서 javascript, html, css를 구동시켜주기 위해 필요하다. Smart Mirror는 electron 상에서 구동되는 javascript application이다.
    cd ~/smart-mirror
    npm install
    
  5. Smart Mirror의 핵심 기능은 Google의 Speech API를 이용하여 음성 명령을 통해 Smart Mirror의 기능을 제어하는 것이다. Google Cloud Speech API를 설정하기 위해 다음 단계를 시행한다.
    1. Google Cloud Platform의 Projects 사이트에 접속한다.
    2. 프로젝트를 하나 만든다.
    3. 생성한 프로젝트에 결제 방식을 연결한다. Google Cloud Platform에서 Billing menu를 선택하고 Billing Account(본인의 google account. 신용카드가 연결되어 있어야 됨)를 등록한다. Google Cloud Speech API는 처음 시작한지 1년 동안 거의 무료로 사용할 수 있다. 거의 무료라 함은, 구글이 300달러의 point를 제공하고 여기에서 Speech API 이용료를 차감하기 때문에 실제 돈이 들지 않는다. (프로젝트에 결제 방식을 연결하는 방법은 여기 참조 (영문)
    4. Google Cloud Platform에서 APIs & Services에서 프로젝트 하에 Cloud Speech API를 시작한다.
    5. APIs & Services >Credentials 메뉴에서 Service account key를 생성하고 JSON 파일을 다운받는다. 다운받은 JSON 파일의 이름을 keyfile.json으로 하고 이를 Raspberry Pi의 smart-mirror 폴더 안에 넣는다.


  1. 기타 Raspberry Pi 환경 설정

    아래 환경설정 부분은 Smart Mirror의 설치 및 설정 파일에 포함되어 있지 않고 Raspbian에서 수정하는 부분이다.

    1. 마이크 설정
      • sudo vim /usr/share/alsa/alsa.conf로 설정 파일을 열고 68번째 줄 정도에 있는 아래 부분을
         defaults.ctl.card 0
         defaults.pcm.card 0
        
      • 아래와 같이 변경한다. Sound 관련 다른 설정은 바꾸지 않는다.
         defaults.ctl.card 1
         defaults.pcm.card 1
        
    2. 화면을 세로로 회전
      • sudo vim /boot/config.txt로 설정 파일을 열고 가장 아래쪽에 한 줄 추가한다.
         display_rotate=1
        
    3. 화면보호기/화면자동꺼짐 중지
      • sudo vim /etc/X11/xinit/xinitrc로 파일을 열고 9번째 줄 정도에 있는 . /etc/X11/Xsession 아래로 3줄 추가한다.
         xset s off
         xset -dpms
         xset s noblank
        
      • 그리고 나서 sudo vim /etc/xdg/lxsession/LXDE/autostart로 autostart 파일을 열고 가장 아래에 다음의 세 줄을 추가한다.
         @xset s off
         @xset -dpms
         @xset s noblank
        
    4. 마우스 숨김
      • Unclutter를 설치하고 autostart 파일을 열어
         sudo apt-get install unclutter
         sudo vim /etc/xdg/lxsession/LXDE/autostart
        
      • 가장 아래에 한 줄을 추가한다.
         @unclutter -idle 0.1 -root
        
  2. Smart Mirror 환경 설정

    Smart Mirror를 처음 실행하기 위해 Raspberry Pi의 smart-mirror 폴더 내에서 npm start를 실행한다. 그러면 화면에 아래와 같은 문구가 뜨는데, 같은 wifi network 상의 다른 PC에서 web browser에 http://192.168.1.130:8080를 입력함으로써 Smart Mirror에 접속한다. (IP 주소는 다른 것이 될 수 있다.) 접속하여 Smart Mirror의 환경을 설정한다.

     Remote listening on http://192.168.1.130:8080
    

    처음 환경을 설정하고 나면 smart-mirror 폴더 내에 config.json 파일이 생성되는데, 추후 설정을 위해 다른 PC에서 접속하지 않고 이 파일의 내용을 수정해도 된다.

    1. iCal을 활용한 calendar 추가: iCal은 google 캘린더, 네이버 캘린더 등 다양한 종류의 캘린더를 연동 시켜서 하나로 쓸 수 있도록 한다. 가령, 본인 Google Calendar의 설정에서 iCal 공개 주소를 얻을 수 있는데, 이것을 config.json 내에 붙여넣으면 된다.
    2. 날씨: 위도와 경도를 수동으로 입력한다. 참고: 사이트1, 사이트2
    3. YouTube: Google Cloud Platform의 API & Services > API Library에서 __YouTube Data API v3__를 활성화(enable)한다. 그리고나서 Credentials에서 API Key를 만들면서 해당 API에 YouTube Data API v3를 할당한다(API Restrctions 메뉴에서 YouTube Data API v3를 선택). 이렇게 생성된 API Key를 config.json에 입력한다.
    4. Fitbit: Fitbit에 가입한 후, Fitbit Studio에 접속하여 개발자 계정을 활성화하고 프로젝트를 생성한다. OAuth 2.0 Client ID와 Client Secret을 생성하여 config.json에 넣어준다. 그리고나서 스마트폰에 Fitbit app을 깔고 본인 ID로 로그인한 후, Fitbit 기기와 스마트폰을 연동하여주면 된다. Fitbit 기기로부터 스마트폰 app을 통해 Fitbit 서버로 데이터가 동기화되고, 그 업데이트된 내용이 Smart Mirror에 동기화된다. 약간이 시간차가 발생할 수 있다.
    5. Philips HUE: HUE hub를 Smart Mirror와 같은 wifi network에 연결하고 HUE의 IP주소를 알아내어 기록해둔다. 자세한 설정 방법은 추후 update하기 전까지 일단 HUE 개발자 사이트를 참고한다.
    6. 기타 환경 설정은 Evan Cohen의 document를 참고한다.


  1. UI 수정하기

    main.css 파일에서 글자 종류, 글자 크기, 요소들의 크기와 레이아웃, 색상 등 다양한 것들을 조절할 수 있다. Smart Mirror에 몇 가지 아이콘을 넣었다. Frame 제작

Smart Mirror 외형 frame 제작

Demonstration

Source Code

Acknowledgement

Further Issues




← go back to the list