Camera 디바이스 API 가이드 프로그램

Camera 가이드 프로그램은 모바일 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발 시 참고 및 활용될 수 있도록 구현 된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 스마트 디바이스의 Camera 관련 기능을 JavaScript 기반으로 구성 된 Camera DeviceAPI 를 통하여 조회할 수 있도록 지원한다. 또한, 전자정부 표준프레임워크 기반의 웹 서버 어플리케이션과 연계하여 디바이스 내 Camera 촬영 기능과 갤러리 내에 저장된 사진을 이용하여 필요한 정보를 서버에 전송하고 조회할수 있는 기능으로 구성되어 있다.

본 가이드 프로그램 에서는 Camera 기능을 가이드 할 수 있도록 촬영 사진을 서버에 전송하기, 갤러리의 사진을 서버에 전송하기,
사진 목록을 서버로부터 수신하기 를 제공하고 있다.

• 문제 : 폰갭 오류시.
• 해결방안 : setTimeout() 함수로 phonegap 로딩 순서를 지연시킨다.
  

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

• 문제 : iScroll5 컨텐츠 내용 높이 계산 오류.
• 해결방안 : setTimeout() 함수로 컨텐츠에 css 적용이 완료되고 iscroll 생성이 되도록 한다.

setTimeout(function()
           {
               myScroll = new iScroll(thisPage, 
                                      { 
                                          checkDOMChanges: true,
                                          onBeforeScrollStart:function(e)
                                          {
                                          }
                                      });
           },
           500);

• 문제 : 폰갭에 지정한 콜백 함수에서 alert() 메시지 호출시 동작 오류.
• 해결 방안 : 비동기 함수를 사용하거나 alert()처럼 스레드를 잡는 함수는 사용하지 않는다.

폰갭에서 특정 외부 도메인이나 외부 도메인의 하위 도메인을 사용해야할 경우,
[Project_Name]/Supproting Files/config.xml에서 <access origin=“ExternalHosts”/> 항목에 외부 도메인 주소를 추가 설정해야 외부 도메인에 접속할 수 있다.

N/A

Camera 디바이스API 가이드 프로그램은 크게 촬영 사진을 서버에 전송하기, 갤러리의 사진을 서버에 전송하기, 사진 목록을 서버로부터 수신하기
기능으로 구성되어 있다.(관련기능 부분참조)

• 카메라로 사진을 찍고 찍은 사진을 가져오거나, 단말기의 앨범에서 사진을 선택해서 가져온다.
  
• base64로 인코딩된 이미지를 가져오거나 사진 파일의 경로을 통해 사진을 가져온다.
  

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

var cameraOption = {};
  cameraOption  = {
      quality: 50,
      destinationType : Camera.DestinationType.FILE_URI,
      sourceType : Camera.PictureSourceType.CAMERA,
      targetWidth: 200,
      targetHeight: 200
  };

• 서버에 파일을 업로드할 수 있도록 하는 파일 전송 객체.

var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=fileURI.substr(fileURI.lastIndexOf('/')+1);
options.mimeType="text/plain";

var params = new Object();
params.value1 = "test";
params.value2 = "param";

options.params = params;

var ft = new FileTransfer();
ft.upload(fileURI, "http://some.server.com/upload.php", transferSuccess, transferFail, options);

• 파일 업로드시, 전달할 매개변수를 정의하는 업로드 속성객체

• ID Generation Service를 활용하기 위해서 Sequence 저장테이블인 COMTECOPSEQ에 FILE (파일 정보 ID) 항목을 추가해야 한다.

Camera 디바이스 API 가이드 프로그램에서 제공하는 모바일 디바이스의 Camera 관련 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.

    <access origin="ExternalHosts"/>

    <feature name="Camera">
      <param name="ios-package" value="CDVCamera"/>
    </feature>
    <feature name="FileTransfer">
        <param name="ios-package" value="CDVFileTransfer"/>
    </feature>

<entry key="serverContext" value="서버의 경로"/>
<entry key="fileStorePath" value="파일_저장_경로"/>

<sqlMap resource="egovframework/sqlmap/hyb/ios/cmr/EgovCameraiOSAPIGuide_SQL_[DB명].xml"/>

Camera 디바이스API 가이드 프로그램은 크게 디바이스 내 Camera 촬영 기능과 갤러리 내에 저장된 사진을 이용하여 필요한 정보를 서버에 전송하고 조회할수 있는 기능으로 구성되어 있다.

function fn_egov_capture_photo(sel)
{
    var cameraOption = {};
    cameraOption  = {
        quality: 50,
	destinationType : Camera.DestinationType.FILE_URI,
	sourceType : Camera.PictureSourceType.CAMERA,
        targetWidth: 200,
        targetHeight: 200
    };
    
    navigator.camera.getPicture(fn_egov_upload_photo,null,cameraOption);
};

function fn_egov_upload_photo(data)
{
    image = data;
    if(myScroll != null) 
    {
        myScroll.destroy();
    }
    fn_egov_wait_iscroll('wrapper_image');
    toast("uploadPhoto success!");
};

var params = {
    photoSj : $("#photoSj").val(),
    uuid : device.uuid
};
                          
$.mobile.showPageLoadingMsg('a');
// 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
setTimeout(function()
           {
               fn_egov_sendto_server("/cmr/cameraPhotoAlbumCheckiOS.do",params);
           },
           500);

var cameraiOSAPIVO = result["cameraiOSAPIVO"];
var currentImageSn = cameraiOSAPIVO["sn"];
                                     
if(currentImageSn != null && currentImageSn != "") 
{
    jConfirm("제목이 중복입니다.\n이미지를 수정하시겠습니까?", "알림", "b", 
             function(result)
             {
                 if(result) 
                 {
                     fn_egov_update_Photograph(currentImageSn);
                 }
             });
    }
    else
    {
        jConfirm("저장하시겠습니까?", "알림", "b", 
        function(result)
        {
            if(result) 
            {
                fn_egov_insert_Photograph();
            }
        });
    }
}

function fn_egov_insert_Photograph() 
{
    $.mobile.showPageLoadingMsg();
    
    setTimeout(function()
               {
                   var options = new FileUploadOptions();
                   options.fileKey = "file";
                   options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
                   options.mimeType = "image/jpeg";
               
                   var params = {};
               
                   options.params = params;
                   var ft = new FileTransfer();
                   var serverPath = downloadContext + "/cmr/photoAlbumImageUploadiOS.do?uuid="+ encodeURI(device.uuid)+"&photoSj="+ encodeURIComponent("이미지제목");
                   ft.upload(image, serverPath, fn_insertSuccess, fn_error, options);
               }, 
               500);
}

function fn_egov_update_Photograph(currentImageSn) {
	
    $.mobile.showPageLoadingMsg();
    
    setTimeout(function()
               {
                   var options = new FileUploadOptions();
                   options.fileKey = "file";
                   options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
                   options.mimeType = "image/jpeg";
               
                   var ft = new FileTransfer();
               
                   var params = {};
               
                   options.params = params;
                   var serverPath = downloadContext + "/cmr/photoAlbumImageUpdateiOS.do?sn="+currentImageSn;
                   ft.upload(image, serverPath, fn_insertSuccess, fn_error, options);
               }, 
               500);
}

사진촬영 화면	사진촬영 저장 화면

제목:2글자 이상 20글자 이하의 규칙이 적용되어 있다.
사진촬영:카메라 디바이스를 호출한다.
저장:서버에 이미지 중복 체크를 한후 업로드한다.

function fn_egov_capture_photo(sel)
{
    var cameraOption = {};
    cameraOption  = {
        quality: 50,
	destinationType : Camera.DestinationType.FILE_URI,
	sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
        targetWidth: 200,
        targetHeight: 200
    };
    
    navigator.camera.getPicture(fn_egov_upload_photo,null,cameraOption);
};

function fn_egov_upload_photo(data)
{
    image = data;
    if(myScroll != null) 
    {
        myScroll.destroy();
    }
    fn_egov_wait_iscroll('wrapper_image');
    toast("uploadPhoto success!");
};

var params = {
    photoSj : $("#photoSj").val(),
    uuid : device.uuid
};
                          
$.mobile.showPageLoadingMsg('a');
// 디바이스의 성능에 따라 PrograssDialog Show 가 완전이 로딩이 된후 다음 코드를 수행하도록 setTimeout 을 사용하여 지연시킨다.
setTimeout(function()
           {
               fn_egov_sendto_server("/cmr/cameraPhotoAlbumCheckiOS.do",params);
           },
           500);

var cameraiOSAPIVO = result["cameraiOSAPIVO"];
var currentImageSn = cameraiOSAPIVO["sn"];
                                     
if(currentImageSn != null && currentImageSn != "") 
{
    jConfirm("제목이 중복입니다.\n이미지를 수정하시겠습니까?", "알림", "b", 
             function(result)
             {
                 if(result) 
                 {
                     fn_egov_update_Photograph(currentImageSn);
                 }
             });
    }
    else
    {
        jConfirm("저장하시겠습니까?", "알림", "b", 
        function(result)
        {
            if(result) 
            {
                fn_egov_insert_Photograph();
            }
        });
    }
}

function fn_egov_insert_Photograph() 
{
    $.mobile.showPageLoadingMsg();
    
    setTimeout(function()
               {
                   var options = new FileUploadOptions();
                   options.fileKey = "file";
                   options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
                   options.mimeType = "image/jpeg";
               
                   var params = {};
               
                   options.params = params;
                   var ft = new FileTransfer();
                   var serverPath = downloadContext + "/cmr/photoAlbumImageUploadiOS.do?uuid="+ encodeURI(device.uuid)+"&photoSj="+ encodeURIComponent("이미지제목");
                   ft.upload(image, serverPath, fn_insertSuccess, fn_error, options);
               }, 
               500);
}

function fn_egov_update_Photograph(currentImageSn) {
	
    $.mobile.showPageLoadingMsg();
    
    setTimeout(function()
               {
                   var options = new FileUploadOptions();
                   options.fileKey = "file";
                   options.fileName = new Date().format("YYYYMMDDhhmmss") + ".jpg";
                   options.mimeType = "image/jpeg";
               
                   var ft = new FileTransfer();
               
                   var params = {};
               
                   options.params = params;
                   var serverPath = downloadContext + "/cmr/photoAlbumImageUpdateiOS.do?sn="+currentImageSn;
                   ft.upload(image, serverPath, fn_insertSuccess, fn_error, options);
               }, 
               500);
}

사진 갤러리 화면	선택 사진 저장 화면

제목:2글자 이상 20글자 이하의 규칙이 적용되어 있다.
갤러리:장치의 갤러리 사진 정보를 호출한다.
저장:서버에 이미지 중복 체크를 한후 업로드한다.

function fn_egov_show_ImgList()
{
    if(fn_egov_network_check(false))
    {
        var params = null;
        if(ImageArray === null)
        {
            params = {pageIndex:1};        
        }
        else
        {
            if(ImageArray.length % 10 === 0)
            {
                params = {pageIndex:1+ImageArray.length/10};
            }
            else
            {
                jAlert('마지막 페이지 입니다.', '알림', 'c');
                return;
            }
        }
        
        $.mobile.showPageLoadingMsg('a');
        setTimeout(function()
                   {
                       fn_egov_sendto_server("/cmr/cameraPhotoAlbumListiOS.do",params);
                   }, 
                   500);
    }
}

function fn_detailPhotoAlbum(VOsn) 
{
    if(fn_egov_network_check(false))
    {
        currentImageSn = VOsn;
        var params = {
            sn : VOsn
        };
        
        $.mobile.showPageLoadingMsg('a');
        setTimeout(function()
                   {
                       fn_egov_sendto_server("/cmr/cameraPhotoAlbumDetailiOS.do",params);
                   }, 
                   500);
    }
}

function fn_deletePhotoAlbum() 
{
    if(fn_egov_network_check(false))
    {
        jConfirm("삭제하시겠습니까?", "알림", "b", 
                 function(result)
                 {
                    if(result) 
                    {
                        var params = {
                        sn : currentImageSn
                        };
                 
                        $.mobile.showPageLoadingMsg('a');
                        setTimeout(function()
                                   {
                                       fn_egov_sendto_server("/cmr/deleteCameraPhotoAlbumiOS.do",params);
                                   }, 
                                   500);
                    }
                 });
    }
}

사진 목록 화면	사진 상세정보 화면

리스트:선택한 리스트의 상세 정보를 요청한다.
더보기:서버의 사진 목록 10개를 더 로딩한다.
목록:서버 사진목록 페이지를 호출한다.
삭제:선택된 사진을 삭제한다.

• 왼쪽 상단의 삼각형 버튼을 클릭하면 가이드 프로그램이 빌드되어 아이폰 디바이스에 설치 된다.

• 빌드가 성공하면 아래와 같은 어플리케이션 실행화면을 확인 할 수 있다.

• 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다.

• 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다.

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 console.log를 이용할 수 있다. console.log 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스 및 Xcode에서 확인 할 수 있다.

• 실제 콘솔 로그 예

function fn_egov_network_check(doCheck)
{
    console.log('DeviceAPIGuide fn_egov_network_check');
    var networkState = navigator.network.connection.type;
    ...
}

• xCode 콘솔 창

^로그 메시지^값^비고^

Camera 디바이스 API 가이드 다운로드 : Click

• Cordova : Click
  
• UX/UI 라이브러리 : jQuery MobileClick