바로 앞의 블로그에 뒤이어 프로그램 업데이트를 시도하였다. 일차적으로 다음 지도 API 사이트에서 제공하는 지도 제어 예제를 시험하여 보았으나 성공적이지 못했다.
NodeMCU웹서버에서 와이파이를 통해 스마트 폰 웹브라우저의 Request에 응해 client.print(“HTML or CSS or Java Script command”); 기법에 의해 웹 브라우저를 제어하는 것이 불가능하지는 않지만 여러 가지 요인들로 인해 프로그램이 복잡성을 띨 경우 실패하기 십상이다.
단지 바로 앞 블로그에서 사용했던 HTML CSS프로그래밍 기법을 조심스럽게 추가하였고 아날로그 데이터 그래핑 작업에서 사용하였던 Data Refresh 버튼을 CSS와 연동하여 도입하였다.
client.println("<a href=\"/LED=ON\"\" class='button'>Refresh </button></a>");
Data Refresh 버튼 요구가 없어도 for loop 명령에 의해 5개의 위도 및 경도 데이터를
사용하여 지도를 불러 오도록 수정하였다. 아울러 다음 지도에서 레벨 값을 7로 부여하여 좀 더 넓은 지역을 볼 수 있도록 수정하였다.
첫 번째 지도는 수원인터체인지 근방 신갈 지역에서 시작하여 두 번째로는 에버랜드 근방 그 다음은 이천 지역 ... 이런 방식으로 5번 지도를 호출 갱신하였다.
Webserver_nodeMCU_daum_api_html_css_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<5;i++){
int value = LOW;
if (request.indexOf("/LED=ON") != -1) {
Serial.print(request.indexOf("/LED=ON"));
digitalWrite(ledPin, LOW);
value = HIGH;
}
// Set ledPin according to the request
// Return the response
client.println("<!DOCTYPE HTML>");
client.println("<html>");
//배경 색 문자 색 사이즈 HTML CSS 설정
client.println("<head>");
client.println("<style>");
client.println("body {");
client.println("background-color: lightblue;");
client.println("}");
client.println("p {");
client.println("color:red;");
client.println("font-size:250%;");
client.println("}");
//버튼 HTML CSS 설정
client.println(".button {");
client.println("background-color: #4CAF50;");
client.println("border: none;");
client.println("color: white;");
client.println("padding: 15px 32px;");
client.println("text-align: center;");
client.println("text-decoration: none;");
client.println("display: inline-block;");
client.println("font-size: 20px;");
client.println("margin: 14px 20px;");
client.println("cursor: pointer;");
client.println("}");
client.println("</style>");
client.println("</head>");
client.println("<body>");
client.println("<div id='map' style='width:500px;height:400px;'></div>");
// 아래의 75f... 인 Daum API 키 값은 본인 발급 받은 것으로 입력
// 아래의 Daum API 키 값은 모양만 비슷한 짝퉁 킷값 임. 작동 안 됨.
client.println("<script type='text/javascript' src=");
client.println("'//apis.daum.net/maps/maps3.js?apikey");
client.println("'//apis.daum.net/maps/maps3.js?apikey=75f733183180bfecd2255bc48df82733 '></script>");
client.println("<script>");
client.println("var container = document.getElementById('map');");
client.println("var options = {");
//37.300710, 127.09937
client.println("center: new daum.maps.LatLng(");
client.print(LAT[i],DEC);
client.print(", ");
client.print(LON[i],DEC);
client.println("),");
client.println("level: 7");
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("<a href=\"/LED=ON\"\" class='button'>Refresh </button></a>");
client.println("</body>");
client.println("</html>");
delay(10000);
}
Serial.println("Client disonnected");
Serial.println("");
}//프로그램 끝