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
//

Proftpd Manager

Posted at 2012. 12. 10. 05:11 | Posted in Mini Project
반응형

드디어 오랜기간의 방황을 깨고 마무리가 되었습니다. ㅠ_ㅠ


빠진 기능도 있고 버그도 있겠지만(?) 다음 과제(?)를 위해서 마무리~



소개...

 

Ubuntu 에 Proftpd 와 Mysql 을 이용해서 사용자 관리와 파일 전송 기록을 남길 수가 있습니다.

 

http://www.sysadminworld.com/2011/install-proftpd-with-mysql-backend-on-debian-ubuntu/

 

 

위와 같은 테이블로 관리를 하게 됩니다.

 

유저와 그룹을 관리하고 쌓이기만 하는 전송 기록을 볼 수 있는 웹어플을 한번 만들어 봤습니다.

 

※ 원래 데이터베이스는 MySQL 인데 샘플을 위해서 SQLite 로 데이터를 옮겼습니다.

 

 

 

사용한 기능...

 

Spring Framework 3

  - Core, AOP, MVC

 

Spring Security 3

  - AuthenticationManager 를 이용한 인증 처리

  - @PreAuthorize 어노테이션을 사용한 서비스단 메소드 보안

  - MySQL 의 password() 로직을 사용한 PasswordEncoder

 

MyBatis 3

  - List<String> ↔ 콤마 구분 문자열 타입 핸들러

  - Date ↔ datetime 타입 핸들러

 

Ext JS 4

  - 컴포넌트 동적 로딩 (필요한 클래스 js 파일을 그때그때 AJAX 로 로드)

  - 페이징 가능한 Tree Grid

  - 플러그인

    - FilterBar, MultiSorting, PagingToolbarResizer 등... -_-;



화면 설명... 


최초 페이지 로딩 후 전송 이력(History)에서 시작합니다. 데이터를 불러오려다가 로그인이 안되어 있어서 인증창이 뜹니다.



로그인이 성공하게 되면 데이터를 불러옵니다.


파일명과 접속 아이피는 문제가 될 소지가 있어서 이상하게 변환시켜 놨습니다 -_-;;;


 

아래는 사용자 관리 화면입니다. 사용자를 추가/수정/삭제 할수 있습니다.



사용자의 권한이 "관리자"만 그룹/사용자 정보를 관리할 수 있습니다. 그냥 "사용자"는 변경하려고 하면 권한이 없다고 나옵니다.



아래는 그룹 관리 화면입니다. 그룹을 추가/수정/삭제 하고, 사용자를 그룹에 포함/제외 시킬 수 있습니다.




소스 다운로드...


proftpd-maven.zip


위 파일은 이클립스 프로젝트 파일입니다. 메이븐 구조로 되어있습니다.


proftpd.war.zip.001


proftpd.war.zip.002



위 2개 파일은 war 파일을 7-zip으로 분할 압축 해놓은 겁니다.


압축 해제 후 나온 war 파일을 바로 배치 후 볼 수 있습니다. (소스 파일들도 들어있슴)

반응형
저작자표시

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

Image Pyramid  (0) 2014.01.30
게시판 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
//

게시판 2.0

Posted at 2011. 7. 27. 20:32 | Posted in Mini Project
반응형
http://antop.nerv.kr/board_v2

드디어! 1년 4개월만에 게시판 2.0이 나왔습니다!! ㅎㅎ

테이블 구조는 기존 테이블에서 몇개의 칼럼이 추가만 되었습니다. 게시판 1.0 그대로 이용 가능!!



화면(UI)는 거의 같은데 내부 프레임워크는 싸그리 바꿨습니다.

이 정도로 변경(추가) 되었습니다.

돌아가는 흐름은 1.0과 거의 비슷합니다. ^^;;

마이바티스의 맵퍼, 모델, xml 은 제네레이터로 돌려버렸습니다.


 

board_v2.war.zip.001

board_v2.war.zip.002


반응형
저작자표시

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

Image Pyramid  (0) 2014.01.30
Proftpd Manager  (0) 2012.12.10
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
//

Sudoku

Posted at 2011. 6. 9. 15:33 | Posted in Mini Project
반응형
http://antop.nerv.kr/sudoku

※ 혹시나 해보고 에러 찾으면 댓글 달아주세요~ >.,<

드디어 완성이 되었네요...

서버단의 처리보다 화면(UI)의 구성에 더 투자했습니다. (화면 80%, 서버 20%)

서버단은 어노테이션(@) 방식으로 구현했습니다. 확실히 편하긴 하네요...

하지만 관리 측면에서는 xml 로 설정하는게 좋을 듯....?


프레임워크:

기타


소스 파일입니다.

sudoku.war


테이블 스키마 파일입니다. (phpmyadmin 으로 export 함)

schema.sql


문제 데이터 입니다. (phpmyadmin)

sudoku_grid.sql


반응형
저작자표시

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

Image Pyramid  (0) 2014.01.30
Proftpd Manager  (0) 2012.12.10
게시판 2.0  (5) 2011.07.27
간단한 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
//

간단한 JAVA 실행기(?)

Posted at 2011. 3. 21. 18:00 | Posted in Mini Project
반응형
http://antop.nerv.kr/java

아주 간단한 JAVA 코드 테스트 하려고 이클립스 키고 프로젝트, 클래스 만들고 하기 귀찮아서 웹에서 바로 테스트 해볼 수 있는 걸 만들어 봤습니다.

크게 Ext JS 3.3.1와 Spring 3.0.5를 사용 했습니다.


아래 화면이 실행 화면입니다. ㅎㅎ



JAVA 에서 main 메소드 안에 들어갈 내용을 작성하면 됩니다.

public class ? {

	public static void main(String[] args) {
		// 작성
	}

}
작성 후 "실행" 버튼을 누르면 sysout으로 출력된 결과를 볼 수 있습니다.

"저장" 버튼은 작성한 소스를 java 파일로 다운로드 받을 수 있습니다.

"로그 삭제" 버튼은 아래의 Console 로그를 삭제합니다.
 

아래 그림은 화면 레이아웃입니다.

실제 기능 구현 하는것보다 레이아웃 잡는게 훨~씬 손이 많이 가는군요 ㅠㅠ



아래 그림은 간단한 흐름입니다. 



사용자가 소스를 작성해서 "실행" 버튼을 누르면 ExtJS에 의햇 비동기 폼 서브밋이 됩니다.

그럼 스프링 MVC 에서 받아서 java 파일 작성하고, 컴파일하고, 실행해서 결과 클리이언트에게 보내줍니다. (JSON)



파일 다운로드의 경우에는 java 파일 작성까지만 하고 바로 다운로드 받게 합니다.



짜잘한 기술로는

- textarea에서 탭키로 들여쓰기 가능
- AJAX 환경에서의 파일 다운로드(IFRAME을 생성하여 그곳으로 파일 다운로드 요청)


java.war


※ java.io 패키지는 사용 할 수 없게 했습니다. ㅎㅎ

반응형
저작자표시

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

Image Pyramid  (0) 2014.01.30
Proftpd Manager  (0) 2012.12.10
게시판 2.0  (5) 2011.07.27
Sudoku  (0) 2011.06.09
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
//

Forecast Repository

Posted at 2010. 11. 30. 15:05 | Posted in Mini Project
반응형

2011년 2월 10일 - 수정 사항
 - json-taglib 수정(http://antop.tistory.com/99). 이에 따른 js에서 강제 파싱부분 제거
 - ExtJS 3.3.1 업그레이(아무 변화 없음 -_-) 및 필요한 라이브러리만 담음
 - IE에서 열라 느린거 해결 못함 ㅠ_ㅠ

forecast.part1.rar
forecast.part2.rar

해보시려면 sql(/WEB-INF/sql/*.sql)로 스키마 세팅하고, WEB-INF/applicationContext.xml 에서 DB 설정을 해줘야 합니다.

 

http://antop.nerv.kr/forecast


새로 개편하여 화면을 만들었습니다. 데이터베이스 구조만 빼고 완전 다 바뀌었군요....

  1. Cron을 이용하여 돌리던 배치(스케쥴링)를 Quartz를 이용(Spring과 연동)하여 처리 하였습니다.
  2. 화면은 ExtJS 3.2.1 + (Hightcharts 2.0.5 + jQuery 1.4.3)을 사용하였습니다
  3. 서버단은 쓰던대로 Spring 2.5.6.SEC02를 사용하였습니다.

아래 그림은 전체 흐름 구상입니다.



그림의 서버단은 다 따로 돌아가게 그려졌는데 -_-.. 다 스프링과 연동되어 돌아갑니다.

클라이언트에서는 풀 AJAX를 사용하고 서버에서는 url로 요청을 받고 json으로 응답합니다.

클라이언트의 레이아웃 구성은 아래 그림과 같습니다.



center의 tab panel의 레이아웃 구성은 아래와 같습니다.



Parameter

URL 요청 파라미터와 응답 아래와 같습니다.

- 현재날씨 목록 : http://antop.nerv.kr/forecast/whole.do?action=list&stn_id=100&from_date=2010-07-01&to_date=2010-07-14

 파라미터  필수  포맷  설명 
 stn_id  ○   숫자  지역 코드 
 from_date  ○   yyyy-MM-dd  시작 날짜
 to_date  ○  yyyy-MM-dd  마지막 날짜

- 현재날씨 상세 : http://antop.nerv.kr/forecast/whole.do?action=detail&stn_id=100&date=2010-07-08
 파라미터  필수  포맷  설명
 stn_id  ○  숫자  지역 코드
 to_date  ○  yyyy-MM-dd  날짜

- 현재날씨 제한 날짜 : http://antop.nerv.kr/forecast/whole.do?action=limit

- 현재날씨 지역 목록 : http://antop.nerv.kr/forecast/whole.do?action=stn


- 동네예보 목록 : http://antop.nerv.kr/forecast/town.do?action=list&area=1100000000&from_date=2010-08-02&to_date=2010-08-10
 파라미터  필수  포맷  설명
 area  ○  숫자(10자리)  지역 코드
 from_date  ○  yyyy-MM-dd  시작 날짜
 to_date  ○  yyyy-MM-dd  마지막 날짜

- 동네예보 상세 : http://antop.nerv.kr/forecast/town.do?action=detail&area=1100000000&date=2010-10-01
 파라미터  필수  포맷  설명
 area  ○  숫자(10자리)  지역 코드
 date  ○  yyyy-MM-dd  날짜

- 동네예보 제한 날짜 : http://antop.nerv.kr/forecast/town.do?action=limit

- 동네예보 지역 목록 : http://antop.nerv.kr/forecast/api.do?action=area
 파라미터  필수  포맷  설명
 parent  ×  숫자(10자리)  상위 지역 코드


- 주간예보 목록 : http://antop.nerv.kr/forecast/week.do?action=list
 파라미터  필수  포맷  설명
 location  ○  문자(8자리)  도시 코드
 from_date  ○  yyyy-MM-dd  시작 날짜
 to-date  ○  yyyy-MM-dd  마지막 날짜

- 주간예보 제한 날짜 : http://antop.nerv.kr/forecast/week.do?action=limit

- 주간예보 지방 목록 : http://antop.nerv.kr/forecast/api.do?action=province

- 주간예보 도시 코드 : http://antop.nerv.kr/forecast/api.do?action=location
 파라미터  필수  포맷  설명
 province  ×  문자(8자리)  지방 코드

Database Structure

테이블은 하이버네이트로 생성하였습니다.

동네예보



주간예보



전국예보



※ Toad Data Modeler 3.5 로 뽑아낸 데이터베이스 구조 입니다.










hey30 님의 질문 답변

아래는 조금 더 자세하게 그린 그림입니다.



이 프로젝트를 이해 하려면 최소한 'ExtJS'와 'Spring MVC', 'JSON' 정도는 아셔야 합니다. ㅠ_ㅠ

클라이언트단과 서버단은 완전히 분리 되어 있습니다. 100% AJAX[각주:2]로만 주고 받습니다.

클라이언트단은 꼭 ExtJS가 아니어도 되고, 서버단도 역시 뭘로 만들던지 JSON으로 응답만 하면 됩니다.


클라이언트에서 서버와 통신하는 객체는 JsonStore 밖에 없습니다. Store에서 알아서 서버에 요청 후 받아서 처리합니다.

store의 config properties를 autoLoad: true로 설정 하면 자동으로 요청 url을 만들어 서버단에 요청합니다.

그러면 서버단에서 contorller - (service - service impl) - (dao - dao impl) 을 거쳐서 controller에서 mav를 리턴하면 마지막에 해당 JSP 까지 가게 됩니다.

JSP에서는 jstl + json-taglib를 이용해서 JSON을 출력합니다.

그걸 다시 클라이언트단의 ExtJS Store에서 받아서 처리하게 됩니다.


vo(Value Object)는 뭐 자기가 정해서 쓰는거니.. 적당히.... ㅠ_ㅠ

  1. 계속해서 발생되는 자료를 축적하여 두었다가 일정 시점 단위로 일괄해서 처리하는 자료처리 방식으로서 배치 데이터 처리라고도 한다. [본문으로]
  2. 비동기 방식의 자바스크립트와 XML(Asynchronous JavaScript and XML). 웹상에서 JavaScript + CSS + DHTML + DOM + XMLHttpRequest + XML 등과 같은 현존하는 스크립트 언어를 통해서 서버와 통신을 하는 개발 방식 [본문으로]
반응형
저작자표시

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

Image Pyramid  (0) 2014.01.30
Proftpd Manager  (0) 2012.12.10
게시판 2.0  (5) 2011.07.27
Sudoku  (0) 2011.06.09
간단한 JAVA 실행기(?)  (1) 2011.03.21
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
//

Sales History API

Posted at 2010. 5. 27. 18:12 | Posted in Mini Project
반응형

http://api.nerv-team.co.kr/sh/

sh.war


마지막으로! ㄷㄷ! Sales History API 입니다.

Spring 2.5.6.SEC01 + Hibernate를 사용했습니다.

Spring 라이브러리에 포함되어있는 hibernate3.jar 파일을 사용하지 않고, 독립적인 hibernate3.jar(www.hibernate.org 에서 받은..)를 사용하니까 hibernateTemplate().findByCriteria(..) 메소드를 사용하는데 에러가 나는군요. 이것땜시 하루 날림.. ㅠㅠ

Sales History 스키마 입니다.



반응형
저작자표시

'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
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
Weather History API  (2) 2010.01.18
//

Order Entry API

Posted at 2010. 5. 13. 09:33 | Posted in Mini Project
반응형
http://api.nerv-team.co.kr/oe

oe.war


Human Resources 에 이어서 Order Entry 입니다.

Struts 1.3.10, Hibernate 3.3.2.GA, JSON taglib 등을 사용했습니다.


Order Entry 스키마 입니다.



반응형
저작자표시

'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
Human Resources API  (0) 2010.05.10
게시판 1.0  (1) 2010.03.11
비밀번호 생성기(Generate Password)  (1) 2010.02.10
Weather History API  (2) 2010.01.18
//

티스토리툴바