YUV Player 만들기

Project 2010. 2. 9. 22:26

안녕하세요? 맨날맑음 입니다.

 

YUV 시퀀스를 재생하기 위해서 Raw Data Displayer(RDisp)라는 프로그램을 사용 하였습니다. 카이스트에서 한국사람이 개발한 프로그램인데요. 여러개의 파일을 동시에 재생하고, 여러가지 YUV 포맷을 지원하여 매우 잘 사용하고 있었습니다.


- Fig1. RDisp -

저도 몇달전쯤 심심하던차에 YUV Player를 만들어 보려고 시도해 보았습니다. 사실 Color Space에 대한 명확한 이해와 레퍼런스가 부족하여 몇일을 걸려 완성했는데요..(사실 아직 문제점이 많습니다) 만들면서 발생한 문제점과 만드는 방법을 포스팅하려 합니다.

 

#1. YUV Plyaer를 만들기 위한 준비

개발환경

IDE : Microsoft Visual Studio 2008

언어 : Visual C#

프레임워크 : .NET Framework 2.0

출력 형식 : Windows Form

제가 닷넷을 선택하고 윈폼으로 프로젝트를 한 이유는 간단합니다. MFC나 기타 다른 방법이 있을 테지만 닷넷이 제일 익숙하기 떄문이었습니다. –_-; 그냥 플레이어의 알고리즘만 익히자는 취지도 이 선택에 한 몫 했습니다.

 

막상 Player를 만드려고 보니 YUV를 어떻게 화면에 뿌려줄까? 라는 의문이 들었습니다. YUV를 바로 화면에 뿌릴 수 있는 방법은 애당초 없습니다. 컴퓨터 화면은 RGB포맷을 사용하기 때문이죠. 그렇습니다. YUV를 RGB로 바꿔야 합니다.

 

YUV Player의 프로세싱 과정

1. YUV 데이터를 읽어 온다.
2. RGB로 변환한다.
3. RGB에 Bitmap 헤더 정보를 입혀 Bitmap으로 변경한다.
4. Bitmap을 fps에 따라 적당한 속도로 화면에 뿌려준다.

대충 위와같은 과정을 거치게 됩니다.

 

YUV와 RGB에 관한 지식이 필요합니다. 이전 포스팅 중 http://crynut84.tistory.com/56를 참고 하시면 관련 내용을 알 수 있습니다.그리고 위키(http://en.wikipedia.org/wiki/YUV)를 보시면 좀 더 자세한 정보를 얻을 수 있습니다.

 

#2. YUV –> RGB

public Color YUVtoRGB(int Y, int U, int V)

{ 

    return Color.FromArgb(Clippiing((76284 * (Y - 16) + 104595 * (V - 128)) >> 16),

        Clippiing((76284 * (Y - 16) - 53281 * (V - 128) - 25625 * (U - 128)) >> 16),

        Clippiing((76284 * (Y - 16) + 132252 * (U - 128)) >> 16));          

}

 

byte Clippiing(int data)

{

    return (byte)((data < 0) ? 0 : ((data > 255) ? 255 : data));

}


위와같은 방법으로 YUV를 RGB로 변경 할 수 있습니다. YVUtoRGB 메서드의 인자에 YUV를 넣으면 Color 객체로 return 하게 되어있습니다. Clipping 메서드는 단순히 0~255값을 가지는 RGB요소가 범위를 벗어 났을 경우 범위안으로 넣어주는 역할을 합니다.

 

#3. YUV4:2:0 포맷의 이해

제가 가장 많은 시간이 걸린 부분입니다. YUV4:2:0 비트스트림에 대한 정확한 이해가 없었기 때문에 RGB로 변경하여 화면에 뿌렸을 경우 계속해서 Color성분이 이상하게 나오는 것이었습니다.

- Fig2. YUV4:2:0의 개념-

 

위 부분을 정확히 이해해야지만 RGB로 컨버팅 하였을때 원하는 영상을 얻을 수 있습니다.  4:2:0이면 Y성분4개가 U,V성분을 하나씩 공유해서 쓴다는 것은 쉽게 알 수 있습니다. 하지만 저는 Y0,Y1,Y3,Y4의 성분이 U0을 공유하여 쓰는 줄 알았습니다. 이걸로 거의 하루의 시간을 버리게 되었죠;;

 

위의 Fig2에서 알 수 있다 싶이 크기가 Width : 8, Height : 4인 프레임이 있을 때,  Y0,Y1,Y8,Y9가 U0과 V0을 공유하게 됩니다. 요걸 알고 부터, 기본개념을 정확히 익혀야 하는 것을 다시한번 절감하였습니다.

 

즉. Y0부분을 RGB로 바꾸고 싶으시면 Y0, U0, V0의 값을 YVUtoRGB 메서드에 인자로 넣어주면 Y0자리의 Color(RGB)가 나오게 됩니다. 그림에 보면 색깔로 자신의 짝을 구분해 놓았습니다.

 

#4. 타이머 셋팅 영상 플레이

여기까지 만들었다면 다음은 간단합니다.해당하는 영상을 얼마의 속도로(fps) 재생할지 결정하여 PictureBox컨트롤에 해당하는 Bitmap을 보여주기만 하면 됩니다. 저는 1초에 30프레임 정도로 셋팅하였습니다.

 

#5. 문제점

기본적으로 재생하는데는 문제가 없습니다. 하지만 YUV 시퀀스를 로딩하는데 엄청난 시간이 소요됩니다. 또한 CPU 점유율 또한 엄청 잡아 먹게 됩니다. 각 픽셀을 RGB로 만드는데 많은 연산이 필요하여 그런 것 같은데요.. BackgroundWorker를 사용하여 쓰레드를 이용하여 처리했음에도 로딩 시간이 필요하게 됩니다.

 

이 문제가 사실 제일 큰 문제인데요.. 혹자는 어셈블리 코딩으로 퍼포먼스를 높여야한다고 하고, 닷넷을 선택한 것 자체가 문제라는 소리도 있고, 또.. 제 프로그램의 프로세스 자체가 애초에 틀렸는지도 모르겠습니다.

 

가장 의심되는 부분은 YUV->RGB 변경시 많은 연산때문이라고 여겨 지는데요.. 검색하다보니 RGB Look up table사용하는 방법으로 해결 될 수도 있겠다는 생각도 듭니다.(하지만 정작 테이블 자료는 없더군요..)

 

향후 이 문제가 개선되면 RDisp 못지않은 기능을 가진 Player도 만들어 보고 싶군요..

제 소스코드와 실행파일을 첨부 합니다. 혹여 YUV 플레이어를 만드시는 분께는 조금이나마 도움이 되길 바라고, 제가 가진 문제점에 대해서는 많은 피드백이 있었으면 좋겠습니다. 아직 완성단계가 아니기 때문에 예외처리와 소스 구조는 고려하지 않고 작성하였습니다.



YUV Player (ver1.0) : OS에 .NET Framework2.0이 설치되어 있어야 합니다. 실행후 YUV 시퀀스를 드래그 앤 드롭 방식으로 끌어오거나 마우스 오른쪽 버튼을 이용하면 메뉴를 이용 하실 수 있습니다.


소스코드 : Microsoft Visual Studio 2008에서 제작 하였습니다.

Player 실행에 필요한 시퀀스는 이곳에서 다운로드 받으실 수 있습니다. 현재 YUV4:2:0 포맷과 CIF Size만 지원됩니다.

Posted by 맨날맑음

댓글을 달아 주세요

  1. 음냐뤼 2010.03.24 17:10  댓글주소  수정/삭제  댓글쓰기

    첫번째 문제:
    int percent = frameNum / (totalFrameNum / 100);
    totalFrameNum이 100보다 작을 경우 Devide Zero 발생 할 수 있음
    다음과 같은 코드로 변경해야
    int percent = frameNum*100 / totalFrameNum;

    두번째 문제:
    toolStripProgressBar등의 컨트롤에 대한 크로스 쓰레드 문제 발생
    이 부분을 해결하면 업로드 속도도 개선될 것임
    참고로 꼭 전체 프레임을 로딩하고 나서 플레이를 하는 것보다
    버퍼링을 생각하면 더 개선될 것임 음냐...
    toolStripProgressBar1.Value = percent;
    this.toolStripStatusLabel1.Text = "파일을 읽어 오는 중..";
    if (percent > 98)
    {
    toolStripProgressBar1.Value = 100;
    this.toolStripStatusLabel1.Text = "파일 읽기 완료! Space를 누르면 재생 됩니다.";
    toolStripProgressBar1.Value = 0;
    toolStripProgressBar1.Visible = false;
    }

    if (picture == null)
    {
    this.toolStripStatusLabel1.Text = "준비";
    toolStripProgressBar1.Value = 0;
    toolStripProgressBar1.Visible = false;
    return;
    }

  2. Favicon of https://mnworld.co.kr BlogIcon ShakeJ 2010.11.01 13:37 신고  댓글주소  수정/삭제  댓글쓰기

    잘읽고갑니다^^

    mnworld.co.kr 운영자

  3. Favicon of http://blog.naver.com/smhotkdg BlogIcon Czoy 2012.11.29 20:55  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 선문비트 22기 양승훈 입니다. 지금 MPCL 에서 연구 중인 학생인데
    구글검색하다가 들어 오게 됬습니다. 프로젝트잘 받아서 사용 하겠습니다. 감사합니다.

  4. wv 2013.01.28 23:25  댓글주소  수정/삭제  댓글쓰기

    좋은 글 감사합니다
    전 이정도로 거창한건 아니고 PSNR계산하려고 하는데, yuv구조가 적혀있는 곳이 없더라구요.... 덕분에 yuv구조를 한번에 알아 갑니다 :)

  5. Favicon of http://4866.ccgenevois.com/lunettesrayban.html BlogIcon lunettes ray ban 2013.07.27 12:26  댓글주소  수정/삭제  댓글쓰기

    창밖을 봐 바람에 나뭇가지가 살며시 흔들리면 네가 사랑하는 사람이 널 사랑하고 있는거야.

  6. .NET개발자 2013.09.02 14:08  댓글주소  수정/삭제  댓글쓰기

    감사합니다^^

안녕하세요? 맨날맑음 입니다.


이 프로젝트는 우리학교 교수님은 아니고, 모 대학교의 교수님의 의뢰로 제가 처음으로 돈을 받고 만든 프로젝트 입니다.  페이를 받았으므로, 자세한 기술은 소개하지 못하고, 프로그램을 간략히 소개하려고 합니다.


#1. 장애인 웹 접근성이란?

웹 접근성은 장애인(노인)이 웹사이트에서 제공하는 정보를 일반인과 동등하게 제공 받고 이해할 수 있도록 보장해 주는 것입니다.  이처럼 장애인이 웹을 ‘잘’ 사용하게 하는 데에는 여러 방법이 있을 수 있습니다. 예를 들어 손이 불편하여 마우스는 조작이 힘들고, 키보드만 사용 할 수 있는 사람이 있을 수 있겠고, 색깔을 잘 구분 하지 못 할 수도 있습니다. 또한 시각 장애인의 경우 소리로 현재 포커스 된 곳의 글자를 읽어 줘야 하는 경우도 있을 수 있습니다.

웹 접근성에 대한 더 자세한 정보는 웹 접근성 연구소에서 보실 수 있습니다.


#2. 프로젝트 소개

Focus Explorer은 이러한 웹 접근성 중 키보드만으로 웹을 조작하기 편리 하게 되어있는지를 평가 하기 쉽도록 도움을 주는 도구 입니다. 키보드는 사용하여 웹을 사용 하려면 [Tab]키를 사용 하여, 컨트롤을 이동 하여야 합니다. 프로그램에도 탭 인덱스(Tab Index)가 있듯이, 웹 사이트를 제공하는 쪽에서는 사용자가 예상할 수 있는 경로로 포커스가 이동해야 합니다. 예를 들면, 탭의 이동은 좌에서 우로, 위에서 아래쪽으로 이동해야 하는 것이죠.

이러한 탭 키에 의한 포커스의 이동을 평가하는 측에서 쉽게 인지 할 수 있도록 각 컨트롤 별로 사각형 표시와, 이동 경로를 화살표로 표시 해 주게 됩니다.

-그림1. 프로그램 구성도-

이 프로그램은 그림1 처럼  .Net Framework 2.0 기반의 메인 응용과, Win32 Api Hooking, OleAcc Event Hooking을 사용하여 구현된 DLL들로 구성 되어 있습니다.


#3. 프로그램 기능

  • 설치와 제거
    - 프로그램을 손쉽게 설치하고 제거 할 수 있도록 Install과 Uninstall을 지원합니다.

    -그림2. Focus Explorer 설치 화면-


  • 탭 키에 의한 포커스 이동을 사각형과 화살표로 표시 합니다.
    - 포커스의 이동이 정방향일 경우 파란색(디폴트) 역방향일 경우 붉은색으로 표시합니다.

    -그림3. 포커스 이동경로 표시 화면-


  • 화살표의 색상 두께 및 여러 속성을 변경 할 수 있는 환경설정을 제공합니다.

    -그림4. 환경설정-


  • 이동 결과를 나중에 활용 할 수 있도록 그림파일과, 로그 화일(txt)로 제공합니다.

    -그림5. 로그 확인 창-

 

#. 마치면서

앞으로 웹 뿐 아니라 어플리케이션 에서도 장애인의 접근성이 중요하게 평가 될 것 같습니다. 저는 웹 개발은 할 줄 모르지만 웹표준이라던지, 이러한 접근성의 고려도 해보아야 할 것 같네요.

Posted by 맨날맑음

댓글을 달아 주세요

  1. 내가니악마다 2009.10.20 13:24 신고  댓글주소  수정/삭제  댓글쓰기

    이건..그 개고생 하셨다던..ㄷㄷ


안녕하세요? 맨날맑음 입니다.

드디어 약 3개월간의 멀티터치 테이블 발표회를 몇일전에 마쳤습니다. 사실 이 프로젝트는 학교의 '종합설계' 과목의 프로젝트로 만들게 되었는데요;; 학교에서 재료 구입에 차질이 생겨 실제 개발 기간은 약 1달이 조금 안되는 기간에 만들게 되었습니다. 저희 과가 컴퓨터공학부인지라 소프트웨어 개발은 어느정도 경험이 있었지만 하드웨어와 함께 해보는 것은 처음이라 납땜부터 LED에 저항을 연결하는 사소한 부분까지도 모르는 것이 많아 힘든 것이 많았습니다. 그래도 팀원들 모두 열심히 해준 덕에 완성하게 되어 보람되고 뿌듯하네요^^

발표 PPT와 시연 동영상입니다. 시연은 가상 시나리오로 디자인 회의를 한다는 컨셉으로 진행 하였습니다.
PPT1. 시연회 발표  PPT

영상1. 멀티터치회의테이블 최종 동작 (핸드폰 카메라 촬영)

영상2. 멀티터치회의테이블 최종 동작(마우스로 조작 화면 녹화 유틸로 녹화)

발표회 결과도 좋아서 저희 Accent 팀이 종합설계 발표회 1등을 수상하였습니다.

사진1. 기념촬영(지도해주신 김병규 교수님과 팀원)

사진2. 상장

사진3. 부상으로 받은 상품권 20장

Posted by 맨날맑음

댓글을 달아 주세요

  1. Favicon of http://www.dklee.net BlogIcon DKLEE 2009.06.15 15:12  댓글주소  수정/삭제  댓글쓰기

    넘 잘하셨어요^^
    멋쟁이!!

  2. Favicon of http://blog.naver.com/shine10ee BlogIcon 열이 2009.06.18 02:33  댓글주소  수정/삭제  댓글쓰기

    내 사진 좀 ;;;

  3. 연발이 ~ 2009.07.26 00:13  댓글주소  수정/삭제  댓글쓰기

    볼수록 매력있어 ㅋㅋㅋ 대박히트감이야 ㅋㅋㅋ

  4. 지송 2009.12.17 03:31  댓글주소  수정/삭제  댓글쓰기

    와우!! 멋지십니당.

  5. 나그네 2010.02.11 13:20  댓글주소  수정/삭제  댓글쓰기

    우송비트에서 발표했던 것과 같은것이군요.. 디자인만 다를뿐이지
    똑같네요.. 멀티터치 회의시스템 UI도 똑같고..;;


안녕하세요? 맨날맑음 입니다.

이전 포스팅에서 카메라와 터치 좌표를 맞추는데 카메라의 위치를 조정하여 맞추어야 한다고 하였지만
그 방법으로는 완벽하게 좌표를 매칭 시킬수 없었습니다. 정확히 맞추는 방법은 Touch Library의 셋팅을 이용하는 것인데요, Touch Library 홈페이지 상에 설명이 다 되어있는 내용이었지만, 초라한(?) 영어실력으로 인해 주의깊게 보지 않아 고생하였습니다;;

Touch Library의 설정은 크게 두가지로 나눌 수 있는데요; 터치의 감도를 설정하는 영상 처리부분과 좌표를 매칭하는 좌표 설정 부분이 있습니다. 영어실력이 초라한 분들을 위해 간단하게 두가지 방법을 알아보겠습니다.

영상처리
config.bat 파일을 실행시키면 6개의 창이 나타납니다.위의 3개의 창은 원영상, mono, smooth를 적용한 영상을 보여주며 아래 3개의 화면은 사용자가 값을 조정해가며 영상의 질을 개선할 수 있습니다.
첫번째 창은 경계(threshold)값을,두번째 창은 밝기brightness), 명암대비(contrast) 값,세번째 창은 레벨(level) 값을 조정 할 수 있습니다.
첫 번째 창에서 'b'버튼을 누르게 되면 배경의 화면을 나오거나 나오지 않게 할 수 있습니다. 이 threshold 값이 매우 중요합니다. 너무 크거나 작아도 터치 감도가 좋지 않습니다. 두 번째 창도 역시 어느정도 밝은 가운데 명암대비를 해야 합니다. 그 후 손가락을 누른 상태에서 이리저리 움직여가며 하얀 점이 끊기지 않고 잘 움직이는지 확인하며 세번째 창의 레벨 값을 조정해 줍니다.
이런식의 테스트로 자신에 시스템에 맞는 최적의 셋팅을 찾아주시면 됩니다. 저희의 경우 아래의 값이 최적이더라구요.
threshold: 32   brightness: 125   contrast: 208   level: 30
그 후 Enter를 누르시면 화면이 변하게 되는데 x를  누르시면 현재 값이 저장이 됩니다. Esc를 눌러 종료 후 다시 실행시켜 확인합니다.
터치 좌표 설정(좌표 매칭)
가장 중요한 부분이 터치영역을 설정해 주는 것입니다.
다시 프로그램을 실행시켜 Enter를 누르면 화면 전체에 녹색의 '+'모양이 나타납니다. 화면 좌상단에는 현재 캠의 영상이 비추어지는데 캠이 스크린 전체를 비출 수 있도록 캠을 조정합니다.
조정이 완료 되면 'c'를 누릅니다.
좌상단 모서리 '+' 부분에 빨간색 화살표가 생기게 됩니다.
이제 부터가 중요합니다.
그 '+' 부분을 누르게 되면 전체 화면의 색깔이 하얗게 변하게 되고 띄게 되면 빨간 화살표가 다음 '+'로 이동하게 됩니다. 그렇게 차례로 끝까지 누르게 되면 터치 영역 설정이 마치게 됩니다. 역시 'x'를 눌러 저장 후 종료합니다.
주의할 점은 눌렀을 때에만 빨간 화살표가 이동하여야 합니다. 그렇지 않으면 좌표가 맞지 않게 됩니다. 이제 설정된 영역안에서만 터치가 이루어지게 됩니다.

간략하게 Touch Library Setting 방법을 알아 보았는데요; 여기까지 하셨으면 하드웨어 적인 부분은 모두 끝났다고
보시면 됩니다. 저희는 이 라이브러리를 이용하여, WPF 기반으로 회의시스템을 개발하였습니다.
최종 시연 및 발표 후 소프트웨어 적인 부분을 포스팅 하겠습니다.
Posted by 맨날맑음

댓글을 달아 주세요

  1. 2011.03.30 15:32  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Favicon of https://crynut84.tistory.com BlogIcon 맨날맑음 2011.04.11 12:56 신고  댓글주소  수정/삭제

      그것 때문에 FTIR방식으로 제작 하시려면 관계없는 빛(형광등,자연광)을 어떻게 차단하느냐가 관건입니다.
      그부분은 nui group 사이트에서 도움 받으시던지 연구 해 보시는게 좋을 듯 해요..


안녕하세요? 맨날맑음 입니다.

테스트
하드웨어 설계가 마무리 단계까지 와서 인식률과 좌표 매칭을 위해서 터치인식 테스트를 해보았습니다.
우선 다음과 같이 2020 앵글을 잘 고정시키고 적외선 빛이 세어 나오지 않도록 꼼꼼하게 막아줍니다.
특히 아크릴판의 가장자리의 LED아래 부분에서 빛이 많이 세어 나오기 때문에 잘 가려주어야 합니다.
또한 LED부분과 물체가 닿으면 적외선이 반사가 되어 인식 될 수 있으므로 닿을 수 있는 부분에 절연 테이프로 감아줍니다. 

Touchlib Beta v2.0  (Download: http://nuigroup.com/touchlib/downloads)
현재 여러 프로젝트에서 touch 라이브러리로 많이 쓰이고 있으며 이번 테스트에 사용하기로 하였습니다.
open cv를 사용하여 캠에서 입력받은 영상을 이진화 시켜 잡음 제거등 영상처리를 통하여 전반사된 빛의 좌표를 TUIO 프로토콜을 사용하여 통신합니다. V1.0 보다 V2.0이 더 사용하기 쉽고 성능이 좋은 것 같습니다.

파일을 다운 받아 압축을 풀어 폴더에 들어가게 되면 Config.bat, Server.bat, Vision.bat의 3개의 배치 파일이 존재합니다. 그리고 다른 폴더에는 예제들이 포함되어 있습니다. 자세한 사용법은 여기를 참고 하시면 됩니다.

일단
Config.bat을 실행 시키면 캠 화면에 대한 설정 후 6개의 창이 뜨는데 영상처리 되어 지는 과정을 보여줍니다.
아래 3개의 창으로 자신의 어플리케이션에 맞게 영상을 조정할 수 있습니다.
B 를 누르게 되면 배경 화면을 제거 해줍니다. 또한 설정된 값을 저장하기 위해서는 엔터 버튼을 누른 후 X를 누르시면 저장이 됩니다. 

테스트 영상


이제 테스트 위해서 Vision.bat를 누르시면 Listener가 작동되어 전반사 되어진 곳의 좌표를 TUIO프로토콜을 통해 통신하게 됩니다. 간단히 만든 어플리케이션으로 테스트 해 보았습니다. 


아직 프로젝터와 카메라의 위치를 좀더 조절하여 좌표를 보다 정확하게 매칭시켜야 합니다. 이부분이 꽤 까다롭습니다. 여러번 테스트를 하셔야 합니다. 또한 사용하는 컴퓨터의 성능이 그리 좋지 않아 인식이 좀 빠르게 이루어 지진 않습니다. 하지만 웬만큼 인식률이 나오기 때문에 소프트웨어 구현을 시작하며 하드웨어 보완을 진행할 계획입니다.
외부 형광등이나 다른 요인으로 적외선이 카메라에 들어와 오작동 할 수 있으므로 테이블 주위도 막기로 하였습니다. 또한 빔프로젝터에서도 다량의 적외선이 나오기 때문에 적외선 차단 필름을 붙이면 좋지만 단가가 비싸기 때문에 아직 고려중에 있습니다.

Posted by 맨날맑음

댓글을 달아 주세요

  1. Favicon of http://www.dklee.net BlogIcon DKLEE 2009.06.03 07:13  댓글주소  수정/삭제  댓글쓰기

    감탄합니다.!!

  2. wing 2010.03.27 09:46  댓글주소  수정/삭제  댓글쓰기

    감사합니다

  3. Favicon of http://7096.nmactc.org/louisvuitton.php BlogIcon louis vuitton 2013.07.29 04:24  댓글주소  수정/삭제  댓글쓰기

    눈을 감아봐 입가에 미소가 떠오르면 네가 사랑하는 그 사람이 널 사랑하고 있는거야.

  4. Favicon of http://8983 BlogIcon nike air max uk 2013.08.04 01:22  댓글주소  수정/삭제  댓글쓰기

    희미한 달빛이 샘물 위에 떠있으면,나는 너를 생각한다.

  5. Favicon of http://8918 BlogIcon Michael Kors outlet 2013.08.04 05:46  댓글주소  수정/삭제  댓글쓰기

    태양이 바다에 미광을 비추면,나는 너를 생각한다.

안녕하세요? 맨날맑음 입니다.
테이블 프레임(뼈대) 제작


아크릴,적외선카메라, 빔프로젝터가 준비된 상황에서 이제 이것들을 지지해 줄수있는 프레임이 필요했습니다.
프레임 설계에 있어 우선적으로 고려한점을 알아보면,
ㆍ 아크릴과, 빔프로젝터, 컴퓨터의 무게를 버틸 수 있는 튼튼한 재료
ㆍ 빔프로젝터의 영상이 아크릴에 가득 영사 될 수 있는 적당한 높이
ㆍ 적외선 카메라가 아크릴의 전체 영역을 볼 수 있는 적당한 높이

이 중 적당한 높이를 실제 테스트 전에는 정확히 알기 힘들기 때문에, 높이를 쉽게 조절 할 수 있는 방법을 택하기로하고 그 재료로써 위의 3가지 조건을 모두 만족시키는 '알루미늄 프로파일'을 선택하게 되었습니다.
이렇게 프레임 제작에 대략 10만원 가량 소요되었습니다.
조립한 프레임에 아크릴과 빔프로젝터 그리고 적외선 카메라를 올려서, 높이 및 크기를 여러번 조정하셔야 합니다.
                                                                   - 완성된 프레임 -

LED 회로 만들기와 설치
처음 테스트시엔 LED를 납땜으로 연결하였지만 LED의 간격이 1.5cm로 가깝기 때문에 굳이 몸에 좋지 않은 남땜질 보다는 LED 선을 꼬아서 연결하기로 하였습니다. LED 7개와 3.3 저항 하나를 한 세트로 만들어 여러개를 연결시켰습니다. 구멍의 개수로 인해 3~4개의 LED를 연결해야 할 때가 있는데 이 때는 100 저항 하나를 연결하여 사용하였습니다.

 다음 그림은 만드는 순서입니다.


1. LED를 -, + 순으로 공구를 사용하여 꼬아줍니다.
   7개 직렬을 1셋트로 구성하였습니다.
   ※ +,- 구분을 꼬아놓으면 해깔리기 때문에 전구
       머리부분을 보고 동그란면이 + 평평한면이 -로
       구분하시면 편합니다.

2. 끝부분에 저항을 연결합니다. 꼬아있는 부분끼리
   닿아서  합선되는 것을 막기위해 절연테입으로
   감았습니다.


3. 전선을 연결합니다. +, -가 구분될 수 있도록 색을
   다르게 하는것이 나중에 해깔리지 않습니다.




4. 전선을 연결한 부분을 수축튜브로
    감싸주었습니다.



5. 구멍뚫은 20mm앵글에 넣어줍니다.





6. 테이프로 고정해 놓았습니다.
   지금은 글루건으로 잘 마무리 했습니다.





7. 아크릴에 20mm앵글을 옆명에서 부착합니다.
   이때 전구가 아크릴의 중앙을 잘 비출 수 있게
   조절합니다.






8. 선정리 및 마무리

Posted by 맨날맑음

댓글을 달아 주세요

  1. Favicon of http://lsea.tistory.com BlogIcon 사랑海 2009.12.16 19:17  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.
    저도 멀티터치스크린 제작중입니다.
    다름이 아니고 저랑 같은 IR LED모델을 쓰셨는데요
    저는 8개 한 세트로해서 2옴의 저항으로 쓰고 있습니다. 1.4~1.5볼트가 개당 먹구요.
    근데 구성해놓고 테스트하다가 보니 조도가 약해져서 확인해보니
    다수의 LED세트중 하나 두개가 나가버려서 세트 전체가 불이 안들어오는데요 이런 적 없으셨는지요?

    • Favicon of https://crynut84.tistory.com BlogIcon 맨날맑음 2009.12.19 01:07 신고  댓글주소  수정/삭제

      사랑海님 안녕하세요?
      8개가 한세트인데.. 그중에 1개가 나가면 8개가 전부 나간다는것을 말씀하시는건가요?

      8개 직렬을 한세트로 구성하면 1개가 나가면 8개 전부 나가는것이 맞습니다. 하지만 다른 세트에는 영향이 없지요(세트간에는 병렬구성이기에..)

      그리고 저는 저 구성으로 3일씩 켜놓아도 LED가 나간적은 없었습니다. 가끔 합선으로인해 ㅠ 참사가 나긴했지만요..
      멋진 프로젝트 만드시길 바랄께요^^

  2. Favicon of https://lsea.tistory.com BlogIcon 사랑海 2009.12.20 12:03 신고  댓글주소  수정/삭제  댓글쓰기

    답변 감사해요 ㅎㅎ
    스펙을 보니깐 맥시멈 전류가 100mA이고 따로 적정 전류값을 안적어놨는데 그 스펙에는 다 50mA로 했더군요..
    전류와 전압 그래프를보니깐 100mA부터는 LED애들을 노가다를 하도 시켜서 다이오드가 타들어가는 상태드라구요; 그래서 죽도록 일시키니깐 하다 둘식 나간것 같습니다 ㅠ_ㅠ;
    그래서 50mA로 계산을 해 보니 8개 1Set의 적정 저항이 32.5옴이 나오드라구요 그래서 30옴 붙여서 테스트 해봤는데 이놈들이 안죽네요;
    그 전에 노가다 했다고 30옴 줘도 나가는 녀석들만 교체하고 그 이후는 별 문제 없네요;


안녕하세요? 맨날맑음 입니다.
FTIR 현상이 일어나게 하기 위하여 적외선LED(IR LED)를 구성하는 방법을 알아보겠습니다.
재료로 적외선 LED와 전반사를 잘 일으키는 매질중 하나인 아크릴판이 필요합니다.

적외선 LED(IR LED)

  - 적외선 LED의 스펙에 따라 터치성능에 많은 영향을 미치게 됩니다. 일단 LED의 확산성과 직진성이 성능에
    많은 영향을 끼치게 됩니다. IR LED의 구매에서 어려움이 많았는데요; 일단 오프라인으로 구할 만한 판매처가 
    없었습니다.(이곳 지역이 천안이라서 그런걸지도;) 저희가 알아낸 오프라인 판매처는 용산 전자상가, 청계천
    정도가 있습니다.  대신 온라인 판매처가 몇군데 있는데 외국 쇼핑몰로 Digikey가 있으며, 국내 쇼핑몰에는 
    iC114가 있습니다.    
    저희는 해외 결재의 어려움이 있어서, 국내 사이트를 이용했으며, SI5312-H모델을 사용하였습니다. 이 모델의
    자세한 스펙은 이곳을 참고 하시면 됩니다. 구성에 따라 다르지만 아크릴의 옆면에 15mm 간격으로 led를
    장착한다면 예비까지해서 약 250개 정도의 led가 있어야 합니다(4방향 모두 장착했을시..)

LED 전원 공급장치

   - LED 전원 공급으로 SMPS(Switching mode power supply)를 사용 하였습니다.
     LED 전원 공급장치로 PC에  사용하는 파워서플라이를 사용해도 되지만, 간단히 쓸수 있는 위 모델을 발견
    하여 선택하게 되었습니다.(모델명 : MP30W12V) 구매가격 : 약 20,000원

아크릴 판
  - 아크릴판은 천안의 아크릴 가공점에 가서 쉽게 구입 하였습니다. 아크릴 가공하는 업체는 여러곳에 있으니 
    쉽게 구입하실 수 있을것이라 생각됩니다. 아크릴의 전반사는 두께 8mm이상일때 가장 잘 일어납니다
    그래서 저희는 가로800*세로600*두께10mm짜리를 구매하였습니다. 아크릴 구매시 옆면을 투명하게 가공
    여 달라고 해야합니다. 그래야만 led를 옆면에서 투과 시켰을 경우 빛이 잘 들어가게 됩니다.
    업체에 따라 가격이 다르겠지만 저희는 약 45,000원에 구매를 했습니다.
    사진에서의 아크릴은 나중에 설명하겠지만, 아래에 트레싱지를 붙이고 테두리에 알루미늄테이프를 붙인
    모습입니다. 원래 처음 구입하면 투명한 모습입니다.


LED 회로구성
  - LED와 전원 공급 장치가 있다면 회로 구성을 해야 합니다. 전원과 LED의 스펙을 확인 하시고 V=IR의 공식에 
    맞도록 구성 하시면 되는데, 이런 간단한 구성도 하드웨어를 처음 접하는 저에게는 난관이었습니다. 
    LED Center라는 사이트에서 전압과 저항 갯수를 입력하면, 회로로 구성해 주어서 도움을 받았습니다.
    위의 회로처럼 9개를 직렬구성에 3.3옴짜리 저항을 1셋트로 하여 병렬 구성을 할 수 있습니다. 실험 결과
    LED가 7개를 1셋트로 구성하여도 터지거나 하지 않아 밝기를 높이기 위해 7개를 선택 하였습니다.


아크릴판과 LED회로 고정
                                                   - 2mm앵글에 구멍을 뚫은 모습 -
  - 이제 각종 재료와 정보를 알았으므로, 아크릴판의 옆면에 LED를 고정 시켜야 합니다. LED를 아크릴판 
    옆면에 고정 시키는 방법은 여러 방식이 있을 수 있지만, 우리는 20mm 앵글을 사용하여, 15mm간격으로
    구멍을 뚫어서 LED를 고정 시켰습니다. 앵글 구매는 '프로파일'가공해 주는 가게에서 할 수 있으며, 아마도 그
    곳에서 구멍을 뚫어주지 않을 수도 있습니다. 저희는 직접 핸드드릴을 이용하여 가공하였습니다. 20mm앵글의
    길이는 800mm 두개 570mm 두개를 사용하여 아크릴판의 둘레를 완전히 감쌀 수 있도록 구현 하였습니다.
    이 이외에도 아크릴 옆면에 직접 5φ짜리 구멍을 내어 LED를 그안에 넣는 방법을 사용 할 수도 있습니다.


다음번 포스팅에선 전체적인 프레임(뼈대), 적외선 카메라 및 빔프로젝터 배치에 대해 알아보겠습니다.
 ※ 글내용중 등장하는 쇼핑몰이나 부품의 특정 모델들은 단지 제가 사용해 본 제품일 뿐이지
     맨날맑음과는 전혀 관계 없음을 먼저 밝힙니다 ※
Posted by 맨날맑음

댓글을 달아 주세요

  1. Favicon of http://www.dklee.net BlogIcon DKLEE 2009.05.21 22:36  댓글주소  수정/삭제  댓글쓰기

    시연은 언제쯤 볼 수 있을까요?

  2. Favicon of http://erniea.net/ BlogIcon erniea 2009.06.11 20:18  댓글주소  수정/삭제  댓글쓰기

    안녕하세요-
    FTIR 터치 스크린을 만들게 됐는데;; 아크릴판에 대해 질문좀 드릴게요.
    외국 포럼에서 보니까 compliant surface에 대해 얘기가 많던데,

    그냥 트레이싱지만 붙여도 잘 작동하나요?
    아니면 어떻게 처리 하셨는지요?
    혹은 반투명한 실리콘 고무 등을 사용하면 어떻게 될까요?

    • Favicon of https://crynut84.tistory.com BlogIcon 맨날맑음 2009.06.12 13:42 신고  댓글주소  수정/삭제

      빔프로젝터 영상을 영사하기 위한 방법으로 저희는 트레싱지를 사용하였습니다. 트레싱지 외에 전문 영사지를 사용하셔도 되지만 가격이 꽤 고가입니다. 저희는 트레싱지를 사용하였지만 만족할 만큼 뚜렷하게 화면이 영사되어 가격이 저렴한 트레싱지를 사용하였습니다. 좋은 하루되시고 FTIR 만드신다니 도움이 되었으면 좋겠네요^^

    • Favicon of http://erniea.net/ BlogIcon erniea 2009.06.12 20:51  댓글주소  수정/삭제

      감사합니다~
      앞으로 제작하는 기간동안 종종 와서 질문 드릴게요;;

  3. BlogIcon Rainey 2010.04.17 00:30  댓글주소  수정/삭제  댓글쓰기

    880nm OSRAM SFH485P LEDs 온라인으로 구매하였고,
    18" 24" 아크릴 판을 이용하는데, 80개 LED를 사용할 예정입니다. (1인치 간격으로요!)
    회로 구성하는데 도움주시면 감사.
    체크해주신 사이트는 봤는데,
    제가 전기쪽으로는 문외한이라 정말 어렵네요.
    현재 뉴욕에서 마스터 과정을 하고 있는데, nui group 사이트와 맨날 맑음님의 사이트를 계속 공부하면서 portable multitouch screen을 제작하는 중에 있습니다.
    혹시 회로 구성을 어찌해야 하는 지 도움 주시면 정말 고맙겠습니다.
    resistor는 어떤것을 사애 하는지 파워서플라이는 어떤것을 사야 하는지.
    사진올려놓으신 것이 어렵게 보이지 않아 시작했는데, LED 파트가 난관이네요. 학교 프로젝트로 시작한것이라 빨리 마무리하고 소프트웨어도 시작해야 하거든요. 그럼 회신 부탁드립니다. 감사.

    • Favicon of http://crynut84.tistory.com BlogIcon 맨날맑음 2010.04.19 23:35  댓글주소  수정/삭제

      안녕하세요?
      위의 사이트만 참고하시면 쉽게 해결하실 수 있습니다.
      좀 더 도움이 필요하시다면, 함께 프로젝트를 진행한 동료의 블로그에 더 많은 정보가 있으니 링크 드릴께요!! http://shine10e.textcube.com/47 좋은 하루 되세요!!


안녕하세요? 맨날맑음 입니다.
FTIR 방식의 Multi Touch Screen의 주요 부품인 적외선 카메라 제작하는 방법을 알아 보겠습니다.
적외선 카메라를 직접 구매하여 할수도 있겠지만 적외선 카메라의 경우 비교적 고가이기 때문에 학생 신분에서
저렴하게 구입 할 수 있는 캠을 사용하여 개조하는 방법을 썻습니다.


T9T9 Research Center 블로그를 통해
여러 캠들 중  V-GEAR TALKCAM TRACER CCD 모델이
개조가 쉽다는 정보를 얻어, 캠을 구매 하였습니다.



  일반적인 캠에는 적외선을 차단하는 렌즈가 있습니다. 우리는 적외선을 받아들이는 적외선 카메라를
  제작해야 하기 때문에 적외선 차단 렌즈를 제거 해야 합니다.
  또한 가시광선을 받아들여서는 안되기 때문에 가시광선 차단 필터를 부착해야 합니다.

적외선 차단 렌즈 제거

캠의 렌즈부분을 손으로 돌리면(시계 반대방향) 쉽게 좌측과 같이 분리가 됩니다.
잘 보이지 않지만 맨 윗부분 적색으로 보이는 부분적외선 차단 렌즈입니다.
렌즈 제거는 속에 있는 다른 렌즈가 다치지 않도록 렌즈에 압력을 가해 깨면 됩니다.
렌즈위에 투명테잎을 붙이면 렌즈 파편을 쉽게 제거 할 수 있습니다(T9T9 블로그 참조)



가시광선 차단 필터 장착
가시광선을 차단하기 위하여 일반인도 쉽게 구할 수 있는 카메라의 필름을 사용 할 수 있습니다.
적외선 차단 렌즈를 제거한 자리에 필름을 알맞은 크기로 잘라 넣어 줍니다. 
 주의하실 점은 필름은 새필름이 아닌 '현상'한 필름을 써야 합니다.(요즘 필름을 안써서 현상한 필름 구하는것도 쉽지 않더군요;;) 사진관에서 현상하고 남은 걸 얻어오시거나 새 필름을 그냥 현상해 달라고하셔야 합니다.

      
           필름을 붙여서 테스트를 해보고, 가시광선 양에 따라
           2장을 곂쳐 붙이셔도 됩니다.
           저희 같은 경우는 필름을 두장 곂쳐 붙였더니 그제서야
           잘되는 것을 확인 하였습니다.
                                                                                                   - 필름을 카메라 렌즈에 붙인 모습 - 
                                      
최종 완성된 적외선카메라로 본 영상
팔에 있는 핏줄이 다 보여서 좀 징그럽습니다; 아마도 적외선의 영향이겠죠?
Posted by 맨날맑음

댓글을 달아 주세요


안녕하세요? 맨날맑음입니다.
Multi Touch Screen을 구현하기 위해서 멀티터치 스크린의 동작 원리를 이해하는 것이 필요합니다.




터치 스크린을 구현하는 방법에는 감압 방식(Resistive/Pressure Sensitive), 전압 방식(Capacitive/Electrostatic), 적외선 방식(Infrared)로 크게 3가지 방식이 있습니다.

감압방식은 핸드폰에서 많이 사용하는 방식입니다. 다른 터치 방법에 비해 가격이 저렴하고 뛰어난 내구성과 긴 수명을 가지고 있습니다. 감압방식의 5-wire 타입의 경우 3500만번의 터치를 수명으로 가지고 있다고 합니다.

이 방식의 원리는
오른쪽의 그림처럼 2개의 레이어
사이에  플라스틱으로 이루어진 점이 존재 합니다.
 이 점을 이용하여 압력이 가해지면 전기 신호가 흐르게 되고 전기 신호를 인식하여 터치가 된 위치를 알수 있습니다.
 이 방식의 단점은 멀티터치가 불가능 하다는 것입니다. 한번에 하나의 신호만을 측정하기 떄문에 멀티터치를 구현할 수 없습니다. 또한 이것은 장점이자 단점이 될 수 있는데요. 압력을 이용하기 때문에 다른 도구를 사용할수 있는 장점이 있구요, 다르게 생각하자면 손이 아닌 다른것에 눌려 원치않는 조작이 일어 날 수 있다고도 생각해 볼수 있습니다.



두번째 방법으로는 전압 방식이 있습니다. 
손가락이나 기타 전기가 흐를수 있는 물체(도체)를 이용하는 방법입니다. 전기가 흐르는 물체가 스크린을 터치하게 되면 스크린에 흐르고 있던 전기의 흐름을 방해하여 바뀌게 됩니다.
바뀐 전기의 흐름을 인식하여 터치의 위치를 알 수 있습니다.  전압방식은 가격이 비싸다는 단점이 있습니다. 하지만 멀티터치를 지원하고 2억 2500만번의 터치를 할수 있는 내구성이 장점입니다.





마지막으로 우리가 사용할 적외선 방식입니다.

적외선 방식은 광학 방식과 열감지 방식이 있습니다.

광학방식은 사람에게는 보이지 않는 적외선빔을 사용합니다. 오른쪽의 그림처럼 보이지 않는 격자로 구성한 스크린 위쪽과 주변에 센서를 배치시켜 터치가 이루어지면 센서로 적외선을 인식하여 위치를 파악할수 있습니다. 적외선방식의 단점이라면 가장 큰 비용이라고 할수 있고, 또한 주변에서 나오는 적외선때문에 빛이 강한곳에서는 터치가 원활하지 않다는 단점이 있습니다,



터치의 여러 방식에 관해 알아보았으니 이제 우리가 사용할 FTIR방식에 대해 알아보겠습니다.
FTIR방식은 빛의 전반사를 이용 합니다. 전반사는 빛이 밀한 매질(굴절률이 큰)에서 소한 매질(굴절률이 작은)로 입사할때, 입사각이 특정 각도 이상이면 그 경계면에서 빛이 모두 반사되는 현상을 말하는 것입니다.

우리가 사용할 멀티터치 스크린은 기본적으로 아크릴적외선 LED, 적외선 CAM, 거울을 사용하여 아래와 같이 구현하게 될것입니다.


그림에 설명 되어 있지만, 간단히 설명을 붙이자면 아크릴에 적외선 LED가 적외선을 발사(?)하고
터치가 일어날 경우에 그 적외선이 손을 만나 전반사를 일으키게 됩니다. 그렇게 들어온 적외선을 거울과 CAM을 사용하여 인식하여 최종적으로 터치를 감지 하게 됩니다.
Posted by 맨날맑음

댓글을 달아 주세요


안녕하세요? 맨날맑음 입니다.
UX라고 하면 사용자가 제품을 사용하는 UI로 이루어 지는 경우가 많이 있습니다.
그중 우리는 최근 많이 사용되는 멀티 터치를 사용하여 흥미와 좀더 조작하기 쉬운 직관적인 인터페이스로 사용자들의 참여를 유도해 보려고 합니다.

현재 우리가 만들려고 하는 멀티 터치형 테이블탑(?) 형식의 컴퓨터는 이미 작년에 MS사에서 Surface 라는 제품을 상용화 하였구요.(대략 1000만원) 터치 방식은 ipot이나 각종 휴대폰에도 많이 적용되어 친숙해진 상태입니다.

터치를 인식하는 방법은 적외선의 전반사를 이용한 FTIR(Frustated Total Internal Reflection) 현상을 이용할 생각이구요.

아직 구체적인 하드웨어 스펙은 정해지지 않았지만 800*600정도의 대형 스크린으로 구현할 생각입니다.

앞으로 6월 중순까지(약 3개월)간 진행할 프로젝트이고 하드웨어나 소프트웨어 구현 중간중간 진행사항을 포스팅하도록 하겠습니다.

 이미 FTIR 방식은 많이 알려진 방식이지만 구체적인 하드웨어 스펙(저는 소프트웨어만 다뤄보아서)에 대한 정보는 얻기 힘들더군요..

 그리고 소프트웨어로는 구체적으로 정하지는 않았지만 멀티 터치를 활용할 수 있는 실용적인 컨텐츠로 구현해 보려고 합니다.

 지금은 자료 수집 중이고요 각 부품들의 자세한 스펙은 다음주에 부품들을 구입하여 만들어 보는대로 다시 포스팅 하겠습니다. 


영상1. Microsoft Surface. 출처 : http://blog.naver.com/clover0513/58078413

Posted by 맨날맑음

댓글을 달아 주세요