본문 바로가기
Project/개인 프로젝트

스마트미러(smart mirror) 만들기 with Vue

by 강깅꽁 2018. 5. 30.

이 포스트의 최종 결과물은 아래의 사진입니다. ㅎㅎ 

아래와 같은 결과물을 만들기 위해 무엇이 필요한지 어떻게 만들어야 하는지 등 차례대로 써내려 가도록 하겠습니다.



                        



필요 물품들


재료 

가격 

url 

 하프미러(1524mm*1m)

21,000(배송비 포함) 

 http://any-mall.co.kr/shop/shopdetail.html?branduid=111053

 3M 아크릴 폼 양면테이프

 5,390(배송비 포함)

 http://smartstore.naver.com/pienoglo/products/512446438

 유리 510mm*330mm

13,700(배송비 포함) 

 http://smartstore.naver.com/glasskiss/products/113483776

 모니터 24인치

0

 집 

 가위, 분무기, 밀대

 0 

 집 

 라즈베리파이 3

 약 45,000원

 

 블루투스 스피커

약 45,000원 

 오디오 잭 또는 usb를 이용한 스피커를 추천드립니다.

 미니 이젤

 약 13,000원

 

 무선 랜카드

약 10,000원

 

 dvi to hdmi 젠더

약 5,000원 

 

 합

113,090원

 


* url에 적혀 있지 않은 품목은 구매하기 쉽거나 url이 너무 길어 테이블에 표시하지 않았습니다.

* 가지고 계신 품목 또는 추가하고 싶은 품목에 따라 가격 변동이 있습니다.

* 개인적으로 라즈베리파이 에서 블루투스 스피커를 잡을 때 문제가 많기 때문에 오디오 잭 또는 usb를 이용한 스피커를 추천합니다.

* 라즈베리파이가 유튜브를 실행할 때 성능 문제가 있으므로 3 보다는 라즈베리파이3 b+를 추천합니다.




하드웨어 제작


모니터는 다음과 같이 베젤을 모두 뜯어주시고 검정색 절연 테이프로 모니터의 외각 흰 부분을 덮어줍니다.





필수 재료 들입니다. 




* 가운데 있는 원통에 하프미러 필름이 들어 있습니다.

* 준비물: 베젤이 분리된 모니터, 라즈베리파이, 가위, 밀대, 퐁퐁물이 들어 있는 분무기, 유리, 하프미러 필름


1. 하프미러 필름을 유리의 크기보다 약간 크게 잘라줍니다.

2. 하프미러 필름을 보시면 앞, 뒷면이 매끈한데 이 필름의 가장자리를 살짝 뜯으시면 벗겨지는 면이 존재합니다. 그 면을 뜯으시면 한쪽이 접착면이 됩니다.( 사진을 못찍어서 설명이 미흡합니다. ㅠ)

3. 하프미러 필름을 붙이기 전 유리를 분무기로 마구 뿌려줍니다.(퐁퐁물 입니다.) 

Tip. 하프미러 필름을 붙이기 전에 화장실에서 샤워나 목욕을 하시면 수증기로 인해 먼지가 많이 가라 앉아 있습니다. 이때 붙이시면 유리와 필름 사이에 먼지가 없습니다.



4. 하프미러 필름을 유리에 부착해주시고 밀대로 안에 있는 퐁퐁이 빠질 때까지 밀어줍니다. 이 과정에서 하프미러 필름에도 분무기로 뿌려주셔야 기스가 안나고 하프미러필름과 유리 사이의 퐁퐁물을 빼기가 수월해집니다. 



5. 퐁퐁물을 최대한 빼셨다면 잠시 기다려주신 후에 칼로 유리 바깥에 남는 필름을 제거해줍니다. (퐁퐁물이 많이 남아 있거나 기다리지 않으시면 접착이 이루어지지 않아 칼로 자르다가 필름이 밀리기도 합니다.)


6. 베젤이 분리된 모니터에 양면 테이프를 붙여주고 지금까지 만든 유리에 붙여줍니다. 


7. 붙이신 후에 바닥에 내려 놓고 충분한 시간을 기다려주셔야 오래오래 쓰실 수 있습니다. 


8. 미니 이젤이 받쳐주는 모습입니다. 여기서 양면테이프 양이 남으시거나 여분이 있으시다면 라즈베리파이를 이젤에 붙이시면 깔끔한 모습이 됩니다. 




라즈베리파이 설정

* 제가 찍은 사진이 없어서 우선 외부 링크를 올리도록 하겠습니다.

 

1. 라즈비안 설치 (https://blog.naver.com/joonzzang90/220781140879)


2. 라즈베리파이 셋팅 ( http://jeongchul.tistory.com/425?category=552705 ) _ 언어 및 시간 설정, 패스워드 설정, wifi 설정, 한글폰트 설정, 스피커 설정, 디스플레이 rotation, 보호기 화면 잠금 풀기 정도 봐주시면 됩니다. 


3. 휴대폰과 라즈베리파이에 teamviewer를 깔아줍니다._라즈베리파이 gpu 용량을 늘려주시기를 권장합니다.


4. 위의 설정이 끝나시면 shell에서 git clone https://github.com/choiseunghyeon/smartmirror_vue.git 또는 https://github.com/choiseunghyeon/smartmirror_vue 에서 다운로드 하시면 됩니다.


5. shell에서 smartmirror_vue의 폴더로 가셔서 다음과 같은 명령어를 입력합니다.

 

// node와 npm이 깔려있어야 합니다.
$ sudo npm install // 다운받은 폴더에서 명령어 입력
$ mkdir /src/ApiKey.js // 유튜브, 날씨, 미세먼지의 기능은 api키가 필요합니다
$ sudo npm run dev // smartmirror가 실행되며 브라우저에  http://localhost:8080/ 입력

 

6.  http://localhost:8080/에 접속하시기 전에 API 설정을 먼저 해주셔야 유튜브, 날씨 ,미세먼지의 기능이 실행됩니다.


7. 다음과 같이 ApiKey.js를 만들어 줍니다.

export default {
  youtube: "YOUR YOUTUBE API KEY",
  weather: "YOUR WEATHER API KEY",
  finedust: "YOUR FINEDUST API KEY",
}




API 설정


1. Weather : https://developers.sktelecom.com/

 - 회원가입을 통해 로그인을 진행합니다.


 - 메인 화면에서 왼쪽 상단 햄버거 메뉴를 눌러줍니다.

 


 - 햄버거 메뉴를 누르면 다음과 같은 카테고리가 나오는데 Workspace를 눌러줍니다.



- 신규 프로젝트 추가 메뉴를 눌러줍니다. 


- 프로젝트 명과 설명은 자유롭게 해주시면 됩니다. 


- 만드셨으면 들어가셔서 Service를 눌러줍니다.



- 다음과 같은 항목에서 Weather Planet API 서비스를 신청하여 Server key를 생성하시면 됩니다.


2. FineDust(미세먼지) : https://www.airvisual.com/api


 - 회원 가입을 통해 로그인을 진행합니다.


 - 아래 사진에 나오는 메뉴에서 Air quality API 메뉴를 선택하여 COMMUNITY로 api키를 받습니다.


- API로 들어가시면 Key 확인이 가능합니다.


3. Youtube(유튜브) : https://console.developers.google.com/?hl=ko


- 상단 메뉴에 다음과 같은 칸을 눌러주어 새 프로젝트를 만들어 줍니다. 저의 경우 이미 프로젝트가 있어서 다음과 같이 나왔습니다.



- 프로젝트를 만드셨다면 다음과 같이 나오는데 대시보드에서 API 및 서비스 사용 설정을 눌러줍니다.


- youtube로 검색하여 다음과 같은 YouTube Data API v3를 클릭해 줍니다.


- 사용설정을 눌러줍니다.


- 사용자 인증 정보 카테고리를 클릭하시고 사용자 인증 정보 만들기를 클릭 후 API키를 선택해줍니다.


- 생성 완료 후에 키를 제한하냐 물어보는데 닫기 하셔도 무방합니다. 




실행


모든 준비 과정이 끝났습니다. 

브라우저에서 http://localhost:8080/ 으로 들어가줍니다.

조작은 핸드폰과 라즈베리파이를 teamviewer로 연결한 다음 핸드폰으로 조작하시면 됩니다. 


아래 gif들은 간략하게 기능 소개를 도와주는 영상입니다. (일반 pc에서 찍었습니다)



- 검색, 재생 및 영상 최소화 (영상 최소화시 소리는 계속 재생됩니다.)




 - 채널 저장 및 목록


채널 저장 및 목록



- 구독중인 채널의 플레이 리스트와 선택한 플레이리스트가 가지고 있는 비디오 영상들




- 영상 저장


- My List