Blog | Tag | Local | Guest | Login | Write |  RSS
2008/10/21에 해당되는 글 3건
2008.10.21 :: Mouse Over Detail View 1
Machine Learning Introduction

Machine Learning

우리나라말로 기계학습을 의미한다.

Machine Learning의 분류는 supervised learning과 unsupervised learning이 있다.

즉, training data를 가지고 learning algorithm을 적용할 수 있는 supervised learning과 training data의 존재 없이 learning을 하게 되면 unsupervised learning이 있다.

supervised learning의 예.
  search by humming - 사람의 humming 만으로도 음악 검색. http://www.midomi.com/

unsupervised learning의 예.
  BSS(blind source separation) - 두개의 섞인 음을 분리. http://cnl.salk.edu/~tewon/Blind/blind_audio.html

이상 machine learning에 대한 소개를 마친다.

다음 블로깅에는 supervised learning algorithm중의 하나인 linear regression에 대한 소개를 하겠다.~


오늘은 MSRDS의 기본(?)되는 VPL에 대해 소개 하려 합니다.~

먼저 MSRDS를 다운 받으셔서 설치를 해야 하는데..-ㅁ-a

다운로드 페이지 링크는 여기로~~

http://www.microsoft.com/downloads/details.aspx?FamilyId=57CE326B-2125-4163-A33F-ED2F69E03B56&displaylang=en#filelist

오프라인 설치 파일인 333.2MB 용량의 파일을 받으시면 됩니다.

비스타 64비트도 지원하고... 참 비스타에서는 실행할 때 관리자 모드로 실행하세요~ 반드시~~ ㅠㅠ

그거땜에 삽질한거 생각하면 정말.. ㅜㅜ




마이크로소프트 비주얼 프로그래밍 언어(VPL)는 이전의 프로그램 작성에서 보이는 제어 흐름보다 그래픽적 데이터 흐름에 기반을 둔 프로그래밍 모델로 디자인된 애플리케이션 개발 환경입니다. 데이터 플로우 프로그램은 명령의 집합을 순차적으로 실행하는 것이라기 보다는 재료가 도착하는 것에 따라 주어진 업무를 수행하는 조립 라인의 일련의 근로자와 같습니다. 그 결과 VPL은 여러 가지의 동시형 또는 분산 처리 시나리오를 프로그램하는 것에 아주 적합합니다.

VPL은 변수와 논리와 같은 개념에 대한 기본 이해가 필요한 초보 프로그래머에 적합합니다. 그러나, VPL은 초보자에게 제한되지 않습니다. 프로그래밍 언어의 구성적 성질은 빠른 프로토타이핑 또는 코드 개발을 위해 고급 프로그래머에게도 매우 유용할 것입니다. 또한, VPL의 툴박스가 로봇 애플리케이션을 개발에 맞춰져 있지만 근본적인 구조는 로봇 프로그래밍에 제한되지 않고, 다른 애플리케이션에도 적용될 수 있습니다. 그 결과, VPL은 학생, 애호가/동호인을 포함해 웹 개발자와 전문 프로그래머까지 넓은 사용자들에게 흥미로울 것입니다.


VPL 다이어그램의 예

마이크로소프트 비주얼 프로그래밍 언어 데이터 플로우는 다른 activity 블록에 연결될 수 있는 입력과 출력을 가진 블록으로 표현된 activity들의 연결된 순서로 구성됩니다.


위 그림에서 Data, Calculate, Variable 등 하나의 블록이 Activitie 입니다~.
 
Activitie는 사전에 빌드된 서비스, 데이터 흐름 제어, 함수 또는 다른 코드 모듈을 표현할 수 있습니다. 결과적인 애플리케이션은 그러므로 개별 프로세스의 순서화인 오케스트레이션이라 불립니다.

Activity는 또한 다른 activity들의 조합을 포함할 수 있습니다. 이것은 activity을 조합하고, 빌딩 블록으로 조합을 재사용하는 것을 가능하게 합니다. 이점에서 VPL로 만들어진 애플리케이션은 그 자체로 activity입니다.

Activity 블록은 그 연결 점을 나타내는 activity의 이름과 경계를 일반적으로 포함합니다. activity 블록은 또한 사용자가 activity에 사용될 데이터 값 입력, 할당 또는 변환을 위한 사용자 인터페이스 요소 및 activity의 목적을 설명하기 위해 그래픽을 포함할 수 있습니다.


SimpleDialog, GenericMotor 등 그림만 봐도..!
Activity는 그들의 연결 핀을 통하여 연결 됩니다. activity의 좌측의 연결 핀은 입력 메시지를 위해 연결 점을 표시합니다. 그리고 우측 핀은 출력 메시지를 위한 연결 점을 표시합니다.
Activity는 그 입력 연결 핀을 통하여 데이터가 포함된 메시지를 수신합니다. activity의 입력 핀은 action 또는 핸들러로 알려진 미리 정의된 내부 함수로의 연결 점입니다.

유효한 입력 메시지를 수신하면 activity 블록은 가동되고 수신된 메시지 데이터를 처리합니다. activity에 보내지는 모든 데이터는 해당 activity에 의해 소모됩니다. activity의 출력을 통해 데이터를 포워드하기 위해서는 수신 activity는 데이터를 복제해야 하고, 그것을 출력 연결에 넣어야 합니다.

Activity는 다중 입력 연결 핀과 그 각각에 대한 출력 연결 핀을 가질 수 있습니다. 출력 연결 핀은 두 개의 종류입니다: 결과 출력 또는 알림 출력(때때로 이벤트 또는 publication 출력이라고 불림) 중에 하나일 수 있습니다. 결과 출력은 직사각형 연결 핀으로 publication 출력은 둥근 연결 핀으로 표시됩니다.


출력 메시지(데이터)가 특정 입력 실행 메시지의 결과로 전송될 때 응답 출력 핀이 사용됩니다. 알림 핀은 입력된 activity 메시지의 결과로 정보를 보내는 데 사용되지만, 일반적으로 내부 상태변화를 메시지로 전송할 때 사용됩니다. 결과 핀은 단지 입력 메시지의 수신에서 대해 하나의 메시지를 보내지만 알림 핀은 또한 메시지 여러 번 생성할 수 있습니다. 따라서 알림 출력 핀은 메시지 데이터를 반복적으로 전송할 때 사용됩니다.



다음 시간엔....  튜토리얼을 따라 실행 해보는 방법을..?-ㅁ-aa

Mouse Over Detail View

이번시간에는 XAML만을 사용하여 쇼핑몰 등에서 사용 가능한 Detail View를 구현해보도록 하겠습니다. (이번에도 역시 정확한 이름짖기가 애매해서 -_- Detail View라고 했습니다.) 아래는 시연 동영상 입니다.



제가 좋아하는 만화중에 하나인 드래곤볼입니다ㅎㅎ 기능에 대해서 설명하자면 화면 왼쪽에는 손오공이 오른쪽에는 베지터라는 메뉴가 있습니다. 해당 메뉴에 마우스를 오버 할 경우 해당 메뉴에서 더 보여주고 싶은 자세한 내용을 포함 할 수 있습니다. 소스코드를 본 뒤 더 자세히 이야기를 해보겠습니다.

  1. <WINDOW title="DragonBall - WPFKOREA(http://whatisthat.co.kr)" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="DragonBall.Window1" Width="600" Height="400">  
  2.     <WINDOW.RESOURCES>  
  3.         <IMAGEBRUSH x:Key="Background" ImageSource="Background.jpg" />  
  4.            
  5.         <STYLE TargetType="Button" x:Key="ProfileBox">  
  6.             <Style.Resources>  
  7.                 <Style TargetType="TextBlock">  
  8.                     <Setter Property="Foreground" Value="White"/>  
  9.                     <Setter Property="TextAlignment" Value="Center"/>  
  10.                     <Setter Property="FontSize" Value="11"/>  
  11.                     <Setter Property="FontFamily" Value="Trebuchet MS"/>  
  12.                     <Setter Property="VerticalAlignment" Value="Center"/>  
  13.                     <Setter Property="HorizontalAlignment" Value="Center"/>  
  14.                     <Setter Property="Cursor" Value="Hand"/>  
  15.                 </STYLE>  
  16.             </STYLE.RESOURCES>  
  17.                
  18.             <SETTER Value="Black" Property="Background" />  
  19.             <SETTER Value="55" Property="Width" />  
  20.             <SETTER Value="17.5" Property="Height" />  
  21.   
  22.             <SETTER Property="Template">  
  23.                 <SETTER.VALUE>  
  24.                     <CONTROLTEMPLATE>  
  25.                         <GRID Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="{TemplateBinding Background}">  
  26.                             <TEXTBLOCK Text="{TemplateBinding Tag}" />  
  27.                             <CONTENTPRESENTER x:Name="ContentBase" Opacity="0" Content="{TemplateBinding Button.Content}" />  
  28.                         </GRID>  
  29.                         <CONTROLTEMPLATE.TRIGGERS>  
  30.                             <TRIGGER Value="True" Property="Button.IsMouseOver">  
  31.                                 <TRIGGER.ENTERACTIONS>  
  32.                                     <BEGINSTORYBOARD>  
  33.                                         <STORYBOARD Storyboard.TargetName="ContentBase">  
  34.                                             <DOUBLEANIMATION Storyboard.TargetProperty="(Grid.Height)" Duration="0:0:0.5" To="175" />  
  35.                                             <DOUBLEANIMATION Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0.5" To="142.5" />  
  36.                                             <DOUBLEANIMATION Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" To="1" />  
  37.                                         </STORYBOARD>  
  38.                                     </BEGINSTORYBOARD>  
  39.                                 </TRIGGER.ENTERACTIONS>  
  40.                                 <TRIGGER.EXITACTIONS>  
  41.                                     <BEGINSTORYBOARD>  
  42.                                         <STORYBOARD Storyboard.TargetName="ContentBase">  
  43.                                             <DOUBLEANIMATION Storyboard.TargetProperty="(Grid.Height)" Duration="0:0:0.5" To="17.5" />  
  44.                                             <DOUBLEANIMATION Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0.5" To="300" />  
  45.                                             <DOUBLEANIMATION Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" To="0" />  
  46.                                         </STORYBOARD>  
  47.                                     </BEGINSTORYBOARD>  
  48.                                 </TRIGGER.EXITACTIONS>  
  49.                             </TRIGGER>  
  50.                         </CONTROLTEMPLATE.TRIGGERS>  
  51.                     </CONTROLTEMPLATE>  
  52.                 </SETTER.VALUE>  
  53.             </SETTER>  
  54.   
  55.                
  56.         </STYLE>  
  57.   
  58.         <STYLE TargetType="Button" x:Key="LeftProfileBox" BasedOn="{StaticResource ProfileBox}">  
  59.                
  60.             <Style.Triggers>  
  61.                 <Trigger Property="IsMouseOver" Value="True">  
  62.                     <Trigger.EnterActions>  
  63.                         <BeginStoryboard>  
  64.                             <Storyboard>  
  65.                                 <DoubleAnimation To="200" Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetProperty="(Grid.Width)"/>  
  66.                                 <DoubleAnimation To="30" Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetProperty="(Canvas.Left)"/>  
  67.                             </Storyboard>  
  68.                         </BeginStoryboard>  
  69.                     </Trigger.EnterActions>  
  70.                     <Trigger.ExitActions>  
  71.                         <BeginStoryboard>  
  72.                             <Storyboard>  
  73.                                 <DoubleAnimation To="55" Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetProperty="(Grid.Width)"/>  
  74.                                 <DoubleAnimation To="175" Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetProperty="(Canvas.Left)"/>  
  75.                             </Storyboard>  
  76.                         </BeginStoryboard>  
  77.                     </Trigger.ExitActions>  
  78.                 </Trigger>                   
  79.             </Style.Triggers>  
  80.                
  81.         </STYLE>  
  82.            
  83.         <STYLE TargetType="Button" x:Key="RightProfileBox" BasedOn="{StaticResource ProfileBox}">  
  84.             <Style.Triggers>  
  85.                 <Trigger Property="IsMouseOver" Value="True">  
  86.                     <Trigger.EnterActions>  
  87.                         <BeginStoryboard>  
  88.                             <Storyboard>  
  89.                                 <DoubleAnimation To="200" Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetProperty="(Grid.Width)"/>  
  90.                             </Storyboard>  
  91.                         </BeginStoryboard>  
  92.                     </Trigger.EnterActions>  
  93.                     <Trigger.ExitActions>  
  94.                         <BeginStoryboard>  
  95.                             <Storyboard>  
  96.                                 <DoubleAnimation To="55" Duration="0:0:0.5" BeginTime="0:0:0.5" Storyboard.TargetProperty="(Grid.Width)"/>  
  97.                             </Storyboard>  
  98.                         </BeginStoryboard>  
  99.                     </Trigger.ExitActions>  
  100.                 </Trigger>  
  101.             </Style.Triggers>  
  102.         </STYLE>  
  103.            
  104.     </WINDOW.RESOURCES>  
  105.     <GRID>  
  106.         <CANVAS Width="511" Height="328" Background="{StaticResource Background}">  
  107.             <BUTTON style="StaticResource: " Tag="Son Goku" Canvas.Top="300" Canvas.Left="175">  
  108.                 <IMG height=175 width=200 Source="Goku.jpg">  
  109.             </BUTTON>  
  110.             <BUTTON style="StaticResource: " Tag="Vegeta" Canvas.Top="300" Canvas.Left="275">  
  111.                 <IMG height=175 width=200 Source="Vegeta.jpg">  
  112.             </BUTTON>  
  113.         </CANVAS>  
  114.     </GRID>  
  115. </WINDOW>  



코드가 급하게 포스팅한 내용이라 코드가 상당히 지저분 하지만 전반적인 작동원리에 대해서 이해하시는데에는 크게 문제는 없을 것 같습니다. 메뉴는 기본적으로 Button을 사용하기 때문에 Button의 Style을 적용합니다. MouseOver상태에 따라서 보여줄 객체를 정하기 위해서 Trigger에 IsMouseOver Property를 적용했습니다. 두 매뉴가 확장댈때의 위치가 다르기 때문에 Left와 Right를 기존의 Style을 상속받아 확장될때의 크기를 다시 적용했습니다.

  1. <GRID Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="{TemplateBinding Background}">  
  2.     <TEXTBLOCK Text="{TemplateBinding Tag}" />  
  3.     <CONTENTPRESENTER x:Name="ContentBase" Opacity="0" Content="{TemplateBinding Button.Content}" />  
  4. </GRID>  



Button Style부분의 코드입니다. 작은 상태에서의 보여줄 텍스트는 Tag를 Template Binding하여 표현하고 확장됬을경우 보여줄 컨텐츠를 보여주기 위해 ContentPresenter를 사용했습니다. ContentPresenter의 경우 기본적으로 Opacity가 0이여서 출력되지 않으며 MouseOver시에 Opacity가 변경됩니다.

  1. <BUTTON style="StaticResource: " Tag="Son Goku" Canvas.Top="300" Canvas.Left="175">  
  2.     <IMG height=175 width=200 Source="Goku.jpg">  
  3. </BUTTON>  
  4. <BUTTON style="StaticResource: " Tag="Vegeta" Canvas.Top="300" Canvas.Left="275">  
  5.     <IMG height=175 width=200 Source="Vegeta.jpg">  
  6. </BUTTON>  



사용할 때는 위와 같이 Tag Property에 버튼의 이름을 정의하고 Content Property에 Detail View에서의 컨텐츠를 추가 하면됩니다. 급하게 포스팅하느라 내용이 약간 어수선 한 부분이 있지만 시간이 되면 다시 정리하도록 하겠습니다. 자세한 내용이나 질문은 댓글이나 메일로 보내주시기 바랍니다.