프로그래밍 – 페이지 100

2013-10-142017-01-31

CSV 포맷(Format)의 문자열(String) 파싱(Parse, Parsing)

CSV 형태로 된 문자열을 파싱하기 위한 C#언어로 작성된 함수입니다. 예전에 XrGeocoder 프로그램을 개발할때 사용했던 함수로.. 또 다른 프로젝트에서 사용되면서 함수만을 분리해 정리해 봅니다.>/p>

private List SeperateStringWithComma(String value)
{
    bool inQuotes = false;
    char delim = ',';
    List strings = new List();

    StringBuilder sb = new StringBuilder();
    foreach (char c in value)
    {
        if (c == '\'' || c == '"')
        {
            if (!inQuotes)
                inQuotes = true;
            else
                inQuotes = false;
        }

        if (c == delim)
        {
            if (!inQuotes)
            {
                strings.Add(sb.Replace("'", string.Empty).Replace("\"", string.Empty).ToString());
                sb.Remove(0, sb.Length);
            }
            else
            {
                sb.Append(c);
            }
        }
        else
        {
            sb.Append(c);
        }
    }

    strings.Add(sb.Replace("'", string.Empty).Replace("\"", string.Empty).ToString());
    return strings;
}

위의 함수를 사용하는 예제는 다음과 같습니다.

String csv = "2011-01-01,18,2008,개인,인천,중구,~,2010-12-31,233400,남자";
List values = SeperateStringWithComma(csv);

int cntValues = values.Count;
for (int i = 0; i < cntValues; i++)
{
    MessageBox.Show(values[i]);
}

2013-09-282017-01-27

Flex에서 Timeline 애니메이션 주기

greenshock의 tween 라이브러리를 사용하여 타임라인 애니메이션을 주는 것에 대해 살펴보았습니다. 요즘 UI 디자인의 추세가 정적인 부분에서는 최대한 Simple하게.. 대신 동적인 효과를 주는 것이기에 추후 고객에게 제공할 시스템에서 적용해볼 요량으로 학습하여 정리해봅니다.

원하는 효과는 다음과 같습니다. 사각형 버튼을 0.4초간 수평으로 화면의 가로 가운데로 이동하고 다시 0.4초간 수직으로 화면의 세로 가운데로 이동한 뒤.. 끝으로 0.3초간 2배 확대하는 애니메이션입니다.

사용자 삽입 이미지
이에 대한 코드는 다음과 같습니다.

TweenPlugin.activate([TransformMatrixPlugin, BezierPlugin]); // 1번만 호출하면 됨

var myTimeline:TimelineLite = new TimelineLite({paused:true}); 
var w:Number = btn.width;
var h:Number = btn.height;

// 화면 중심 이동 및 확대를 위해 화면 크기(300, 300)의 반절값인 150 사용 
myTimeline.append(new TweenLite(btn, 0.4, {x:150-w/2})); 
myTimeline.append(new TweenLite(btn, 0.4, {y:150-h/2}));
myTimeline.append(
    new TweenMax(btn, 0.3, {transformMatrix:{tx:150-w,ty:150-h,scaleX:2, scaleY:2}})
);

myTimeline.play();

간단하게는 사용자 경험(UX)는 사용자에게 사용자 인터페이스(UI)와 동일하게 생각할 수 있습니다. 최근 Windows 8이나 Apple의 iOS의 UI를 살펴보면 과거 입체적인 UI에서 벗어나 보다 평면적인 UI로 디자인되어 있는 것을 볼 수 있습니다. 그러나 이 평면적인 UI에 사용자가 반응을 하게 되면 마치 생명체처럼 움직여 반응하게 됩니다.

UI 및 UX를 가장 효과적으로 학습하는 방법은 이러한 OS의 UI를 살펴보고 사용해 보는 것이 가장 좋다고 생각합니다. 개발자나 디자이너라면.. 이러한 사용에서 끝나는 것이 아니라 자신이 만드는 창작물에도 이러한 배움을 반영해 보는 것이 의미있는 일이라 생각합니다.

2013-08-292017-01-27

사용자 삽입 이미지 차량이 달리는 방향을 지정할때 방위각을 많이 사용합니다. 차량의 경로를 구성하는 지점에 대한 값으로 위치(X,Y)와 속도 그리고 방향으로써 방위각을 가지고 있습니다. 방위각을 통해 차량이 달리고 있는 방향을 표현할 수 있는데.. 이 방위각의 각도값이 어떤 의미인지를 명확하게 이해하고.. 시스템 구현에 반영할때 참고할 목적으로 정리해 봅니다.

2013-08-212017-01-31

C#의 스레드(Thread)에서 UI 컨트롤 사용하기

기본적으로 UI를 갖는 컨트롤은 메인 스레드가 아닌 다른 스레드에서 접근될때 충돌(Crash)이 발생합니다. 현재 C/S 기반의 맵엔진인 듀라맵을 서버단에서 사용하고 있으며, 서버에서 여러 개의 스레드에서 UI 컨트롤인 듀라맵에 접근할때 아래와 같은 충돌이 발생합니다.

사용자 삽입 이미지

이에 대한 해결 방안은 델리게이트(Delegate)와 UI 컨트롤을 담는 Form 클래스의 Invoke 매서드를 사용해 해결할 수 있습니다.

예를 들어서 지도 엔진인 듀라맵을 이용해 어떤 지점이 특정 폴리곤에 포함(Contain)하는지에 대한 기능을 수행하고자 할 때를 살펴 보겠습니다.

듀라맵을 이용해 다음과 같은 Contain이라는 새로운 사용자 정의 매서드를 만들었습니다. 이 Contain 매서드의 위치는 어디라도 상관이 없습니다. 중요한 것은, 바로 이 Contain이라는 매서드가 별도의 스레드를 통해 호출된다는 것이고 델리게이트 기법을 사용하지 않는다면 충돌이 발생합니다.

public bool Contain(double X, double Y, int FID)
{
    //UI 컨트롤 사용
}

별도의 스레드에서 문제 없이 위에서 언급한 Contain이라는 매서드를 호출하기 위해서는, Contain 매서드를 직접 호출하지 않고 델리게이트(대리자)를 사용하면 됩니다. 델리게이트를 다음처럼 Contain 매서드가 존재하는 같은 클래스에 선언합니다.

private delegate bool DelegateContain(double X, double Y, int FID);
private DelegateContain delegateContain;

이제 위의 델리게이트와 Contain 매서드를 연결하는 코드는 다음과 같습니다.

delegateContain = new DelegateContain(Contain);

이제 메인 스레드가 아닌 스레드에서 Contain 매서드의 기능을 활용하기 위해서는 Contain에 대한 델리게이트인 delegateContain를 사용하면 됩니다. 즉, 다음처럼…

bool bContain = (bool)form.Invoke(delegateContain, X, Y, FID);

스레드에서 사용하고자 하는 UI 컨트롤이 담긴 폼 객체의 Invoke 매서드를 사용해 delegateContain을 호출하며 Contain 매서드의 인자는 Invoke 매서드를 통해 전달하면 됩니다. Invoke는 가변 인자를 받으므로 인자의 제약이 덜합니다. 또한 Invoke의 반환값은 델리게이트 대상이 되는 함수의 반환값이며 object 타입이므로 Contain 매서드의 반환값으로 형변환하여 사용하면 됩니다.

2013-06-012017-01-27

[GIS] 오픈소스, 자바스크립트 좌표계 변환 라이브러리, proj4js

C언어 기반의 좌표계 변환을 자바스크립트(Javascript) 언어로 그대로 포팅한 proj4js에 대한 사용에 있어 간단한 예를 통해 정리해 보려고 합니다. 아직 다양한 좌표계 간의 상호 변환에 적용해 보지는 않았으나 OpenLayers와 같은 오픈소스에서 사용하는 좌표계 변환 API이므로 이미 검증은 되었다고 판단할 수 있습니다.

먼저 proj4js는 http://trac.osgeo.org/proj4js/ 에서 다운로드 받을 수 있고.. 저는 여기서 WGS84 경위도를 Bessel 타원체 경위도로 변환하는 것과.. WGS84 타원체 경위도를 카텍(Katec) TM 직각 좌표계로 변환하는 것에 대한 2가지 예를 정리해 봅니다. 먼저 WGS84 경위도를 Bessel 경위도로 변환하는 코드입니다.

코드를 설명하면.. 1번 코드는 proj4s 라이브러리를 사용할 수 있도록 가져오는 것입니다. 그리고 4번 코드는 proj4js를 사용함에 있어서 오류가 있다면 오류에 대한 메세지를 표시합니다. 여기서는 alert 함수를 사용하여 메세지 창으로 표시하도록 하였습니다. 그리고 5번과 6번이 proj4의 좌표를 정의하는 문자열입니다. 그리고 9번과 10번은 변환을 위한 Proj 객체를 생성합니다. 12번 코드는 변환할 좌표입니다.

13번이 실제로 좌표계를 변환하는 transfrom 함수입니다. 이 함수의 첫번째 인자는 원본 좌표계이고 두번째는 변환되어질 좌표계입니다. 세번째는 변환할 좌표인데.. 변환이 성공하면 다시 이 인자에 결과가 저장됩니다. 주의할 점은 서로 다른 타원체 간의 변환이므로 5번과 같이 towgs84 파라메터를 반드시 지정해야 합니다. 또한 동일한 타원체 간의 변환에서는 towgs84를 지정해서는 않됩니다. 여기서는 3개의 파라메터를 사용하였으나 보다 정확한 변환을 위해 다른 파라메터를 사용하셔도 됩니다. 다음으로 WGS84 경위도를 카텍으로 변환하는 코드입니다.

중요한 부분은 6번에서 카텍에 대한 좌표계 정보에 대한 문자열 값입니다. 또한 towgs84 값을 반드시 지정하였는데.. 이유는 서로 다른 타원체 간의 변환이기 때문입니다. 즉, WGS84 타원체에서 카텍이 사용하는 타원체인 Bessel의 변환이기 때문입니다. 만약 서로 동일한 타원체 간의 변환이라면 towgs84 파라메터를 지정해서는 않됩니다.