스마트 거울 만드는 법

일전에 스마트 거울 만들기 이야기를 한 적이 있는데, 어떻게 만드는지 문의하는 사람이 있어서 별도의 포스트를 작성한다. 사실 원 글에 만드는 과정이 거의 다 설명이 돼 있는데, 일기처럼 써 놓아서 아무도 읽지 않는 듯 하다.ㅋ 사실 본인의 시행착오 과정을 따라할 필요가 없으니, 요약해서 설명하는 글을 하나 작성해 보았다.

caveat : 순서대로 끝까지 읽어보고 한 부분이라도 무슨 말인지 이해가 안 되면 포기하시오. 이 포스트 만드는 데도 시간 꽤 걸렸는데, 더 자세한 설명은 안할 거임. ㅋ

  1. 설치하려는 장소는 wifi 신호가 닿는 장소이어야 한다.

    사실 유선으로도 설치가 가능하긴 한데, 거울에 연결된 선이 많으면 미관상 별로니까 이 글에서는 무선으로 인터넷을 연결할 것이라고 가정한다. 집에서 무선 공유기를 안 쓰는 사람은 걍 포기하시오 ㅋ

  2. hdmi 입력이 가능하고, 벽에 걸 수 있을 만한 무게의 모니터를 준비한다.

    뭐 벽에 걸지 않고 쓰려는 사람은 더 큰 것을 준비해도 된다. 근데 모니터가 너무 두껍거나 무거우면 벽에 걸기 좀 힘들어 질 듯 하다. 본인은 가능한 가장 얇고 가벼운 것을 선호했으므로 on-lap 2501c를 이용하였다. 근데 이거 좀 비싸다-_-

    만약 모니터의 hdmi 또는 dvi 연결부위가 모니터 뒤쪽으로 돌출된 형태라면 케이블을 연결한 후 벽에 붙이기 난감한 상황이 된다. 꺾어지는 젠더를 알아서 구입하시라.

  3. 반사율 60%~70% 정도의 모니터보다 넓은 크기의 반투명 거울을 준비한다.

    A3 사이즈면 적당할 듯. 본인은 http://www.atostore.com/ 에서 구매하였다. 자기가 쓰고 싶은 사이즈로 잘라서 보내달라고 하면 보내줄 것 같다.

  4. 라즈베리 파이를 준비한다.

    기종은 아무거나 괜찮음. 어차피 x윈도우 띄우면 걍 계속 켜놓기만 할 거라서, 성능은 중요하지 않다.

    1. 라즈베리 파이3가 아닌 사람은 usb 타입의 무선 랜카드를 구매한다.

      왜냐하면 파이3는 내장된 무선 랜카드가 있어서 필요없는데, 옛날 기종은 없으므로 인터넷에 연결하려면 필요하다.

    2. 파이에 부팅할 때 쓸 sd 카드를 준비한다.

      제일 오래된 기종인 파이A 또는 파이B는 그냥 sd 카드를 이용하고, 파이2와 파이3는 마이크로 sd 카드가 필요하다. 용량은 4기가 바이트 이상이 필요하다. 근데 4기가도 살짝 빡빡하니까 8기가 이상을 구입하는 것을 권함.

    3. usb 타입의 키보드와 마우스를 준비한다.

      이거 없는 사람은 없겠지-_-

  5. 검은 종이를 구입한다.

    반투명 거울이 모니터보다 크면 나머지 부분을 가려야 거울처럼 보인다. 모니터 사이즈랑 거울 사이즈랑 똑같으면 안 사도 됨.

  6. 거울 크기의 액자를 구입한다.

    daum 지도로 자기 동네 주변의 표구사를 검색한다. 그리고 모니터와 거울을 들고 가서 이걸 둘러 싸는 프레임 액자를 하나 짜 달라고 주문하면 된다. 본인은 3만원 줬음-_- ㅋ

준비물은 여기까지고, 인제 리눅스에 대한 지식이 약간 필요하다. ㅋ 뭐 본인도 리눅스에 대해 잘 알아서 한게 아니고 다 검색해서 알아낸 것이므로 막히면 검색을 잘 활용하자.

  1. sd 카드에 raspbian jessie를 설치한다.

    라이트 버전을 설치하면 안된다. x윈도우가 들어있지 않으므로 웹브라우저 (콘솔용 텍스트 웹브라우저 같은 걸로 딴지 걸지 맙시다 ㅋ)를 띄울 수가 없다. 좌측의 풀버전을 설치하시라. 설치 방법은 Win32 Disk Imager 같은 걸로 디스크 이미지를 통째로 쑤셔 넣기만 하면 되는데, 자세한 방법은 검색하면 무지하게 나온다. 디폴트 계정은 pi, 패스워드는 raspberry 이다.

  2. 화면 회전법

    가로로 써도 상관없긴 한데 ㅋㅋㅋ 가로로 긴 거울을 쓰는 사람은 별로 없으니 화면을 회전시켜야 한다.
    /boot/config.txt
    를 열어 맨 마지막 줄에 display_rotate=1를 추가하고 재부팅한다. 참고로 2는 180도 회전, 3은 270도 회전이다. 필요하면 3을 써도 된다.

  3. 미도리 설치

    웹브라우저를 전체화면으로 만드는 단축키는 F11인데, 이건 거의 모든 브라우저에서 통한다. 기본으로 내장된 에피파니 브라우저는 풀스크린으로 만들면 화면 테두리에 흰 라인이 추가되어 보기가 좋지 않다. 그래서 미도리 브라우저를 설치한다. 설치방법은 콘솔창을 띄워서 다음을 입력한다.
    sudo apt-get install midori
    뭐 선호하는 브라우저가 있으면 그걸 써도 무방하다.

    그리고 매번 부팅할 때마다 미도리를 실행하기가 귀찮을 수 있으므로 /home/pi/.config/autostart 에다가 단축아이콘을 넣어둔다.

  4. 아파치2 설치

    라즈베리 파이를 웹서버로 만들면 된다. 개인적으로 쓰는 웹서버가 있으면 그걸 걍 써도 되는데, 인터넷 접속이 원활하지 못하면 가끔 404 에러가 나서 불편하다. 웬만하면 아파치를 설치하는 게 좋다. 설치법은 콘솔창에 다음을 입력
    sudo apt-get install apache2

  5. 아파치2 루트 디렉토리 수정과 cgi 허용

    먼저 웹서버의 루트 디렉토리와 cgi 디렉토리를 만들어 둔다.
    /etc/apache2/sites-available/000-default.conf 파일을 열면 루트 디렉토리 값이 보인다.
    DocumentRoot /var/www/html
    를 다른 경로로 변경하고 그 아래쪽에 다음을 추가한다.

    <Directory 변경된 경로>
    Order allow,deny
    Allow from all
    Require all granted
    </Directory>

    ScriptAlias /cgi-bin/ 변경된cgi경로
    <Directory “변경된cgi경로”>
    AllowOverride None
    Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
    Order allow,deny
    Allow from all
    </Directory>

    그냥 ctrl-c로 카피하면 따옴표가 이상한 캐릭터로 바꾸니까 카피해서 수정 필요함.

    그리고 ls /etc/apache2/mods-enabled/ | grep cgi
    라고 해서 cgid.load가 걸리지 않으면
    ln -s /etc/apache2/mods-available/cgid.load /etc/apache2/mods-enabled/
    ln -s /etc/apache2/mods-available/cgid.conf /etc/apache2/mods-enabled/
    라고 입력한다.

  6. 모니터 절전모드 해제

    스마트 거울이 절전모드로 꺼지는 경우를 방지한다.
    /etc/kbd/config 를 열어
    BLANK_TIME=0 (디폴트 30)
    POWERDOWN_TIME=0 (디폴트 15)
    으로 수정 후
    sudo service kbd restart
    하면 된다.

  7. LWP::Simple 설치

    콘솔창을 열어
    perl -MCPAN -e’install “LWP::Simple”‘
    라고 입력하고 한참 기다리면 된다-_- 설치 초 오래 걸리니까 유선랜을 연결해서 하는 것을 추천함.

  8. 한글 폰트 설치

    스마트 거울에 한글이 나올 필요가 없는 사람은 이 과정을 패스해도 된다. 콘솔 창에 다음을 입력
    sudo apt-get install ttf-unfonts-core ibus ibus-hangul

  9. 마우스 포인터 사라지게 하기

    라즈비안을 최초 부팅하면 마우스 포인터가 중앙에 위치한다. 뭐 마우스를 움직여서 구석으로 몰면 되긴 하지만, 부팅할 때마다 마우스 조작을 하는게 은근 귀찮다. unclutter를 설치하면 일정시간 이상 움직임이 없는 마우스 포인터는 안 보이게 되므로 편리하다.
    sudo apt-get install unclutter
    으로 설치한 다음
    /etc/rc.local
    파일을 열어 맨 마지막 행에 unclutter 라고 추가하면 부팅할 때마다 실행된다.

  10. 날씨 아이콘 준비

    검색해보면 날씨 아이콘들은 많은데, 대부분 배경이 흰색임을 가정하고 있기 때문에 스마트 거울에 맞지 않다. 본인이 대충 편집해서 쓰고 있는 아이콘들을 업로드해 둔다.

  11. clouded half_snow little_cloud rainy snow sunny thick_cloud

  12. perl 코드 입력

    cgi 경로에 파일을 하나 만들어서 다음 perl 코드를 입력한다.

#!/usr/bin/perl

use LWP::Simple;
use Encode;

print <<HTMLA;
Content-type: text/html


<html><head>
<title>smart mirror</title>
<meta charset="utf-8">
</head>
<script type="text/javascript">
<!--
setTimeout("history.go(0);", 300000); //300초마다 리프레시

setInterval("dpTime()",1000);

function dpTime(){
  var now = new Date();

  years = now.getYear();
  years = years + 1900;
  months = now.getMonth();
  months = months + 1;
  dates = now.getDate();
  days = now.getDay();
  hours = now.getHours();
  minutes = now.getMinutes();
  seconds = now.getSeconds();

  var names = ["일", "월", "화", "수", "목", "금", "토"];
  if (hours > 12){
    hours -= 12;
    ampm = "오후";
  }else{
    ampm = "오전";
  }
  if (hours < 10){
    hours = "0" + hours;
  }
  if (minutes < 10){
    minutes = "0" + minutes;
  }
  if (seconds < 10){
    seconds = "0" + seconds;
  }
  document.getElementById("dpTime0").innerHTML = years + "년 " + months + "월 " + dates + "일 " + names[days] + "요일";
  document.getElementById("dpTime1").innerHTML = ampm;
  document.getElementById("dpTime2").innerHTML = hours + ":" + minutes + ":" + seconds;
}
//-->
</script>
<body bgcolor="#000000" text="#2299aa" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table border=0 cellspacing=5 cellpadding=5 width="100%" height="100%"><tr><td valign="top">
<font size=+2>

HTMLA

##################### 네이버 증권
$html = get( "http://finance.naver.com/sise/sise_index.nhn?code=KOSPI" );
unless ( $html ) {
print "404 not found";
}

@all=split("\n", $html);
$num=@all;

print <<END;
<span id="dpTime0" style="font-size:30px"></span>
<br><span id="dpTime1" style="font-size:30px"></span>
<span id="dpTime2" style="font-size:50px"></span>
<br>코스피 현재 :<span style="font-size:50px">
END

for($i=0;$i<$num;$i++) {
 if($all[$i] =~ m/<em id=\"now_value\">/) {
  $all[$i] =~ s/<em id=\"now_value\">//;
  print "$all[$i]</span>";
 }
 if($all[$i] =~ m/id=\"change_value_and_rate/) {
  $all[$i] =~ s/<span class=\"blind\">(.*)<\/span>//;
  print $all[$i];
 }
}

print "</span><br>--------------------\n<br>";

#####################  날씨

$html = get( "http://www.kma.go.kr/mobile/for_02_view.jsp?s1=11&s2=11170&s3=1117052000" );
# 자기가 사는 동네로 수정

unless ( $html ) {
print "404 not found";
}

$html = encode("UTF-8", $html ); #한글 검색을 위해 필요

@all=split("\n", $html);
$num=@all;
$temp=0;
$temp2=0;

for($i=3;$i<$num;$i++) {
 if($all[$i] =~ m/시각 /) {
  $temp++;
 }
 if($all[$i] =~ m/\[오늘\]/) {
  $temp2++;
 }

 if(($temp > 0  && $temp <4) && $temp2 <2) {    #항상 날씨 세 개만 출력
  $all[$i] =~ s/구름 많음/<img src="http:\/\/localhost\/image\/thick_cloud.png">/;
  $all[$i] =~ s/구름 조금/<img src="http:\/\/localhost\/image\/little_cloud.png">/;
  $all[$i] =~ s/맑음/<img src="http:\/\/localhost\/image\/sunny.png">/;
  $all[$i] =~ s/흐림/<img src="http:\/\/localhost\/image\/clouded.png">/;
  $all[$i] =~ s/비/<img src="http:\/\/localhost\/image\/rainy.png">/;
  print "$all[$i]\n";
 }
}

print <<END;
</p>
</td></tr>
<tr><td align="right" valign="bottom" style="padding:0 20 50 0">
<span style="font-size:50px">You Look Nice!</span>
</td></tr></table></table>
</html>
END

귀찮아서 114번째 줄 부터 날씨 아이콘 부분의 코드가 덜 완성되었는데, 텍스트를 이미지로 바꾸는 것 뿐이므로 알아서 수정하면 된다.

자세한 내용은 다음 두 글을 참고하삼.
http://michaelteeuw.nl/post/ … e-end-result-of-the-magic
http://blog.dylanjpierce.com/raspberrypi/ … gic-mirror.html

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중