간단한 아두이노 NodeMCU에 설치된 GPS 프로그램에서 얻어진 데이터를 검증해 보자. GPS가 GPS 위성으로 수신 받은 아래와 같은 데이터가 지속 입력된다. 이중 37... 데이터와 127...데이터에 관심을 가져보기로 한다.
GPS에서 전송받은 위도(latitude)데이터는 앞 두 자리 수를 그대로 취하고 나머지 숫자는 시계의 분(minute) 데이터로 처리되어 있으므로 반드시 60으로 나누어서 더하도록 한다.
경도(longitude) 데이터도 동일한 방식으로 처리한다.
위도: 3713.70719 = 37+13.70719/60 = 37.228453
경도: 12712.95872 = 127+12.95872/60 = 127.215979
자신의 위치에서 아두이노 GPS로부터 받은 데이터를 검증하기 위해서 은 www.w3schools.com의 구글 맵 프로그램을 이용하기로 한다. 지도 중앙의 위치를 정확하게 볼 수 있도록 마커를 지도 중앙에 표시하도록 해야 한다. 이를 위해서는 구글 맵의 오버레이 마커 기능을 시험할 수 있는 아래 사이트의 프로그램을 찾아 들어가 열어 보면 영국 런던 중심의 지도가 나타난다.
https://www.w3schools.com/graphics/tryit.asp?filename=trymap_overlays_marker
이 프로그램에서 빨간 색 위도 경도 데이터를 자신의 데이터 수정 입력하고 녹색 RUN 버튼을 누르면 우리나라 지도가 나타난다.
+ 버튼을 수차례 눌러 지도를 확대하면 자신의 GPS 위치를 볼 수 있게 된다.
아두이노 GPS에서 얻어진 위도 경도 데이터를 사용하여 상당히 신뢰할만한 결과를 볼 수 있었다.
GPS 위성 여건도 중요하며, 특히 건물 내 창가에서 GPS 반사 신호가 충분히 잡힐 수 있으나 건물 내 실제 위치와 약 상당한 정도의 오차가 있을 수도 있음에 유의하자.
결국 외부로 나가면 2만원 수준의 GPS 센서를 사용하여 수m 이내의 정밀도가 얻어진다.
일단 아두이노 NodeMCU를 사용해서 스마트폰 웹 화면에서 지도상의 위치를 볼 수 있는 간단한 네비를 만들어 보기 전에 다음의 두 HTML 프로그램을 검증해 보도록 하자.
w3schools 사이트의 HTML Google MAP 지도 프로그램 들어가서 왼쪽의 에디터 창에 기존에 있던 프로그램을 지운 후 아래의 구글 맵 HTML 프로그램을 복사한 후 RUN 버튼을 누르면 실행이 되어 오른 쪽 창에서 마커와 함께 지도를 볼 수 있다.
물론 이 w3school.com 사이트 내에서는 사이트 운영자가 부여한 API 값을 사용하여 지도를 불러내어 볼 수 있다. 하지만 이 사이트를 벗어나서 이 프로그램을 실행할 경우에는 API 값 문제로 인해 지도를 볼 수 없음에 유의하기 바란다.
구글 맵 HTML 프로그램
<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(37.228453,127.214979);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
</body>
</html>
이 구글맵 HTML 프로그램을 참고하여 아래에 다음 맵을 불러 올 수 있도록 손질하였다. 프로그램의 뼈대는 다음 지도 API 사이트에서 따왔으나 구조는 위의 구글 맵 형태로 효율적으로 수정하였다. 단 이 다음 맵을 호출하기 위한 HTML 프로그램을 w3schol.com 사이트에서 실행시켜 보기 위해서는 반드시 본인의 다음지도 API를 입력해야 함에 유의하자.
이 글의 과정이 확인된다면 다음 단계에서 다음 맵 HTML 프로그램을 아두이노 NodeMCU에 포팅하여 스마트폰에서 자신의 네비게이션을 만들어 볼 수 있다. 하지만 이과정에서 NodeMCU의 다리 핀 구조 및 특성이 아두이노 우노와 매우 다르므로 주의해야 할 필요가 있다.
머지않아 NodeMCU 버전 GPS 네비 프로그램 글을 올릴 계획이다.
다음 맵 HTML 프로그램
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<div id="map" style="width:100%;height:500px"></div>
<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=본인이 발급 받은 다음지도 API 삽입장소 "></script>
<script>
var myCenter = new daum.maps.LatLng(37.228453,127.214979);
var x = document.getElementById("demo");
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;} </script>
<script>
var container = document.getElementById('map');
var options = {center:myCenter,level: 5 };
var map = new daum.maps.Map(container, options);
var marker = new daum.maps.Marker({position: myCenter});
marker.setMap(map); </script>
</body>
</html>
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 우노 7세그먼트 LED 프로그램:I (0) | 2017.03.01 |
|---|---|
| HTML SVG와 버튼 키보드로 스마트폰 웹에 7세그먼트 LED를 그려보자!:II (0) | 2017.02.28 |
| HTML 웹 프로그램에 의한 아두이노 NodeMCU 안드로이드 스마트폰 키보드:III (0) | 2017.02.25 |
| 아두이노 NodeMCU 웹서버 문자열 입력 스마트폰 HTML 웹 버튼 키보드:II (0) | 2017.02.23 |
| 아두이노 NodeMCU 웹서버용 스마트폰 HTML 웹 버튼 키보드:I (0) | 2017.02.22 |