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

닷넷의 리플렉션(Reflection)을 이용하면 어셈블리의 메터데이터 정보를 알아올 수 있고, 이를 이용해 지연바인딩(Lazy Binding)이나 동적으로 코드를 생성할 수 있습니다. 이번 포스팅에서는 리플렉션을 이용한 동적 코드생성에 대해 알아 보도록 하겠습니다.

 

간단한 예제를 통해 동적 코드생성에 대해 알아 볼 텐데요. 예제는 어셈블리를 동적으로 생성/실행하는 콘솔어플리케이션 프로젝트(App)와, 동적으로 코드를 생성하는 클래스 라이브러리 프로젝트(CodeGenerator)로 구성 됩니다.

CodeGenerator 클래스에서는 동적으로 DynamicAssembly를 생성하고, DynamicClass, DynamicMethod를 만들어 그 안에 "Dynamic Method Call"이라는 메시지를 프린트하는 코드를 작성하게 만들도록 하겠습니다.

 

  1. 파일 -> 새로 만들기 -> 프로젝트를 선택하여 빈 솔루션을 생성합니다.
  2. 솔루션 탐색기의 솔루션 탭을 마우스 오른쪽 클릭하여, 콘솔어플리케이션 프로젝트(App)와 클래스라이브러리 프로젝트(CodeGenerator)를 생성합니다.
  3. Programe.cs 와 Class1.cs의 이름을 각각 App와 CodeGenerator로 변경합니다.

#1. CodeGenerator 클래스 작성

CodeGenerator.cs에 다음의 코드를 입력합니다.

public class CodeGenerator
{
    public Type DynamicType { getprivate set; }
    public CodeGenerator()
    {
        //현재 어플리케이션 도매인을 가져온다.
        AppDomain currentDomain = AppDomain.CurrentDomain;
        //생성하려는 어셈블리의 이름을 설정한다.
        AssemblyName assemName = new AssemblyName("DynamicAssembly");         //어셈블리를 생성         AssemblyBuilder assemBuilder = currentDomain.DefineDynamicAssembly(assemName, AssemblyBuilderAccess.Run);
        //모듈 생성         ModuleBuilder moduleBuilder = assemBuilder.DefineDynamicModule("DynamicModule");         //클래스 생성         TypeBuilder typeBuilder = moduleBuilder.DefineType("DynamicClass"TypeAttributes.Public);         //메서드 생성         MethodBuilder methodBuilder = typeBuilder.DefineMethod("DynamicMethod"MethodAttributes.Public, nullnull);         //동적 코드 생성         ILGenerator msil = methodBuilder.GetILGenerator();         msil.EmitWriteLine("Dynamic Method Call");         msil.Emit(OpCodes.Ret);         //타입 정보 저장     DynamicType = typeBuilder.CreateType();     }
}

 

DynamicType이라는 필드가 있고, 이 필드는 동적으로 생성 할 Class의 Type을 저장하는 용도로 쓰입니다. 생성자에서는 동적으로 코드를 생성하기 위한 단계를 진행하는데요. 어셈블리->모듈->클래스->메서드->코드 생성의 단계로 진행을 하게 됩니다. 마지막에 보이는 ILGenerator 클래스를 이용하여 msil코드를 생성 할 수 있게 됩니다. 예제에서는 간단히 EmitWriteLine 메서드를 이용하여 "Dynamic Method Call"이라는 문자열을 화면에 뿌리는 코드를 생성 하였습니다.

 

#2. App 클래스 작성

App프로젝트로에서 CodeGenerator 프로젝트를 참조 추가 합니다.


				

App.cs 에 다음의 코드를 추가합니다.

class App
{
    static void Main(string[] args)
    {
        //CodeGenerator클래스 생성
        CodeGenerator.CodeGenerator codeGenerator = new CodeGenerator.CodeGenerator();
        //동적으로 추가 한 Type을 얻어옴
        Type DynamicType = codeGenerator.DynamicType;
        //Activator 클래스를 이용하여 인스턴스 생성
        object obj = Activator.CreateInstance(DynamicType);
        //동적으로 생성한 메소드를 얻어옴
        MethodInfo methodInfo = DynamicType.GetMethod("DynamicMethod");
        //실행
        methodInfo.Invoke(obj, null);
    } }

Main메서드의 로직은 간단합니다. 우선 CodeGenerator 클래스의 public 필드인 DynamicType에서 동적으로 생성한 Class의 Type을 얻어옵니다. Activator 클래스를 이용하여 클래스의 인스턴스를 생성하고, MethodInfo 클래스로 미리 생성한 DynamicMethod를 얻어와 실행합니다.

 

실행결과는 Dynamic Method Call이 나오면 의도한 결과이겠죠?

 


				

이상 동적으로 코드를 생성하고, Reflection을 이용하여 동적으로  인스턴스를 생성 / 실행하는 방법이었습니다. 

감사합니다.

 

소스코드 빌드 환경 : Windows7 x64, Visual Studio2010, .NET Framwork4.0

Posted by 맨날맑음
,

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

일반적으로 실버라이트 프로젝트를 생성하면 위와 같이 두 개의 프로젝트가 생성됩니다. 하나는 실버라이트 프로젝트이고, 하나는 [프로젝트명].[Web]이 붙은 프로젝트인데요. Web이 붙은 프로젝트를 살펴보면 ASP.NET 프로젝트 인 것을 알 수 있습니다. 웹 프로젝트의 .aspx(웹폼)의 소스를 살펴보면 Active-X 처럼 object 태그를 이용하여 실버라이트를 웹 페이지에 로딩하는 것을 볼 수 있습니다.

이와 같이 실버라이트는 웹에서 동작하는 응용프로그램이고, 프로젝트의 상황에 따라 전체 페이지를 실버라이트로 만들 수도 있지만, ASP.NET으로 웹 페이지를 구성하고, 비주얼한 영역만 실버라이트로 제작하는 것이 일반적입니다.

 

이렇게 실버라이트를 웹 페이지의 특정 영역에 올려놓을 경우 실버라이트와 HTML간의 정보교환이라는 이슈가 생기기 마련인데요. 이번 포스팅에서는 실버라이트 <-> HTML 간의 엑세스 방법에 대해 알아보려 합니다.

 

#1. 실버라이트에서 HTML 접근

우선 실버라이트에서 HTML의 요소에 접근하는 방법을 알아 보기 위해서, 간단하게 HTML과 실버라이트에 컨트롤을 배치합니다.

위쪽의 흰색 배경이 HTML영역이고 아래쪽에 푸른 배경이 실버라이트 영역입니다. 위쪽 HTML영역의 글을 텍스트박스에 입력하고, Silverlight 영역의 버튼을 누르면 HTML의 정보를 실버라이트 텍스트박스에 넣는 시나리오 입니다.

 

<UserControl x:Class="HTMLBridge.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    >

    <StackPanel x:Name="LayoutRoot" Background="Azure">
        <TextBlock FontSize="14" Text="Silverlight 
영역"/>

        <StackPanel Orientation="Horizontal">
            <TextBox x:Name="txtHTML" Width="400" /> 
            <Button x:Name="btnGetHTML" 
                   Content="
버튼을 누르면 HTML 접근" 
                   Margin="10,0,0,0" 
                   Click="btnGetHTML_Click" />
        </StackPanel>
    </StackPanel>
</UserControl>

-MainPage.xaml-

 public partial class MainPage : UserControl
 {
     public MainPage()
        {
            InitializeComponent();            
        }
     private void btnGetHTML_Click(object sender, RoutedEventArgs e)
     {
         HtmlDocument htmlDocument = HtmlPage.Document;
         HtmlElement htmlElement = htmlDocument.GetElementById("htmlInputBox");
         string text = htmlElement.GetAttribute("value");

         if(text!=null)
         {
             this.txtHTML.Text = text;
         }
     }

-MainPage.xaml.cs-

<form id="form1" runat="server" style="height:100%">
<h2>HTML
영역</h2>
텍스트
 입력 : <input type="text" id="htmlInputBox" style="width:400px;" /><hr />
<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

……

-HTMLBridgeTestPage.aspx-

XAML에는 컨트롤의 배치가 선언 되어있고 btnGetHTML이라는 이름을 가진 버튼의 Click이벤트 핸들러가 정의되어 있습니다.비하인드 코드가 중요한데요. HtmlDocument 객체를 가져와서 GetElementById 메서드를 이용하여 HTML의 텍스트박스를 얻어 올 수 있습니다. HtmlElement 객체의 GetAttribute는 HTML요소의 속성값을 읽어 올 수 있습니다. 또한 SetPropertySetAttribute 메서드를 이용하여 값을 설정 할 수 있습니다.

실행시켜 보면 위와 같은 결과를 얻을 수 있습니다.

 

또한 HTML의 이벤트도 실버라이트에서 컨트롤 할 수 있는데요. AttachEvent메서드를 이용하면 됩니다.

public MainPage()
{
    InitializeComponent();
    HtmlDocument htmlDocument = HtmlPage.Document;
    HtmlElement htmlElement = htmlDocument.GetElementById("htmlInputBox");
    htmlElement.AttachEvent("onkeyup"new EventHandler(this.OnChange));
}
private void OnChange(object sender, EventArgs e) {     HtmlDocument htmlDocument = HtmlPage.Document;     HtmlElement htmlElement = htmlDocument.GetElementById("htmlInputBox");
   string text = htmlElement.GetAttribute("value");



   if (text != null)     {         this.txtHTML.Text = text;     } }
private void btnGetHTML_Click(object sender, RoutedEventArgs e)
{
    OnChange(nullnull);
}

- MainPage.xaml.cs -

테스트를 위해 AttachEvent 메서드를 이용하여, 생성자에 HTML의 텍스트 박스의 KeyUp 이벤트를 설정하였고, 이벤트 핸들러에서는 요소에서 가져온 텍스트를 실버라이트의 텍스트 박스에 설정합니다.

실행결과 HTML 텍스트박스의 글자가 바뀔 때 마다 실버라이트의 텍스트박스에 나타납니다.

#2. HTML에서 실버라이트 접근

HTML에서 실버라이트에 접근하는 시나리오를 위해 위와 같이 기존 .aspx에 버튼을 추가하고, 실버라이트 object요소에 id값을 추가합니다. 그리고 버튼의 클릭 속성에 자바스크립트 함수를 넣어줍니다.

<h2>HTML영역</h2>
    텍스트 입력 : <input type="text" id="htmlInputBox"   style="width:300px;" /> 	
<input type="button" id="htmlButton" onclick="CallSilverlight()" 
       value="버튼을 누르면 실버라이트에 접근" /><hr />
<div id="silverlightControlHost">
   <object id="ObjSilverlight" data="data:application/x-silverlight-2," 
            type="application/x-silverlight-2"
............

- HTMLBridgeTestPage.aspx -

실버라이트에 접근하려면 자바스크립트를 사용해야 하는데요. 버튼을 누르면 실버라이트의 텍스트박스에서 값을 가져와 HTML의 텍스트박스에 집어 넣도록 하겟습니다. 아래와 같이 자바스크립트를 <head>태그 안에 추가합니다.

<script type="text/javascript">
        function CallSilverlight() {
            var ObjSilverlight = document.getElementById("ObjSilverlight");
            var text = ObjSilverlight.Content.REG_SILVERLIGHT.SilverlightMethod();
            document.getElementById("htmlInputBox").value = text;
        }
    </script>

- HTMLBridgeTestPage.aspx –

자바스크립트를 살펴보면 document객체의 getElementById 함수에 실버라이트 Object태그의 id값을 넣어 실버라이트 객체를 얻어옵니다. 그 다음줄에서 ObjSilverlight.Content.REG_SILVERLIGHT.SilverlightMethod();와 같은 코드가 보이는데요, 이것이 핵심입니다.

 

자바스크립트를 통해 실버라이트에 접근하기 위해서는 RegisterSCriptableObject아래와 같이 객체를 등록 하여야 합니다. 객체를 등록하기 위해서는 객체에 [ScriptableMember]가 있어야 하고, 이 속성이 붙은 메서드는 자바스크립트에 노출됩니다.

 public MainPage()
 {
     InitializeComponent();
     ……
     HtmlPage.RegisterScriptableObject("REG_SILVERLIGHT"this);
 }
[ScriptableMember]  public string SilverlightMethod()  {
     return this.txtHTML.Text;  }

-MainPage.xaml.cs-

즉 위의 자바스크립트의 코드는 등록 된 실버라이트 객체의 ScriptableMemeber를 호출하는 코드입니다.

테스트를 해보니 HTML버튼을 누르면 자바스크립트가 호출되어, 실버라이트의 메서드를 호출하는 것을 알 수 있습니다.

 

실버라이트를 처음으로 접할 때 프로젝트를 생성해 보셨을 것입니다. 프로젝트의 구조를 살펴보고, ASP.NET이나 HTML위에 실버라이트가 Object태그로 추가되는 것을 보고, 한번쯤 둘간의 상호작용을 어떻게 할지에 대해 궁금하셨을 것입니다. 오늘은 가장 기본이 되는 실버라이트와 HTML간의 엑세스 방법에 대해 알아 보았습니다. 이 방법은 ASP.NET과 자바스크립트 기술을 이용하는 것이고 이것을 이용하여 실버라이트가 addOn된 멋진 페이지를 작성 할 수 있습니다.

Posted by 맨날맑음
,

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

Visual Studio 2010 정식 버전이 나온 지 꽤 시간이 흘렀고, 저는 선물로 받은 MSDN Subscriptions을 이용하여 사용하고 있습니다. 블로그를 운영하는 개발자라면 포스팅 내용 중에 소스코드를 넣는 일이 많이 있으실 텐데요. 블로그에 소스코드를 넣는 것은 단순히 Copy & Paste하는 방법이 있겠지만 이렇게 되면 소스코드의 색이 일괄적으로 검은색으로 나타나서 보기 불편하게 됩니다.

Google code의
SyntaxHighlighter와 같은 스크립트를 이용하는 방법이 있지만 저처럼 MS Word나 Live Writter를 이용하여 포스팅 하는 경우에는 포스팅 이후에 다시 수정하여, 소스코드 부분에 스크립트를 붙여 주어야 하기 때문에 불편한 점이 많은 것이 사실입니다.


그래서 제가 사용하는 방법은 MS Word를 이용하여 포스팅 하는 것 인데요, 그림을 붙여 넣기 하기도 편하고, 워드 프로그램의 특성 상 글을 편집하고 관리하기도 편리합니다. 그런데
Visual Studio 2010을 사용하면서 문제점이 생겼습니다. 소스코드를 붙여넣기 하면 주석에 포함된 한글이나 소스코드에 포함된 한글은 모두 깨져서 붙여지는 현상인데요.  

protected void btnRegister_Click(object sender, EventArgs e)

 {

     switch (MemberAuthenticate.MemberCheck(tbID.Text, tbPassword.Text))

     {

         case -2:

             lblInfo.Text = "IöI Æ¢®OìE ú¨¡Iì©£ O¥I¥U";

             return;

         case -3:

             lblInfo.Text = "ú¨¡Iì©£¯I ¡¨¢ö¨¬¯oìa¬| ¢´¢ç¡À O¤AIù¨ù¯a";

             return;

     }

 }

해결 방법은 VS2010 플러그인을 설치하시면 됩니다.


-Fig1. Visual Studio2010 확장 관리자-

VS2010에서 새롭게 추가된 기능인 확장 관리자는 VS에 추가되는 여러 기능을 손쉽게 설치할 수 있도록 도와주는 메뉴입니다. [도구 -> 확장 관리자]를 선택하면 확장 관리자를 볼 수 있는데요. 왼쪽의 메뉴에서 온라인 갤러리를 선택하시면 다양한 플러그인을 볼 수 있습니다. 한글 깨짐을 해결 하기 위해서는 Productivity Power Tools를 설치 하시면 됩니다. 마우스 더블클릭만으로 손쉽게 설치되어 편리하게 사용 할 수 있습니다.

다른 방법으로 Productivity Power Tools를 설치 하시려면 여기에서 다운로드 받아 설치 하시면 됩니다.


-Fig2. Productivity Prower Tools 다운로드 페이지-

설치하니 소스코드의 한글이 무사하군요! 사소하지만 모르면 완전 불편한 팁이었습니다!

private void listView1_DragDrop(object sender, DragEventArgs e)
{
    string[] dropFiles = e.Data.GetData(DataFormats.FileDrop) as string[];
    if (dropFiles != null)
    {
        foreach (string fileName in dropFiles)
        {           
            //파일에서 아이콘 추출
            Icon icon = Icon.ExtractAssociatedIcon(fileName);
            //이미지리스트에 아이콘 추가
            imageList.Images.Add(icon);
            //리스트뷰에 파일명과 인덱트 추가
            listView1.Items.Add(fileName.Substring(fileName.LastIndexOf("\\") + 1), listView1.Items.Count);
        }             

}

Posted by 맨날맑음
,

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

이번 포스팅은 WPF에서 마우스 드래그를 이용한 간단한 사각형 그리기입니다. 이 예제를 응용하면 원이나 선도 그릴 수 있고, 자료구조를 이용하면 윈도우 그림판과 같은 기능도 쉽게 만들 수 있습니다.

-Fig1. 사각형을 그리는 WPF 어플리케이션-

Fig1에서 보는 바와 같이 마우스의 현재 좌표를 왼쪽 상단에 표시해 주며, 드래그를 이용하여 사각형을 그리는 기능을 합니다. WPF에서 제공하는 InkCanvas객체를 이용하면 더 간단하게 구현도 가능 하겠네요^^; 하지만 이번에는 Grid에 사각형을 그리는 방법으로 구현해 보겠습니다.

 

 

#1. 마우스 이벤트

-Fig2. WPF Window의 마우스 이벤트-

WPF의 컨트롤은 마우스 이벤트를 가지고 있습니다. 마우스 다운이나 업, 마우스 무브, 마우스 휠 등 이벤트를 지원하는데요. 우리 예제에서는 MouseLeftButtonDown과 MouseMove, MouseLeftButtonUp 세 가지 이벤트를 사용합니다. 마우스 이벤트 핸들러에서는 MouseEventArgs 객체가 인자로 넘어오고 이 이벤트객체를 이용하면 현재 마우스의 상태정보를 알 수 있습니다.

 

이름

설명

Device

이 이벤트를 시작한 입력 장치를 가져옵니다. (InputEventArgs에서 상속됨)

Handled

라우트된 이벤트가 경로를 따라 이동할 때의 현재 이벤트 처리 상태를 나타내는 값을 가져오거나 설정합니다.

LeftButton

마우스 왼쪽 단추의 현재 상태를 가져옵니다.

MiddleButton

마우스 가운데 단추의 현재 상태를 가져옵니다.

MouseDevice

이 이벤트와 연결된 마우스 장치를 가져옵니다.

OriginalSource

부모 클래스에서 Source를 조정하기 전에 순수 적중 테스트에 의해 결정되는 원본 보고 소스를 가져옵니다.

RightButton

마우스 오른쪽 단추의 현재 상태를 가져옵니다.

RoutedEvent

RoutedEventArgs 인스턴스와 연결된 RoutedEvent를 가져오거나 설정합니다. (RoutedEventArgs에서 상속됨)

Source

이벤트를 발생시킨 개체에 대한 참조를 가져오거나 설정합니다. (RoutedEventArgs에서 상속됨)

StylusDevice

이 이벤트와 연결된 스타일러스 장치를 가져옵니다.

Timestamp

이 이벤트가 발생한 시간을 가져옵니다. (InputEventArgs에서 상속됨)

XButton1

첫 번째로 확장된 마우스 단추의 현재 상태를 가져옵니다.

XButton2

두 번째로 확장된 마우스 단추의 현재 상태를 가져옵니다.

- MouseEventArgs 의 속성 (출처 : MSDN)-

이벤트 객체의 속성을 통해 마우스의 현재 상태정보를 알 수 있으며, GetPosition() 메서드를 이용하면 마우스 포인트의 좌표를 얻어 올 수도 있습니다.

 

#2. Shape객체

WPF에서 Rectangle, Ellipse, Polygon과 같은 모든 도형의 기본 클래스는 Shape입니다. Shape는 UI 요소이므로 패널이나 대부분의 컨트롤에서 사용 할 수 있습니다. Stroke 속성을 사용하면 도형의 테두리(윤곽선)의 색상을 지정 할 수 있고, StrokeThickness 속성을 이용하면 도형의 테두리 두께를 설정 할 수 있습니다. 또한 Fill 속성을 이용하면 도형의 표면 색상을 설정 할 수 있습니다.

 

-Fig3. 여러 속성을 적용하여 랜더링 된 원의 모습-

 

#3. 코드 구현

코드가 간단하여, 대부분의 설명은 주석으로 코드설명을 대신합니다. WPF 프로젝트를 생성하고, 다음과 같은 코드를 넣어 줍니다.

 

    

-Code1. MainWindow.xaml-

 

 
public partial class MainWindow : Window
 {
     /// 
     /// 드레그를 시작한 마우스 좌표;
     /// 
     Point prePosition;
     /// 
     /// 현재 그려지는 사각형
     /// 
     Rectangle currentRect;

     public MainWindow()
     {
         InitializeComponent();
         //이벤트 핸들러 생성
         this.root.MouseLeftButtonDown += new MouseButtonEventHandler(root_MouseLeftButtonDown);
         this.root.MouseMove += new MouseEventHandler(root_MouseMove);
         this.root.MouseLeftButtonUp += new MouseButtonEventHandler(root_MouseLeftButtonUp);
         
         // 좌표를 나타내는 TextBlock을 최상위로 ...
         Grid.SetZIndex(this.tbPosition, 99999);
     }

     /// 
     /// 마우스 클릭 해제 이벤트 핸들러
     /// 
     /// 
     /// 
     void root_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
     {
         //마우스 캡춰를 제거한다.
         this.root.ReleaseMouseCapture();
         SetRectangleProperty();
         currentRect = null;
     }

     private void SetRectangleProperty()
     {
         //사각형의 투명도를 100% 로 설정
         currentRect.Opacity = 1;
         //사각형의 색상을 지정
         currentRect.Fill = new SolidColorBrush(Colors.LightYellow);
         //사각형의 테두리를 선으로 지정
         currentRect.StrokeDashArray = new DoubleCollection(); ;
     }

     /// 
     /// 마우스 이동 이벤트 핸들러
     /// 
     /// 
     /// 
     void root_MouseMove(object sender, MouseEventArgs e)
     {
         
         //현재 이동한 마우스의 좌표를 얻어온다
         Point currnetPosition = e.GetPosition(this.root);
         //좌표를 표시한다.
         this.tbPosition.Text = string.Format("마우스 좌표 : [{0},{1}]", currnetPosition.X, currnetPosition.Y);
         //마우스 왼쪽 버튼이 눌려있으면
         if (e.MouseDevice.LeftButton == MouseButtonState.Pressed)
         {
             if (currentRect != null)
             {
                 //사각형이 나타날 기준점을 설정한다.
                 double left = prePosition.X;
                 double top = prePosition.Y;
                 //마우스의 위치에 따라 적절히 기준점을 변경한다.
                 if (prePosition.X > currnetPosition.X)
                 {
                     left = currnetPosition.X;
                 }
                 if (prePosition.Y > currnetPosition.Y)
                 {
                     top = currnetPosition.Y;
                 }
                 //사각형의 위치 기준점(Margin)을 설정한다
                 currentRect.Margin = new Thickness(left, top, 0, 0);
                 //사각형의 크기를 설정한다. 음수가 나올 수 없으므로 절대값을 취해준다.
                 currentRect.Width = Math.Abs(prePosition.X - currnetPosition.X);
                 currentRect.Height = Math.Abs(prePosition.Y - currnetPosition.Y);
             }
         }
     }

     /// 
     /// 마우스 왼쪽 버튼 클릭 이벤트 핸들러
     /// 
     /// 
     /// 
     void root_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
     {
         //마우스의 좌표를 저장한다.
         prePosition = e.GetPosition(this.root);
         //마우스가 Grid밖으로 나가도 위치를 알 수 있도록 마우스 이벤트를 캡처한다.
         this.root.CaptureMouse();
         if (currentRect == null)
         {
             //사각형을 생성한다.
             CreteRectangle();               
         }
     }

     private void CreteRectangle()
     {
         
         currentRect = new Rectangle();
         currentRect.Stroke = new SolidColorBrush(Colors.DarkGreen);
         currentRect.StrokeThickness = 2;
         currentRect.Opacity = 0.7;
         //사각형을 그리는 동안은 테두리를 Dash 스타일로 설정한다.
         DoubleCollection dashSize = new DoubleCollection();
         dashSize.Add(1);
         dashSize.Add(1);
         currentRect.StrokeDashArray = dashSize;
         currentRect.StrokeDashOffset = 0;
         //사각형의 정렬 기준을 설정한다.
         currentRect.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
         currentRect.VerticalAlignment = System.Windows.VerticalAlignment.Top;
         //그리드에 추가한다.
         this.root.Children.Add(currentRect);
     }
 }

-Code2. MainWindow.xaml.cs-

마우스를 드래그하는 동안은 그림판이나 포토샵에서와 같이 점선으로 사각형의 모양을 표시 해 줄 필요가 있기 때문에 테두리의 속성을 변경 할 필요가 있습니다. 테두리를 점선으로 표시하는 속성은 Rectangle객체의 StrokeDashArray를 사용하여 설정 할 수 있으며, XAML에서는 다음과 같이 표현 할 수 있습니다.

 

-Fig4. StrokeDashArray 속성이 적용 된 Ellipse-

소스 빌드 환경 : VisualStudio2010, .NET Framework4.0

Posted by 맨날맑음
,

작성중

일반적으로 동적인 웹 사이트 개발 시 상태관리(State Management)가 필요 합니다. 이번 포스팅에서는  상태관리가 무엇인지와 우리가 일반적으로 많이 사용하는 쿠키(Cookie)와 세션(Session)에 대해 자세히 알아 보도록 하겠습니다.

 

#1. 웹 서버 동작 원리

웹 사이트 상태관리의 필요성을 알기 위해 웹 서버와 클라이언트(웹 브라우저)가 어떠한 방식으로 동작 하는지를 먼저 알아 보겠습니다.

image-Fig1. 정적 웹 서버 동작 원리-

 

Fig1을 보면 아주 간단한 원리로 동작 하는 것을 알 수 있는데요. 클라이언트가 HTTP 프로토콜을 사용하여 웹 서버로 요청(Request)을 하게 되면 웹 서버는 해당 하는 HTML을 웹 브라우저로 전송 해 주고 웹 브라우저는 응답(Response) 받은 HTML을 파싱하여 사용자에게 보여주게 됩니다. 여기서 ‘요청’이란 우리가 웹 브라우저의 주소 표시줄에 http://crynut84.tistory.com이라고 입력 하는 행위나 웹 사이트의 링크를 마우스로 클릭하는 행위 등을 말합니다.

 

웹 사이트는 다시 정적인 웹 사이트와 동적인 웹사이트로 나눌 수 있습니다. 정적인 웹 사이트는 웹 서버에서 .HTML 파일을 완성된 .HTML 파일을 가지고 있다가 클라이언트의 요청이 있을 시 해당하는 .HTML 파일을 돌려 주는 형태입니다. 당연히 HTML 페이지의 내용들은 이미 결정 되어있어 있으므로 클라이언트의 상태, 방문정보, 시각등의 내용에 관계없이 항상 동일한 HTML 페이지를 보여줍니다. 요즘은 이런 웹사이트는 거의 없을 듯 합니다.

 

동적인 웹 사이트는 사용자의 액션에 따라 웹 사이트가 다르게 동작 하는 것을 말합니다. 예를들어 요즘 웹 사이트는 거의 로그인이라는 인증 과정을 거치게 되고, 로그인을 하면 ‘전호진님 환영합니다’라고 환영 인사도 해줍니다. 또한 게시판은 검색어에 따라 다른 결과를 보여주게 되고, 사용자 입맛에 맛게 정렬도 할 수 있습니다. 이와같이 요즘 일반적으로 볼 수 있는 사용자와 웹사이트가 서로 상호작용을 하는 웹 사이트를 동적인 웹사이트라고 합니다.

 

동적인 웹사이트를 만드는 기술은 ASP.NET, JSP, ASP, PHP, CGI등 여러 가지가 있습니다. 마이크로소프트의 동적인 웹사이트를 만드는 기술인 ASP.NET의 동작 원리(Fig2)를 보면 정적 웹사이트와 조금 다른 것을 알 수 있는데요.

image-Fig2. 동적 웹 서버 동작 원리-

 

클라이언트가 요청하게 되면 웹 서버는 요청에 대한 적절한  HTML을 새롭게 생성 합니다. 요청에 대한 일련의 처리(로직 수행)를 수행하게 되고 처리 결과를 다시 클라이언트에 돌려 주게 되는데 동적인 웹 사이트라고 해도 클라이언트가 받는 최종 응답은 정적인 HTML 페이지입니다. 예를들어 게시판에 여러 게시글이 있는데 사용자가 ASP.NET을 검색어로 입력하고 검색 버튼을 누르게 되면 이 요청을 웹서버가 받아서 게시글 중 ASP.NET이 들어간 결과만 찾아서 형식에 맞는 HTML을 구성하게 되고 클라이언트에 응답하주게 되는 것입니다. 이렇게 동적인 처리를 위해 ASP.NET과 같은 웹 기술이 필요하게 되고, 모든 처리는 웹 서버에서 수행되며, 클라이언트의 입장에서는 정적인 웹 사이트와 동일하게 웹 서버에 요청을 하고 응답받은 결과를 파싱하여 보여 주게 됩니다.

 

#2. 상태 관리(State Management)

웹 사이트를 사용하는 사용자는 HTTP GET방식이나 HTTP POST방식을 사용하여 웹 서버로 페이지를 요청하게 되고, 웹 브라우저는 웹 서버에서 응답받은 HTML을 파싱하여 렌더링하게 됩니다. 이러한 일련의 주기를 ‘라운드트립(Round Trip)’ 이라고 합니다.그런데 HTTP 프로토콜은 상태를 저장 할 수 없는 프로토콜입니다. 이 말은 클라이언트의 요청이 왔을대 웹 서버는 해당 요청에 대한 응답인 HTML을 보내주고 연결을 끊어버린다는 것입니다. 그렇기 때문에 라운드트립 시 페이지에 있는 컨트롤의 사용자 입력정보나 페이지의 정보들이 모두 손실 되게 됩니다.  예전에 사용하던 정적인 웹사이트(일방적으로 보기만 하는 웹사이트)에서는 문제가 되지 않지만 동적인 웹사이트에서는 사용자의 요청이나 컨트롤의 입력정보를 유지할 필요가 있기 때문에 ASP.NET은 상태 관리를 할 수 있는 여러가지 기능을 제공합니다.

 

상태관리의 정보를 저장하는 장소에 따라 두가지로 분류 할 수 있는데, 웹 서버에 저장하는 경우와, 클라이언트에 저장하는 경우가 있습니다.

▶ 상태 정보를 클라이언트에 저장하는 방식

  • 뷰 상태(View State)
  • 컨트롤 상태(Control State)
  • 숨겨진 필드(Hidden Field)
  • 쿠키(Cookie)
  • 쿼리 문자열(Query String)

상태 정보를 웹 서버에 저장하는 방식

  • 응용 프로그램 상태(Application State)
  • 세션(Session)
  • 프로필 속성(Profile Property)
  • 데이터베이스(Database)

두가지 방식은 장단점이 존재 하는데요. 일반적으로 데이터가 작고, 중요하지 않은(보안 등의 이유)정보는 클라이언트 측에서 관리하고, 나머지는 웹 서버에서 관리 하는 것이 좋습니다. 여러가지 상태관리 기능 중 Cookie와 Session에 관해 자세히 알아보겠습니다.

 

#3. 쿠키(Cookie)

-Fig3. 맛있는 쿠키-

 

쿠키는 요청 및 응답하는 과정에 포함되는 텍스트 정보이고 쉽게 구현하여 사용 할 수 있는 방법중에 하나입니다. 일반적인 브라우저에서 최대 4KB의 텍스트 정보를 담을 수 있으며 하나의 사이트는 20개만 허용되며, 모든 사이트를 통틀어서 300개로 제한 됩니다. 만약 이 범위를 넘어 더 많이 저장 하려고 할 경우에는 가장 오래된 쿠키부터 삭제되므로 사용의 주의해야하고, 4KB로 비교적 작은 크기만을 저장하기 때문에 적은 양의 데이터나 ID, 최근 읽은 글, 최근 본 상품과 같은 식별자를 저장할 때 사용하는 것이 적합합니다.

 

1. 쿠키의 동작 방식

쿠키는 서버에서 생성하여 클라이언트의 브라우저에서 관리하기 때문에 요청시 쿠키를 생성하고 브라우저를 닫을때 쿠키를 파괴합니다. 응답을 통해 얻어온 쿠키는 만료시간 여부에 따라 클라이언트의 PC에 파일로 저장하게 됩니다.

 

image

-Fig4. 웹 사이트를 처음 요청 할 경우 쿠키 생성 -

 

쿠키의 생성 주기를 살펴보면처음으로 페이지를 요청 할 경우 웹 서버에서는 쿠키를 생성하게 되고, 페이지를 돌려 줄때 HTTP 헤더에 쿠키를 포함하여 돌려 주게 됩니다. 이렇게 넘겨 받은 쿠키는 클라이언트에서 관리 하고 있다가, 다음번 요청때 쿠키를 함께 전송하게 되고, 서버에서는 쿠키 정보를 읽어 이전 상태 정보를 알 수 있게 됩니다. 이때 웹 서버는 Fig5에서 처럼 정보를 변경 할 필요가 있을때 쿠키를 업데이트하여 다시 변경된 쿠키와 함께 응답하게 됩니다.

image -Fig5. 쿠키를 가지고 있을 경우 쿠키 활용-

2. ASP.NET에서 쿠키 사용

쿠키는 서버로 부터 응답받은 사항이기 때문에 HttpResponse 객체를 통해 클라이언트로 전송 됩니다. 쿠키에 정보를 저장하는 방법은 두가지가 있습니다. Page클래스의 Response 객체를 사용하는 것과 HttpCookie 클래스를 사용하는 방법입니다.

//Response 사용 
Response.Cookies["쿠키명1"].Value = "쿠키 예제;
Response.Cookies["쿠키명1"].Expires = DateTime.Now.AddMinutes(30); 

//HttpCookie 클래스 사용 HttpCookie cookie = new HttpCookie("쿠키명2");
cookie.Value = "쿠키 예제";
cookie.Expires = DateTime.Now.AddSeconds(30); 
Response.Cookies.Add(cookie);

-Code1. 쿠키 저장-

쿠키명1과 쿠키명2라는 이름을 사용하는 쿠키를 생성 하였고 각각 Value 속성을 통해 상태유지에 필요한 값을 넣어 주었습니다. Expires 속성은 만료 기간인데, 이 속성을 설정하면 쿠키가 클라이언트의 컴퓨터의 파일의 형태로 저장됩니다.  만료기간을 설정하지 않은 쿠키는 브라우저의 메모리에서 관리됩니다. Code1에서 쿠키명1은 30분후에 쿠키를 지우며, 쿠키명2는 30초 후에 쿠키를 지우도록 설정 하였습니다. 만료시간이 지난 쿠키는 클라이언트가 쿠키를 생성한 웹 사이트에 다시 요청을 보낼때 삭제됩니다.

Posted by 맨날맑음
,

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

Windows Form Application에서 WPF로 만든 Windows Application을 호출하려 합니다.

WPF의 Control을 윈폼에 호스팅 하기 위해서는 ElementHost를 사용하면 되는데요(이에 관한 강좌는 추후에 포스팅 하겠습니다.)
오늘은 윈폼에서 WPF의 창(Window)를 띄우려고 합니다.

#1. 프로젝트 생성

우선 Windows Forms 응용프로그램 프로젝트와 WPF 사용자 정의 컨트롤 라이브러리 프로젝트 2개를 생성합니다.

 

#2. DLL 참조

윈폼에서 WPF 윈도우를 호출하기 위해 WPF 프로젝트의 DLL(wpfControlLibrary1)과 윈폼에서 WPF 사용을 위한 DLL을 참조 합니다.

Windows Form에서 WPF를 사용하기 위한 DLL 목록
  PresentationCore
  PresentationFramework
  System.Xaml
  WindowsBase


#3. WPF 윈도우 호출
이제 Windows Form의 소스코드에 WPF 윈도우 호출 코드를 넣습니다.(저는 간단히 버튼을 누를 때 WPF 창이 나오도록 하겠습니다)

private void button1_Click(object sender, EventArgs e)

 {

     Window1 WPF_Wnd = new Window1();

     WPF_Wnd.Show();

 }

#4. 결과 확인 

간단한 방법으로 Windows Form에서 WPF 윈도우를 호출 할 수 있습니다. 감사합니다.

Posted by 맨날맑음
,

Posted by 맨날맑음
,

훈스닷넷 22회 정기 세미나
- 일시 : 2010년 03월 25일(목) 19시 00분
- 장소 : 포스코센터 5층 (한국마이크로소프트)
- 참가비 : 삼천원+α (수익금 전액은 후원처 요셉의원에 기부됩니다.)
- 세미나 신청: http://www.hoons.kr/Seminar/Join.aspx 
세미나 Agenda
19:00~19:30
등 록
19:30-20:10
실버라이트 4를 통해 보는 RIA의 미래 / 공인석
20:10~20:20
휴식
20:20-21:00
선구언니와 함께하는 익스프레션 블렌드 4 / 김선구, 이은아, 장미연
21:00~21:10
휴식
21:10-21:40
누구도 얘기해주지 않았던 WPF 4 이야기, 그리고 그 비밀 / 전호진, 이동규
21:40~
Q&A / 경품추첨
발표 내용 소개

실버라이트 4를 통해 보는 RIA의 미래 / 공인석
매년 열리는 MIX의 꽃은 바로 실버라이트죠. 올해, MIX10에서도 실버라이트 4가 베타 딱지를 떼고 RC로 공개되었습니다.
해마다 지칠줄 모르고 발전을 거듭하는 실버라이트! 이 세션에서는 실버라이트 4의 주요 기능을 소개하고 향후 리치 애플리케이션의 환경에 어떤 영향을 미칠지 예측해 봅니다.
선구언니와 함께하는 익스프레션 블렌드 4 / 김선구, 이은아, 장미연
실버라이트와 WPF 프로젝트를 수행할 때 블렌드는 선택이 아닌 필수가 되었습니다.
이번 MIX10에서 공개된 블렌드 4는 그 동안 디자이너 혼자서는 할 수 없었던 많은 기능이 추가되었습니다. 이제 블렌드로 더욱 인터랙티브한 애플리케이션을 만들 수 있습니다.
이 세션에서는 블렌드 전문가로서 디자이너에게 꼭 전해주고 싶은 기능과 활용법을 소개합니다.
누구도 얘기해주지 않았던 WPF 4 이야기, 그리고 그 비밀 / 전호진, 이동규
차세대 윈도우 리치 클라이언트 애플리케이션 개발을 지원하는 강력한 도구인 WPF 4!
아무도 해주지 않았던 WPF 4의 '비밀'스러운 이야기를 풀어봅니다. 쉿!

진행자 소개
공인석 / 실버라이트 시삽

HOONS닷넷 실버라이트 분야 시삽을 맡고 있고, 실버라이트가 소개된 이래로 실버라이트에 매진해 왔다. 유령회사 공도소프트라는 블로그를 통하여 기술 자료, 컬럼, 강좌 등을 진행하고 있으며 훈스닷넷을 비롯한 실버라이트 관련 커뮤니티 활성화에 기여하고 있다.
김선구 / 익스프레션 시삽

웹디자이너, 액션스크립터로 일해 왔다. 일찍이 UX 디자인의 중요성을 깨달아 ,Silverlight의 베타시절부터 Silverlight와 WPF 와 같은 기술로 향상된 UX 구현을 하는 인터랙티브 디자이너로 일하였고, 다수의 교육 및 강의을 진행하였다. 하얀코코의 예제로 배우는 익스프레션 블렌드 & 실버라이트(www.whitecoco.net) 를 운영중이며 마이크로소프트의 MVP이고 닷넷엑스퍼트의 UX컨설턴트로 일하고 있다.
장미연 / 익스프레션 시삽

Microsoft Blend MVP로 활동하고 있고 HOONS닷넷의 Expression 시삽을 맡고 있으며 각종 세미나와 교육을 진행하고 있다. 현재 바이널(http://www.vi-nyl.com/) 인터렉티브 사업부 VLab에서 근무하고 있으며 디지털교과서를 비롯하여 다양한 WPF & Silverlight 프로젝트를 진행하였다. "짱묜"이라는 닉네임으로 블로그(http://zzangmyon.com/)를 운영중이다.
이은아 / 익스프레션 시삽

현재 d'strict 에서 UX Designer로 서피스 프로젝트에서 디자인 구현을 하고 있다. Expression MVP이며 , HOONS닷넷에서는 Expression 파트의 시삽으로 활동하고 있다.
전호진 / WPF 시삽

현재 HOONS닷넷 커뮤니티 WPF시삽으로 활동하고 있으며 닷넷 전반적인 기술에 관심이 많다. 아는것은 설명하면서 늘어난다는 생각으로 개인블로그(Life is dynmic :: http://crynut84.tistory.com)를 운영하고 있으며, 특히 최근에는 동영상 압축(Codex)과 영상처리에 집중하고 있다. 또한 항상 긍적적인 마인드를 가지고자 '맨날맑음'이라는 닉네임을 사용한다.
이동규 / WPF 시삽

현재 MSP(Microsoft Student Partners)로 활동중에 있으며, 닷넷 기술에 매우 많은 관심을 가지고 있다. 새로운 신기술을 굉장히 좋아하며 그것을 바로 활용하여 새로운것을 만드는것을 좋아한다.
세미나 장소

한국 마이크로소프트 - 포스코 센터 5층



 
경품안내

Calmee Space 콤보 Plus
공인석 MVP 협찬




영화예매권 * 2
한진수 MVP 협찬

아이폰커버
Elecom 협찬

    ?



상사에게 사랑받을 수 있는 절대 아이템
공인석 MVP 협찬
* 경품은 사정에 의해 동급의 다른 제품으로 제공될 수 있습니다.
스폰서안내
Posted by 맨날맑음
,

- 일시 : 2010년 02월 25일(목) 19시 00분
- 장소 : 포스코센터 5층 (한국마이크로소프트)
- 참가비 : 삼천원+α (수익금 전액은 후원처 요셉의원에 기부됩니다.)
- 세미나 신청: http://www.hoons.kr/Seminar/Join.aspx 
세미나 Agenda
19:00~19:20
등 록
19:20-19:40
다시 생각해보는 UX와 RIA / 공인석
19:40-20:40
포토라이트 시즌2: 웹캠과의 만남 / 최다은, 김동욱
20:40~20:55
휴식
20:55-22:00
WPF 3D 기초부터 활용까지 / 전호진 이동규
22:00~
Q&A / 경품추첨
발표 내용 소개

다시 생각해보는 UX와 RIA / 공인석
2007년 무렵으로 기억합니다. WPF가 발표되고 WPF/E가 실버라이트로 이름을 바꾸어 발표되면서 마이크로소프트도 본격적으로 RIA시장에 뛰어들게 된 시기였죠. 물론 그 때까지도 UX란 단어와 RIA라는 단어는 수도 없이 많이 사용되었고 갑론을박이 많았지만 닷넷 세상에서는 바로 이 즈음이 시작이었습니다. 그 당시에는 제목에 RIA를 달고 나온 세미나가 참 많았는데, 어느 순간부터 세미나에 RIA란 단어가 사라지고 그 자리를 UX가 채우기 시작했습니다. 이제는 UX나 RIA란 단어를 모르면 트렌드에 뒤처지는 사람으로 취급 받을지도 모른다는 생각도 듭니다. 그런데, 우리는 과연 이 단어의 의미를 생각하면서 사용하고 있을까요? 최근에는 UX와 RIA라는 용어를 전혀 의미에 맞지 않게 사용하는 경우를 상당히 자주 보면서 이런 질문을 떠올려 봅니다. 이번 세션에서는 2010년, 실버라이트가 발표된지 벌써 햇수로 4년이 지난 이 시점에서 UX와 RIA를 다시 한번 조명하고 향후 RIA 개발과 UX에 대해 간단하게 브리핑해 봅니다.
포토라이트 시즌2: 웹캠과의 만남 / 최다은, 김동욱
이용자의 정보 생산ㆍ선택능력, 정보 소비 욕구가 커지면서 블로그 등 개인미디어 서비스 이용이 크게 증가하고 있다. 네티즌들이 블로그 및 미니홈피에 게재하는 글이나 사진 컨텐츠 제작이 용이해진 이유중 하나로 디지털카메라, 카메라 폰, 웹캠의 보급 등 배포도구의 간편화를 들 수 있다. 이번에 출시된 실버라이트 4는 웹캠기능을 추가함으로써 인터넷이라는 미디어 환경에서 사용자에게 더욱 편하면서도 풍성한 WEB문서의 작성을 지원하고 있다. 이에 이번 세미나에서는 실버라이트 4에서 어떻게 웹캠기능을 구현 할 수 있는지, "포토라이트 시즌2"를 통해 살펴보고자 한다.
WPF 3D 기초부터 활용까지 / 전호진, 이동규
최근들어 게임, 에니메이션, 영화분야에서도 3D를 사용한 사례가 점점 늘어나면서 사람들의 관심도 점점 높아지고있다. 이에 3D 어플리케이션 개발도 활발해 지고 있다. 3D에 대한 관심은 많지만 비교적 어려운 개념으로 인해 정작 3D 인터페이스를 활용한 응용프로그램은 찾아보기 힘들다. 또한 기본적인 3D 개념을 이해하고 WPF 3D를 유연하게 다루는 개발자는 많지 않아 보인다. 이번 섹션에서 WPF 3D의 기본 개념부터 차근차근 짚어 보고 실전에서 활용 할 수 있는 방법을 알아 본다.

진행자 소개
공인석 / 실버라이트 시삽

HOONS닷넷 실버라이트 분야 시삽을 맡고 있고, 실버라이트가 소개된 이래로 실버라이트에 매진해 왔다. 유령회사 공도소프트라는 블로그를 통하여 기술 자료, 컬럼, 강좌 등을 진행하고 있으며 훈스닷넷을 비롯한 실버라이트 관련 커뮤니티 활성화에 기여하고 있다.

최다은 / 실버라이트 시삽

HOONS닷넷 실버라이트 시삽이며, 야간학부 3학년에 재학중으로 셀러던트의 길을 걷고 있는 중이다. Asp.net 개발 경력을 계속 쌓아 왔으며, Nunit을 이용한 단위테스트에 관심이 많다. 실버라이트로 다양한 어플리케이션을 만들어 보는것이 목표이다. 부족한 내공을 쌓기 위해 늘 노력하는 자세를 잊지 않으려고 한다. 밤하늘을 바라보며 수많은 별들을 사진으로 담는 여행가를 꿈꾸기도 한다.
김동욱 / 실버라이트 시삽

Silverlight를 통해 다양한 프로젝트를 개발해 왔으며 HOONS닷넷에서는 커뮤니티 시삽을 맡고 있다. 지금은 개발자들이 쉴수 있고 또, 편히 놀수 있는 공간과 만남을 위해 노력하고 있다
전호진 / WPF 시삽

현재 HOONS닷넷 커뮤니티 WPF시삽으로 활동하고 있으며 닷넷 전반적인 기술에 관심이 많다. 아는것은 설명하면서 늘어난다는 생각으로 개인블로그(Life is dynmic :: http://crynut84.tistory.com)를 운영하고 있으며, 특히 최근에는 동영상 압축(Codex)과 영상처리에 집중하고 있다. 또한 항상 긍적적인 마인드를 가지고자 '맨날맑음'이라는 닉네임을 사용한다.
이동규 / WPF 시삽

현재 MSP(Microsoft Student Partners)로 활동중에 있으며, 닷넷 기술에 매우 많은 관심을 가지고 있다. 새로운 신기술을 굉장히 좋아하며 그것을 바로 활용하여 새로운것을 만드는것을 좋아한다.
세미나 장소

한국 마이크로소프트 - 포스코 센터 5층



 
경품안내
확정 후 업데이트 예정

'etc > Seminar' 카테고리의 다른 글

[HOONS닷넷 세미나] Advanced Rich Experience  (0) 2010.06.23
HOONS.NET 제22회 정기세미나 UX 뽀뽀뽀  (2) 2010.03.23
Posted by 맨날맑음
,

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 맨날맑음
,