열이 Blog : )

Visual Studio 2017에서 .net framework 4.0 버전의 프로그램을 

clickone로 배포하기 위해서는 필수구성요소에 포함시켜야 하는데요.

우선 포함시켜야 하는 요소들의 Package가 필요합니다.

검색해보니 정리가 잘된 곳이 있더군요.

https://git.chemsorly.com/Docker/Msbuilder/tree/master/Files/Bootstrapper/Packages

복사할 경로는 다음과 같습니다.

C:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages

XP 일 경우 지난 포스팅 참고

http://shine10e.tistory.com/132?category=330666

개발을 진행하다 보면 다양한 스타일의 버튼을 만들게 되는데요.

Round 스타일이나 Mouse Over, Pressed 같은 경우에 색을 변경해야 경우가 많습니다.

이런 속성을 추가한 Custom Button을 만들어 사용하는 것도 한 방법이 되겠습니다.

그래서 CornerRadius 와 Mouse Over, Pressed 이벤트시 Background 와 BorderBrush 의 색상을 변경하는 프로퍼티를 가지는

간단한 버튼 컨트롤을 만들어 보았습니다.

xaml

<Button x:Class="Wpf.Controls.CustomButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" Template="{DynamicResource ButtonTemplate}"> <Button.Resources> <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"> <Border x:Name="border" CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsDefaulted" Value="True"> <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" TargetName="border" Value="{Binding MouseOverBackgroundBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, TargetNullValue=#FFBEE6FD}"/> <Setter Property="BorderBrush" TargetName="border" Value="{Binding MouseOverBorderBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, TargetNullValue=#FF3C7FB1}"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" TargetName="border" Value="{Binding PressedBackgroundBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, TargetNullValue=#FFC4E5F6}"/> <Setter Property="BorderBrush" TargetName="border" Value="{Binding PressedBorderBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, TargetNullValue=#FF2C628B}"/> </Trigger> <Trigger Property="ToggleButton.IsChecked" Value="True"> <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/> <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/> <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/> <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Resources> </Button>

WPF 프로젝트 진행 중 필요에 의해 만들게 된 한/영 가상 키보드입니다.

키 이벤트 발생은 Windows Input Simulator 를 사용하였고 XP에서는 한글 조합이 되지 않는 경우가 발생하여 키보드와 마우스를 훅킹하여 특정 이벤트에 대한 예외처리를 하였습니다.

프로젝트에 필요한 키 배열만 갖추고 있으니 필요한 키는 만들어 사용하시기 바랍니다.

source: https://github.com/daeyeol/wpf-virtual-keyboard

- 영문

- 한글

- 키패드

WPF 는 엘리먼트들에게 다양한 효과를 주기 위해서 BitmapEffect 와  Effect 클래스에서 파생된 BlurEffect, DropShadowEffect, ShaderEffect 를 사용할 수 있습니다.

이번 포스트에서는 ShaderEffect 클래스를 상속받아 사용자 정의 픽셀 셰이더를 만드는 방법과 영상의 알파 채널을 제거하는 간단한 샘플을 만들어 보겠습니다.

- Shader Effects BuildTask and Templates 설치

1. http://wpf.codeplex.com/releases/view/14962 에서 Shader Effects BuildTask and Templates.zip 을 다운로드 받습니다.

2. 압축을 풀고 ShaderBuildTaskSetup.msi 를 설치합니다.

3.  readme.txt 파일 내용대로 Templates 폴더를 Visual Studio 가 설치된 폴더의 Templates에 덮어 씌웁니다. ( VS 2012 )

4. 다음 그림과 같이 WPF Shader Effect Library 프로젝트 템플릿이 추가된 것을 확인합니다.

5. WPF Shader Effect Library 프로젝트 템플릿으로 프로젝트를 생성하면 다음과 같은 기본 아이템들이 자동으로 추가 됩니다.

Effect1.fx 는 픽셀 셰이더의 내용을 구현하는 파일이고 Effect1.cs 파일에서 사용할 수 있는 클래스로 매핑 시켜주는 내용을 작성합니다.

EffectLibrary.cs 는 헬퍼 메소드를 포함하고 있습니다.

실제적으로는 .fx 파일을 컴파일한 .ps 파일을 사용하게 됩니다.

그럼으로 .fx 파일은 빌드 속성을 항상 Effect 로 지정해주어야 합니다.

.ps 파일을 생성하는 다른 방법으로는

DirectX SDK 를 설치하고 fxc.exe 를 통해서 직접 만들어서 사용할 수도 있습니다.

fxc /T ps_2_0 /E main /Fo<name or HLSL file>.ps <name of HLSL file>.fx

fxc /T ps_2_0 /E main /Foeffect1.ps Effect1.fx

- Sample ( Alpha Channel Video )

[ ColorKeyAlphaEffect.fx ]

[ ColorKeyAlphaEffect.cs ]

[ Image ]                                                                            [ Video ]

[ Result ]

Reference

http://www.codeproject.com/Articles/71617/Getting-Started-with-Shader-Effects-in-WPF

https://www.safaribooksonline.com/library/view/hlsl-and-pixel/9781449324995/ch04.html

http://blogs.msdn.com/b/greg_schechter/archive/2008/05/12/a-series-on-gpu-based-effects-for-wpf.aspx 

http://blogs.msdn.com/b/jaimer/archive/2008/10/03/announcement-wpf-shader-effects-library-on-codeplex.aspx

https://onedrive.live.com/view.aspx?cid=123EC1ED6C72A14A&resid=123ec1ed6c72a14a%21171&app=Word

TransparencyEffect.zip

Word Cloud 는

어떤 데이터에 포함된 단어들의 빈도수를 시각적으로 표현해 주는 것을 말합니다.

data visualization ( 데이터 시각화 ) 의 한 방법으로

보통 키워드 ( 단어/텍스트 ) 들을 어떠한 공간이나 형태에 랜덤하게 배치해 줌으로써 시각화 되어집니다.

이런 Word Cloud 처럼

텍스트들을 어떠한 형태로 배치해야 하는 일이 있어, 

테스트 해보기 위해 프로토 타입으로 작성했던 프로그램과 

나름 여러가지 테스트와 고민을 통해 얻게 된 내용에 대해 포스팅합니다.

프로그램은 다음과 같은 작업을 합니다. 

반복횟수, 최대 폰트 사이즈, 최소 폰트 사이즈, 회전, 폰트 효과, 폰트를 설정할 수 있고,

이미지를 불러들여 입력된 텍스트들을 그 형태에 맞게 그립니다.

다음과 같은 결과물을 얻을 수 있습니다.

초기에 다음과 같은 알고리즘으로 시작하였습니다. 

1. 영역을 나눈다.

3. 영역마다 다음을 수행한다.

2. 영역 범위안의 랜덤한 위치에 최소, 최대 폰트 사이즈 사이의 텍스트를 생성한다.

4. 다른 텍스트와 겹치지 않는지 확인한다.

5. 겹치는 횟수가 정해진 카운트 값을 초과하지 않을 때까지 반복한다.

하지만 다음과 같은 단점들이 있었습니다.

1. 영역을 나누기 위해서는 이진화 이미지가 필요하다.

2. 영역을 나누기가 쉽지 않다. ( 영상처리가 필요하다. )

3. 정밀성을 높이기 위해서는 카운트 횟수가 많아야 한다.

4. 카운트 횟수가 높을 수록 소요시간이 너무 길어진다.

5. 폰트 사이즈가 크면 이질감 있게 보인다.

이런 단점들을 보완하기 위해 여러 테스트와 리서치를 진행했고, 

processing 으로 작성되어 있는  Scattered Letters 를 통해 방향을 잡게 되었습니다.

폰트 사이즈를 랜덤하게 생성하는 것이 아닌 최대 폰트 사이즈에서 최소 폰트 사이즈까지

점차 줄여가야 함을 알게 되었습니다.

현재는 다음과 같은 알고리즘을 사용하고 있습니다.

1. 텍스트가 그려질 영역 정보를 설정한다. ( default : 현재 이미지 영역  )

2. 원본 이미지와 동일한 사이즈의 빈 이미지를 2개 생성한다. ( result, temp )

3. 영역 마다 다음을 수행한다.

4. 현재 폰트 사이즈를 현재 영역의 최대 폰트 사이즈로 설정한다.

5. 현재 폰트 사이즈가 영역의 최소 폰트 사이즈 보다 클 동안 다음을 반복한다. ( 현재 폰트 사이즈를 줄여간다. )

6. 현재 폰트 사이즈의 텍스트를 생성한다. ( rotation 옵션 )

7. 성공할 때까지 정해진 반복횟수만큼 다음을 시도한다.

8. 현재 영역안에서 텍스트가 그려질 위치를 설정한다.

9. 텍스트가 그려질 영역에 해당하는 원본 이미지 픽셀에서 다음을 확인한다.

10. 흰색인지 확인한다. ( 흰색이면 fail )

11. 텍스트가 그려질 영역의 중심점 픽셀과 픽셀들을 비교한다. ( 차이가 10보다 크면 fail, 영역이 다른 것으로 간주 )

12. 9, 10 번이 성공하면 텍스트를 이미지화 시켜 픽셀 데이터를 생성한다. ( png )

13. 텍스트가 그려질 영역에 해당하는 temp 이미지 픽셀에서 텍스트 픽셀이 겹치지 않는지 확인한다. ( 겹치면 fail )

14. 겹치지 않으면 텍스트에 설정된 효과 ( Blur, Boundary, Stroke, None ) 를 적용하여 새로운 픽셀 데이터를 생성한다.

15. 새로운 픽셀 데이터는 temp 이미지에, 기존 텍스트 픽셀은 result 이미지에 그린다.

말이 길지만 간단하게 요약하자면,

텍스트가 그려질 영역 정보를 설정하는 건

좀 더 디테일 하게 그려져야 할 부분을 설정하기 위함입니다. ( 자동으로 찾으면 좋겠지만.. )

영역마다 설정된 최대 폰트 사이즈부터 폰트 최소 사이즈까지 줄여가며 텍스트를 채워갑니다. 

픽셀 값의 경계를 구분하기 위해 

텍스트가 그려질 위치의 중간 픽셀 과의 차이값을 이용했습니다. 

차이가 10정도 나면 다른 영역이라고 판단합니다.

텍스트의 여백을 설정하기 위해 Blur, Boundary, Stroke, None 이라는 타입을 설정했습니다.  

Blur 는 텍스트에 Blur 효과를 적용합니다.  

Stroke 는 텍스트에 Stroke를 설정합니다.  

Boundary 는 텍스트의 영역을 사용합니다. 

None 은 아무 효과도 사용하지 않습니다.

Blur 와 Stroke 는 텍스트 형태에 맞게 어느 정도 여백을 가집니다.

Boundary 는 텍스트의 외곽 안쪽 영역의 여백을 가집니다.

None 은 텍스트에 여백없이 빽빽하게 채워집니다.

각 결과물은 다음과 같습니다.

[ Blur ]

[ Stroke ]

[ Rotation ]

[ 한글 ]

WordCloud.zip

WordCloud_exe.zip