웹캠으로 만드는 플래시 센서 박스(Flash Sensor Box) 입니다.


[사진1] 플래시 센서박스 - 뽀샤시 이미지


플래시는 현존 최고의 UI 구현용 개발환경 중 하나일 것입니다.
하지만, 모니터와 키보드, 그리고 마우스라는 인터페이스 요소의 한계가 분명히 존재합니다. 최근에는 기능이 보강되면서 웹캠등의 장치를 이용할 수 있게되었고, 소켓통신이 가능해지는 등 여러가지 외장 디바이스와 연동할 수 있는 방법이 생겨나게 되었습니다.

그럼에도,  조이스틱, 시리얼통신, 블루투스통신 등이 지원되지 않는것은 여전합니다. 특히 시리얼 통신은 디지탈 기기간의 데이타 통신을 위한 가장 기초적인 통신 수단임에도 지원되지 않고 있으므로 직접 제작한 장치와 플래시를 연동하려 할때 번거로운 단계를 거쳐야 하는 상황입니다.

즉, 시리얼 통신을 위해서 소켓통신을 해야하는 상황이고,  이를 위한 중계 프로그램(시리얼:소켓통신 변환)을 별도로 실행하고 부가적인 설정작업이 필요합니다. 뿐만 아니라 최근에는 시리얼포트가 아예 없는 PC나 노트북이 대부분인지라 USB to Serial 변환기를 구입해야합니다.

그뿐이 아닙니다. 센서 입력값을 처리해서 시리얼통신으로 보내주는 MCU(마이크로 컨트롤러 유닛:소형임베디드컴퓨터)가 필요합니다. 정리하면, 가령 직접 제작한 스위치 입력을 플래시에서 감지하기 위해서 아래의 절차와 구성품이 필요합니다.

MCU(AVR,PIC,Arm등의 소형 임베디드 컴퓨터)의 장치에 스위치를 연결하고,
스위치 작동값을 이 MCU가 감지한 결과를 시리얼 통신으로 PC에 전달하면,
PC에선 이를 게이트웨이 프로그램을 경유하여 소켓통신으로 플래시에 전달하고,
이를 감지하게 된다는 구조입니다.

스위치 한개 입력 받으려고, 중계소프트웨어, 중계소형컴퓨터, 중계시리얼변환기가 필요하다는 얘기입니다.
정밀한 제어가 아닌 미디어 아트나 실험적 외장디바이스의 연동을 위해서 사용되는 자원치고는 낭비가 많습니다.
미디어 아트를 제작하려는 많은 분들은 이런 번거로운 절차를 거쳐서야 비로소 아트를 시작할 수 있게됩니다.
때문에 아트 좀 하려고 전자공학을 공부해야 할 판입니다.

때문에 이를 개선 할 방법을 고안하다가 만들게 된 것중 하나가 플래시 센서박스입니다.(다른것도 있습니다)
본래 웹캠에서 캡쳐된 이미지를 실시간 영상처리하는 부분을 제작하다가 아이디어를 얻어서 만들게 되었는데요,
(참고적으로 요즘? 유행하고 있는 AR증강현실도 바로 웹캠을 응용하는 좋은 예 입니다.)

즉, 스위치 입력같은 외부 신호를 카메라 영상으로 캡쳐한 뒤 감지한다는 겁니다.

작동 원리는 매우 간단합니다.
센서나 스위치의 입력값에 해당하는 수치를 LED(발광다이오드)의 ON OFF나 밝기 정보로 변환하고
플래시는 웹캠에서 캡쳐한 이미지로 이를 감지한다는 것입니다.

이것으로 <THE END>. 끝입니다.

LED 켜고 끌 수 있는 정도의 전자회로 지식만으로 회로를 꾸밀 수 있습니다.
나머지는, 플래시 측에서 웹캠 이미지를 읽어서 약간의 해석작업을 해주면 됩니다.
이부분은 플래시 개발자 분들이라면 누구나 하실 수 있을겁니다.

최근 저가형 웹캠의 가격이 1만원 내외로 구매가 가능하므로, 여러용도로 활용하는데 부담이 없습니다.
게다가 아무리 사양이 떨어지는 웹캠이라도 35만화소 이상의 해상도를 갖고 있으므로
스위치 수십개 입력정도는 플래시에서 지원되는 어떤 범용 웹캠이라도 가능합니다.

장점
1. 시리얼통신 미사용 및 USB2Serial변환기 불필요
2. 게이트웨이 중계 프로그램 불필요.
3. MCU같은 별도의 컨트롤러 불필요
4. 100개 이상의 스위치 입력 가능  (이경우 일반 MCU로 구현하는것보다 비용도 절약되고 훨씬 수월합니다.)
5. 플래시 이벤트 지원 (프로그래머 입장에선 MouseDown 이벤트와 같은 방식으로 이용가능합니다.)

재료
: 웹캠까지 포함해서 재료비는 1~2만원 정도로 제작 가능합니다.

1. 웹캠
2. 스위치(or 센서)
3. LED보드: 회로기판에 필요한 수량의 LED를 장착합니다.
4. 센서박스: 속이 검은 박스를 구성합니다. 상자가 아니더라도 외부광을 차단할 수 있는 공간이면 됩니다.
 

작동 흐름도

1. 스위치나 센서가 On/ Off 됩니다.
2. 스위치나 센서 상태에 따라 LED가 On/Off 됩니다.
3. 암실에 설치된 웹캠에서 LED 이미지를 캡쳐합니다.
4. 캡쳐된 이미지를 해석하여 스위치나 센서의 On/Off 상태를 감지합니다.
5. 적절한 상태 변수값 변경 or 이벤트를 발생합니다.

구현 팁

1. 일반 LED들이 보통 2V정도의 전압에서 작동되므로 사용 전원에 따른 전류 제한용 저항이 필요하게됩니다.
 하지만 일부 특수 LED들은 1.5V건전지를 직결하여 작동하므로 저항없이 건전지 한개로 ON/OFF스위치 구현이 가능합니다.
 
2. 소수의 LED를 사용한다면, 각각의 간격을 충분히 넓혀서 서로간의 간섭을 없앨 수 있습니다.(빛이 너무 밝으면 번집니다.)
 하지만 수십개의 LED를 사용한다면 서로간의 간격을 넓히기 곤란하며, 또한 사용하는 건전지나 전원의 전압이 변동되면 ON되어 있는 LED 수량에 따라  밝기가 변하곤 할 수 있습니다.  이때는 정전류 회로를 이용하여 전압이나 다른 LED 작동상태에 무관하게 일정한 밝기를 유지할 수 있습니다.
 
 
응용분야

플래시를 이용하는 미디어 아트, 로보틱스, 게임 등


기타
당연한 얘기지만, 플래시가 아닌 다른 언어환경에서도 웹캠 이미지 캡쳐만 가능하다면 사용가능합니다.


실제 구현 사례

1단계. 범용 LED 드라이버 회로로 제작
센서박스 초기버전은 일반 LED를 트랜지스터 하나로 구동하는 회로로 구성을 하였습니다.
트랜지스터(C1815나 C536등의 범용 TR) 1개와 전류제한 저항을 사용하는 회로입니다.
Base 입력에 스위치를 연결하고,  Collector단에  저항과 LED를 연결하는 일반적인 LED 구동 회로 입니다.
하지만 개수가 여럿이 될때 문제가 발생하더군요;; 바로 LED 밝기가 사용되는 전력량에 따라 변한다는것 입니다.
이를 개선하는 방법이 정전류 구동회로입니다.

2단계. IRED와 정전류 구동회로로 제작

정전류 구동회로란 구동 전압이 다소 변화 하더라도 일정한 량의 전류 흐름을 유지하는 회로입니다.
즉, 주변 상황에 따른 LED밝기의 변화를 매우 작게 할 수 있는 고급 회로 입니다. 엄청 복잡한 회로 가 될 것 같은데요,,, 실은 전류 제한용 저항의 위치만 달라질 뿐 일반적인 LED 구동회로와 유사합니다.  즉, 저항은 Collector단에 연결하지 않고,  Emiter에 연결하게됩니다.

그리고, 제 경우 건전지 한개로 작동하기 위해 1.2~1.7V 에서 작동되는 IRED를 사용하였으며, 전류량은 LED한개당 1mA 이하로 유지하였습니다.  보통 LED 구동시 전류량이 20mA 안팍인데요, 이렇게 저전류를 사용하면 오히려 장점이 많습니다.  1.5V 전지 한개로 30개의 LED를 구동하여도 30mA가 안되므로 전력소모가 적습니다. 또한 빛의 밝기를 제한하므로 바로옆에 붙어있는 또다른 LED와의 빛 번짐 현상에 따른 간섭도 없어지게 됩니다.



사진2. 웹캠이 내장되어있고 USB라인을 컴퓨터에 연결한 뒤 스위치를 누르면 작동합니다.


사진3. 내부에는 LED 장착 보드가 있습니다.


사진3. 플래시에서 캡쳐된 이미지 예




동영상1. 각각의  LED의 영역을 설정해주는 화면




참고자료
웹캠 캡쳐 및 영상처리가 처음이신 분들을 위한 간단한 발광점 찾기 예제를 첨부하였습니다.  배경을 어둡게 한 상태에서 LED나 후레쉬를 이용하여 발광점의 인식을 확인해 보실 수 있습니다.
MinimalComps 꽤 쓸만한데, 한글을 입력하면 아예 안보인다. 
하지만  아래와 같이 Style.as 파일을 수정하면, 한글을 사용할 수 있다.
임베디드 한글폰트도 사용할 수 있지만,  용량이 6MByte정도 불어버린다.  ;;;   포기하고 그냥 시스템 폰트를 사용해보자.


package com.bit101.components
{
    public class Style
    {
        public static var BACKGROUND:uint = 0xCCCCCC;
        public static var BUTTON_FACE:uint = 0xFFFFFF;
        public static var INPUT_TEXT:uint = 0x333333;
        public static var LABEL_TEXT:uint = 0x666666;
        public static var DROPSHADOW:uint = 0x000000;
        public static var PANEL:uint = 0xF3F3F3;
        public static var PROGRESS_BAR:uint = 0xFFFFFF;
       
        //public static var embedFonts:Boolean = true;  // 초기값 본래는 RF Rnda Seven라는 임베디드 폰트를 사용한다.
        public static var embedFonts:Boolean = false;  // 이걸 false로 해줘야함.
        public static var fontName:String = "굴림";  // 사용하려는 시스템 폰트명
        public static var fontSize:Number = 10;
    }
}
bit101의 MinimalComps  미니멀리즘?(단순깔끔) 디자인 컴포넌트 를 사용하는데  폰트가 안보이는 현상이 발견되어 자료를 찾아봤는데요, SDK버젼에 따라 Component.as 파일을 수정해서 사용해야 한다는 결론입니다.
컴파일 버전(SWC) 사용시 swc 0.9.5 버젼에선 정상작동하는것을 확인했고요,
소스 버전의 경우엔  제가 사용하는 Flex 4 SDK 에 맞게 주석을 제거한 후 정상적으로 폰트가 보입니다.
요점은 새로운 폰트 버전이 기본값으로 사용되게 되어있는 SDK4부터는  기존 버전의 폰트들을 사용시엔 별도 옵션을 지정해야하는것 이겠네요 ->    embedAsCFF="false"

    public class Component extends Sprite
    {
        // NOTE: Flex 4 introduces DefineFont4, which is used by default and does not work in native text fields.
        // Use the embedAsCFF="false" param to switch back to DefineFont4. In earlier Flex 4 SDKs this was cff="false".
        // So if you are using the Flex 3.x sdk compiler, switch the embed statment below to expose the correct version.
       
        // Flex 4.x sdk:
    [Embed(source="/assets/pf_ronda_seven.ttf", embedAsCFF="false", fontName="PF Ronda Seven", mimeType="application/x-font")]
        // Flex 3.x sdk:
//        [Embed(source="/assets/pf_ronda_seven.ttf", fontName="PF Ronda Seven", mimeType="application/x-font")]



참고URL: http://www.bit-101.com/blog/?p=2555

+ Recent posts