Image Pyramid

Posted at 2014. 1. 30. 03:28 | Posted in Mini Project
반응형

Introduction


아주 오래 전 플렉스와 실버라이트가 난리를 쳤을 때 난 플렉스를 공부 했었다.


그 때 훈스닷넷에서 하는 실버라이트 세미나를 갔었는데(왜 플랙스 세미나를 안가고...) 그 때 발표자(?)가 발표를 했던게 실버라이트의 이미지 피라미드였다.


그 때.. 난 "아 참 조쿠나~" 라고 생각 해놨다가 꽤 오랜 시간이 지난 지금 생각이 났다. ㅋㅋㅋ




Fundamental


고용량의 큰 이미지가 있다. 이 이미지를 브라우저에서 본다고 하자.


그러면 실제로 화면에 보여지는 이미지의 영역은 얼마 안될 것이다.



하지만 큰 이미지를 한번에 가져오기 때문에 네트워크 낭비가 심하다.


이 문제를 해결하기 위해서 이미지를 잘게 자른 후 화면(브라우저)에 보이는 영역만 불러오는 것이다!



이것 저것 찾아보니까 이미지 피라미드에 대한 문서들이 있었다. 


Web Map Tile Services for Spatial Data.pdf


Pyramid methods in image processing.pdf



이미지 저장 시에 참고한 그림는 아래와 같다. 아래 그림에 영감을 받아서 만들어 보았다.





Project

 

데모 : http://antop.nerv.kr/image.pyramid/



데이터베이스가 서버에는 MySQL이고, 샘플은 Derby 이다.


pyramid.txp


01


이 ERD가 자바에서는 아래 그림과 같이 클래스 구조를 가진다. ORM!





jQuery Plugin


이미지를 저장하는 부분보다 보여주는 부분이 더 개발 비율이 많다. 화면에 보여주는데 사용한 제이쿼리 플러그인은 아래와 같다.


jQuery Form Plugin - AJAX 로 폼 전송이나 파일 업로드를 할 수 있는 플러그인


jQuery Upload File - jQuery Form Plugin 을 이용하여 파일 업로드를 하는데 상태바를 지원해준다.


jQuery Mouse Wheel Plugin - 마우스 휠이 굴러가는 이벤트를 감지할 수 있게 해준다.


jQuery Schedule - 스케쥴링을 가능하게 하는 해준다. (Quartz 같은거...)


jQuery Dragscrollable (jQuery 홈페이지 개편되면서 플러그인 링크 죽음) - 마우스를 끌면 화면을 스크롤 해줌.


perfect-scrollbar : 가상 스크롤바를 달아준다.


Element Onscreen Visibility - 선택한 태그(selector)가 화면에 보이고 있는 태그인지를 판별한다.




이제 힘들어서 못쓰겠네 후.... 알아서 ㄱㄱ 질문은 받음 -_-/


image.pyramid.src.zip


↑ 이클립스 프로젝트 소스 파일 (메이븐)


image.pyramid.war.zip.001


image.pyramid.war.zip.002


↑ WAR 파일 (7-zip 분할)


반응형

'Mini Project' 카테고리의 다른 글

Proftpd Manager  (0) 2012.12.10
게시판 2.0  (5) 2011.07.27
Sudoku  (0) 2011.06.09
간단한 JAVA 실행기(?)  (1) 2011.03.21
Forecast Repository  (8) 2010.11.30
Sales History API  (2) 2010.05.27
Order Entry API  (0) 2010.05.13
Human Resources API  (0) 2010.05.10
게시판 1.0  (1) 2010.03.11
비밀번호 생성기(Generate Password)  (1) 2010.02.10
//

"트리 메뉴 구성" 의뢰

Posted at 2014. 1. 23. 03:00 | Posted in Request Sample
반응형

Request


아래와 같은 트리 메뉴를 구성할 데이터가 들어있는 테이블이 있습니다.



path 칼럼에 상위 트리의 경로가 "/" 구분자로 들어 있습니다.


예를 들어 id가 7인 노드는 [루트 → 3 → 4 → 7] 의 경로를 가지게 됩니다.


이렇게 데이터가 들어있는 테이블을 조회해서 ul 과 li 태그의 조합으로 화면에 나타내고 싶습니다.


트리 깊이(depth)는 제한이 없습니다.


데이터베이스는 MySQL, 프레임워크는 Spring + iBatis를 사용합니다.




Response


재귀함수/재귀쿼리를 써야 한다.


MySQL 에는 기본적으로 재귀쿼리가 안된단다. -_-;


나 역시도 특정 데이터베이스에서만 있는 문법을 싫어하기 때문에 있어도 안쓸 생각이었다!


단순 select 쿼리로 아래 클래스에 만족하는 계층 클래스 구조를 만들었다.



iBatis는 MyBatis 처럼 <collection>에서 재귀 효과를 낼 수 없기 때문에 다른 곳(Service 영역)에서 이 역할을 해주었다.


아래 그림에서 PathTreeService 클래스의 findChildren() 메소드가 계속 재호출되는 부분이다.



또 이 재귀 부분이 쓰이는 부분은 화면에 <ul>과 <li>를 이용해서 출력하는 부분(JSTL Custom Tag)에서 쓰인다.


PathTreeTag 클래스의 printChildren() 메소드가 계속 재호출 되는 부분이다.



Spring + iBatis + HSQL 을 이용해 만든 샘플이다.


pathtree.war


↑ java 소스 포함 WAR 파일


pathtree.zip


↑ maven 프로젝트


아래와 같은 결과가 나오게 된다.




반응형
//
반응형

Intorduction


일반적으로 스프링과 com.fasterxml.jackson를 사용하여 컨트롤러 메소드에서 @ResponseBody 어노테이션을 이용하면 알아서 객체가 JSON 으로 변환되어 나가게 된다.


	@RequestMapping(value = "/file/list", method = RequestMethod.GET)
	@ResponseBody
	public ModelMap list() {
		ModelMap mm = new ModelMap();
		
		List<File> list = fileService.list();
		mm.put("list", list);
		
		return mm;
	}

만약 변환해야 하는 객체가 아래와 같이 순환 참조[각주:1]되는 객체일 경우 JSON 으로 변환을 하다가 에러가 나게 된다.



아래 소스 코드와 같이 간단하게 돌려보면 아래와 같은 에러를 볼 수 있다.


import com.fasterxml.jackson.databind.ObjectMapper;

public class JacksonTest {

	public static void main(String[] args) throws Exception {
		A a = new A();

		for (int i = 0; i < 10; i++) {
			B b = new B();
			b.setA(a);
			a.addB(b);
		}

		ObjectMapper om = new ObjectMapper();
		String json = om.writeValueAsString(a);

		System.out.println(json);
	}

}



A 객체의 bs 속성(List)을 보고 B 객체의 A 객체를 보고 다시 A 객체의 bs 속성을 보고 무한으로 반복 된다.


그러다가 최종적으로 java.lang.StackOverflowError 가 떨어지게 된다.




Solution


순환 참조를 하지 말아야 하는 속성에 @JsonBackReference 어노테이션을 달아주자.


import com.fasterxml.jackson.annotation.JsonBackReference;

public class B {

	private String name = "B";
	// 이거
	@JsonBackReference
	private A a;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public A getA() {
		return a;
	}

	public void setA(A a) {
		this.a = a;
	}

}


다시 테스트 해보면 아래와 같이 B 의 a 속성을 출력하지 않게 된다.


{
  "a": "A",
  "bs": [
    {
      "name": "B"
      // as 속성이 빠지게 된다.
      // , "as": []
    },
    {
      "name": "B"
    },
    {
      "name": "B"
    },
    {
      "name": "B"
    },
    {
      "name": "B"
    },
    {
      "name": "B"
    },
    {
      "name": "B"
    },
    {
      "name": "B"
    },
    {
      "name": "B"
    },
    {
      "name": "B"
    }
  ]
}


  1. 순환 참조(Circular reference)란, 참조하는 대상이 서로 물려 있어서 참조할 수 없게 되는 현상을 말한다. [본문으로]
반응형
//