본문 바로가기

기존카테고리/하이브리드앱

디바이스 방향계

<!DOCTYPE html>

<html>

<!-- 

방향 정보를 다루는 두가지 방법의 javaScript 이벤트가 있다.

1. deviceorientation 이벤트 : 가속도계(accelerometer)가 기기의 방향 변화를 감지했을 때 발생

- 3개의 각도를 사용하여 측정하고 4개의 값을 갖는다.

   . absolute : 지구좌표계(Earth coordinate system)을 사용하는 지에 대한 boolean값이다. 일반적인 경우 사용하지 않는다.

   

   . alpha : 0도 부터 360도 까지 범위의 z축을 중심으로 움직임을 나타낸다.

   . beta : x축을 중심으로 디바이스의 움직임을 나타낸다. -180도에서 180도

   . gamma : y축을 중심으로 디바이스의 움직임을 나타낸다. 

2. devicemotion 이벤트 : 방향이 아닌 가속도에 변화가 일어났을 때 발생

 -->

 <head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>디바이스 방향 감지</title>

<style>

.div1{

position:relative;

width:200px;

height:200px;

border : 5px solid #CCC;

border-radius: 10px;

}

.div2{

position:absolute;

top :90px;

left:90px;

width:20px;

height:20px;

background:blue;

border-radius:100%;

}

</style>

<script>

window.onload = function(){

var ball = document.querySelector('.div2');

var zone = document.querySelector('.div1');

var output = document.querySelector('.output');

var maxX = zone.clientWidth - ball.clientWidth;

var maxY = zone.clientHeight - ball.clientHeight;


function handleOrientation(event){

var x = event.beta;

var y = event.gamma;

output.innerHTML = "beta값 : " + x +"\n";

output.innerHTML += "gamma값 : "+ y +"\n";

if(x > 90){x = 90} ;

if(x < -90) {x = -90};

x +=90;

y +=90;

ball.style.top =(maxX*x/180 - 10)+"px";

ball.style.left = (maxY*y/180 - 10) +"px";

}

window.addEventListener('deviceorientation', handleOrientation);

}

</script>

 </head>

 <body>

<div class="div1">

<div class="div2"> </div>

</div>

<pre class="output"></pre>

 </body>

 

 

 </html>

'기존카테고리 > 하이브리드앱' 카테고리의 다른 글

mobile API - parseUrl  (0) 2017.11.05
mobile API - changePage  (0) 2017.11.05
applicaton cache  (0) 2017.11.04
[jQuery Mobile] 미디어 플레이어 조작  (0) 2017.11.04
구글 MAP API  (0) 2017.11.04