A04-2. 나침반

저번 게시글에 이어 나침반을 만들어보도록 하자.

나침반 앱은 기본적으로 방향 센서(Orientation Seneor)를 사용한다.

방향 센서를 간단히 알아보자면

 

■ 방위각(Azimuth) - 북쪽을 기준으로 시계 방향으로 스마트폰이 가르치는 각도

■ 피치(Pitch) - 스마트론이 위아래 방향으로 기울어진 각도

■ 롤(Roll) - 스마트폰이 좌우 옆 방향으로 기울어진 각도

 

위와 같이 방향 센서는 3가지 값을 제공해준다. 정확한 방위각을 알기 위해 피치와 롤을 제공해주고

이를 통해 수평을 정확히 맞춘다면 정확한 방위각의 값을 알 수 있다.

 

1. 아이디어

나침반 앱이 제공하는 기능은 간단하다. 방향 센서의 값을 출력하는 것, 그 뿐이다.

 

2. 디자인

디자인도 간단하다.

 

움직이는 이미지를 출력하기 위한 image sprite

측정된 값을 알려주는 label

 

이 두가지만을 이용하여 만들 수 있다.

 

Image Sprite를 사용하기 위해서는 Canvas를 사용하여야한다. 

정확히 말하자면 Canvas 위에 Image Sprite를 올려 두는 것이다.

 

Draw and Animation 항목에 두 컴포넌트가 존재하니 옮겨 보도록하자.

참고로 Canvas의 디폴트 크기가 매우 작으니 width와 Height를 Fill parents로 설정하여 키워준 후, Image Sprite를 올려주자.

 

선 Canvas, 후 Image Sprite

 

이제 추가적으로 값을 알려줄 label과 orientation 센서를 넣어 주자.

 

디자인도 이게 끝이다. 간단하다!

 

3. 코딩

디자인은 간단하지만 코딩이 번거로울 것이다. 

코딩을 하기전에 이미지 좌표에 대해 살짝 알아보자

 

■ 이미지 스프라이트(compass)의 위치 - 이미지의 왼쪽 상단 끝이 기준

=> Compass.X = canvas.Width/2 - compass.Width/2

=> Compass.Y = canvas.Height/2 - compass.Height/2

 

그림과 같이 현재 상태에는 canvas 위에 compass라는 image sprite 가 올라 와있는 상태이다.

이때, compass가 방향에 따라 회전을 해야하는데, 이 기준은 이미지의 왼쪽 상단 끝이 기준이다.

하지만 회전이 왼쪽 상단에서 이루어져야 되는 것이 아닌, 이미지의 중간을 기준으로 회전해야하므로 기준점을 수정해줄 필요가 있다.

 

따라서 스크린이 이니셜라이즈되면, 기준점을 수정한다.

 

그 다음, 실질적으로 나침반이 움직이도록 코딩을 해주자.

우선 나침반의 북쪽, Head를 설정해 주어야 한다. 이 설정을 헤딩이라고 하는데,

방향이 바뀌면 나침반도 회전하므로 헤드는 방위각이 된다. 따라서 이를 코드블록으로 표현하면

이와 같다. 이 줄이 이번에 만드는 앱의 핵심 코드라고 할 수 있다.

나머지는 레이블의 값을 수정하는 것이다. 방향센서에서 우리가 출력해야하는 값을 모두 제공해주므로 

 

이와 같이 표현할 수 있다.

마찬가지로 소수점이 많이 나오므로 format블록을 통해서 첫 번째 자리까지 나오게 해주었다.

 

4. 테스트

필자는 OS가 안드로이드인 휴대폰이 없어서 지금까지 NOX로 테스트를 진행해왔지만,

유감스럽게도 이번에 만든 나침반 앱은 NOX로 테스트가 불가능하다. 이유는 간단하다. 컴퓨터에는 방향 센서가 없기 때문이다.

대체로 제대로 작동하는 GIF 파일을 올려본다. 해당 GIF 파일과 같이 작동한다면 문제가 없을 것이다.

 

 

 

 

a04_2_compass.apk

3.32MB

 

 

 

 

 

 

 

 

잘못된 정보나 오류, 오타, 독자 입장에서의 수정사항 및 피드백 환영합니다. 

E-mail : jhmh0226@gmail.com