HTML5Viewer API 20190526a - abrain-html5viewer/kb-20190526-a GitHub Wiki

1. Viewer 화면 설정

1.1. Viewer 초기화

1.1.1. Parameters

  • showImageListViewYn : ImageListView(Thumbnail list) 보이기/감추기(Y/N)
  • showToolbarYn(toolbarShowYn) : Toolbar 보이기/감추기(Y/N)
  • showThumbnailbarYn(thumbnailbarShowYn) :Thumbnailbar 보이기/감추기(Y/N)
  • showListViewPopupYn(thumbnailListPopupShowYn) :ListViewPopup 보이기/감추기(Y/N)
  • ifrName : [필수] iFrame name

1.1.2. 사용 방법

<iframe name="main" ab-topic="main" src="home.jsp?[Parameters]" ></iframe>

1.2. API 호출

1.2.1. iAbViewerFrame.showImageListView(isShow, ifrName)

  • Parameters

    • isShow : 보이기/감추기 여부
    • ifrName : iFrame name

  • 설명

    • ImageListView보이기/감추기(Y/N)를 수행합니다.

  • 사용 방법

iAbViewerFrame.showImageListView(true, ifrName).then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});

1.2.2. iAbViewerFrame.showToolbar(isShow, ifrName)

  • Parameter
    • isShow : 보이기/감추기 여부
    • ifrName : iFrame name
  • 설명
    • Toolbar보이기/감추기(Y/N)를 수행합니다.
  • 사용 방법
iAbViewerFrame.showToolbar(true, ifrName).then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});

1.2.3. iAbViewerFrame.showThumbnailbar(isShow, ifrName)

  • Parameter
    • isShow : 보이기/감추기 여부
    • ifrName : iFrame name
  • 설명
    • Thumbnailbar보이기/감추기(Y/N)를 수행합니다.
  • 사용 방법
iAbViewerFrame.showThumbnailbar(true, ifrName).then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});

1.2.4. iAbViewerFrame.showListViewPopup(isShow, ifrName)

  • Parameter
    • isShow : 보이기/감추기 여부
    • ifrName : iFrame name
  • 설명
    • ListViewPopup보이기/감추기(Y/N)를 수행합니다.
  • 사용 방법
iAbViewerFrame.showListViewPopup(true, ifrName).then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});

2. Toolbar API

  • Toolbar 실행
    • Toolbar의 기능을 수행하는 방법은 다음과 같습니다.
iAbViewerFrame.toolbar(command, ifrName).then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});

  • Parameters

    • command : Toolbar 기능.자세한 사항은 아래 표를 참조 바랍니다.
    • ifrName : iFrame name

  • Command List

    • 아래 표는 [command]에 대한 기술입니다.
command 설 명
"page_print" 현재 이미지 인쇄
"print" 전체(또는 선택된) 이미지 인쇄
"zoom_in" 확대
"zoom_out" 축소
"fit_horiz" 너비 맞춤
"fit_vert" 높이 맞춤
"fit_in" 화면 맞춤
"page_rotate_ccw" 화면 회전 (반시계)
"page_rotate_cw" 화면 회전
"page_rotate_180" 화면 회전 (180º)
"mode" 편집/보기 모드
"show_annotation" 주석 보기/감추기
"show_masking" 마스킹 보기/감추기
"clear_shapes" 주석/마스킹 초기화
"page_prev" 이전 이미지
"page_next" 다음 이미지

3. Page 설정 API

3.1. iAbViewerFrame.setWaterMark(waterMark, ifrName)

  • Parameters
    • watermark : 설정한 워터마크 이미지 URI
    • ifrName : iFrame name
  • 설명
    • 워터마크 이미지 URI로 설정합니다.
  • 사용 방법은 다음과 같습니다.
iAbViewerFrame.setWaterMark(watermark, ifrName).then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});
  • 주의사항
    • 사용 시점은 Html5 Viewer가 load된 다음에 사용해야 합니다. 따라서 “load” event가 호출된 이 후에 사용하시길 바랍니다.

4. Page handling API

4.1. iAbViewerFrame.removeSelectedPage(ifrName)

  • Parameter
    • ifrName : iFrame name
  • 설명
    • 현재 선택된 Page를 삭제합니다.
  • 사용 방법
iAbViewerFrame.removeSelectedPage(ifrName).then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});
  • Result Data
    • [data.data]에는 삭제된 page에 대한 정보가 있으며 그 내용은 다음과 같습니다.
key type 설 명
index Number 삭제되기 전의 index
uid String page UUID
filename String file name
displayName String 표시명

5. Event

  • 사용방법
    • Event를 추가하는 방법은 다음과 같습니다.
iAbViewerFrame.attachEvent(eventType, function (name, data){
    // Callback
}, ifrName);

  • Parameters

    • eventType : Event 유형.자세한 사항은 아래 표를 참조 바랍니다.
    • callback : Event 호출시 수행되는 Callback 정의
    • ifrName : iFrame name

  • [eventType] 상세 설명

eventType 설 명
load Viewer가 처음 Loading기 발생
edit edit mode에서 도형/스탬프/마스킹 등이 추가/삭제시 발생
click Toolbar 등의 button이 [Click]시 발생
select page(Thumbnail) 선택시 발생

5.1. EventType : “load”

  • 이벤트 설명
    • Viewer가 처음 Loading시 발생되는 Event입니다.
  • 이벤트 Parameters
    • 해당 Event가 발생되었을 때 data parameter에 대한 기술은 다음과 같습니다.
parameter type 설 명
ifrName String iFrame name

5.2. Event Type : “edit”

  • 이벤트 설명
    • edit mode에서 도형/스탬프/마스킹 등이 추가/삭제 시 발생되는 Event입니다.
  • 이벤트 Parameters
    • 해당 Event가 발생되었을 때 data parameter에 대한 기술은 다음과 같습니다.
parameter type 설 명
ifrName String iFrame name
name String [add/delete] 추가 또는 삭제
shape Object { name: 명칭
type: 구분 (annotation,masking…)
shapeStyle: 도형스타일 (box, line…)
shapeType: 도형 유형 (shape, polygon, image…)
rect: { x: x죄표 y: 좌표 width: 폭 height: 높이 }
}

5.3. Event Type : “click”

  • 이벤트 설명 @ Toolbar나 Thumbnail의 button을 [Click] 하였을 때 발생되는 Event입니다.
    data parameter 중 [data.name]은 Event가 어디서 발생되었는지를 명시한 값으로 [data.name]에따라data paramter에 대한 기술이 다를 수 있습니다.
  • 이벤트 Parameters
    • [data.name]에 대한 기술은 다음과 같습니다.
data.name 설 명
pages Thumbnail 이미지를 Click하였을 때 발생
toolbar Toolbar button을 클릭하였을 때 발생
  • [data.name]이 [pages]일 경우에 data parameter에 대한 기술은 다음과 같습니다.
parameter type 설 명
ifrName String iFrame name
name String [pages] Thumbnail
index Number Thumbnail index
uid String page UUID
  • [data.name]이 [toolbar]일 경우에 data parameter에 대한 기술은 다음과 같습니다.
parameter type 설 명
ifrName String iFrame name
name String [toolbar] Toolbar
topic String Toolbar button 식별자
page.print, print…
value Mixed [topic]에 따른 값
  • 아래 표는 [topic]에 대한 기술입니다.
topic 설 명
page.print 현재 이미지 인쇄
print 전체(또는 선택된) 이미지 인쇄
zoom.in 확대
zoom.out 축소
fit.horiz 너비 맞춤
fit.vert 높이 맞춤
fit.in 화면 맞춤
page.rotate.ccw 화면 회전 (반시계)
page.rotate.cw 화면 회전
page.rotate.180 화면 회전 (180º)
mode 편집/보기 모드
show.annotation 주석 보기/감추기
show.masking 마스킹 보기/감추기
clear.shapes 주석/마스킹 초기화
page.prev 이전 이미지
page.next 다음 이미지

5.4. Event Type : “select”

  • 이벤트 설명
    • Thumbnail 이미지 선택되었을 때 발생되는 Event입니다.
    • 해당 Event가 발생되었을 때 dataparameter에 대한 기술은 다음과 같습니다.
parameter type 설 명
ifrName String iFrame name
name String [pages] Thumbnail
index Number Thumbnail index
uid String page UUID
filename String File명
displayName String 표시명

 

6. Utility API

6.1. iAbViewerFrame.getImageInfo(ifrName)

  • Parameter
    • ifrName : iFrame name
  • 설명
    • 현재 선택된 Page의 File Path 를 반환합니다. 페이지가 존재하지 안으면 undefined 를 반환합니다.
  • 사용 방법.
iAbViewerFrame.getImageInfo(ifrName).then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});
  • Result Data
    • [data]에는 imgPath 가 있으며 그 내용은 다음과 같습니다.
key type 설 명
imgPath String 지정한 ifrName 에 해당하는 Viewer 에 선택된 이미지의 파일 경로

6.2. iAbViewerFrame.setCardViewDblClickAction(actionType, ifrName)

  • Parameter
    • actionType (String)
      • "DEFAULT_VIEW" (default)
      • "POPUP_IMAGE_DETAIL"
    • ifrName : iFrame name (String)
  • 설명
    • 현재 ifrName 의 프레임상에 존재하는 뷰어의 모아보기(ListViewPopup / CardView) 에서 마우스 더블클릭 이벤트 발생시 처리해야하는 ACTION 을 지정합니다.
      기본값은 "DEFAULT_VIEW" 이며 이 경우 모아보기 (ListViewPopup / CardView) 에서 썸네일을 더블 클릭시 기본보기로 이동합니다.
      "POPUP_IMAGE_DETAIL" 로 값을 지정할 경우 현재 이미지를 팝업 창으로 표시합니다.
iAbViewerFrame.setCardViewDblClickAction(actionType, ifrName)
.then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});
  • Result Data
    • [data]에는 지정된 actionType 대한 정보가 있으며 그 내용은 다음과 같습니다.
key type 설 명
actionType String 지정한 ifrName 에 해당하는 Viewer 에 지정된 모아보기 ListView 의 Mouse Double Click 시의 Action 문자열 값.
"DEFAULT_VIEW" 또는 "POPUP_IMAGE_DETAIL"

6.3. iAbViewerFrame.printAllPages(ifrName)

  • Parameter
    • ifrName : iFrame name (String)
  • 설명
    • 현재 Viewer 상의 모든 이미지 목록을 출력 스트림으로 전송하고 결과를 수신합니다 제약사항: 이 API 의 호출 결과는 이미지 미리보기 팝업을 표시하는 것 까지의 결과이며 사용자가 인쇄 또는 취소 버튼을 선택한 결과는 브라우저 상에서는 알 수 없습니다.
iAbViewerFrame.printAllPages(ifrName)
.then(function(data) {
    console.log("성공 : ", data);
}, function(error) {
    console.log("실패 : ", error);
});
  • Result Data
    • [data]에는 지정된 출력한 페이지의 수와 Masking, Shape 정보가 있으며 그 내용은 다음과 같습니다.
key Type 설 명
totalPages Number 출력한 페이지의 총 수
shapePages Number Shape 가 있는 페이지의 총수
maskingPages Number Masking 이 있는 페이지의 총수
pages Array 각 페이지 별 Shape, Masking 여부 Object
  • Pages Structure
key Type 설 명
masking Boolean Masking 존재 여부
shape Boolan Shape 존재여부
  • JSON Result Format
data : {
    totalPages: 5,
    maskingPages: 3,
    shapePages: 2,
    pages: [  
       { masking: true, shape:false },
       { masking: false, shape:false },
       { masking: true, shape:false },
       { masking: true, shape:true },
       { masking: false, shape:true },
    ]
}
⚠️ **GitHub.com Fallback** ⚠️