1. Flickr Buddy Icon URL 규약

Flickr에 사진을 업로드한 사람의 Profile Image에 해당하는 Buddy Icon 규약은 다음과 같습니다.

Buddyicons

Every flickr user has a 48x48 pixel buddyicon used to represent themselves.

You can construct the url of a buddyicon once you know the user's NSID, icon server and icon farm, as returned by many api methods.

If the icon server is greater than zero, the url takes the following format:

http://farm{icon-farm}.static.flickr.com/{icon-server}/buddyicons/{nsid}.jpg

else the following url should be used:

http://www.flickr.com/images/buddyicon.jpg

참고 : http://www.flickr.com/services/api/misc.buddyicons.html


2. How to make Buddy Icon URL using API

한편, API 를 통해서 가져오는 사용자 정보는 다음과 같습니다.

<person nsid="12037949754@N01" isadmin="0" ispro="0" iconserver="122" iconfarm="1">
	<username>bees</username>
	<realname>Cal Henderson</realname>
        <mbox_sha1sum>eea6cd28e3d0003ab51b0058a684d94980b727ac</mbox_sha1sum>
	<location>Vancouver, Canada</location>
	<photosurl>http://www.flickr.com/photos/bees/</photosurl> 
	<profileurl>http://www.flickr.com/people/bees/</profileurl> 
	<photos>
		<firstdate>1071510391</firstdate>
		<firstdatetaken>1900-09-02 09:11:24</firstdatetaken>
		<count>449</count>
	</photos>
</person>

참고 : http://www.flickr.com/services/api/flickr.people.getInfo.html
참고 : http://www.flickr.com/services/api/explore/?method=flickr.people.getInfo

person 엔티티의 Attribute로 nsid, iconserver, iconfarm을 제공합니다.
이것을 이용하면 Buddy Icon의 정확한 URL을 만들어 낼 수 있습니다.

하지만 .NET용 Flickr API Kit 소스(이하 FlickrNet)에는 문제가 있어서.
Silverlight에서 사용시 4001 (Image Error)를 유발합니다.


3. FlickNet Problem on Buddy Icon URL

아래는 수정 전 FlickrNet의 Person.cs 소스 일부입니다.


피같은 IconFarm 정보를 사용하지 않고 있습니다. 소스를 아래와 같이 수정합니다.


이제 더 이상 4001 에러를 보지 않아도 됩니다. ^^



FlickrNet 다운 받는 곳
http://www.codeplex.com/Wiki/View.aspx?ProjectName=FlickrNet
현재 2.1.4 Released 버전이 공개되어 있습니다.

1. Flickr API Key 발급받기

실버라이트에서 Flickr API를 이용하기 위한 첫 단계로 API Key를 발급 받는 과정을
정리해 보았습니다. (29일 세미나 자료로 활용도 해야해서... 꿩먹고 알먹고)


http://www.flickr.com/services/api/keys 에 방문하여 로그인을 합니다.
(yahoo 계정이 없으시면 계정을 먼저 만드시고 로그인 하시면 됩니다.)

Apply for your key online now 링크를 클릭하여 신청 페이지로 이동합니다.

입력란을 정성스럽게 채우고 APPLY 버튼을 누릅니다.

위와 같은 확인 화면이 나오면 Click here를 눌러 계속 진행합니다.


이어서 나오는 양식을 대략 채우고 SAVE CHANGES 버튼을 눌러 저장을 합니다.

이것으로 API key 등록이 끝났습니다.

자 이제 Key를 잘 가지고 있다가 Flickr 관련 어플리케이션을 만들 때 사용하면 됩니다.

구현해서 서버에 올려 놓은지는 벌써 2주가 되어갑니다만,
바빠서 포스팅을 못했습니다.

http://shiverlight.net/Demos/FlickrFinder

1. 검색어 자동완성 기능

웹서비스를 이용하여 사용자가 입력하는 검색어들을 DB에 누적시키고,
그것을 기반으로하는 검색어 자동완성기능을 구현해 보았습니다.



2. 해당 사진의 Flickr 사이트의 웹페이지 링크

사진 크게보기를 할 때, 오른쪽에 생기는 아이콘을 클릭하면,
해당 사진의 Detail한 정보를 볼 수 있는 flickr 웹사이트를 새창으로 띄워줍니다.

Favorites 등 재미난 기능을 좀 넣어보려고 했는데,
다른 것 하느라고 시간이 영 안나네요.

Boxmile군이 제작하여 12월 28일 실버라이트 카페에 공개한 Text Dragon을 소개합니다.
아직 beta이며, 계속 개선해 나갈 것입니다.

저는 웹서비스를 이용한 DB연동에만 도움을 주었습니다.
(.Net Framework 2.0 웹서비스를 이용하여 DB와 연동하고 있습니다.)

플리커 파인더 : http://shiverlight.net/Demos/FlickrFinder/

페이지 네비게이션 용 Slider UserControl을 제작하여 장착하였습니다.





오른쪽 상단에 보면 책 모양의 아이콘이 있습니다. 이걸 누르면 아래와 같이 화면 하단에 Slider가
생깁니다. 한번 더 누르면 사라지는 토글 방식입니다.



Slider를 이용하여 Page를 이동하실 수 있습니다.


페이지의 정확한 이동을 위하여 직접 입력도 지원합니다.

1. Snap shots

위 그림과 같이 작동하는 User Control 입니다.

2. Example

AddItem 할 때 이미지의 경로를 ""로 남겨 놓으시면 그림없이 생성됩니다.
만들어 놓고 사용해 본 결과 한 콤보에 담기는 옵션에 대해서 그림을 다 넣으려면 다 넣고,
안 넣으려면 다 안 넣을 것을 권합니다.

IsHiddenMenuText 프로퍼티는 본 메뉴에도 MenuText를 표시할 것인지 아닌지를
결정해줍니다.

기타 프로퍼티나 메서드는 소스 조금 보시면 다 아시리라 믿습니다.


3. Source Files

소스는 아래 있습니다.

1) 소스를 프로젝트에 추가하시고 namespace를 자신의 프로젝트에 맞게 잘 고칩니다.

2) 각 User Control의 생성자에서 아래 파란 글자를 알맞게 수정해 주시고.

3) User Control의 .xaml 파일의 속성에서 [빌드작업-포함 리소스]로 설정하십시오.

플리커 파인더 : http://shiverlight.net/Demos/FlickrFinder/


1. 웹서비스 호출을 동기 호출 -> 비동기 호출로 변경하였습니다.

처음에 멋도 모르고 동기 호출로 구현해 놓았었는데,
메서드가 호출되어 반환되는 동안 실버라이트의 모든 기능이 얼어 붙습니다.
다른 건 다 괜찮은데 검색 메서드 처리하는 동안 심심하지 않도록 보여주는
아래 스토리보드 애니메이션도 꽁꽁 얼어붙어 작동을 하지 않는 것이 문제였습니다.


비동기 호출로 변경하니 잘 되네요.


2. 검색 옵션을 추가하였습니다.

플리커 사이트에서 지원하는 아래 검색 옵션을 지원합니다.

전체 텍스트 검색 (Full Text)

태그 검색 (Tags Only)


3. 정렬 옵션을 추가하였습니다.

플리커 사이트에서 지원하는 아래 정렬 옵션을 추가하였습니다.

관련성 높음 (Most Relevant)

가장 최근 (Most Recent)

가장 인기있는 사진 (Most Interesting)

Boxmile과 함께 작업하고 있는 Multi-line TextBox의 중간 결과물인 한줄 TextBox를
Flickr Finder에 적용하였습니다.

중간 결과물이라기보다는 Multi-line TextBox의 완성이 90% 정도 된 시점에서,
한줄 TextBox에 대해서는 왠만한 기능 구현이 끝났다고 생각해 종전의 것을
업그레이드 해버렸습니다.


플리커 파인더 : http://shiverlight.net/Demos/FlickrFinder/

영구기 님이 보여주신 플래시로 된 Jasu님의 Flickr Searcher에 자극을 받아 작업중입니다.

호스팅 서버가 외국서버라 좀 느려요. 인내심 가지고 사용해 보세요. ^^

테스트 : http://shiverlight.net/Demos/FlickrFinder/

며칠 전에 이거 웹에 올려보려고 DiscountASP.NET 웹호스팅 계정을 구매했었죠.

아쉽게도 IIS7 + .NET Framework 3.5 beta 호스팅은 어디까지나 실험용 보너스 계정이라,
테스트 계정의 root만 사용 가능하게 해놨더군요.
(그 안에 폴더들 만들고 asmx 파일 넣어놓으면 WebService 실행이 안됩니다.)

아무튼 그 사실을 모르고 여러분(스페샬존님, 패러다임님, 영구기님, 우리회사 박대리) 괴롭히며 삽질하다가,
오늘 DiscountASP.NET forum에 올린 제 질문에 내부자가 친철하게 대답해 놓은 걸 보고서야 해결했네요.


저런 내용 호스팅 사이트 몇 시간 뒤졌어도 못찾았는데... 아웅.

아무튼 root에 파일들 옮겨놓고 테스트 하니 잘되길래 거기서 용기를 얻어,
boxmile하고 또 열심히 꿍짝꿍짝해서 데모를 만들어 보았습니다.
재밌네요.

Firefox에서는 여전히 한글이 깨져요.
뭐 손 쓴게 없으니 그렇겠지만 흑흑.

가령 이렇게 사용하는데 Firefox에서는 한글이 깨지는 이유는 뭘까요.



혹시 아시는 분은 제보바랍니다!

한글 키보드 입력을 구현해서,
전에 만들었던 반영구 Chat 프로그램에 한글을 지원하도록 수정해놨습니다.

전에 보셨더라도 다시 한번 시험해 주시기 바랍니다.
감사합니다.

테스트 : http://www.shiverlight.net/ShiverChat/ShiverChat/

현재는 Internet Explorer에서만 잘 됩니다.
파이어폭스에서는 한글도 깨져서 나오고,
저희가 사용한 Javascript가 크로스브라우징을 지원안하게 작성되었는지,
제대로 작동을 하지 않네요.

그 문제는 한번 더 훑으면서 손 봐야겠습니다.

함께 고민해준 친구 boxmile에게 고맙네요.

저희 회사(Huge Flow, 휴즈플로우라고 읽음) 실버라이트 라이브러리(HFLib)에,
Graph 관련 User Control을 추가하기 시작했습니다.

일단, 간단한 막대 그래프 User Control을 추가하였습니다.

StickNode.xaml - 막대 하나에 대한 Representation 을 담당합니다.
StickGraph.xaml - StickNode 리스트, GuideLine, Margin 등을 가집니다.

작동 샘플 : http://shiverlight.net/GraphSample/GraphSample/

샘플확인 : http://shiverlight.net/ColorPickerSample/ColorPickerSample/

고급 Color Picker UserControl을 하나 만들어 보았습니다.
Expression Blend의 Color Picker를 열심히 연구해서 Reverse Engineering 했습니다.

사용자가 색상영역을 마우스 클릭한 한 것을 색상정보로 변환하는 것까지는 쉬웠는데,
사용자에 의해서 R,G,B 양이 지정되면 거꾸로 색상영역에 Cursor 위치를 잡아주는 것은
생각보다 어려웠습니다.

R, G, B 세 가지 색상을 3차원 좌표계로 표현하면,
최대 색상이 존재하는 공간은 가로 255 x 세로 255 x 높이 255인 정육면체입니다.

색상이 존재하는 영역은 흰점, 검은점, 그리고 모(母)색상으로 이루어지는 삼각형으로
잘게 나눌 수 있습니다.

무지개 빛의 모(母)색상을 아래 6개의 그룹으로 나눕니다.

(1) RGB 그룹   (255.0.0 ~ 255.???.0)
(2) GRB 그룹   (255.255.0 ~ ???.255.0)
(3) GBR 그룹   (0.255.0 ~ 0.255.???)
(4) BGR 그룹   (0.255.255 ~ 0.???.255)
(5) BRG 그룹   (0.0.255 ~ ???.0.255)
(6) RBG 그룹   (255.0.255 ~ 255.0.???)

위 그림 중 왼쪽은 (1) RGB 그룹이 커버하는 색상영역을 표시합니다.

각각의 그룹을 21개의 단계로 나눕니다.
위 그림 중 오른쪽과 같이 존재합니다.

(1-1) 255.0.0-검은점-흰점
(1-2) 255.13.0-검은점-흰점
.
.
.
(1-21) 255.242.0-검은점-흰점

사용자가 지정한 RGB 값에 대해서 무지개 색상 UI에 제대로 표시해 주기 위해서는,
사용자가 지정한 RGB 값이 6개의 그룹 중 어디에 속하며, 그 그룹의 21개의 색상 평면 중 어디에 가까운지
알아내야 합니다.

그 다음 아래와 같은 관계를 이용하여 Gradient 평면상의 x, y 좌표 값을 결정해야 합니다.

모색상 값을 M이라 가정하면, 색상C와 아래와 같은 관계가 있습니다.

M’ = M + (255 – M) * (128 – x) / 128

C = M’ * (128 - y) / 128


------------------------------------------------------------------------------------
위 컨트롤에서 앞으로 더 구현해야할 기능은
R, G, B, A 의 양을 Text 입력 받는 기능과,
Color Code 를 Text 입력 받는 기능입니다.

일단은 1차로 벽지나, 장판을 변경해 볼 수 있는 방을 구성해 보는 중입니다.

방의 원근감 표현은 RadControl First Look 을 흉내내면서 시작 했습니다. 낯익으시죠?

Expression Blend에서 Vector 데이터로만 작업을 하였습니다.

위, 아래, 좌, 우 정면의 벽은 쪼개서 다섯 개의 Path로 생성하고,
방 전체적인 음영은 Opacity 마스크에 Radial Gradient Fill 검정색을 먹인
다수의 Ellipse를 활용했습니다.

음영이 미리 들어가 있기 때문에,
나중에 벽지, 장판 등의 Texture에 대해서는 Photoshop에서 Resize나 원근감을 주는
비대칭Transform 따위의 작업만 해주면 될 것 같습니다.

가구는 언제 들여놓을 수 있으려나~ ^^

며칠 전 공도님 블로그에 올라온 Farseer 물리엔진을 이용해서 만들어 보았습니다.
놀다가세요~!

직접 마리오를 움직여 보실 수 있는 모델하우스 :
http://www.shiverlight.net/ShiverMario/ShiverMario/

W : 점프

A : 왼쪽으로 이동

D : 오른쪽으로 이동

아직 충돌 시 이벤트 발생시키는 것은 구현하지 못하였습니다.

물리 엔진의 도움으로 마리오의 움직임이 원작에 못지 않는 것 같습니다.

놀다보면