뉴미디어 & WPF - MediaElement Sync

안녕하세요 LiveDK(이동규) 입니다.

 

(그림.1)

 

 저는 현재 뉴미디어쪽에서 새로운것을 배우고 활용하고 있는 곳에서 일을 하고 있습니다. 이 곳에서 프로젝트를 진행중에 두개의 미디어를 동시에 재생하게될 경우가 생겼었습니다. 제가 이방법을 고안하기 전까지 기존에는 이미지 시퀀스라는 방식을 사용해 왔었습니다. 이미지 시퀀스란 동영상을 프레임별로 고화질의 이미지로 저장시키고 이 이미지를 를 빠르게 순서대로 화면에 뿌리는 것입니다. 정해진 순서가 있기때문에(인덱스를 알고 있으므로) 동시에 다른곳에서도 같은 화면을 재생하는것이 쉬웠습니다. 하지만 일반 하드디스크 나아가 SSD를 사용한다 해도 버벅이는 현상을 피할 수가 없습니다. 해결방법으로는 램디스크에 이미지들을 로드하여 플레이 하는것입니다. 이러한 이미지 시퀀스를 통해 동영상의 동기화를 맞추는 방법은 화질이 좋다는 장점이 있지만 그보다 여러 세팅문제,끊김문제등으로 인해 단점이 더 크다고 볼 수 있습니다.

 이러한 문제를 인식하고 동영상 원본을 그대로 활용하여 미디어의 동기화를 맞추는 방법을 생각해 보았습니다. (그림.1)과 같이 WPF를 이용하여 두개의 MediaElement 를 띄워 같은영상을 반으로 자른 영상을 플레이 하는것입니다. 기본틀은 (코드.1)와 같이 그리드 내에 두개의 MediaElement 가 있으며 시간을 표시하기위한 TextBlock이 존재합니다.

 

(코드.1)

 

생각1. MediaElement 의 Position 속성을 이용하여 재생하기

 

동시에 영상을을 재생하기 위해 단순히 생각한 결과는? 그래 동시에 같은 위치를 맞춰주면 되겠지! 라고 생각하여 MediaElement 의 Position 속성을 이용해 보았습니다. (코드.2)와 같이 일정한간격으로 기준이 되는 영상의 현재 Position을 다른 영상에 대입함으로서 같은 재생 위치를 맞추는 것입니다.

 

(코드.2)

 

타이머를 이용하여 1초에 10번을 싱크를 맞추는 코드입니다. 기준이 되는 media_01 의 Position을 media_02에 대입하여 같은 부분을 재생해보려고 하였습니다. 하지만 결과는 굉장히 처참합니다. 오히려 안하니만 못하는 결과를 볼 수 있을 것입니다. 문제점은 바로 Position 속성입니다. 이 속성은 한번 대입하게 되면 바로 적용 되는것이 아니라 인터넷에서 동영상 Seek 하듯이 딜레이가 발생하게 되어 속도가 점점 느려저버리게 됩니다. 혹시 이런 의문이 드신다면? - 최초 한번만 맞추면 되지 않느냐? 대답은 아니요 입니다. 동시에 재생되었다고 하더라고 시간이 지나면 점점 차이가 나게 되며 컴퓨터 프그램이다 보니 플레이 재생상에 딜레이가 발생할 수 있으므로 주기적으로 맞춰줘야 처음부터 끝까지 싱크를 맞출 수 있습니다. 이 방법은 실패로 돌아 갔습니다.

 

생각2. MediaElement 의 SpeedRatio 속성을 이용하여 재생하기

 

MediaElement의 SpeedRatio 속성은 미디어의 재생 속도를 조절 할 수 있습니다. double 형의 값으로 기본값은 1입니다. 이보다 높으면 재생속도가 빨라지면 반대라면 느리게 재생이 되게 됩니다. (코드.3)과 같이 일정한 간격마다 기준영상의 시간과 상대영상의 시간을 비교하여 기준영상보다 빠르다면 SpeedRatio 를 줄여 느리게 재생하고, 기준보다 느리다면 SpeedRatio 를 증가시켜 따라 잡는 알고리즘(?) 입니다.

 

(코드.3)

 

테스트 결과 생각.1 보다 만족하는 결과을 얻을 수 있음을 볼 수 있습니다. 두개의 미디어의 차이를 조금씩 맞춰 나가게 되는데, 좀더 각격을 잘 조절하고 차이값에 따라 SpeedRatio 를 조절한다면 완벽한 미디어 동기화를 만들 수 있을 것입니다.

 

이로서 두개의 미디어 싱크를 맞추는 방법에대해서 알아 보았습니다. 이외에도 다른 방법들로 미디어의 동기화를 맞추는 프로그램이 존재하겠지만 WPF 를 사용하여 간단하게 구현 해 볼 수 있습니다.

 

아래 링크에서 프로젝트 + 샘플영상(2개) 를 받으 실 수 있습니다.

 

FlowDocumentViewer, FlowDocument

안녕하세요 LiveDK 입니다.

 

오랜만의 포스팅입니다. 훈스닷넷 WPF 시삽을 활동하면서 QnA쪽을 살피고 답을하는 과정에서 필요한부분은 블로깅을 통해서도 남겨야 할듯하여 이렇게 남깁니다.(기억력이 부족한 저에겐...ㅎ)

 

질문은

WPF에서 FlowDocument를 만들긴 하였지만 이를 실질적으로 화면에 뿌리기 위해서 어떻게 해야하는것입니다. (실제질문)

 

(FlowDocument 란? 참고 - http://msdn.microsoft.com/ko-kr/library/system.windows.documents.flowdocument.aspx)

 

pic.1 FlowDocument 생성

 

 

pic.1 처럼 자신의 프로젝트에 FlowDocument를 생성하고 위에 링크에서 FlowDocument를 미리 작성한 예제가 있으니 복사하셔서 테스트 해보시면됩니다. 이렇게 생성된 xaml 파일을 원하는곳에서 불러 FlowDocumentViewer 로 보여주기 위해선 아래와 같이 작업을 해주어야합니다. 단순히 대입연산자를 통해 쉽게 나오지 않습니다.(훈스닷넷 게시판에 질문올린 내용도 그러합니다.)

 

[code csharp] FileStream xamlFile = new FileStream(@"C:\Data\FlowDocument1.xaml", FileMode.Open, FileAccess.Read); FlowDocument content = XamlReader.Load(xamlFile) as FlowDocument; flow_viewer.Document = content; [/code]

 

간단하게 자신이 만든 FlowDocument 를 FlowDocumentViewer의 Document 로 지정하는 방법을 알아보았습니다. 오랜만의 포시팅이라 역시 자연스럽지 못하네요ㅎ 감사합니다.

 

[WPF] 네비게이션 #1 - 페이지 전환

WPF 페이지의 전환 서비스 

 

안녕하세요 DKLEE (이동규) 입니다.
이번 강좌에서는 WPF 의 NavigationService 를 사용하여 Page간의 전환을 따라하기 예제를 통해 알아보겠습니다. [그림 1]과 같이 페이지 전환이 가능하고 네비게이션바를 통해 다시 돌아갈 수 있는 기능을 살펴보겠습니다. Host 라고 이름지은 NavigationWindow 에서 Page1 과 Page2가 전환되는 예제를 구현해 보겠습니다. 개발도구는 Visual Studio 2008 입니다.
 

[그림 1]

자 이제 강좌를 시작하겠습니다!!

[그림 2]
 

[그림 3]

[그림 2]와 같이 새 프로젝트를 생성하게 됩니다. 생성이 완료되면 [그림 3]처럼 솔루션 탐색기에 나오게 됩니다. 이번 강좌에서는 Window 요소를 사용하지않기 때문에 Windows1.xaml을 삭제를 하고 새로운 Window 즉, NavigationWindow 를 만들어 보겠습니다. [그림 4] 참조

 

[그림 4]

 

새로운 창의 이름을 'Host'로 명하여 만들고 비하인드 코드로(단축키 F7) 넘어와서 상속 클래스를 기존의 Window 에서 NavigationWindow로 [그림 5]와 같이 변경 하겠습니다.(왼쪽에서 오른쪽으로)

 

[그림 5]

 

위의 과정대로 상속 클래스의 변경이 완료되었다면 다자인 코드(XAML)로 다시 넘어와(단축키 Shift+F7) 몇가지 수정을 해야합니다. 아래 [그림 6]을 통해 코드의 변화를 살펴 보겠습니다. 노란색으로 강조된 부분이 변경된 코드입니다.

 

[그림 6]

 

디자인 코드를 살펴보면 우선 Window -> NavigationWindow로 변경 되었습니다. 또한 Source 속성을 추가해 줄수 있습니다. 이를 통해 최초 로드되는 페이지를 설정해 줄 수 있습니다. 이번 예제에서는 Page1 에서 Page2 로 전환을 살펴보기 위해 최초 페이지는 Page1 으로 하겠습니다. 하지만 아직 Page1 은 작성되지 않았기때문에 [그림 7]과 같이 Page1.xaml 을 추가해 보겠습니다. 이어서 Page2.xaml 또한 추가하겠습니다. (페이지 추가에 주의)

 

[그림 7]

 

다음으론 실제로 페이지 전환을 위해 링크를 만드는 방법을 두가지로 알아보겠습니다. 첫번째는 비하인드 코드에서 두번째는 다자인 코드에서 입니다. 아래 [그림 8]에서 두가지를 비교해 보았습니다만 역시 디자인 코드에서의 작성이 조금더 간결한거 같습니다. 텍스트 블럭안에 Hyperlink 를 통해 연결하였습니다.(왼쪽 - 코드비하인드 / 오른쪽 - 디자인코드)

 

[그림 8]

 

이제 실행해볼 일만 남았습니다. 하지만 여기서 실행하게되면 런타임시에 에러가 나오게 되는데요 이유는 App.xaml 내에 시작 Uri 기본 설정이 이전에 삭제했던 Windows1 로 되어 있기 때문입니다. App의 디자인 코드로 넘어와서 다음과 같이 수정해주셔야 합니다.

 

StartupUri="Host.xaml"

 

실행을 하여 "Go to Page 2" 를 클릭하게되면 정상적으로 다음페이지로 넘어 가게되는 모습을 볼 수 있습니다. 또한 다음페이지로 넘어가게되면 인터넷 익스플로러와 같이 네비게이션 바에 화살표가 활성화 되는것을 볼 수 있고 히스토리또한 남는 것을 확인할 수 있습니다. 보기에는 복잡해 보이지만 직접 따라 해보시면 굉장히 간단하게 구현됨을 볼 수 있습니다. 이상으로 이번 강좌를 마치겠습니다. 다음 강좌에서는 네비게이션에서 가장 중요한 데이터 전달입니다. 단순 화면만 넘겨 보여줄 프로그램은 없다고 생각됩니다. 차례대로 페이지가 넘어가면서 데이터 전달또한 필요하게 됩니다. 다음 강좌를 기대하세요^^

 

PageNavigator.rar

 

 

훈스닷넷 정기세미나 RIA 파트 - WPF 3D

안녕하세요 DKLEE(이동규) 입니다.

 

이번 2010년 2월 25일에 진행하였던 훈스닷넷 RIA 파트 정기세미나 발표자료와 동영상을 아래와 같이 첨부합니다. 저의 첫 공식적인 세미나 이였습니다. 비록 긴장도 많이하고 라이브 코딩도중 대공황 상태에 빠졌지만 어뜨케든 끝나긴 끝났네요^^

 

"WPF 3D 기초부터 활용까지" 자료 첨부합니다. 발표자는 전호진, 이동규 입니다.

 

[발표자료]

 

동영상을 올렸으나

총길이가 44분인 관계로

서비스 해주는 곳이 없네요

 

필요하신분은

livedk at gmail.com

 

 

 

WPF Copy Listbox Items to Listbox

 훈스닷넷 WPF 게시판에 Listbox1 에 있는 내용을 Listbox2 로 복사하는 질문이 올라와서 답변을 해주는 과정에서 테스트를 하던중 내용이 간단하고 다른분들도 궁금해 하실 부분이 있을거라 생각하여 이렇게 포스팅을 남깁니다.

 

문제

우선 해야할 과제는 다음과 같습니다.

Listbox1 은 MultiSelection 이 가능합니다. Listbox1에서 여러개의 Items 을 선택하고 버튼을 누르게 되면 선택된 Items 가 LIstbox2 로 추가 되어야 하는 것입니다.

 

아래 그림을 보면 간단하게 이해되실 겁니다.

 

해결책

C# 에서는 매우 간단하게 해결할 수 있습니다.

우선 Listbox1 의 속성중 SelectionMode 를 Multiple 로 변경해주셔야 합니다. 그리고 버튼 Click 이벤트를 만들어 아래와 같은 소스를 추가해주시면 됩니다.

 

[code csharp] foreach (ListBoxItem item in listBox1.SelectedItems) { listBox2.Items.Add(item.Content); } [/code]

위의 코드를 버튼을 클릭했을 경우라든지 필요할 경우 사용할 경우 foreach 구문을 돌며 아이템을 추가 해줄것입니다.

이상으로 짧고 간단한 포스팅을 마칩니다.^^

 

C# using BackgroundWorker in WinForms

BackgroundWorker 가 무엇이냐? 말그대로 뒤에서 일하시는 분입니다. 언제쓰냐? 보통 복잡한 수식계산이나 이미지 프로세싱, 웹서비스호출, 데이터베이스 트랜젝션 등 작업을 실행하는 동안에는 사용자 인터페이스가 응답하지 않을 수 있습니다. 이러한 작업으로 인한 지연이 길어져 UI가 응답을 하지 않는 경우 BackgroundWorker 구성 요소를 사용하여 이러한 문제를 쉽게 해결할 수 있습니다.

도구상자에서 우선 ProgressBar 와 BackgroundWorker 를 끌어다 놓습니다.

그리고 BackgroundWorker 의 속석중 비동기 부분을 모두 True 로 바꿔 주셔야 합니다.

다음은 코드입니다.

정말 간단하네요^^ㅎ

MFC - Custom Control

MFC - Custom Control 에 대한 발표 자료입니다.^^