'FUSE' 카테고리의 글 목록

FUSE

2015. 11. 5. 10:38

1.목적

FUSE 를 이용하여 Native Camera에 접근하여 사진을 찍고, 보여주고, 저장하는 앱을 만든다.

2. 알아야 할 것

현재 FUSE 는 배타 환경으로 오픈하였기 때문에 NATIVE API가 빈약한 상태이다.

구현에 들어가기 전 FUSE 에서 제공하는 API의 스펙을 확인하는 것을 추천한다.

사용하려고 했던 API스펙

Native Camera를 호출할 수 있는 API 다.

제공하는 함수는 takePicture 가 유일한데, 전달 값으로 너비와 높이, 방향이 있다.

그러나 직접 구현해본 결과 전달 값과 상관없이 기본 카메라의 앵글로 촬영되었으며,

이미지 생성도 기본 카메라와 동일한 크기로 작동하였다.

Camera API 로 생성한 이미지를, 안드로이드 이미지 폴더에 복사(이동) 하기 위해 사용하려 했었던 API다.

하지만 상세 스펙을 보면

'The storage API allows you to save text to files in the application directory.'

라고 한다. 이미지를 저장해보려 테스트를 해보니, 에러를 뱉진 않았지만, 결과값이 에러 값을 저장하고 있었다.

Camera로 생성한 이미지를 따로 저장하기 위해서는 다른 방법을 찾아봐야 할 것 같다.

3. 구현

(1) 화면 구성

ui구현이 목적이 아니기 때문에, FUSE 에서 제공한 Slides using PageControl 예제를 수정하여 화면을 구성하였다.

Style 과 assets 들은 예제와 같기 때문에 MainView.ux 코드만 첨부한다.

MainView.ux

(2) Camera 연동

카메라 촬영 후, 화면에 표시하기 위해 Observable API와 함께 작성하였다.

Camera.takePicture 의 너비와 높이 값은 결과물에 영향을 주지 못했고, takePicture 가 리턴해주는

file 객체에서 path 를 꺼내 myFilePath 에 연결하였다.

(file 객체를 이용하여 storage 에 저장하려 했으나, 실패하였다.)

2,3번 줄에서 사용할 객체 선언.

8번째 줄에서 takePicture 함수 선언.

16,19번 줄에서 모듈에 등록.

MainView.ux

<App Theme="Basic" Background="#fff">
<JavaScript>
var Observable = require("FuseJS/Observable");
var Camera = require('FuseJS/Camera');
var myfilePath = Observable();
var myTakePicture = function() {
Camera.takePicture({ targetWidth: 640, targetHeight: 360}).then(function(file) {
myfilePath.value = file.path;
}).catch(function(e) {
console.log(e);
});
}
module.exports = {
myfilePath: myfilePath,
myTakePicture: myTakePicture
};
</JavaScript>
<DockPanel>
<MainStyle />
<Page>
<Info>
<Header>
<Text TextColor="#a94442" Value="{myfilePath}" Alignment="Center" />
</Header>
<Button Text="Take a photo!!" ux:Name="button1" Clicked="{myTakePicture}" />
</Info>
<BackgroundImage File="{myfilePath}" />
</Page>
</DockPanel>
</App>