krpano 뷰어를 HTML 페이지에 삽입하기

사진/360 파노라마 2012.08.22 15:19 Posted by 드론쟁이 푸른하늘이

krpano 뷰어를 HTML 문서에 삽입하려면 반드시 swfkrpano.js 를 반드시 사용해야 한다. 이 자바스크립트를 사용하면 자체적으로 여러가지 사항을  점검하고, 필요시 자동적으로 설정하게 된다..  예를 들면 장비/시스템(HTML5 or Flash)을 한다거나, 여러가지 시스템상의 한계(마우스 휠 사용제한 등)를 자동적으로 해결해 주는 등의 역할을 수행한다. 즉, 이 플러그인을 사용하면 파노라마를 쉽고 빠르게 삽입할 수 있다.


swfkrpano.js 의 역할


  • Javascript를 사용가능한지 체크
  • 적절한 버전의 플래시플레이어가 설치되어 있는지 체크
  • HTML5 를 만족하는 브라우저/시스템인지 자동 체크하고, 필요시 자동적으로 HTML5 뷰어를 불러옴.
  • 다른 모든 krpano Javascript를 모두 삽입한 하나의 Javascript를 생성할 수 있음. (MAKE PANO, MAKE VTOUR 드롭릿을 사용할때 embedlicenses=true로 설정하면(default) 자동적으로 해결됨)
  • Mac OSX에서 마우스 휠을 사용하여 확대/축소 가능
  • 페이지 내에서 휠을 사용하여 확대/축소할 때 페이지가 스크롤되지 않도록 막아줌
  • wmode=transparent/opaque 로 설정할 때 발생하는 여러가지 제한 사항을 수정해줌
  • 플래시플레이어에서 Fullscreen 사용을 활성화시켜줌
  • 삽입 코드가 간단함
  • 파라미터를 통해 추가적인 기능을 구현할 수 있음

스크립트 삽입


이 삽입 스크립트(swfkrpano.js)는 삽입하려는 페이지 어딘가는 반드시 포함시켜야 한다. <head> 섹션에 넣는 것이 바람직. 다음 코드를 입력하면 됨.
<script src="swfkrpano.js"></script>
단 하나의 모든 것을 포함한 .js 파일로 만들었을 경우에는 바로 그 파일을 삽입하면 된다.
<script src="tour.js"></script>

swfkrpano.js 스크립트는 필요시 자동적으로 krpano HTML5 스크립트인 krpanoiphone.js와 krpanoiphone.license.js 를 불러들이려고 시도한다. 이는 문제를 초래할 수도 있기 때문에 아얘 통 .js 또는 아래처럼 세개의 파일을 한꺼번에 불러들이는 것이 좋다. 단, 반드시 순서를 지켜야 함.
<script src="swfkrpano.js"></script>
<script src="krpanoiphone.license.js"></script>
<script src="krpanoiphone.js"></script>
**** 그런데 krpanoiphone.js, krpanoiphone.license.js 이 두개의 파일은 존재하지 않음. 아마도 swfkrpano.js 내에 포함되어 있을듯 함.

뷰어 삽입


먼저 <div> 요소를 아래와 같이 생성한다. 반드시 id를 지정해야 하고, css 스타일로 크기를 지정해야함.
<div id="pano" style="width=100%;height=100%;"></div>
그 다음 삽입코드가 들어 있는 <script> 요소를 생성한다. swfkrpano에는 두가지 삽입코드가 있는데, 형식만 다를 뿐 기능은 동일

1. createPanoViewer()
<script>
var viewer = createPanoViewer({swf:"krpano.swf", target:"pano"});
viewer.addVariable("xml", "pano.xml");
viewer.embed();
</script>
createPanoViewer는 객체를 매개변수로 받아서 또다른 객체를 반환하는데, 이 객체는 매개변수를 추가/변경할 수 있다. 최종적으로 반환된 객체의 embed() 함수를 호출하면 삽입된다.

2. embedpano() 
<script>
embedpano({swf:"krpano.swf", xml:"pano.xml", target:"pano"});
</script>
기본적으로  동일함. embedpano는 아무것도 반환하지 않고 직접 삽입. 짧은 버전이라고 할 수 있음.

삽입 매개변수


이 두가지 함수의 매개변수는 단하나의 JavaScript Object. 이 객체를 통해 parametername:value 형태로 매개변수를 전달함. target을 제외한 모든 변수는 옵션. 생략되면 default 값이 사용됨

  • swf:"krpano.swf" viewer swf 파일의 경로. html의 위치를 기준으로 한 상대경로
  • xml:"krpano.xml" pano xml 파일의 경로. 상대경로. default 는 swf 파일명.
  • target:"---pano div id---" viewer가 삽입될 <div> 요소의 id. 없으면 에러 발생
  • id:"krpanoSWFObject" viewer 객체의 id. Javascript:Interface 를 통해 viewer와 interface하는 객체임.
  • width="100%";height="100%" viewer 객체의 크기. 부모 html 요소를 100% 사용한다는 뜻
  • bgcolor:"#000000" 뷰어의 배경색
  • wmode:"window" Flashplayer wmode 설정. window:시스템지원/성능이 적당. opaque:html 객체가 Flashplayer를 overlap 할 수 있음. (속도느림) transparent:Flashplayer뒷쪽에 있는 html 요소가 보일 수 있고, overlap 도 될 수 있음 (더 느림) direct:최고성능. 하드웨어가속 사용. 호환성떨어짐. 오래된시스템/브라우저에서는 아주 느려짐. HTML5에서 wmode=transparent는 동일한 효과. overlap은 항상가능함.
  • html5:"auto" auto/prefer(whenpossible)/always/never
  • vars:{} krpano에  variable:value 매개변수 전달함. krpano 초기변수(startup variable) 설정. 여기에서 설정하면 xml에 지정된 변수를 덮어쓰는 효과
  • passQueryParameters:"false" html url의 모든 query parameter를 뷰어로 전달함. 아울러 html url에서 html5 설정을 뷰어로 전달. 즉, 링크만 바꿔도 html5 버전과 Flash 버전을 바꿔가며 실행시킬 수 있다는 뜻.
  • html5licenseload:"true" 라이선스파일이 내장되어 있지 않으면 자동적으로 불러옴. page-reload 발생하지 않음


createPanoViewer 의 함수


embedpano()와 매개변수가 동일함. 단, Java 객체를 반환하는데, 이를 통해서 또다른 변수를 설정/추가할 수 있음. H/W 체크를 하는 데 유용함. 맨 마지막으로 embed()함수을 호출해야 최종 삽입됨

  • viewer.addVariable(variable, value) krpano 초기변수 설정. 여기에서 설정하면 xml에 지정된 변수를 덮어쓰는 효과
  • viewer.addParam(parameter, value) Flash parameter(wmode 등) 설정
  • viewer.paaQueryParameter(); html의 모든 query parameter를 뷰어로 전달함.
  • viewer.useHTML5
  • var ret=viewer.isHTML5possible();
  • var ret=viewer.isFLASHpossible();
  • var ret=viewer.isDevice(devices); devices=iPhone,iPod,iPad,Android.  |을 사용하면 여러기기를 한꺼번에 체크가능 if(viewer.isDevice(iPhone|iPad)) ....;
  • viewer.embed(target);

초기/삽입 변수(Startup/embed variable)


뷰어를 삽입할 때 사용하는 특별한 변수. 이 변수들은 뷰어에게 직접 전달되는 변수가 아님. 삽입 그 자체때 특별한 의미가 있는 것임.


  • xml : 시작 xml 파일의 이름과 경로. xml 변수가 없으면 기본값이 사용됨. 기본값이란, swf와 동일한 이름의 xml 파일을 말함. 
  • license : 라이선스 파일이 포함되지 않았을 때, 기본적으로 swf 파일과 동일한 이름의 라이선스파일을 로드하려고 시도함. 라이선스 파일이 있다면 그 파일에 대한 경로를 지정
  • simulatedevice : 데스크탑에서 아이폰/안드로이드 테스트가능

모바일 기기 사용시 주의사항


아이폰, 아이패드, 안드로이드에서 최적의 결과를 얻으려면 다음사항을 준수할 것


  • 항상 HTML5 도큐먼트로 선언할 것 : <!DOCTYPE htmlL>
  • 1:1 픽셀 매칭이 되도록 자동 페이지/뷰포트 스케일링을 꺼야 함. <head> 에 다음과 같이 정의할 것.<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  • <iframe>은 절대 사용금지. 비율이 어긋나게 됨.


예제


  • 가장 간단하게 : <script>embed({target:"pano"});</embed>, krpano.swf, krpano.xml 을 사용함. 
  • 약간 더 : <script>embed({swf:"pano.swf", xml:"pano.xml", target:"pano"});</embed>
  • html5을 우선하여 : <script>embed({swf:"pano.swf", xml:"pano.xml", target:"pano", html5:"prefer"});</embed>


댓글을 달아 주세요

  1. VRMania  수정/삭제  댓글쓰기

    공부하시는 방법이 아주 어려운부분을 하셔서 그 후 시운걸 택하시나봐요..
    좋은 정보 감사합니다. 어렵네요//
    전 샘을을 본 후 하나하나 대입하는 방법을 하고 있는데, 더 멀게만 느켜지네요.

    2012.08.28 22:55 신고
  2. VR초보자  수정/삭제  댓글쓰기

    첫번째의 형식으로
    <div id="pano" style="width: 100%; height: 100%;">
    <script>
    var viewer = createPanoViewer({ swf : "krpano.swf", target : "pano" });

    if (viewer.isHTML5possible()) {
    viewer.addVariable("xml", "pano.xml");
    viewer.useHTML5();
    viewer.passQueryParameters();
    viewer.addParam("wmode", "transparent");
    } else {
    }
    viewer.embed();
    </script>
    </div>

    작성을 하였는데 ㅠ 데스크탑에서는 확인이 되어지나 스마트폰에서는 확인이 안되는 이유를 알수있을까요? ㅠ

    2013.12.20 15:56 신고

BLOG main image
드론과 지도
드론이 세상을 바꾸고 있습니다.드론의 활용처가 계속 넓어지고 있고, 글로벌 기업들의 참여가 많아지고 있으며, 새로운 기술들이 속속 등장하고 있습니다. 하지만 우리나라의 드론 산업은 일부 기업을 제외하면 중국에서 생산된 드론을 가져다가 조립하는 수준이 대부분입니다. 드론은 하드웨어, 소프트웨어, 데이터처리가 복합된 기술입니다. 어떤 기술들을 어떻게 조합할지에 성패가 달렸죠. 5년뒤 10년뒤에 이 블로그엔 어떤 글이 적힐까요? 그것이 궁금합니다.
by 푸른하늘이
Profile for bluesky61

달력

«   2018/09   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

카테고리

전체보기 (1586)
구글어스 (829)
공간정보 (236)
사진 (103)
드론/쿼드콥터 (239)
지오캐싱 (47)
기타 (131)
  • 4,493,354
  • 65586
TNM Media textcube get rss

드론과 지도

푸른하늘이's Blog is powered by Tistory. / Supported by TNM Media.
Copyright by 푸른하늘이 [ http://www.ringblog.com ]. All rights reserved.

Textcube TNM Media
푸른하늘이's Blog is powered by Tistory. Designed by Qwer999. Supported by TNM Media.