WPF Korea +_+

김쿠루의 치명적 매력

곡스 — Tue, 06 Jul 2010 15:07:15 +0900

입흐다...

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

대전엑스포에왓습니다

곡스 — Sat, 17 Apr 2010 17:29:37 +0900

어릴적부터 한번쯤 와보고싶엇는데 이제서야 와보네요 ㅎㅎ

iPhone 에서 작성된 글입니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

whatisthat.co.kr 블로그 이전

곡스 — Thu, 08 Apr 2010 02:07:24 +0900

두 블로그 모두 관리를 해야겠다 생각을 하고 있지만 기술적인 내용을 한곳에 모여 있는 편이 좋을것 같아서
앞으로 기술적인 내용은 위트스튜디오 블로그(http://blog.witstudio.net)에 포스팅 예정입니다.

이미 20건정도의 포스팅이 진행되어 있는 상황이니 혹시 모르고 계신 분들이 있으셨다면 구경오세요~!~!

앞으로 whatisthat은 기존컨텐츠를 유지한체 개인용 블로그로 변경됩니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Visual Stduio 2010 Webcast - WPF 4.0

곡스 — Thu, 04 Feb 2010 11:04:48 +0900

안녕하세요. 김대욱입니다. 새롭게 선보인 VisualStudio 2010과 WPF 4.0에 대한 내용을 다룬 WebCast가 새로 등록되었습니다 ^^
위 그림을 클릭하시거나, 아래 주소를 통해 확인하실 수 있습니다.
세션보러가기 : http://www.techdays.co.kr/visualstudio2010/

WPF 4.0에서 새로 추가된 기능들에 대해 소개하고, WPF4.0을 이용한 Windows7용 Application개발과 관련된 데모가 포함되어있습니다 ^^ 많은관심 부탁드려요!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

witstudio open!!

곡스 — Sat, 02 Jan 2010 13:57:08 +0900

안녕하세요. 김대욱입니다. 예전부터 준비해오던 디자이너와 개발자를 위한 커뮤니티 witstudio가 드디어 오픈되었습니다 ^^
임시오픈이라 몇가지 제약사항이 존재하긴 하지만, 차츰 개선해나아갈 계획이구요. 앞으로 개발과 관련된 내용은 witstudio에서 확인하실 수 있습니다.

witstudio에서는 디자이너와 개발자간의 협업을 통해 크레이티브한 컨텐츠를 제작할 수 있는 공간으로 활용될 수 있을것이며,
개발과 디자인에 관련된 튜토리얼, 샘플, 아티클들의 정보를 제공합니다. 많은 관심 부탁드리겠습니다. 감사합니다.

위트스튜디오 : http://witstudio.net

김대욱.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

IP Address To Location Info(Latitude, Longitude...)

곡스 — Sat, 12 Sep 2009 18:24:08 +0900

안녕하세요 김대욱입니다. 오늘 웹서핑을 하다가 우연히 알아두면 유용할것 같은 서비스 사이트를 찾아 여러분들과 공유하려 포스팅을 합니다!! 위 제목에 나와있는데로, IP주소를 입력하면 해당 IP주소의 위도 경도를 출력해주는 서비스인데요, 사용방법이 매우 간단할 뿐더러 다양한 포맷(php,xml,json 등)을 지원하기 때문에 LBS를 구축하고 계신분들이라면 매우 유용한 팁이 되지 않을가 생각합니다. 아래는 해당 업체의 사이트구요 주소는 http://geobytes.com 입니다.

일단 사이트에 접속하시면 왼쪽 중간 또는 오른쪽 상단에 IP Address Locator라는 메뉴를 찾을 수 있습니다. 해당 메뉴에 접속하시면(http://www.geobytes.com/IpLocator.htm) 아래와 같은 그림의 페이지를 접하실 수 있는데요, PHP에서 사용할 수 있는 간단한 소스코드와 현재 접속중인 IPAddress의 지역정보를 출력해줍니다.

간단하게 테스트를 해보시려면 아래 URL에 접속 하시면 되겠습니다.
http://www.geobytes.com/IpLocator.htm?GetLocation&template=xml.txt
위 URL에 접속하시면 본인 IP Address에 해당하는 지역정보를 확인하실 수 있으며, 다른 IP주소의 정보를 확인하고자 하실때는
다음과 같이 URL을 수정하시면되겠습니다.
http://www.geobytes.com/IpLocator.htm?GetLocation&template=xml.txt&IpAddress=68.3.196.148
출력형식을 변경하시고 싶으시면 template부분을 변경해주시면 되는데, 아래 URL에서 template에 대한 내용을 참고하세요.
http://forums.geobytes.com/viewtopic.php?t=593

PS. 기본적으로 위 서비스는 무료로 제공되는 서비스 이지만, 무료이용에는 횟수가 제한되어있기때문에, 상업용등으로 사용하시기 위해서는 라이센스를 구입하셔야 할것 같습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Custom Attribute MarkupExtenstion

곡스 — Tue, 08 Sep 2009 19:30:00 +0900

안녕하세요. 김대욱입니다. 이번시간에 소개해 드릴 내용은 임의로 제작한 Attribute를 UI에 Binding 하기 위한 MarkupExtension에 대해 소개해 드리겠습니다. 이 내용은 데브피아 WPF&Silverlight마을에서 이광현 (dololas)님께서 질문해주신 내용입니다. 간단하게 이번시간에 하고자 하는 내용을 그림으로 표현 하면 아래와 같습니다.

먼저 위 그림과 같이 Header부분에 제목, 감독, 출연배우라고 출력만 하면 되는 상황이라면 아래와 같이 직접 명시해줄 수 있을텐데요, 질문자 님께서 말씀 하신 내용은 명시적으로 Header값을 입력하지 않고, 지정한 Attribute에 따라 Header의 출력 내용을 결정 하고자 하셨으므로 이에 따른 해결 방법에 대해 알아보도록 하겠습니다.

이번 예제에 사용되는 Class와 Attribute의 구조는 다음과 같습니다.

일단 위와 같은 상황에서 가장먼저 떠오르는게 DataBinding이 지만, DataBinding은 Property와 Property간의 연결을 제공하기 때문에 Attribute와는 함께 사용하실 수 없습니다. 따라서 Attribute 값을 반환 하는 MarkupExtension을 구현하여 해결해야 합니다. 아래는 MarkupExtension 구현 부분 소스코드입니다.

MarkupExtension 파라미터로 입력받은 Type과 MemberPath정보를 기반으로, CustomAttribute의 값을 가져옵니다. 간단하죠? 실제 사용할때에는 아래와 같이 사용하시면 되겠습니다.

이상으로 이번시간 내용을 마치며, 기타 질문은 리플이나 이메일로 해주시면 답변 드리도록 하겠습니다. 아래는 이번시간에 사용된 전체소스코드입니다.

CustomAttributeExtension.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

WPF Custom AngleGradientBrush Using MarkupExtension

곡스 — Thu, 20 Aug 2009 21:33:24 +0900

안녕하세요. 김대욱입니다. 이번시간에 소개해 드릴내용은 WPF에서 사용할 수 있는 AngleGradientBrush를 제작하는 방법이 되겠습니다. AngleGradient란 아래 그림을 보시면 쉽게 이해 하실 수 있을텐데요, WPF에서는 LinearGradient, RadialGradient만을 제공하는걸 하기때문에 (ReflectedGradient와 Diamond Gradient는 LinearGradient를 이용해 구현할 수 있습니다.)
Angle Gradient와 같은효과 나타내고자 한다면 직접 구현해서 사용해야 합니다.

그런데, 막상 구현을 해서 사용하려고 보면 WPF에서 Custom Brush 제작을 지원하고 있지 않아 직접 구현하는것도 어려워보입니다. 해외 포럼이나 블로거들을 보면 많은 분들께서 Angle Gradient와 관련된 내용에 대해 궁금해 하시는걸 확인할 수 있었는데요. 대부분 Angle Gradient를 Photoshop등에서 미리 그려서 Image File로 가지고 있다가, ImageBrush를 사용하는 방법을 사용한다고 합니다. 하지만, 이런 방법의 경우 Runtime 중에 Gradient Stop을 지정할 수 자유도가 많이 떨어지게 됩니다.

그렇다면 진정 구현할 방법는 것일가요??!?!?!?!?!?!

WPF에서 제공하는 MarkupExtension을 사용하면 생각보다 간단하게 CustomBrush를 구현할 수 있습니다. MarkupExtension이란 XAML을 좀더 확장할 수 있도록 돕는 객체로, 자세한 내용은 아래 URL을 참고하시기 바랍니다.
http://msdn.microsoft.com/ko-kr/library/system.windows.markup.markupextension.aspx
먼저 이번시간에 구현하게될 내용의 시연 동영상을 보고 더 자세히 설명하도록 하겠습니다.

위동영상을 보시면 Runtime중에 자유롭게 Gradient Stop을 지정할 수 있고, Gradient Size, Gradient Detial, CenterPoint등을 의 크기를 지정할 수 있습니다. 원리는 아주 간단합니다. Property를 통해 GradientStop 정보와 Size, Detail, CenterPoint 등의 정보를 입력받고 이를 기반으로 직접 Gradient Image를 생성합니다. 그리고 MarkupExtension의 ProvideValue에 생성한 Image를 사용하는 ImageBrush를 반환 하는 방법을 사용합니다.

그럼 이제 중요한건 Angle Gradient Image를 어떻게 생성하는가가 되겠습니다. 저같은 경우 아래와 그림과 같은 방법을 이용하여 Gradient Color를 계산하고 활용했습니다. WPF에서는 이미 LinearGradient를 제공하기 때문에 Gradient Stop을 입력하면 자연스러운 Gradient 색상을 추출 할 수 있고, 회전 각에 따라 추출된 색상정보를 매핑하면 아래와 같은 Angle Gradient Image를 생성 할 수 있습니다.

아래 코드는 GradientStopCollection에 저장된 GradientStop정보를 가지고 Gradient Color Code를 추출 하는 내용과 ColorCode를 이용해 AngleGradient Image를 생성하는 코드입니다. 코드 자체는 특별하게 어려운 부분은 없으니 한줄한줄 천천히 살펴보시면 이해하시는데에는 무리가 없을것같습니다.

protected void UpdateGradient()
{
    
    // 생성할 Gradient Image의 Size
    int Size = GradientSize * 2;

// 상대좌표로 입력된 Gradient Center Point를 절대좌표로 변환
    Point RealCenterPoint = new Point(Size * CenterPoint.X, Size * CenterPoint.Y);

// Gradient Image가 저장될 공간
    int[,] PixelData = new int[Size, Size];

// Gradient Color 추출
    int[] GradationColorList = GetGradationColorInteger();

for (int X = 0; X < Size; X++)
    {
        for (int Y = 0; Y < Size; Y++)
        {
            // 해당 좌표의 원점으로부터의 각도
            double Angle = Math.Atan2(Y - RealCenterPoint.X, X - RealCenterPoint.Y) * 180 / Math.PI;
            int ColorIndex = (int)(Angle / GradientDetail);

if (ColorIndex < 0) ColorIndex = GradationColorList.Length + ColorIndex;
            int IntColor = GradationColorList[ColorIndex];
            PixelData[X, Y] = IntColor;
        }
    }

// WriteableBitmap를 사용해 PixelData를 Image로 변환
    WriteableBitmap WriteableBitmap = new WriteableBitmap(Size, Size, 96, 96, PixelFormats.Pbgra32, null);
    WriteableBitmap.WritePixels(new Int32Rect(0, 0, Size, Size), PixelData, (int)WriteableBitmap.Width * 4, 0);
    WriteableBitmap.Freeze();

BaseBrush.ImageSource = WriteableBitmap;

}

protected int[] GetGradationColorInteger()
{

int GradationCount = (int)(360 / GradientDetail);   // 추출할 Gradient Color의 갯수
    int[] ResultColorCode = new int[GradationCount];    // Gradient Color가 저장될 공간

////////////////////////////////////////////////////////////////////////////////////
    // DrawingVisual과 LinearGradientBrush를 이용하여 Gradient를 그립니다.
    ////////////////////////////////////////////////////////////////////////////////////
    DrawingVisual DrawingVisual = new DrawingVisual();
    DrawingContext DrawingContext = DrawingVisual.RenderOpen();

LinearGradientBrush LinearGradientBrush = new LinearGradientBrush(Gradients) 
    { StartPoint = new Point(0, 0), EndPoint = new Point(1, 0) };

DrawingContext.DrawRectangle(LinearGradientBrush, null, new Rect(0, 0, GradationCount, 1));
    DrawingContext.Close();
    ////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
    // RenderTargetBitmap을 이용해 위에서 그린 Gradient를 데이터를 추출합니다.
    ////////////////////////////////////////////////////////////////////////////////////
    RenderTargetBitmap GradientImage = new RenderTargetBitmap(GradationCount, 1, 96, 96, PixelFormats.Pbgra32);
    GradientImage.Render(DrawingVisual);           
    GradientImage.CopyPixels(new Int32Rect(0, 0, GradationCount, 1), ResultColorCode, GradationCount * 4, 0);
    ////////////////////////////////////////////////////////////////////////////////////

return ResultColorCode;

}

그리고 실제 사용할 때에는 아래와 같이 사용할 수 있습니다.

<Rectangle> <Rectangle.Fill> <m:AngleGradientBrush> <GradientStop Color="Red" Offset="0"/> <GradientStop Color="Green" Offset="0.5"/> <GradientStop Color="Blue" Offset="1"/> </m:AngleGradientBrush> </Rectangle.Fill> </Rectangle>

이번시간에 중요한 내용은 MarkupExtension을 이용해 XAML을 확장하는 방법과 그리고 Gradient Image를 생성하는 부분이 되겠습니다. 그리고 아래는 이번시간에 사용한 전체 소스코드이며, 기타 질문이나 문의는 리플이나, 이메일로 주시면 되겠습니다!

AngleGradientBrushSample.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

OCR(Optical Character Recognition) Using MODI

곡스 — Mon, 17 Aug 2009 14:20:56 +0900

안녕하세요. 김대욱입니다. 이번시간에 소개해 드릴내용은 OCR(Optical Character Recognition), 흔이들 문자인식이라고 부르는 기능을 MODI(Microsoft Office Document Image) Libarry를 이용해서 구현하는 방법입니다. 이전에 Tablet SDK를 이용하여 필기인식 방법에대해 소개해 드린바 있었는데요, 이번 시간에는 필기가 아닌 이미지에 포함된 문자를 인식 하는 내용이 되겠습니다. 아래는 시연 동영상 되겠습니다~

먼저 MODI를 사용하기 위해서는 Office 2003 이상의 버전이 설치 되어있어야 하는데요, Office를 설치하실때 아래 그림과 같이 Microsoft Office Document Image를 함께 설치 해주셔야 합니다. (만약 설치 되지 않으셨다면 기능추가/제거 기능을 이용해서 설치 하실 수 있습니다.)

MODI를 사용하시기 위해서는 프로젝트 참조추가에서 아래 그림과 같이 COM 탭에서 Microsoft Office Document Imaging 를 선택하시면 되겠습니다. 저같은경우 Offfice 2007을 설치 했기 때문에 12.0으로 표시 되지만, 2003을 사용하시는 분들은 아마 11.0으로 표시될 것입니다.

실제 MODI를 사용하여 OCR을 구현하기 위해서는 아래와 같이 사용하시면 됩니다. 아래는 샘플 프로젝트에 사용된 인식 관련 함수입니다. 주석이 거의 대부분이고 실체코드는 10줄도 안되니 이해하시는데 무리는 없을것 같습니다 ^^

지금까지 몇몇 이미지로 테스트를 해보았지만, 인식결과는 이미지 상태에 따라 천차 만별인것 같습니다. 5~10도 각도로 회전된 문자에 대해서는 대부분 완벽하게 인식을 수행 하지만, 그이상 혹은 잡음이 많이 포함되어있는 이미지에서는 인식률이 다소 떨어지는것 같습니다.아래는 전체 소스코드입니다.

OCR.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

On Screen Keyboard Helper in WPF

곡스 — Wed, 12 Aug 2009 18:13:38 +0900

안녕하세요. 김대욱입니다. 최근들어 터치스크린을 이용한 프로젝트를 자주 진행하다보니 이번 포스팅은 터치스크린을 이용하는 시스템에서 유용하게 사용될 수 있는 내용이 되겠습니다. 이번시간에 소개해 드릴 내용은 터치스크린을 사용하는 어플리케이션에서 TextBox등의 Control에 Focus 되었을때 자동으로 Screen Keyboard Application을 실행하는 예제입니다. 동영상을 보시면 쉽게 이해하실수 있습니다.

위 동영상에서는 WIndows에서 기본적으로 제공하는 OnScreenKeyboard를 사용했지만, 이번시간에 소개해 드릴 내용을 응용하면 직접 개발한 Keyboard Application을 사용하실 수도 있습니다. 간단하게 원리를 말씀드리자면 입력가능한 컨트롤 즉, TextBox나 PasswordBox에 Focus 되었을때 미리 지정해놓은 Keyboard Application을 실행하고 Focus를 잃었을때 Keyboard Application을 닫는 원리가 되겠습니다.

컨트롤 하나하나 일일이 Focus이벤트 코드를 추가하는 방법을 사용할수도 있겠지만, 이번시간에 소개해 드릴방법은 Attached DependencyProperty를 사용하여 간단하게 Screen Keyboard를 지원하도록 구현했습니다. 사용할때에는 아래와 같이 사용할 수 있습니다.

아래는 Attached DependencyProperty를 구현한 소스코드입니다.

public static class OSKHelper
{

// Target Control에 Focus 되었을 경우 실행할 Keyboard Application
	public static string ScreenKeyboardFile = "osk.exe";
	public static Process ScreenKeyboardInstance = null;

// Target Control의 Focus이벤트를 처리하는 EventHandler
	private static RoutedEventHandler FocusEventHandler = new RoutedEventHandler(FocusHandler);

// Attached DependencyProperty선언 부분
	public static readonly DependencyProperty IsSurpportScreenKeyboardProperty =
		DependencyProperty.RegisterAttached("IsSurpportScreenKeyboard", typeof(bool?), 
		typeof(OSKHelper), 
		new FrameworkPropertyMetadata(null, new PropertyChangedCallback(IsSurpportScreenKeyboardChanged)));

public static bool GetIsSurpportScreenKeyboard(FrameworkElement Target)
	{            
		return (bool)Target.GetValue(IsSurpportScreenKeyboardProperty);
	}

public static void SetIsSurpportScreenKeyboard(FrameworkElement Target, bool? Value)
	{
		Target.SetValue(IsSurpportScreenKeyboardProperty, Value);
	}

// Target Control의 IsSurpportScreenKeyboard Property가 변경되었을때 처리
	public static void IsSurpportScreenKeyboardChanged(DependencyObject Sender, DependencyPropertyChangedEventArgs e)   
	{
		FrameworkElement Target = Sender as FrameworkElement;

// IsSurpportScreenKeyboard Property가 True라면 EventHandler를 추가.
		if ((bool)e.NewValue )
		{
			Target.GotFocus += FocusEventHandler;
			Target.LostFocus += FocusEventHandler;
		}
		// IsSurpportScreenKeyboard Property가 True가 아니고, EventHandler를 추가되었었다면
		// Event Handler를 제거
		else if (FocusEventHandler.GetInvocationList().First().Target == Target)
		{
			Target.GotFocus -= FocusEventHandler;
			Target.LostFocus -= FocusEventHandler;    
		}   
	}

static void FocusHandler(object sender, RoutedEventArgs e)
	{
		FrameworkElement Target = sender as FrameworkElement;
		FrameworkElement Source = e.Source as FrameworkElement;

// IsSurpportScreenKeyboard Property가 False인데 EventHandler가 등록되었다면, 제거
		if ((bool?)Target.GetValue(IsSurpportScreenKeyboardProperty) == false)
		{
			Target.GotFocus -= FocusEventHandler;
			Target.GotFocus -= FocusEventHandler;
			return;
		}
		// IsSurpportScreenKeyboard Property가 False가 아니고 RoutedEvent가 GotFocus이며,
		// Source Control이 TextBox이거나 PasswordBox일때 Keyboard Application를 실행
		else if ((bool?)Source.GetValue(IsSurpportScreenKeyboardProperty) != false &&
			e.RoutedEvent == FocusManager.GotFocusEvent && (e.Source is TextBox || e.Source is PasswordBox))
		{
			ScreenKeyboardInstance = Process.Start(ScreenKeyboardFile);
		}
		// RoutedEvent가 LostFocus이고 ScreenKeyboard Application이 생성되어 있다면 종료,
		else if (e.RoutedEvent == FocusManager.LostFocusEvent && ScreenKeyboardInstance != null)
		{
			if (ScreenKeyboardInstance.HasExited == false)
				ScreenKeyboardInstance.CloseMainWindow();
			ScreenKeyboardInstance = null;
		}

}

동작원리는 위에서 설명드린것과 동일하며 Attached Dependency Property를 이해하고 있다면, 어렵지 않게 이해하실수 있을것 같습니다 ^^ 이상으로 이번 포스팅을 마치며 질문의나 문의 사항은 언제든지 연락주시기 바랍니다 ^^ 감사합니다.

소스코드입니다.

OnScreenKeyboardSample.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.