GPS가 설치된 NodeMCU 1.0(ESP8266 12-E module) WiFi Webserver에 의한 스마트폰 다음지도 제어 및 +HTML 프로그래밍: V

아두이노 NodeMCU에서 드론에서처럼 GPS 센서가 설치된다면 디지털 데이터 핀들을 통해 비행 중인 드론의 위치 좌표 즉 경도(Longitude), 위도(Latitude) 및 고도 데이터를 얻을 수 있을 것이다. 이 데이터를 핫스팟을 통해 지상의 스마트폰에서 수신하게 되면 지역의 Map을  스마트폰 웹브라우저에서 호출하여  지정된 위치를 표기하여야 할 것이다. 드론이 비행하게 되면 GPS 좌표 값이 변화되며 샘플링 시간 간격 별로 좌표 데이터를 생성하고 스마트폰 WiFi 핫스팟이 도달 가능한 거리 내에서  스마트 폰이 수신할 수 있을 것이다.

이 프로젝트를 두 단계로 나누어 진행하고자 한다. 첫째는 GPS 모듈을 NodeMCU에 설치하여 위성들로부터 얻어진 GPS 데이터로부터 경도 및 위도 좌표 값을 얻어내는 것이다.
두 번째는 아두이노 NodeMCU의 웹서버 프로그램에 의해 스마트폰에서 Request 신호를  아두이노 NodeMCU에 보내게 되면 이 GPS 좌표 데이터를 핫스팟 WiFi를 통해 스마트폰에 전송함과 동시에 HTML+Java Script 프로그램에 의해 스마트폰 웹브라우저를 통해 Map 프로그램을 호출하는 것이다. 아두이노는 자체는 알다시피 특히 드론에 GPS와 함께 부착되어 공중을 날고 있는 상황에서 Map을 불러오기 위한 어떠한 역할도 할 수 없음을 잘 알고 있다.

스마트 폰이나 PC 또는 노트북에서 Map 프로그램을 호출하여 쓰기 위해서는 사물 인터넷 Thingspeak 사이트에서처럼 별도의 API 키 값을 준비해야 한다.
Map 영역에서 API 키 값을 부여하는 곳은 크게 구글과 다음이다. 물론 확인해 보지는 않았지만 네이버도 유사하게 키 값을 제공하리라 본다.

단 구글은 언론에서도 시끄럽게 떠들었지만 지도 반출문제가 해결되지 않은 상태로 남아있으며 이 블로그에서는 다음(www.daum.net) 사이트의 API 값을 부여 받았다.

아래에서 다음의 API 값을 부여받는 절차를 알아보자.

다음 검색 창에서  “Daum 지도 API”로 검색을 해보자. 새 창이 뜬 후 클릭하면 Maps API 창을 볼 수 있을 것이다.

중앙의 </> Web 버튼을 누르도록 한다.

사실 Android를 누르든 iOS를 누르든 결과는 동일한 다음의 시작 창으로 넘어간다.

구글의 경우 60일 간 무료 서비스
를 하고 있으나 Daum의 경우 개인별로 하루 20만회 무료 지도 이용을 지원하고 있다. 재정적으로 큰 도움이 될 듯하다. 시작하기 버튼을 누른다.

준비하기 항을 읽어 보면 좌측 바에서 열쇠 모양 아이콘 즉 키발급을 찾아 클릭하도록 한다.

여기서는 용인지도라는 프로젝트가 이미 생성되어 있음을 볼 수 있다. 구글과는 달리 Key 만 따로 발급 받을 수 있는 것은 아니다.
여기서 Key 값을 발급 받으려면 반드시 주황색 앱만들기 버튼을 클릭하여 여러분 자신의 앱만들기 프로젝트를 시도해야 한다. 프로젝트의 제목은 개인 별로 설정하기 바란다.

이 단계에서 Key 와 앱 ID가 발급된다.

아울러 Daum API 사이트 준비하기 창에서 보면 하단에 지도 즉 Map 프로그램이 HTML과 Java Script가 혼합된 사례가 제시 되어 있으니 참고하기 바란다.
이 HTML과 Java Script가 혼합된 프로그램 중에서 일부를 이용하여 아두이노 NodeMCU 프로그램을 작성하도록 한다.
 아직 GPS에 의한 데이터 준비가 곤란 하므로 Array 형태로 LAT[5]와 LON[5]에 의해 인위적으로 값을 설정하였다.

     //Latitude, Longgitude coordinate data
     float LAT[5] ={37.300710,37.300710,37.300710,37.300710,37.300710};
     float LON[5] ={127.09937,127.19937,127.29937,127.39937,127.49937};

첫 번째 데이터에 의한 좌표 (37.300710,127.09937)는 경기도 용인시 신갈 지역의 중심 좌표이다. 샘플링 간격은 delay(10000) 즉 10초로 잡았다. 나머지 좌표 데이터들은 위도를 일정하게 둔 채로 경도 값을 소수 이하 첫째 자리에서 0.1씩 동쪽 방향으로 증가시켰다.

아래에 제공하는 프로그램의 경우 for loop 명령에서 i<1 즉 i=0 인 한 번만 지도를 호출하도록 프로그램 하였다. 10초 간격으로 경도 변화에 따른 호출 지도 변화를 관찰하려면 for loop 명령에서 i<5로 변경하기 바란다.

Webserver_NodeMCU_daum_api_html_01

#include <ESP8266WiFi.h>

 const char* ssid = "AndroidHotspot1234";// 본인 스마트폰 핫스팟 ID 입력
 const char* password = "00000000";//본인 스마트폰 핫스팟 비밀번호 입력

//Latitude, Longgitude coordinate data
 float LAT[5] ={37.300710,37.300710,37.300710,37.300710,37.300710};
 float LON[5] ={127.09937,127.19937,127.29937,127.39937,127.49937};
 
 int ledPin = 2; //

 WiFiServer server(80);

 void setup() {
   Serial.begin(115200);
   delay(10);

   pinMode(ledPin, OUTPUT);
   digitalWrite(ledPin, HIGH);

   // Set WiFi to station mode and disconnect from an AP if it was previously connected
   WiFi.mode(WIFI_STA);
   WiFi.disconnect();
   delay(100);

   Serial.println("Setup done");

   // Connect to WiFi network
   Serial.println();
   Serial.println();
   Serial.print("Connecting to ");
   Serial.println(ssid);

   WiFi.begin(ssid, password);

   while (WiFi.status() != WL_CONNECTED) {
     delay(500);
     Serial.print(".");
   }
   Serial.println("");
   Serial.println("WiFi connected");

   // Start the server
   server.begin();
   Serial.println("Server started");

   // Print the IP address
   Serial.print("Use this URL to connect: ");
   Serial.print("http://");
   Serial.print(WiFi.localIP());
   Serial.println("/");

 }

 void loop() {
   // Check if a client has connected
   WiFiClient client = server.available();
   if (!client) {
     return;
   }

   // Wait until the client sends some data
   Serial.println("new client");
   while(!client.available()){
     delay(1);
   }

   // Read the first line of the request
   String request = client.readStringUntil('\r');
   Serial.println(request);
   client.flush();

   // Match the request
for( int i=0; i<1;i++){
   int value = LOW;
   if (request.indexOf("/LED=ON") != -1)  {
     digitalWrite(ledPin, LOW);
     value = HIGH;
   }

 // Set ledPin according to the request

   // Return the response

   client.println("<!DOCTYPE HTML>");
   client.println("<html>");
//   client.println("<head>");
//client.println("</head>");
client.println("<body>");

  client.println("<div id='map' style='width:500px;height:400px;'></div>");
  client.println("<script type='text/javascript' src=");
  client.println("'//apis.daum.net/maps/maps3.js?apikey");
// 아래의 75f... 인 Daum API 키 값은 본인 발급 받은 것으로 입력
// 아래의 Daum 몌ㅑ zl 값은 모양만 비슷한 짝퉁 키 값임 작동 안됨
  client.println("=75f733183180bfecd2255bc48df82733 '></script>");
  client.println("<script>");
    client.println("var container = document.getElementById('map');");
    client.println("var options = {");
      client.println("center: new daum.maps.LatLng(");
      client.print(LAT[i],DEC);
      client.print(", ");
      client.print(LON[i],DEC);
      client.println("),");
      client.println("level: 3");
    client.println("};");

    client.println("var map = new daum.maps.Map(container, options);");
  client.println("</script>");
//client.println("<input type='button' value='Refresh' onclick=\"location.href='./'\" style='width:200px;height:100px;'>");
client.println("</body>");         
   client.println("</html>");
   delay(10000);
 }
   Serial.println("Client disonnected");
   Serial.println("");

}//프로그램 끝

첫 번째 데이터에 의한 좌표 (37.300710,127.09937)는 경기도 용인시 신갈 지역 지도이다. 스마트폰에서 지도를 신축적으로 확장해서 지역 확인을 해보기 바란다.

만약 자신 거주지의 위도 및 경도 데이터를 가지고 있으면 확인이 더욱 쉬울 것이다.

이 지도와 관련된 수십개의 응용 프로그램이 다음지도 API 사이트에 있으니 입맛에 맞도록 프로그램을 수정해 시도해 보기 바란다.