블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



[스텝바이스텝 | HOONS닷넷과 함께하는 닷넷 인사이드 포토라이트(PHOTOLIGHT)]

 

실전 실버라이트 프로그래밍,

포토라이트(PHOTOLIGHT) 만들기!

 



Photo Light 파일업로드 구현

 

웹프로젝트에서 WCF파일을 하나 생성하자. 필자의 경우 아래 그림과 같이 FileUploadService PhotoViewService 두개를 만들어 두었다.

사용자 삽입 이미지

[ WCF Service 구성 내용 ]

 

PhotoViewService는 나중에 PhotoLight에서 사용되어 질 서비스이다. 이렇게 서비스 만들었다며

Web.config파일에서 endpoint의 바인딩을 basicHttpBinding로 지정해 주어야 한다. 이유는 실버라이트에서는 basicHttpBinding만을 지원하기 때문이다. 꼭 기억해 두어 나중에 삽질을 피하자!

이제 WCF서비스 코드를 살펴보자.

 

FileUploadService.cs

[OperationContract]

public void SaveFile(FileUploadData file)

{

            provider.SaveFile(file);

}

FileUploadProvider.cs

public void SaveFile(FileUploadData file)

{

            string uploadDir = CreateDirectory(file.GroupName);

            string fname = file.FileName;

 

            if (file.IsFirst)

            {

                if (File.Exists(Path.Combine(uploadDir, fname)))

                    File.Delete(Path.Combine(uploadDir, fname));

            }

 

            FileStream stream = File.Open(Path.Combine(uploadDir, fname), FileMode.Append);

            stream.Write(file.FileData, 0, file.DataLength);

            stream.Close();

 

if (file.IsLast)

            {

                CreateThumbanil(uploadDir, fname, file.GroupName);

                CreateDeepZoomFile(uploadDir, fname, file.GroupName);

            }

}

 

SaveFile메소드는 실버라이트에서 사용될 수 있도록 OperationContract라는 어트리뷰트를 적어주어야 한다. 해당 메소드는 FileUploadProvider클래스의 SaveFile메소드를 호출하고 있다. 실제 파일업로드가 처리되는 메소드는 FileUploadProvider클래스의 SaveFile메소드이다. 코드를 살펴보면 해당 파일정보가 올라오면 지정한 루트폴더에 파일을 저장한다. 그리고 파일이 완전히 다올라 왔는지 IsLast속성을 체크를 해서 파일이 다올라오면 썸네일 이미지와 DeepZoom파일을 생성을 한다.


- Deep Zoom Composer API 활용

업로드된 이미지파일을 딥줌(DeepZoom)파일로 변환하기 위해서는 DeepZoom Composer API를 이용해야 하는데, 이를 사용하기 위해서는 먼저 서버에 DeepZoom Composer를 설치를하고,

DeepZoomTools.dll 를 프로젝트에 참조 추가를 해야한다. 참조를 하게 되면 ImageCreator라는

 함수가 있는데, 이 함수를 이용해서 간단하게 딥줌파일을 생성 할 수 있다.

 

DeepZoomHelper.cs

public void CreateDeepZoomImage()

{

            ImageCreator imgCreator = new ImageCreator();

            imgCreator.ImageQuality = 0.95;

            imgCreator.TileSize = 256;

            imgCreator.TileOverlap = 1;

            imgCreator.Create(ImgageFileName, SavePolder);

}

 

5줄의 코드면 딥줌파일이 생성이 되는 것이다. ImageCreator함수를 생성을 하고, ImageQuality 속성과 TileSize 속성, TileOverlap 속성만 지정해주었다. 이 속성들은 아래와 같다.

 

- ImageQuality 속성을 0에서 1 사이의 값으로 세팅하며, 보통 0.95 정도로 지정한다.

- TileSize 속성은 딥줌파일의 이미지 타일의 크기를 지정한다.

- TileOverlap 속성은 이미지들의 Overlap정도는 지정한다.

 

 Create함수를 통해 딥줌파일을 생성을 하는데, 첫번째 매개변수는 파일명(실제파일의 경로)이며, 두번째 매개변수는 저장되어질 디렉토리경로를 지정하면된다. 

 

이렇게 해서 대략적으로 파일업로드 어플리케이션 동작, 코드구현부분과 WCF서비스에서 처리되는 부분에 대해 알아 봤다. 이제 Photo Light 어플리케이션에 대해 알아 보도록 하자.


Posted by happydong
, |



[스텝바이스텝 | HOONS닷넷과 함께하는 닷넷 인사이드 포토라이트(PHOTOLIGHT)]

 

실전 실버라이트 프로그래밍,

포토라이트(PHOTOLIGHT) 만들기!

 


Photo Light 동작과 구현

 

코드를 살펴보기 앞서 PhotoLight에서 어떻게 데이터를 주고 받는지, 간단하게 짚고 넘어가도록 하겠다. (아래 그림을 참고하자)

사용자 삽입 이미지

위 그림에서 보면 역시 마찬가지로 노트북이 있다. 이는 클라이언트 PC라고 생각하자. PC 옆에는 키가 있는 것을 볼수 있을 것이다. 이는 데이터의 키라고 생각하면 되겠다. PhotoLight에서도 WCF서비스를 이용한다. 해당 키를 WCF서비스에 넘기면, WCF서비스는 DBServer에 데이터를 요청한후 해당 데이터를 실버라이트 어플리케이션에 보내주는 형식이다.


사용자 삽입 이미지

[ 포토라이트 프로젝트 구성 내용 ]

 

위 그림은 PhotoLight의 프로젝트 구성 모습이다. 파일업로드 프로젝트과 비슷한 구성임을 알수 있을 것이다.그럼 PhotoLight에서 주요 코드를 살펴 보도록 하겠다.

 

 먼저, ScriptManager클래스부터 보도록 하자. ScriptManager는 외부에서 스크립트(Script)함수를 통해 데이터 키를 넘겨 받게되면, ScriptManager에서는 데이터 키가 변경되었음을 알려주는 역할을 담당한다.

 

ScriptManager.cs

public class ScriptManager

{

        public event EventHandler PhotoKeyChanged;

        private String _ptKey;

        [ScriptableMember]

        public String PTKey

        {

            get

            {

                return _ptKey;

            }

            set

            {

                _ptKey = value;

                if (PhotoKeyChanged != null)

                    PhotoKeyChanged(this, EventArgs.Empty);

            }

        }

public ScriptManager()

        {

            HtmlPage.RegisterScriptableObject("PhotoLight", this);

        }

}

 

다들 아시겠지만 자바스크립트를 통해서 실버라이트 함수를 호출하기 위해서는

HtmlPage.RegisterScriptableObject 함수에 스크립트 가능한 액세스 기능을 위해 관리되는 개체를 등록을 하며, 스크립트에서 특정 함수에 접근하기 위해서는 ScriptableMember라는 어트리뷰트를 붙여주어야한다. PhotoLight에서는 PTKey라는 메소드를 스크립트에서 접근할수 있도록 지정해 주었는데 이는 키값이 바뀔때마다 PhotoKeyChanged라는 이벤트를 호출해 주게 되는 것 이다. 이 이벤트를 받는 쪽에서는 해당 키값으로 WCF서비스를 호출을 해서 데이터를 받아오게 된다.

 

-> [ WCF서비스 활용 Tip ]

 

 보통 WCF서비스에서 데이터클래스를 생성을하면 DataContract 어트리뷰트와 DataMember 어트리뷰트를 붙어서 사용했을 것이다. 이렇게 해야 직렬화(Serialization)가능해저, 실버라이트 어플리케이션에서 받을수 있기때문이며, 서비스 에러도 필할수 있기 때문 일거다. 그러나 .NET Framework3.5 SP1를 서버에 설치하면, DataContract등의 직렬화 관련 선언없이도 모든 C# Object Remoting Type으로 제공할 수 있다. 이는 .NET Framework3.5 SP1 WCF관련해서 기능이 추가 되었기 때문이다.


사용자 삽입 이미지

위 그림은 .NET Framework3.5 SP1설치 전의 코드와 설치후 의 코드를 비교해 둔 것 이다.

ㅁ 애니매이션 주기

 

 PhotoLight에서는 슬라이드보기라는 기능이 있는데 이는 여러장의 사진을 자동으로 한장한장 넘겨 주면서 보여주는 기능이다. PhotoLight에서는 샘플하게 이 기능을 구현해 보았다.

 

ShowControl.xaml

<UserControl x:Class="PhotoLight.ShowControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

        <UserControl.Resources>

               <Storyboard x:Name="ImageClose">

                       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ImageControl" Storyboard.TargetProperty="(UIElement.Opacity)">

                              <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>

                       </DoubleAnimationUsingKeyFrames>

        </Storyboard>

        <Storyboard x:Name="ImageOpen">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ImageControl" Storyboard.TargetProperty="(UIElement.Opacity)">

                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">

        <Image HorizontalAlignment="Stretch" Stretch="Uniform"  x:Name="ImageControl" />

    </Grid>

</UserControl>

 

ShowControl라는 유저컨트롤을 보시면 두개의 스토리보드(Storyboard)가 있는 것을 확인 할수 있을 것이다. 이 두개의 스토리보드는 간단한 애니매이션을 정의하고 있는데, 이는

Image 컨트롤의 Opacity 0으로 했다, 1로 하는 역할을 한다. 그래서 데이터가 변경될 때 마다 이미지의 Opacity값을 조절해서 기존이미지는 사라지고, 새로운 이미지는 부드럽게 나타나게 애니메이션으로 작성해 봤다.

 

사용자 삽입 이미지

[ 포토라이트 전체 작동 모습 ]

위 그림은 PhotoLight의 모습이다. 애니매이션이 작동되는 모습과 실제 동작되는 모습을 보고 싶은 분들은 http://temp.happydong214.com 으로 오시면 볼 수 있을 것이다. 이는 필자가 개인적으로 집에서 돌리고 있는 것이다.그래서 사정에 따라 닫힐수도 있다.

 

 지금 까지 PhotoLight의 대략적인 소스 코드와 작동내용에 대해서 알아 보았다. 필자도 실버라이트관련 회사에서 일은 하고 있지만, 아직 경험이 많지않다. 하지만, 지금까지 나왔던 개발이슈및 실버라이트에서 제공하는 기본적인 컨트롤들을 잘 이용해서 이렇게 멋진 어플리케이션을 만들어 보았다. 지금 실버라이트가 어럽다고 생각하시는 분들이 있다면, 그런 생각은 그냥 잠시 있고, 한번 미친듯이 만들어보고, 또 만들어 보자! 그러면 나중에 자신도 모르게 발전해 가는 모습을 볼수 있을 것이다.

 

 


Posted by happydong
, |



요즘 회사에서 가끔 Silverlight 설치관련 CS건을 처리하고 있다. 몇일 안됐지만 혹시나 설치문제 때문에 고민하고 있는 사람들에게 유용한 정보가 되길 바란다.(또한 나도 잊어 버리지 않기위해 포스팅한다.크큭)

문제1. 예전에 잘 봤는데 어느순간 실버라이트가 안나오는 경우.

거의 대부분은 실버라이트를 분명히 설치해서 잘 보고 있다가 갑자기 어느순간 부터 안되는 경우가 대부분이 아닐까 생각한다. 모 그렇지 안은 경우도 있지만, 몇일 CS를 해보니깐..아무것도 모르는 클라이언트들은 어느순간 갑자기 실버라이트 동영상이 안나온다고 한다. 이는 실버라이트 2에서 3로 되면서 문제 인듯하다. 이럴 때는 그냥 제어판에서 Silverlight를 찾아서 지웠다가 Silverlight 3로 깔면 된다.

사용자 삽입 이미지


이렇게 다시 깔아서 확인해 보고 되면 다행이다. (단, 실버라이트를 제 설치할때는 모든 띄워져 있는 브라우져는 꺼주길 바란다.)

문제2. 1번 과정을 수행후에도 실버라이트를 설치하라고 나옴.

 분명히 실버라이트를 삭제하고, 브라우져를 다 닫은 상태에서 설치를 했음에도 실버라이트를 제 설치하라는 멘트가 나오는 경우가있다. 이럴 경우에는 인터넷 도구 >> 추가기능관리 >> 추가기능 사용 또는 사용안함을 클릭한다. (또는, 인터넷 옵션 >> 프로그램 >> 추가기능관리 클릭!!) 여기에서 실버라이트를 찾아서 사용 안함으로 되어 있는지 확인을 한다. 사용 안함으로 되어 있을 경우 사용함으로 변경하고 확인을 클릭한다. 이후 브라우져를 닫았다가 다시 열어서 확인하면 될 것이다.

사용자 삽입 이미지



문제3. 실버라이트가 제어판에서 안지워져요.

간혹 제어판에서 프로그램을 지우려고 하는데 안지워지는 경우가 있다. 이럴때는 Windows Installer CleanUp 유틸리티를 이용해서 삭제하면된다. (다운로드) 이는 MS제품에 관련해서 삭제가 가능한 유틸리티이다. 자세한 내용은 링크를 확인 하기 바란다. (단, Vista에서는 잘 작동이 안되는 것같다. XP사용자 대상으로 확인 했을 때는 잘 작동했음.)

사용자 삽입 이미지


설치를 다하고 실행을해 보면 위 그림과 같이 띄워질것이다. 여기서 실버라이트를 찾아서 선택을하고 나면 Remove가 활성화가 될 것이다. 이를 클릭해서 지우면 깔끔하게 지워질 것이다. 이렇게 지워다면 1번 내용과 같이 다시 설치해 보라.

문제4. 실버라이트를 지웠는데...실버라이트 설치시 실버라이트가 설치가 되어 있다고 나오는 경우.

 이는 참 특이한 경우다. 오늘 이런 사용자가 있어서 처리 내용을 기록해본다. 실버라이트가 제어판에서 삭제가 되지 않아 3번 과정을 거쳐서 실버라이트를 삭제를 했다. 이후 1번 과정과 같이 제설치를 시도하는데 설치중에 이미 설치가 되어 있다고 나오는 것이다. 그래서 제어판을 확인 하니 아무데도 실버라이트 설치 흔적을 찾을수 없었다. 이상해서 2번 내용과 같이 추가기능관리를 확인을 해봤다. 그런데 거기에 실버라이트 사용이라 되있는게 아닌가...이상한다..분명히 제거 했는데...제거가 잘못 된것 같다고 생각이 되서, 레지스트리에서 Silverlight를 찾아서 제거후 1번과정으로 재설치하니 해결이 됐다.

사용자 삽입 이미지




이상 내가 경험한 몇가지 처리 방법에 대해 작성해 보았다. 나중에 또 이상한게 있으면 계속 업데이트 하겠다.

참고 링크 :  실버라이트 설치 실패를 해결하는 방법
Posted by happydong
, |