Smart Mirror 스마트 미러 만들기- 6 소프트웨어 - 미러 프로그램 편

Smart Mirror 스마트 미러 만들기- 6 소프트웨어 - 미러 프로그램 편

구글 클라우드 스피치 음성인식 Google Cloud Speech API 사용법 http://jeongchul.tistory.com/544

Github

https://github.com/KimJungChul/smartmirror-web-application

Youtube

https://www.youtube.com/watch?v=1jEWvWtXniQ

이후 포스트서부터는 스마트 미러 프로그램 / WEB / APP 으로 포스팅을 진행할 것입니다.

우선 Github에 올린 소스를 다운받아 설명을 들어주시면 감사하겠습니다.

저의 개발 환경은 Eclipse Mars 입니다.

Eclipse에서는 Remote System Explorer를 통해 SSH로 연결된 라즈베리 파이와 파일 전송이 가능하며,

Team Synchronizing을 통해 로컬 작업 폴더와 라즈베리 작업 폴더를 동기화 시킬 수 있습니다.

사용된 API 알아보기

1. 음성 인식 Annyang API를 통한 스마트 미러 제어

2. 음성 합성 ResponsiveVoic API를 통한 소리 출력

3. 날씨 Forcast API를 통한 날씨 제공

4. 교통정보 Bing Map Route API를 통한 시작에서 도착까지 시간 정보 제공

5. 지도 Google Map API를 이용한 지도 서비스 제공

6. 일정 Google Calendar 를 이용한 일정 제공

7. 뉴스 Google News 를 이용한 뉴스 제공

8. 지하철 서울 오픈 데이터의 지하철 도착 정보 API를 이용한 실시간 도착 정보

9. 유투브 Youtube API를 이용한 동영상 재생

10. 라즈베리 카메라를 이용한 사진 및 동영상 촬영 후 첨부 파일로 메일 전송

NodeMailer

11. 스마트폰 Mirror Application과 연동된 문자/전화/카카오톡/메일/페이스북

    알림

12 웹 서버 Webserver 구축(Express) 및 웹 사이트 제작

13. Application -  페이스북 로그인 / 음성 인식 / IP 설정

14. Web – HTML5, CSS, Jquery를 이용, 미러 정보 및 제작 참고 방법 구현

API 참고 사이트

날짜 Forecast API

구글 캘린더 동기화 Google Calendar ical 공유

서울 열린 데이터 오픈 API

교통정보 Bing Maps API

공공 데이터 API - 버스도착정보조회

Youtube API

Google Cloud Speech API (직접 사용하지는 않음)

스마트 미러 프로그램

GitHub 에서 smart-mirror 프로젝트 폴더를 보시면 다음과 같을 것입니다.

저와의 프로젝트 명(smart-mirror-kjc)은 다를 것입니다.

첫째 미러 프로그램 실행을 위해서는 node-module을 설치하셔야 합니다.

npm install express

npm install nodemailer

미러 프로그램 시작은 npm start 입니다.

우선 프로젝트 디렉터리 부터 하나하나 뜯어보겠습니다.

css 폴더

css는 미러 프로그램 시작 이후의 전반적인 인터페이스 화면입니다.

미러 프로그램은 HTML5, CSS, Javascript로 이루어져 있습니다.

미러를 자신의 입맛에 맞게 변경하고 싶으시다면 CSS파일의 main.css를 변경하시면 됩니다.

fonts

fonts 폴더는 미러에서 사용하는 폰트들 입니다.

image

image는 제가 추가한 것인데요. 스마트폰과 연동되어 Notification이 날라옵니다.

Call, SMS, Email, Kakao, Facebook 알림에 대한 사진과 ‘너는 누구니’ 명령에 대한 미러로 보여주는 사진을 넣어 놨습니다.

js

미러의 핵심적인 기능을 하는 폴더입니다.

javascript 파일로 다음과 같습니다.

annyang-service.js, annyang.js -> SpeechRecognition을 이용해 음성 인식을 사용합니다.

Annyang API 사용

app.js -> Angular API 사용

calendar-service.js -> 구글 캘린더와 동기화하는 기능

command.js -> 영어, 한국어 버전으로 음성 인식 명령입니다.

** 추가 하실 명령에 대해 이 곳에서 작성하시면 됩니다.

controller.js -> 음성 인식 명령으로 추가된 것을 Annyang에 등록하고, 앱에서 보내는 음성 명령 또한 처리하는 부분

** 추가하신 명령에 대해 음성 인식 작동 시 해당 명령의 기능이 분기 됩니다.

function-service.js -> 분기 된 곳으로 부터 실질적으로 기능 수행하는 곳

geolocation-service.js -> 현재 위치에 대해 정보를 가져옵니다.

giphy-service.js -> Giphy의 gif으로 된 파일을 가져옵니다.

Giphy API 사용

jquery-2.2.2.min.js -> Jquery를 사용하기 위한 파일입니다.

mailer.js -> 라즈베리 카메라로 촬영된 사진이나 동영상 파일을 첨부로 보내 메일로 전송합니다.

map-service.js -> 구글 맵을 이용하여 현재 위치나, 요청된 위치의 맵을 보여줍니다.

Google Map API 사용

rrule.js -> 날짜에 대한 표기

subway-service.js -> 지하철 역별 실시간 열차 도착 정보를 가져옵니다.

서울 오픈 데이터 API 사용

traffic-service.js -> 시작 지점서부터 도착 지점까지의 교통 시간 정보를 가져옵니다.

Bing Map Route API 사용

weather-service.js -> 날씨 정보를 가져옵니다.

Forecast API 사용

youtube-service.js -> Youtube의 동영상, 플레이리스트를 재생합니다.

Youtube API 사용

music

뮤직 폴더는 스마트 미러에서 음악 재생을 수행하려고 mp3 파일을 넣어놨습니다.

아직 기능 수행은 하지 않았습니다….

node_modules

스마트 미러에서 사용되는 Node 모듈들이 설치되는 디렉터리입니다.

public

스마트 미러에서는 9090포트로 Express를 통해 웹 서버를 구동합니다.

웹 서버가 구동 되면서 웹 브라우저에서 ip:9090으로 접속하면 public 폴더의 index.html의 웹 사이트로 접근이 됩니다.

config.js

API 사용을 위해 API 키값과 각종 환경 설정을 수행하는 부분입니다.

var config = {

  // Language for the mirror (currently not implemented)

  language : "ko",

  greeting : ["SmartMirror"], // An array of greetings to randomly choose from

  // forcast.io

  forcast : {

      key : "**********************", // Your forcast.io api key

      units : "auto" // See forcast.io documentation if you are getting the wrong units

  },

  // Calendar (An array of iCals)

  calendar: {

    icals : ["https://calendar.google.com/calendar/ical/*********/public/basic.ics"],

    maxResults: 9, // Number of calender events to display (Defaults is 9)

    maxDays: 365 // Number of days to display (Default is one year)

  },

  traffic: {

    key : "*****************************************", // Bing Maps API Key

    mode : "Transit", // Possibilities: Driving / Transit / Walking

    origin : "Suwon", // Start of your trip. Human readable address.

    destination : "Yangjae", // Destination of your trip. Human readable address.

    name : "스마트커넥티드융합기술과정", // Name of your destination ex: "work"

    reload_interval : 5 // Number of minutes the information is refreshed

  },

  youtube: {

    key:"********************************"

  },

  subway: {

    key:"*********************************"

  },

  soundcloud: {

   key:"******************************"

  }

}

다음과 같이 **********에 해당하는 본인 API 키 값을 넣으시면 됩니다.

index.html

우리가 보여지는 스마트 미러의 화면이 index.html로 작성된 것입니다.

사용된 javascript 파일, css파일을 import하고 숨겨진 화면에 대한 코드 또한 작성되어 있습니다.

main.js

미러 프로그램이 실행되기 전 main.js 부터 실행됩니다.

electron으로 실행되게 하며 메뉴 숨김, 테마, 윈도우 창에 대한 설정이 가능하며, openDevTools를 통해 웹 브라우저의 개발자 툴을 이용하실 수 있습니다.

var browserWindowOptions = {width: 800, height: 600, icon: 'favicon.ico' , kiosk:true, autoHideMenuBar:true, darkTheme:true}; <- 메뉴 숨김 및 전체 화면

mainWindow = new BrowserWindow(browserWindowOptions); //{width: 800, height: 600}

// and load the index.html of the app.

mainWindow.loadURL('file://' + __dirname + '/index.html');

// Open the DevTools.

mainWindow.webContents.openDevTools(); <- 개발자 툴, 주석처리하면 개발자 툴이 안보입니다.

웹 서버 구동하는 부분입니다. 9090포트를 이용하고 있습니다. 또한 public 디렉터리를 사용하도록 합니다.

/* WEB SERVER */

var http = require('http');

var express = require('express');

var smartmirror = express();

smartmirror.use(express.static(__dirname+"/public"));

http.createServer(smartmirror).listen(9090,function() {

console.log('server on 9090...');

});

스마트폰과 연동되어 받아오는 값을 GET으로 받으며, 이 데이터를 미러 전역 객체에 넣어 index.html로 정보를 뿌립니다.

/* Electron을 위한 전역 객체 */

var events = require('events');

global.sender = new events.EventEmitter();

/* 스마트 미러 <-> Android APP 음성 명령 통신 */

smartmirror.get('/android.do',function(req,res){

console.log(req.url);

var query = url.parse(req.url, true).query;

console.log(query);

global.sender.emit('android',query);

res.send("<h1>Android Command OK</h1>");

});

/* 스마트 미러 <-> Android APP Notification 통신 */

smartmirror.get('/noti.do',function(req,res){

console.log(req.url);

var query = url.parse(req.url, true).query;

console.log(query);

global.sender.emit('data',query);

res.send("<h1>Noti OK</h1>");

});

package.json

npm start로 진행할 때 필요한 스크립트로 보시면 됩니다.

README.md , LICENSE.md

프로그램에 대한 설명과 라이센스 에 대한 부분입니다.

*** 추가적으로 Github에 빠진 내용이 있습니다.

릴레이 스위치를 통해 LED를 제어하는 부분인데요.

Electron에서 onoff 모듈과 충돌이나 다른 프로젝트 폴더(/home/pi/RelaySwitch/lightOn.js)

로 빼내고 RelaySwitch 디렉터리에 Node module을 설치하여 진행하였습니다.

lightOn.js

var Gpio = require("onoff").Gpio;

var led = new Gpio(18,'out');

led.writeSync(1);

process.on('SIGINT',function() {

led.unexport();

process.exit();

});

lightOff.js

var Gpio = require("onoff").Gpio;

var led = new Gpio(18,'out');

led.writeSync(0);

process.on('SIGINT',function() {

led.unexport();

process.exit();

});

npm install onoff  명령어를 통해 onoff 라이브러리를 설치해주셔야 합니다.

미러 프로그램에서는

function-service.js

에서 lightOn.js의 위치를 수정해주셔야 합니다.

lightOn : function() {

console.debug("led on...");

   if(responsiveVoice.voiceSupport()) {

          responsiveVoice.speak("등을 켭니다.","Korean Female");

      }

/* Light on 프로세스*/

var exec_lighton = require('child_process').exec;

/* 커맨드 실행할 lightOn.js의 위치  */

var cmd_path = "/home/pi/RelaySwitch/lightOn.js"; ←--------이 부분

/* 커맨드 명령*/

var cmd_lighton = 'node '+cmd_path;

exec_lighton(cmd_lighton, function(errror, stdout, stderr) {

console.log('Start node lightOn.js');

});

},

올라가 있는 소스에는 주석을 어느 정도 달아놨습니다. 궁금하신 부분은 smartmirror.kjc@gmail.com으로 문의주세요